From 46c1509db43b0b40baa956f87445d1061d6d65cb Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Wed, 28 Aug 2024 09:35:16 +0200
Subject: [PATCH 01/10] Implement UI elements for company cards list

---
 .../WorkspaceCompanyCardsList.tsx             | 96 +++++++++++++++++++
 ...WorkspaceCompanyCardsListHeaderButtons.tsx | 45 +++++++++
 .../WorkspaceCompanyCardsListRow.tsx          | 62 ++++++++++++
 .../WorkspaceCompanyCardsPage.tsx             | 34 +++++--
 src/types/onyx/Card.ts                        |  3 +
 5 files changed, 232 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
 create mode 100644 src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
 create mode 100644 src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
new file mode 100644
index 000000000000..ae9ccca3db9f
--- /dev/null
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
@@ -0,0 +1,96 @@
+import React, {useCallback, useMemo} from 'react';
+import type {ListRenderItemInfo} from 'react-native';
+import {FlatList, View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import {PressableWithFeedback} from '@components/Pressable';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as CardUtils from '@libs/CardUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Card, WorkspaceCardsList} from '@src/types/onyx';
+import WorkspaceCompanyCardsListHeaderButtons from './WorkspaceCompanyCardsListHeaderButtons';
+import WorkspaceCompanyCardsListRow from './WorkspaceCompanyCardsListRow';
+
+type WorkspaceCompanyCardsListProps = {
+    /** The current policyID */
+    policyID: string;
+
+    /** List of company cards */
+    cardsList: OnyxEntry<WorkspaceCardsList>;
+};
+
+function WorkspaceCompanyCardsList({policyID, cardsList}: WorkspaceCompanyCardsListProps) {
+    const styles = useThemeStyles();
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+
+    const sortedCards = useMemo(() => CardUtils.sortCardsByCardholderName(cardsList, personalDetails), [cardsList, personalDetails]);
+
+    const renderItem = useCallback(
+        ({item, index}: ListRenderItemInfo<Card>) => (
+            <OfflineWithFeedback
+                key={`${item.nameValuePairs?.cardTitle}_${index}`}
+                errorRowStyles={styles.ph5}
+                errors={item.errors}
+            >
+                <PressableWithFeedback
+                    role={CONST.ROLE.BUTTON}
+                    style={[styles.mh5, styles.br3, styles.mb3, styles.highlightBG]}
+                    accessibilityLabel="row"
+                    hoverStyle={styles.hoveredComponentBG}
+                    onPress={() => {}}
+                >
+                    <WorkspaceCompanyCardsListRow
+                        cardholder={personalDetails?.[item.accountID ?? '-1']}
+                        cardNumber={item?.cardNumber ?? ''}
+                        name={item.nameValuePairs?.cardTitle ?? ''}
+                    />
+                </PressableWithFeedback>
+            </OfflineWithFeedback>
+        ),
+        [personalDetails, styles],
+    );
+
+    const renderListHeader = useCallback(
+        () => (
+            <View style={[styles.flexRow, styles.justifyContentBetween, styles.mh5, styles.gap5, styles.p4]}>
+                <Text
+                    numberOfLines={1}
+                    style={[styles.textLabelSupporting, styles.lh16]}
+                >
+                    Name
+                </Text>
+                <Text
+                    numberOfLines={1}
+                    style={[styles.textLabelSupporting, styles.lh16]}
+                >
+                    Card number
+                </Text>
+            </View>
+        ),
+        [styles],
+    );
+
+    return (
+        <ScreenWrapper
+            shouldEnablePickerAvoiding={false}
+            shouldShowOfflineIndicatorInWideScreen
+            shouldEnableMaxHeight
+            testID={WorkspaceCompanyCardsList.displayName}
+        >
+            <WorkspaceCompanyCardsListHeaderButtons policyID={policyID} />
+            <FlatList
+                data={sortedCards}
+                renderItem={renderItem}
+                ListHeaderComponent={renderListHeader}
+            />
+        </ScreenWrapper>
+    );
+}
+
+WorkspaceCompanyCardsList.displayName = 'WorkspaceCompanyCardsList';
+
+export default WorkspaceCompanyCardsList;
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
new file mode 100644
index 000000000000..be87c97ffa20
--- /dev/null
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import * as Expensicons from '@components/Icon/Expensicons';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@navigation/Navigation';
+import ROUTES from '@src/ROUTES';
+
+type WorkspaceCompanyCardsListHeaderButtonsProps = {
+    policyID: string;
+};
+
+function WorkspaceCompanyCardsListHeaderButtons({policyID}: WorkspaceCompanyCardsListHeaderButtonsProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+
+    return (
+        <View style={[styles.ph5, styles.pv5]}>
+            <View style={[styles.w100, styles.flexRow, styles.gap2, shouldUseNarrowLayout && styles.mb3]}>
+                <Button
+                    medium
+                    success
+                    onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID))}
+                    icon={Expensicons.Plus}
+                    text={translate('workspace.expensifyCard.issueCard')}
+                    style={shouldUseNarrowLayout && styles.flex1}
+                />
+                <Button
+                    medium
+                    onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS.getRoute(policyID))}
+                    icon={Expensicons.Gear}
+                    text={translate('common.settings')}
+                    style={shouldUseNarrowLayout && styles.flex1}
+                />
+            </View>
+        </View>
+    );
+}
+
+WorkspaceCompanyCardsListHeaderButtons.displayName = 'WorkspaceCompanyCardsListHeaderButtons';
+
+export default WorkspaceCompanyCardsListHeaderButtons;
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx
new file mode 100644
index 000000000000..77ef79ee4897
--- /dev/null
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx
@@ -0,0 +1,62 @@
+import React, {useMemo} from 'react';
+import {View} from 'react-native';
+import Avatar from '@components/Avatar';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
+import {getDefaultAvatarURL} from '@libs/UserUtils';
+import CONST from '@src/CONST';
+import type {PersonalDetails} from '@src/types/onyx';
+
+type WorkspaceCompanyCardsListRowProps = {
+    /** Card number */
+    cardNumber: string;
+
+    /** Card name */
+    name: string;
+
+    /** Cardholder personal details */
+    cardholder?: PersonalDetails | null;
+};
+
+function WorkspaceCompanyCardsListRow({cardholder, name, cardNumber}: WorkspaceCompanyCardsListRowProps) {
+    const styles = useThemeStyles();
+    const cardholderName = useMemo(() => PersonalDetailsUtils.getDisplayNameOrDefault(cardholder), [cardholder]);
+
+    return (
+        <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.br3, styles.p4]}>
+            <View style={[styles.flexRow, styles.gap3, styles.alignItemsCenter]}>
+                <Avatar
+                    source={getDefaultAvatarURL(cardholder?.accountID)}
+                    avatarID={cardholder?.accountID}
+                    type={CONST.ICON_TYPE_AVATAR}
+                    size={CONST.AVATAR_SIZE.DEFAULT}
+                />
+                <View style={styles.flex1}>
+                    <Text
+                        numberOfLines={1}
+                        style={[styles.optionDisplayName, styles.textStrong, styles.pre]}
+                    >
+                        {cardholderName}
+                    </Text>
+                    <Text
+                        numberOfLines={1}
+                        style={[styles.textLabelSupporting, styles.lh16]}
+                    >
+                        {name}
+                    </Text>
+                </View>
+            </View>
+            <Text
+                numberOfLines={1}
+                style={[styles.textLabelSupporting, styles.lh16]}
+            >
+                {cardNumber}
+            </Text>
+        </View>
+    );
+}
+
+WorkspaceCompanyCardsListRow.displayName = 'WorkspaceCompanyCardsListRow';
+
+export default WorkspaceCompanyCardsListRow;
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index 1945cf99a001..2fd1f2a1e9c3 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -1,27 +1,42 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
-import {View} from 'react-native';
 import * as Illustrations from '@components/Icon/Illustrations';
 import useLocalize from '@hooks/useLocalize';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useThemeStyles from '@hooks/useThemeStyles';
 import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
 import type SCREENS from '@src/SCREENS';
