sync: merge main into dev — bridge KYC state machine

src/app/(mobile-ui)/add-money/[country]/bank/page.tsx

@@ -10,10 +10,14 @@ import { useWallet } from '@/hooks/wallet/useWallet'
 import { formatAmount } from '@/utils/general.utils'
 import { countryData } from '@/components/AddMoney/consts'
 import { useAuth } from '@/context/authContext'
-import useKycStatus from '@/hooks/useKycStatus'
-import useProviderRejectionStatus from '@/hooks/useProviderRejectionStatus'
+import {
+    useBridgeTransferReadiness,
+    getKycModalVariant,
+    getGateProviderMessage,
+} from '@/hooks/useBridgeTransferReadiness'
+import { useModalsContext } from '@/context/ModalsContext'
 import { useCreateOnramp } from '@/hooks/useCreateOnramp'
-import { useRouter, useParams, useSearchParams } from 'next/navigation'
+import { useRouter, useParams } from 'next/navigation'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import countryCurrencyMappings, { isNonEuroSepaCountry, isUKCountry } from '@/constants/countryCurrencyMapping'
 import { formatUnits } from 'viem'
@@ -35,15 +39,13 @@ import { SumsubKycModals } from '@/components/Kyc/SumsubKycModals'
 import { InitiateKycModal } from '@/components/Kyc/InitiateKycModal'
 import posthog from 'posthog-js'
 import { ANALYTICS_EVENTS } from '@/constants/analytics.consts'
