root
/
Midtrans-Middleware
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

epic-6-snap-hybrid-complete #15

Merged
root merged 6 commits from epic-6-snap-hybrid-complete into dev 2025-12-04 08:25:50 +00:00
Conversation 0 Commits 6 Files Changed 28 +28 -5
2 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1f1393be30 - Show all commits

18
src/pages/CheckoutPage.tsx
View File

@ -6,9 +6,6 @@ import { PaymentMethodList } from '../features/payments/components/PaymentMethod
import type { PaymentMethod } from '../features/payments/components/PaymentMethodList'
import { SnapPaymentTrigger } from '../features/payments/snap/SnapPaymentTrigger'
import { usePaymentConfig } from '../features/payments/lib/usePaymentConfig'
import { Logger } from '../lib/logger'
import React from 'react'
interface AutoSnapPaymentProps {
orderId: string
amount: number
@ -24,7 +21,8 @@ function AutoSnapPayment({ orderId, amount, customer, onChargeInitiated, onSucce
const hasTriggered = React.useRef(false)
React.useEffect(() => {
if (hasTriggered.current) return
// Only trigger when we have valid orderId and amount
if (!orderId || !amount || hasTriggered.current) return
hasTriggered.current = true
const triggerPayment = async () => {
@ -97,6 +95,18 @@ function AutoSnapPayment({ orderId, amount, customer, onChargeInitiated, onSucce
return () => clearTimeout(timer)
}, [orderId, amount, customer, onChargeInitiated, onSuccess, onError])
// Don't render anything until we have valid data
if (!orderId || !amount) {
return (
<div className="text-center">
<div className="space-y-2">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent mx-auto"></div>
<p className="text-sm text-gray-600">Memuat data pembayaran...</p>
</div>
</div>
)
}
return (
<div className="space-y-4">
{error && (

15
src/pages/PayPage.tsx
View File

@ -27,7 +27,8 @@ function AutoSnapPayment({ orderId, amount, customer, onChargeInitiated, onSucce
const hasTriggered = React.useRef(false)
React.useEffect(() => {
if (hasTriggered.current) return
// Only trigger when we have valid orderId and amount
if (!orderId || !amount || hasTriggered.current) return
hasTriggered.current = true
const triggerPayment = async () => {
@ -100,6 +101,18 @@ function AutoSnapPayment({ orderId, amount, customer, onChargeInitiated, onSucce
return () => clearTimeout(timer)
}, [orderId, amount, customer, onChargeInitiated, onSuccess, onError])
// Don't render anything until we have valid data
if (!orderId || !amount) {
return (
<div className="text-center">
<div className="space-y-2">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent mx-auto"></div>
<p className="text-sm text-gray-600">Memuat data pembayaran...</p>
</div>
</div>
)
}
return (
<div className="space-y-4">
{error && (