+import type {WorkspaceCardsList} from '@src/types/onyx';
+import WorkspaceCompanyCardsList from './WorkspaceCompanyCardsList';
+
+const mockedCards = {
+    id1: {
+        accountID: 885646,
+        nameValuePairs: {
+            cardTitle: 'Test 1',
+        },
+        cardNumber: '1234 56XX XXXX 1222',
+    },
+    id2: {
+        accountID: 885646,
+        nameValuePairs: {
+            cardTitle: 'Test 2',
+        },
+        cardNumber: '1234 56XX XXXX 1222',
+    },
+} as unknown as WorkspaceCardsList;
 
 type WorkspaceCompanyCardPageProps = StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARDS>;
 
 function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const policyID = route.params.policyID;
 
     return (
         <AccessOrNotFoundWrapper
-            policyID={route.params.policyID}
-            featureName={CONST.POLICY.MORE_FEATURES.ARE_COMPANY_CARDS_ENABLED}
+            policyID={policyID}
+            // featureName={CONST.POLICY.MORE_FEATURES.ARE_COMPANY_CARDS_ENABLED}
         >
             <WorkspacePageWithSections
                 shouldUseScrollView
@@ -31,7 +46,10 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_COMPANY_CARDS}
                 shouldShowOfflineIndicatorInWideScreen
             >
-                <View style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]} />
+                <WorkspaceCompanyCardsList
+                    cardsList={mockedCards}
+                    policyID={policyID}
+                />
             </WorkspacePageWithSections>
         </AccessOrNotFoundWrapper>
     );
