From fae32855764ae975f2f45d47ce88fd1ea1202301 Mon Sep 17 00:00:00 2001 From: VickyStash Date: Wed, 10 Jul 2024 15:44:51 +0200 Subject: [PATCH 1/4] Implement Card Details page --- src/ROUTES.ts | 4 + src/SCREENS.ts | 1 + src/languages/en.ts | 3 + src/languages/es.ts | 3 + .../ModalStackNavigators/index.tsx | 1 + .../FULL_SCREEN_TO_RHP_MAPPING.ts | 2 +- src/libs/Navigation/linkingConfig/config.ts | 3 + src/libs/Navigation/types.ts | 5 + .../WorkspaceExpensifyCardDetailsPage.tsx | 108 ++++++++++++++++++ .../WorkspaceExpensifyCardListPage.tsx | 5 +- src/styles/index.ts | 17 +++ 11 files changed, 150 insertions(+), 2 deletions(-) create mode 100644 src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx diff --git a/src/ROUTES.ts b/src/ROUTES.ts index a54bb4f5cca5..3b5efe2bc4d3 100644 --- a/src/ROUTES.ts +++ b/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, diff --git a/src/SCREENS.ts b/src/SCREENS.ts index d2a6b7c19ddd..e56e9b4e313b 100644 --- a/src/SCREENS.ts +++ b/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', diff --git a/src/languages/en.ts b/src/languages/en.ts index 1ac9684ac22e..e4a98c991b41 100755 --- a/src/languages/en.ts +++ b/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', diff --git a/src/languages/es.ts b/src/languages/es.ts index ea9186daee78..e7f3ed53817b 100644 --- a/src/languages/es.ts +++ b/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', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index 0b94972b2aa9..ef43893aeb33 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -403,6 +403,7 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../../pages/workspace/taxes/ValuePage').default, [SCREENS.WORKSPACE.TAX_CREATE]: () => require('../../../../pages/workspace/taxes/WorkspaceCreateTaxPage').default, [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: () => require('../../../../pages/workspace/card/issueNew/IssueNewCardPage').default, + [SCREENS.WORKSPACE.EXPENSIFY_CARD_DETAILS]: () => require('../../../../pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage').default, [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require('../../../../pages/TeachersUnite/SaveTheWorldPage').default, [SCREENS.SETTINGS.SUBSCRIPTION.CHANGE_PAYMENT_CURRENCY]: () => require('../../../../pages/settings/PaymentCard/ChangeCurrency').default, [SCREENS.SETTINGS.SUBSCRIPTION.CHANGE_BILLING_CURRENCY]: () => require('../../../../pages/settings/Subscription/PaymentCard/ChangeBillingCurrency').default, diff --git a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts index 54804a495754..9055c489b339 100755 --- a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts @@ -150,7 +150,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial> = { 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; diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index c0d1a79f635f..eb36928720d1 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -462,6 +462,9 @@ const config: LinkingOptions['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, }, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index fc67fe6b8cc0..0d44ce844897 100644 --- a/src/libs/Navigation/types.ts +++ b/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 = { diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx new file mode 100644 index 000000000000..bdf8b68406b4 --- /dev/null +++ b/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 {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; + +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 ( + + + Navigation.goBack(backTo)} + /> + + + + + + + + + + + + ); +} + +WorkspaceExpensifyCardDetailsPage.displayName = 'WorkspaceExpensifyCardDetailsPage'; + +export default WorkspaceExpensifyCardDetailsPage; diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx index 91a5f3b8f3f1..32d0b5136842 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx @@ -34,6 +34,7 @@ const mockedCards: OnyxEntry = { 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 = { 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 = { 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()))} > alignItems: 'center', }, + cardBadge: { + position: 'absolute', + top: 20, + left: 16, + marginLeft: 0, + paddingVertical: 4, + paddingHorizontal: 8, + minHeight: 20, + borderColor: colors.productDark500, + }, + environmentBadge: { minHeight: 12, borderRadius: 14, @@ -948,6 +959,12 @@ const styles = (theme: ThemeColors) => ...whiteSpace.noWrap, }, + cardBadgeText: { + color: colors.white, + fontSize: variables.fontSizeExtraSmall, + lineHeight: 12, + }, + activeItemBadge: { borderColor: theme.buttonHoveredBG, }, From c0b3fd9479285865c2bee4503ea1373751c3a693 Mon Sep 17 00:00:00 2001 From: VickyStash Date: Wed, 10 Jul 2024 16:09:33 +0200 Subject: [PATCH 2/4] Minor improvements --- .../expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx | 2 +- src/styles/index.ts | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx index bdf8b68406b4..e7f5f730b3ff 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx @@ -14,7 +14,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; import * as CurrencyUtils from '@libs/CurrencyUtils'; -import {SettingsNavigatorParamList} from '@libs/Navigation/types'; +import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import Navigation from '@navigation/Navigation'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; diff --git a/src/styles/index.ts b/src/styles/index.ts index 8ba78b84d59d..6d811d478b1f 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -888,7 +888,6 @@ const styles = (theme: ThemeColors) => top: 20, left: 16, marginLeft: 0, - paddingVertical: 4, paddingHorizontal: 8, minHeight: 20, borderColor: colors.productDark500, @@ -962,7 +961,6 @@ const styles = (theme: ThemeColors) => cardBadgeText: { color: colors.white, fontSize: variables.fontSizeExtraSmall, - lineHeight: 12, }, activeItemBadge: { From 2e2e731377a98157c8b6cc31c1c3b7df73712ad4 Mon Sep 17 00:00:00 2001 From: VickyStash Date: Thu, 11 Jul 2024 09:41:31 +0200 Subject: [PATCH 3/4] Add additional Menu Items for Card limit and name --- src/languages/en.ts | 2 + src/languages/es.ts | 2 + src/libs/CardUtils.ts | 16 +++ .../card/issueNew/ConfirmationStep.tsx | 14 +- .../WorkspaceExpensifyCardDetailsPage.tsx | 122 ++++++++++++------ src/types/onyx/Card.ts | 3 + 6 files changed, 106 insertions(+), 53 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index e4a98c991b41..42f932bf6559 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -2631,6 +2631,7 @@ export default { limit: 'Limit', currentBalance: 'Current balance', currentBalanceDescription: 'Current balance is the sum of all posted Expensify Card transactions that have occurred since the last settlement date.', + cardLimit: 'Card limit', remainingLimit: 'Remaining limit', requestLimitIncrease: 'Request limit increase', remainingLimitDescription: @@ -2640,6 +2641,7 @@ export default { cardDetails: 'Card details', virtual: 'Virtual', physical: 'Physical', + deactivate: 'Deactivate card', }, categories: { deleteCategories: 'Delete categories', diff --git a/src/languages/es.ts b/src/languages/es.ts index e7f3ed53817b..53a2e720f3f9 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -2677,6 +2677,7 @@ export default { currentBalance: 'Saldo actual', currentBalanceDescription: 'El saldo actual es la suma de todas las transacciones contabilizadas con la Tarjeta Expensify que se han producido desde la última fecha de liquidación.', + cardLimit: 'Límite de la tarjeta', remainingLimit: 'Límite restante', requestLimitIncrease: 'Solicitar aumento de límite', remainingLimitDescription: @@ -2686,6 +2687,7 @@ export default { cardDetails: 'Datos de la tarjeta', virtual: 'Virtual', physical: 'Física', + deactivate: 'Desactivar tarjeta', }, categories: { deleteCategories: 'Eliminar categorías', diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index 6f80a8a20a6b..1f90513ad29d 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -1,7 +1,9 @@ import lodash from 'lodash'; import Onyx from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; +import type {ValueOf} from 'type-fest'; import CONST from '@src/CONST'; +import type {TranslationPaths} from '@src/languages/types'; import type {OnyxValues} from '@src/ONYXKEYS'; import ONYXKEYS from '@src/ONYXKEYS'; import type {Card, CardList} from '@src/types/onyx'; @@ -143,6 +145,19 @@ function getMCardNumberString(cardNumber: string): string { return cardNumber.replace(/\s/g, ''); } +function getTranslationKeyForLimitType(limitType: ValueOf | undefined): TranslationPaths | '' { + switch (limitType) { + case CONST.EXPENSIFY_CARD.LIMIT_TYPES.SMART: + return 'workspace.card.issueNewCard.smartLimit'; + case CONST.EXPENSIFY_CARD.LIMIT_TYPES.FIXED: + return 'workspace.card.issueNewCard.fixedAmount'; + case CONST.EXPENSIFY_CARD.LIMIT_TYPES.MONTHLY: + return 'workspace.card.issueNewCard.monthly'; + default: + return ''; + } +} + export { isExpensifyCard, isCorporateCard, @@ -155,4 +170,5 @@ export { findPhysicalCard, hasDetectedFraud, getMCardNumberString, + getTranslationKeyForLimitType, }; diff --git a/src/pages/workspace/card/issueNew/ConfirmationStep.tsx b/src/pages/workspace/card/issueNew/ConfirmationStep.tsx index 35f9fab6598f..787e564676f4 100644 --- a/src/pages/workspace/card/issueNew/ConfirmationStep.tsx +++ b/src/pages/workspace/card/issueNew/ConfirmationStep.tsx @@ -11,6 +11,7 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; +import {getTranslationKeyForLimitType} from '@libs/CardUtils'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import Navigation from '@navigation/Navigation'; @@ -19,19 +20,6 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {IssueNewCardStep} from '@src/types/onyx/Card'; -function getTranslationKeyForLimitType(limitType: string | undefined) { - switch (limitType) { - case CONST.EXPENSIFY_CARD.LIMIT_TYPES.SMART: - return 'workspace.card.issueNewCard.smartLimit'; - case CONST.EXPENSIFY_CARD.LIMIT_TYPES.FIXED: - return 'workspace.card.issueNewCard.fixedAmount'; - case CONST.EXPENSIFY_CARD.LIMIT_TYPES.MONTHLY: - return 'workspace.card.issueNewCard.monthly'; - default: - return ''; - } -} - function ConfirmationStep() { const {translate} = useLocalize(); const styles = useThemeStyles(); diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx index e7f5f730b3ff..cc228330ba35 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx @@ -6,13 +6,17 @@ 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 * as Expensicons 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 ScrollView from '@components/ScrollView'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; +import {getTranslationKeyForLimitType} from '@libs/CardUtils'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; @@ -30,6 +34,8 @@ const mockedCard = { nameValuePairs: { cardTitle: 'Test 1', isVirtual: true, + limit: 2000, + limitType: CONST.EXPENSIFY_CARD.LIMIT_TYPES.SMART, }, lastFourPAN: '1234', }; @@ -41,6 +47,7 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail const {translate} = useLocalize(); const styles = useThemeStyles(); + const theme = useTheme(); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${policyID}_${CONST.EXPENSIFY_CARD.BANK}`); @@ -49,7 +56,9 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail const cardholder = personalDetails?.[card.accountID ?? -1]; const isVirtual = !!card.nameValuePairs?.isVirtual; const formattedAvailableSpendAmount = CurrencyUtils.convertToDisplayString(card.availableSpend); + const formattedLimit = CurrencyUtils.convertToDisplayString(card.nameValuePairs?.limit); const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(cardholder); + const translationForLimitType = getTranslationKeyForLimitType(card.nameValuePairs?.limitType); return ( - - Navigation.goBack(backTo)} - /> + + {({safeAreaPaddingBottomStyle}) => ( + <> + Navigation.goBack(backTo)} + /> + + + + + - - - - - - - - + + + + {}} // TODO: navigate to Edit card limit page https://github.com/Expensify/App/issues/44326 + /> + {}} // TODO: navigate to Edit limit type page https://github.com/Expensify/App/issues/44328 + /> + {}} // TODO: navigate to Edit card name page https://github.com/Expensify/App/issues/44327 + /> + {}} // TODO: create Deactivate card logic https://github.com/Expensify/App/issues/44320 + /> + + + )} ); diff --git a/src/types/onyx/Card.ts b/src/types/onyx/Card.ts index cdaaddd7dce2..eb584fa73ab0 100644 --- a/src/types/onyx/Card.ts +++ b/src/types/onyx/Card.ts @@ -39,6 +39,9 @@ type Card = { /** Type of card spending limits */ limitType?: ValueOf; + /** Card spending limit */ + limit?: number; + /** User-defined nickname for the card */ cardTitle?: string; From 674c2f00115284a77b5a021ede2015fc201b4c3f Mon Sep 17 00:00:00 2001 From: VickyStash Date: Thu, 11 Jul 2024 09:43:57 +0200 Subject: [PATCH 4/4] Minor code improvements --- .../expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx index cc228330ba35..6934776e44ba 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx @@ -16,7 +16,6 @@ import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; -import {getTranslationKeyForLimitType} from '@libs/CardUtils'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; @@ -58,7 +57,7 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail const formattedAvailableSpendAmount = CurrencyUtils.convertToDisplayString(card.availableSpend); const formattedLimit = CurrencyUtils.convertToDisplayString(card.nameValuePairs?.limit); const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(cardholder); - const translationForLimitType = getTranslationKeyForLimitType(card.nameValuePairs?.limitType); + const translationForLimitType = CardUtils.getTranslationKeyForLimitType(card.nameValuePairs?.limitType); return ( {}} // TODO: navigate to Edit card limit page https://github.com/Expensify/App/issues/44326 /> {}} // TODO: navigate to Edit limit type page https://github.com/Expensify/App/issues/44328 /> {}} // TODO: navigate to Edit card name page https://github.com/Expensify/App/issues/44327 />