From 5f753464fd4a6de641860ff6e138021d69a8c332 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Sat, 3 Jan 2026 07:40:59 +0700
Subject: [PATCH] Fix order_created email by waiting for send-notification
 before navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The early termination issue was caused by the page navigating away before
the send-notification function call could complete. Changed from fire-and-forget
to awaiting the email send result before redirecting.

Changes:
- Checkout.tsx: Changed send-notification call to use await instead of .then()/.catch()
- Now waits for email send to complete before navigating to order detail page
- Email failures are caught in try/catch but navigation still proceeds

Technical details:
- Browser was terminating pending requests when navigate() was called immediately
- Early termination: isolate warning indicated function was being killed mid-execution
- Awaiting the function call ensures it completes before page navigation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/pages/Checkout.tsx | 58 +++++++++++++++++++++---------------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/pages/Checkout.tsx b/src/pages/Checkout.tsx
index 9af8dd9..3b8e8f2 100644
--- a/src/pages/Checkout.tsx
+++ b/src/pages/Checkout.tsx
@@ -116,43 +116,43 @@ export default function Checkout() {
         throw new Error(paymentError.message || 'Gagal membuat pembayaran');
       }
 
-      // Send order_created email with QR code (non-blocking, fire-and-forget)
+      // Send order_created email with QR code (wait for completion before navigating)
       console.log('[CHECKOUT] About to send order_created email for order:', order.id);
       console.log('[CHECKOUT] User email:', user.email);
       console.log('[CHECKOUT] Payment data QR string:', paymentData?.qr_string);
 
-      supabase.functions.invoke('send-notification', {
-        body: {
-          template_key: 'order_created',
-          recipient_email: user.email,
-          recipient_name: user.user_metadata.name || user.email?.split('@')[0] || 'Pelanggan',
-          variables: {
-            nama: user.user_metadata.name || user.email?.split('@')[0] || 'Pelanggan',
-            email: user.email,
-            order_id: order.id,
-            tanggal_pesanan: new Date().toLocaleDateString('id-ID', {
-              day: '2-digit',
-              month: 'short',
-              year: 'numeric'
-            }),
-            total: formatIDR(total),
-            metode_pembayaran: 'QRIS',
-            produk: items.map(item => item.title).join(', '),
-            payment_link: `${window.location.origin}/orders/${order.id}`,
-            thank_you_page: `${window.location.origin}/orders/${order.id}`,
-            qr_string: paymentData?.qr_string || '',
-            qr_expiry_time: paymentData?.expired_at ? new Date(paymentData.expired_at).toLocaleString('id-ID') : ''
+      try {
+        const result = await supabase.functions.invoke('send-notification', {
+          body: {
+            template_key: 'order_created',
+            recipient_email: user.email,
+            recipient_name: user.user_metadata.name || user.email?.split('@')[0] || 'Pelanggan',
+            variables: {
+              nama: user.user_metadata.name || user.email?.split('@')[0] || 'Pelanggan',
+              email: user.email,
+              order_id: order.id,
+              tanggal_pesanan: new Date().toLocaleDateString('id-ID', {
+                day: '2-digit',
+                month: 'short',
+                year: 'numeric'
+              }),
+              total: formatIDR(total),
+              metode_pembayaran: 'QRIS',
+              produk: items.map(item => item.title).join(', '),
+              payment_link: `${window.location.origin}/orders/${order.id}`,
+              thank_you_page: `${window.location.origin}/orders/${order.id}`,
+              qr_string: paymentData?.qr_string || '',
+              qr_expiry_time: paymentData?.expired_at ? new Date(paymentData.expired_at).toLocaleString('id-ID') : ''
+            }
           }
-        }
-      }).then(result => {
+        });
         console.log('[CHECKOUT] send-notification called successfully:', result);
-      }).catch(err => {
-        console.error('[CHECKOUT] Failed to send order_created email:', err);
-        console.error('[CHECKOUT] Error details:', JSON.stringify(err));
+      } catch (emailErr) {
+        console.error('[CHECKOUT] Failed to send order_created email:', emailErr);
         // Don't block checkout flow if email fails
-      });
+      }
 
-      console.log('[CHECKOUT] Order creation email call initiated');
+      console.log('[CHECKOUT] Order creation email call completed');
 
       // Clear cart and redirect to order detail page to show QR code
       clearCart();