From 5cc68ab5a77680d559b1070d629b4d077c0d0874 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Mon, 20 Jan 2025 12:16:40 +0100
Subject: [PATCH 01/19] feat: add settlement date info

---
 src/languages/en.ts                                   |  2 ++
 src/languages/es.ts                                   |  2 ++
 src/languages/params.ts                               |  5 +++++
 .../expensifyCard/WorkspaceCardListHeader.tsx         | 11 +++++++----
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index f1c53a6b91a19..f0a5ca4172f86 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -141,6 +141,7 @@ import type {
     SetTheRequestParams,
     SettledAfterAddedBankAccountParams,
     SettleExpensifyCardParams,
+    SettlementDateParams,
     ShareParams,
     SignUpNewFaceCodeParams,
     SizeExceededParams,
@@ -3456,6 +3457,7 @@ const translations = {
             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.',
+            balanceWillBeSettledOn: ({settlementDate}: SettlementDateParams) => `Balance will be settled on ${settlementDate}`,
             cardLimit: 'Card limit',
             remainingLimit: 'Remaining limit',
             requestLimitIncrease: 'Request limit increase',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 6b70e4876753f..cccd85c70438f 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -140,6 +140,7 @@ import type {
     SetTheRequestParams,
     SettledAfterAddedBankAccountParams,
     SettleExpensifyCardParams,
+    SettlementDateParams,
     ShareParams,
     SignUpNewFaceCodeParams,
     SizeExceededParams,
@@ -3497,6 +3498,7 @@ const translations = {
             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.',
+            balanceWillBeSettledOn: ({settlementDate}: SettlementDateParams) => `El saldo se liquidará el ${settlementDate}.`,
             cardLimit: 'Límite de la tarjeta',
             remainingLimit: 'Límite restante',
             requestLimitIncrease: 'Solicitar aumento de límite',
diff --git a/src/languages/params.ts b/src/languages/params.ts
index f9ca26a3575a6..d40e27d7dec0c 100644
--- a/src/languages/params.ts
+++ b/src/languages/params.ts
@@ -594,6 +594,10 @@ type FlightLayoverParams = {
     layover: string;
 };
 
+type SettlementDateParams = {
+    settlementDate: string;
+};
+
 export type {
     AuthenticationErrorParams,
     ImportMembersSuccessfullDescriptionParams,
@@ -804,4 +808,5 @@ export type {
     ChatWithAccountManagerParams,
     EditDestinationSubtitleParams,
     FlightLayoverParams,
+    SettlementDateParams,
 };
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
index e9aac5685dc1b..325f934284004 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
@@ -30,10 +30,13 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
         <View style={styles.appBG}>
             <View style={[isLessThanMediumScreen ? styles.flexColumn : styles.flexRow, isLessThanMediumScreen ? [styles.mt5, styles.mb3] : styles.mv5, styles.mh5, styles.ph4]}>
                 <View style={[styles.flexRow, styles.flex1, isLessThanMediumScreen && styles.mb5]}>
-                    <WorkspaceCardsListLabel
-                        type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE}
-                        value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE] ?? 0}
-                    />
+                    <View style={styles.flex1}>
+                        <WorkspaceCardsListLabel
+                            type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE}
+                            value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE] ?? 0}
+                        />
+                        <Text style={[styles.mutedNormalTextLabel, styles.mt1]}>{translate('workspace.expensifyCard.balanceWillBeSettledOn', {settlementDate: 'date'})}</Text>
+                    </View>
                     <WorkspaceCardsListLabel
                         type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.REMAINING_LIMIT}
                         value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.REMAINING_LIMIT] ?? 0}

From f39f0732b1f66dbc0958e57ea1752d7303ed2a06 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Mon, 20 Jan 2025 16:03:26 +0100
Subject: [PATCH 02/19] feat: add translations and settle balance button

---
 src/languages/en.ts                            |  1 +
 src/languages/es.ts                            |  1 +
 .../expensifyCard/WorkspaceCardListHeader.tsx  | 18 ++++++++++++++----
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index f0a5ca4172f86..a68a2102b3fb0 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -3458,6 +3458,7 @@ const translations = {
             currentBalance: 'Current balance',
             currentBalanceDescription: 'Current balance is the sum of all posted Expensify Card transactions that have occurred since the last settlement date.',
             balanceWillBeSettledOn: ({settlementDate}: SettlementDateParams) => `Balance will be settled on ${settlementDate}`,
+            settleBalance: 'Settle balance',
             cardLimit: 'Card limit',
             remainingLimit: 'Remaining limit',
             requestLimitIncrease: 'Request limit increase',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index cccd85c70438f..4dc6d22df0b23 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -3499,6 +3499,7 @@ const translations = {
             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.',
             balanceWillBeSettledOn: ({settlementDate}: SettlementDateParams) => `El saldo se liquidará el ${settlementDate}.`,
+            settleBalance: 'Liquidar saldo',
             cardLimit: 'Límite de la tarjeta',
             remainingLimit: 'Límite restante',
             requestLimitIncrease: 'Solicitar aumento de límite',
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
index 325f934284004..9bb711699d2a2 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import Button from '@components/Button';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -31,10 +32,19 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
             <View style={[isLessThanMediumScreen ? styles.flexColumn : styles.flexRow, isLessThanMediumScreen ? [styles.mt5, styles.mb3] : styles.mv5, styles.mh5, styles.ph4]}>
                 <View style={[styles.flexRow, styles.flex1, isLessThanMediumScreen && styles.mb5]}>
                     <View style={styles.flex1}>
-                        <WorkspaceCardsListLabel
-                            type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE}
-                            value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE] ?? 0}
-                        />
+                        <View style={[styles.flex1, styles.flexRow]}>
+                            <WorkspaceCardsListLabel
+                                type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE}
+                                value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE] ?? 0}
+                            />
+                            <View style={[]}>
+                                <Button
+                                    onPress={() => {}}
+                                    text={translate('workspace.expensifyCard.settleBalance')}
+                                    style={[styles.mtAuto]}
+                                />
+                            </View>
+                        </View>
                         <Text style={[styles.mutedNormalTextLabel, styles.mt1]}>{translate('workspace.expensifyCard.balanceWillBeSettledOn', {settlementDate: 'date'})}</Text>
                     </View>
                     <WorkspaceCardsListLabel

From da5d7b052a549c10607b72ce5db8c097ff32f5bb Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Tue, 21 Jan 2025 13:10:25 +0100
Subject: [PATCH 03/19] fix: move the button to the card list label component

---
 .../expensifyCard/WorkspaceCardListHeader.tsx | 18 ++-----
 .../expensifyCard/WorkspaceCardsListLabel.tsx | 52 ++++++++++++-------
 2 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
