From dd69e6cca056376bca713aad67caded8895ed18f Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu Date: Tue, 15 Oct 2024 10:58:27 +0300 Subject: [PATCH 1/4] Corporate Cards - Amex custom feed --- src/CONST.ts | 6 + src/languages/en.ts | 2 + src/languages/es.ts | 2 + src/libs/CardUtils.ts | 6 +- .../WorkspaceCompanyCardsPage.tsx | 2 +- .../companyCards/addNew/AddNewCardPage.tsx | 3 + .../companyCards/addNew/AmexCustomFeed.tsx | 113 ++++++++++++++++++ .../addNew/CardInstructionsStep.tsx | 8 ++ src/types/onyx/CardFeeds.ts | 3 + 9 files changed, 140 insertions(+), 5 deletions(-) create mode 100644 src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx diff --git a/src/CONST.ts b/src/CONST.ts index ac72000c5c0a..e7d5c3f6256c 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2567,6 +2567,8 @@ const CONST = { CARD_INSTRUCTIONS: 'CardInstructions', CARD_NAME: 'CardName', CARD_DETAILS: 'CardDetails', + BANK_CONNECTION: 'BankConnection', + AMEX_CUSTOM_FEED: 'AmexCustomFeed', }, CARD_TYPE: { AMEX: 'amex', @@ -2588,6 +2590,10 @@ const CONST = { WELLS_FARGO: 'Wells Fargo', OTHER: 'Other', }, + AMEX_CUSTOM_FEED: { + CORPORATE: 'American Express Corporate Cards', + BUSINESS: 'American Express Business Cards', + }, DELETE_TRANSACTIONS: { RESTRICT: 'corporate', ALLOW: 'personal', diff --git a/src/languages/en.ts b/src/languages/en.ts index 287f36b8b040..8c85563b9c7b 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3074,6 +3074,8 @@ const translations = { distributionLabel: 'Distribution ID', }, }, + amexCorporate: 'Select this if the front of your cards say “Corporate”', + amexBusiness: 'Select this if the front of your cards say “Business”', error: { pleaseSelectProvider: 'Please select a card provider before continuing.', pleaseSelectBankAccount: 'Please select a bank account before continuing.', diff --git a/src/languages/es.ts b/src/languages/es.ts index 6e6b7fa9d1d6..136e523361f2 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3113,6 +3113,8 @@ const translations = { distributionLabel: 'ID de distribución', }, }, + amexCorporate: 'Seleccione esto si el frente de sus tarjetas dice “Corporativa”', + amexBusiness: 'Seleccione esta opción si el frente de sus tarjetas dice “Negocios”', error: { pleaseSelectProvider: 'Seleccione un proveedor de tarjetas antes de continuar.', pleaseSelectBankAccount: 'Seleccione una cuenta bancaria antes de continuar.', diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index bd55808b95ff..687f659ae622 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -258,13 +258,11 @@ const getCorrectStepForSelectedBank = (selectedBank: ValueOf; case CONST.COMPANY_CARDS.STEP.CARD_DETAILS: return ; + case CONST.COMPANY_CARDS.STEP.AMEX_CUSTOM_FEED: + return ; default: return ; } diff --git a/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx b/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx new file mode 100644 index 000000000000..f168c72924ea --- /dev/null +++ b/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx @@ -0,0 +1,113 @@ +import React, {useEffect, useState} from 'react'; +import {View} from 'react-native'; +import {useOnyx} from 'react-native-onyx'; +import type {ValueOf} from 'type-fest'; +import FormHelpMessage from '@components/FormHelpMessage'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import ScreenWrapper from '@components/ScreenWrapper'; +import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; +import Text from '@components/Text'; +import TextLink from '@components/TextLink'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import * as CompanyCards from '@userActions/CompanyCards'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; + +function AmexCustomFeed() { + const {translate} = useLocalize(); + const styles = useThemeStyles(); + const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD); + const [typeSelected, setTypeSelected] = useState>(); + const [hasError, setHasError] = useState(false); + + const submit = () => { + if (!typeSelected) { + setHasError(true); + return; + } + CompanyCards.setAddNewCompanyCardStepAndData({ + step: typeSelected === CONST.COMPANY_CARDS.AMEX_CUSTOM_FEED.CORPORATE ? CONST.COMPANY_CARDS.STEP.CARD_INSTRUCTIONS : CONST.COMPANY_CARDS.STEP.BANK_CONNECTION, + data: { + cardType: CONST.COMPANY_CARDS.CARD_TYPE.AMEX, + selectedAmexCustomFeed: typeSelected, + }, + }); + }; + + useEffect(() => { + setTypeSelected(addNewCard?.data.selectedAmexCustomFeed); + }, [addNewCard?.data.selectedAmexCustomFeed]); + + const handleBackButtonPress = () => { + CompanyCards.setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.SELECT_BANK}); + }; + + const data = [ + { + value: CONST.COMPANY_CARDS.AMEX_CUSTOM_FEED.CORPORATE, + text: CONST.COMPANY_CARDS.AMEX_CUSTOM_FEED.CORPORATE, + alternateText: translate('workspace.companyCards.addNewCard.amexCorporate'), + keyForList: CONST.COMPANY_CARDS.AMEX_CUSTOM_FEED.CORPORATE, + isSelected: typeSelected === CONST.COMPANY_CARDS.AMEX_CUSTOM_FEED.CORPORATE, + }, + { + value: CONST.COMPANY_CARDS.AMEX_CUSTOM_FEED.BUSINESS, + text: CONST.COMPANY_CARDS.AMEX_CUSTOM_FEED.BUSINESS, + alternateText: translate('workspace.companyCards.addNewCard.amexBusiness'), + keyForList: CONST.COMPANY_CARDS.AMEX_CUSTOM_FEED.BUSINESS, + isSelected: typeSelected === CONST.COMPANY_CARDS.AMEX_CUSTOM_FEED.BUSINESS, + }, + ]; + + return ( + + + + {translate('workspace.companyCards.addNewCard.howDoYouWantToConnect')} + + {`${translate('workspace.companyCards.addNewCard.learnMoreAboutConnections.text')}`} + {`${translate('workspace.companyCards.addNewCard.learnMoreAboutConnections.linkText')}`} + + + { + setTypeSelected(value); + setHasError(false); + }} + sections={[{data}]} + shouldSingleExecuteRowSelect + isAlternateTextMultilineSupported + alternateTextNumberOfLines={3} + initiallyFocusedOptionKey={addNewCard?.data.selectedAmexCustomFeed} + shouldUpdateFocusedIndex + showConfirmButton + confirmButtonText={translate('common.next')} + onConfirm={submit} + > + {hasError && ( + + + + )} + + + ); +} + +AmexCustomFeed.displayName = 'AmexCustomFeed'; + +export default AmexCustomFeed; diff --git a/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx b/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx index 7338f0df5046..e9f2185382c9 100644 --- a/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx +++ b/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx @@ -10,6 +10,7 @@ import ScrollView from '@components/ScrollView'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import usePermissions from '@hooks/usePermissions'; import useThemeStyles from '@hooks/useThemeStyles'; import Parser from '@libs/Parser'; import * as CompanyCards from '@userActions/CompanyCards'; @@ -20,6 +21,7 @@ function CardInstructionsStep() { const {translate} = useLocalize(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); + const {canUseDirectFeeds} = usePermissions(); const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD); @@ -33,6 +35,12 @@ function CardInstructionsStep() { }; const handleBackButtonPress = () => { + if (canUseDirectFeeds && feedProvider === CONST.COMPANY_CARDS.CARD_TYPE.AMEX) { + CompanyCards.setAddNewCompanyCardStepAndData({ + step: CONST.COMPANY_CARDS.STEP.AMEX_CUSTOM_FEED, + }); + return; + } CompanyCards.setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.CARD_TYPE}); }; diff --git a/src/types/onyx/CardFeeds.ts b/src/types/onyx/CardFeeds.ts index 508218897eab..f3f916258b50 100644 --- a/src/types/onyx/CardFeeds.ts +++ b/src/types/onyx/CardFeeds.ts @@ -55,6 +55,9 @@ type AddNewCardFeedData = { /** Selected feed type */ selectedFeedType: ValueOf; + /** Selected Amex bank custom feed */ + selectedAmexCustomFeed: ValueOf; + /** Name of the card */ cardTitle: string; }; From 5d60d672584bbb4f522cfd10c9874415878b4b78 Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu Date: Tue, 15 Oct 2024 11:46:10 +0300 Subject: [PATCH 2/4] Add dot to the end --- src/languages/en.ts | 2 +- src/languages/es.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 8c85563b9c7b..0f13837bec63 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3045,7 +3045,7 @@ const translations = { howDoYouWantToConnect: 'How do you want to connect to your bank?', learnMoreAboutConnections: { text: 'Learn more about the ', - linkText: 'connection methods', + linkText: 'connection methods.', }, customFeedDetails: 'Requires setup with your bank. This is most common for larger companies, and the best option, if you qualify.', directFeedDetails: 'Connect now using your master credentials. This is most common.', diff --git a/src/languages/es.ts b/src/languages/es.ts index 136e523361f2..6c15183042d4 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3083,7 +3083,7 @@ const translations = { howDoYouWantToConnect: '¿Cómo deseas conectarte a tu banco?', learnMoreAboutConnections: { text: 'Obtén más información sobre ', - linkText: 'los métodos de conexión', + linkText: 'los métodos de conexión.', }, customFeedDetails: 'Requiere configuración con tu banco. Esto es más común para empresas grandes, y la mejor opción, si calificas.', directFeedDetails: 'Conéctate ahora usando tus credenciales maestras. Esto es lo más común.', From ab61ef30e4f760b983de848a39b8c22e337d5d55 Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu Date: Tue, 15 Oct 2024 12:28:46 +0300 Subject: [PATCH 3/4] add correct check --- src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx index f435a7b73d01..25f1487381ab 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx @@ -155,7 +155,7 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) { )} {!isLoading && ( Date: Tue, 15 Oct 2024 13:51:47 +0300 Subject: [PATCH 4/4] improvement --- .../workspace/companyCards/addNew/CardInstructionsStep.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx b/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx index e9f2185382c9..762e64020935 100644 --- a/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx +++ b/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx @@ -27,15 +27,16 @@ function CardInstructionsStep() { const data = addNewCard?.data; const feedProvider = data?.cardType; + const isAmexFeedProvider = feedProvider === CONST.COMPANY_CARDS.CARD_TYPE.AMEX; const submit = () => { CompanyCards.setAddNewCompanyCardStepAndData({ - step: feedProvider === CONST.COMPANY_CARDS.CARD_TYPE.AMEX ? CONST.COMPANY_CARDS.STEP.CARD_DETAILS : CONST.COMPANY_CARDS.STEP.CARD_NAME, + step: isAmexFeedProvider ? CONST.COMPANY_CARDS.STEP.CARD_DETAILS : CONST.COMPANY_CARDS.STEP.CARD_NAME, }); }; const handleBackButtonPress = () => { - if (canUseDirectFeeds && feedProvider === CONST.COMPANY_CARDS.CARD_TYPE.AMEX) { + if (canUseDirectFeeds && isAmexFeedProvider) { CompanyCards.setAddNewCompanyCardStepAndData({ step: CONST.COMPANY_CARDS.STEP.AMEX_CUSTOM_FEED, });