diff --git a/src/types/onyx/Card.ts b/src/types/onyx/Card.ts
index 24640df9e2da..85da867eb4bc 100644
--- a/src/types/onyx/Card.ts
+++ b/src/types/onyx/Card.ts
@@ -28,6 +28,9 @@ type Card = {
     /** Last four Primary Account Number digits */
     lastFourPAN?: string;
 
+    /** Card number */
+    cardNumber?: string;
+
     /** Current fraud state of the card */
     fraud: ValueOf<typeof CONST.EXPENSIFY_CARD.FRAUD_TYPES>;
 

From fb3f0bd5cc9791fb4a7cdc9d1edd297e56e45f8e Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Wed, 28 Aug 2024 15:40:11 +0200
Subject: [PATCH 02/10] Implement feeds switch

---
 src/languages/en.ts                           |  1 +
 src/languages/es.ts                           |  1 +
 .../WorkspaceCompanyCardsList.tsx             | 10 +++-
 ...WorkspaceCompanyCardsListHeaderButtons.tsx | 49 ++++++++++++++++---
 .../WorkspaceCompanyCardsPage.tsx             | 39 +++++++++++++--
 5 files changed, 88 insertions(+), 12 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 49aad695995e..685988578de8 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2753,6 +2753,7 @@ export default {
         companyCards: {
             addCompanyCards: 'Add company cards',
             selectCardFeed: 'Select card feed',
+            assignCard: 'Assign card',
         },
         expensifyCard: {
             issueAndManageCards: 'Issue and manage your Expensify Cards',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index dd4d94d47b78..228dd02e7e74 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -2800,6 +2800,7 @@ export default {
         companyCards: {
             addCompanyCards: 'Agregar tarjetas de empresa',
             selectCardFeed: 'Seleccionar feed de tarjetas',
+            assignCard: 'Asignar tarjeta',
         },
         expensifyCard: {
             issueAndManageCards: 'Emitir y gestionar Tarjetas Expensify',
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
index ae9ccca3db9f..a133c593c58b 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
@@ -21,9 +21,12 @@ type WorkspaceCompanyCardsListProps = {
 
     /** List of company cards */
     cardsList: OnyxEntry<WorkspaceCardsList>;
+
+    /** Currently selected feed */
+    selectedFeed: string;
 };
 
-function WorkspaceCompanyCardsList({policyID, cardsList}: WorkspaceCompanyCardsListProps) {
+function WorkspaceCompanyCardsList({policyID, cardsList, selectedFeed}: WorkspaceCompanyCardsListProps) {
     const styles = useThemeStyles();
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
 
@@ -81,7 +84,10 @@ function WorkspaceCompanyCardsList({policyID, cardsList}: WorkspaceCompanyCardsL
             shouldEnableMaxHeight
             testID={WorkspaceCompanyCardsList.displayName}
         >
-            <WorkspaceCompanyCardsListHeaderButtons policyID={policyID} />
+            <WorkspaceCompanyCardsListHeaderButtons
+                policyID={policyID}
+                selectedFeed={selectedFeed}
+            />
             <FlatList
                 data={sortedCards}
                 renderItem={renderItem}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
index be87c97ffa20..b488c8638249 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
@@ -1,36 +1,73 @@
 import React from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
+import CaretWrapper from '@components/CaretWrapper';
+import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
+import {PressableWithFeedback} from '@components/Pressable';
+import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as CardUtils from '@libs/CardUtils';
 import Navigation from '@navigation/Navigation';
+import variables from '@styles/variables';
 import ROUTES from '@src/ROUTES';
+import type {CardFeeds} from '@src/types/onyx';
+
+const mockedFeeds = {
+    companyCardNicknames: {
+        cdfbmo: 'BMO MasterCard',
+    },
+} as unknown as CardFeeds;
 
 type WorkspaceCompanyCardsListHeaderButtonsProps = {
     policyID: string;
+    selectedFeed: string;
 };
 
-function WorkspaceCompanyCardsListHeaderButtons({policyID}: WorkspaceCompanyCardsListHeaderButtonsProps) {
+function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: WorkspaceCompanyCardsListHeaderButtonsProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    // TODO: use data form onyx instead of mocked one when API is implemented
+    // const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
+    const cardFeeds = mockedFeeds ?? {};
 
     return (
-        <View style={[styles.ph5, styles.pv5]}>
-            <View style={[styles.w100, styles.flexRow, styles.gap2, shouldUseNarrowLayout && styles.mb3]}>
+        <View style={[styles.w100, styles.ph5, !shouldUseNarrowLayout && [styles.pv2, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]]}>
+            <PressableWithFeedback
+                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_SELECT_FEED.getRoute(policyID))}
+                style={[styles.flexRow, styles.alignItemsCenter, styles.gap3, styles.ml4, shouldUseNarrowLayout && styles.mb3]}
+                accessibilityLabel={cardFeeds?.companyCardNicknames?.[selectedFeed]}
+            >
+                <Icon
+                    src={CardUtils.getCardFeedIcon(selectedFeed)}
+                    width={variables.iconSizeExtraLarge}
+                    height={variables.iconSizeExtraLarge}
+                />
+                <View>
+                    <CaretWrapper>
+                        <Text style={styles.textStrong}>{cardFeeds?.companyCardNicknames?.[selectedFeed]}</Text>
+                    </CaretWrapper>
+                    <Text style={styles.textLabelSupporting}>Custom feed</Text>
+                </View>
+            </PressableWithFeedback>
+
+            <View style={[styles.flexRow, styles.gap2]}>
                 <Button
                     medium
                     success
-                    onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID))}
+                    // TODO: navigate to Assign card flow when it's implemented
+                    onPress={() => {}}
                     icon={Expensicons.Plus}
-                    text={translate('workspace.expensifyCard.issueCard')}
+                    text={translate('workspace.companyCards.assignCard')}
                     style={shouldUseNarrowLayout && styles.flex1}
                 />
                 <Button
                     medium
-                    onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS.getRoute(policyID))}
+                    // TODO: navigate to Settings screen when it's implemented
+                    onPress={() => {}}
                     icon={Expensicons.Gear}
                     text={translate('common.settings')}
                     style={shouldUseNarrowLayout && styles.flex1}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index 2fd1f2a1e9c3..e36e01e0b225 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -1,15 +1,34 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
+import {useOnyx} from 'react-native-onyx';
 import * as Illustrations from '@components/Icon/Illustrations';
 import useLocalize from '@hooks/useLocalize';
 import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
-import type {WorkspaceCardsList} from '@src/types/onyx';
+import type {CardFeeds, WorkspaceCardsList} from '@src/types/onyx';
 import WorkspaceCompanyCardsList from './WorkspaceCompanyCardsList';
 
+const mockedFeeds: CardFeeds = {
+    companyCards: {
+        cdfbmo: {
+            pending: false,
+            asrEnabled: true,
+            forceReimbursable: 'force_no',
+            liabilityType: 'corporate',
+            preferredPolicy: '',
+            reportTitleFormat: '{report:card}{report:bank}{report:submit:from}{report:total}{report:enddate:MMMM}',
+            statementPeriodEndDay: 'LAST_DAY_OF_MONTH',
+        },
+    },
+    companyCardNicknames: {
+        cdfbmo: 'BMO MasterCard',
+    },
+};
+
 const mockedCards = {
     id1: {
         accountID: 885646,
@@ -30,13 +49,24 @@ const mockedCards = {
 type WorkspaceCompanyCardPageProps = StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARDS>;
 
 function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
-    const {translate} = useLocalize();
     const policyID = route.params.policyID;
+    const {translate} = useLocalize();
+
+    // TODO: use data form onyx instead of mocked one when API is implemented
+    // const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
+    const cardFeeds = mockedFeeds;
+    const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
+    const defaultFeed = Object.keys(cardFeeds?.companyCards ?? {})[0];
+    const selectedFeed = lastSelectedFeed ?? defaultFeed;
+
+    // TODO: use data form onyx instead of mocked one when API is implemented
+    // const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${selectedFeed}`);
+    const cardsList = mockedCards ?? {};
 
     return (
         <AccessOrNotFoundWrapper
             policyID={policyID}
-            // featureName={CONST.POLICY.MORE_FEATURES.ARE_COMPANY_CARDS_ENABLED}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_COMPANY_CARDS_ENABLED}
         >
             <WorkspacePageWithSections
                 shouldUseScrollView
@@ -47,8 +77,9 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
                 shouldShowOfflineIndicatorInWideScreen
             >
                 <WorkspaceCompanyCardsList
-                    cardsList={mockedCards}
+                    cardsList={cardsList}
                     policyID={policyID}
+                    selectedFeed={selectedFeed}
                 />
             </WorkspacePageWithSections>
         </AccessOrNotFoundWrapper>

From 13c6fc83380ef53faf38a5196d9e912755cedb8a Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Wed, 28 Aug 2024 15:58:25 +0200
Subject: [PATCH 03/10] Minor code improvements

---
 src/languages/en.ts                                        | 1 +
 src/languages/es.ts                                        | 1 +
 .../workspace/companyCards/WorkspaceCompanyCardsList.tsx   | 7 +++++--
 .../WorkspaceCompanyCardsListHeaderButtons.tsx             | 3 +++
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 685988578de8..75f04490b930 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2754,6 +2754,7 @@ export default {
             addCompanyCards: 'Add company cards',
             selectCardFeed: 'Select card feed',
             assignCard: 'Assign card',
+            cardNumber: 'Card number',
         },
         expensifyCard: {
             issueAndManageCards: 'Issue and manage your Expensify Cards',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 228dd02e7e74..ee830215a2de 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -2801,6 +2801,7 @@ export default {
             addCompanyCards: 'Agregar tarjetas de empresa',
             selectCardFeed: 'Seleccionar feed de tarjetas',
             assignCard: 'Asignar tarjeta',
+            cardNumber: 'Número de la tarjeta',
         },
         expensifyCard: {
             issueAndManageCards: 'Emitir y gestionar Tarjetas Expensify',
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
index a133c593c58b..aeb952f9bb4a 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
@@ -7,6 +7,7 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {PressableWithFeedback} from '@components/Pressable';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import CONST from '@src/CONST';
@@ -28,6 +29,7 @@ type WorkspaceCompanyCardsListProps = {
 
 function WorkspaceCompanyCardsList({policyID, cardsList, selectedFeed}: WorkspaceCompanyCardsListProps) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
 
     const sortedCards = useMemo(() => CardUtils.sortCardsByCardholderName(cardsList, personalDetails), [cardsList, personalDetails]);
@@ -44,6 +46,7 @@ function WorkspaceCompanyCardsList({policyID, cardsList, selectedFeed}: Workspac
                     style={[styles.mh5, styles.br3, styles.mb3, styles.highlightBG]}
                     accessibilityLabel="row"
                     hoverStyle={styles.hoveredComponentBG}
+                    // TODO: navigate to Card Details screen when implemented
                     onPress={() => {}}
                 >
                     <WorkspaceCompanyCardsListRow
@@ -64,13 +67,13 @@ function WorkspaceCompanyCardsList({policyID, cardsList, selectedFeed}: Workspac
                     numberOfLines={1}
                     style={[styles.textLabelSupporting, styles.lh16]}
                 >
-                    Name
+                    {translate('common.name')}
                 </Text>
                 <Text
                     numberOfLines={1}
                     style={[styles.textLabelSupporting, styles.lh16]}
                 >
-                    Card number
+                    {translate('workspace.companyCards.cardNumber')}
                 </Text>
             </View>
         ),
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
index b488c8638249..295396f75bc2 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
@@ -22,7 +22,10 @@ const mockedFeeds = {
 } as unknown as CardFeeds;
 
 type WorkspaceCompanyCardsListHeaderButtonsProps = {
+    /** Current policy id */
     policyID: string;
+
+    /** Currently selected feed */
     selectedFeed: string;
 };
 

From 2057f8a07d8a3f1cd0b7ee7c2d0541b4f94a764e Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Thu, 29 Aug 2024 08:38:24 +0200
Subject: [PATCH 04/10] Lint fix

---
 src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
index aeb952f9bb4a..7321e1937feb 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
@@ -77,7 +77,7 @@ function WorkspaceCompanyCardsList({policyID, cardsList, selectedFeed}: Workspac
                 </Text>
             </View>
         ),
-        [styles],
+        [styles, translate],
     );
 
     return (

From 4df965dbbf3ebb060ad93346afb339e6a000955b Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Thu, 29 Aug 2024 09:56:05 +0200
Subject: [PATCH 05/10] UI fixes

---
 .../workspace/WorkspacePageWithSections.tsx     |  6 +++++-
 .../companyCards/WorkspaceCompanyCardsList.tsx  | 17 ++++++-----------
 .../WorkspaceCompanyCardsListHeaderButtons.tsx  |  2 +-
 .../WorkspaceCompanyCardsListRow.tsx            |  2 +-
 .../companyCards/WorkspaceCompanyCardsPage.tsx  |  2 +-
 5 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx
index e46e7071333f..d291a2d56bf1 100644
--- a/src/pages/workspace/WorkspacePageWithSections.tsx
+++ b/src/pages/workspace/WorkspacePageWithSections.tsx
@@ -72,6 +72,9 @@ type WorkspacePageWithSectionsProps = WithPolicyAndFullscreenLoadingProps &
         /** Whether to show the not found page */
         shouldShowNotFoundPage?: boolean;
 
+        /** Whether to include safe area padding bottom or not */
+        includeSafeAreaPaddingBottom?: boolean;
+
         /** Policy values needed in the component */
         policy: OnyxEntry<Policy>;
 
@@ -120,6 +123,7 @@ function WorkspacePageWithSections({
     user,
     shouldShowLoading = true,
     shouldShowOfflineIndicatorInWideScreen = false,
+    includeSafeAreaPaddingBottom = false,
     shouldShowNonAdmin = false,
     headerContent,
     testID,
@@ -169,7 +173,7 @@ function WorkspacePageWithSections({
 
     return (
         <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
+            includeSafeAreaPaddingBottom={includeSafeAreaPaddingBottom}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
             testID={testID ?? WorkspacePageWithSections.displayName}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
index 7321e1937feb..54c20bb74e72 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
@@ -5,7 +5,6 @@ import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {PressableWithFeedback} from '@components/Pressable';
-import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -62,7 +61,7 @@ function WorkspaceCompanyCardsList({policyID, cardsList, selectedFeed}: Workspac
 
     const renderListHeader = useCallback(
         () => (
-            <View style={[styles.flexRow, styles.justifyContentBetween, styles.mh5, styles.gap5, styles.p4]}>
+            <View style={[styles.flexRow, styles.appBG, styles.justifyContentBetween, styles.mh5, styles.gap5, styles.p4]}>
                 <Text
                     numberOfLines={1}
                     style={[styles.textLabelSupporting, styles.lh16]}
@@ -81,25 +80,21 @@ function WorkspaceCompanyCardsList({policyID, cardsList, selectedFeed}: Workspac
     );
 
     return (
-        <ScreenWrapper
-            shouldEnablePickerAvoiding={false}
-            shouldShowOfflineIndicatorInWideScreen
-            shouldEnableMaxHeight
-            testID={WorkspaceCompanyCardsList.displayName}
-        >
+        <View style={styles.flex1}>
             <WorkspaceCompanyCardsListHeaderButtons
                 policyID={policyID}
                 selectedFeed={selectedFeed}
             />
             <FlatList
+                contentContainerStyle={styles.flexGrow1}
                 data={sortedCards}
                 renderItem={renderItem}
                 ListHeaderComponent={renderListHeader}
+                stickyHeaderIndices={[0]}
+                scrollIndicatorInsets={{right: Number.MIN_VALUE}}
             />
-        </ScreenWrapper>
+        </View>
     );
 }
 
-WorkspaceCompanyCardsList.displayName = 'WorkspaceCompanyCardsList';
-
 export default WorkspaceCompanyCardsList;
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
index 295396f75bc2..df9c21fc742f 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
@@ -38,7 +38,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
     const cardFeeds = mockedFeeds ?? {};
 
     return (
-        <View style={[styles.w100, styles.ph5, !shouldUseNarrowLayout && [styles.pv2, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]]}>
+        <View style={[styles.w100, styles.ph5, !shouldUseNarrowLayout ? [styles.pv2, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween] : styles.pb2]}>
             <PressableWithFeedback
                 onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_SELECT_FEED.getRoute(policyID))}
                 style={[styles.flexRow, styles.alignItemsCenter, styles.gap3, styles.ml4, shouldUseNarrowLayout && styles.mb3]}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx
index 77ef79ee4897..91eddfd96936 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx
@@ -32,7 +32,7 @@ function WorkspaceCompanyCardsListRow({cardholder, name, cardNumber}: WorkspaceC
                     type={CONST.ICON_TYPE_AVATAR}
                     size={CONST.AVATAR_SIZE.DEFAULT}
                 />
-                <View style={styles.flex1}>
+                <View>
                     <Text
                         numberOfLines={1}
                         style={[styles.optionDisplayName, styles.textStrong, styles.pre]}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index e36e01e0b225..15bb57f0c267 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -69,12 +69,12 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
             featureName={CONST.POLICY.MORE_FEATURES.ARE_COMPANY_CARDS_ENABLED}
         >
             <WorkspacePageWithSections
-                shouldUseScrollView
                 icon={Illustrations.CompanyCard}
                 headerText={translate('workspace.common.companyCards')}
                 route={route}
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_COMPANY_CARDS}
                 shouldShowOfflineIndicatorInWideScreen
+                includeSafeAreaPaddingBottom
             >
                 <WorkspaceCompanyCardsList
                     cardsList={cardsList}

From c6ce0f80c52457759ca4e3534c2393b9240aa48d Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Thu, 29 Aug 2024 10:09:43 +0200
Subject: [PATCH 06/10] Fix ios scroll indicator

---
 src/pages/workspace/WorkspacePageWithSections.tsx           | 6 +++++-
 .../workspace/companyCards/WorkspaceCompanyCardsList.tsx    | 1 -
 .../workspace/companyCards/WorkspaceCompanyCardsPage.tsx    | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx
index d291a2d56bf1..cae473b740bc 100644
--- a/src/pages/workspace/WorkspacePageWithSections.tsx
+++ b/src/pages/workspace/WorkspacePageWithSections.tsx
@@ -75,6 +75,9 @@ type WorkspacePageWithSectionsProps = WithPolicyAndFullscreenLoadingProps &
         /** Whether to include safe area padding bottom or not */
         includeSafeAreaPaddingBottom?: boolean;
 
+        /** Makes firstRender ref display loading page before isLoading is change to true */
+        showLoadingAsFirstRender?: boolean;
+
         /** Policy values needed in the component */
         policy: OnyxEntry<Policy>;
 
@@ -118,6 +121,7 @@ function WorkspacePageWithSections({
     reimbursementAccount = CONST.REIMBURSEMENT_ACCOUNT.DEFAULT_DATA,
     route,
     shouldUseScrollView = false,
+    showLoadingAsFirstRender = true,
     shouldSkipVBBACall = true,
     shouldShowBackButton = false,
     user,
@@ -142,7 +146,7 @@ function WorkspacePageWithSections({
     const hasVBA = achState === BankAccount.STATE.OPEN;
     const content = typeof children === 'function' ? children(hasVBA, policyID, isUsingECard) : children;
     const {shouldUseNarrowLayout} = useResponsiveLayout();
-    const firstRender = useRef(true);
+    const firstRender = useRef(showLoadingAsFirstRender);
     const isFocused = useIsFocused();
     const prevPolicy = usePrevious(policy);
 
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
index 54c20bb74e72..8f91397443cd 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
@@ -91,7 +91,6 @@ function WorkspaceCompanyCardsList({policyID, cardsList, selectedFeed}: Workspac
                 renderItem={renderItem}
                 ListHeaderComponent={renderListHeader}
                 stickyHeaderIndices={[0]}
-                scrollIndicatorInsets={{right: Number.MIN_VALUE}}
             />
         </View>
     );
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index 15bb57f0c267..c86bfd0da83f 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -75,6 +75,7 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_COMPANY_CARDS}
                 shouldShowOfflineIndicatorInWideScreen
                 includeSafeAreaPaddingBottom
+                showLoadingAsFirstRender={false}
             >
                 <WorkspaceCompanyCardsList
                     cardsList={cardsList}

From bea7704aaa908da9d01d9b2a9e750cc9675a1673 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Thu, 29 Aug 2024 11:07:55 +0200
Subject: [PATCH 07/10] Add phrase translation

---
 src/languages/en.ts                                             | 1 +
 src/languages/es.ts                                             | 1 +
 .../companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx     | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index de7fb0fc4109..db559604938b 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2752,6 +2752,7 @@ export default {
             selectCardFeed: 'Select card feed',
             assignCard: 'Assign card',
             cardNumber: 'Card number',
+            customFeed: 'Custom feed',
         },
         expensifyCard: {
             issueAndManageCards: 'Issue and manage your Expensify Cards',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 99a42e82b21a..f01c2a084d5d 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -2797,6 +2797,7 @@ export default {
             selectCardFeed: 'Seleccionar feed de tarjetas',
             assignCard: 'Asignar tarjeta',
             cardNumber: 'Número de la tarjeta',
+            customFeed: 'Fuente personalizada',
         },
         expensifyCard: {
             issueAndManageCards: 'Emitir y gestionar Tarjetas Expensify',
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
index df9c21fc742f..aac16682f6e3 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
@@ -53,7 +53,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
                     <CaretWrapper>
                         <Text style={styles.textStrong}>{cardFeeds?.companyCardNicknames?.[selectedFeed]}</Text>
                     </CaretWrapper>
-                    <Text style={styles.textLabelSupporting}>Custom feed</Text>
+                    <Text style={styles.textLabelSupporting}>{translate('workspace.companyCards.customFeed')}</Text>
                 </View>
             </PressableWithFeedback>
 

From 410f2f28541a5d62e6d6a77a0538ddb0db1657b0 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Fri, 30 Aug 2024 09:16:15 +0200
Subject: [PATCH 08/10] Code improvements after merging main

---
 .../companyCards/WorkspaceCompanyCardsPage.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index cd89e4edb850..bc461eb3c906 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -10,8 +10,9 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import type {CardFeeds, WorkspaceCardsList} from '@src/types/onyx';
-import WorkspaceCompanyCardsList from './WorkspaceCompanyCardsList';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import WorkspaceCompanyCardPageEmptyState from './WorkspaceCompanyCardPageEmptyState';
+import WorkspaceCompanyCardsList from './WorkspaceCompanyCardsList';
 
 const mockedFeeds: CardFeeds = {
     companyCards: {
@@ -78,12 +79,15 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
                 includeSafeAreaPaddingBottom
                 showLoadingAsFirstRender={false}
             >
-                <WorkspaceCompanyCardPageEmptyState route={route} />
-                <WorkspaceCompanyCardsList
-                    cardsList={cardsList}
-                    policyID={policyID}
-                    selectedFeed={selectedFeed}
-                />
+                {isEmptyObject(cardFeeds?.companyCards) ? (
+                    <WorkspaceCompanyCardPageEmptyState route={route} />
+                ) : (
+                    <WorkspaceCompanyCardsList
+                        cardsList={cardsList}
+                        policyID={policyID}
+                        selectedFeed={selectedFeed}
+                    />
+                )}
             </WorkspacePageWithSections>
         </AccessOrNotFoundWrapper>
     );

From be6094e125e01f735ff22adca56b7da9d939315d Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 2 Sep 2024 11:35:03 +0200
Subject: [PATCH 09/10] Updates after merging main

---
 src/components/EmptyStateComponent/index.tsx  |   3 +-
 src/components/EmptyStateComponent/types.ts   |   1 +
 ...orkspaceCompanyCardsFeedAddedEmptyPage.tsx |   1 +
 .../WorkspaceCompanyCardsList.tsx             |  34 ++--
 ...WorkspaceCompanyCardsListHeaderButtons.tsx |   3 +-
 .../WorkspaceCompanyCardsPage.tsx             | 172 ++++++++++++------
 6 files changed, 134 insertions(+), 80 deletions(-)

diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index 6fcee2290d2b..578ea13fece9 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -19,6 +19,7 @@ function EmptyStateComponent({
     headerMedia,
     buttonText,
     buttonAction,
+    containerStyles,
     title,
     subtitle,
     headerStyles,
@@ -77,7 +78,7 @@ function EmptyStateComponent({
     }, [headerMedia, headerMediaType, headerContentStyles, videoAspectRatio, styles.emptyStateVideo]);
 
     return (
-        <ScrollView contentContainerStyle={[styles.emptyStateScrollView, {minHeight: minModalHeight}]}>
+        <ScrollView contentContainerStyle={[styles.emptyStateScrollView, {minHeight: minModalHeight}, containerStyles]}>
             <View style={styles.skeletonBackground}>
                 <SkeletonComponent
                     gradientOpacityEnabled
diff --git a/src/components/EmptyStateComponent/types.ts b/src/components/EmptyStateComponent/types.ts
index 80fac980864f..7f3b375f9f75 100644
--- a/src/components/EmptyStateComponent/types.ts
+++ b/src/components/EmptyStateComponent/types.ts
@@ -16,6 +16,7 @@ type SharedProps<T> = {
     subtitle: string;
     buttonText?: string;
     buttonAction?: () => void;
+    containerStyles?: StyleProp<ViewStyle>;
     headerStyles?: StyleProp<ViewStyle>;
     headerMediaType: T;
     headerContentStyles?: StyleProp<ViewStyle & ImageStyle>;
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsFeedAddedEmptyPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsFeedAddedEmptyPage.tsx
index b6b2daebc5dc..46b45e80fa58 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsFeedAddedEmptyPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsFeedAddedEmptyPage.tsx
@@ -16,6 +16,7 @@ function WorkspaceCompanyCardsFeedAddedEmptyPage() {
             SkeletonComponent={TableListItemSkeleton}
             headerMediaType={CONST.EMPTY_STATE_MEDIA.ILLUSTRATION}
             headerMedia={Illustrations.CompanyCardsEmptyState}
+            containerStyles={styles.mt4}
             headerStyles={[styles.emptyStateCardIllustrationContainer, styles.justifyContentStart, {backgroundColor: colors.blue700}]}
             headerContentStyles={styles.emptyStateCardIllustration}
             title={translate('workspace.moreFeatures.companyCards.emptyAddedFeedTitle')}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
index 8f91397443cd..dadd1cc0e344 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
@@ -12,21 +12,15 @@ import * as CardUtils from '@libs/CardUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Card, WorkspaceCardsList} from '@src/types/onyx';
-import WorkspaceCompanyCardsListHeaderButtons from './WorkspaceCompanyCardsListHeaderButtons';
+import WorkspaceCompanyCardsFeedAddedEmptyPage from './WorkspaceCompanyCardsFeedAddedEmptyPage';
 import WorkspaceCompanyCardsListRow from './WorkspaceCompanyCardsListRow';
 
 type WorkspaceCompanyCardsListProps = {
-    /** The current policyID */
-    policyID: string;
-
     /** List of company cards */
     cardsList: OnyxEntry<WorkspaceCardsList>;
-
-    /** Currently selected feed */
-    selectedFeed: string;
 };
 
-function WorkspaceCompanyCardsList({policyID, cardsList, selectedFeed}: WorkspaceCompanyCardsListProps) {
+function WorkspaceCompanyCardsList({cardsList}: WorkspaceCompanyCardsListProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
@@ -79,20 +73,18 @@ function WorkspaceCompanyCardsList({policyID, cardsList, selectedFeed}: Workspac
         [styles, translate],
     );
 
+    if (sortedCards.length === 0) {
+        return <WorkspaceCompanyCardsFeedAddedEmptyPage />;
+    }
+
     return (
-        <View style={styles.flex1}>
-            <WorkspaceCompanyCardsListHeaderButtons
-                policyID={policyID}
-                selectedFeed={selectedFeed}
-            />
-            <FlatList
-                contentContainerStyle={styles.flexGrow1}
-                data={sortedCards}
-                renderItem={renderItem}
-                ListHeaderComponent={renderListHeader}
-                stickyHeaderIndices={[0]}
-            />
-        </View>
+        <FlatList
+            contentContainerStyle={styles.flexGrow1}
+            data={sortedCards}
+            renderItem={renderItem}
+            ListHeaderComponent={renderListHeader}
+            stickyHeaderIndices={[0]}
+        />
     );
 }
 
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
index aac16682f6e3..721b363d2654 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
@@ -69,8 +69,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
                 />
                 <Button
                     medium
-                    // TODO: navigate to Settings screen when it's implemented
-                    onPress={() => {}}
+                    onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_SETTINGS.getRoute(policyID))}
                     icon={Expensicons.Gear}
                     text={translate('common.settings')}
                     style={shouldUseNarrowLayout && styles.flex1}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index 201f64e7681c..123a78aa4fe9 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -1,75 +1,129 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
-import {View} from 'react-native';
-// import Onyx from 'react-native-onyx';
-import Button from '@components/Button';
-import * as Expensicons from '@components/Icon/Expensicons';
+import {useOnyx} from 'react-native-onyx';
 import * as Illustrations from '@components/Icon/Illustrations';
 import useLocalize from '@hooks/useLocalize';
-// import usePolicy from '@hooks/usePolicy';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useThemeStyles from '@hooks/useThemeStyles';
 import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
-import Navigation from '@navigation/Navigation';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
-// import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
+import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
+import type {CardFeeds, WorkspaceCardsList} from '@src/types/onyx';
 import WorkspaceCompanyCardPageEmptyState from './WorkspaceCompanyCardPageEmptyState';
-import WorkspaceCompanyCardsFeedAddedEmptyPage from './WorkspaceCompanyCardsFeedAddedEmptyPage';
+import WorkspaceCompanyCardsList from './WorkspaceCompanyCardsList';
+import WorkspaceCompanyCardsListHeaderButtons from './WorkspaceCompanyCardsListHeaderButtons';
+
+const mockedFeeds: CardFeeds = {
+    companyCards: {
+        cdfbmo: {
+            pending: false,
+            asrEnabled: true,
+            forceReimbursable: 'force_no',
+            liabilityType: 'corporate',
+            preferredPolicy: '',
+            reportTitleFormat: '{report:card}{report:bank}{report:submit:from}{report:total}{report:enddate:MMMM}',
+            statementPeriodEndDay: 'LAST_DAY_OF_MONTH',
+        },
+    },
+    companyCardNicknames: {
+        cdfbmo: 'BMO MasterCard',
+    },
+};
+
+const mockedCards = {
+    id1: {
+        accountID: 885646,
+        nameValuePairs: {
+            cardTitle: 'Test 1',
+        },
+        cardNumber: '1234 56XX XXXX 1222',
+    },
+    id2: {
+        accountID: 885646,
+        nameValuePairs: {
+            cardTitle: 'Test 2',
+        },
+        cardNumber: '1234 56XX XXXX 1222',
+    },
+    id18: {
+        accountID: 885646,
+        nameValuePairs: {
+            cardTitle: 'Test 1',
+        },
+        cardNumber: '1234 56XX XXXX 1222',
+    },
+    id27: {
+        accountID: 885646,
+        nameValuePairs: {
+            cardTitle: 'Test 2',
+        },
+        cardNumber: '1234 56XX XXXX 1222',
+    },
+    id16: {
+        accountID: 885646,
+        nameValuePairs: {
+            cardTitle: 'Test 1',
+        },
+        cardNumber: '1234 56XX XXXX 1222',
+    },
+    id25: {
+        accountID: 885646,
+        nameValuePairs: {
+            cardTitle: 'Test 2',
+        },
+        cardNumber: '1234 56XX XXXX 1222',
+    },
+    id14: {
+        accountID: 885646,
+        nameValuePairs: {
+            cardTitle: 'Test 1',
+        },
+        cardNumber: '1234 56XX XXXX 1222',
+    },
+    id23: {
+        accountID: 885646,
+        nameValuePairs: {
+            cardTitle: 'Test 2',
+        },
+        cardNumber: '1234 56XX XXXX 1222',
+    },
+    id12: {
+        accountID: 885646,
+        nameValuePairs: {
+            cardTitle: 'Test 1',
+        },
+        cardNumber: '1234 56XX XXXX 1222',
+    },
+    id21: {
+        accountID: 885646,
+        nameValuePairs: {
+            cardTitle: 'Test 2',
+        },
+        cardNumber: '1234 56XX XXXX 1222',
+    },
+} as unknown as WorkspaceCardsList;
 
 type WorkspaceCompanyCardPageProps = StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARDS>;
 
 function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const policyID = route.params.policyID;
-    // const policy = usePolicy(policyID);
-    // const workspaceAccountID = policy?.workspaceAccountID ?? -1;
+    // const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
 
-    // useEffect(() => {
-    //     Onyx.set(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`, {
-    //         companyCards: {
-    //             cdfbmo: {
-    //                 pending: false,
-    //                 asrEnabled: true,
-    //                 forceReimbursable: 'force_no',
-    //                 liabilityType: 'corporate',
-    //                 preferredPolicy: '',
-    //                 reportTitleFormat: '{report:card}{report:bank}{report:submit:from}{report:total}{report:enddate:MMMM}',
-    //                 statementPeriodEndDay: 'LAST_DAY_OF_MONTH',
-    //             },
-    //         },
-    //         companyCardNicknames: {
-    //             cdfbmo: 'BMO MasterCard',
-    //         },
-    //     });
-    // }, [workspaceAccountID]);
+    // TODO: use data form onyx instead of mocked one when API is implemented
+    // const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
+    const cardFeeds = mockedFeeds;
+    const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
+    const defaultFeed = Object.keys(cardFeeds?.companyCards ?? {})[0];
+    const selectedFeed = lastSelectedFeed ?? defaultFeed;
+
+    // TODO: use data form onyx instead of mocked one when API is implemented
+    // const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${selectedFeed}`);
+    const cardsList = mockedCards ?? {};
 
-    const getHeaderButtons = () => (
-        <View style={[styles.w100, styles.flexRow, styles.gap2, shouldUseNarrowLayout && styles.mb3]}>
-            <Button
-                medium
-                success
-                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID))}
-                icon={Expensicons.Plus}
-                text={translate('workspace.moreFeatures.companyCards.assignCard')}
-                style={shouldUseNarrowLayout && styles.flex1}
-            />
-            <Button
-                medium
-                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_SETTINGS.getRoute(policyID))}
-                icon={Expensicons.Gear}
-                text={translate('common.settings')}
-                style={shouldUseNarrowLayout && styles.flex1}
-            />
-        </View>
-    );
     // TODO correct Onyx flag should be defined in separate PR for "Pending State with No Other Feeds"
-    const isFeedAdded = false;
+    const isFeedAdded = true;
 
     return (
         <AccessOrNotFoundWrapper
@@ -83,11 +137,17 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
                 route={route}
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_COMPANY_CARDS}
                 shouldShowOfflineIndicatorInWideScreen
-                headerContent={!shouldUseNarrowLayout && getHeaderButtons()}
+                includeSafeAreaPaddingBottom
+                showLoadingAsFirstRender={false}
             >
+                {isFeedAdded && (
+                    <WorkspaceCompanyCardsListHeaderButtons
+                        policyID={policyID}
+                        selectedFeed={selectedFeed}
+                    />
+                )}
                 {!isFeedAdded && <WorkspaceCompanyCardPageEmptyState route={route} />}
-                {isFeedAdded && <WorkspaceCompanyCardsFeedAddedEmptyPage />}
-                {shouldUseNarrowLayout && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
+                {isFeedAdded && <WorkspaceCompanyCardsList cardsList={cardsList} />}
             </WorkspacePageWithSections>
         </AccessOrNotFoundWrapper>
     );

From 13f7b48f3791d36fb74db221d150c3585d74ad2d Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 2 Sep 2024 11:39:48 +0200
Subject: [PATCH 10/10] Fix navigation

---
 .../companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
index c745774d364d..b1876c17efd5 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
@@ -75,7 +75,7 @@ function WorkspaceCompanyCardFeedSelectorPage({route}: WorkspaceCompanyCardFeedS
         ),
     }));
 
-    const goBack = () => Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID));
+    const goBack = () => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID));
 
     const selectFeed = (feed: CardFeedListItem) => {
         Card.updateSelectedFeed(feed.value, policyID);