diff --git a/src/components/MoneyReportHeaderActions/MoneyReportHeaderSelectionDropdown.tsx b/src/components/MoneyReportHeaderActions/MoneyReportHeaderSelectionDropdown.tsx index cddb34a778f5..048a162f2880 100644 --- a/src/components/MoneyReportHeaderActions/MoneyReportHeaderSelectionDropdown.tsx +++ b/src/components/MoneyReportHeaderActions/MoneyReportHeaderSelectionDropdown.tsx @@ -333,10 +333,11 @@ function MoneyReportHeaderSelectionDropdown({reportID, primaryAction, isReportIn iouReport={moneyRequestReport} onPaymentSelect={onSelectionModePaymentSelect} onWorkspacePolicySelect={(selectedPolicy, triggerKYCFlow) => { - if (shouldBlockAction(undefined, true)) { + const continueWithWorkspace = () => triggerKYCFlow({policy: selectedPolicy}); + if (shouldBlockAction(undefined, true, continueWithWorkspace)) { return; } - triggerKYCFlow({policy: selectedPolicy}); + continueWithWorkspace(); }} onSuccessfulKYC={selectionModeKYCSuccess} primaryAction={primaryAction} diff --git a/src/components/MoneyRequestReportView/SelectionToolbar/index.tsx b/src/components/MoneyRequestReportView/SelectionToolbar/index.tsx index 975c9d346e8c..bcd248d9acb0 100644 --- a/src/components/MoneyRequestReportView/SelectionToolbar/index.tsx +++ b/src/components/MoneyRequestReportView/SelectionToolbar/index.tsx @@ -262,10 +262,11 @@ function SelectionToolbar({reportID, transactions, reportActions}: SelectionTool onSelectionModePaymentSelect={onSelectionModePaymentSelect} selectionModeKYCSuccess={selectionModeKYCSuccess} onWorkspacePolicySelect={(selectedPolicy, triggerKYCFlow) => { - if (shouldBlockAction(undefined, true)) { + const continueWithWorkspace = () => triggerKYCFlow({policy: selectedPolicy}); + if (shouldBlockAction(undefined, true, continueWithWorkspace)) { return; } - triggerKYCFlow({policy: selectedPolicy}); + continueWithWorkspace(); }} primaryAction={primaryAction} selectedTransactionsOptions={selectedTransactionsOptions} diff --git a/src/hooks/useSelectionModePayment.ts b/src/hooks/useSelectionModePayment.ts index a8752cd9817d..0bfe0f734c50 100644 --- a/src/hooks/useSelectionModePayment.ts +++ b/src/hooks/useSelectionModePayment.ts @@ -10,8 +10,6 @@ import {payInvoice, payMoneyRequest} from '@libs/actions/IOU/PayMoneyRequest'; import {generateDefaultWorkspaceName} from '@libs/actions/Policy/Policy'; import deferModalPresentationAfterPopoverDismiss from '@libs/deferModalPresentationAfterPopoverDismiss'; import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID'; -import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute'; -import Navigation from '@libs/Navigation/Navigation'; import {isTrackOnboardingChoice} from '@libs/OnboardingUtils'; import type {KYCFlowEvent, TriggerKYCFlow, WorkspacePolicyPaymentOption} from '@libs/PaymentUtils'; import {selectPaymentType} from '@libs/PaymentUtils'; @@ -22,11 +20,10 @@ import refreshSearchAfterReportAction from '@libs/SearchRefreshUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import {DYNAMIC_ROUTES} from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; -import {delegateEmailSelector, isUserValidatedSelector} from '@selectors/Account'; +import {delegateEmailSelector} from '@selectors/Account'; import {hasSeenTourSelector} from '@selectors/Onboarding'; import {personalDetailsLoginSelector} from '@selectors/PersonalDetails'; import truncate from 'lodash/truncate'; @@ -46,6 +43,7 @@ import usePaymentOptions from './usePaymentOptions'; import usePermissions from './usePermissions'; import usePolicy from './usePolicy'; import useSearchShouldCalculateTotals from './useSearchShouldCalculateTotals'; +import useVerifyAccountAndResume from './useVerifyAccountAndResume'; type HoldMenuOpenParams = { requestType: ActionHandledType; @@ -96,7 +94,6 @@ function useSelectionModePayment({ const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(moneyRequestReport?.chatReportID)}`); const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(moneyRequestReport?.policyID)}`); const [session] = useOnyx(ONYXKEYS.SESSION); - const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: isUserValidatedSelector}); const [delegateEmail] = useOnyx(ONYXKEYS.ACCOUNT, {selector: delegateEmailSelector}); const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${getNonEmptyStringOnyxID(moneyRequestReport?.reportID)}`); @@ -124,6 +121,9 @@ function useSelectionModePayment({ const {showLockedAccountModal} = useLockedAccountActions(); const kycWallRef = useContext(KYCWallContext); + // Store the pending payment and resume it after the user validates, instead of dropping it on the way to the magic-code screen. + const {isUserValidated, verifyAccountAndResume} = useVerifyAccountAndResume((retry) => retry?.()); + const expensifyIcons = useMemoizedLazyExpensifyIcons(['Cash', 'ArrowRight', 'Building'] as const); const hasViolations = hasViolationsReportUtils(moneyRequestReport?.reportID, allTransactionViolations, accountID, email ?? ''); @@ -138,7 +138,7 @@ function useSelectionModePayment({ } }; - const shouldBlockAction = (paymentMethodType?: PaymentMethodType, deferBlockingPresentation = false) => { + const shouldBlockAction = (paymentMethodType?: PaymentMethodType, deferBlockingPresentation = false, retry?: () => void) => { if (isDelegateAccessRestricted) { presentBlockingAction(showDelegateNoAccessModal, deferBlockingPresentation); return true; @@ -148,7 +148,7 @@ function useSelectionModePayment({ return true; } if (!isUserValidated && paymentMethodType !== CONST.IOU.PAYMENT_TYPE.ELSEWHERE) { - presentBlockingAction(() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.VERIFY_ACCOUNT.path)), deferBlockingPresentation); + presentBlockingAction(() => verifyAccountAndResume(retry), deferBlockingPresentation); return true; } return false; @@ -265,10 +265,11 @@ function useSelectionModePayment({ })(); const handleWorkspaceSelected = (wp: OnyxTypes.Policy) => { - if (shouldBlockAction(undefined, true)) { + const continueWithWorkspace = () => kycWallRef.current?.continueAction?.({policy: wp}); + if (shouldBlockAction(undefined, true, continueWithWorkspace)) { return; } - kycWallRef.current?.continueAction?.({policy: wp}); + continueWithWorkspace(); }; const paymentSubMenuItems: PopoverMenuItem[] = (() => { @@ -318,10 +319,11 @@ function useSelectionModePayment({ }; const onSelectionModePaymentSelect = (event: KYCFlowEvent, iouPaymentType: PaymentMethodType, triggerKYCFlow: TriggerKYCFlow) => { - if (shouldBlockAction(iouPaymentType, true)) { + const resumePaymentSelect = () => invokePaymentSelect(event, iouPaymentType, triggerKYCFlow); + if (shouldBlockAction(iouPaymentType, true, resumePaymentSelect)) { return; } - invokePaymentSelect(event, iouPaymentType, triggerKYCFlow); + resumePaymentSelect(); }; const selectionModeKYCSuccess = (type?: PaymentMethodType) => { diff --git a/src/hooks/useSelectionModeReportActions.ts b/src/hooks/useSelectionModeReportActions.ts index 230dec84e9ec..4d095b9fea75 100644 --- a/src/hooks/useSelectionModeReportActions.ts +++ b/src/hooks/useSelectionModeReportActions.ts @@ -209,10 +209,11 @@ function useSelectionModeReportActions({ const onSelectionModePaymentSelect = (event: KYCFlowEvent, iouPaymentType: PaymentMethodType, triggerKYCFlow: TriggerKYCFlow) => { TransitionTracker.runAfterTransitions({ callback: () => { - if (shouldBlockAction(iouPaymentType)) { + const resumePaymentSelect = () => invokePaymentSelect(event, iouPaymentType, triggerKYCFlow); + if (shouldBlockAction(iouPaymentType, false, resumePaymentSelect)) { return; } - invokePaymentSelect(event, iouPaymentType, triggerKYCFlow); + resumePaymentSelect(); }, waitForUpcomingTransition: true, });