From 30eb56d93aab751e92b1e77b572dd055e6af87a6 Mon Sep 17 00:00:00 2001 From: VickyStash Date: Fri, 21 Jun 2024 16:06:39 +0200 Subject: [PATCH 01/30] Add a new WorkspaceCardPageFree screen and a route for it --- src/ROUTES.ts | 4 + src/SCREENS.ts | 1 + src/languages/en.ts | 4 + src/languages/es.ts | 4 + .../Navigators/FullScreenNavigator.tsx | 1 + src/libs/Navigation/linkingConfig/config.ts | 3 + src/libs/Navigation/types.ts | 3 + src/pages/workspace/WorkspaceInitialPage.tsx | 13 ++- .../expensifyCard/WorkspaceCardPageFree.tsx | 107 ++++++++++++++++++ 9 files changed, 139 insertions(+), 1 deletion(-) create mode 100644 src/pages/workspace/expensifyCard/WorkspaceCardPageFree.tsx diff --git a/src/ROUTES.ts b/src/ROUTES.ts index c1fdd68951fa..f0902dde0ede 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -619,6 +619,10 @@ const ROUTES = { route: 'settings/workspaces/:policyID/card', getRoute: (policyID: string) => `settings/workspaces/${policyID}/card` as const, }, + WORKSPACE_EXPENSIFY_CARD: { + route: 'settings/workspaces/:policyID/expensify-card', + getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card` as const, + }, WORKSPACE_REIMBURSE: { route: 'settings/workspaces/:policyID/reimburse', getRoute: (policyID: string) => `settings/workspaces/${policyID}/reimburse` as const, diff --git a/src/SCREENS.ts b/src/SCREENS.ts index f884cca94ef5..31b41dad33d5 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -267,6 +267,7 @@ const SCREENS = { INITIAL: 'Workspace_Initial', PROFILE: 'Workspace_Profile', CARD: 'Workspace_Card', + EXPENSIFY_CARD: 'Workspace_Expensify_Card', REIMBURSE: 'Workspace_Reimburse', RATE_AND_UNIT: 'Workspace_RateAndUnit', RATE_AND_UNIT_RATE: 'Workspace_RateAndUnit_Rate', diff --git a/src/languages/en.ts b/src/languages/en.ts index 6a9a6e7ccab9..d4315c37d2e7 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1939,6 +1939,7 @@ export default { workspace: { common: { card: 'Cards', + expensifyCard: 'Expensify Card', workflows: 'Workflows', workspace: 'Workspace', edit: 'Edit workspace', @@ -2181,6 +2182,9 @@ export default { control: 'Control', collect: 'Collect', }, + expensifyCard: { + issueCard: 'Issue card', + }, categories: { deleteCategories: 'Delete categories', deleteCategoriesPrompt: 'Are you sure you want to delete these categories?', diff --git a/src/languages/es.ts b/src/languages/es.ts index f007c1211190..73f484a3e913 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -1964,6 +1964,7 @@ export default { workspace: { common: { card: 'Tarjetas', + expensifyCard: 'Tarjeta Expensify', workflows: 'Flujos de trabajo', workspace: 'Espacio de trabajo', edit: 'Editar espacio de trabajo', @@ -2217,6 +2218,9 @@ export default { control: 'Control', collect: 'Recolectar', }, + expensifyCard: { + issueCard: 'Emitir tarjeta', + }, categories: { deleteCategories: 'Eliminar categorías', deleteCategoriesPrompt: '¿Estás seguro de que quieres eliminar estas categorías?', diff --git a/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx index 64485872544f..3f546fe93e49 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx @@ -18,6 +18,7 @@ type Screens = Partial React.Co const CENTRAL_PANE_WORKSPACE_SCREENS = { [SCREENS.WORKSPACE.PROFILE]: () => require('../../../../pages/workspace/WorkspaceProfilePage').default as React.ComponentType, [SCREENS.WORKSPACE.CARD]: () => require('../../../../pages/workspace/card/WorkspaceCardPage').default as React.ComponentType, + [SCREENS.WORKSPACE.EXPENSIFY_CARD]: () => require('../../../../pages/workspace/expensifyCard/WorkspaceCardPageFree').default as React.ComponentType, [SCREENS.WORKSPACE.WORKFLOWS]: () => require('../../../../pages/workspace/workflows/WorkspaceWorkflowsPage').default as React.ComponentType, [SCREENS.WORKSPACE.REIMBURSE]: () => require('../../../../pages/workspace/reimburse/WorkspaceReimbursePage').default as React.ComponentType, [SCREENS.WORKSPACE.BILLS]: () => require('../../../../pages/workspace/bills/WorkspaceBillsPage').default as React.ComponentType, diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 1b4288a9b3a9..15a8a9055454 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -752,6 +752,9 @@ const config: LinkingOptions['config'] = { [SCREENS.WORKSPACE.CARD]: { path: ROUTES.WORKSPACE_CARD.route, }, + [SCREENS.WORKSPACE.EXPENSIFY_CARD]: { + path: ROUTES.WORKSPACE_EXPENSIFY_CARD.route, + }, [SCREENS.WORKSPACE.WORKFLOWS]: { path: ROUTES.WORKSPACE_WORKFLOWS.route, }, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index f90a91fe0f19..575b1a227963 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -787,6 +787,9 @@ type FullScreenNavigatorParamList = { [SCREENS.WORKSPACE.CARD]: { policyID: string; }; + [SCREENS.WORKSPACE.EXPENSIFY_CARD]: { + policyID: string; + }; [SCREENS.WORKSPACE.WORKFLOWS]: { policyID: string; }; diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index a346461694a5..a6aefc720158 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -62,7 +62,8 @@ type WorkspaceMenuItem = { | typeof SCREENS.WORKSPACE.TAXES | typeof SCREENS.WORKSPACE.MORE_FEATURES | typeof SCREENS.WORKSPACE.PROFILE - | typeof SCREENS.WORKSPACE.MEMBERS; + | typeof SCREENS.WORKSPACE.MEMBERS + | typeof SCREENS.WORKSPACE.EXPENSIFY_CARD; }; type WorkspaceInitialPageOnyxProps = { @@ -269,6 +270,16 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reimbursementAcc }); } + // TODO: replace with a check of enabled feature: if (featureStates?.[CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED]) { + if (true) { + protectedCollectPolicyMenuItems.push({ + translationKey: 'workspace.common.expensifyCard', + icon: Expensicons.CreditCard, + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID)))), + routeName: SCREENS.WORKSPACE.EXPENSIFY_CARD, + }); + } + protectedCollectPolicyMenuItems.push({ translationKey: 'workspace.common.moreFeatures', icon: Expensicons.Gear, diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardPageFree.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardPageFree.tsx new file mode 100644 index 000000000000..f4d6534c9c1b --- /dev/null +++ b/src/pages/workspace/expensifyCard/WorkspaceCardPageFree.tsx @@ -0,0 +1,107 @@ +import React from 'react'; +import {FlatList, View} from 'react-native'; +import Button from '@components/Button'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import * as Expensicons from '@components/Icon/Expensicons'; +import * as Illustrations from '@components/Icon/Illustrations'; +import ScreenWrapper from '@components/ScreenWrapper'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; +import * as CurrencyUtils from '@libs/CurrencyUtils'; +import Navigation from '@navigation/Navigation'; + +type WorkspaceCardPageFreeProps = {}; + +function WorkspaceCardPageFree({}: WorkspaceCardPageFreeProps) { + const {shouldUseNarrowLayout} = useResponsiveLayout(); + const {isMediumScreenWidth, isSmallScreenWidth} = useWindowDimensions(); + const {translate} = useLocalize(); + const styles = useThemeStyles(); + + const isLessThanMediumScreen = isMediumScreenWidth || isSmallScreenWidth; + + const cards = []; + + const cardsData = [ + {title: 'Current balance', value: 0, description: 'WIP'}, + {title: 'Current balance', value: 0, description: 'WIP'}, + {title: 'Current balance', value: 0, description: 'WIP'}, + ]; + + const renderCardsData = () => { + return ( + + + {cardsData.map((item) => ( + + + {item.title} + + + {CurrencyUtils.convertToDisplayString(item.value, 'USD')} + + + ))} + + + ); + }; + + const getHeaderButtons = () => { + return ( + +