[No QA] Create new Card Details page

src/ROUTES.ts

@@ -826,6 +826,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/expensify-card',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card` 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),
+    },
     WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW: {
         route: 'settings/workspaces/:policyID/expensify-card/issue-new',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/issue-new` as const,

src/SCREENS.ts

@@ -339,6 +339,7 @@ const SCREENS = {
         RATE_AND_UNIT_RATE: 'Workspace_RateAndUnit_Rate',
         RATE_AND_UNIT_UNIT: 'Workspace_RateAndUnit_Unit',
         EXPENSIFY_CARD: 'Workspace_ExpensifyCard',
+        EXPENSIFY_CARD_DETAILS: 'Workspace_ExpensifyCard_Details',
         EXPENSIFY_CARD_ISSUE_NEW: 'Workspace_ExpensifyCard_New',
         BILLS: 'Workspace_Bills',
         INVOICES: 'Workspace_Invoices',

src/languages/en.ts

@@ -2637,6 +2637,9 @@ export default {
                 'We consider a number of factors when calculating your remaining limit: your tenure as a customer, the business-related information you provided during signup, and the available cash in your business bank account. Your remaining limit can fluctuate on a daily basis.',
             cashBack: 'Cash back',
             cashBackDescription: 'Cash back balance is based on settled monthly Expensify Card spend across your workspace.',
+            cardDetails: 'Card details',
+            virtual: 'Virtual',
+            physical: 'Physical',
         },
         categories: {
             deleteCategories: 'Delete categories',

src/languages/es.ts

@@ -2683,6 +2683,9 @@ export default {
                 'A la hora de calcular tu límite restante, tenemos en cuenta una serie de factores: su antigüedad como cliente, la información relacionada con tu negocio que nos facilitaste al darte de alta y el efectivo disponible en tu cuenta bancaria comercial. Tu límite restante puede fluctuar a diario.',
             cashBack: 'Reembolso',
             cashBackDescription: 'El saldo de devolución se basa en el gasto mensual realizado con la tarjeta Expensify en tu espacio de trabajo.',
+            cardDetails: 'Datos de la tarjeta',
+            virtual: 'Virtual',
+            physical: 'Física',
         },
         categories: {
             deleteCategories: 'Eliminar categorías',

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -403,6 +403,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.TAX_VALUE]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/ValuePage').default,
     [SCREENS.WORKSPACE.TAX_CREATE]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceCreateTaxPage').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: () => require<ReactComponentModule>('../../../../pages/workspace/card/issueNew/IssueNewCardPage').default,
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD_DETAILS]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage').default,
     [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require<ReactComponentModule>('../../../../pages/TeachersUnite/SaveTheWorldPage').default,
     [SCREENS.SETTINGS.SUBSCRIPTION.CHANGE_PAYMENT_CURRENCY]: () => require<ReactComponentModule>('../../../../pages/settings/PaymentCard/ChangeCurrency').default,
     [SCREENS.SETTINGS.SUBSCRIPTION.CHANGE_BILLING_CURRENCY]: () => require<ReactComponentModule>('../../../../pages/settings/Subscription/PaymentCard/ChangeBillingCurrency').default,

src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts

@@ -150,7 +150,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
         SCREENS.WORKSPACE.REPORT_FIELDS_EDIT_VALUE,
         SCREENS.WORKSPACE.REPORT_FIELDS_EDIT_INITIAL_VALUE,
     ],
-    [SCREENS.WORKSPACE.EXPENSIFY_CARD]: [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW],
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD]: [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW, SCREENS.WORKSPACE.EXPENSIFY_CARD_DETAILS],
 };
 
 export default FULL_SCREEN_TO_RHP_MAPPING;

src/libs/Navigation/linkingConfig/config.ts

@@ -462,6 +462,9 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: {
                             path: ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.route,
                         },
+                        [SCREENS.WORKSPACE.EXPENSIFY_CARD_DETAILS]: {
+                            path: ROUTES.WORKSPACE_EXPENSIFY_CARD_DETAILS.route,
+                        },
                         [SCREENS.WORKSPACE.RATE_AND_UNIT]: {
                             path: ROUTES.WORKSPACE_RATE_AND_UNIT.route,
                         },

src/libs/Navigation/types.ts

@@ -623,6 +623,11 @@ type SettingsNavigatorParamList = {
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: {
         policyID: string;
     };
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD_DETAILS]: {
+        policyID: string;
+        cardID: string;
+        backTo?: Routes;
+    };
 } & ReimbursementAccountNavigatorParamList;
 
 type NewChatNavigatorParamList = {

src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx

@@ -0,0 +1,108 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import React from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import ExpensifyCardImage from '@assets/images/expensify-card.svg';
+import Badge from '@components/Badge';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {FallbackAvatar} from '@components/Icon/Expensicons';
+import ImageSVG from '@components/ImageSVG';
+import MenuItem from '@components/MenuItem';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as CardUtils from '@libs/CardUtils';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
+import Navigation from '@navigation/Navigation';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+
+// TODO: remove when Onyx data is available
+const mockedCard = {
+    accountID: 885646,
+    availableSpend: 1000,
+    nameValuePairs: {
+        cardTitle: 'Test 1',
+        isVirtual: true,
+    },
+    lastFourPAN: '1234',
+};
+
+type WorkspaceExpensifyCardDetailsPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_DETAILS>;
+
+function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetailsPageProps) {
+    const {policyID, cardID, backTo} = route.params;
+
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${policyID}_${CONST.EXPENSIFY_CARD.BANK}`);
+
+    const card = cardsList?.[cardID] ?? mockedCard;
+    const cardholder = personalDetails?.[card.accountID ?? -1];
+    const isVirtual = !!card.nameValuePairs?.isVirtual;
+    const formattedAvailableSpendAmount = CurrencyUtils.convertToDisplayString(card.availableSpend);
+    const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(cardholder);
+
+    return (
+        <AccessOrNotFoundWrapper
+            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
+            policyID={policyID}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
+        >
+            <ScreenWrapper testID={WorkspaceExpensifyCardDetailsPage.displayName}>
+                <HeaderWithBackButton
+                    title={translate('workspace.expensifyCard.cardDetails')}
+                    onBackButtonPress={() => Navigation.goBack(backTo)}
+                />
+
+                <View style={[styles.walletCard, styles.mb3]}>
+                    <ImageSVG
+                        contentFit="contain"
+                        src={ExpensifyCardImage}
+                        pointerEvents="none"
+                        height={variables.cardPreviewHeight}
+                        width={variables.cardPreviewWidth}
+                    />
+                    <Badge
+                        badgeStyles={styles.cardBadge}
+                        textStyles={styles.cardBadgeText}
+                        text={translate(isVirtual ? 'workspace.expensifyCard.virtual' : 'workspace.expensifyCard.physical')}
+                    />
+                </View>
+
+                <MenuItem
+                    label={translate('workspace.card.issueNewCard.cardholder')}
+                    title={displayName}
+                    icon={cardholder?.avatar ?? FallbackAvatar}
+                    iconType={CONST.ICON_TYPE_AVATAR}
+                    description={cardholder?.login}
+                    interactive={false}
+                />
+                <MenuItemWithTopDescription
+                    description={translate(isVirtual ? 'cardPage.virtualCardNumber' : 'cardPage.physicalCardNumber')}
+                    title={CardUtils.maskCard(card.lastFourPAN)}
+                    interactive={false}
+                    titleStyle={styles.walletCardNumber}
+                />
+                <MenuItemWithTopDescription
+                    description={translate('cardPage.availableSpend')}
+                    title={formattedAvailableSpendAmount}
+                    interactive={false}
+                    titleStyle={styles.newKansasLarge}
+                />
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
+    );
+}
+
+WorkspaceExpensifyCardDetailsPage.displayName = 'WorkspaceExpensifyCardDetailsPage';
+
+export default WorkspaceExpensifyCardDetailsPage;

