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`) : ''}