[Due for payment 2025-12-16] Migrate ExpensifyCardMissingDetailsPage to Navigation-Based Validation

[mjasikowski]

Problem

ExpensifyCardMissingDetailsPage uses MissingPersonalDetailsContent, which internally manages ValidateCodeActionModal state. This needs to be refactored to use the navigation stack for validation to ensure consistent behavior and animations.

Solution

Refactor the underlying content or the page itself to use a navigation-based validation flow.

Action Items

1. Dependencies: This task relies on the refactoring of MissingPersonalDetailsContent (see related issue for MissingPersonalDetailsMagicCodeModal).
2. Update Logic: Ensure ExpensifyCardMissingDetailsPage works correctly with the refactored MissingPersonalDetailsContent:
   • If MissingPersonalDetailsContent navigates to a validation screen, ensure the flow returns correctly to ExpensifyCardMissingDetailsPage or proceeds as expected.
   • Verify that any props passed to MissingPersonalDetailsContent regarding validation are updated or removed.

Specific Component to Migrate

ExpensifyCardMissingDetailsPage

• Current File: src/pages/settings/Wallet/ExpensifyCardPage/ExpensifyCardMissingDetailsPage.tsx
• Related File: src/pages/MissingPersonalDetails/MissingPersonalDetailsContent.tsx

[abbasifaizan70]

Proposal

Please re-state the problem that we are trying to solve in this issue.

ExpensifyCardMissingDetailsPage uses MissingPersonalDetailsContent, which internally manages ValidateCodeActionModal state. This modal-based approach is inconsistent with the navigation stack pattern used elsewhere in the app and can cause animation/behavior inconsistencies.

Current Behavior:

• MissingPersonalDetailsContent shows MissingPersonalDetailsMagicCodeModal when onComplete prop is provided
• Modal state is managed internally with isValidateCodeActionModalVisible
• This breaks the navigation flow pattern

Expected Behavior:

• Validation should use the navigation stack (similar to MissingPersonalDetailsMagicCodePage)
• Consistent animations and navigation behavior
• Better integration with the app's navigation system

---

What is the root cause of that problem?

MissingPersonalDetailsContent conditionally shows a modal (MissingPersonalDetailsMagicCodeModal) when an onComplete callback is provided, instead of navigating to a dedicated validation screen. This creates two different flows:

1. Without onComplete: Navigates to MISSING_PERSONAL_DETAILS_CONFIRM_MAGIC_CODE screen
2. With onComplete (ExpensifyCardMissingDetailsPage): Shows modal

The modal approach doesn't integrate well with the navigation stack and can cause inconsistent behavior.

---

What changes do you think we should make in order to solve the problem?

Refactor ExpensifyCardMissingDetailsPage to use a navigation-based validation flow, similar to how ExpensifyCardVerifyAccountPage works.

Implementation Details

1. Create new validation screen route

Add a new screen for Expensify card missing details validation:

• Route: SETTINGS_WALLET_CARD_MISSING_DETAILS_CONFIRM_MAGIC_CODE
• Screen: ExpensifyCardMissingDetailsConfirmMagicCodePage
• Location: App/src/pages/settings/Wallet/ExpensifyCardPage/ExpensifyCardMissingDetailsConfirmMagicCodePage.tsx

2. Create ExpensifyCardMissingDetailsConfirmMagicCodePage component

Similar to ExpensifyCardVerifyAccountPage, but handles personal details completion:

function ExpensifyCardMissingDetailsConfirmMagicCodePage({route}: ExpensifyCardMissingDetailsConfirmMagicCodePageProps) {
    const {cardID} = route.params;
    const {translate} = useLocalize();
    const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS, {canBeMissing: false});
    const [draftValues] = useOnyx(ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM_DRAFT, {canBeMissing: false});
    const [countryCode = CONST.DEFAULT_COUNTRY_CODE] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: false});
    const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: false});
    const {setIsCardDetailsLoading, setCardsDetails, setCardsDetailsErrors} = useExpensifyCardContext();
    
    const primaryLogin = account?.primaryLogin ?? '';
    const values = useMemo(() => normalizeCountryCode(getSubstepValues(privatePersonalDetails, draftValues)) as PersonalDetailsForm, [privatePersonalDetails, draftValues]);
    
    const handleSubmitForm = useCallback(
        (validateCode: string) => {
            setIsCardDetailsLoading((prevState: Record<number, boolean>) => ({
                ...prevState,
                [cardID]: true,
            }));
            
            setPersonalDetailsAndRevealExpensifyCard(values, validateCode, countryCode, Number.parseInt(cardID, 10))
                .then((value) => {
                    setCardsDetails((prevState) => ({...prevState, [cardID]: value}));
                    setCardsDetailsErrors((prevState) => ({
                        ...prevState,
                        [cardID]: '',
                    }));
                    Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAIN_CARD.getRoute(cardID));
                })
                .catch((error: string) => {
                    setCardsDetailsErrors((prevState) => ({
                        ...prevState,
                        [cardID]: error,
                    }));
                    Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAIN_CARD.getRoute(cardID));
                })
                .finally(() => {
                    setIsCardDetailsLoading((prevState: Record<number, boolean>) => ({...prevState, [cardID]: false}));
                });
        },
        [cardID, countryCode, values, setCardsDetails, setCardsDetailsErrors, setIsCardDetailsLoading],
    );
    
    return (
        <ValidateCodeActionContent
            title={translate('cardPage.validateCardTitle')}
            descriptionPrimary={translate('cardPage.enterMagicCode', {contactMethod: primaryLogin})}
            sendValidateCode={() => requestValidateCodeAction()}
            validateCodeActionErrorField="personalDetails"
            handleSubmitForm={handleSubmitForm}
            validateError={getLatestError(privatePersonalDetails?.errors)}
            clearError={() => clearPersonalDetailsErrors()}
            onClose={() => {
                resetValidateActionCodeSent();
                Navigation.goBack(ROUTES.SETTINGS_WALLET_CARD_MISSING_DETAILS.getRoute(cardID));
            }}
            isLoading={privatePersonalDetails?.isLoading}
        />
    );
}

3. Update MissingPersonalDetailsContent

Remove the modal logic and always navigate to validation screen:

const handleFinishStep = useCallback(() => {
    if (!values) {
        return;
    }
    if (!onComplete) {
        Navigation.navigate(ROUTES.MISSING_PERSONAL_DETAILS_CONFIRM_MAGIC_CODE);
        return;
    }
    // Navigate to card-specific validation screen
    Navigation.navigate(ROUTES.SETTINGS_WALLET_CARD_MISSING_DETAILS_CONFIRM_MAGIC_CODE.getRoute(cardID));
}, [onComplete, values, cardID]);

4. Update ExpensifyCardMissingDetailsPage

Remove onComplete prop since navigation handles the flow:

return (
    <MissingPersonalDetailsContent
        privatePersonalDetails={privatePersonalDetails}
        draftValues={draftValues}
        headerTitle={translate('cardPage.cardDetails.revealDetails')}
        cardID={cardID}
    />
);

[etCoderDysto]

I can work on it if it open to contributor

[mjasikowski]

Sorry, this is not open to contributors.

[jmusial]

Gonna take this one next