src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx

@@ -34,6 +34,7 @@ const mockedCards: OnyxEntry<WorkspaceCardsList> = {
     test1: {
         // @ts-expect-error TODO: change cardholder to accountID
         cardholder: {accountID: 1, lastName: 'Smith', firstName: 'Bob', displayName: 'Bob Smith'},
+        cardID: 1,
         nameValuePairs: {
             unapprovedExpenseLimit: 1000,
             cardTitle: 'Test 1',
@@ -43,6 +44,7 @@ const mockedCards: OnyxEntry<WorkspaceCardsList> = {
     test2: {
         // @ts-expect-error TODO: change cardholder to accountID
         cardholder: {accountID: 2, lastName: 'Miller', firstName: 'Alex', displayName: 'Alex Miller'},
+        cardID: 2,
         nameValuePairs: {
             unapprovedExpenseLimit: 2000,
             cardTitle: 'Test 2',
@@ -52,6 +54,7 @@ const mockedCards: OnyxEntry<WorkspaceCardsList> = {
     test3: {
         // @ts-expect-error TODO: change cardholder to accountID
         cardholder: {accountID: 3, lastName: 'Brown', firstName: 'Kevin', displayName: 'Kevin Brown'},
+        cardID: 3,
         nameValuePairs: {
             unapprovedExpenseLimit: 3000,
             cardTitle: 'Test 3',
@@ -127,7 +130,7 @@ function WorkspaceExpensifyCardListPage({route}: WorkspaceExpensifyCardListPageP
                 style={[styles.mh5, styles.br3, styles.mb3, styles.highlightBG]}
                 accessibilityLabel="row"
                 hoverStyle={[styles.hoveredComponentBG]}
-                onPress={() => {}} // TODO: add navigation action when card details screen is implemented (https://github.com/Expensify/App/issues/44325)
+                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_DETAILS.getRoute(policyID, item.cardID.toString()))}
             >
                 <WorkspaceCardListRow
                     lastFourPAN={item.lastFourPAN ?? ''}

src/styles/index.ts

@@ -883,6 +883,16 @@ const styles = (theme: ThemeColors) =>
             alignItems: 'center',
         },
 
+        cardBadge: {
+            position: 'absolute',
+            top: 20,
+            left: 16,
+            marginLeft: 0,
+            paddingHorizontal: 8,
+            minHeight: 20,
+            borderColor: colors.productDark500,
+        },
+
         environmentBadge: {
             minHeight: 12,
             borderRadius: 14,
@@ -948,6 +958,11 @@ const styles = (theme: ThemeColors) =>
             ...whiteSpace.noWrap,
         },
 
+        cardBadgeText: {
+            color: colors.white,
+            fontSize: variables.fontSizeExtraSmall,
+        },
+
         activeItemBadge: {
             borderColor: theme.buttonHoveredBG,
         },