Fix order_created email by waiting for send-notification before navigation

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>
This commit is contained in:
dwindown
2026-01-03 07:40:59 +07:00
parent 1749056542
commit 5f753464fd

View File

@@ -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();