Merge pull request #50733 from waterim/feat-50450

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',

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',

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',

src/libs/CardUtils.ts

@@ -253,8 +253,7 @@ const getCorrectStepForSelectedBank = (selectedBank: ValueOf<typeof CONST.COMPAN
     ];
 
     if (selectedBank === CONST.COMPANY_CARDS.BANKS.STRIPE) {
-        // TODO https://github.com/Expensify/App/issues/50450
-        return;
+        return CONST.COMPANY_CARDS.STEP.CARD_INSTRUCTIONS;
     }
 
     if (selectedBank === CONST.COMPANY_CARDS.BANKS.AMEX) {

src/pages/workspace/companyCards/addNew/AddNewCardPage.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {useOnyx} from 'react-native-onyx';
 import usePermissions from '@hooks/usePermissions';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
+import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import AmexCustomFeed from './AmexCustomFeed';
@@ -12,7 +13,8 @@ import DetailsStep from './DetailsStep';
 import SelectBankStep from './SelectBankStep';
 import SelectFeedType from './SelectFeedType';
 
-function AddNewCardPage() {
+function AddNewCardPage({policy}: WithPolicyAndFullscreenLoadingProps) {
+    const policyID = policy?.id;
     const [addNewCardFeed] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
     const {canUseDirectFeeds} = usePermissions();
 
@@ -27,7 +29,7 @@ function AddNewCardPage() {
             case CONST.COMPANY_CARDS.STEP.CARD_TYPE:
                 return <CardTypeStep />;
             case CONST.COMPANY_CARDS.STEP.CARD_INSTRUCTIONS:
-                return <CardInstructionsStep />;
+                return <CardInstructionsStep policyID={policyID} />;
             case CONST.COMPANY_CARDS.STEP.CARD_NAME:
                 return <CardNameStep />;
             case CONST.COMPANY_CARDS.STEP.CARD_DETAILS:

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}
                     />
                 </View>
             </ScrollView>

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}
             >
                 <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>
-                    {feedProvider ? translate(`workspace.companyCards.addNewCard.feedDetails.${feedProvider}.title`) : ''}
+                    {feedProvider && !isStripeFeedProvider ? translate(`workspace.companyCards.addNewCard.feedDetails.${feedProvider}.title`) : ''}
                 </Text>
                 <FormProvider
                     formID={ONYXKEYS.FORMS.ADD_NEW_CARD_FEED_FORM}

src/pages/workspace/companyCards/addNew/SelectBankStep.tsx

@@ -31,9 +31,7 @@ function SelectBankStep() {
         } else {
             CompanyCards.setAddNewCompanyCardStepAndData({
                 step: CardUtils.getCorrectStepForSelectedBank(bankSelected),
-                data: {
-                    selectedBank: bankSelected,
-                },
+                data: {...(bankSelected === CONST.COMPANY_CARDS.BANKS.STRIPE ? {cardType: CONST.COMPANY_CARDS.CARD_TYPE.STRIPE, selectedBank: bankSelected} : {selectedBank: bankSelected})},
                 isEditing: false,
             });
         }