[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/WorkspaceCardPageEmptyState.tsx

@@ -0,0 +1,68 @@
+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 useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
+import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
+import CONST from '@src/CONST';
+import type SCREENS from '@src/SCREENS';
+
+const expensifyCardFeatures: 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 WorkspaceCardPageEmptyStateProps = {route: StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD>['route']};
+
+function WorkspaceCardPageEmptyState({route}: WorkspaceCardPageEmptyStateProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+
+    return (
+        <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, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+                <FeatureList
+                    menuItems={expensifyCardFeatures}
+                    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>
+    );
+}
+
+WorkspaceCardPageEmptyState.displayName = 'WorkspaceCardPageEmptyState';
+
+export default WorkspaceCardPageEmptyState;

src/pages/workspace/expensifyCard/WorkspaceCardPageFeed.tsx

@@ -0,0 +1,37 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import React from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import CONST from '@src/CONST';
+import type SCREENS from '@src/SCREENS';
+import type {WorkspaceCardsList} from '@src/types/onyx';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import WorkspaceCardPageEmptyState from './WorkspaceCardPageEmptyState';
+import WorkspaceExpensifyCardPage from './WorkspaceExpensifyCardPage';
+
+type WorkspaceCardPageFeedProps = StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD>;
+
+// TODO: remove when Onyx data is available, and pass the data to 'WorkspaceExpensifyCardPage' so that we will not make the same 'Onyx' call twice
+const cardsList: OnyxEntry<WorkspaceCardsList> = {};
+
+function WorkspaceCardPageFeed({route}: WorkspaceCardPageFeedProps) {
+    // const policyID = route.params.policyID ?? '-1';
+    // const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${policyID}_${CONST.EXPENSIFY_CARD.BANK}`);
+
+    return (
+        <AccessOrNotFoundWrapper
+            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
+            policyID={route.params.policyID}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
+        >
+            {/* After BE will be implemented we will probably want to have ActivityIndicator during fetch for cardsList */}
+            {isEmptyObject(cardsList) && <WorkspaceCardPageEmptyState route={route} />}
+            {!isEmptyObject(cardsList) && <WorkspaceExpensifyCardPage route={route} />}
+        </AccessOrNotFoundWrapper>
+    );
+}
+
+WorkspaceCardPageFeed.displayName = 'WorkspaceCardPageFeed';
+
+export default WorkspaceCardPageFeed;

src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx

@@ -19,17 +19,16 @@ import localeCompare from '@libs/LocaleCompare';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import Navigation from '@navigation/Navigation';
 import type {FullScreenNavigatorParamList} from '@navigation/types';
-import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import type {Card, WorkspaceCardsList} from '@src/types/onyx';
 import WorkspaceCardListHeader from './WorkspaceCardListHeader';
 import WorkspaceCardListRow from './WorkspaceCardListRow';
 
-type WorkspaceExpensifyCardPageProps = StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD>;
+type WorkspaceExpensifyCardPageProps = {route: StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD>['route']};
 
-// TODO: remove when Onyx data is available
+// TODO: remove this const altogether and take the card data from component prop when Onyx data is available
 const mockedCards: OnyxEntry<WorkspaceCardsList> = {
     test1: {
         // @ts-expect-error TODO: change cardholder to accountID
@@ -143,36 +142,29 @@ function WorkspaceExpensifyCardPage({route}: WorkspaceExpensifyCardPageProps) {
     );
 
     return (
-        <AccessOrNotFoundWrapper
-            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
-            policyID={policyID}
-            // TODO: uncomment when feature support is implemented (https://github.com/Expensify/App/issues/44301)
-            // featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
+        <ScreenWrapper
+            shouldEnablePickerAvoiding={false}
+            shouldShowOfflineIndicatorInWideScreen
+            shouldEnableMaxHeight
+            testID={WorkspaceExpensifyCardPage.displayName}
         >
-            <ScreenWrapper
-                shouldEnablePickerAvoiding={false}
-                shouldShowOfflineIndicatorInWideScreen
-                shouldEnableMaxHeight
-                testID={WorkspaceExpensifyCardPage.displayName}
+            <HeaderWithBackButton
+                icon={Illustrations.HandCard}
+                title={translate('workspace.common.expensifyCard')}
+                shouldShowBackButton={shouldUseNarrowLayout}
+                onBackButtonPress={() => Navigation.goBack()}
             >
-                <HeaderWithBackButton
-                    icon={Illustrations.HandCard}
-                    title={translate('workspace.common.expensifyCard')}
-                    shouldShowBackButton={shouldUseNarrowLayout}
-                    onBackButtonPress={() => Navigation.goBack()}
-                >
-                    {!shouldUseNarrowLayout && getHeaderButtons()}
-                </HeaderWithBackButton>
-
-                {shouldUseNarrowLayout && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
-
-                <FlatList
-                    data={sortedCards}
-                    renderItem={renderItem}
-                    ListHeaderComponent={WorkspaceCardListHeader}
-                />
-            </ScreenWrapper>
-        </AccessOrNotFoundWrapper>
+                {!shouldUseNarrowLayout && getHeaderButtons()}
+            </HeaderWithBackButton>
+
+            {shouldUseNarrowLayout && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
+
+            <FlatList
+                data={sortedCards}
+                renderItem={renderItem}
+                ListHeaderComponent={WorkspaceCardListHeader}
+            />
+        </ScreenWrapper>
     );
 }
 

src/styles/index.ts

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