create the Expensify card page

src/ROUTES.ts

@@ -48,6 +48,8 @@ export default {
     SETTINGS_ABOUT: 'settings/about',
     SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links',
     SETTINGS_WALLET: 'settings/wallet',
+    SETTINGS_WALLET_DOMAINCARDS: '/settings/wallet/card/:domain',
+    getWalletCardRoute: (domain: string) => `/settings/wallet/card/${domain}`,
     SETTINGS_ADD_DEBIT_CARD: 'settings/wallet/add-debit-card',
     SETTINGS_ADD_BANK_ACCOUNT: 'settings/wallet/add-bank-account',
     SETTINGS_ENABLE_PAYMENTS: 'settings/wallet/enable-payments',

src/components/CardPreview.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import PropTypes from 'prop-types';
+import styles from '../styles/styles';
+import Text from './Text';
+import usePrivatePersonalDetails from '../hooks/usePrivatePersonalDetails';
+import ONYXKEYS from '../ONYXKEYS';
+import ExpensifyCardImage from '../../assets/images/expensify-card.svg';
+import variables from '../styles/variables';
+
+const propTypes = {
+    /** User's private personal details */
+    privatePersonalDetails: PropTypes.shape({
+        legalFirstName: PropTypes.string,
+        legalLastName: PropTypes.string,
+    }),
+    session: PropTypes.shape({
+        /** Currently logged-in user email */
+        email: PropTypes.string,
+    }),
+};
+
+const defaultProps = {
+    privatePersonalDetails: {
+        legalFirstName: '',
+        legalLastName: '',
+    },
+    session: {
+        email: '',
+    },
+};
+
+function CardPreview({privatePersonalDetails: {legalFirstName, legalLastName}, session: {email}}) {
+    usePrivatePersonalDetails();
+    const cardHolder = legalFirstName && legalLastName ? `${legalFirstName} ${legalLastName}` : email;
+
+    return (
+        <View style={styles.walletCard}>
+            <ExpensifyCardImage
+                pointerEvents="none"
+                height={variables.cardPreviewHeight}
+                width={variables.cardPreviewWidth}
+            />
+            <Text
+                style={styles.walletCardHolder}
+                numberOfLines={1}
+                ellipsizeMode="tail"
+            >
+                {cardHolder}
+            </Text>
+        </View>
+    );
+}
+
+CardPreview.propTypes = propTypes;
+CardPreview.defaultProps = defaultProps;
+CardPreview.displayName = 'CardPreview';
+
+export default withOnyx({
+    privatePersonalDetails: {
+        key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
+    },
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(CardPreview);

src/languages/en.ts

@@ -808,6 +808,12 @@ export default {
         },
         addBankAccountFailure: 'An unexpected error occurred while trying to add your bank account. Please try again.',
     },
+    cardPage: {
+        expensifyCard: 'Expensify Card',
+        availableSpend: 'Remaining spending power',
+        virtualCardNumber: 'Virtual card number',
+        physicalCardNumber: 'Physical card number',
+    },
     transferAmountPage: {
         transfer: ({amount}: TransferParams) => `Transfer${amount ? ` ${amount}` : ''}`,
         instant: 'Instant (Debit card)',

src/languages/es.ts

@@ -803,6 +803,12 @@ export default {
         },
         addBankAccountFailure: 'Ocurrió un error inesperado al intentar añadir la cuenta bancaria. Inténtalo de nuevo.',
     },
+    cardPage: {
+        expensifyCard: 'Tarjeta Expensify',
+        availableSpend: 'Capacidad de gasto restante',
+        virtualCardNumber: 'Número de la tarjeta virtual',
+        physicalCardNumber: 'Número de la tarjeta física',
+    },
     transferAmountPage: {
         transfer: ({amount}: TransferParams) => `Transferir${amount ? ` ${amount}` : ''}`,
         instant: 'Instante',

src/libs/CardUtils.ts

@@ -1,5 +1,7 @@
+import lodash from 'lodash';
 import {Card} from '../types/onyx';
 import CONST from '../CONST';
+import * as OnyxTypes from '../types/onyx';
 
 /**
  * @returns string with a month in MM format
@@ -25,4 +27,33 @@ function getCompanyCards(cardList: {string: Card}) {
     return Object.values(cardList).filter((card) => card.bank !== CONST.EXPENSIFY_CARD.BANK);
 }
 
-export {getMonthFromExpirationDateString, getYearFromExpirationDateString, getCompanyCards};
+/**
+ * @param cardList - collection of assigned cards
+ * @returns collection of assigned cards grouped by domain
+ */
+function getDomainCards(cardList: Record<string, OnyxTypes.Card>) {
+    // eslint-disable-next-line you-dont-need-lodash-underscore/filter
+    const activeCards = lodash.filter(cardList, (card) => [2, 3, 4, 7].includes(card.state));
+    return lodash.groupBy(activeCards, (card) => card.domainName.toLowerCase());
+}
+
+/**
+ * Returns a masked credit card string with spaces for every four symbols.
+ * If the last four digits are provided, all preceding digits will be masked.
+ * If not, the entire card string will be masked.
+ *
+ * @param [lastFour=""] - The last four digits of the card (optional).
+ * @returns - The masked card string.
+ */
+function maskCard(lastFour = ''): string {
+    const totalDigits = 16;
+    const maskedLength = totalDigits - lastFour.length;
+
+    // Create a string with '•' repeated for the masked portion
+    const maskedString = '•'.repeat(maskedLength) + lastFour;
+
+    // Insert space for every four symbols
+    return maskedString.replace(/(.{4})/g, '$1 ').trim();
+}
+
+export {getDomainCards, getCompanyCards, getMonthFromExpirationDateString, getYearFromExpirationDateString, maskCard};

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -536,6 +536,13 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Settings_Wallet',
     },
+    {
+        getComponent: () => {
+            const SettingsWalletExpensifyCardPage = require('../../../pages/settings/Wallet/ExpensifyCardPage').default;
+            return SettingsWalletExpensifyCardPage;
+        },
+        name: 'Settings_Wallet_DomainCards',
+    },
     {
         getComponent: () => {
             const TransferBalancePage = require('../../../pages/settings/Wallet/TransferBalancePage').default;

src/libs/Navigation/linkingConfig.js

@@ -73,6 +73,10 @@ export default {
                                 path: ROUTES.SETTINGS_WALLET,
                                 exact: true,
                             },
+                            Settings_Wallet_DomainCards: {
+                                path: ROUTES.SETTINGS_WALLET_DOMAINCARDS,
+                                exact: true,
+                            },
                             Settings_Wallet_EnablePayments: {
                                 path: ROUTES.SETTINGS_ENABLE_PAYMENTS,
                                 exact: true,

src/pages/settings/Wallet/ExpensifyCardPage.js

@@ -0,0 +1,104 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {ScrollView, View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import ONYXKEYS from '../../../ONYXKEYS';
+import ROUTES from '../../../ROUTES';
+import NotFoundPage from '../../ErrorPage/NotFoundPage';
+import CardPreview from '../../../components/CardPreview';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
+import MenuItemWithTopDescription from '../../../components/MenuItemWithTopDescription';
+import ScreenWrapper from '../../../components/ScreenWrapper';
+import assignedCardPropTypes from './assignedCardPropTypes';
+import useLocalize from '../../../hooks/useLocalize';
+import * as CurrencyUtils from '../../../libs/CurrencyUtils';
+import Navigation from '../../../libs/Navigation/Navigation';
+import styles from '../../../styles/styles';
+import * as CardUtils from '../../../libs/CardUtils';
+
+const propTypes = {
+    /* Onyx Props */
+    cardList: PropTypes.objectOf(assignedCardPropTypes),
+
+    /** Navigation route context info provided by react navigation */
+    route: PropTypes.shape({
+        params: PropTypes.shape({
+            /** domain passed via route /settings/wallet/card/:domain */
+            domain: PropTypes.string,
+        }),
+    }).isRequired,
+};
+
+const defaultProps = {
+    cardList: {},
+};
+
+function ExpensifyCardPage({
+    cardList,
+    route: {
+        params: {domain},
+    },
+}) {
+    const {translate} = useLocalize();
+    const domainCards = CardUtils.getDomainCards(cardList)[domain];
+    const virtualCard = _.find(domainCards, (card) => card.isVirtual) || {};
+    const physicalCard = _.find(domainCards, (card) => !card.isVirtual) || {};
+
+    if (_.isEmpty(virtualCard) && _.isEmpty(physicalCard)) {
+        return <NotFoundPage />;
+    }
+
+    const formattedAvailableSpendAmount = CurrencyUtils.convertToDisplayString(physicalCard.availableSpend || virtualCard.availableSpend || 0);
+
+    return (
+        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            {({safeAreaPaddingBottomStyle}) => (
+                <>
+                    <HeaderWithBackButton
+                        title={translate('cardPage.expensifyCard')}
+                        onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)}
+                    />
+                    <ScrollView contentContainerStyle={safeAreaPaddingBottomStyle}>
+                        <View style={[styles.flex1, styles.mb4, styles.mt4]}>
+                            <CardPreview />
+                        </View>
+
+                        <MenuItemWithTopDescription
+                            description={translate('cardPage.availableSpend')}
+                            title={formattedAvailableSpendAmount}
+                            interactive={false}
+                            titleStyle={styles.newKansasLarge}
+                        />
+                        {!_.isEmpty(physicalCard) && (
+                            <MenuItemWithTopDescription
+                                description={translate('cardPage.virtualCardNumber')}
+                                title={CardUtils.maskCard(virtualCard.lastFourPAN)}
+                                interactive={false}
+                                titleStyle={styles.walletCardNumber}
+                            />
+                        )}
+                        {!_.isEmpty(physicalCard) && (
+                            <MenuItemWithTopDescription
+                                description={translate('cardPage.physicalCardNumber')}
+                                title={CardUtils.maskCard(physicalCard.lastFourPAN)}
+                                interactive={false}
+                                titleStyle={styles.walletCardNumber}
+                            />
+                        )}
+                    </ScrollView>
+                </>
+            )}
+        </ScreenWrapper>
+    );
+}
+
+ExpensifyCardPage.propTypes = propTypes;
+ExpensifyCardPage.defaultProps = defaultProps;
+ExpensifyCardPage.displayName = 'ExpensifyCardPage';
+
+export default withOnyx({
+    cardList: {
+        key: ONYXKEYS.CARD_LIST,
+    },
+})(ExpensifyCardPage);

src/pages/settings/Wallet/assignedCardPropTypes.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import CONST from '../../../CONST';
+
+/** Assigned Card props */
+const assignedCardPropTypes = PropTypes.shape({
+    cardID: PropTypes.number,
+    state: PropTypes.number,
+    bank: PropTypes.string,
+    availableSpend: PropTypes.number,
+    domainName: PropTypes.string,
+    lastFourPAN: PropTypes.string,
+    cardName: PropTypes.string,
+    isVirtual: PropTypes.bool,
+    fraud: PropTypes.oneOf([CONST.EXPENSIFY_CARD.FRAUD_TYPES.DOMAIN, CONST.EXPENSIFY_CARD.FRAUD_TYPES.USER, CONST.EXPENSIFY_CARD.FRAUD_TYPES.NONE]),
+    cardholderFirstName: PropTypes.string,
+    cardholderLastName: PropTypes.string,
+    errors: PropTypes.objectOf(PropTypes.string),
+});
+
+export default assignedCardPropTypes;

src/styles/styles.js

@@ -3672,6 +3672,28 @@ const styles = (theme) => ({
         height: 30,
         width: '100%',
     },
+
+    walletCard: {
+        borderRadius: variables.componentBorderRadiusLarge,
+        position: 'relative',
+        alignSelf: 'center',
+        overflow: 'hidden',
+    },
+
+    walletCardNumber: {
+        color: theme.text,
+        fontSize: variables.fontSizeNormal,
+    },
+
+    walletCardHolder: {
+        position: 'absolute',
+        left: 16,
+        bottom: 16,
+        width: variables.cardNameWidth,
+        color: theme.text,
+        fontSize: variables.fontSizeSmall,
+        lineHeight: variables.lineHeightLarge,
+    },
 });
 
 // For now we need to export the styles function that takes the theme as an argument