diff --git a/src/CONST.ts b/src/CONST.ts index 40f3c541b0f7..17cc92998fc1 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2568,6 +2568,8 @@ const CONST = { CARD_INSTRUCTIONS: 'CardInstructions', CARD_NAME: 'CardName', CARD_DETAILS: 'CardDetails', + BANK_CONNECTION: 'BankConnection', + AMEX_CUSTOM_FEED: 'AmexCustomFeed', }, CARD_TYPE: { AMEX: 'amex', @@ -2589,6 +2591,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 58ac38d1856c..36169c508744 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3048,7 +3048,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.', @@ -3077,6 +3077,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 650ccdf5e660..6f44fba5f91a 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3086,7 +3086,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.', @@ -3116,6 +3116,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..762e64020935 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,19 +21,27 @@ function CardInstructionsStep() { const {translate} = useLocalize(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); + const {canUseDirectFeeds} = usePermissions(); const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD); 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 && isAmexFeedProvider) { + 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; };