diff --git a/src/CONST.ts b/src/CONST.ts
index 5066899c3806..171dc7ff2c8a 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -745,6 +745,7 @@ const CONST = {
HOW_TO_CONNECT_TO_SAGE_INTACCT: 'https://help.expensify.com/articles/expensify-classic/integrations/accounting-integrations/Sage-Intacct#how-to-connect-to-sage-intacct',
PRICING: `https://www.expensify.com/pricing`,
COMPANY_CARDS_HELP: 'https://help.expensify.com/articles/expensify-classic/connect-credit-cards/company-cards/Commercial-Card-Feeds',
+ COMPANY_CARDS_STRIPE_HELP: 'https://dashboard.stripe.com/login?redirect=%2Fexpenses%2Fsettings',
COMPANY_CARDS_CONNECT_CREDIT_CARDS_HELP_URL:
'https://help.expensify.com/articles/expensify-classic/connect-credit-cards/company-cards/Commercial-Card-Feeds#what-is-the-difference-between-commercial-card-feeds-and-your-direct-bank-connections',
CUSTOM_REPORT_NAME_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/spending-insights/Custom-Templates',
@@ -2578,6 +2579,7 @@ const CONST = {
AMEX: 'amex',
VISA: 'visa',
MASTERCARD: 'mastercard',
+ STRIPE: 'stripe',
},
FEED_TYPE: {
CUSTOM: 'customFeed',
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 924e2f009942..d73015693e7a 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -3065,6 +3065,7 @@ const translations = {
visa: `1. Visit [this help article](${CONST.COMPANY_CARDS_HELP}) for detailed instructionson how to set up your Visa Commercial Cards.\n\n2. [Contact your bank](${CONST.COMPANY_CARDS_HELP}) to verify they support a custom feed for your program, and ask them toenable it.\n\n3. *Once the feed is enabled and you have its details, continue to the next screen.*`,
amex: `1. Visit [this help article](${CONST.COMPANY_CARDS_HELP}) to find out if American Express can enable a custom feed for your program.\n\n2. Once the feed is enabled, Amex will send you a production letter.\n\n3. *Once you have the feed information, continue to the next screen.*`,
mastercard: `1. Visit [this help article](${CONST.COMPANY_CARDS_HELP}) for detailed instructions on how to set up your Mastercard Commercial Cards.\n\n 2. [Contact your bank](${CONST.COMPANY_CARDS_HELP}) to verify they support a custom feed for your program, and ask them to enable it.\n\n3. *Once the feed is enabled and you have its details, continue to the next screen.*`,
+ stripe: `1. Visit Stripe’s Dashboard, and go to [Settings](${CONST.COMPANY_CARDS_STRIPE_HELP}).\n\n2. Under Product Integrations, click Enable next to Expensify.\n\n3. Once the feed is enabled, click Submit below and we’ll work on adding it.`,
},
whatBankIssuesCard: 'What bank issues these cards?',
enterNameOfBank: 'Enter name of bank',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 8a9d138b2482..a9d35a6f8228 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -3103,6 +3103,7 @@ const translations = {
visa: `1. Visite [este artículo de ayuda](${CONST.COMPANY_CARDS_HELP}) para obtener instrucciones detalladas sobre cómo configurar sus tarjetas comerciales Visa.\n\n2. [Póngase en contacto con su banco](${CONST.COMPANY_CARDS_HELP}) para comprobar que admiten un feed personalizado para su programa, y pídales que lo activen.\n\n3. *Una vez que el feed esté habilitado y tengas sus datos, pasa a la siguiente pantalla.*`,
amex: `1. Visite [este artículo de ayuda](${CONST.COMPANY_CARDS_HELP}) para saber si American Express puede habilitar un feed personalizado para su programa.\n\n2. Una vez activada la alimentación, Amex le enviará una carta de producción.\n\n3. *Una vez que tenga la información de alimentación, continúe con la siguiente pantalla.*`,
mastercard: `1. Visite [este artículo de ayuda](${CONST.NETSUITE_IMPORT.HELP_LINKS.CUSTOM_SEGMENTS}) para obtener instrucciones detalladas sobre cómo configurar sus tarjetas comerciales Mastercard.\n\n 2. [Póngase en contacto con su banco](${CONST.COMPANY_CARDS_HELP}) para verificar que admiten un feed personalizado para su programa, y pídales que lo habiliten.\n\n3. *Una vez que el feed esté habilitado y tengas sus datos, pasa a la siguiente pantalla.*`,
+ stripe: `1. Visita el Panel de Stripe y ve a [Configuraciones](${CONST.COMPANY_CARDS_STRIPE_HELP}).\n\n2. En Integraciones de Productos, haz clic en Habilitar junto a Expensify.\n\n3. Una vez que la fuente esté habilitada, haz clic en Enviar abajo y comenzaremos a añadirla.`,
},
whatBankIssuesCard: '¿Qué banco emite estas tarjetas?',
enterNameOfBank: 'Introduzca el nombre del banco',
diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
index 687f659ae622..0ee037c3c354 100644
--- a/src/libs/CardUtils.ts
+++ b/src/libs/CardUtils.ts
@@ -253,8 +253,7 @@ const getCorrectStepForSelectedBank = (selectedBank: ValueOf;
case CONST.COMPANY_CARDS.STEP.CARD_INSTRUCTIONS:
- return ;
+ return ;
case CONST.COMPANY_CARDS.STEP.CARD_NAME:
return ;
case CONST.COMPANY_CARDS.STEP.CARD_DETAILS:
diff --git a/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx b/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx
index 762e64020935..7cd23f1c2604 100644
--- a/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx
@@ -13,11 +13,16 @@ import useNetwork from '@hooks/useNetwork';
import usePermissions from '@hooks/usePermissions';
import useThemeStyles from '@hooks/useThemeStyles';
import Parser from '@libs/Parser';
+import Navigation from '@navigation/Navigation';
+import * as Card from '@userActions/Card';
import * as CompanyCards from '@userActions/CompanyCards';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
-function CardInstructionsStep() {
+type CardInstructionsStepProps = {
+ policyID?: string;
+};
+function CardInstructionsStep({policyID}: CardInstructionsStepProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();
const {isOffline} = useNetwork();
@@ -27,9 +32,17 @@ function CardInstructionsStep() {
const data = addNewCard?.data;
const feedProvider = data?.cardType;
+ const isStripeFeedProvider = feedProvider === CONST.COMPANY_CARDS.CARD_TYPE.STRIPE;
const isAmexFeedProvider = feedProvider === CONST.COMPANY_CARDS.CARD_TYPE.AMEX;
+ const buttonTranslation = isStripeFeedProvider ? translate('common.submit') : translate('common.next');
+
const submit = () => {
+ if (canUseDirectFeeds && isStripeFeedProvider) {
+ Card.updateSelectedFeed(feedProvider, policyID ?? '-1');
+ Navigation.goBack();
+ return;
+ }
CompanyCards.setAddNewCompanyCardStepAndData({
step: isAmexFeedProvider ? CONST.COMPANY_CARDS.STEP.CARD_DETAILS : CONST.COMPANY_CARDS.STEP.CARD_NAME,
});
@@ -42,6 +55,10 @@ function CardInstructionsStep() {
});
return;
}
+ if (canUseDirectFeeds && isStripeFeedProvider) {
+ CompanyCards.setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.SELECT_BANK});
+ return;
+ }
CompanyCards.setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.CARD_TYPE});
};
@@ -74,7 +91,7 @@ function CardInstructionsStep() {
large
style={[styles.w100]}
onPress={submit}
- text={translate('common.next')}
+ text={buttonTranslation}
/>
diff --git a/src/pages/workspace/companyCards/addNew/DetailsStep.tsx b/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
index 93eccbb85a32..4e0d1abf5c8c 100644
--- a/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
@@ -23,7 +23,8 @@ function DetailsStep() {
const {inputCallbackRef} = useAutoFocusInput();
const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
- const feedProvider = addNewCard?.data.cardType;
+ const feedProvider = addNewCard?.data?.cardType;
+ const isStripeFeedProvider = feedProvider === CONST.COMPANY_CARDS.CARD_TYPE.STRIPE;
const submit = () => {};
const handleBackButtonPress = () => {
@@ -140,7 +141,7 @@ function DetailsStep() {
contentContainerStyle={styles.flexGrow1}
>
- {feedProvider ? translate(`workspace.companyCards.addNewCard.feedDetails.${feedProvider}.title`) : ''}
+ {feedProvider && !isStripeFeedProvider ? translate(`workspace.companyCards.addNewCard.feedDetails.${feedProvider}.title`) : ''}