Merge pull request #50781 from narefyev91/company-cards-amex

Expensify · Oct 15, 2024 · e61b1fb · e61b1fb
2 parents 36d0cb1 + e61e96b
commit e61b1fb
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -258,13 +258,11 @@ const getCorrectStepForSelectedBank = (selectedBank: ValueOf<typeof CONST.COMPAN
     }
 
     if (selectedBank === CONST.COMPANY_CARDS.BANKS.AMEX) {
-        // TODO https://github.com/Expensify/App/issues/50451
-        return;
+        return CONST.COMPANY_CARDS.STEP.AMEX_CUSTOM_FEED;
     }
 
     if (selectedBank === CONST.COMPANY_CARDS.BANKS.BREX) {
-        // TODO Skip the step to submit
-        return;
+        return CONST.COMPANY_CARDS.STEP.BANK_CONNECTION;
     }
 
     if (selectedBank === CONST.COMPANY_CARDS.BANKS.OTHER) {

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -155,7 +155,7 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
             )}
             {!isLoading && (
                 <WorkspacePageWithSections
-                    shouldUseScrollView={isFeedAdded}
+                    shouldUseScrollView={!isFeedAdded}
                     icon={Illustrations.CompanyCard}
                     headerText={translate('workspace.common.companyCards')}
                     route={route}

diff --git a/src/pages/workspace/companyCards/addNew/AddNewCardPage.tsx b/src/pages/workspace/companyCards/addNew/AddNewCardPage.tsx
@@ -4,6 +4,7 @@ import usePermissions from '@hooks/usePermissions';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import AmexCustomFeed from './AmexCustomFeed';
 import CardInstructionsStep from './CardInstructionsStep';
 import CardNameStep from './CardNameStep';
 import CardTypeStep from './CardTypeStep';
@@ -31,6 +32,8 @@ function AddNewCardPage() {
                 return <CardNameStep />;
             case CONST.COMPANY_CARDS.STEP.CARD_DETAILS:
                 return <DetailsStep />;
+            case CONST.COMPANY_CARDS.STEP.AMEX_CUSTOM_FEED:
+                return <AmexCustomFeed />;
             default:
                 return <SelectBankStep />;
         }

diff --git a/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx 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<ValueOf<typeof CONST.COMPANY_CARDS.AMEX_CUSTOM_FEED>>();
+    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 (
+        <ScreenWrapper
+            testID={AmexCustomFeed.displayName}
+            includeSafeAreaPaddingBottom={false}
+            shouldEnablePickerAvoiding={false}
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={translate('workspace.companyCards.addCardFeed')}
+                onBackButtonPress={handleBackButtonPress}
+            />
+
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.companyCards.addNewCard.howDoYouWantToConnect')}</Text>
+            <Text style={[styles.textSupporting, styles.ph5, styles.mb6]}>
+                {`${translate('workspace.companyCards.addNewCard.learnMoreAboutConnections.text')}`}
+                <TextLink href={CONST.COMPANY_CARDS_CONNECT_CREDIT_CARDS_HELP_URL}>{`${translate('workspace.companyCards.addNewCard.learnMoreAboutConnections.linkText')}`}</TextLink>
+            </Text>
+
+            <SelectionList
+                ListItem={RadioListItem}
+                onSelectRow={({value}) => {
+                    setTypeSelected(value);
+                    setHasError(false);
+                }}
+                sections={[{data}]}
+                shouldSingleExecuteRowSelect
+                isAlternateTextMultilineSupported
+                alternateTextNumberOfLines={3}
+                initiallyFocusedOptionKey={addNewCard?.data.selectedAmexCustomFeed}
+                shouldUpdateFocusedIndex
+                showConfirmButton
+                confirmButtonText={translate('common.next')}
+                onConfirm={submit}
+            >
+                {hasError && (
+                    <View style={[styles.ph5, styles.mb3]}>
+                        <FormHelpMessage
+                            isError={hasError}
+                            message={translate('workspace.companyCards.addNewCard.error.pleaseSelectBankAccount')}
+                        />
+                    </View>
+                )}
+            </SelectionList>
+        </ScreenWrapper>
+    );
+}
+
+AmexCustomFeed.displayName = 'AmexCustomFeed';
+
+export default AmexCustomFeed;
diff --git 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
@@ -55,6 +55,9 @@ type AddNewCardFeedData = {
     /** Selected feed type */
     selectedFeedType: ValueOf<typeof CONST.COMPANY_CARDS.FEED_TYPE>;
 
+    /** Selected Amex bank custom feed */
+    selectedAmexCustomFeed: ValueOf<typeof CONST.COMPANY_CARDS.AMEX_CUSTOM_FEED>;
+
     /** Name of the card */
     cardTitle: string;
 };