Merge pull request #47782 from waterim/feat-47376-Company-cards-empty…

…-state

[NO QA] Feat: company cards empty state

src/ROUTES.ts

@@ -895,6 +895,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/expensify-card',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card` as const,
     },
+    WORKSPACE_COMPANY_CARDS: {
+        route: 'settings/workspaces/:policyID/company-cards',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/company-cards` as const,
+    },
     WORKSPACE_EXPENSIFY_CARD_DETAILS: {
         route: 'settings/workspaces/:policyID/expensify-card/:cardID',
         getRoute: (policyID: string, cardID: string, backTo?: string) => getUrlWithBackToParam(`settings/workspaces/${policyID}/expensify-card/${cardID}`, backTo),
@@ -931,10 +935,6 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/expensify-card/settings/frequency',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/settings/frequency` as const,
     },
-    WORKSPACE_COMPANY_CARDS: {
-        route: 'settings/workspaces/:policyID/company-cards',
-        getRoute: (policyID: string) => `settings/workspaces/${policyID}/company-cards` as const,
-    },
     WORKSPACE_RULES: {
         route: 'settings/workspaces/:policyID/rules',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/rules` as const,

src/components/FeatureList.tsx

@@ -54,6 +54,9 @@ type FeatureListProps = {
     /** The background color to apply in the upper half of the screen. */
     illustrationBackgroundColor?: string;
 
+    /** Customize the Illustration container */
+    illustrationContainerStyle?: StyleProp<ViewStyle>;
+
     /** The style used for the title */
     titleStyles?: StyleProp<TextStyle>;
 
@@ -78,6 +81,7 @@ function FeatureList({
     illustration,
     illustrationStyle,
     illustrationBackgroundColor,
+    illustrationContainerStyle,
     titleStyles,
     contentPaddingOnLargeScreens,
 }: FeatureListProps) {
@@ -94,6 +98,7 @@ function FeatureList({
             illustrationBackgroundColor={illustrationBackgroundColor}
             illustrationStyle={illustrationStyle}
             titleStyles={titleStyles}
+            illustrationContainerStyle={illustrationContainerStyle}
             contentPaddingOnLargeScreens={contentPaddingOnLargeScreens}
         >
             <View style={styles.flex1}>

src/components/Icon/Illustrations.ts

@@ -1,4 +1,5 @@
 import AmexCompanyCards from '@assets/images/companyCards/amex.svg';
+import CompanyCardsEmptyState from '@assets/images/companyCards/emptystate__card-pos.svg';
 import MasterCardCompanyCards from '@assets/images/companyCards/mastercard.svg';
 import VisaCompanyCards from '@assets/images/companyCards/visa.svg';
 import EmptyCardState from '@assets/images/emptystate__expensifycard.svg';
@@ -75,6 +76,7 @@ import LockClosed from '@assets/images/simple-illustrations/simple-illustration_
 import LockClosedOrange from '@assets/images/simple-illustrations/simple-illustration__lockclosed_orange.svg';
 import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg';
 import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg';
+import MagnifyingGlassMoney from '@assets/images/simple-illustrations/simple-illustration__magnifyingglass-money.svg';
 import Mailbox from '@assets/images/simple-illustrations/simple-illustration__mailbox.svg';
 import MoneyReceipts from '@assets/images/simple-illustrations/simple-illustration__money-receipts.svg';
 import MoneyBadge from '@assets/images/simple-illustrations/simple-illustration__moneybadge.svg';
@@ -222,7 +224,9 @@ export {
     Tire,
     BigVault,
     Filters,
+    MagnifyingGlassMoney,
     Rules,
+    CompanyCardsEmptyState,
     AmexCompanyCards,
     MasterCardCompanyCards,
     VisaCompanyCards,

src/languages/en.ts

@@ -2115,9 +2115,9 @@ export default {
         common: {
             card: 'Cards',
             expensifyCard: 'Expensify Card',
+            companyCards: 'Company Cards',
             workflows: 'Workflows',
             workspace: 'Workspace',
-            companyCards: 'Company cards',
             edit: 'Edit workspace',
             enabled: 'Enabled',
             disabled: 'Disabled',
@@ -2888,7 +2888,16 @@ export default {
             },
             companyCards: {
                 title: 'Company Cards',
-                subtitle: 'Import spend from existing company cards',
+                subtitle: 'Import spend from existing company cards.',
+                feed: {
+                    title: 'Import company cards',
+                    features: {
+                        support: 'Support for all major card providers',
+                        assignCards: 'Assign cards to the entire team',
+                        automaticImport: 'Automatic transaction import',
+                    },
+                    ctaTitle: 'Add company cards',
+                },
                 disableCardTitle: 'Disable Company Cards',
                 disableCardPrompt: 'You can’t disable company cards because this feature is in use. Reach out to the Concierge for next steps.',
                 disableCardButton: 'Chat with Concierge',

src/languages/es.ts

@@ -2146,9 +2146,9 @@ export default {
         common: {
             card: 'Tarjetas',
             expensifyCard: 'Tarjeta Expensify',
+            companyCards: 'Tarjetas de empresa',
             workflows: 'Flujos de trabajo',
             workspace: 'Espacio de trabajo',
-            companyCards: 'Tarjetas de empresa',
             edit: 'Editar espacio de trabajo',
             enabled: 'Activada',
             disabled: 'Desactivada',
@@ -2933,6 +2933,15 @@ export default {
             companyCards: {
                 title: 'Tarjetas de empresa',
                 subtitle: 'Importar gastos de las tarjetas de empresa existentes.',
+                feed: {
+                    title: 'Importar tarjetas de empresa',
+                    features: {
+                        support: 'Compatibilidad con los principales proveedores de tarjetas',
+                        assignCards: 'Asignar tarjetas a todo el equipo',
+                        automaticImport: 'Importación automática de transacciones',
+                    },
+                    ctaTitle: 'Añadir tarjetas de empresa',
+                },
                 disableCardTitle: 'Deshabilitar tarjetas de empresa',
                 disableCardPrompt: 'No puedes deshabilitar las tarjetas de empresa porque esta función está en uso. Por favor, contacta a Concierge para los próximos pasos.',
                 disableCardButton: 'Chatear con Concierge',

src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx

@@ -0,0 +1,57 @@
+import React, {useCallback} from 'react';
+import {View} from 'react-native';
+import FeatureList from '@components/FeatureList';
+import type {FeatureListItem} from '@components/FeatureList';
+import * as Illustrations from '@components/Icon/Illustrations';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
+import colors from '@styles/theme/colors';
+
+const companyCardFeatures: FeatureListItem[] = [
+    {
+        icon: Illustrations.CreditCardsNew,
+        translationKey: 'workspace.moreFeatures.companyCards.feed.features.support',
+    },
+    {
+        icon: Illustrations.HandCard,
+        translationKey: 'workspace.moreFeatures.companyCards.feed.features.assignCards',
+    },
+    {
+        icon: Illustrations.MagnifyingGlassMoney,
+        translationKey: 'workspace.moreFeatures.companyCards.feed.features.automaticImport',
+    },
+];
+
+function WorkspaceCompanyCardPageEmptyState() {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+
+    const startFlow = useCallback(() => {
+        // TODO: Add Card Feed Flow https://github.com/Expensify/App/issues/47376
+    }, []);
+
+    return (
+        <View style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+            <FeatureList
+                menuItems={companyCardFeatures}
+                title={translate('workspace.moreFeatures.companyCards.feed.title')}
+                subtitle={translate('workspace.moreFeatures.companyCards.subtitle')}
+                ctaText={translate('workspace.moreFeatures.companyCards.feed.ctaTitle')}
+                ctaAccessibilityLabel={translate('workspace.moreFeatures.companyCards.feed.ctaTitle')}
+                onCtaPress={startFlow}
+                illustrationBackgroundColor={colors.blue700}
+                illustration={Illustrations.CompanyCardsEmptyState}
+                illustrationStyle={styles.emptyStateCardIllustration}
+                illustrationContainerStyle={[styles.emptyStateCardIllustrationContainer, styles.justifyContentStart]}
+                titleStyles={styles.textHeadlineH1}
+            />
+        </View>
+    );
+}
+
+WorkspaceCompanyCardPageEmptyState.displayName = 'WorkspaceCompanyCardPageEmptyState';
+
+export default withPolicyAndFullscreenLoading(WorkspaceCompanyCardPageEmptyState);

src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx

@@ -1,22 +1,18 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
-import {View} from 'react-native';
 import * as Illustrations from '@components/Icon/Illustrations';
 import useLocalize from '@hooks/useLocalize';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useThemeStyles from '@hooks/useThemeStyles';
 import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
 import type SCREENS from '@src/SCREENS';
+import WorkspaceCompanyCardPageEmptyState from './WorkspaceCompanyCardPageEmptyState';
 
 type WorkspaceCompanyCardPageProps = StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARDS>;
 
 function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     return (
         <AccessOrNotFoundWrapper
@@ -31,7 +27,7 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_COMPANY_CARDS}
                 shouldShowOfflineIndicatorInWideScreen
             >
-                <View style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]} />
+                <WorkspaceCompanyCardPageEmptyState route={route} />
             </WorkspacePageWithSections>
         </AccessOrNotFoundWrapper>
     );

src/styles/index.ts

@@ -5083,6 +5083,15 @@ const styles = (theme: ThemeColors) =>
             height: 220,
         },
 
+        emptyStateCardIllustrationContainer: {
+            height: 220,
+        },
+
+        emptyStateCardIllustration: {
+            width: 164,
+            height: 190,
+        },
+
         computerIllustrationContainer: {
             width: 272,
             height: 188,