From 36a0df2c92ebe8bfb28758a2552c88101f0356d7 Mon Sep 17 00:00:00 2001
From: BhuvaneshPatil <bhuvaneshpatil80642@gmail.com>
Date: Tue, 3 Sep 2024 08:38:13 +0530
Subject: [PATCH 1/4] feat: update add bank account step page with latest
 design

---
 src/languages/en.ts                           |  1 +
 src/languages/es.ts                           |  1 +
 .../ReimbursementAccount/BankAccountStep.tsx  | 69 ++++++++++++-------
 3 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 30e2dad391d9..a8dc4cffecb4 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -3500,6 +3500,7 @@ export default {
             continueWithSetup: 'Continue with setup',
             youreAlmostDone: "You're almost done setting up your bank account, which will let you issue corporate cards, reimburse expenses, collect invoices, and pay bills.",
             streamlinePayments: 'Streamline payments',
+            connectBankAccountNote: "Note: Personal bank accounts can't be used for payments on workspaces.",
             oneMoreThing: 'One more thing!',
             allSet: "You're all set!",
             accountDescriptionNoCards:
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 16b8f6f42ed2..923c60360a70 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -3548,6 +3548,7 @@ export default {
             continueWithSetup: 'Continuar con la configuración',
             youreAlmostDone: 'Casi has acabado de configurar tu cuenta bancaria, que te permitirá emitir tarjetas corporativas, reembolsar gastos y cobrar pagar facturas.',
             streamlinePayments: 'Optimiza pagos',
+            connectBankAccountNote: 'Nota: No se pueden usar cuentas bancarias personales para realizar pagos en los espacios de trabajo.',
             oneMoreThing: '¡Una cosa más!',
             allSet: '¡Todo listo!',
             accountDescriptionNoCards:
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.tsx b/src/pages/ReimbursementAccount/BankAccountStep.tsx
index 69e605878725..fc059bb26e57 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.tsx
+++ b/src/pages/ReimbursementAccount/BankAccountStep.tsx
@@ -2,11 +2,10 @@ import React from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import * as Illustrations from '@components/Icon/Illustrations';
+import LottieAnimations from '@components/LottieAnimations';
 import MenuItem from '@components/MenuItem';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -36,6 +35,9 @@ type BankAccountStepOnyxProps = {
 
     /** If the plaid button has been disabled */
     isPlaidDisabled: OnyxEntry<boolean>;
+
+    /** The details about the Personal bank account we are adding saved in Onyx */
+    personalBankAccount: OnyxEntry<OnyxTypes.PersonalBankAccount>;
 };
 
 type BankAccountStepProps = BankAccountStepOnyxProps & {
@@ -69,6 +71,7 @@ function BankAccountStep({
     reimbursementAccount,
     onBackButtonPress,
     isPlaidDisabled = false,
+    personalBankAccount = {},
 }: BankAccountStepProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -119,34 +122,50 @@ function BankAccountStep({
                 />
                 <ScrollView style={styles.flex1}>
                     <Section
-                        icon={Illustrations.MoneyWings}
                         title={translate('workspace.bankAccount.streamlinePayments')}
+                        illustration={LottieAnimations.FastMoney}
+                        subtitle={translate('bankAccount.toGetStarted')}
+                        subtitleMuted
+                        illustrationBackgroundColor={theme.fallbackIconColor}
+                        isCentralPane
                     >
-                        <View style={styles.mv3}>
-                            <Text>{translate('bankAccount.toGetStarted')}</Text>
-                        </View>
                         {!!plaidDesktopMessage && (
                             <View style={[styles.mv3, styles.flexRow, styles.justifyContentBetween]}>
                                 <TextLink onPress={() => Link.openExternalLinkWithToken(bankAccountRoute)}>{translate(plaidDesktopMessage)}</TextLink>
                             </View>
                         )}
-                        <Button
-                            icon={Expensicons.Bank}
-                            iconStyles={[styles.customMarginButtonWithMenuItem]}
-                            text={translate('bankAccount.connectOnlineWithPlaid')}
-                            onPress={() => {
-                                if (!!isPlaidDisabled || !user?.validated) {
-                                    return;
-                                }
-                                removeExistingBankAccountDetails();
-                                BankAccounts.openPlaidView();
-                            }}
-                            isDisabled={!!isPlaidDisabled || !user?.validated}
-                            style={[styles.mt4]}
-                            shouldShowRightIcon
-                            success
-                            innerStyles={[styles.pr2, styles.pl4, styles.h13]}
-                        />
+                        {!personalBankAccount.plaidAccountID && (
+                            <View style={[styles.flexRow, styles.mt4, styles.alignItemsCenter, styles.pb1, styles.pt1]}>
+                                <Icon
+                                    src={Expensicons.Lightbulb}
+                                    fill={theme.icon}
+                                    additionalStyles={styles.mr2}
+                                    medium
+                                />
+                                <Text
+                                    style={[styles.textLabelSupportingNormal]}
+                                    suppressHighlighting
+                                >
+                                    {translate('workspace.bankAccount.connectBankAccountNote')}
+                                </Text>
+                            </View>
+                        )}
+                        <View style={styles.mt3}>
+                            <MenuItem
+                                icon={Expensicons.Bank}
+                                title={translate('bankAccount.connectOnlineWithPlaid')}
+                                disabled={!!isPlaidDisabled || !user?.validated}
+                                onPress={() => {
+                                    if (!!isPlaidDisabled || !user?.validated) {
+                                        return;
+                                    }
+                                    removeExistingBankAccountDetails();
+                                    BankAccounts.openPlaidView();
+                                }}
+                                shouldShowRightIcon
+                                wrapperStyle={[styles.cardMenuItem]}
+                            />
+                        </View>
                         <View style={styles.mv3}>
                             <MenuItem
                                 icon={Expensicons.Connect}
@@ -195,4 +214,8 @@ export default withOnyx<BankAccountStepProps, BankAccountStepOnyxProps>({
     isPlaidDisabled: {
         key: ONYXKEYS.IS_PLAID_DISABLED,
     },
+    // @ts-expect-error: ONYXKEYS.PERSONAL_BANK_ACCOUNT is conflicting with ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT_FORM
+    personalBankAccount: {
+        key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
+    },
 })(BankAccountStep);

From 8a9aa7fd142a46a480c3cc48fd459332b039f155 Mon Sep 17 00:00:00 2001
From: BhuvaneshPatil <bhuvaneshpatil80642@gmail.com>
Date: Tue, 3 Sep 2024 16:51:01 +0530
Subject: [PATCH 2/4] remove not condition

---
 src/pages/ReimbursementAccount/BankAccountStep.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ReimbursementAccount/BankAccountStep.tsx b/src/pages/ReimbursementAccount/BankAccountStep.tsx
index fc059bb26e57..8a0e6299eded 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.tsx
+++ b/src/pages/ReimbursementAccount/BankAccountStep.tsx
@@ -134,7 +134,7 @@ function BankAccountStep({
                                 <TextLink onPress={() => Link.openExternalLinkWithToken(bankAccountRoute)}>{translate(plaidDesktopMessage)}</TextLink>
                             </View>
                         )}
-                        {!personalBankAccount.plaidAccountID && (
+                        {personalBankAccount.plaidAccountID && (
                             <View style={[styles.flexRow, styles.mt4, styles.alignItemsCenter, styles.pb1, styles.pt1]}>
                                 <Icon
                                     src={Expensicons.Lightbulb}

From ab8809013c5612f5247cfefe716d59c4be92c0f3 Mon Sep 17 00:00:00 2001
From: BhuvaneshPatil <bhuvaneshpatil80642@gmail.com>
Date: Thu, 5 Sep 2024 22:06:06 +0530
Subject: [PATCH 3/4] used different onyx value for bank accounts

---
 src/pages/ReimbursementAccount/BankAccountStep.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/ReimbursementAccount/BankAccountStep.tsx b/src/pages/ReimbursementAccount/BankAccountStep.tsx
index 8a0e6299eded..ae3a803e9dde 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.tsx
+++ b/src/pages/ReimbursementAccount/BankAccountStep.tsx
@@ -36,8 +36,8 @@ type BankAccountStepOnyxProps = {
     /** If the plaid button has been disabled */
     isPlaidDisabled: OnyxEntry<boolean>;
 
-    /** The details about the Personal bank account we are adding saved in Onyx */
-    personalBankAccount: OnyxEntry<OnyxTypes.PersonalBankAccount>;
+    /** List of bank accounts */
+    bankAccountList: OnyxEntry<OnyxTypes.BankAccountList>;
 };
 
 type BankAccountStepProps = BankAccountStepOnyxProps & {
@@ -71,7 +71,7 @@ function BankAccountStep({
     reimbursementAccount,
     onBackButtonPress,
     isPlaidDisabled = false,
-    personalBankAccount = {},
+    bankAccountList = {},
 }: BankAccountStepProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -83,6 +83,7 @@ function BankAccountStep({
     }
     const plaidDesktopMessage = getPlaidDesktopMessage();
     const bankAccountRoute = `${ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('new', policyID, ROUTES.WORKSPACE_INITIAL.getRoute(policyID))}`;
+    const personalBankAccounts = Object.keys(bankAccountList).filter((key) => bankAccountList[key].accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT);
 
     const removeExistingBankAccountDetails = () => {
         const bankAccountData: Partial<ReimbursementAccountForm> = {
@@ -134,7 +135,7 @@ function BankAccountStep({
                                 <TextLink onPress={() => Link.openExternalLinkWithToken(bankAccountRoute)}>{translate(plaidDesktopMessage)}</TextLink>
                             </View>
                         )}
-                        {personalBankAccount.plaidAccountID && (
+                        {!!personalBankAccounts.length && (
                             <View style={[styles.flexRow, styles.mt4, styles.alignItemsCenter, styles.pb1, styles.pt1]}>
                                 <Icon
                                     src={Expensicons.Lightbulb}
@@ -214,8 +215,7 @@ export default withOnyx<BankAccountStepProps, BankAccountStepOnyxProps>({
     isPlaidDisabled: {
         key: ONYXKEYS.IS_PLAID_DISABLED,
     },
-    // @ts-expect-error: ONYXKEYS.PERSONAL_BANK_ACCOUNT is conflicting with ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT_FORM
-    personalBankAccount: {
-        key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
+    bankAccountList: {
+        key: ONYXKEYS.BANK_ACCOUNT_LIST,
     },
 })(BankAccountStep);

From 71fa816a0cc5b3b69a26572b09e294931e12e98e Mon Sep 17 00:00:00 2001
From: BhuvaneshPatil <bhuvaneshpatil80642@gmail.com>
Date: Fri, 6 Sep 2024 01:15:35 +0530
Subject: [PATCH 4/4] fix the text going out

---
 src/pages/ReimbursementAccount/BankAccountStep.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/ReimbursementAccount/BankAccountStep.tsx b/src/pages/ReimbursementAccount/BankAccountStep.tsx
index ae3a803e9dde..38ea48ba0ec4 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.tsx
+++ b/src/pages/ReimbursementAccount/BankAccountStep.tsx
@@ -131,7 +131,7 @@ function BankAccountStep({
                         isCentralPane
                     >
                         {!!plaidDesktopMessage && (
-                            <View style={[styles.mv3, styles.flexRow, styles.justifyContentBetween]}>
+                            <View style={[styles.mt3, styles.flexRow, styles.justifyContentBetween]}>
                                 <TextLink onPress={() => Link.openExternalLinkWithToken(bankAccountRoute)}>{translate(plaidDesktopMessage)}</TextLink>
                             </View>
                         )}
@@ -144,7 +144,7 @@ function BankAccountStep({
                                     medium
                                 />
                                 <Text
-                                    style={[styles.textLabelSupportingNormal]}
+                                    style={[styles.textLabelSupportingNormal, styles.flex1]}
                                     suppressHighlighting
                                 >
                                     {translate('workspace.bankAccount.connectBankAccountNote')}