[TS migration] Migrate 'EnablePayments' pages to TypeScript

src/CONST.ts

@@ -512,6 +512,10 @@ const CONST = {
     TERMS_URL: `${USE_EXPENSIFY_URL}/terms`,
     PRIVACY_URL: `${USE_EXPENSIFY_URL}/privacy`,
     LICENSES_URL: `${USE_EXPENSIFY_URL}/licenses`,
+    ACH_TERMS_URL: `${USE_EXPENSIFY_URL}/achterms`,
+    WALLET_AGREEMENT_URL: `${USE_EXPENSIFY_URL}/walletagreement`,
+    HELP_LINK_URL: `${USE_EXPENSIFY_URL}/usa-patriot-act`,
+    ELECTRONIC_DISCLOSURES_URL: `${USE_EXPENSIFY_URL}/esignagreement`,
     GITHUB_RELEASE_URL: 'https://api.github.com/repos/expensify/app/releases/latest',
     ADD_SECONDARY_LOGIN_URL: encodeURI('settings?param={"section":"account","openModal":"secondaryLogin"}'),
     MANAGE_CARDS_URL: 'domain_companycards',

src/ONYXKEYS.ts

@@ -399,6 +399,8 @@ const ONYXKEYS = {
         EXIT_SURVEY_REASON_FORM_DRAFT: 'exitSurveyReasonFormDraft',
         EXIT_SURVEY_RESPONSE_FORM: 'exitSurveyResponseForm',
         EXIT_SURVEY_RESPONSE_FORM_DRAFT: 'exitSurveyResponseFormDraft',
+        WALLET_ADDITIONAL_DETAILS: 'walletAdditionalDetails',
+        WALLET_ADDITIONAL_DETAILS_DRAFT: 'walletAdditionalDetailsDraft',
     },
 } as const;
 
@@ -443,6 +445,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM]: FormTypes.ReimbursementAccountForm;
     [ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT]: FormTypes.PersonalBankAccountForm;
     [ONYXKEYS.FORMS.WORKSPACE_DESCRIPTION_FORM]: FormTypes.WorkspaceDescriptionForm;
+    [ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS]: FormTypes.AdditionalDetailStepForm;
 };
 
 type OnyxFormDraftValuesMapping = {

src/components/withCurrentUserPersonalDetails.tsx

@@ -43,4 +43,4 @@ export default function <TProps extends WithCurrentUserPersonalDetailsProps, TRe
 }
 
 export {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps};
-export type {WithCurrentUserPersonalDetailsProps};
+export type {WithCurrentUserPersonalDetailsProps, CurrentUserPersonalDetails};

src/libs/PersonalDetailsUtils.ts

