[TASK-14388] Feat/request on ramp improvements

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

@@ -216,7 +216,7 @@ export default function OnrampBankPage() {
             if (!user?.user.userId) throw new Error('User not found')
             const result = await updateUserById({
                 userId: user.user.userId,
-                fullName: `${data.firstName} ${data.lastName}`,
+                fullName: data.fullName,
                 email: data.email,
             })
             if (result.error) {

src/app/[...recipient]/client.tsx

@@ -27,12 +27,13 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { fetchTokenPrice } from '@/app/actions/tokens'
 import { GenericBanner } from '@/components/Global/Banner'
-import { useRequestFulfillmentFlow } from '@/context/RequestFulfillmentFlowContext'
+import { RequestFulfillmentBankFlowStep, useRequestFulfillmentFlow } from '@/context/RequestFulfillmentFlowContext'
 import ExternalWalletFulfilManager from '@/components/Request/views/ExternalWalletFulfilManager'
 import ActionList from '@/components/Common/ActionList'
 import NavHeader from '@/components/Global/NavHeader'
 import { ReqFulfillBankFlowManager } from '@/components/Request/views/ReqFulfillBankFlowManager'
 import SupportCTA from '@/components/Global/SupportCTA'
+import { BankRequestType, useDetermineBankRequestType } from '@/hooks/useDetermineBankRequestType'
 
 export type PaymentFlow = 'request_pay' | 'external_wallet' | 'direct_pay' | 'withdraw'
 interface Props {
@@ -62,7 +63,13 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
     const [currencyAmount, setCurrencyAmount] = useState<string>('')
     const { isDrawerOpen, selectedTransaction, openTransactionDetails } = useTransactionDetailsDrawer()
     const [isLinkCancelling, setisLinkCancelling] = useState(false)
-    const { showExternalWalletFulfilMethods, showRequestFulfilmentBankFlowManager } = useRequestFulfillmentFlow()
+    const {
+        showExternalWalletFulfilMethods,
+        showRequestFulfilmentBankFlowManager,
+        setShowRequestFulfilmentBankFlowManager,
+        setFlowStep: setRequestFulfilmentBankFlowStep,
+    } = useRequestFulfillmentFlow()
+    const { requestType } = useDetermineBankRequestType(chargeDetails?.requestLink.recipientAccount.userId ?? '')
 
     // determine if the current user is the recipient of the transaction
     const isCurrentUserRecipient = chargeDetails?.requestLink.recipientAccount?.userId === user?.user.userId
@@ -385,6 +392,21 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
         }
     }, [transactionForDrawer, currentView, dispatch, openTransactionDetails, isExternalWalletFlow, chargeId])
 
