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;
};