index 9bb711699d2a2..325f934284004 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import Button from '@components/Button';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -32,19 +31,10 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
             <View style={[isLessThanMediumScreen ? styles.flexColumn : styles.flexRow, isLessThanMediumScreen ? [styles.mt5, styles.mb3] : styles.mv5, styles.mh5, styles.ph4]}>
                 <View style={[styles.flexRow, styles.flex1, isLessThanMediumScreen && styles.mb5]}>
                     <View style={styles.flex1}>
-                        <View style={[styles.flex1, styles.flexRow]}>
-                            <WorkspaceCardsListLabel
-                                type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE}
-                                value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE] ?? 0}
-                            />
-                            <View style={[]}>
-                                <Button
-                                    onPress={() => {}}
-                                    text={translate('workspace.expensifyCard.settleBalance')}
-                                    style={[styles.mtAuto]}
-                                />
-                            </View>
-                        </View>
+                        <WorkspaceCardsListLabel
+                            type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE}
+                            value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE] ?? 0}
+                        />
                         <Text style={[styles.mutedNormalTextLabel, styles.mt1]}>{translate('workspace.expensifyCard.balanceWillBeSettledOn', {settlementDate: 'date'})}</Text>
                     </View>
                     <WorkspaceCardsListLabel
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
index a1ca4ce22e10c..06e1a76d7a315 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
@@ -87,27 +87,39 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
 
     return (
         <View style={styles.flex1}>
-            <View
-                ref={anchorRef}
-                style={[styles.flexRow, styles.alignItemsCenter, styles.mb1, style]}
-            >
-                <Text style={[styles.mutedNormalTextLabel, styles.mr1]}>{translate(`workspace.expensifyCard.${type}`)}</Text>
-                <PressableWithFeedback
-                    accessibilityLabel={translate(`workspace.expensifyCard.${type}`)}
-                    accessibilityRole={CONST.ROLE.BUTTON}
-                    onPress={() => setVisible(true)}
-                >
-                    <Icon
-                        src={Expensicons.Info}
-                        width={variables.iconSizeExtraSmall}
-                        height={variables.iconSizeExtraSmall}
-                        fill={theme.icon}
-                    />
-                </PressableWithFeedback>
+            <View style={[styles.flex1, styles.flexRow]}>
+                <View style={[styles.flexShrink0, styles.mr2]}>
+                    <View
+                        ref={anchorRef}
+                        style={[styles.flexRow, styles.alignItemsCenter, styles.mb1, style]}
+                    >
+                        <Text style={[styles.mutedNormalTextLabel, styles.mr1]}>{translate(`workspace.expensifyCard.${type}`)}</Text>
+                        <PressableWithFeedback
+                            accessibilityLabel={translate(`workspace.expensifyCard.${type}`)}
+                            accessibilityRole={CONST.ROLE.BUTTON}
+                            onPress={() => setVisible(true)}
+                        >
+                            <Icon
+                                src={Expensicons.Info}
+                                width={variables.iconSizeExtraSmall}
+                                height={variables.iconSizeExtraSmall}
+                                fill={theme.icon}
+                            />
+                        </PressableWithFeedback>
+                    </View>
+                    <Text style={styles.shortTermsHeadline}>{CurrencyUtils.convertToDisplayString(value, policyCurrency)}</Text>
+                </View>
+                {type === CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE && (
+                    <View style={[styles.flex2, styles.alignItemsStart, styles.justifyContentEnd]}>
+                        <Button
+                            onPress={() => {}}
+                            text={translate('workspace.expensifyCard.settleBalance')}
+                            innerStyles={[styles.buttonSmall]}
+                            textStyles={[styles.buttonSmallText]}
+                        />
+                    </View>
+                )}
             </View>
-
-            <Text style={styles.shortTermsHeadline}>{CurrencyUtils.convertToDisplayString(value, policyCurrency)}</Text>
-
             <Popover
                 onClose={() => setVisible(false)}
                 isVisible={isVisible}

From 0302a2cd3c4ce66b0b5609b6ad8bbaa0442750dd Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Tue, 21 Jan 2025 15:37:55 +0100
Subject: [PATCH 04/19] fix: button styles for mobile

---
 .../expensifyCard/WorkspaceCardListHeader.tsx  |  2 +-
 .../expensifyCard/WorkspaceCardsListLabel.tsx  | 18 ++++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
index 325f934284004..5f03763ad20da 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
@@ -29,7 +29,7 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
     return (
         <View style={styles.appBG}>
             <View style={[isLessThanMediumScreen ? styles.flexColumn : styles.flexRow, isLessThanMediumScreen ? [styles.mt5, styles.mb3] : styles.mv5, styles.mh5, styles.ph4]}>
-                <View style={[styles.flexRow, styles.flex1, isLessThanMediumScreen && styles.mb5]}>
+                <View style={[styles.flexRow, !isLessThanMediumScreen && styles.flex1, isLessThanMediumScreen && styles.mb5]}>
                     <View style={styles.flex1}>
                         <WorkspaceCardsListLabel
                             type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE}
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
index 06e1a76d7a315..076be98c52aca 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
@@ -44,7 +44,7 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
     const policy = usePolicy(route.params.policyID);
     const styles = useThemeStyles();
     const {windowWidth} = useWindowDimensions();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {shouldUseNarrowLayout, isMediumScreenWidth, isSmallScreenWidth} = useResponsiveLayout();
     const theme = useTheme();
     const {translate} = useLocalize();
     const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
@@ -53,10 +53,13 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
     const anchorRef = useRef(null);
 
     const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(route.params.policyID);
+
     const policyCurrency = useMemo(() => policy?.outputCurrency ?? CONST.CURRENCY.USD, [policy]);
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${workspaceAccountID}`);
     const paymentBankAccountID = cardSettings?.paymentBankAccountID;
 
+    const isLessThanMediumScreen = isMediumScreenWidth || isSmallScreenWidth;
+
     const isConnectedWithPlaid = useMemo(() => {
         const bankAccountData = bankAccountList?.[paymentBankAccountID ?? 0]?.accountData;
 
@@ -85,10 +88,13 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
         Report.navigateToConciergeChat();
     };
 
+    // TODO: add a proper condition to display the settle balance button
+    const isSettleBalanceButtonDisplayed = type === CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE;
+
     return (
-        <View style={styles.flex1}>
-            <View style={[styles.flex1, styles.flexRow]}>
-                <View style={[styles.flexShrink0, styles.mr2]}>
+        <View style={[styles.flex1]}>
+            <View style={[styles.flexGrow1, styles.flexWrap, !isLessThanMediumScreen && styles.flexRow]}>
+                <View style={[isLessThanMediumScreen ? styles.flex1 : styles.flexShrink0, isSettleBalanceButtonDisplayed && styles.mr2]}>
                     <View
                         ref={anchorRef}
                         style={[styles.flexRow, styles.alignItemsCenter, styles.mb1, style]}
@@ -109,8 +115,8 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
                     </View>
                     <Text style={styles.shortTermsHeadline}>{CurrencyUtils.convertToDisplayString(value, policyCurrency)}</Text>
                 </View>
-                {type === CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE && (
-                    <View style={[styles.flex2, styles.alignItemsStart, styles.justifyContentEnd]}>
+                {isSettleBalanceButtonDisplayed && (
+                    <View style={[styles.flexBasisAuto, styles.alignItemsStart, styles.justifyContentEnd, styles.mt2, styles.mr2]}>
                         <Button
                             onPress={() => {}}
                             text={translate('workspace.expensifyCard.settleBalance')}

From a78be2db2ab00421344ab8cde1edb38c92ea5e95 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Tue, 21 Jan 2025 16:35:44 +0100
Subject: [PATCH 05/19] feat: add new onyx key, move the text inside the label

---
 src/ONYXKEYS.ts                                       |  4 ++++
 .../expensifyCard/WorkspaceCardListHeader.tsx         | 11 ++++-------
 .../expensifyCard/WorkspaceCardsListLabel.tsx         |  7 ++++++-
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 6b26ecd737003..4b409b96e1e1a 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -539,6 +539,9 @@ const ONYXKEYS = {
         /** Expensify cards settings */
         PRIVATE_EXPENSIFY_CARD_SETTINGS: 'private_expensifyCardSettings_',
 
+        /** Expensify cards manual billing setting */
+        PRIVATE_EXPENSIFY_CARD_MANUAL_BILLING: 'private_expensifyCardManualBilling_',
+
         /** Stores which connection is set up to use Continuous Reconciliation */
         EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION: 'expensifyCard_continuousReconciliationConnection_',
 
@@ -880,6 +883,7 @@ type OnyxCollectionValuesMapping = {
     [ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END]: OnyxTypes.BillingGraceEndPeriod;
     [ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER]: OnyxTypes.CardFeeds;
     [ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS]: OnyxTypes.ExpensifyCardSettings;
+    [ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_MANUAL_BILLING]: boolean;
     [ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST]: OnyxTypes.WorkspaceCardsList;
     [ONYXKEYS.COLLECTION.EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION]: OnyxTypes.PolicyConnectionName;
     [ONYXKEYS.COLLECTION.EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION]: boolean;
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
index 5f03763ad20da..2fdec452a6976 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
@@ -30,13 +30,10 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
         <View style={styles.appBG}>
             <View style={[isLessThanMediumScreen ? styles.flexColumn : styles.flexRow, isLessThanMediumScreen ? [styles.mt5, styles.mb3] : styles.mv5, styles.mh5, styles.ph4]}>
                 <View style={[styles.flexRow, !isLessThanMediumScreen && styles.flex1, isLessThanMediumScreen && styles.mb5]}>
-                    <View style={styles.flex1}>
-                        <WorkspaceCardsListLabel
-                            type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE}
-                            value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE] ?? 0}
-                        />
-                        <Text style={[styles.mutedNormalTextLabel, styles.mt1]}>{translate('workspace.expensifyCard.balanceWillBeSettledOn', {settlementDate: 'date'})}</Text>
-                    </View>
+                    <WorkspaceCardsListLabel
+                        type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE}
+                        value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE] ?? 0}
+                    />
                     <WorkspaceCardsListLabel
                         type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.REMAINING_LIMIT}
                         value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.REMAINING_LIMIT] ?? 0}
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
index 076be98c52aca..841d697fee9f1 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
@@ -56,6 +56,7 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
 
     const policyCurrency = useMemo(() => policy?.outputCurrency ?? CONST.CURRENCY.USD, [policy]);
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${workspaceAccountID}`);
+    const [cardManualBilling] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_MANUAL_BILLING}${workspaceAccountID}`);
     const paymentBankAccountID = cardSettings?.paymentBankAccountID;
 
     const isLessThanMediumScreen = isMediumScreenWidth || isSmallScreenWidth;
@@ -89,7 +90,8 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
     };
 
     // TODO: add a proper condition to display the settle balance button
-    const isSettleBalanceButtonDisplayed = type === CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE;
+    const isSettleBalanceButtonDisplayed = !!cardManualBilling && type === CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE;
+    const isSettleDateTextDisplayed = !!cardManualBilling && type === CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE;
 
     return (
         <View style={[styles.flex1]}>
@@ -126,6 +128,9 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
                     </View>
                 )}
             </View>
+            {isSettleDateTextDisplayed && (
+                <Text style={[styles.mutedNormalTextLabel, styles.mt1]}>{translate('workspace.expensifyCard.balanceWillBeSettledOn', {settlementDate: 'date'})}</Text>
+            )}
             <Popover
                 onClose={() => setVisible(false)}
                 isVisible={isVisible}

From 10da849809ec4101e597c37032c2466381c1754b Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Tue, 21 Jan 2025 16:59:58 +0100
Subject: [PATCH 06/19] fix:fix the conditions to display the button and the
 text

---
 .../workspace/expensifyCard/WorkspaceCardsListLabel.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
index 841d697fee9f1..4323516e3529d 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
@@ -89,9 +89,9 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
         Report.navigateToConciergeChat();
     };
 
-    // TODO: add a proper condition to display the settle balance button
-    const isSettleBalanceButtonDisplayed = !!cardManualBilling && type === CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE;
-    const isSettleDateTextDisplayed = !!cardManualBilling && type === CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE;
+    const isCurrentBalanceType = type === CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE;
+    const isSettleBalanceButtonDisplayed = !!cardSettings?.isMonthlySettlementAllowed && !cardManualBilling && isCurrentBalanceType;
+    const isSettleDateTextDisplayed = !!cardManualBilling && isCurrentBalanceType;
 
     return (
         <View style={[styles.flex1]}>

From cd72c63c472ea00b712a6d5640a76b588b6d7b91 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 22 Jan 2025 13:10:02 +0100
Subject: [PATCH 07/19] fix: apply the proper design for smaller screens

---
 .../expensifyCard/WorkspaceCardListHeader.tsx  | 18 +++++++++---------
 .../expensifyCard/WorkspaceCardsListLabel.tsx  |  4 ++--
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
index 2fdec452a6976..f616cf33c84e4 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
@@ -29,20 +29,20 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
     return (
         <View style={styles.appBG}>
             <View style={[isLessThanMediumScreen ? styles.flexColumn : styles.flexRow, isLessThanMediumScreen ? [styles.mt5, styles.mb3] : styles.mv5, styles.mh5, styles.ph4]}>
-                <View style={[styles.flexRow, !isLessThanMediumScreen && styles.flex1, isLessThanMediumScreen && styles.mb5]}>
-                    <WorkspaceCardsListLabel
-                        type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE}
-                        value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE] ?? 0}
-                    />
+                <WorkspaceCardsListLabel
+                    type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE}
+                    value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE] ?? 0}
+                />
+                <View style={[styles.flexRow, !isLessThanMediumScreen && styles.flex2, isLessThanMediumScreen && styles.mt5]}>
                     <WorkspaceCardsListLabel
                         type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.REMAINING_LIMIT}
                         value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.REMAINING_LIMIT] ?? 0}
                     />
+                    <WorkspaceCardsListLabel
+                        type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CASH_BACK}
+                        value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CASH_BACK] ?? 0}
+                    />
                 </View>
-                <WorkspaceCardsListLabel
-                    type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CASH_BACK}
-                    value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CASH_BACK] ?? 0}
-                />
             </View>
 
             <View style={[styles.flexRow, styles.mh5, styles.gap2, styles.p4]}>
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
index 4323516e3529d..5d573bbd4126e 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
@@ -95,8 +95,8 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
 
     return (
         <View style={[styles.flex1]}>
-            <View style={[styles.flexGrow1, styles.flexWrap, !isLessThanMediumScreen && styles.flexRow]}>
-                <View style={[isLessThanMediumScreen ? styles.flex1 : styles.flexShrink0, isSettleBalanceButtonDisplayed && styles.mr2]}>
+            <View style={[styles.flex1, styles.flexRow, styles.flexWrap]}>
+                <View style={[styles.flexShrink0, isSettleBalanceButtonDisplayed && styles.mr2]}>
                     <View
                         ref={anchorRef}
                         style={[styles.flexRow, styles.alignItemsCenter, styles.mb1, style]}

From 45530351817937db3946ed8420149794e54b00df Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 22 Jan 2025 13:19:07 +0100
Subject: [PATCH 08/19] feat: add a new write command

---
 .../API/parameters/QueueExpensifyCardForBillingParams.ts    | 6 ++++++
 src/libs/API/parameters/index.ts                            | 1 +
 src/libs/API/types.ts                                       | 2 ++
 3 files changed, 9 insertions(+)
 create mode 100644 src/libs/API/parameters/QueueExpensifyCardForBillingParams.ts

diff --git a/src/libs/API/parameters/QueueExpensifyCardForBillingParams.ts b/src/libs/API/parameters/QueueExpensifyCardForBillingParams.ts
new file mode 100644
index 0000000000000..80326a7837c9e
--- /dev/null
+++ b/src/libs/API/parameters/QueueExpensifyCardForBillingParams.ts
@@ -0,0 +1,6 @@
+type QueueExpensifyCardForBillingParams = {
+    feedCountry: string;
+    domainAccountID: number;
+};
+
+export default QueueExpensifyCardForBillingParams;
diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts
index 4d02027b720a7..4fa4a76d38bef 100644
--- a/src/libs/API/parameters/index.ts
+++ b/src/libs/API/parameters/index.ts
@@ -363,3 +363,4 @@ export type {default as DismissProductTrainingParams} from './DismissProductTrai
 export type {default as OpenWorkspacePlanPageParams} from './OpenWorkspacePlanPage';
 export type {default as ResetSMSDeliveryFailureStatusParams} from './ResetSMSDeliveryFailureStatusParams';
 export type {default as CreatePerDiemRequestParams} from './CreatePerDiemRequestParams';
+export type {default as QueueExpensifyCardForBillingParams} from './QueueExpensifyCardForBillingParams';
diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts
index 72251fd817dc8..c5baf6510f2f1 100644
--- a/src/libs/API/types.ts
+++ b/src/libs/API/types.ts
@@ -406,6 +406,7 @@ const WRITE_COMMANDS = {
     CONFIGURE_EXPENSIFY_CARDS_FOR_POLICY: 'ConfigureExpensifyCardsForPolicy',
     CREATE_EXPENSIFY_CARD: 'CreateExpensifyCard',
     CREATE_ADMIN_ISSUED_VIRTUAL_CARD: 'CreateAdminIssuedVirtualCard',
+    DOMAIN_QUEUE_EXPENSIFY_CARD_FOR_BILLING: ' Domain_QueueExpensifyCardForBilling',
     ADD_DELEGATE: 'AddDelegate',
     REMOVE_DELEGATE: 'RemoveDelegate',
     UPDATE_DELEGATE_ROLE: 'UpdateDelegateRole',
@@ -871,6 +872,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.CONFIGURE_EXPENSIFY_CARDS_FOR_POLICY]: Parameters.ConfigureExpensifyCardsForPolicyParams;
     [WRITE_COMMANDS.CREATE_EXPENSIFY_CARD]: Omit<Parameters.CreateExpensifyCardParams, 'domainAccountID'>;
     [WRITE_COMMANDS.CREATE_ADMIN_ISSUED_VIRTUAL_CARD]: Omit<Parameters.CreateExpensifyCardParams, 'feedCountry'>;
+    [WRITE_COMMANDS.DOMAIN_QUEUE_EXPENSIFY_CARD_FOR_BILLING]: Parameters.QueueExpensifyCardForBillingParams;
     [WRITE_COMMANDS.ADD_DELEGATE]: Parameters.AddDelegateParams;
     [WRITE_COMMANDS.UPDATE_DELEGATE_ROLE]: Parameters.UpdateDelegateRoleParams;
     [WRITE_COMMANDS.REMOVE_DELEGATE]: Parameters.RemoveDelegateParams;

From 7d41f4755df524237ab4a80abebd914183dd7a09 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 22 Jan 2025 13:25:29 +0100
Subject: [PATCH 09/19] feat: create queueExpensifyCardForBilling action

---
 src/libs/API/types.ts    |  4 ++--
 src/libs/actions/Card.ts | 10 ++++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts
index c5baf6510f2f1..eee2adcc2e094 100644
--- a/src/libs/API/types.ts
+++ b/src/libs/API/types.ts
@@ -406,7 +406,7 @@ const WRITE_COMMANDS = {
     CONFIGURE_EXPENSIFY_CARDS_FOR_POLICY: 'ConfigureExpensifyCardsForPolicy',
     CREATE_EXPENSIFY_CARD: 'CreateExpensifyCard',
     CREATE_ADMIN_ISSUED_VIRTUAL_CARD: 'CreateAdminIssuedVirtualCard',
-    DOMAIN_QUEUE_EXPENSIFY_CARD_FOR_BILLING: ' Domain_QueueExpensifyCardForBilling',
+    QUEUE_EXPENSIFY_CARD_FOR_BILLING: ' Domain_QueueExpensifyCardForBilling',
     ADD_DELEGATE: 'AddDelegate',
     REMOVE_DELEGATE: 'RemoveDelegate',
     UPDATE_DELEGATE_ROLE: 'UpdateDelegateRole',
@@ -872,7 +872,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.CONFIGURE_EXPENSIFY_CARDS_FOR_POLICY]: Parameters.ConfigureExpensifyCardsForPolicyParams;
     [WRITE_COMMANDS.CREATE_EXPENSIFY_CARD]: Omit<Parameters.CreateExpensifyCardParams, 'domainAccountID'>;
     [WRITE_COMMANDS.CREATE_ADMIN_ISSUED_VIRTUAL_CARD]: Omit<Parameters.CreateExpensifyCardParams, 'feedCountry'>;
-    [WRITE_COMMANDS.DOMAIN_QUEUE_EXPENSIFY_CARD_FOR_BILLING]: Parameters.QueueExpensifyCardForBillingParams;
+    [WRITE_COMMANDS.QUEUE_EXPENSIFY_CARD_FOR_BILLING]: Parameters.QueueExpensifyCardForBillingParams;
     [WRITE_COMMANDS.ADD_DELEGATE]: Parameters.AddDelegateParams;
     [WRITE_COMMANDS.UPDATE_DELEGATE_ROLE]: Parameters.UpdateDelegateRoleParams;
     [WRITE_COMMANDS.REMOVE_DELEGATE]: Parameters.RemoveDelegateParams;
diff --git a/src/libs/actions/Card.ts b/src/libs/actions/Card.ts
index 271da9b4eada1..4437f91f5a379 100644
--- a/src/libs/actions/Card.ts
+++ b/src/libs/actions/Card.ts
@@ -889,6 +889,15 @@ function updateSelectedFeed(feed: CompanyCardFeed, policyID: string | undefined)
     ]);
 }
 
+function queueExpensifyCardForBilling(feedCountry: string, domainAccountID: number) {
+    const parameters = {
+        feedCountry,
+        domainAccountID,
+    };
+
+    API.write(WRITE_COMMANDS.QUEUE_EXPENSIFY_CARD_FOR_BILLING, parameters);
+}
+
 export {
     requestReplacementExpensifyCard,
     activatePhysicalExpensifyCard,
@@ -911,5 +920,6 @@ export {
     updateSelectedFeed,
     deactivateCard,
     getCardDefaultName,
+    queueExpensifyCardForBilling,
 };
 export type {ReplacementReason};

From 0efa773211b0de52fe6ee18ec6a0efe72dea3be2 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 22 Jan 2025 13:34:02 +0100
Subject: [PATCH 10/19] fix: use the old design when button is not displayed

---
 .../expensifyCard/WorkspaceCardListHeader.tsx | 35 +++++++++++++++++--
 .../expensifyCard/WorkspaceCardsListLabel.tsx |  4 +--
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
index f616cf33c84e4..a0b7fd561ccc8 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
@@ -25,10 +25,13 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
     const isLessThanMediumScreen = isMediumScreenWidth || isSmallScreenWidth;
 
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${workspaceAccountID}`);
+    const [cardManualBilling] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_MANUAL_BILLING}${workspaceAccountID}`);
 
-    return (
-        <View style={styles.appBG}>
-            <View style={[isLessThanMediumScreen ? styles.flexColumn : styles.flexRow, isLessThanMediumScreen ? [styles.mt5, styles.mb3] : styles.mv5, styles.mh5, styles.ph4]}>
+    const isSettleBalanceButtonDisplayed = !!cardSettings?.isMonthlySettlementAllowed && !cardManualBilling;
+
+    const getLabelsLayout = () => {
+        return isSettleBalanceButtonDisplayed ? (
+            <>
                 <WorkspaceCardsListLabel
                     type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE}
                     value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE] ?? 0}
@@ -43,6 +46,32 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
                         value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CASH_BACK] ?? 0}
                     />
                 </View>
+                )
+            </>
+        ) : (
+            <>
+                <View style={[styles.flexRow, styles.flex1, isLessThanMediumScreen && styles.mb5]}>
+                    <WorkspaceCardsListLabel
+                        type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE}
+                        value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE] ?? 0}
+                    />
+                    <WorkspaceCardsListLabel
+                        type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.REMAINING_LIMIT}
+                        value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.REMAINING_LIMIT] ?? 0}
+                    />
+                </View>
+                <WorkspaceCardsListLabel
+                    type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CASH_BACK}
+                    value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CASH_BACK] ?? 0}
+                />
+            </>
+        );
+    };
+
+    return (
+        <View style={styles.appBG}>
+            <View style={[isLessThanMediumScreen ? styles.flexColumn : styles.flexRow, isLessThanMediumScreen ? [styles.mt5, styles.mb3] : styles.mv5, styles.mh5, styles.ph4]}>
+                {getLabelsLayout()}
             </View>
 
             <View style={[styles.flexRow, styles.mh5, styles.gap2, styles.p4]}>
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
index 5d573bbd4126e..064adf910f1da 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
@@ -44,7 +44,7 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
     const policy = usePolicy(route.params.policyID);
     const styles = useThemeStyles();
     const {windowWidth} = useWindowDimensions();
-    const {shouldUseNarrowLayout, isMediumScreenWidth, isSmallScreenWidth} = useResponsiveLayout();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const theme = useTheme();
     const {translate} = useLocalize();
     const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
@@ -59,8 +59,6 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
     const [cardManualBilling] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_MANUAL_BILLING}${workspaceAccountID}`);
     const paymentBankAccountID = cardSettings?.paymentBankAccountID;
 
-    const isLessThanMediumScreen = isMediumScreenWidth || isSmallScreenWidth;
-
     const isConnectedWithPlaid = useMemo(() => {
         const bankAccountData = bankAccountList?.[paymentBankAccountID ?? 0]?.accountData;
 

From 98a977048b1ecfadeda6426c6250979828cf6bef Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 22 Jan 2025 13:49:59 +0100
Subject: [PATCH 11/19] feat: assign the function to the button, fix a typo in
 the request name

---
 src/libs/API/types.ts                                      | 2 +-
 .../workspace/expensifyCard/WorkspaceCardsListLabel.tsx    | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts
index eee2adcc2e094..7b108a0657427 100644
--- a/src/libs/API/types.ts
+++ b/src/libs/API/types.ts
@@ -406,7 +406,7 @@ const WRITE_COMMANDS = {
     CONFIGURE_EXPENSIFY_CARDS_FOR_POLICY: 'ConfigureExpensifyCardsForPolicy',
     CREATE_EXPENSIFY_CARD: 'CreateExpensifyCard',
     CREATE_ADMIN_ISSUED_VIRTUAL_CARD: 'CreateAdminIssuedVirtualCard',
-    QUEUE_EXPENSIFY_CARD_FOR_BILLING: ' Domain_QueueExpensifyCardForBilling',
+    QUEUE_EXPENSIFY_CARD_FOR_BILLING: 'Domain_QueueExpensifyCardForBilling',
     ADD_DELEGATE: 'AddDelegate',
     REMOVE_DELEGATE: 'RemoveDelegate',
     UPDATE_DELEGATE_ROLE: 'UpdateDelegateRole',
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
index 064adf910f1da..ec3fe1e831c70 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
@@ -22,6 +22,7 @@ import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigat
 import * as PolicyUtils from '@libs/PolicyUtils';
 import type {FullScreenNavigatorParamList} from '@navigation/types';
 import variables from '@styles/variables';
+import * as Card from '@userActions/Card';
 import * as Policy from '@userActions/Policy/Policy';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
@@ -91,6 +92,10 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
     const isSettleBalanceButtonDisplayed = !!cardSettings?.isMonthlySettlementAllowed && !cardManualBilling && isCurrentBalanceType;
     const isSettleDateTextDisplayed = !!cardManualBilling && isCurrentBalanceType;
 
+    const queueExpensifyCardForBilling = () => {
+        Card.queueExpensifyCardForBilling(CONST.COUNTRY.US, workspaceAccountID);
+    };
+
     return (
         <View style={[styles.flex1]}>
             <View style={[styles.flex1, styles.flexRow, styles.flexWrap]}>
@@ -118,7 +123,7 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
                 {isSettleBalanceButtonDisplayed && (
                     <View style={[styles.flexBasisAuto, styles.alignItemsStart, styles.justifyContentEnd, styles.mt2, styles.mr2]}>
                         <Button
-                            onPress={() => {}}
+                            onPress={queueExpensifyCardForBilling}
                             text={translate('workspace.expensifyCard.settleBalance')}
                             innerStyles={[styles.buttonSmall]}
                             textStyles={[styles.buttonSmallText]}

From d00f24971ba31d755dc1b43b420e6bdd1e55ebfd Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 22 Jan 2025 14:27:38 +0100
Subject: [PATCH 12/19] feat: show the settlement date

---
 .../workspace/expensifyCard/WorkspaceCardListHeader.tsx    | 4 ++--
 .../workspace/expensifyCard/WorkspaceCardsListLabel.tsx    | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
index a0b7fd561ccc8..4cf7a87ee0c8c 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
@@ -27,10 +27,10 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${workspaceAccountID}`);
     const [cardManualBilling] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_MANUAL_BILLING}${workspaceAccountID}`);
 
-    const isSettleBalanceButtonDisplayed = !!cardSettings?.isMonthlySettlementAllowed && !cardManualBilling;
+    const shouldShowSettlementButtonOrDate = !!cardSettings?.isMonthlySettlementAllowed || cardManualBilling;
 
     const getLabelsLayout = () => {
-        return isSettleBalanceButtonDisplayed ? (
+        return shouldShowSettlementButtonOrDate ? (
             <>
                 <WorkspaceCardsListLabel
                     type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE}
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
index ec3fe1e831c70..be8e29be1daa0 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
@@ -1,4 +1,5 @@
 import {useRoute} from '@react-navigation/native';
+import {addDays, format} from 'date-fns';
 import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import type {StyleProp, ViewStyle} from 'react-native';
@@ -92,6 +93,8 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
     const isSettleBalanceButtonDisplayed = !!cardSettings?.isMonthlySettlementAllowed && !cardManualBilling && isCurrentBalanceType;
     const isSettleDateTextDisplayed = !!cardManualBilling && isCurrentBalanceType;
 
+    const settlementDate = isSettleDateTextDisplayed ? format(addDays(new Date(), 1), CONST.DATE.FNS_FORMAT_STRING) : '';
+
     const queueExpensifyCardForBilling = () => {
         Card.queueExpensifyCardForBilling(CONST.COUNTRY.US, workspaceAccountID);
     };
@@ -131,9 +134,7 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
                     </View>
                 )}
             </View>
-            {isSettleDateTextDisplayed && (
-                <Text style={[styles.mutedNormalTextLabel, styles.mt1]}>{translate('workspace.expensifyCard.balanceWillBeSettledOn', {settlementDate: 'date'})}</Text>
-            )}
+            {isSettleDateTextDisplayed && <Text style={[styles.mutedNormalTextLabel, styles.mt1]}>{translate('workspace.expensifyCard.balanceWillBeSettledOn', {settlementDate})}</Text>}
             <Popover
                 onClose={() => setVisible(false)}
                 isVisible={isVisible}

From d6c5e9843d680dd0093049f7515a9aeb0e80f54c Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Thu, 23 Jan 2025 17:08:45 +0100
Subject: [PATCH 13/19] fix: lint

---
 .../expensifyCard/WorkspaceCardListHeader.tsx |  4 ++--
 .../expensifyCard/WorkspaceCardsListLabel.tsx | 24 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
index 4cf7a87ee0c8c..f0e8f4b84978b 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
@@ -5,7 +5,7 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as PolicyUtils from '@libs/PolicyUtils';
+import {getWorkspaceAccountID} from '@libs/PolicyUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import WorkspaceCardsListLabel from './WorkspaceCardsListLabel';
@@ -21,7 +21,7 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
+    const workspaceAccountID = getWorkspaceAccountID(policyID);
     const isLessThanMediumScreen = isMediumScreenWidth || isSmallScreenWidth;
 
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${workspaceAccountID}`);
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
index be8e29be1daa0..6c5342f664e40 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
@@ -17,15 +17,15 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import * as CurrencyUtils from '@libs/CurrencyUtils';
+import {convertToDisplayString} from '@libs/CurrencyUtils';
 import getClickedTargetLocation from '@libs/getClickedTargetLocation';
 import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types';
-import * as PolicyUtils from '@libs/PolicyUtils';
+import {getWorkspaceAccountID} from '@libs/PolicyUtils';
 import type {FullScreenNavigatorParamList} from '@navigation/types';
 import variables from '@styles/variables';
-import * as Card from '@userActions/Card';
-import * as Policy from '@userActions/Policy/Policy';
-import * as Report from '@userActions/Report';
+import {queueExpensifyCardForBilling} from '@userActions/Card';
+import {requestExpensifyCardLimitIncrease} from '@userActions/Policy/Policy';
+import {navigateToConciergeChat} from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
@@ -54,7 +54,7 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
     const [anchorPosition, setAnchorPosition] = useState({top: 0, left: 0});
     const anchorRef = useRef(null);
 
-    const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(route.params.policyID);
+    const workspaceAccountID = getWorkspaceAccountID(route.params.policyID);
 
     const policyCurrency = useMemo(() => policy?.outputCurrency ?? CONST.CURRENCY.USD, [policy]);
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${workspaceAccountID}`);
@@ -84,9 +84,9 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
     }, [isVisible, windowWidth]);
 
     const requestLimitIncrease = () => {
-        Policy.requestExpensifyCardLimitIncrease(cardSettings?.paymentBankAccountID);
+        requestExpensifyCardLimitIncrease(cardSettings?.paymentBankAccountID);
         setVisible(false);
-        Report.navigateToConciergeChat();
+        navigateToConciergeChat();
     };
 
     const isCurrentBalanceType = type === CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE;
@@ -95,8 +95,8 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
 
     const settlementDate = isSettleDateTextDisplayed ? format(addDays(new Date(), 1), CONST.DATE.FNS_FORMAT_STRING) : '';
 
-    const queueExpensifyCardForBilling = () => {
-        Card.queueExpensifyCardForBilling(CONST.COUNTRY.US, workspaceAccountID);
+    const handleSettleBalanceButtonClick = () => {
+        queueExpensifyCardForBilling(CONST.COUNTRY.US, workspaceAccountID);
     };
 
     return (
@@ -121,12 +121,12 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
                             />
                         </PressableWithFeedback>
                     </View>
-                    <Text style={styles.shortTermsHeadline}>{CurrencyUtils.convertToDisplayString(value, policyCurrency)}</Text>
+                    <Text style={styles.shortTermsHeadline}>{convertToDisplayString(value, policyCurrency)}</Text>
                 </View>
                 {isSettleBalanceButtonDisplayed && (
                     <View style={[styles.flexBasisAuto, styles.alignItemsStart, styles.justifyContentEnd, styles.mt2, styles.mr2]}>
                         <Button
-                            onPress={queueExpensifyCardForBilling}
+                            onPress={handleSettleBalanceButtonClick}
                             text={translate('workspace.expensifyCard.settleBalance')}
                             innerStyles={[styles.buttonSmall]}
                             textStyles={[styles.buttonSmallText]}

From 82ecc467ba2351e72b198f8959aa4de83b6d39cd Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Thu, 23 Jan 2025 17:19:28 +0100
Subject: [PATCH 14/19] fix: lint once again

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

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
index 6c5342f664e40..e4e77a9921d57 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
@@ -62,7 +62,7 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
     const paymentBankAccountID = cardSettings?.paymentBankAccountID;
 
     const isConnectedWithPlaid = useMemo(() => {
-        const bankAccountData = bankAccountList?.[paymentBankAccountID ?? 0]?.accountData;
+        const bankAccountData = bankAccountList?.[paymentBankAccountID ?? CONST.DEFAULT_NUMBER_ID]?.accountData;
 
         // TODO: remove the extra check when plaidAccountID storing is aligned in https://github.com/Expensify/App/issues/47944
         // Right after adding a bank account plaidAccountID is stored inside the accountData and not in the additionalData

From 93f5130aae932df7791c3707fbf6f7f303063d57 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Fri, 24 Jan 2025 16:04:08 +0100
Subject: [PATCH 15/19] fix: add error message, minor fix

---
 .../expensifyCard/WorkspaceCardListHeader.tsx | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
index f0e8f4b84978b..efc5086aae3f0 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import FormHelpMessage from '@components/FormHelpMessage';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {getLatestErrorMessage} from '@libs/ErrorUtils';
 import {getWorkspaceAccountID} from '@libs/PolicyUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -27,6 +29,8 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${workspaceAccountID}`);
     const [cardManualBilling] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_MANUAL_BILLING}${workspaceAccountID}`);
 
+    const errorMessage = getLatestErrorMessage(cardSettings) ?? '';
+
     const shouldShowSettlementButtonOrDate = !!cardSettings?.isMonthlySettlementAllowed || cardManualBilling;
 
     const getLabelsLayout = () => {
@@ -46,7 +50,6 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
                         value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CASH_BACK] ?? 0}
                     />
                 </View>
-                )
             </>
         ) : (
             <>
@@ -70,11 +73,16 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
 
     return (
         <View style={styles.appBG}>
-            <View style={[isLessThanMediumScreen ? styles.flexColumn : styles.flexRow, isLessThanMediumScreen ? [styles.mt5, styles.mb3] : styles.mv5, styles.mh5, styles.ph4]}>
-                {getLabelsLayout()}
-            </View>
-
-            <View style={[styles.flexRow, styles.mh5, styles.gap2, styles.p4]}>
+            <View style={[isLessThanMediumScreen ? styles.flexColumn : styles.flexRow, styles.mt5, styles.mh5, styles.ph4]}>{getLabelsLayout()}</View>
+            {!!errorMessage && (
+                <View style={[styles.mh5, styles.ph4, styles.mt2]}>
+                    <FormHelpMessage
+                        isError
+                        message={errorMessage}
+                    />
+                </View>
+            )}
+            <View style={[styles.flexRow, styles.mh5, styles.gap2, styles.p4, isLessThanMediumScreen ? styles.mt3 : styles.mt5]}>
                 <View style={[styles.flexRow, styles.flex4, styles.gap2, styles.alignItemsCenter]}>
                     <Text
                         numberOfLines={1}

From 1bd611062bd4186c1992d3579dedb30da15151de Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 29 Jan 2025 11:25:14 +0100
Subject: [PATCH 16/19] fix: change the button location

---
 .../expensifyCard/WorkspaceCardsListLabel.tsx | 58 +++++++++----------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
index e4e77a9921d57..b9a69c247d1aa 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
@@ -101,38 +101,38 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
 
     return (
         <View style={[styles.flex1]}>
-            <View style={[styles.flex1, styles.flexRow, styles.flexWrap]}>
-                <View style={[styles.flexShrink0, isSettleBalanceButtonDisplayed && styles.mr2]}>
-                    <View
-                        ref={anchorRef}
-                        style={[styles.flexRow, styles.alignItemsCenter, styles.mb1, style]}
+            <View style={[styles.flex1]}>
+                <View
+                    ref={anchorRef}
+                    style={[styles.flexRow, styles.alignItemsCenter, styles.mb1, style]}
+                >
+                    <Text style={[styles.mutedNormalTextLabel, styles.mr1]}>{translate(`workspace.expensifyCard.${type}`)}</Text>
+                    <PressableWithFeedback
+                        accessibilityLabel={translate(`workspace.expensifyCard.${type}`)}
+                        accessibilityRole={CONST.ROLE.BUTTON}
+                        onPress={() => setVisible(true)}
                     >
-                        <Text style={[styles.mutedNormalTextLabel, styles.mr1]}>{translate(`workspace.expensifyCard.${type}`)}</Text>
-                        <PressableWithFeedback
-                            accessibilityLabel={translate(`workspace.expensifyCard.${type}`)}
-                            accessibilityRole={CONST.ROLE.BUTTON}
-                            onPress={() => setVisible(true)}
-                        >
-                            <Icon
-                                src={Expensicons.Info}
-                                width={variables.iconSizeExtraSmall}
-                                height={variables.iconSizeExtraSmall}
-                                fill={theme.icon}
+                        <Icon
+                            src={Expensicons.Info}
+                            width={variables.iconSizeExtraSmall}
+                            height={variables.iconSizeExtraSmall}
+                            fill={theme.icon}
+                        />
+                    </PressableWithFeedback>
+                </View>
+                <View style={[styles.flexRow, styles.flexWrap]}>
+                    <Text style={[styles.shortTermsHeadline, isSettleBalanceButtonDisplayed && [styles.mb2, styles.mr3]]}>{convertToDisplayString(value, policyCurrency)}</Text>
+                    {isSettleBalanceButtonDisplayed && (
+                        <View style={shouldUseNarrowLayout && styles.mb3}>
+                            <Button
+                                onPress={handleSettleBalanceButtonClick}
+                                text={translate('workspace.expensifyCard.settleBalance')}
+                                innerStyles={[styles.buttonSmall]}
+                                textStyles={[styles.buttonSmallText]}
                             />
-                        </PressableWithFeedback>
-                    </View>
-                    <Text style={styles.shortTermsHeadline}>{convertToDisplayString(value, policyCurrency)}</Text>
+                        </View>
+                    )}
                 </View>
-                {isSettleBalanceButtonDisplayed && (
-                    <View style={[styles.flexBasisAuto, styles.alignItemsStart, styles.justifyContentEnd, styles.mt2, styles.mr2]}>
-                        <Button
-                            onPress={handleSettleBalanceButtonClick}
-                            text={translate('workspace.expensifyCard.settleBalance')}
-                            innerStyles={[styles.buttonSmall]}
-                            textStyles={[styles.buttonSmallText]}
-                        />
-                    </View>
-                )}
             </View>
             {isSettleDateTextDisplayed && <Text style={[styles.mutedNormalTextLabel, styles.mt1]}>{translate('workspace.expensifyCard.balanceWillBeSettledOn', {settlementDate})}</Text>}
             <Popover

From 17169ffed9c39610c6fc1b72117d2a5fbcbf7037 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 29 Jan 2025 11:35:37 +0100
Subject: [PATCH 17/19] fix: minor fix

---
 .../workspace/expensifyCard/WorkspaceCardsListLabel.tsx     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
index b9a69c247d1aa..b2223bbc5cb93 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
@@ -46,7 +46,7 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
     const policy = usePolicy(route.params.policyID);
     const styles = useThemeStyles();
     const {windowWidth} = useWindowDimensions();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {shouldUseNarrowLayout, isMediumScreenWidth, isSmallScreenWidth} = useResponsiveLayout();
     const theme = useTheme();
     const {translate} = useLocalize();
     const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
@@ -61,6 +61,8 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
     const [cardManualBilling] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_MANUAL_BILLING}${workspaceAccountID}`);
     const paymentBankAccountID = cardSettings?.paymentBankAccountID;
 
+    const isLessThanMediumScreen = isMediumScreenWidth || isSmallScreenWidth;
+
     const isConnectedWithPlaid = useMemo(() => {
         const bankAccountData = bankAccountList?.[paymentBankAccountID ?? CONST.DEFAULT_NUMBER_ID]?.accountData;
 
@@ -123,7 +125,7 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
                 <View style={[styles.flexRow, styles.flexWrap]}>
                     <Text style={[styles.shortTermsHeadline, isSettleBalanceButtonDisplayed && [styles.mb2, styles.mr3]]}>{convertToDisplayString(value, policyCurrency)}</Text>
                     {isSettleBalanceButtonDisplayed && (
-                        <View style={shouldUseNarrowLayout && styles.mb3}>
+                        <View style={isLessThanMediumScreen && styles.mb3}>
                             <Button
                                 onPress={handleSettleBalanceButtonClick}
                                 text={translate('workspace.expensifyCard.settleBalance')}

From 2c168c1041a4aeea66d7b3885d94ca85fc4fadd6 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 29 Jan 2025 12:29:30 +0100
Subject: [PATCH 18/19] fix: remove isSmallScreen usage, minor style fix

---
 .../workspace/expensifyCard/WorkspaceCardsListLabel.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
index b2223bbc5cb93..b0d5dfa0d4d6e 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
@@ -46,7 +46,7 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
     const policy = usePolicy(route.params.policyID);
     const styles = useThemeStyles();
     const {windowWidth} = useWindowDimensions();
-    const {shouldUseNarrowLayout, isMediumScreenWidth, isSmallScreenWidth} = useResponsiveLayout();
+    const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
     const theme = useTheme();
     const {translate} = useLocalize();
     const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
@@ -61,7 +61,7 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
     const [cardManualBilling] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_MANUAL_BILLING}${workspaceAccountID}`);
     const paymentBankAccountID = cardSettings?.paymentBankAccountID;
 
-    const isLessThanMediumScreen = isMediumScreenWidth || isSmallScreenWidth;
+    const isLessThanMediumScreen = isMediumScreenWidth || shouldUseNarrowLayout;
 
     const isConnectedWithPlaid = useMemo(() => {
         const bankAccountData = bankAccountList?.[paymentBankAccountID ?? CONST.DEFAULT_NUMBER_ID]?.accountData;
@@ -125,7 +125,7 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
                 <View style={[styles.flexRow, styles.flexWrap]}>
                     <Text style={[styles.shortTermsHeadline, isSettleBalanceButtonDisplayed && [styles.mb2, styles.mr3]]}>{convertToDisplayString(value, policyCurrency)}</Text>
                     {isSettleBalanceButtonDisplayed && (
-                        <View style={isLessThanMediumScreen && styles.mb3}>
+                        <View style={[styles.mr2, isLessThanMediumScreen && styles.mb3]}>
                             <Button
                                 onPress={handleSettleBalanceButtonClick}
                                 text={translate('workspace.expensifyCard.settleBalance')}

From dfc0a06f7902f951c80222e2bf54d95675b77e4e Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Thu, 30 Jan 2025 16:49:11 +0100
Subject: [PATCH 19/19] fix: make all the columns the same width

---
 .../expensifyCard/WorkspaceCardListHeader.tsx | 20 ++++++++++++++++++-
 .../expensifyCard/WorkspaceCardsListLabel.tsx |  4 ++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
index efc5086aae3f0..bac9cfd387dda 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
@@ -34,6 +34,24 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
     const shouldShowSettlementButtonOrDate = !!cardSettings?.isMonthlySettlementAllowed || cardManualBilling;
 
     const getLabelsLayout = () => {
+        if (!isLessThanMediumScreen) {
+            return (
+                <>
+                    <WorkspaceCardsListLabel
+                        type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE}
+                        value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE] ?? 0}
+                    />
+                    <WorkspaceCardsListLabel
+                        type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.REMAINING_LIMIT}
+                        value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.REMAINING_LIMIT] ?? 0}
+                    />
+                    <WorkspaceCardsListLabel
+                        type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CASH_BACK}
+                        value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CASH_BACK] ?? 0}
+                    />
+                </>
+            );
+        }
         return shouldShowSettlementButtonOrDate ? (
             <>
                 <WorkspaceCardsListLabel
@@ -53,7 +71,7 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
             </>
         ) : (
             <>
-                <View style={[styles.flexRow, styles.flex1, isLessThanMediumScreen && styles.mb5]}>
+                <View style={[styles.flexRow, isLessThanMediumScreen && styles.mb5]}>
                     <WorkspaceCardsListLabel
                         type={CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE}
                         value={cardSettings?.[CONST.WORKSPACE_CARDS_LIST_LABEL_TYPE.CURRENT_BALANCE] ?? 0}
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
index b0d5dfa0d4d6e..01633e67e6e49 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx
@@ -102,8 +102,8 @@ function WorkspaceCardsListLabel({type, value, style}: WorkspaceCardsListLabelPr
     };
 
     return (
-        <View style={[styles.flex1]}>
-            <View style={[styles.flex1]}>
+        <View style={styles.flex1}>
+            <View style={styles.flex1}>
                 <View
                     ref={anchorRef}
                     style={[styles.flexRow, styles.alignItemsCenter, styles.mb1, style]}