From a8dc61fcc56f3e4a34cec2f03c2d41c2a139e2a4 Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu Date: Thu, 4 Jul 2024 15:31:33 +0300 Subject: [PATCH] update file namings --- .../Navigators/FullScreenNavigator.tsx | 2 +- .../expensifyCard/WorkspaceCardPageFeed.tsx | 37 ---- .../WorkspaceExpensifyCardListPage.tsx | 173 +++++++++++++++++ .../WorkspaceExpensifyCardPage.tsx | 174 ++---------------- ... WorkspaceExpensifyCardPageEmptyState.tsx} | 8 +- 5 files changed, 197 insertions(+), 197 deletions(-) delete mode 100644 src/pages/workspace/expensifyCard/WorkspaceCardPageFeed.tsx create mode 100644 src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx rename src/pages/workspace/expensifyCard/{WorkspaceCardPageEmptyState.tsx => WorkspaceExpensifyCardPageEmptyState.tsx} (87%) diff --git a/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx index a1a04056af08..748d92b49a1c 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx @@ -31,7 +31,7 @@ const CENTRAL_PANE_WORKSPACE_SCREENS = { [SCREENS.WORKSPACE.TAGS]: () => require('../../../../pages/workspace/tags/WorkspaceTagsPage').default, [SCREENS.WORKSPACE.TAXES]: () => require('../../../../pages/workspace/taxes/WorkspaceTaxesPage').default, [SCREENS.WORKSPACE.REPORT_FIELDS]: () => require('../../../../pages/workspace/reportFields/WorkspaceReportFieldsPage').default, - [SCREENS.WORKSPACE.EXPENSIFY_CARD]: () => require('../../../../pages/workspace/expensifyCard/WorkspaceCardPageFeed').default, + [SCREENS.WORKSPACE.EXPENSIFY_CARD]: () => require('../../../../pages/workspace/expensifyCard/WorkspaceExpensifyCardPage').default, [SCREENS.WORKSPACE.DISTANCE_RATES]: () => require('../../../../pages/workspace/distanceRates/PolicyDistanceRatesPage').default, } satisfies Screens; diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardPageFeed.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardPageFeed.tsx deleted file mode 100644 index dea20be0275a..000000000000 --- a/src/pages/workspace/expensifyCard/WorkspaceCardPageFeed.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import type {StackScreenProps} from '@react-navigation/stack'; -import React from 'react'; -import type {OnyxEntry} from 'react-native-onyx'; -import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; -import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; -import CONST from '@src/CONST'; -import type SCREENS from '@src/SCREENS'; -import type {WorkspaceCardsList} from '@src/types/onyx'; -import {isEmptyObject} from '@src/types/utils/EmptyObject'; -import WorkspaceCardPageEmptyState from './WorkspaceCardPageEmptyState'; -import WorkspaceExpensifyCardPage from './WorkspaceExpensifyCardPage'; - -type WorkspaceCardPageFeedProps = StackScreenProps; - -// TODO: remove when Onyx data is available, and pass the data to 'WorkspaceExpensifyCardPage' so that we will not make the same 'Onyx' call twice -const cardsList: OnyxEntry = {}; - -function WorkspaceCardPageFeed({route}: WorkspaceCardPageFeedProps) { - // const policyID = route.params.policyID ?? '-1'; - // const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${policyID}_${CONST.EXPENSIFY_CARD.BANK}`); - - return ( - - {/* After BE will be implemented we will probably want to have ActivityIndicator during fetch for cardsList */} - {isEmptyObject(cardsList) && } - {!isEmptyObject(cardsList) && } - - ); -} - -WorkspaceCardPageFeed.displayName = 'WorkspaceCardPageFeed'; - -export default WorkspaceCardPageFeed; diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx new file mode 100644 index 000000000000..36aee07ab6b5 --- /dev/null +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx @@ -0,0 +1,173 @@ +import {useFocusEffect} from '@react-navigation/native'; +import type {StackScreenProps} from '@react-navigation/stack'; +import React, {useCallback, useMemo} from 'react'; +import type {ListRenderItemInfo} from 'react-native'; +import {FlatList, View} from 'react-native'; +import type {OnyxEntry} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; +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 OfflineWithFeedback from '@components/OfflineWithFeedback'; +import {PressableWithoutFeedback} from '@components/Pressable'; +import ScreenWrapper from '@components/ScreenWrapper'; +import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useThemeStyles from '@hooks/useThemeStyles'; +import localeCompare from '@libs/LocaleCompare'; +import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; +import Navigation from '@navigation/Navigation'; +import type {FullScreenNavigatorParamList} from '@navigation/types'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import type SCREENS from '@src/SCREENS'; +import type {Card, WorkspaceCardsList} from '@src/types/onyx'; +import WorkspaceCardListHeader from './WorkspaceCardListHeader'; +import WorkspaceCardListRow from './WorkspaceCardListRow'; + +type WorkspaceExpensifyCardListPageProps = {route: StackScreenProps['route']}; + +// TODO: remove this const altogether and take the card data from component prop when Onyx data is available +const mockedCards: OnyxEntry = { + test1: { + // @ts-expect-error TODO: change cardholder to accountID + cardholder: {accountID: 1, lastName: 'Smith', firstName: 'Bob', displayName: 'Bob Smith'}, + nameValuePairs: { + unapprovedExpenseLimit: 1000, + cardTitle: 'Test 1', + }, + lastFourPAN: '1234', + }, + test2: { + // @ts-expect-error TODO: change cardholder to accountID + cardholder: {accountID: 2, lastName: 'Miller', firstName: 'Alex', displayName: 'Alex Miller'}, + nameValuePairs: { + unapprovedExpenseLimit: 2000, + cardTitle: 'Test 2', + }, + lastFourPAN: '1234', + }, + test3: { + // @ts-expect-error TODO: change cardholder to accountID + cardholder: {accountID: 3, lastName: 'Brown', firstName: 'Kevin', displayName: 'Kevin Brown'}, + nameValuePairs: { + unapprovedExpenseLimit: 3000, + cardTitle: 'Test 3', + }, + lastFourPAN: '1234', + }, +}; + +function WorkspaceExpensifyCardListPage({route}: WorkspaceExpensifyCardListPageProps) { + const {shouldUseNarrowLayout} = useResponsiveLayout(); + const {translate} = useLocalize(); + const styles = useThemeStyles(); + + const policyID = route.params.policyID; + const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`); + + const policyCurrency = useMemo(() => policy?.outputCurrency ?? CONST.CURRENCY.USD, [policy]); + + // TODO: uncomment the code line below to use cardsList data from Onyx when it's supported + // const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${policyID}_${CONST.EXPENSIFY_CARD.BANK}`); + const cardsList = mockedCards; + + const fetchExpensifyCards = useCallback(() => { + // TODO: uncomment when OpenPolicyExpensifyCardsPage API call is supported + // Policy.openPolicyExpensifyCardsPage(policyID); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [policyID]); + + useFocusEffect(fetchExpensifyCards); + + const sortedCards = useMemo( + () => + Object.values(cardsList ?? {}).sort((a, b) => { + // @ts-expect-error TODO: change cardholder to accountID and get personal details with it + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + const aName = PersonalDetailsUtils.getDisplayNameOrDefault(a.cardholder ?? {}); + // @ts-expect-error TODO: change cardholder to accountID and get personal details with it + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + const bName = PersonalDetailsUtils.getDisplayNameOrDefault(b.cardholder ?? {}); + return localeCompare(aName, bName); + }), + [cardsList], + ); + + const getHeaderButtons = () => ( + +