From 528646bc599caced4deb28efdf90f2f2a992a59a Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Mon, 8 Jul 2024 17:17:44 +0200 Subject: [PATCH 1/8] feat: setup route for choosing bank account --- src/ROUTES.ts | 4 +++ src/SCREENS.ts | 1 + .../ModalStackNavigators/index.tsx | 1 + .../FULL_SCREEN_TO_RHP_MAPPING.ts | 2 +- src/libs/Navigation/linkingConfig/config.ts | 3 +++ src/libs/Navigation/types.ts | 4 ++- .../WorkspaceExpensifyCardBankAccounts.tsx | 10 +++++++ .../WorkspaceExpensifyCardPageEmptyState.tsx | 26 ++++++++++++++++--- 8 files changed, 45 insertions(+), 6 deletions(-) create mode 100644 src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx diff --git a/src/ROUTES.ts b/src/ROUTES.ts index d548297cb854..a420c000c858 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -822,6 +822,10 @@ const ROUTES = { // }, // TODO: remove after development is done - this one is for testing purposes WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW: 'settings/workspaces/expensify-card/issue-new', + WORKSPACE_EXPENSIFY_CARD_BANK_ACCOUNT: { + route: 'settings/workspaces/:policyID/expensify-card/choose-bank-account', + getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/choose-bank-account` as const, + }, WORKSPACE_DISTANCE_RATES: { route: 'settings/workspaces/:policyID/distance-rates', getRoute: (policyID: string) => `settings/workspaces/${policyID}/distance-rates` as const, diff --git a/src/SCREENS.ts b/src/SCREENS.ts index e2e3f7acc5b0..105e3d5e959d 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -319,6 +319,7 @@ const SCREENS = { RATE_AND_UNIT_UNIT: 'Workspace_RateAndUnit_Unit', EXPENSIFY_CARD: 'Workspace_ExpensifyCard', EXPENSIFY_CARD_ISSUE_NEW: 'Workspace_ExpensifyCard_New', + EXPENSIFY_CARD_BANK_ACCOUNT: 'Workspace_ExpensifyCard_BankAccount', BILLS: 'Workspace_Bills', INVOICES: 'Workspace_Invoices', TRAVEL: 'Workspace_Travel', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index 856e2e090ebb..a920caac8890 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -379,6 +379,7 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../../pages/workspace/taxes/ValuePage').default, [SCREENS.WORKSPACE.TAX_CREATE]: () => require('../../../../pages/workspace/taxes/WorkspaceCreateTaxPage').default, [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: () => require('../../../../pages/workspace/card/issueNew/IssueNewCardPage').default, + [SCREENS.WORKSPACE.EXPENSIFY_CARD_BANK_ACCOUNT]: () => require('../../../../pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts').default, [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require('../../../../pages/TeachersUnite/SaveTheWorldPage').default, [SCREENS.SETTINGS.SUBSCRIPTION.CHANGE_PAYMENT_CURRENCY]: () => require('../../../../pages/settings/PaymentCard/ChangeCurrency').default, [SCREENS.SETTINGS.SUBSCRIPTION.CHANGE_BILLING_CURRENCY]: () => require('../../../../pages/settings/Subscription/PaymentCard/ChangeBillingCurrency').default, diff --git a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts index 75b096fa4bbe..ffa09ba734f5 100755 --- a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts @@ -129,7 +129,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial> = { SCREENS.WORKSPACE.REPORT_FIELDS_VALUE_SETTINGS, SCREENS.WORKSPACE.REPORT_FIELDS_EDIT_VALUE, ], - [SCREENS.WORKSPACE.EXPENSIFY_CARD]: [], + [SCREENS.WORKSPACE.EXPENSIFY_CARD]: [SCREENS.WORKSPACE.EXPENSIFY_CARD_BANK_ACCOUNT], }; export default FULL_SCREEN_TO_RHP_MAPPING; diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 699cb9b704e1..5370eab6216c 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -440,6 +440,9 @@ const config: LinkingOptions['config'] = { [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: { path: ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW, }, + [SCREENS.WORKSPACE.EXPENSIFY_CARD_BANK_ACCOUNT]: { + path: ROUTES.WORKSPACE_EXPENSIFY_CARD_BANK_ACCOUNT.route, + }, [SCREENS.WORKSPACE.RATE_AND_UNIT]: { path: ROUTES.WORKSPACE_RATE_AND_UNIT.route, }, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index a60316fb7768..ffd347e176b7 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -993,7 +993,9 @@ type FullScreenNavigatorParamList = { [SCREENS.WORKSPACE.DISTANCE_RATES]: { policyID: string; }; - + [SCREENS.WORKSPACE.EXPENSIFY_CARD_BANK_ACCOUNT]: { + policyID: string; + }; [SCREENS.WORKSPACE.ACCOUNTING.ROOT]: { policyID: string; }; diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx new file mode 100644 index 000000000000..83cdc9d02b83 --- /dev/null +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import {View} from 'react-native'; + +function WorkspaceExpensifyCardBankAccounts() { + return ; +} + +WorkspaceExpensifyCardBankAccounts.displayName = 'WorkspaceExpensifyCardBankAccounts'; + +export default WorkspaceExpensifyCardBankAccounts; diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx index 6e04ae6f5d0e..05e5857963ea 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx @@ -1,6 +1,7 @@ import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; +import {useOnyx} from 'react-native-onyx'; import FeatureList from '@components/FeatureList'; import type {FeatureListItem} from '@components/FeatureList'; import * as Illustrations from '@components/Icon/Illustrations'; @@ -9,9 +10,15 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; +import Navigation from '@navigation/Navigation'; +import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading'; +import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading'; import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections'; import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; +import {isEmptyObject} from '@src/types/utils/EmptyObject'; const expensifyCardFeatures: FeatureListItem[] = [ { @@ -27,13 +34,24 @@ const expensifyCardFeatures: FeatureListItem[] = [ translationKey: 'workspace.moreFeatures.expensifyCard.feed.features.spend', }, ]; -type WorkspaceExpensifyCardPageEmptyStateProps = {route: StackScreenProps['route']}; +type WorkspaceExpensifyCardPageEmptyStateProps = { + route: StackScreenProps['route']; +} & WithPolicyAndFullscreenLoadingProps; -function WorkspaceExpensifyCardPageEmptyState({route}: WorkspaceExpensifyCardPageEmptyStateProps) { +function WorkspaceExpensifyCardPageEmptyState({route, policy}: WorkspaceExpensifyCardPageEmptyStateProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const theme = useTheme(); const {shouldUseNarrowLayout} = useResponsiveLayout(); + const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); + + const startFlow = () => { + if (isEmptyObject(bankAccountList)) { + Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('new', policy?.id, ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policy?.id ?? '-1'))); + } else { + Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_BANK_ACCOUNT.getRoute(policy?.id ?? '-1')); + } + }; return ( {}} + onCtaPress={startFlow} illustrationBackgroundColor={theme.fallbackIconColor} illustration={Illustrations.ExpensifyCardIllustration} illustrationStyle={styles.expensifyCardIllustrationContainer} @@ -65,4 +83,4 @@ function WorkspaceExpensifyCardPageEmptyState({route}: WorkspaceExpensifyCardPag WorkspaceExpensifyCardPageEmptyState.displayName = 'WorkspaceExpensifyCardPageEmptyState'; -export default WorkspaceExpensifyCardPageEmptyState; +export default withPolicyAndFullscreenLoading(WorkspaceExpensifyCardPageEmptyState); From 1d212170316ee8dd47db6ff1c092b2b25e44dc8f Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Tue, 9 Jul 2024 08:02:15 +0200 Subject: [PATCH 2/8] feat: create page content --- src/languages/en.ts | 4 ++ src/languages/es.ts | 4 ++ .../WorkspaceExpensifyCardBankAccounts.tsx | 45 ++++++++++++++++++- 3 files changed, 51 insertions(+), 2 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 543dfbf5e541..38d664abec7b 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1214,6 +1214,10 @@ export default { updateAddress: 'Update address', }, cardDetailsLoadingFailure: 'An error occurred while loading the card details. Please check your internet connection and try again.', + chooseBankAccount: 'Choose bank account', + chooseExistingBank: 'Choose an existing business bank account to pay your Expensify Card balance, or add a new bank account', + accountEndingIn: 'Account ending in', + addNewBankAccount: 'Add a new bank account', }, workflowsPage: { workflowTitle: 'Spend', diff --git a/src/languages/es.ts b/src/languages/es.ts index e7f4faab2725..fb0d9c082807 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -1219,6 +1219,10 @@ export default { updateAddress: 'Actualizar dirección', }, cardDetailsLoadingFailure: 'Se ha producido un error al cargar los datos de la tarjeta. Comprueba tu conexión a Internet e inténtalo de nuevo.', + chooseBankAccount: 'Elegir cuenta bancaria', + chooseExistingBank: 'Elige una cuenta bancaria comercial existente para pagar el saldo de su Tarjeta Expensify o añade una nueva cuenta bancaria.', + accountEndingIn: 'Cuenta terminada en', + addNewBankAccount: 'Añadir nueva cuenta bancaria', }, workflowsPage: { workflowTitle: 'Gasto', diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx index 83cdc9d02b83..38a42bce2bc8 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx @@ -1,8 +1,49 @@ import React from 'react'; -import {View} from 'react-native'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import * as Expensicons from '@components/Icon/Expensicons'; +import MenuItem from '@components/MenuItem'; +import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; +import ScreenWrapper from '@components/ScreenWrapper'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import Navigation from '@navigation/Navigation'; function WorkspaceExpensifyCardBankAccounts() { - return ; + const {translate} = useLocalize(); + const styles = useThemeStyles(); + + return ( + + Navigation.goBack()} + title={translate('cardPage.chooseBankAccount')} + /> + {`${translate('cardPage.chooseExistingBank')}:`} + {}} + icon={Expensicons.Bank} + /> + {}} + icon={Expensicons.Bank} + /> + {}} + /> + + ); } WorkspaceExpensifyCardBankAccounts.displayName = 'WorkspaceExpensifyCardBankAccounts'; From 78490f480bffdc4e661c313c334e838a7e795e75 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Tue, 9 Jul 2024 13:41:41 +0200 Subject: [PATCH 3/8] feat: render proper bank info --- src/libs/Navigation/types.ts | 6 +- .../WorkspaceExpensifyCardBankAccounts.tsx | 68 ++++++++++++++----- .../WorkspaceExpensifyCardPage.tsx | 20 ++++-- 3 files changed, 68 insertions(+), 26 deletions(-) diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index ffd347e176b7..14ef02feade8 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -542,6 +542,9 @@ type SettingsNavigatorParamList = { policyID: string; taxID: string; }; + [SCREENS.WORKSPACE.EXPENSIFY_CARD_BANK_ACCOUNT]: { + policyID: string; + }; } & ReimbursementAccountNavigatorParamList; type NewChatNavigatorParamList = { @@ -993,9 +996,6 @@ type FullScreenNavigatorParamList = { [SCREENS.WORKSPACE.DISTANCE_RATES]: { policyID: string; }; - [SCREENS.WORKSPACE.EXPENSIFY_CARD_BANK_ACCOUNT]: { - policyID: string; - }; [SCREENS.WORKSPACE.ACCOUNTING.ROOT]: { policyID: string; }; diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx index 38a42bce2bc8..1d7d0e6992c6 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx @@ -1,17 +1,64 @@ +import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; +import {useOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import getBankIcon from '@components/Icon/BankIcons'; import * as Expensicons from '@components/Icon/Expensicons'; import MenuItem from '@components/MenuItem'; -import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@navigation/Navigation'; +import type {SettingsNavigatorParamList} from '@navigation/types'; +import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; +import type SCREENS from '@src/SCREENS'; +import type {BankName} from '@src/types/onyx/Bank'; +import {isEmptyObject} from '@src/types/utils/EmptyObject'; -function WorkspaceExpensifyCardBankAccounts() { +type WorkspaceExpensifyCardBankAccountsProps = StackScreenProps; + +function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankAccountsProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); + const [bankAccountsList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); + + const policyID = route.params.policyID ?? '-1'; + + const handleAddBankAccount = () => { + Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('new', policyID, ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID))); + }; + + const handleSelectBankAccount = () => { + Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID)); + }; + + const renderBankOptions = () => { + if (!bankAccountsList || isEmptyObject(bankAccountsList)) { + return null; + } + + // const eligibleBankAccounts = Object.values(bankAccountsList).filter((bankAccount) => bankAccount.accountData.allowDebit || bankAccount.accountData.type === 'BUSINESS'); + const eligibleBankAccounts = Object.values(bankAccountsList); + return eligibleBankAccounts.map((bankAccount) => { + const bankName = (bankAccount.accountData?.addressName ?? '') as BankName; + const {icon, iconSize, iconStyles} = getBankIcon({bankName, styles}); + + return ( + + ); + }); + }; return ( Navigation.goBack()} title={translate('cardPage.chooseBankAccount')} /> - {`${translate('cardPage.chooseExistingBank')}:`} - {}} - icon={Expensicons.Bank} - /> - {}} - icon={Expensicons.Bank} - /> + {translate('cardPage.chooseExistingBank')} + {renderBankOptions()} {}} + onPress={handleAddBankAccount} /> ); diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx index 25be3775964c..ec410bfc4288 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx @@ -19,16 +19,22 @@ function WorkspaceExpensifyCardPage({route}: WorkspaceExpensifyCardPageProps) { // const policyID = route.params.policyID ?? '-1'; // const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${policyID}_${CONST.EXPENSIFY_CARD.BANK}`); + // return ( + // + // {/* After BE will be implemented we will probably want to have ActivityIndicator during fetch for cardsList */} + // {isEmptyObject(cardsList) && } + // {!isEmptyObject(cardsList) && } + // + // ); return ( - - {/* After BE will be implemented we will probably want to have ActivityIndicator during fetch for cardsList */} + <> {isEmptyObject(cardsList) && } {!isEmptyObject(cardsList) && } - + ); } From 3e64e94ead573e0ca8374a9a24fb9b8e0eecf5db Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Tue, 9 Jul 2024 15:00:45 +0200 Subject: [PATCH 4/8] chore: cleanup --- src/CONST.ts | 2 ++ src/languages/en.ts | 10 +++++---- src/languages/es.ts | 10 +++++---- .../WorkspaceExpensifyCardBankAccounts.tsx | 17 +++++++++----- .../WorkspaceExpensifyCardPage.tsx | 20 ++++++----------- .../WorkspaceExpensifyCardPageEmptyState.tsx | 22 +++++++++++++++---- 6 files changed, 50 insertions(+), 31 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 13d44ee883be..e8519745716b 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -335,6 +335,8 @@ const CONST = { VERIFICATION_MAX_ATTEMPTS: 7, STATE: { VERIFYING: 'VERIFYING', + VALIDATING: 'VALIDATING', + SETUP: 'SETUP', PENDING: 'PENDING', OPEN: 'OPEN', }, diff --git a/src/languages/en.ts b/src/languages/en.ts index 38d664abec7b..56ec57b47715 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1214,10 +1214,6 @@ export default { updateAddress: 'Update address', }, cardDetailsLoadingFailure: 'An error occurred while loading the card details. Please check your internet connection and try again.', - chooseBankAccount: 'Choose bank account', - chooseExistingBank: 'Choose an existing business bank account to pay your Expensify Card balance, or add a new bank account', - accountEndingIn: 'Account ending in', - addNewBankAccount: 'Add a new bank account', }, workflowsPage: { workflowTitle: 'Spend', @@ -2472,6 +2468,12 @@ export default { 'We consider a number of factors when calculating your remaining limit: your tenure as a customer, the business-related information you provided during signup, and the available cash in your business bank account. Your remaining limit can fluctuate on a daily basis.', cashBack: 'Cash back', cashBackDescription: 'Cash back balance is based on settled monthly Expensify Card spend across your workspace.', + issueNewCard: 'Issue new card', + finishSetup: 'Finish setup', + chooseBankAccount: 'Choose bank account', + chooseExistingBank: 'Choose an existing business bank account to pay your Expensify Card balance, or add a new bank account', + accountEndingIn: 'Account ending in', + addNewBankAccount: 'Add a new bank account', }, categories: { deleteCategories: 'Delete categories', diff --git a/src/languages/es.ts b/src/languages/es.ts index fb0d9c082807..e13fc02ae452 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -1219,10 +1219,6 @@ export default { updateAddress: 'Actualizar dirección', }, cardDetailsLoadingFailure: 'Se ha producido un error al cargar los datos de la tarjeta. Comprueba tu conexión a Internet e inténtalo de nuevo.', - chooseBankAccount: 'Elegir cuenta bancaria', - chooseExistingBank: 'Elige una cuenta bancaria comercial existente para pagar el saldo de su Tarjeta Expensify o añade una nueva cuenta bancaria.', - accountEndingIn: 'Cuenta terminada en', - addNewBankAccount: 'Añadir nueva cuenta bancaria', }, workflowsPage: { workflowTitle: 'Gasto', @@ -2516,6 +2512,12 @@ export default { 'A la hora de calcular tu límite restante, tenemos en cuenta una serie de factores: su antigüedad como cliente, la información relacionada con tu negocio que nos facilitaste al darte de alta y el efectivo disponible en tu cuenta bancaria comercial. Tu límite restante puede fluctuar a diario.', cashBack: 'Reembolso', cashBackDescription: 'El saldo de devolución se basa en el gasto mensual realizado con la tarjeta Expensify en tu espacio de trabajo.', + issueNewCard: '', + finishSetup: 'Terminar configuración', + chooseBankAccount: 'Elegir cuenta bancaria', + chooseExistingBank: 'Elige una cuenta bancaria comercial existente para pagar el saldo de su Tarjeta Expensify o añade una nueva cuenta bancaria.', + accountEndingIn: 'Cuenta terminada en', + addNewBankAccount: 'Añadir nueva cuenta bancaria', }, categories: { deleteCategories: 'Eliminar categorías', diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx index 1d7d0e6992c6..f639d8414017 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx @@ -31,7 +31,9 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA }; const handleSelectBankAccount = () => { - Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID)); + Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW); + // TODO: replace the previous line with this one after #44741 is merged + // Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID)); }; const renderBankOptions = () => { @@ -39,16 +41,19 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA return null; } - // const eligibleBankAccounts = Object.values(bankAccountsList).filter((bankAccount) => bankAccount.accountData.allowDebit || bankAccount.accountData.type === 'BUSINESS'); + // const eligibleBankAccounts = Object.values(bankAccountsList).filter((bankAccount) => bankAccount.accountData.allowDebit || bankAccount.accountData.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS); const eligibleBankAccounts = Object.values(bankAccountsList); + return eligibleBankAccounts.map((bankAccount) => { const bankName = (bankAccount.accountData?.addressName ?? '') as BankName; + const bankAccountNumber = bankAccount.accountData?.accountNumber ?? ''; + const {icon, iconSize, iconStyles} = getBankIcon({bankName, styles}); return ( Navigation.goBack()} - title={translate('cardPage.chooseBankAccount')} + title={translate('workspace.expensifyCard.chooseBankAccount')} /> - {translate('cardPage.chooseExistingBank')} + {translate('workspace.expensifyCard.chooseExistingBank')} {renderBankOptions()} diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx index ec410bfc4288..25be3775964c 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx @@ -19,22 +19,16 @@ function WorkspaceExpensifyCardPage({route}: WorkspaceExpensifyCardPageProps) { // const policyID = route.params.policyID ?? '-1'; // const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${policyID}_${CONST.EXPENSIFY_CARD.BANK}`); - // return ( - // - // {/* After BE will be implemented we will probably want to have ActivityIndicator during fetch for cardsList */} - // {isEmptyObject(cardsList) && } - // {!isEmptyObject(cardsList) && } - // - // ); return ( - <> + + {/* After BE will be implemented we will probably want to have ActivityIndicator during fetch for cardsList */} {isEmptyObject(cardsList) && } {!isEmptyObject(cardsList) && } - + ); } diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx index 05e5857963ea..458b2802da5a 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx @@ -1,5 +1,5 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React from 'react'; +import React, {useCallback} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import FeatureList from '@components/FeatureList'; @@ -44,14 +44,28 @@ function WorkspaceExpensifyCardPageEmptyState({route, policy}: WorkspaceExpensif const theme = useTheme(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); + const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); - const startFlow = () => { + const reimbursementAccountStatus = reimbursementAccount?.achData?.state ?? ''; + + const getTranslationForCta = useCallback(() => { + switch (reimbursementAccountStatus) { + case CONST.BANK_ACCOUNT.STATE.VERIFYING: + case CONST.BANK_ACCOUNT.STATE.SETUP: + case CONST.BANK_ACCOUNT.STATE.VALIDATING: + return 'workspace.expensifyCard.finishSetup'; + default: + return 'workspace.expensifyCard.issueNewCard'; + } + }, [reimbursementAccountStatus]); + + const startFlow = useCallback(() => { if (isEmptyObject(bankAccountList)) { Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('new', policy?.id, ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policy?.id ?? '-1'))); } else { Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_BANK_ACCOUNT.getRoute(policy?.id ?? '-1')); } - }; + }, [bankAccountList]); return ( Date: Wed, 10 Jul 2024 10:03:30 +0200 Subject: [PATCH 5/8] fix: minor improvements --- .../expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx | 5 ++--- .../expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx index f639d8414017..6696e09437ac 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx @@ -27,13 +27,12 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA const policyID = route.params.policyID ?? '-1'; const handleAddBankAccount = () => { + // TODO: call to API - UpdateCardSettlementAccount Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('new', policyID, ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID))); }; const handleSelectBankAccount = () => { - Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW); - // TODO: replace the previous line with this one after #44741 is merged - // Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID)); + Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID)); }; const renderBankOptions = () => { diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx index 458b2802da5a..15efb927a7d6 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx @@ -65,7 +65,7 @@ function WorkspaceExpensifyCardPageEmptyState({route, policy}: WorkspaceExpensif } else { Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_BANK_ACCOUNT.getRoute(policy?.id ?? '-1')); } - }, [bankAccountList]); + }, [bankAccountList, policy?.id]); return ( Date: Wed, 10 Jul 2024 14:23:01 +0200 Subject: [PATCH 6/8] fix: minor improvements --- .../WorkspaceExpensifyCardBankAccounts.tsx | 18 +++++++++++------- .../WorkspaceExpensifyCardPageEmptyState.tsx | 2 +- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx index 6696e09437ac..829e9af756e0 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx @@ -1,5 +1,6 @@ import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; +import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import getBankIcon from '@components/Icon/BankIcons'; @@ -59,6 +60,7 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA iconWidth={iconSize} iconStyles={iconStyles} shouldShowRightIcon + displayInDefaultIconColor /> ); }); @@ -75,13 +77,15 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA onBackButtonPress={() => Navigation.goBack()} title={translate('workspace.expensifyCard.chooseBankAccount')} /> - {translate('workspace.expensifyCard.chooseExistingBank')} - {renderBankOptions()} - + + {translate('workspace.expensifyCard.chooseExistingBank')} + {renderBankOptions()} + + ); } diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx index 15efb927a7d6..e8882f3ae345 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx @@ -61,7 +61,7 @@ function WorkspaceExpensifyCardPageEmptyState({route, policy}: WorkspaceExpensif const startFlow = useCallback(() => { if (isEmptyObject(bankAccountList)) { - Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('new', policy?.id, ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policy?.id ?? '-1'))); + Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('', policy?.id, ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policy?.id ?? '-1'))); } else { Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_BANK_ACCOUNT.getRoute(policy?.id ?? '-1')); } From b7ce53cdd1df8704c72d7ebbff44dd50efd01c18 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Thu, 11 Jul 2024 12:24:32 +0200 Subject: [PATCH 7/8] fix: apply requested changes --- .../WorkspaceExpensifyCardBankAccounts.tsx | 2 +- .../WorkspaceExpensifyCardPageEmptyState.tsx | 21 +++++++------------ 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx index 829e9af756e0..c13820910f8c 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx @@ -25,7 +25,7 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA const styles = useThemeStyles(); const [bankAccountsList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); - const policyID = route.params.policyID ?? '-1'; + const policyID = route?.params?.policyID ?? '-1'; const handleAddBankAccount = () => { // TODO: call to API - UpdateCardSettlementAccount diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx index e8882f3ae345..59d52a8c8e53 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx @@ -47,25 +47,18 @@ function WorkspaceExpensifyCardPageEmptyState({route, policy}: WorkspaceExpensif const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); const reimbursementAccountStatus = reimbursementAccount?.achData?.state ?? ''; - - const getTranslationForCta = useCallback(() => { - switch (reimbursementAccountStatus) { - case CONST.BANK_ACCOUNT.STATE.VERIFYING: - case CONST.BANK_ACCOUNT.STATE.SETUP: - case CONST.BANK_ACCOUNT.STATE.VALIDATING: - return 'workspace.expensifyCard.finishSetup'; - default: - return 'workspace.expensifyCard.issueNewCard'; - } - }, [reimbursementAccountStatus]); + const isSetupUnfinished = + reimbursementAccountStatus === CONST.BANK_ACCOUNT.STATE.VERIFYING || + reimbursementAccountStatus === CONST.BANK_ACCOUNT.STATE.SETUP || + reimbursementAccountStatus === CONST.BANK_ACCOUNT.STATE.VALIDATING; const startFlow = useCallback(() => { - if (isEmptyObject(bankAccountList)) { + if (isEmptyObject(bankAccountList) || isSetupUnfinished) { Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('', policy?.id, ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policy?.id ?? '-1'))); } else { Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_BANK_ACCOUNT.getRoute(policy?.id ?? '-1')); } - }, [bankAccountList, policy?.id]); + }, [isSetupUnfinished, bankAccountList, policy?.id]); return ( Date: Thu, 11 Jul 2024 12:39:44 +0200 Subject: [PATCH 8/8] fix: fix condition --- .../expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx index 59d52a8c8e53..ac6c03dd18b3 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx @@ -48,9 +48,10 @@ function WorkspaceExpensifyCardPageEmptyState({route, policy}: WorkspaceExpensif const reimbursementAccountStatus = reimbursementAccount?.achData?.state ?? ''; const isSetupUnfinished = - reimbursementAccountStatus === CONST.BANK_ACCOUNT.STATE.VERIFYING || - reimbursementAccountStatus === CONST.BANK_ACCOUNT.STATE.SETUP || - reimbursementAccountStatus === CONST.BANK_ACCOUNT.STATE.VALIDATING; + isEmptyObject(bankAccountList) && + (reimbursementAccountStatus === CONST.BANK_ACCOUNT.STATE.VERIFYING || + reimbursementAccountStatus === CONST.BANK_ACCOUNT.STATE.SETUP || + reimbursementAccountStatus === CONST.BANK_ACCOUNT.STATE.VALIDATING); const startFlow = useCallback(() => { if (isEmptyObject(bankAccountList) || isSetupUnfinished) {