From a147db20cb130bb15f422ce41b9819bafcf979fc Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Fri, 29 Sep 2023 10:28:10 +0100 Subject: [PATCH 01/52] feat(expensify-card): add get physical card button and routes --- src/ONYXKEYS.ts | 1 + src/ROUTES.ts | 15 ++ src/SCREENS.ts | 6 + src/languages/en.ts | 22 +++ src/languages/es.ts | 24 ++++ .../AppNavigator/ModalStackNavigators.js | 4 + src/libs/Navigation/Navigation.js | 26 ++++ src/libs/Navigation/linkingConfig.js | 16 +++ src/libs/actions/Wallet.js | 26 ++++ .../Wallet/Cards/BaseGetPhysicalCard.js | 68 ++++++++++ .../Wallet/Cards/GetPhysicalCardAddress.js | 128 ++++++++++++++++++ .../Wallet/Cards/GetPhysicalCardConfirm.js | 96 +++++++++++++ .../Wallet/Cards/GetPhysicalCardName.js | 70 ++++++++++ .../Wallet/Cards/GetPhysicalCardPhone.js | 53 ++++++++ .../settings/Wallet/ExpensifyCardPage.js | 9 ++ src/styles/utilities/sizing.ts | 4 + 16 files changed, 568 insertions(+) create mode 100644 src/pages/settings/Wallet/Cards/BaseGetPhysicalCard.js create mode 100644 src/pages/settings/Wallet/Cards/GetPhysicalCardAddress.js create mode 100644 src/pages/settings/Wallet/Cards/GetPhysicalCardConfirm.js create mode 100644 src/pages/settings/Wallet/Cards/GetPhysicalCardName.js create mode 100644 src/pages/settings/Wallet/Cards/GetPhysicalCardPhone.js diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index fa72a99b5fa2..4a79dca45b13 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -334,6 +334,7 @@ const ONYXKEYS = { REPORT_PHYSICAL_CARD_FORM_DRAFT: 'requestPhysicalCardFormDraft', REPORT_VIRTUAL_CARD_FRAUD: 'reportVirtualCardFraudForm', REPORT_VIRTUAL_CARD_FRAUD_DRAFT: 'reportVirtualCardFraudFormDraft', + GET_PHYSICAL_CARD_FORM: 'getPhysicalCardForm', }, } as const; diff --git a/src/ROUTES.ts b/src/ROUTES.ts index ed9cc6ae987c..9e304be85a2f 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -82,6 +82,21 @@ export default { SETTINGS_REPORT_FRAUD: { route: '/settings/wallet/card/:domain/report-virtual-fraud', getRoute: (domain: string) => `/settings/wallet/card/${domain}/report-virtual-fraud`, + SETTINGS_WALLET_CARDS_GET_PHYSICAL_NAME: { + route: '/settings/wallet/cards/:domain/get-physical/name', + getRoute: (domain: string) => `/settings/wallet/cards/${domain}/get-physical/name`, + }, + SETTINGS_WALLET_CARDS_GET_PHYSICAL_PHONE: { + route: '/settings/wallet/cards/:domain/get-physical/phone', + getRoute: (domain: string) => `/settings/wallet/cards/${domain}/get-physical/phone`, + }, + SETTINGS_WALLET_CARDS_GET_PHYSICAL_ADDRESS: { + route: '/settings/wallet/cards/:domain/get-physical/address', + getRoute: (domain: string) => `/settings/wallet/cards/${domain}/get-physical/address`, + }, + SETTINGS_WALLET_CARDS_GET_PHYSICAL_CONFIRM: { + route: '/settings/wallet/cards/:domain/get-physical/confirm', + getRoute: (domain: string) => `/settings/wallet/cards/${domain}/get-physical/confirm`, }, SETTINGS_ADD_DEBIT_CARD: 'settings/wallet/add-debit-card', SETTINGS_ADD_BANK_ACCOUNT: 'settings/wallet/add-bank-account', diff --git a/src/SCREENS.ts b/src/SCREENS.ts index f7de8cfab4b6..1d86d66368e1 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -19,6 +19,12 @@ export default { STATUS: 'Settings_Status', WALLET: 'Settings_Wallet', WALLET_DOMAIN_CARDS: 'Settings_Wallet_DomainCards', + WALLET_CARDS_GET_PHYSICAL: { + NAME: 'Settings_Cards_Get_Physical_Name', + PHONE: 'Settings_Cards_Get_Physical_Phone', + ADDRESS: 'Settings_Cards_Get_Physical_Address', + CONFIRM: 'Settings_Cards_Get_Physical_Confirm', + }, }, SAVE_THE_WORLD: { ROOT: 'SaveTheWorld_Root', diff --git a/src/languages/en.ts b/src/languages/en.ts index fe867efc27c0..66635124639b 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -872,6 +872,7 @@ export default { availableSpend: 'Remaining limit', virtualCardNumber: 'Virtual card number', physicalCardNumber: 'Physical card number', + getPhysicalCard: 'Get physical card', reportFraud: 'Report virtual card fraud', reviewTransaction: 'Review transaction', suspiciousBannerTitle: 'Suspicious transaction', @@ -902,6 +903,27 @@ export default { thatDidntMatch: "That didn't match the last 4 digits on your card. Please try again.", }, }, + getPhysicalCard: { + header: 'Get physical card', + nameMessage: 'Enter your first and last name, as this will be shown on your card.', + legalName: 'Legal name', + firstName: 'Legal first name', + lastName: 'Legal last name', + phoneMessage: 'Enter your phone number.', + phoneNumber: 'Phone number', + address: 'Address', + addressMessage: 'Enter your shipping address.', + streetAddress: 'Street Address', + city: 'City', + state: 'State', + zipPostcode: 'Zip/Postcode', + country: 'Country', + confirmMessage: 'Please confirm your details below.', + estimatedDeliveryMessage: 'Your physical card will arrive in 2-3 business days.', + next: 'Next', + getPhysicalCard: 'Get physical card', + shipCard: 'Ship card', + }, transferAmountPage: { transfer: ({amount}: TransferParams) => `Transfer${amount ? ` ${amount}` : ''}`, instant: 'Instant (Debit card)', diff --git a/src/languages/es.ts b/src/languages/es.ts index d86b712104fd..4b576a2ac03a 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -867,6 +867,8 @@ export default { availableSpend: 'Límite restante', virtualCardNumber: 'Número de la tarjeta virtual', physicalCardNumber: 'Número de la tarjeta física', + // TODO: add translation + getPhysicalCard: '', reportFraud: 'Reportar fraude con la tarjeta virtual', reviewTransaction: 'Revisar transacción', suspiciousBannerTitle: 'Transacción sospechosa', @@ -898,6 +900,28 @@ export default { thatDidntMatch: 'Los 4 últimos dígitos de tu tarjeta no coinciden. Por favor, inténtalo de nuevo.', }, }, + // TODO: add translation + getPhysicalCard: { + header: '', + nameMessage: '', + legalName: '', + firstName: '', + lastName: '', + phoneMessage: '', + phoneNumber: '', + address: '', + addressMessage: '', + streetAddress: '', + city: '', + state: '', + zipPostcode: '', + country: '', + confirmMessage: '', + estimatedDeliveryMessage: '', + next: '', + getPhysicalCard: '', + shipCard: '', + }, transferAmountPage: { transfer: ({amount}: TransferParams) => `Transferir${amount ? ` ${amount}` : ''}`, instant: 'Instante', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 2f0a75a02cc3..81a011210630 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -162,6 +162,10 @@ const SettingsModalStackNavigator = createModalStackNavigator({ Settings_Wallet_DomainCards: () => require('../../../pages/settings/Wallet/ExpensifyCardPage').default, Settings_Wallet_ReportVirtualCardFraud: () => require('../../../pages/settings/Wallet/ReportVirtualCardFraudPage').default, Settings_Wallet_Card_Activate: () => require('../../../pages/settings/Wallet/ActivatePhysicalCardPage').default, + [SCREENS.SETTINGS.WALLET.CARDS.GET_PHYSICAL.NAME]: () => require('../../../pages/settings/Wallet/Cards/GetPhysicalCardName').default, + [SCREENS.SETTINGS.WALLET.CARDS.GET_PHYSICAL.PHONE]: () => require('../../../pages/settings/Wallet/Cards/GetPhysicalCardPhone').default, + [SCREENS.SETTINGS.WALLET.CARDS.GET_PHYSICAL.ADDRESS]: () => require('../../../pages/settings/Wallet/Cards/GetPhysicalCardAddress').default, + [SCREENS.SETTINGS.WALLET.CARDS.GET_PHYSICAL.CONFIRM]: () => require('../../../pages/settings/Wallet/Cards/GetPhysicalCardConfirm').default, Settings_Wallet_Transfer_Balance: () => require('../../../pages/settings/Wallet/TransferBalancePage').default, Settings_Wallet_Choose_Transfer_Account: () => require('../../../pages/settings/Wallet/ChooseTransferAccountPage').default, Settings_Wallet_EnablePayments: () => require('../../../pages/EnablePayments/EnablePaymentsPage').default, diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js index e12cb5545240..58b191aa1c7b 100644 --- a/src/libs/Navigation/Navigation.js +++ b/src/libs/Navigation/Navigation.js @@ -305,6 +305,31 @@ function setIsNavigationReady() { resolveNavigationIsReadyPromise(); } +/** + * @param {{address: String, firstName: String, lastName: String, phoneNumber: String}} formData + * @param {Array} loginList + */ +function goToNextPhysicalCardRoute(formData, loginList) { + const {address, firstName, lastName, phoneNumber} = formData; + const currentRoute = navigationRef.current && navigationRef.current.getCurrentRoute(); + const {domain} = (currentRoute && currentRoute.params) || {domain: ''}; + + if (!firstName && !lastName) { + navigate(ROUTES.SETTINGS_WALLET_CARDS_GET_PHYSICAL_NAME.getRoute(domain)); + return; + } + if (!phoneNumber && !getSecondaryPhoneLogin(loginList)) { + navigate(ROUTES.SETTINGS_WALLET_CARDS_GET_PHYSICAL_PHONE.getRoute(domain)); + return; + } + if (!address) { + navigate(ROUTES.SETTINGS_WALLET_CARDS_GET_PHYSICAL_ADDRESS.getRoute(domain)); + return; + } + + navigate(ROUTES.SETTINGS_WALLET_CARDS_GET_PHYSICAL_CONFIRM.getRoute(domain)); +} + export default { setShouldPopAllStateOnUP, canNavigate, @@ -320,6 +345,7 @@ export default { getTopmostReportId, getRouteNameFromStateEvent, getTopmostReportActionId, + goToNextPhysicalCardRoute, }; export {navigationRef}; diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index c017e6c7664e..26546dcc7395 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -79,6 +79,22 @@ export default { }, Settings_Wallet_ReportVirtualCardFraud: { path: ROUTES.SETTINGS_REPORT_FRAUD.route, + exact: true, + }, + [SCREENS.SETTINGS.WALLET.CARDS.GET_PHYSICAL.NAME]: { + path: ROUTES.SETTINGS_WALLET_CARDS_GET_PHYSICAL_NAME.route, + exact: true, + }, + [SCREENS.SETTINGS.WALLET.CARDS.GET_PHYSICAL.PHONE]: { + path: ROUTES.SETTINGS_WALLET_CARDS_GET_PHYSICAL_PHONE.route, + exact: true, + }, + [SCREENS.SETTINGS.WALLET.CARDS.GET_PHYSICAL.ADDRESS]: { + path: ROUTES.SETTINGS_WALLET_CARDS_GET_PHYSICAL_ADDRESS.route, + exact: true, + }, + [SCREENS.SETTINGS.WALLET.CARDS.GET_PHYSICAL.CONFIRM]: { + path: ROUTES.SETTINGS_WALLET_CARDS_GET_PHYSICAL_CONFIRM.route, exact: true, }, Settings_Wallet_EnablePayments: { diff --git a/src/libs/actions/Wallet.js b/src/libs/actions/Wallet.js index bfc2a7306434..b6ceed79308c 100644 --- a/src/libs/actions/Wallet.js +++ b/src/libs/actions/Wallet.js @@ -330,6 +330,31 @@ function answerQuestionsForWallet(answers, idNumber) { ); } +function requestPhysicalExpensifyCard(cardID, updatedPersonalDetails) { + // TODO: confirm required parameters + const parameters = {}; + const onyxData = { + optimisticData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.CARD_LIST, + value: { + [cardID]: { + state: 4, // NOT_ACTIVATED + }, + }, + }, + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS, + value: updatedPersonalDetails, + }, + ], + }; + + API.write('RequestPhysicalExpensifyCard', parameters, onyxData); +} + export { openOnfidoFlow, openInitialSettingsPage, @@ -343,4 +368,5 @@ export { verifyIdentity, acceptWalletTerms, setKYCWallSource, + requestPhysicalExpensifyCard, }; diff --git a/src/pages/settings/Wallet/Cards/BaseGetPhysicalCard.js b/src/pages/settings/Wallet/Cards/BaseGetPhysicalCard.js new file mode 100644 index 000000000000..11e5416c1057 --- /dev/null +++ b/src/pages/settings/Wallet/Cards/BaseGetPhysicalCard.js @@ -0,0 +1,68 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import {Text} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import ONYXKEYS from '../../../../ONYXKEYS'; +import Form from '../../../../components/Form'; +import HeaderWithBackButton from '../../../../components/HeaderWithBackButton'; +import ScreenWrapper from '../../../../components/ScreenWrapper'; +import Navigation from '../../../../libs/Navigation/Navigation'; +import styles from '../../../../styles/styles'; +import * as Wallet from '../../../../libs/actions/Wallet'; + +const propTypes = { + children: PropTypes.node.isRequired, + headline: PropTypes.string.isRequired, + isConfirmation: PropTypes.bool, + // TODO: Confirm what is the correct type of loginList + loginList: PropTypes.shape({}).isRequired, + submitButtonText: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, +}; + +const defaultProps = { + isConfirmation: false, +}; + +function BaseGetPhysicalCard({children, headline, isConfirmation, loginList, submitButtonText, title}) { + const onSubmit = (formData) => { + if (isConfirmation) { + // TODO: Use cardID and pass formatted formData here + Wallet.requestPhysicalExpensifyCard('', formData); + // TODO: Redirect user to the domain card page (?) + return; + } + Navigation.goToNextPhysicalCardRoute(formData, loginList); + }; + return ( + + +
+ {headline} + {children} +
+ + ); +} + +BaseGetPhysicalCard.defaultProps = defaultProps; +BaseGetPhysicalCard.displayName = 'BaseGetPhysicalCard'; +BaseGetPhysicalCard.propTypes = propTypes; + +export default withOnyx({ + loginList: { + key: ONYXKEYS.LOGIN_LIST, + }, +})(BaseGetPhysicalCard); diff --git a/src/pages/settings/Wallet/Cards/GetPhysicalCardAddress.js b/src/pages/settings/Wallet/Cards/GetPhysicalCardAddress.js new file mode 100644 index 000000000000..05b9c990c2ad --- /dev/null +++ b/src/pages/settings/Wallet/Cards/GetPhysicalCardAddress.js @@ -0,0 +1,128 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import {View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import CONST from '../../../../CONST'; +import ONYXKEYS from '../../../../ONYXKEYS'; +import TextInput from '../../../../components/TextInput'; +import useLocalize from '../../../../hooks/useLocalize'; +import styles from '../../../../styles/styles'; +import BaseGetPhysicalCard from './BaseGetPhysicalCard'; +import AddressSearch from '../../../../components/AddressSearch'; + +const propTypes = { + personalDetails: PropTypes.shape({ + address: PropTypes.string, + }), +}; + +const defaultProps = { + personalDetails: { + address: '', + }, +}; + +function GetPhysicalCardAddress({personalDetails: {address}}) { + const {translate} = useLocalize(); + return ( + + + + + props.onFieldChange({city: value})} + // errorText={props.errors.city ? props.translate('bankAccount.error.addressCity') : ''} + containerStyles={[styles.mt4]} + /> + + + + props.onFieldChange({zipCode: value})} + // errorText={props.errors.zipCode ? props.translate('bankAccount.error.zipCode') : ''} + maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE} + // hint={props.translate('common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples})} + /> + + + props.onFieldChange({zipCode: value})} + // errorText={props.errors.zipCode ? props.translate('bankAccount.error.zipCode') : ''} + maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE} + // hint={props.translate('common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples})} + /> + + + props.onFieldChange({zipCode: value})} + // errorText={props.errors.zipCode ? props.translate('bankAccount.error.zipCode') : ''} + maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE} + // hint={props.translate('common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples})} + containerStyles={[styles.mt4]} + /> + + ); +} + +GetPhysicalCardAddress.defaultProps = defaultProps; +GetPhysicalCardAddress.displayName = 'GetPhysicalCardAddress'; +GetPhysicalCardAddress.propTypes = propTypes; + +export default withOnyx({ + personalDetails: { + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + }, +})(GetPhysicalCardAddress); diff --git a/src/pages/settings/Wallet/Cards/GetPhysicalCardConfirm.js b/src/pages/settings/Wallet/Cards/GetPhysicalCardConfirm.js new file mode 100644 index 000000000000..0d39e2525ce7 --- /dev/null +++ b/src/pages/settings/Wallet/Cards/GetPhysicalCardConfirm.js @@ -0,0 +1,96 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import {withOnyx} from 'react-native-onyx'; +import useLocalize from '../../../../hooks/useLocalize'; +import BaseGetPhysicalCard from './BaseGetPhysicalCard'; +import styles from '../../../../styles/styles'; +import Text from '../../../../components/Text'; +import MenuItemWithTopDescription from '../../../../components/MenuItemWithTopDescription'; +import * as Expensicons from '../../../../components/Icon/Expensicons'; +import ONYXKEYS from '../../../../ONYXKEYS'; +import navigationRef from '../../../../libs/Navigation/navigationRef'; +import Navigation from '../../../../libs/Navigation/Navigation'; +import ROUTES from '../../../../ROUTES'; + +const getDomainFromRoute = () => { + const currentRoute = navigationRef.current && navigationRef.current.getCurrentRoute(); + return (currentRoute && currentRoute.params && currentRoute.params.domain) || ''; +}; + +const goToGetPhysicalCardName = () => { + Navigation.navigate(ROUTES.SETTINGS_WALLET_CARDS_GET_PHYSICAL_NAME.getRoute(getDomainFromRoute())); +}; + +const goToGetPhysicalCardPhone = () => { + Navigation.navigate(ROUTES.SETTINGS_WALLET_CARDS_GET_PHYSICAL_PHONE.getRoute(getDomainFromRoute())); +}; + +const goToGetPhysicalCardAddress = () => { + Navigation.navigate(ROUTES.SETTINGS_WALLET_CARDS_GET_PHYSICAL_ADDRESS.getRoute(getDomainFromRoute())); +}; + +const propTypes = { + draftValues: PropTypes.shape({ + address: PropTypes.string, + firstName: PropTypes.string, + lastName: PropTypes.string, + phoneNumber: PropTypes.string, + }), +}; + +const defaultProps = { + draftValues: { + address: '', + firstName: '', + lastName: '', + phoneNumber: '', + }, +}; + +function GetPhysicalCardConfirm({draftValues: {address, firstName, lastName, phoneNumber}}) { + const {translate} = useLocalize(); + + return ( + + {translate('getPhysicalCard.estimatedDeliveryMessage')} + + + + + ); +} + +GetPhysicalCardConfirm.defaultProps = defaultProps; +GetPhysicalCardConfirm.displayName = 'GetPhysicalCardConfirm'; +GetPhysicalCardConfirm.propTypes = propTypes; + +export default withOnyx({ + draftValues: { + key: `${ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM}Draft`, + }, +})(GetPhysicalCardConfirm); diff --git a/src/pages/settings/Wallet/Cards/GetPhysicalCardName.js b/src/pages/settings/Wallet/Cards/GetPhysicalCardName.js new file mode 100644 index 000000000000..8f16ca1c5143 --- /dev/null +++ b/src/pages/settings/Wallet/Cards/GetPhysicalCardName.js @@ -0,0 +1,70 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import {withOnyx} from 'react-native-onyx'; +import CONST from '../../../../CONST'; +import ONYXKEYS from '../../../../ONYXKEYS'; +import TextInput from '../../../../components/TextInput'; +import useLocalize from '../../../../hooks/useLocalize'; +import styles from '../../../../styles/styles'; +import BaseGetPhysicalCard from './BaseGetPhysicalCard'; + +const propTypes = { + personalDetails: PropTypes.shape({ + firstName: PropTypes.string, + lastName: PropTypes.string, + }), +}; + +const defaultProps = { + personalDetails: { + firstName: '', + lastName: '', + }, +}; + +function GetPhysicalCardName({personalDetails: {firstName, lastName}}) { + const {translate} = useLocalize(); + return ( + + + + + ); +} + +GetPhysicalCardName.defaultProps = defaultProps; +GetPhysicalCardName.displayName = 'GetPhysicalCardName'; +GetPhysicalCardName.propTypes = propTypes; + +export default withOnyx({ + personalDetails: { + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + }, + loginList: { + key: ONYXKEYS.LOGIN_LIST, + }, +})(GetPhysicalCardName); diff --git a/src/pages/settings/Wallet/Cards/GetPhysicalCardPhone.js b/src/pages/settings/Wallet/Cards/GetPhysicalCardPhone.js new file mode 100644 index 000000000000..520e696bbb83 --- /dev/null +++ b/src/pages/settings/Wallet/Cards/GetPhysicalCardPhone.js @@ -0,0 +1,53 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import {withOnyx} from 'react-native-onyx'; +import CONST from '../../../../CONST'; +import ONYXKEYS from '../../../../ONYXKEYS'; +import TextInput from '../../../../components/TextInput'; +import useLocalize from '../../../../hooks/useLocalize'; +import styles from '../../../../styles/styles'; +import BaseGetPhysicalCard from './BaseGetPhysicalCard'; + +const propTypes = { + personalDetails: PropTypes.shape({ + phoneNumber: PropTypes.string, + }), +}; + +const defaultProps = { + personalDetails: { + phoneNumber: '', + }, +}; + +function GetPhysicalCardPhone({personalDetails: {phoneNumber}}) { + const {translate} = useLocalize(); + return ( + + + + ); +} + +GetPhysicalCardPhone.defaultProps = defaultProps; +GetPhysicalCardPhone.displayName = 'GetPhysicalCardPhone'; +GetPhysicalCardPhone.propTypes = propTypes; + +export default withOnyx({ + personalDetails: { + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + }, +})(GetPhysicalCardPhone); diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.js b/src/pages/settings/Wallet/ExpensifyCardPage.js index d4a104d272dd..e0d0296faf6e 100644 --- a/src/pages/settings/Wallet/ExpensifyCardPage.js +++ b/src/pages/settings/Wallet/ExpensifyCardPage.js @@ -209,6 +209,15 @@ function ExpensifyCardPage({ text={translate('activateCardPage.activatePhysicalCard')} /> )} + {_.isEmpty(physicalCard) && ( +