Skip to content

[Due for payment 2026-03-06] [BT-004] Create DynamicVerifyAccountPage Component #80909

Description

@mjasikowski

Description

Current State:

  • Multiple VerifyAccountPage components exist for different contexts
  • Each has hardcoded backTo logic based on the flow it serves
  • The base component logic is in VerifyAccountPageBase.tsx
  • Example existing implementations:
    • pages/settings/Wallet/VerifyAccountPage/index.tsx
    • pages/settings/Security/TwoFactorAuth/VerifyAccountPage.tsx

Expected State:

  • Create a single DynamicVerifyAccountPage component
  • Component reuses VerifyAccountPageBase for core functionality
  • Implements dynamic back logic using getPathWithoutSuffix()
  • Implements forward logic (static destination or via FORWARD_TO_MAPPINGS)
  • No backTo parameter in URL - context comes from the path itself

Implementation:

Create App/src/pages/settings/DynamicVerifyAccountPage.tsx:

import React from 'react';
import Navigation from '@libs/Navigation/Navigation';
import DYNAMIC_ROUTES from '@src/ROUTES';
import VerifyAccountPageBase from './VerifyAccountPageBase';

function getPathWithoutSuffix(dynamicSuffix: string): string {
    const path = Navigation.getActiveRoute();
    return path ? path.replace(`/${dynamicSuffix}`, '') : ROUTES.HOME;
}

function DynamicVerifyAccountPage() {
    const handleGoBack = () => {
        const backRoute = getPathWithoutSuffix(DYNAMIC_ROUTES.VERIFY_ACCOUNT.path);
        Navigation.goBack(backRoute);
    };

    return (
        <VerifyAccountPageBase
            onGoBack={handleGoBack}
            onGoForward={handleGoForward}
        />
    );
}

export default DynamicVerifyAccountPage;

Scope

Files:

  • App/src/pages/settings/DynamicVerifyAccountPage.tsx (new file)
  • May need to modify VerifyAccountPageBase.tsx if it doesn't accept callback props

Dependencies:

Metadata

Metadata

Labels

Awaiting PaymentAuto-added when associated PR is deployed to productionInternalRequires API changes or must be handled by Expensify staffWeeklyKSv2

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions