working auto

src/pages/pay/oil/capture_authorize.vue

@@ -134,7 +134,42 @@
                 <div class="font-bold">When Delivered</div>
                 <div class="opacity-80">{{ deliveryOrder.when_delivered }}</div>
               </div>
-             
+
+            </div>
+          </div>
+
+          <!-- Transaction Summary -->
+          <div v-if="transaction && transaction.auth_net_transaction_id" class="bg-neutral rounded-lg p-5">
+            <h3 class="text-xl font-bold mb-4">Transaction Summary</h3>
+            <div class="space-y-3">
+              <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                <div class="flex justify-between">
+                  <span class="font-bold">Transaction ID:</span>
+                  <span class="font-mono">{{ transaction.auth_net_transaction_id }}</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="font-bold">Pre-Auth Amount:</span>
+                  <span>${{ transaction.preauthorize_amount || '0.00' }}</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="font-bold">Charge Amount:</span>
+                  <span>${{ transaction.charge_amount || '0.00' }}</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="font-bold">Type:</span>
+                  <span :class="getTypeColor(transaction.transaction_type)">{{ transaction.transaction_type === 0 ? 'Charge' : transaction.transaction_type === 1 ? 'Auth' : 'Capture' }}</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="font-bold">Date:</span>
+                  <span>{{ transaction.created_at }}</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="font-bold">Status:</span>
+                  <span :class="transaction.status === 0 ? 'text-success' : 'text-error'">
+                    {{ transaction.status === 0 ? 'Approved' : 'Declined' }}
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
 
@@ -173,6 +208,9 @@
           <!-- Capture Payment Form -->
           <div class="bg-base-100 rounded-lg p-5">
             <h2 class="text-2xl font-bold mb-4">Capture Payment</h2>
+            <div v-if="preAuthAmount > 0" class="mb-2 text-sm text-orange-600">
+              Max Capture amount: ${{ preAuthAmount.toFixed(2) }}
+            </div>
             <div class="space-y-4">
               <div class="form-control">
                 <label class="label">
@@ -219,6 +257,24 @@
       </div>
     </div>
   </div>
+
+  <!-- Payment Capture Success Modal -->
+  <div class="modal" :class="{ 'modal-open': showPaymentModal }">
+    <div class="modal-box">
+      <h3 class="font-bold text-lg">Payment Captured Successfully</h3>
+      <div class="py-4">
+        <div v-if="modalStep === 0" class="text-center">
+          <span class="text-lg mb-3">Transaction ID: {{ transaction?.auth_net_transaction_id }}</span>
+          <div class="loading loading-spinner loading-lg text-success mb-3"></div>
+          <p class="text-sm text-gray-600">Processing payment capture...</p>
+        </div>
+        <div v-else-if="modalStep === 1" class="text-center">
+          <span class="text-lg mb-3">Transaction ID: {{ transaction?.auth_net_transaction_id }}</span>
+          <p class="text-lg">Captured Amount: ${{ modalCapturedAmount }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
   <Footer />
 </template>
 
@@ -248,6 +304,9 @@ export default defineComponent({
       captureAmount: 0,
       preAuthAmount: 0,
       transaction: null as any,
+      showPaymentModal: false,
+      modalStep: 0,
+      modalCapturedAmount: 0,
 
       userCard: {
         date_added: '',
@@ -493,13 +552,11 @@ export default defineComponent({
         // ✅ FIX: Improved logic to handle both success and declines properly.
         if (response.data && response.data.status === 0) {
           // This is the APPROVED case
-          notify({
-            title: "Success",
-            text: "Payment captured successfully!",
-            type: "success",
-          });
-          this.$router.push({ name: 'deliveryOrder', params: { id: this.$route.params.id } });
-        
+          this.modalCapturedAmount = this.captureAmount;
+          this.showPaymentModal = true;
+          setTimeout(() => { this.modalStep = 1 }, 2000);
+          setTimeout(() => { this.showPaymentModal = false; this.$router.push({ name: 'deliveryOrder', params: { id: this.$route.params.id } }) }, 4000);
+
         } else if (response.data && response.data.status === 1) {
           // This is the DECLINED case
           const reason = response.data.rejection_reason || "The payment was declined by the gateway.";
@@ -606,6 +663,16 @@ export default defineComponent({
     cancelCapture() {
       this.$router.push({ name: 'finalizeTicket', params: { id: this.$route.params.id } });
     },
+
+    getTypeColor(transactionType: number) {
+      switch (transactionType) {
+        case 1: return 'text-blue-600';    // Auth
+        case 0: return 'text-orange-600';   // Charge
+        case 2: return 'text-purple-600';   // Capture
+        case 3: return 'text-green-600';    // Delivery/Other
+        default: return 'text-gray-600';
+      }
+    },
   },
 })
 </script>