@@ -1,6 +1,7 @@
 import Str from 'expensify-common/lib/str';
 import type {OnyxEntry, OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
+import type {CurrentUserPersonalDetails} from '@components/withCurrentUserPersonalDetails';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetails, PersonalDetailsList, PrivatePersonalDetails} from '@src/types/onyx';
@@ -235,7 +236,7 @@ function createDisplayName(login: string, passedPersonalDetails: Pick<PersonalDe
  * If the login is the same as the displayName, then they don't exist,
  * so we return empty strings instead.
  */
-function extractFirstAndLastNameFromAvailableDetails({login, displayName, firstName, lastName}: PersonalDetails): FirstAndLastName {
+function extractFirstAndLastNameFromAvailableDetails({login, displayName, firstName, lastName}: CurrentUserPersonalDetails): FirstAndLastName {
     // It's possible for firstName to be empty string, so we must use "||" to consider lastName instead.
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     if (firstName || lastName) {

src/libs/actions/Wallet.ts

@@ -52,7 +52,7 @@ function openOnfidoFlow() {
     API.read(READ_COMMANDS.OPEN_ONFIDO_FLOW, {}, {optimisticData, finallyData});
 }
 
-function setAdditionalDetailsQuestions(questions: WalletAdditionalQuestionDetails[], idNumber: string) {
+function setAdditionalDetailsQuestions(questions: WalletAdditionalQuestionDetails[] | null, idNumber?: string) {
     Onyx.merge(ONYXKEYS.WALLET_ADDITIONAL_DETAILS, {questions, idNumber});
 }
 
@@ -79,7 +79,7 @@ function updatePersonalDetails(personalDetails: UpdatePersonalDetailsForWalletPa
     const optimisticData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: ONYXKEYS.WALLET_ADDITIONAL_DETAILS,
+            key: ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS,
             value: {
                 isLoading: true,
                 errors: null,
@@ -91,7 +91,7 @@ function updatePersonalDetails(personalDetails: UpdatePersonalDetailsForWalletPa
     const finallyData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: ONYXKEYS.WALLET_ADDITIONAL_DETAILS,
+            key: ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS,
             value: {
                 isLoading: false,
             },
@@ -232,7 +232,7 @@ function answerQuestionsForWallet(answers: WalletQuestionAnswer[], idNumber: str
     const optimisticData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: ONYXKEYS.WALLET_ADDITIONAL_DETAILS,
+            key: ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS,
             value: {
                 isLoading: true,
             },
@@ -242,7 +242,7 @@ function answerQuestionsForWallet(answers: WalletQuestionAnswer[], idNumber: str
     const finallyData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: ONYXKEYS.WALLET_ADDITIONAL_DETAILS,
+            key: ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS,
             value: {
                 isLoading: false,
             },

src/pages/EnablePayments/ActivateStep.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {withOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
+import ConfirmationPage from '@components/ConfirmationPage';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import LottieAnimations from '@components/LottieAnimations';
+import useLocalize from '@hooks/useLocalize';
+import * as PaymentMethods from '@userActions/PaymentMethods';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {UserWallet, WalletTerms} from '@src/types/onyx';
+
+type ActivateStepOnyxProps = {
+    /** Information about the user accepting the terms for payments */
+    walletTerms: OnyxEntry<WalletTerms>;
+};
+
+type ActivateStepProps = ActivateStepOnyxProps & {
+    /** The user's wallet */
+    userWallet: OnyxEntry<UserWallet>;
+};
+
+function ActivateStep({userWallet, walletTerms}: ActivateStepProps) {
+    const {translate} = useLocalize();
+    const isActivatedWallet = userWallet?.tierName && [CONST.WALLET.TIER_NAME.GOLD, CONST.WALLET.TIER_NAME.PLATINUM].some((name) => name === userWallet.tierName);
+
+    const animation = isActivatedWallet ? LottieAnimations.Fireworks : LottieAnimations.ReviewingBankInfo;
+    let continueButtonText = '';
+
+    if (walletTerms?.chatReportID) {
+        continueButtonText = translate('activateStep.continueToPayment');
+    } else if (walletTerms?.source === CONST.KYC_WALL_SOURCE.ENABLE_WALLET) {
+        continueButtonText = translate('common.continue');
+    } else {
+        continueButtonText = translate('activateStep.continueToTransfer');
+    }
+
+    return (
+        <>
+            <HeaderWithBackButton title={translate('activateStep.headerTitle')} />
+            <ConfirmationPage
+                animation={animation}
+                heading={translate(`activateStep.${isActivatedWallet ? 'activated' : 'checkBackLater'}Title`)}
+                description={translate(`activateStep.${isActivatedWallet ? 'activated' : 'checkBackLater'}Message`)}
+                shouldShowButton={isActivatedWallet}
+                buttonText={continueButtonText}
+                onButtonPress={() => PaymentMethods.continueSetup()}
+            />
+        </>
+    );
+}
+
+ActivateStep.displayName = 'ActivateStep';
+
+export default withOnyx<ActivateStepProps, ActivateStepOnyxProps>({
+    walletTerms: {
+        key: ONYXKEYS.WALLET_TERMS,
+    },
+})(ActivateStep);