[No QA]: Workspace Feed - Initial card page

src/components/Icon/Illustrations.ts

@@ -1,3 +1,4 @@
+import ExpensifyCardIllustration from '@assets/images/expensifyCard/cardIllustration.svg';
 import Abracadabra from '@assets/images/product-illustrations/abracadabra.svg';
 import BankArrowPink from '@assets/images/product-illustrations/bank-arrow--pink.svg';
 import BankMouseGreen from '@assets/images/product-illustrations/bank-mouse--green.svg';
@@ -176,6 +177,7 @@ export {
     Binoculars,
     CompanyCard,
     ReceiptUpload,
+    ExpensifyCardIllustration,
     SplitBill,
     PiggyBank,
     Accounting,

src/languages/en.ts

@@ -2390,6 +2390,16 @@ export default {
                 disableCardTitle: 'Disable Expensify Card',
                 disableCardPrompt: 'You can’t disable the Expensify Card because it’s already in use. Reach out to Concierge for next steps.',
                 disableCardButton: 'Chat with Concierge',
+                feed: {
+                    title: 'Get the Expensify Card',
+                    subTitle: 'Streamline your business with the Expensify Card',
+                    features: {
+                        cashBack: 'Up to 2% cash back on every US purchase',
+                        unlimited: 'Issue unlimited virtual cards',
+                        spend: 'Spend controls and custom limits',
+                    },
+                    ctaTitle: 'Issue new card',
+                },
             },
             workflows: {
                 title: 'Workflows',

src/languages/es.ts

@@ -2420,6 +2420,16 @@ export default {
                 disableCardTitle: 'Deshabilitar la Tarjeta Expensify',
                 disableCardPrompt: 'No puedes deshabilitar la Tarjeta Expensify porque ya está en uso. Por favor, contacta con Concierge para conocer los pasos a seguir.',
                 disableCardButton: 'Chatear con Concierge',
+                feed: {
+                    title: 'Consigue la Tarjeta Expensify',
+                    subTitle: 'Optimiza tu negocio con la Tarjeta Expensify',
+                    features: {
+                        cashBack: 'Hasta un 2% de devolución en cada compra en Estadios Unidos',
+                        unlimited: 'Emitir un número ilimitado de tarjetas virtuales',
+                        spend: 'Controles de gastos y límites personalizados',
+                    },
+                    ctaTitle: 'Emitir nueva tarjeta',
+                },
             },
             distanceRates: {
                 title: 'Tasas de distancia',

src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx

@@ -19,7 +19,6 @@ type Screens = Partial<Record<keyof FullScreenNavigatorParamList, () => React.Co
 const CENTRAL_PANE_WORKSPACE_SCREENS = {
     [SCREENS.WORKSPACE.PROFILE]: () => require<ReactComponentModule>('../../../../pages/workspace/WorkspaceProfilePage').default,
     [SCREENS.WORKSPACE.CARD]: () => require<ReactComponentModule>('../../../../pages/workspace/card/WorkspaceCardPage').default,
-    [SCREENS.WORKSPACE.EXPENSIFY_CARD]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceExpensifyCardPage').default,
     [SCREENS.WORKSPACE.WORKFLOWS]: () => require<ReactComponentModule>('../../../../pages/workspace/workflows/WorkspaceWorkflowsPage').default,
     [SCREENS.WORKSPACE.REIMBURSE]: () => require<ReactComponentModule>('../../../../pages/workspace/reimburse/WorkspaceReimbursePage').default,
     [SCREENS.WORKSPACE.BILLS]: () => require<ReactComponentModule>('../../../../pages/workspace/bills/WorkspaceBillsPage').default,
@@ -32,6 +31,7 @@ const CENTRAL_PANE_WORKSPACE_SCREENS = {
     [SCREENS.WORKSPACE.TAGS]: () => require<ReactComponentModule>('../../../../pages/workspace/tags/WorkspaceTagsPage').default,
     [SCREENS.WORKSPACE.TAXES]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceTaxesPage').default,
     [SCREENS.WORKSPACE.REPORT_FIELDS]: () => require<ReactComponentModule>('../../../../pages/workspace/reportFields/WorkspaceReportFieldsPage').default,
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceCardPageFeed').default,
     [SCREENS.WORKSPACE.DISTANCE_RATES]: () => require<ReactComponentModule>('../../../../pages/workspace/distanceRates/PolicyDistanceRatesPage').default,
 } satisfies Screens;
 

src/pages/workspace/expensifyCard/WorkspaceCardPageFeed.tsx

@@ -0,0 +1,74 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import React 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 useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+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';
+
+const tripsFeatures: FeatureListItem[] = [
+    {
+        icon: Illustrations.MoneyReceipts,
+        translationKey: 'workspace.moreFeatures.expensifyCard.feed.features.cashBack',
+    },
+    {
+        icon: Illustrations.CreditCardsNew,
+        translationKey: 'workspace.moreFeatures.expensifyCard.feed.features.unlimited',
+    },
+    {
+        icon: Illustrations.MoneyWings,
+        translationKey: 'workspace.moreFeatures.expensifyCard.feed.features.spend',
+    },
+];
+type WorkspaceCardPageFeedProps = StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD>;
+
+function WorkspaceCardPageFeed({route}: WorkspaceCardPageFeedProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    const {isSmallScreenWidth} = useWindowDimensions();
+
+    return (
+        <AccessOrNotFoundWrapper
+            policyID={route.params.policyID}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
+        >
+            <WorkspacePageWithSections
+                shouldUseScrollView
+                icon={Illustrations.HandCard}
+                headerText={translate('workspace.common.expensifyCard')}
+                route={route}
+                guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_EXPENSIFY_CARD}
+                shouldShowOfflineIndicatorInWideScreen
+            >
+                <View style={[styles.mt3, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+                    <FeatureList
+                        menuItems={tripsFeatures}
+                        title={translate('workspace.moreFeatures.expensifyCard.feed.title')}
+                        subtitle={translate('workspace.moreFeatures.expensifyCard.feed.subTitle')}
+                        ctaText={translate('workspace.moreFeatures.expensifyCard.feed.ctaTitle')}
+                        ctaAccessibilityLabel={translate('workspace.moreFeatures.expensifyCard.feed.ctaTitle')}
+                        onCtaPress={() => {}}
+                        illustrationBackgroundColor={theme.fallbackIconColor}
+                        illustration={Illustrations.ExpensifyCardIllustration}
+                        illustrationStyle={styles.expensifyCardIllustrationContainer}
+                        titleStyles={styles.textHeadlineH1}
+                        contentPaddingOnLargeScreens={styles.p5}
+                    />
+                </View>
+            </WorkspacePageWithSections>
+        </AccessOrNotFoundWrapper>
+    );
+}
+
+WorkspaceCardPageFeed.displayName = 'WorkspaceCardPageFeed';
+
+export default WorkspaceCardPageFeed;

src/styles/index.ts

@@ -5016,6 +5016,11 @@ const styles = (theme: ThemeColors) =>
             flex: 1,
         },
 
+        expensifyCardIllustrationContainer: {
+            width: 680,
+            height: 220,
+        },
+
         computerIllustrationContainer: {
             width: 272,
             height: 188,