-import { addMoneyCountryUrl } from '@/utils/native-routes'
 
 // Step type for URL state
 type BridgeBankStep = 'inputAmount' | 'showDetails'
 
 export default function OnrampBankPage() {
     const router = useRouter()
     const params = useParams()
-    const _searchParams = useSearchParams()
 
     // URL state - persisted in query params
     // Example: /add-money/mexico/bank?step=inputAmount&amount=500
@@ -72,14 +74,12 @@ export default function OnrampBankPage() {
     // regionIntent is NOT passed here to avoid creating a backend record on mount.
     // intent is passed at call time: handleInitiateKyc('STANDARD')
     const sumsubFlow = useMultiPhaseKycFlow({
-        onKycSuccess: async () => {
-            await fetchUser()
+        onKycSuccess: () => {
             setUrlState({ step: 'inputAmount' })
         },
     })
 
-    // read country from path params (web) or query params (native/capacitor)
-    const selectedCountryPath = (params.country as string) || _searchParams.get('country') || ''
+    const selectedCountryPath = params.country as string
 
     const selectedCountry = useMemo(() => {
         if (!selectedCountryPath) return null
@@ -98,10 +98,14 @@ export default function OnrampBankPage() {
     // uk-specific check
     const isUK = isUKCountry(selectedCountryPath)
 
-    const { isUserKycApproved, isUserSumsubKycApproved, isUserBridgeKycApproved, isUserBridgeKycUnderReview } =
-        useKycStatus()
-    const { bridge: bridgeRejection } = useProviderRejectionStatus()
+    const { gate } = useBridgeTransferReadiness()
     const { guardWithTos, showBridgeTos, hideTos } = useBridgeTosGuard()
+    const { setIsSupportModalOpen } = useModalsContext()
+
+    // close kyc modal when sumsub sdk opens
+    useEffect(() => {
+        if (sumsubFlow.showWrapper) setShowKycModal(false)
+    }, [sumsubFlow.showWrapper])
 
     useEffect(() => {
         fetchUser()
@@ -198,18 +202,15 @@ export default function OnrampBankPage() {
         }
     }, [rawTokenAmount, validateAmount, setError])
 
-    const needsBridgeEnrollment = isUserSumsubKycApproved && !isUserBridgeKycApproved && !isUserBridgeKycUnderReview
-
     const handleAmountContinue = () => {
         if (!validateAmount(rawTokenAmount)) return
 
-        if (
-            needsBridgeEnrollment ||
-            !isUserKycApproved ||
-            bridgeRejection.state === 'fixable' ||
-            bridgeRejection.state === 'blocked'
-        ) {
-            setShowKycModal(true)
+        if (gate.type !== 'ready') {
+            if (gate.type === 'accept_tos') {
+                guardWithTos()
+            } else {
+                setShowKycModal(true)
+            }
             return
         }
 
@@ -230,11 +231,6 @@ export default function OnrampBankPage() {
             return
         }
 
-        if (guardWithTos()) {
-            setShowWarningModal(false)
-            return
-        }
-
         setShowWarningModal(false)
         setIsRiskAccepted(false)
         try {
@@ -280,7 +276,7 @@ export default function OnrampBankPage() {
 
     const handleBack = () => {
         if (selectedCountry) {
-            router.push(addMoneyCountryUrl(selectedCountry.path))
+            router.push(`/add-money/${selectedCountry.path}`)
         } else {
             router.push('/add-money')
         }
@@ -409,28 +405,24 @@ export default function OnrampBankPage() {
                     visible={showKycModal}
                     onClose={() => setShowKycModal(false)}
                     onVerify={async () => {
-                        // needsBridgeEnrollment takes priority: user has no bridge customer,
-                        // so rejection state from a stale/deleted customer is irrelevant
-                        if (!needsBridgeEnrollment && bridgeRejection.state === 'fixable') {
+                        if (gate.type === 'fixable_rejection') {
                             await sumsubFlow.handleSelfHealResubmit('BRIDGE')
                         } else {
                             await sumsubFlow.handleInitiateKyc(
                                 'STANDARD',
                                 undefined,
-                                needsBridgeEnrollment || undefined
+                                gate.type === 'needs_enrollment' || undefined
                             )
                         }
+                    }}
+                    onContactSupport={() => {
                         setShowKycModal(false)
+                        setIsSupportModalOpen(true)
                     }}
                     isLoading={sumsubFlow.isLoading}
-                    variant={
-                        needsBridgeEnrollment
-                            ? 'cross_region'
-                            : bridgeRejection.state === 'fixable' || bridgeRejection.state === 'blocked'
-                              ? 'provider_rejection'
-                              : 'default'
-                    }
-                    providerMessage={bridgeRejection.userMessage ?? undefined}
+                    error={sumsubFlow.error}
+                    variant={getKycModalVariant(gate.type)}
+                    providerMessage={getGateProviderMessage(gate)}
                     regionName={selectedCountry?.title}
                 />
 

src/app/(mobile-ui)/qr-pay/page.tsx

@@ -19,7 +19,7 @@
 import { InsufficientSpendableError, SessionKeyGrantRequiredError } from '@/hooks/wallet/useSpendBundle'
 import { useRainCardOverview } from '@/hooks/useRainCardOverview'
 import { rainSpendingPowerToWei } from '@/utils/balance.utils'
-import { isTxReverted, saveRedirectUrl, formatNumberForDisplay } from '@/utils/general.utils'
+import { isTxReverted, formatNumberForDisplay } from '@/utils/general.utils'
 import { getShakeClass, type ShakeIntensity } from '@/utils/perk.utils'
 import { calculateSavingsInCents, isArgentinaMantecaQrPayment, getSavingsMessage } from '@/utils/qr-payment.utils'
 import ErrorAlert from '@/components/Global/ErrorAlert'
@@ -61,6 +61,8 @@
 import { initiateIncreaseLimits } from '@/app/actions/increase-limits'
 import { SumsubKycWrapper } from '@/components/Kyc/SumsubKycWrapper'
 import { useLimits } from '@/hooks/useLimits'
+import { useMultiPhaseKycFlow } from '@/hooks/useMultiPhaseKycFlow'
+import { SumsubKycModals } from '@/components/Kyc/SumsubKycModals'
 
 const MAX_QR_PAYMENT_AMOUNT = '2000'
 const MIN_QR_PAYMENT_AMOUNT = '0.1'
@@ -108,7 +110,8 @@
     }, [paymentProcessor])
 
     const { shouldBlockPay, kycGateState } = useQrKycGate()
-    const { isUserMantecaKycApproved } = useKycStatus()
+    const { isUserMantecaKycApproved, isUserSumsubKycApproved } = useKycStatus()
+    const sumsubFlow = useMultiPhaseKycFlow({})
     const queryClient = useQueryClient()
     const [isShaking, setIsShaking] = useState(false)
     const [shakeIntensity, setShakeIntensity] = useState<ShakeIntensity>('none')
@@ -355,7 +358,12 @@
             }
             return mantecaApi.initiateQrPayment({ qrCode, qrType: qrType ?? undefined })
         },
-        enabled: paymentProcessor === 'MANTECA' && !!qrCode && isPaymentProcessorQR(qrCode) && !paymentLock,
+        enabled:
+            paymentProcessor === 'MANTECA' &&
+            !!qrCode &&
+            isPaymentProcessorQR(qrCode) &&
+            !paymentLock &&
+            !shouldBlockPay,
         retry: (failureCount, error: any) => {
             // Don't retry provider-specific errors
             if (error?.message?.includes('PAYMENT_DESTINATION_DECODING_ERROR')) {
@@ -841,25 +849,19 @@
                         isFixable
                             ? {
                                   text: 'Upload document',
-                                  onClick: () => {
-                                      saveRedirectUrl()
-                                      router.push('/profile/identity-verification')
-                                  },
+                                  onClick: () => sumsubFlow.handleSelfHealResubmit('MANTECA'),
                                   variant: 'purple' as const,
                                   shadowSize: '4' as const,
                                   icon: 'upload',
                               }
                             : {
                                   text: 'Contact support',
-                                  onClick: () => {
-                                      if (typeof window !== 'undefined' && (window as any).$crisp) {
-                                          ;(window as any).$crisp.push(['do', 'chat:open'])
-                                      }
-                                  },
+                                  onClick: () => setIsSupportModalOpen(true),
                                   variant: 'stroke' as const,
                               },
                     ]}
                 />
+                <SumsubKycModals flow={sumsubFlow} />
             </div>
         )
     }
@@ -882,10 +884,8 @@
                     ctas={[
                         {
                             text: 'Verify now',
-                            onClick: () => {
-                                saveRedirectUrl()
-                                router.push('/profile/identity-verification')
-                            },
+                            onClick: () =>
+                                sumsubFlow.handleInitiateKyc('LATAM', undefined, isUserSumsubKycApproved || undefined),
                             variant: 'purple',
                             shadowSize: '4',
                             icon: 'check-circle',
@@ -902,10 +902,8 @@
                     ctas={[
                         {
                             text: 'Continue verification',
-                            onClick: () => {
-                                saveRedirectUrl()
-                                router.push('/profile/identity-verification')
-                            },
+                            onClick: () =>
+                                sumsubFlow.handleInitiateKyc('LATAM', undefined, isUserSumsubKycApproved || undefined),
                             variant: 'purple',
                             shadowSize: '4',
                             icon: 'check-circle',
@@ -920,6 +918,7 @@
                         },
                     ]}
                 />
+                <SumsubKycModals flow={sumsubFlow} />
             </div>
         )
     }
@@ -973,7 +972,8 @@
     }
 
     // check if we're still loading payment data before showing anything
-    const isLoadingPaymentData = isFirstLoad || (paymentProcessor === 'MANTECA' && !paymentLock) || !currency
+    const isLoadingPaymentData =
+        !shouldBlockPay && (isFirstLoad || (paymentProcessor === 'MANTECA' && !paymentLock) || !currency)
 
     if (waitingForMerchantAmount) {
         return <QrPayPageLoading message="Waiting for the merchant to set the amount" />
@@ -1055,7 +1055,7 @@
                                     You paid {qrPayment?.details.merchant.name ?? paymentLock?.paymentRecipientName}
                                 </h1>
                                 <div className="text-2xl font-extrabold">
                                     {currency.symbol}{' '}
                                     {formatNumberForDisplay(
                                         qrPayment?.details.paymentAssetAmount ?? paymentLock?.paymentAssetAmount,
                                         { maxDecimals: 2 }
@@ -1216,10 +1216,10 @@
                                             amount: Number(usdAmount),
                                             currency: {
                                                 amount: qrPayment!.details.paymentAssetAmount,
                                                 code: currency.code,
                                             },
                                             initials: 'QR',
                                             currencySymbol: currency.symbol,
                                             status: 'completed',
                                             date: now,
                                             createdAt: now,
@@ -1228,7 +1228,7 @@
                                                 originalUserRole: EHistoryUserRole.SENDER,
                                                 avatarUrl: methodIcon,
                                                 receipt: {
                                                     exchange_rate: currency.price.toString(),
                                                 },
                                             },
                                             totalAmountCollected: Number(usdAmount),
@@ -1340,7 +1340,7 @@
                     <Card className="space-y-0 px-4">
                         <PaymentInfoRow
                             label="Exchange Rate"
                             value={`1 USD = ${currency.price} ${currency.code.toUpperCase()}`}
                             moreInfoText="Rate shown is current but may vary slightly (~$1-5 ARS) until payment is confirmed."
                         />
                         <PaymentInfoRow label="Peanut fee" value="Sponsored by Peanut!" hideBottomBorder />