+    // Send to bank step if its mentioned in the URL and guest KYC is not needed
+    useEffect(() => {
+        const stepFromURL = searchParams.get('step')
+        if (
+            parsedPaymentData &&
+            chargeDetails &&
+            requestType !== BankRequestType.GuestKycNeeded &&
+            stepFromURL === 'bank'
+        ) {
+            setShowRequestFulfilmentBankFlowManager(true)
+
+            setRequestFulfilmentBankFlowStep(RequestFulfillmentBankFlowStep.BankCountryList)
+        }
+    }, [searchParams, parsedPaymentData, chargeDetails, requestType])
+
     let showActionList = flow !== 'direct_pay'
 
     if (flow === 'direct_pay' && !user) {

src/components/AddMoney/UserDetailsForm.tsx

@@ -5,8 +5,7 @@ import BaseInput from '@/components/0_Bruddle/BaseInput'
 import ErrorAlert from '@/components/Global/ErrorAlert'
 
 export type UserDetailsFormData = {
-    firstName: string
-    lastName: string
+    fullName: string
     email: string
 }
 
@@ -27,8 +26,7 @@ export const UserDetailsForm = forwardRef<{ handleSubmit: () => void }, UserDeta
             formState: { errors, isValid, isValidating },
         } = useForm<UserDetailsFormData>({
             defaultValues: {
-                firstName: initialData?.firstName ?? '',
-                lastName: initialData?.lastName ?? '',
+                fullName: initialData?.fullName ?? '',
                 email: initialData?.email ?? '',
             },
             mode: 'onBlur',
@@ -94,8 +92,7 @@ export const UserDetailsForm = forwardRef<{ handleSubmit: () => void }, UserDeta
                         className="space-y-4"
                     >
                         <div className="w-full space-y-4">
-                            {renderInput('firstName', 'First Name', { required: 'First name is required' })}
-                            {renderInput('lastName', 'Last Name', { required: 'Last name is required' })}
+                            {renderInput('fullName', 'Full Name', { required: 'Full name is required' })}
                             {renderInput('email', 'E-mail', {
                                 required: 'Email is required',
                                 pattern: {

src/components/Common/ActionList.tsx

@@ -96,6 +96,7 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin
             switch (method.id) {
                 case 'bank':
                     if (requestType === BankRequestType.GuestKycNeeded) {
+                        addParamStep('bank')
                         setIsGuestVerificationModalOpen(true)
                     } else {
                         setShowRequestFulfilmentBankFlowManager(true)
@@ -188,6 +189,7 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin
                 isOpen={isGuestVerificationModalOpen}
                 onClose={() => setIsGuestVerificationModalOpen(false)}
                 description="To fulfill this request using bank account, please create an account and verify your identity."
+                redirectToVerification
             />
         </div>
     )

src/components/Global/PostSignupActionManager/index.tsx

@@ -59,6 +59,7 @@ export const PostSignupActionManager = ({
                 setShowModal(false)
                 localStorage.removeItem('redirect')
             }}
+            preventClose // Prevent closing the modal by clicking outside
             title={actionConfig.title}
             description={actionConfig.description}
             icon={actionConfig.icon as IconName}

src/components/Global/PostSignupActionManager/post-signup-action.consts.ts

@@ -11,4 +11,14 @@ export const POST_SIGNUP_ACTIONS = [
             icon: 'check' as IconName,
         },
     },
+    {
+        // this regex will match any path that resembles the request link, this helps in determing if the user is coming from a request link
+        pathPattern: /^\/[^\/]+\/[^\/\?]+\?.*chargeId=/,
+        config: {
+            title: 'Verification complete!',
+            description: `Your identity has been successfully verified. You can now send the money your friend requested!`,
+            cta: 'Send it!',
+            icon: 'check' as IconName,
+        },
+    },
 ]

src/components/Kyc/index.tsx

@@ -3,6 +3,8 @@ import { useKycFlow } from '@/hooks/useKycFlow'
 import IframeWrapper from '@/components/Global/IframeWrapper'
 import { KycVerificationInProgressModal } from './KycVerificationInProgressModal'
 import { IconName } from '@/components/Global/Icons/Icon'
+import { saveRedirectUrl } from '@/utils'
+import useClaimLink from '../Claim/useClaimLink'
 
 interface KycModalFlowProps {
     isOpen: boolean
@@ -22,10 +24,13 @@ export const InitiateKYCModal = ({ isOpen, onClose, onKycSuccess, onManualClose,
         handleIframeClose,
         closeVerificationProgressModal,
     } = useKycFlow({ onKycSuccess, flow, onManualClose })
+    const { addParamStep } = useClaimLink()
 
     const handleVerifyClick = async () => {
+        addParamStep('bank')
         const result = await handleInitiateKyc()
         if (result?.success) {
+            saveRedirectUrl()
             onClose()
         }
     }

src/components/Profile/views/IdentityVerification.view.tsx

@@ -33,8 +33,7 @@ const IdentityVerificationView = () => {
 
     const initialUserDetails: Partial<UserDetailsFormData> = useMemo(
         () => ({
-            firstName: user?.user.fullName ? firstName : '',
-            lastName: user?.user.fullName ? lastName : '',
+            fullName: user?.user.fullName ?? '',
             email: user?.user.email ?? '',
         }),
         [user?.user.fullName, user?.user.email, firstName, lastName]
@@ -47,7 +46,7 @@ const IdentityVerificationView = () => {
             if (!user?.user.userId) throw new Error('User not found')
             const result = await updateUserById({
                 userId: user.user.userId,
-                fullName: `${data.firstName} ${data.lastName}`,
+                fullName: data.fullName,
                 email: data.email,
             })
             if (result.error) {

src/components/Request/views/ReqFulfillBankFlowManager.tsx

@@ -126,7 +126,7 @@ export const ReqFulfillBankFlowManager = ({ parsedPaymentData }: { parsedPayment
             if (!user?.user.userId) throw new Error('User not found')
             const result = await updateUserById({
                 userId: user.user.userId,
-                fullName: `${data.firstName} ${data.lastName}`,
+                fullName: `${data.fullName}`,
                 email: data.email,
             })
             if (result.error) {