Merge pull request Expensify#63818 from allgandalf/patch-17

Add Ability: Prompting to enable the wallet if you have a non-US deposit account setup

Author: MonilBhavsar

src/components/KYCWall/BaseKYCWall.tsx

@@ -109,7 +109,7 @@ function KYCWall({
             }
 
             if (paymentMethod === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) {
-                openPersonalBankAccountSetupView();
+                openPersonalBankAccountSetupView({shouldSetUpUSBankAccount: isIOUReport(iouReport)});
             } else if (paymentMethod === CONST.PAYMENT_METHODS.DEBIT_CARD) {
                 Navigation.navigate(addDebitCardRoute ?? ROUTES.HOME);
             } else if (paymentMethod === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT || policy) {

src/libs/PaymentUtils.ts

@@ -26,13 +26,18 @@ type TriggerKYCFlow = (event: KYCFlowEvent, iouPaymentType: PaymentMethodType) =
 type AccountType = ValueOf<typeof CONST.PAYMENT_METHODS> | undefined;
 
 /**
- * Check to see if user has either a debit card or personal bank account added that can be used with a wallet.
+ * Check to see if user has either a debit card or personal US bank account added that can be used with a wallet.
  */
 function hasExpensifyPaymentMethod(fundList: Record<string, Fund>, bankAccountList: Record<string, BankAccount>, shouldIncludeDebitCard = true): boolean {
     const validBankAccount = Object.values(bankAccountList).some((bankAccountJSON) => {
         const bankAccount = new BankAccountModel(bankAccountJSON);
 
-        return bankAccount.getPendingAction() !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && bankAccount.isOpen() && bankAccount.getType() === CONST.BANK_ACCOUNT.TYPE.PERSONAL;
+        return (
+            bankAccount.getPendingAction() !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE &&
+            bankAccount.isOpen() &&
+            bankAccount.getType() === CONST.BANK_ACCOUNT.TYPE.PERSONAL &&
+            bankAccount?.getCountry() === CONST.COUNTRY.US
+        );
     });
 
     // Hide any billing cards that are not P2P debit cards for now because you cannot make them your default method, or delete them

src/libs/actions/BankAccounts.ts

@@ -51,6 +51,23 @@ export {openOnfidoFlow, answerQuestionsForWallet, verifyIdentity, acceptWalletTe
 
 type AccountFormValues = typeof ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT_FORM | typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM;
 
+type OpenPersonalBankAccountSetupViewProps = {
+    /** The reportID of the report to redirect to once the flow is finished */
+    exitReportID?: string;
+
+    /** The policyID of the policy to set the bank account on */
+    policyID?: string;
+
+    /** The source of the bank account */
+    source?: string;
+
+    /** Whether to set up a US bank account */
+    shouldSetUpUSBankAccount?: boolean;
+
+    /** Whether the user is validated */
+    isUserValidated?: boolean;
+};
+
 function clearPlaid(): Promise<void | void[]> {
     Onyx.set(ONYXKEYS.PLAID_LINK_TOKEN, '');
     Onyx.set(ONYXKEYS.PLAID_CURRENT_EVENT, null);
@@ -74,7 +91,7 @@ function setPlaidEvent(eventName: string | null) {
 /**
  * Open the personal bank account setup flow, with an optional exitReportID to redirect to once the flow is finished.
  */
-function openPersonalBankAccountSetupView(exitReportID?: string, policyID?: string, source?: string, isUserValidated = true) {
+function openPersonalBankAccountSetupView({exitReportID, policyID, source, shouldSetUpUSBankAccount = false, isUserValidated = true}: OpenPersonalBankAccountSetupViewProps) {
     clearInternationalBankAccount().then(() => {
         if (exitReportID) {
             Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {exitReportID});
@@ -89,6 +106,10 @@ function openPersonalBankAccountSetupView(exitReportID?: string, policyID?: stri
             Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHOD_VERIFY_ACCOUNT.getRoute(Navigation.getActiveRoute(), ROUTES.SETTINGS_ADD_BANK_ACCOUNT.route));
             return;
         }
+        if (shouldSetUpUSBankAccount) {
+            Navigation.navigate(ROUTES.SETTINGS_ADD_US_BANK_ACCOUNT);
+            return;
+        }
         Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT.getRoute(Navigation.getActiveRoute()));
     });
 }

src/pages/home/report/PureReportActionItem.tsx

@@ -969,7 +969,7 @@ function PureReportActionItem({
                                 success
                                 style={[styles.w100, styles.requestPreviewBox]}
                                 text={translate('bankAccount.addBankAccount')}
-                                onPress={() => openPersonalBankAccountSetupView(Navigation.getTopmostReportId() ?? targetReport?.reportID, undefined, undefined, isUserValidated)}
+                                onPress={() => openPersonalBankAccountSetupView({exitReportID: Navigation.getTopmostReportId() ?? targetReport?.reportID, isUserValidated})}
                                 pressOnEnter
                                 large
                             />

src/pages/settings/Wallet/ChooseTransferAccountPage.tsx

@@ -15,8 +15,8 @@ import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getLastFourDigits} from '@libs/BankAccountUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import * as BankAccounts from '@userActions/BankAccounts';
-import * as PaymentMethods from '@userActions/PaymentMethods';
+import {openPersonalBankAccountSetupView} from '@userActions/BankAccounts';
+import {saveWalletTransferAccountTypeAndID} from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -30,7 +30,7 @@ type BankAccountListItem = ListItem & {
 };
 
 function ChooseTransferAccountPage() {
-    const [walletTransfer, walletTransferResult] = useOnyx(ONYXKEYS.WALLET_TRANSFER);
+    const [walletTransfer, walletTransferResult] = useOnyx(ONYXKEYS.WALLET_TRANSFER, {canBeMissing: true});
 
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -41,7 +41,7 @@ function ChooseTransferAccountPage() {
      * @param account of the selected account data
      */
     const selectAccountAndNavigateBack = (accountType?: string, account?: AccountData) => {
-        PaymentMethods.saveWalletTransferAccountTypeAndID(
+        saveWalletTransferAccountTypeAndID(
             accountType ?? '',
             (accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT ? account?.bankAccountID?.toString() : account?.fundID?.toString()) ?? '',
         );
@@ -53,10 +53,10 @@ function ChooseTransferAccountPage() {
             Navigation.navigate(ROUTES.SETTINGS_ADD_DEBIT_CARD);
             return;
         }
-        BankAccounts.openPersonalBankAccountSetupView();
+        openPersonalBankAccountSetupView({});
     };
 
-    const [bankAccountsList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
+    const [bankAccountsList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST, {canBeMissing: true});
     const selectedAccountID = walletTransfer?.selectedAccountID;
     const data = useMemo(() => {
         const options = Object.values(bankAccountsList ?? {}).map((bankAccount): BankAccountListItem => {

src/pages/settings/Wallet/WalletPage/WalletPage.tsx

@@ -250,7 +250,7 @@ function WalletPage({shouldListenForResize = false}: WalletPageProps) {
             return;
         }
         if (paymentType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT || paymentType === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT) {
-            openPersonalBankAccountSetupView();
+            openPersonalBankAccountSetupView({});
             return;
         }
 

src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx

@@ -167,7 +167,7 @@ function WorkspaceInvoiceVBASection({policyID}: WorkspaceInvoiceVBASectionProps)
     const addPaymentMethodTypePressed = (paymentType: string) => {
         hideAddPaymentMenu();
         if (paymentType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT || paymentType === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT) {
-            openPersonalBankAccountSetupView(undefined, policyID, 'invoice', isUserValidated);
+            openPersonalBankAccountSetupView({policyID, source: 'invoice', isUserValidated});
             return;
         }