update file namings

Expensify · Jul 4, 2024 · a8dc61f · a8dc61f
1 parent bb76ce4
commit a8dc61f
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 197 deletions.
diff --git 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<ReactComponentModule>('../../../../pages/workspace/tags/WorkspaceTagsPage').default,
     [SCREENS.WORKSPACE.TAXES]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceTaxesPage').default,
     [SCREENS.WORKSPACE.REPORT_FIELDS]: () => require<ReactComponentModule>('../../../../pages/workspace/reportFields/WorkspaceReportFieldsPage').default,
-    [SCREENS.WORKSPACE.EXPENSIFY_CARD]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceCardPageFeed').default,
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceExpensifyCardPage').default,
     [SCREENS.WORKSPACE.DISTANCE_RATES]: () => require<ReactComponentModule>('../../../../pages/workspace/distanceRates/PolicyDistanceRatesPage').default,
 } satisfies Screens;
 

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardPageFeed.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardPageFeed.tsx
diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx 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<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD>['route']};
+
+// TODO: remove this const altogether and take the card data from component prop when Onyx data is available
+const mockedCards: OnyxEntry<WorkspaceCardsList> = {
+    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 = () => (
+        <View style={[styles.w100, styles.flexRow, styles.gap2, shouldUseNarrowLayout && styles.mb3]}>
+            <Button
+                medium
+                success
+                onPress={() => {}} // TODO: add navigation action when card issue flow is implemented (https://github.com/Expensify/App/issues/44309)
+                icon={Expensicons.Plus}
+                text={translate('workspace.expensifyCard.issueCard')}
+                style={shouldUseNarrowLayout && styles.flex1}
+            />
+            <Button
+                medium
+                onPress={() => {}} // TODO: add navigation action when settings screen is implemented (https://github.com/Expensify/App/issues/44311)
+                icon={Expensicons.Gear}
+                text={translate('common.settings')}
+                style={shouldUseNarrowLayout && styles.flex1}
+            />
+        </View>
+    );
+
+    const renderItem = ({item, index}: ListRenderItemInfo<Card>) => (
+        <OfflineWithFeedback
+            key={`${item.nameValuePairs?.cardTitle}_${index}`}
+            errorRowStyles={styles.ph5}
+            errors={item.errors}
+        >
+            <PressableWithoutFeedback
+                role={CONST.ROLE.BUTTON}
+                accessibilityLabel="row"
+                onPress={() => {}} // TODO: add navigation action when card details screen is implemented (https://github.com/Expensify/App/issues/44325)
+            >
+                {({hovered}) => (
+                    <WorkspaceCardListRow
+                        style={hovered && styles.hoveredComponentBG}
+                        lastFourPAN={item.lastFourPAN ?? ''}
+                        // @ts-expect-error TODO: change cardholder to accountID and get personal details with it
+                        cardholder={item.cardholder}
+                        limit={item.nameValuePairs?.unapprovedExpenseLimit ?? 0}
+                        name={item.nameValuePairs?.cardTitle ?? ''}
+                        currency={policyCurrency}
+                    />
+                )}
+            </PressableWithoutFeedback>
+        </OfflineWithFeedback>
+    );
+
+    return (
+        <ScreenWrapper
+            shouldEnablePickerAvoiding={false}
+            shouldShowOfflineIndicatorInWideScreen
+            shouldEnableMaxHeight
+            testID={WorkspaceExpensifyCardListPage.displayName}
+        >
+            <HeaderWithBackButton
+                icon={Illustrations.HandCard}
+                title={translate('workspace.common.expensifyCard')}
+                shouldShowBackButton={shouldUseNarrowLayout}
+                onBackButtonPress={() => Navigation.goBack()}
+            >
+                {!shouldUseNarrowLayout && getHeaderButtons()}
+            </HeaderWithBackButton>
+
+            {shouldUseNarrowLayout && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
+
+            <FlatList
+                data={sortedCards}
+                renderItem={renderItem}
+                ListHeaderComponent={WorkspaceCardListHeader}
+            />
+        </ScreenWrapper>
+    );
+}
+
+WorkspaceExpensifyCardListPage.displayName = 'WorkspaceExpensifyCardListPage';
+
+export default WorkspaceExpensifyCardListPage;