From e07f9825899ae0c7a360dcb89e1e95179f89a4f5 Mon Sep 17 00:00:00 2001
From: Kevin Brian Bader <kevin.bader96@gmail.com>
Date: Thu, 6 Feb 2025 20:34:14 -0800
Subject: [PATCH 1/7] Add Expensify Promoting banner to the Company cards page

---
 src/ONYXKEYS.ts                               |  4 ++
 src/libs/PolicyUtils.ts                       |  9 +++
 src/libs/actions/CompanyCards.ts              |  5 ++
 src/libs/actions/Policy/Policy.ts             | 10 ++-
 .../ExpensifyCardPromotionBanner.tsx          | 65 +++++++++++++++++++
 .../WorkspaceCompanyCardPageEmptyState.tsx    |  4 ++
 src/styles/index.ts                           | 14 ++++
 src/styles/theme/themes/dark.ts               |  1 +
 src/styles/theme/themes/light.ts              |  1 +
 src/styles/theme/types.ts                     |  1 +
 10 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/workspace/companyCards/ExpensifyCardPromotionBanner.tsx

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 1fb84c3dd9cf..7194cb8c4bf8 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -177,6 +177,9 @@ const ONYXKEYS = {
     /** Whether the user has dismissed the hold educational interstitial */
     NVP_DISMISSED_HOLD_USE_EXPLANATION: 'nvp_dismissedHoldUseExplanation',
 
+    /** Whether the user has clicked `Learn more` on Expensify Card promotion banner in Workspace: Company cards empty state page */
+    NVP_SEEN_EXPENSIFY_CARD_PROMOTION: 'nvp_seenExpensifyCardPromotion',
+
     /** Whether the user has seen HybridApp explanation modal */
     NVP_SEEN_NEW_USER_MODAL: 'nvp_seen_new_user_modal',
 
@@ -968,6 +971,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.NVP_RECENT_ATTENDEES]: Attendee[];
     [ONYXKEYS.NVP_TRY_FOCUS_MODE]: boolean;
     [ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION]: boolean;
+    [ONYXKEYS.NVP_SEEN_EXPENSIFY_CARD_PROMOTION]: boolean;
     [ONYXKEYS.FOCUS_MODE_NOTIFICATION]: boolean;
     [ONYXKEYS.NVP_LAST_PAYMENT_METHOD]: OnyxTypes.LastPaymentMethod;
     [ONYXKEYS.NVP_LAST_LOCATION_PERMISSION_PROMPT]: string;
diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts
index e136c7fe457a..abf2aaa3a252 100644
--- a/src/libs/PolicyUtils.ts
+++ b/src/libs/PolicyUtils.ts
@@ -32,6 +32,7 @@ import type {
 import type PolicyEmployee from '@src/types/onyx/PolicyEmployee';
 import type {SearchPolicy} from '@src/types/onyx/SearchResults';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import {setExpensifyCardPromotionBannerShown} from './actions/CompanyCards';
 import {hasSynchronizationErrorMessage} from './actions/connections';
 import {getCurrentUserAccountID} from './actions/Report';
 import {getCategoryApproverRule} from './CategoryUtils';
@@ -1080,6 +1081,13 @@ function goBackWhenEnableFeature(policyID: string) {
     }, CONST.WORKSPACE_ENABLE_FEATURE_REDIRECT_DELAY);
 }
 
+function goToExpensifyCardPage(policyID: string) {
+    setTimeout(() => {
+        Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID));
+        setExpensifyCardPromotionBannerShown();
+    }, CONST.WORKSPACE_ENABLE_FEATURE_REDIRECT_DELAY);
+}
+
 function getConnectedIntegration(policy: Policy | undefined, accountingIntegrations?: ConnectionName[]) {
     return (accountingIntegrations ?? Object.values(CONST.POLICY.CONNECTIONS.NAME)).find((integration) => !!policy?.connections?.[integration]);
 }
@@ -1368,6 +1376,7 @@ export {
     sortWorkspacesBySelected,
     removePendingFieldsFromCustomUnit,
     goBackWhenEnableFeature,
+    goToExpensifyCardPage,
     getIntegrationLastSuccessfulDate,
     getCurrentConnectionName,
     getCustomersOrJobsLabelNetSuite,
diff --git a/src/libs/actions/CompanyCards.ts b/src/libs/actions/CompanyCards.ts
index 0c72cd814cd1..bb9a38421af7 100644
--- a/src/libs/actions/CompanyCards.ts
+++ b/src/libs/actions/CompanyCards.ts
@@ -724,6 +724,10 @@ function openPolicyCompanyCardsFeed(policyID: string, feed: CompanyCardFeed) {
     API.read(READ_COMMANDS.OPEN_POLICY_COMPANY_CARDS_FEED, parameters);
 }
 
+function setExpensifyCardPromotionBannerShown() {
+    Onyx.set(ONYXKEYS.NVP_SEEN_EXPENSIFY_CARD_PROMOTION, true);
+}
+
 export {
     setWorkspaceCompanyCardFeedName,
     deleteWorkspaceCompanyCardFeed,
@@ -741,4 +745,5 @@ export {
     clearAddNewCardFlow,
     setAssignCardStepAndData,
     clearAssignCardStepAndData,
+    setExpensifyCardPromotionBannerShown,
 };
diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index 663a01cb0221..08fef2dd0f66 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -99,6 +99,8 @@ import type {Errors} from '@src/types/onyx/OnyxCommon';
 import type {Attributes, CompanyAddress, CustomUnit, NetSuiteCustomList, NetSuiteCustomSegment, Rate, TaxRate} from '@src/types/onyx/Policy';
 import type {OnyxData} from '@src/types/onyx/Request';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import {goToExpensifyCardPage} from '../../PolicyUtils';
+import {setExpensifyCardPromotionBannerShown} from '../CompanyCards';
 import {buildOptimisticPolicyCategories} from './Category';
 
 type ReportCreationData = Record<
@@ -2846,7 +2848,7 @@ function savePreferredExportMethod(policyID: string, exportMethod: ReportExportT
     Onyx.merge(`${ONYXKEYS.LAST_EXPORT_METHOD}`, {[policyID]: exportMethod});
 }
 
-function enableExpensifyCard(policyID: string, enabled: boolean) {
+function enableExpensifyCard(policyID: string, enabled: boolean, shouldNavigateToExpensifyCardPage = false) {
     const authToken = NetworkStore.getAuthToken();
     if (!authToken) {
         return;
@@ -2893,6 +2895,12 @@ function enableExpensifyCard(policyID: string, enabled: boolean) {
 
     API.write(WRITE_COMMANDS.ENABLE_POLICY_EXPENSIFY_CARDS, parameters, onyxData);
 
+    if (shouldNavigateToExpensifyCardPage) {
+        goToExpensifyCardPage(policyID);
+        setExpensifyCardPromotionBannerShown();
+        return;
+    }
+
     if (enabled && getIsNarrowLayout()) {
         goBackWhenEnableFeature(policyID);
     }
diff --git a/src/pages/workspace/companyCards/ExpensifyCardPromotionBanner.tsx b/src/pages/workspace/companyCards/ExpensifyCardPromotionBanner.tsx
new file mode 100644
index 000000000000..16faabe3becb
--- /dev/null
+++ b/src/pages/workspace/companyCards/ExpensifyCardPromotionBanner.tsx
@@ -0,0 +1,65 @@
+import React, {useCallback, useMemo} from 'react';
+import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import Button from '@components/Button';
+import {CreditCardsNew} from '@components/Icon/Illustrations';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {enableExpensifyCard} from '@libs/actions/Policy/Policy';
+import {goToExpensifyCardPage} from '@libs/PolicyUtils';
+import BillingBanner from '@pages/settings/Subscription/CardSection/BillingBanner/BillingBanner';
+import type {Policy} from '@src/types/onyx';
+
+function ExpensifyCardPromotionBanner({policy}: {policy: OnyxEntry<Policy>}) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+
+    const policyID = policy?.id;
+    const areExpensifyCardsEnabled = policy?.areExpensifyCardsEnabled;
+
+    const handleLearnMore = useCallback(() => {
+        if (!policyID) {
+            return;
+        }
+
+        if (areExpensifyCardsEnabled) {
+            goToExpensifyCardPage(policyID);
+            return;
+        }
+
+        enableExpensifyCard(policyID, true, true);
+    }, [policyID, areExpensifyCardsEnabled]);
+
+    const rightComponent = useMemo(() => {
+        const smallScreenStyle = shouldUseNarrowLayout ? [styles.flex0, styles.flexBasis100, styles.justifyContentCenter] : [];
+
+        return (
+            <View style={[styles.flexRow, styles.gap2, smallScreenStyle]}>
+                <Button
+                    success
+                    style={shouldUseNarrowLayout && styles.flex1}
+                    text="Learn more"
+                    onPress={handleLearnMore}
+                />
+            </View>
+        );
+    }, [shouldUseNarrowLayout, styles, translate]);
+
+    return (
+        <View style={[styles.ph4, styles.mb4]}>
+            <BillingBanner
+                title="Get the Expensify Card"
+                titleStyle={styles.themeTextReversedColor}
+                style={[styles.promotionBannerBG, styles.borderRadiusComponentLarge]}
+                subtitle="Enjoy cash back on every US purchase, up to 50% off your Expensify bill, unlimited virtual cards, and so much more."
+                subtitleStyle={[styles.mt1, styles.darkMutedTextLabel]}
+                icon={CreditCardsNew}
+                rightComponent={rightComponent}
+            />
+        </View>
+    );
+}
+
+export default ExpensifyCardPromotionBanner;
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
index bb154411a46d..eb630d30fda3 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
@@ -15,6 +15,8 @@ import colors from '@styles/theme/colors';
 import * as CompanyCards from '@userActions/CompanyCards';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
+import ExpensifyCardPromotionBanner from './ExpensifyCardPromotionBanner';
 
 const companyCardFeatures: FeatureListItem[] = [
     {
@@ -37,6 +39,7 @@ function WorkspaceCompanyCardPageEmptyState({policy}: WithPolicyAndFullscreenLoa
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const [isActingAsDelegate] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => !!account?.delegatedAccess?.delegate});
+    const [hasSeenExpensifyCardPromotion, hasSeenExpensifyCardPromotionResult] = useOnyx(ONYXKEYS.NVP_SEEN_EXPENSIFY_CARD_PROMOTION, {initialValue: false});
     const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
 
     const handleCtaPress = useCallback(() => {
@@ -50,6 +53,7 @@ function WorkspaceCompanyCardPageEmptyState({policy}: WithPolicyAndFullscreenLoa
 
     return (
         <View style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+            {!isLoadingOnyxValue(hasSeenExpensifyCardPromotionResult) && !hasSeenExpensifyCardPromotion && <ExpensifyCardPromotionBanner policy={policy} />}
             <FeatureList
                 menuItems={companyCardFeatures}
                 title={translate('workspace.moreFeatures.companyCards.feed.title')}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 7eaeaeff459a..a928248bd84d 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -396,6 +396,16 @@ const styles = (theme: ThemeColors) =>
             color: theme.text,
         },
 
+        themeTextReversedColor: {
+            color: theme.shadow,
+        },
+
+        darkMutedTextLabel: {
+            color: theme.fallbackIconColor,
+            fontSize: variables.fontSizeLabel,
+            lineHeight: variables.lineHeightNormal,
+        },
+
         mutedTextLabel: {
             color: theme.textSupporting,
             fontSize: variables.fontSizeLabel,
@@ -1181,6 +1191,10 @@ const styles = (theme: ThemeColors) =>
             backgroundColor: theme.buttonHoveredBG,
         },
 
+        promotionBannerBG: {
+            backgroundColor: theme.promotionBannerBG,
+        },
+
         autoGrowHeightInputContainer: (textInputHeight: number, minHeight: number, maxHeight: number) =>
             ({
                 height: lodashClamp(textInputHeight, minHeight, maxHeight),
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index 4d5894812195..52c5588e604f 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -27,6 +27,7 @@ const darkTheme = {
     linkHover: colors.blue100,
     buttonDefaultBG: colors.productDark400,
     buttonHoveredBG: colors.productDark500,
+    promotionBannerBG: colors.green100,
     buttonPressedBG: colors.productDark600,
     buttonSuccessText: colors.productLight100,
     danger: colors.red,
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index 1a187e85b0a2..894457397372 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -27,6 +27,7 @@ const lightTheme = {
     linkHover: colors.blue500,
     buttonDefaultBG: colors.productLight400,
     buttonHoveredBG: colors.productLight500,
+    promotionBannerBG: colors.green100,
     buttonPressedBG: colors.productLight600,
     buttonSuccessText: colors.productLight100,
     danger: colors.red,
diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts
index 9dfb26e611d9..10cfa51738bf 100644
--- a/src/styles/theme/types.ts
+++ b/src/styles/theme/types.ts
@@ -33,6 +33,7 @@ type ThemeColors = {
     linkHover: Color;
     buttonDefaultBG: Color;
     buttonHoveredBG: Color;
+    promotionBannerBG: Color;
     buttonPressedBG: Color;
     buttonSuccessText: Color;
     danger: Color;

From 620fb1c560c817ca35e22ff6399b1418976e0164 Mon Sep 17 00:00:00 2001
From: Kevin Brian Bader <kevin.bader96@gmail.com>
Date: Fri, 7 Feb 2025 14:11:03 -0800
Subject: [PATCH 2/7] Update - Add Expensify Card promoting banner to Company
 cards page

---
 ...imple-illustration__creditcards--green.svg | 55 +++++++++++++++++++
 src/components/Icon/Illustrations.ts          |  2 +
 src/languages/en.ts                           |  3 +
 src/languages/es.ts                           |  4 ++
 src/libs/PolicyUtils.ts                       |  8 +--
 src/libs/actions/CompanyCards.ts              |  4 +-
 src/libs/actions/Policy/Policy.ts             | 17 ++++--
 ...mpanyCardExpensifyCardPromotionBanner.tsx} | 30 +++++-----
 .../WorkspaceCompanyCardPageEmptyState.tsx    |  4 +-
 src/styles/index.ts                           |  2 +-
 src/styles/theme/themes/dark.ts               |  1 -
 src/styles/theme/themes/light.ts              |  1 -
 src/styles/theme/types.ts                     |  1 -
 13 files changed, 101 insertions(+), 31 deletions(-)
 create mode 100644 assets/images/simple-illustrations/simple-illustration__creditcards--green.svg
 rename src/pages/workspace/companyCards/{ExpensifyCardPromotionBanner.tsx => WorkspaceCompanyCardExpensifyCardPromotionBanner.tsx} (68%)

diff --git a/assets/images/simple-illustrations/simple-illustration__creditcards--green.svg b/assets/images/simple-illustrations/simple-illustration__creditcards--green.svg
new file mode 100644
index 000000000000..bd74430af00a
--- /dev/null
+++ b/assets/images/simple-illustrations/simple-illustration__creditcards--green.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 68">
+  <!-- Generator: Adobe Illustrator 29.2.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 116)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #00b268;
+      }
+
+      .st1 {
+        fill: #8dc8ff;
+      }
+
+      .st2 {
+        fill: #085239;
+      }
+
+      .st3 {
+        fill: #03d47c;
+      }
+
+      .st4 {
+        fill: #008c59;
+      }
+
+      .st5 {
+        fill: none;
+        stroke: #002140;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 1px;
+      }
+    </style>
+  </defs>
+  <path class="st3" d="M53.76,28.094H6.717c-1.384,0-2.507,1.122-2.507,2.507v25.66c0,1.384,1.122,2.507,2.507,2.507h47.043c1.384,0,2.507-1.122,2.507-2.507v-25.66c0-1.384-1.122-2.507-2.507-2.507Z"/>
+  <path class="st5" d="M53.343,27.954H6.987c-1.655,0-2.997,1.342-2.997,2.997v24.663c0,1.655,1.342,2.997,2.997,2.997h46.356c1.655,0,2.997-1.342,2.997-2.997v-24.663c0-1.655-1.342-2.997-2.997-2.997Z"/>
+  <path class="st5" d="M8.934,53.613h7.077"/>
+  <path class="st5" d="M19.253,53.613h7.08"/>
+  <path class="st0" d="M16.11,41.13h-1.34c-.32,0-.58.26-.58.58v2.403c0,.32.26.58.58.58h1.34c.32,0,.58-.26.58-.58v-2.403c0-.32-.26-.58-.58-.58Z"/>
+  <path class="st1" d="M18.01,37.577h-2.003c-.32,0-.58.26-.58.58v2.58c0,.32.26.58.58.58h2.003c.32,0,.58-.26.58-.58v-2.58c0-.32-.26-.58-.58-.58Z"/>
+  <path class="st0" d="M19.317,41.7h-1.34c-.32,0-.58.26-.58.58v1.797c0,.32.26.58.58.58h1.34c.32,0,.58-.26.58-.58v-1.797c0-.32-.26-.58-.58-.58Z"/>
+  <path class="st1" d="M21.924,37.577h-2.003c-.32,0-.58.26-.58.58v3.54c0,.32.26.58.58.58h2.003c.32,0,.58-.26.58-.58v-3.54c0-.32-.26-.58-.58-.58Z"/>
+  <path class="st0" d="M13.59,44.087v-6.04c0-.313-.253-.57-.57-.57h-2.067c-.177,0-.34.08-.45.22l-.703.907c-.077.1-.12.223-.12.35v4.387c0,.117.037.23.103.323l.527.757c.107.153.283.243.47.243l2.243-.01c.313,0,.567-.257.567-.57v.003Z"/>
+  <path class="st2" d="M61.149,20.603L15.379,9.733c-1.347-.32-2.698.513-3.018,1.86l-5.929,24.965c-.32,1.347.513,2.698,1.86,3.018l45.77,10.87c1.347.32,2.698-.513,3.018-1.86l5.929-24.965c.32-1.347-.513-2.698-1.86-3.018Z"/>
+  <path class="st5" d="M60.777,20.376L15.675,9.665c-1.61-.382-3.226.613-3.608,2.223l-5.699,23.996c-.382,1.61.613,3.226,2.223,3.608l45.102,10.711c1.61.382,3.226-.613,3.608-2.223l5.699-23.996c.382-1.61-.613-3.226-2.223-3.608Z"/>
+  <path class="st5" d="M11.633,35.084l6.887,1.633"/>
+  <path class="st5" d="M21.677,37.467l6.887,1.637"/>
+  <path class="st4" d="M22.144,25.727l-1.197-.284c-.312-.074-.624.119-.698.43l-.518,2.183c-.074.312.119.624.43.698l1.197.284c.312.074.624-.119.698-.43l.518-2.183c.074-.312-.119-.624-.43-.698Z"/>
+  <path class="st4" d="M22.965,22.411l-1.197-.284c-.312-.074-.624.119-.698.43l-.384,1.618c-.074.312.119.624.43.698l1.197.284c.312.074.624-.119.698-.43l.384-1.618c.074-.312-.119-.624-.43-.698Z"/>
+  <path class="st4" d="M24.997,26.965l-1.197-.284c-.312-.074-.624.119-.698.43l-.384,1.618c-.074.312.119.624.43.698l1.197.284c.312.074.624-.119.698-.43l.384-1.618c.074-.312-.119-.624-.43-.698Z"/>
+  <path class="st4" d="M25.84,23.094l-1.197-.284c-.312-.074-.624.119-.698.43l-.552,2.325c-.074.312.119.624.43.698l1.197.284c.312.074.624-.119.698-.43l.552-2.325c.074-.312-.119-.624-.43-.698Z"/>
+  <path class="st4" d="M19.17,27.93l1.333-5.617c.07-.293-.11-.583-.403-.653l-1.92-.457c-.163-.04-.337,0-.467.103l-.853.687c-.093.077-.16.18-.19.297l-.97,4.077c-.027.107-.017.22.023.323l.323.82c.067.167.21.29.383.33l2.087.487c.29.067.583-.113.653-.403v.007Z"/>
+  <path class="st3" d="M56.278,24.233l-16.955-4.027c-1.32-.313-2.644.502-2.958,1.823l-.474,1.998c-.313,1.32.502,2.644,1.822,2.958l16.955,4.027c1.32.313,2.644-.503,2.958-1.823l.474-1.998c.314-1.32-.502-2.644-1.822-2.958Z"/>
+  <path class="st0" d="M47.556,49.287c-.087,2.657-2.31,4.737-4.967,4.65-2.657-.087-4.737-2.31-4.65-4.967.02-.663.177-1.293.44-1.86"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts
index fd5eb9f6fd58..93c233321916 100644
--- a/src/components/Icon/Illustrations.ts
+++ b/src/components/Icon/Illustrations.ts
@@ -89,6 +89,7 @@ import ConciergeBubble from '@assets/images/simple-illustrations/simple-illustra
 import ConciergeNew from '@assets/images/simple-illustrations/simple-illustration__concierge.svg';
 import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
 import CreditCardEyes from '@assets/images/simple-illustrations/simple-illustration__creditcardeyes.svg';
+import CreditCardsNewGreen from '@assets/images/simple-illustrations/simple-illustration__creditcards--green.svg';
 import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg';
 import EmptyState from '@assets/images/simple-illustrations/simple-illustration__empty-state.svg';
 import EnvelopeReceipt from '@assets/images/simple-illustrations/simple-illustration__envelopereceipt.svg';
@@ -198,6 +199,7 @@ export {
     MoneyReceipts,
     PinkBill,
     CreditCardsNew,
+    CreditCardsNewGreen,
     InvoiceBlue,
     LaptopwithSecondScreenandHourglass,
     LockOpen,
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 4d559f925c57..5399ddba4c4a 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -3780,6 +3780,9 @@ const translations = {
                 noAccountsFound: 'No accounts found',
                 defaultCard: 'Default card',
                 noAccountsFoundDescription: ({connection}: ConnectionParams) => `Please add the account in ${connection} and sync the connection again.`,
+                expensifyCardBannerTitle: 'Get the Expensify Card',
+                expensifyCardBannerSubtitle: 'Enjoy cash back on every US purchase, up to 50% off your Expensify bill, unlimited virtual cards, and so much more.',
+                expensifyCardBannerLearnMoreButton: 'Learn more',
             },
             workflows: {
                 title: 'Workflows',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index baa819cc9cb3..533b6c49716d 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -3824,6 +3824,10 @@ const translations = {
                 noAccountsFound: 'No se han encontrado cuentas',
                 defaultCard: 'Tarjeta predeterminada',
                 noAccountsFoundDescription: ({connection}: ConnectionParams) => `Añade la cuenta en ${connection} y sincroniza la conexión de nuevo.`,
+                expensifyCardBannerTitle: 'Obtén la Tarjeta Expensify',
+                expensifyCardBannerSubtitle:
+                    'Disfruta de una devolución en cada compra en Estados Unidos, hasta un 50% de descuento en tu factura de Expensify, tarjetas virtuales ilimitadas y mucho más.',
+                expensifyCardBannerLearnMoreButton: 'Más información',
             },
             workflows: {
                 title: 'Flujos de trabajo',
diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts
index abf2aaa3a252..5788c86c914c 100644
--- a/src/libs/PolicyUtils.ts
+++ b/src/libs/PolicyUtils.ts
@@ -32,7 +32,7 @@ import type {
 import type PolicyEmployee from '@src/types/onyx/PolicyEmployee';
 import type {SearchPolicy} from '@src/types/onyx/SearchResults';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import {setExpensifyCardPromotionBannerShown} from './actions/CompanyCards';
+import {setHasSeenExpensifyCardPromotionBanner} from './actions/CompanyCards';
 import {hasSynchronizationErrorMessage} from './actions/connections';
 import {getCurrentUserAccountID} from './actions/Report';
 import {getCategoryApproverRule} from './CategoryUtils';
@@ -1081,10 +1081,10 @@ function goBackWhenEnableFeature(policyID: string) {
     }, CONST.WORKSPACE_ENABLE_FEATURE_REDIRECT_DELAY);
 }
 
-function goToExpensifyCardPage(policyID: string) {
+function navigateToExpensifyCardPage(policyID: string) {
     setTimeout(() => {
         Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID));
-        setExpensifyCardPromotionBannerShown();
+        setHasSeenExpensifyCardPromotionBanner();
     }, CONST.WORKSPACE_ENABLE_FEATURE_REDIRECT_DELAY);
 }
 
@@ -1376,7 +1376,7 @@ export {
     sortWorkspacesBySelected,
     removePendingFieldsFromCustomUnit,
     goBackWhenEnableFeature,
-    goToExpensifyCardPage,
+    navigateToExpensifyCardPage,
     getIntegrationLastSuccessfulDate,
     getCurrentConnectionName,
     getCustomersOrJobsLabelNetSuite,
diff --git a/src/libs/actions/CompanyCards.ts b/src/libs/actions/CompanyCards.ts
index bb9a38421af7..28011ad521ec 100644
--- a/src/libs/actions/CompanyCards.ts
+++ b/src/libs/actions/CompanyCards.ts
@@ -724,7 +724,7 @@ function openPolicyCompanyCardsFeed(policyID: string, feed: CompanyCardFeed) {
     API.read(READ_COMMANDS.OPEN_POLICY_COMPANY_CARDS_FEED, parameters);
 }
 
-function setExpensifyCardPromotionBannerShown() {
+function setHasSeenExpensifyCardPromotionBanner() {
     Onyx.set(ONYXKEYS.NVP_SEEN_EXPENSIFY_CARD_PROMOTION, true);
 }
 
@@ -745,5 +745,5 @@ export {
     clearAddNewCardFlow,
     setAssignCardStepAndData,
     clearAssignCardStepAndData,
-    setExpensifyCardPromotionBannerShown,
+    setHasSeenExpensifyCardPromotionBanner,
 };
diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index 08fef2dd0f66..1f595258cc84 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -99,8 +99,8 @@ import type {Errors} from '@src/types/onyx/OnyxCommon';
 import type {Attributes, CompanyAddress, CustomUnit, NetSuiteCustomList, NetSuiteCustomSegment, Rate, TaxRate} from '@src/types/onyx/Policy';
 import type {OnyxData} from '@src/types/onyx/Request';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import {goToExpensifyCardPage} from '../../PolicyUtils';
-import {setExpensifyCardPromotionBannerShown} from '../CompanyCards';
+import {navigateToExpensifyCardPage} from '../../PolicyUtils';
+import {setHasSeenExpensifyCardPromotionBanner} from '../CompanyCards';
 import {buildOptimisticPolicyCategories} from './Category';
 
 type ReportCreationData = Record<
@@ -2848,6 +2848,13 @@ function savePreferredExportMethod(policyID: string, exportMethod: ReportExportT
     Onyx.merge(`${ONYXKEYS.LAST_EXPORT_METHOD}`, {[policyID]: exportMethod});
 }
 
+/**
+ * Enables or disables the Expensify Card feature for a given policy.
+ *
+ * @param policyID
+ * @param enabled - Whether the feature should be enabled (`true`) or disabled (`false`).
+ * @param shouldNavigateToExpensifyCardPage - [Optional, Default: `false`] Whether to navigate to the Expensify Card page after enabling the feature.
+ */
 function enableExpensifyCard(policyID: string, enabled: boolean, shouldNavigateToExpensifyCardPage = false) {
     const authToken = NetworkStore.getAuthToken();
     if (!authToken) {
@@ -2895,9 +2902,9 @@ function enableExpensifyCard(policyID: string, enabled: boolean, shouldNavigateT
 
     API.write(WRITE_COMMANDS.ENABLE_POLICY_EXPENSIFY_CARDS, parameters, onyxData);
 
-    if (shouldNavigateToExpensifyCardPage) {
-        goToExpensifyCardPage(policyID);
-        setExpensifyCardPromotionBannerShown();
+    if (enabled && shouldNavigateToExpensifyCardPage) {
+        navigateToExpensifyCardPage(policyID);
+        setHasSeenExpensifyCardPromotionBanner();
         return;
     }
 
diff --git a/src/pages/workspace/companyCards/ExpensifyCardPromotionBanner.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardExpensifyCardPromotionBanner.tsx
similarity index 68%
rename from src/pages/workspace/companyCards/ExpensifyCardPromotionBanner.tsx
rename to src/pages/workspace/companyCards/WorkspaceCompanyCardExpensifyCardPromotionBanner.tsx
index 16faabe3becb..1f555f585450 100644
--- a/src/pages/workspace/companyCards/ExpensifyCardPromotionBanner.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardExpensifyCardPromotionBanner.tsx
@@ -2,20 +2,23 @@ import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import Button from '@components/Button';
-import {CreditCardsNew} from '@components/Icon/Illustrations';
+import {CreditCardsNewGreen} from '@components/Icon/Illustrations';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {enableExpensifyCard} from '@libs/actions/Policy/Policy';
-import {goToExpensifyCardPage} from '@libs/PolicyUtils';
+import {navigateToExpensifyCardPage} from '@libs/PolicyUtils';
 import BillingBanner from '@pages/settings/Subscription/CardSection/BillingBanner/BillingBanner';
 import type {Policy} from '@src/types/onyx';
 
-function ExpensifyCardPromotionBanner({policy}: {policy: OnyxEntry<Policy>}) {
+type WorkspaceCompanyCardExpensifyCardPromotionBannerProps = {
+    policy: OnyxEntry<Policy>;
+};
+
+function WorkspaceCompanyCardExpensifyCardPromotionBanner({policy}: WorkspaceCompanyCardExpensifyCardPromotionBannerProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
-
     const policyID = policy?.id;
     const areExpensifyCardsEnabled = policy?.areExpensifyCardsEnabled;
 
@@ -25,7 +28,7 @@ function ExpensifyCardPromotionBanner({policy}: {policy: OnyxEntry<Policy>}) {
         }
 
         if (areExpensifyCardsEnabled) {
-            goToExpensifyCardPage(policyID);
+            navigateToExpensifyCardPage(policyID);
             return;
         }
 
@@ -34,32 +37,31 @@ function ExpensifyCardPromotionBanner({policy}: {policy: OnyxEntry<Policy>}) {
 
     const rightComponent = useMemo(() => {
         const smallScreenStyle = shouldUseNarrowLayout ? [styles.flex0, styles.flexBasis100, styles.justifyContentCenter] : [];
-
         return (
             <View style={[styles.flexRow, styles.gap2, smallScreenStyle]}>
                 <Button
                     success
-                    style={shouldUseNarrowLayout && styles.flex1}
-                    text="Learn more"
                     onPress={handleLearnMore}
+                    style={shouldUseNarrowLayout && styles.flex1}
+                    text={translate('workspace.moreFeatures.companyCards.expensifyCardBannerLearnMoreButton')}
                 />
             </View>
         );
-    }, [shouldUseNarrowLayout, styles, translate]);
+    }, [styles, shouldUseNarrowLayout, translate, handleLearnMore]);
 
     return (
         <View style={[styles.ph4, styles.mb4]}>
             <BillingBanner
-                title="Get the Expensify Card"
+                icon={CreditCardsNewGreen}
+                title={translate('workspace.moreFeatures.companyCards.expensifyCardBannerTitle')}
                 titleStyle={styles.themeTextReversedColor}
-                style={[styles.promotionBannerBG, styles.borderRadiusComponentLarge]}
-                subtitle="Enjoy cash back on every US purchase, up to 50% off your Expensify bill, unlimited virtual cards, and so much more."
+                subtitle={translate('workspace.moreFeatures.companyCards.expensifyCardBannerSubtitle')}
                 subtitleStyle={[styles.mt1, styles.darkMutedTextLabel]}
-                icon={CreditCardsNew}
+                style={[styles.promotionBannerBG, styles.borderRadiusComponentLarge]}
                 rightComponent={rightComponent}
             />
         </View>
     );
 }
 
-export default ExpensifyCardPromotionBanner;
+export default WorkspaceCompanyCardExpensifyCardPromotionBanner;
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
index eb630d30fda3..14bcb60aaab8 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
@@ -16,7 +16,7 @@ import * as CompanyCards from '@userActions/CompanyCards';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
-import ExpensifyCardPromotionBanner from './ExpensifyCardPromotionBanner';
+import WorkspaceCompanyCardExpensifyCardPromotionBanner from './WorkspaceCompanyCardExpensifyCardPromotionBanner';
 
 const companyCardFeatures: FeatureListItem[] = [
     {
@@ -53,7 +53,7 @@ function WorkspaceCompanyCardPageEmptyState({policy}: WithPolicyAndFullscreenLoa
 
     return (
         <View style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
-            {!isLoadingOnyxValue(hasSeenExpensifyCardPromotionResult) && !hasSeenExpensifyCardPromotion && <ExpensifyCardPromotionBanner policy={policy} />}
+            {!isLoadingOnyxValue(hasSeenExpensifyCardPromotionResult) && !hasSeenExpensifyCardPromotion && <WorkspaceCompanyCardExpensifyCardPromotionBanner policy={policy} />}
             <FeatureList
                 menuItems={companyCardFeatures}
                 title={translate('workspace.moreFeatures.companyCards.feed.title')}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index a928248bd84d..e7ed48d6e06b 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1192,7 +1192,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         promotionBannerBG: {
-            backgroundColor: theme.promotionBannerBG,
+            backgroundColor: colors.green100,
         },
 
         autoGrowHeightInputContainer: (textInputHeight: number, minHeight: number, maxHeight: number) =>
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index 52c5588e604f..4d5894812195 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -27,7 +27,6 @@ const darkTheme = {
     linkHover: colors.blue100,
     buttonDefaultBG: colors.productDark400,
     buttonHoveredBG: colors.productDark500,
-    promotionBannerBG: colors.green100,
     buttonPressedBG: colors.productDark600,
     buttonSuccessText: colors.productLight100,
     danger: colors.red,
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index 894457397372..1a187e85b0a2 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -27,7 +27,6 @@ const lightTheme = {
     linkHover: colors.blue500,
     buttonDefaultBG: colors.productLight400,
     buttonHoveredBG: colors.productLight500,
-    promotionBannerBG: colors.green100,
     buttonPressedBG: colors.productLight600,
     buttonSuccessText: colors.productLight100,
     danger: colors.red,
diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts
index 10cfa51738bf..9dfb26e611d9 100644
--- a/src/styles/theme/types.ts
+++ b/src/styles/theme/types.ts
@@ -33,7 +33,6 @@ type ThemeColors = {
     linkHover: Color;
     buttonDefaultBG: Color;
     buttonHoveredBG: Color;
-    promotionBannerBG: Color;
     buttonPressedBG: Color;
     buttonSuccessText: Color;
     danger: Color;

From e66af342b8ed68e36fbe86d3103ec459f6b3f161 Mon Sep 17 00:00:00 2001
From: Kevin Brian Bader <kevin.bader96@gmail.com>
Date: Fri, 7 Feb 2025 15:11:32 -0800
Subject: [PATCH 3/7] addressed lint issues

---
 src/libs/actions/Policy/Policy.ts                          | 7 +++----
 .../companyCards/WorkspaceCompanyCardPageEmptyState.tsx    | 4 ++--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index 9493a6c410be..9ae9ff13c3fb 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -5,6 +5,8 @@ import type {NullishDeep, OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-nat
 import Onyx from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type {ReportExportType} from '@components/ButtonWithDropdownMenu/types';
+import {setHasSeenExpensifyCardPromotionBanner} from '@libs/actions/CompanyCards';
+import {buildOptimisticPolicyCategories} from '@libs/actions/Policy/Category';
 import * as API from '@libs/API';
 import type {
     AddBillingCardAndRequestWorkspaceOwnerChangeParams,
@@ -73,7 +75,7 @@ import * as NumberUtils from '@libs/NumberUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as PhoneNumber from '@libs/PhoneNumber';
 import * as PolicyUtils from '@libs/PolicyUtils';
-import {goBackWhenEnableFeature} from '@libs/PolicyUtils';
+import {goBackWhenEnableFeature, navigateToExpensifyCardPage} from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import type {PolicySelector} from '@pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover';
 import * as PaymentMethods from '@userActions/PaymentMethods';
@@ -99,9 +101,6 @@ import type {Errors} from '@src/types/onyx/OnyxCommon';
 import type {Attributes, CompanyAddress, CustomUnit, NetSuiteCustomList, NetSuiteCustomSegment, Rate, TaxRate} from '@src/types/onyx/Policy';
 import type {OnyxData} from '@src/types/onyx/Request';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import {navigateToExpensifyCardPage} from '../../PolicyUtils';
-import {setHasSeenExpensifyCardPromotionBanner} from '../CompanyCards';
-import {buildOptimisticPolicyCategories} from './Category';
 
 type ReportCreationData = Record<
     string,
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
index 14bcb60aaab8..92097baeaf17 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
@@ -12,7 +12,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import colors from '@styles/theme/colors';
-import * as CompanyCards from '@userActions/CompanyCards';
+import {clearAddNewCardFlow} from '@userActions/CompanyCards';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
@@ -47,7 +47,7 @@ function WorkspaceCompanyCardPageEmptyState({policy}: WithPolicyAndFullscreenLoa
             setIsNoDelegateAccessMenuVisible(true);
             return;
         }
-        CompanyCards.clearAddNewCardFlow();
+        clearAddNewCardFlow();
         Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ADD_NEW.getRoute(policy?.id ?? '-1'));
     }, [policy, isActingAsDelegate]);
 

From 0675be5aa3253b728360d0c1ebe3f637d390de97 Mon Sep 17 00:00:00 2001
From: Kevin Brian Bader <kevin.bader96@gmail.com>
Date: Fri, 7 Feb 2025 15:18:41 -0800
Subject: [PATCH 4/7] addressed lint issues

---
 src/libs/actions/Policy/Policy.ts                              | 2 +-
 .../companyCards/WorkspaceCompanyCardPageEmptyState.tsx        | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index 9ae9ff13c3fb..c2d9db0601d1 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -6,7 +6,6 @@ import Onyx from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type {ReportExportType} from '@components/ButtonWithDropdownMenu/types';
 import {setHasSeenExpensifyCardPromotionBanner} from '@libs/actions/CompanyCards';
-import {buildOptimisticPolicyCategories} from '@libs/actions/Policy/Category';
 import * as API from '@libs/API';
 import type {
     AddBillingCardAndRequestWorkspaceOwnerChangeParams,
@@ -101,6 +100,7 @@ import type {Errors} from '@src/types/onyx/OnyxCommon';
 import type {Attributes, CompanyAddress, CustomUnit, NetSuiteCustomList, NetSuiteCustomSegment, Rate, TaxRate} from '@src/types/onyx/Policy';
 import type {OnyxData} from '@src/types/onyx/Request';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import {buildOptimisticPolicyCategories} from './Category';
 
 type ReportCreationData = Record<
     string,
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
index 92097baeaf17..676983e2aaae 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
@@ -13,6 +13,7 @@ import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullsc
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import colors from '@styles/theme/colors';
 import {clearAddNewCardFlow} from '@userActions/CompanyCards';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
@@ -48,7 +49,7 @@ function WorkspaceCompanyCardPageEmptyState({policy}: WithPolicyAndFullscreenLoa
             return;
         }
         clearAddNewCardFlow();
-        Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ADD_NEW.getRoute(policy?.id ?? '-1'));
+        Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ADD_NEW.getRoute(policy?.id ?? String(CONST.DEFAULT_NUMBER_ID)));
     }, [policy, isActingAsDelegate]);
 
     return (

From 43c69731b6d433923573a1135687e1eea33c39e5 Mon Sep 17 00:00:00 2001
From: Kevin Brian Bader <kevin.bader96@gmail.com>
Date: Sat, 8 Feb 2025 15:56:16 -0800
Subject: [PATCH 5/7] code review & design adjustments

---
 src/libs/PolicyUtils.ts                            |  6 +++---
 src/libs/actions/Policy/Policy.ts                  |  8 --------
 ...paceCompanyCardExpensifyCardPromotionBanner.tsx | 10 +++++++---
 .../WorkspaceCompanyCardPageEmptyState.tsx         |  5 ++++-
 src/styles/index.ts                                | 14 --------------
 5 files changed, 14 insertions(+), 29 deletions(-)

diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts
index 3532f472e1d6..64aecb687b44 100644
--- a/src/libs/PolicyUtils.ts
+++ b/src/libs/PolicyUtils.ts
@@ -1082,10 +1082,10 @@ function goBackWhenEnableFeature(policyID: string) {
 }
 
 function navigateToExpensifyCardPage(policyID: string) {
-    setTimeout(() => {
+    Navigation.setNavigationActionToMicrotaskQueue(() => {
         Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID));
-        setHasSeenExpensifyCardPromotionBanner();
-    }, CONST.WORKSPACE_ENABLE_FEATURE_REDIRECT_DELAY);
+    });
+    setHasSeenExpensifyCardPromotionBanner();
 }
 
 function getConnectedIntegration(policy: Policy | undefined, accountingIntegrations?: ConnectionName[]) {
diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index c2d9db0601d1..0a16f96602e9 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -2850,13 +2850,6 @@ function savePreferredExportMethod(policyID: string, exportMethod: ReportExportT
     Onyx.merge(`${ONYXKEYS.LAST_EXPORT_METHOD}`, {[policyID]: exportMethod});
 }
 
-/**
- * Enables or disables the Expensify Card feature for a given policy.
- *
- * @param policyID
- * @param enabled - Whether the feature should be enabled (`true`) or disabled (`false`).
- * @param shouldNavigateToExpensifyCardPage - [Optional, Default: `false`] Whether to navigate to the Expensify Card page after enabling the feature.
- */
 function enableExpensifyCard(policyID: string, enabled: boolean, shouldNavigateToExpensifyCardPage = false) {
     const authToken = NetworkStore.getAuthToken();
     if (!authToken) {
@@ -2906,7 +2899,6 @@ function enableExpensifyCard(policyID: string, enabled: boolean, shouldNavigateT
 
     if (enabled && shouldNavigateToExpensifyCardPage) {
         navigateToExpensifyCardPage(policyID);
-        setHasSeenExpensifyCardPromotionBanner();
         return;
     }
 
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardExpensifyCardPromotionBanner.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardExpensifyCardPromotionBanner.tsx
index 1f555f585450..0a4d73bb9e7e 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardExpensifyCardPromotionBanner.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardExpensifyCardPromotionBanner.tsx
@@ -5,6 +5,8 @@ import Button from '@components/Button';
 import {CreditCardsNewGreen} from '@components/Icon/Illustrations';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {enableExpensifyCard} from '@libs/actions/Policy/Policy';
 import {navigateToExpensifyCardPage} from '@libs/PolicyUtils';
@@ -16,8 +18,10 @@ type WorkspaceCompanyCardExpensifyCardPromotionBannerProps = {
 };
 
 function WorkspaceCompanyCardExpensifyCardPromotionBanner({policy}: WorkspaceCompanyCardExpensifyCardPromotionBannerProps) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const StyleUtils = useStyleUtils();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const policyID = policy?.id;
     const areExpensifyCardsEnabled = policy?.areExpensifyCardsEnabled;
@@ -54,10 +58,10 @@ function WorkspaceCompanyCardExpensifyCardPromotionBanner({policy}: WorkspaceCom
             <BillingBanner
                 icon={CreditCardsNewGreen}
                 title={translate('workspace.moreFeatures.companyCards.expensifyCardBannerTitle')}
-                titleStyle={styles.themeTextReversedColor}
+                titleStyle={StyleUtils.getTextColorStyle(theme.text)}
                 subtitle={translate('workspace.moreFeatures.companyCards.expensifyCardBannerSubtitle')}
-                subtitleStyle={[styles.mt1, styles.darkMutedTextLabel]}
-                style={[styles.promotionBannerBG, styles.borderRadiusComponentLarge]}
+                subtitleStyle={[styles.mt1, styles.textLabel]}
+                style={[styles.borderRadiusComponentLarge]}
                 rightComponent={rightComponent}
             />
         </View>
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
index 676983e2aaae..9f12b35b380b 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
@@ -44,12 +44,15 @@ function WorkspaceCompanyCardPageEmptyState({policy}: WithPolicyAndFullscreenLoa
     const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
 
     const handleCtaPress = useCallback(() => {
+        if (!policy?.id) {
+            return;
+        }
         if (isActingAsDelegate) {
             setIsNoDelegateAccessMenuVisible(true);
             return;
         }
         clearAddNewCardFlow();
-        Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ADD_NEW.getRoute(policy?.id ?? String(CONST.DEFAULT_NUMBER_ID)));
+        Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ADD_NEW.getRoute(policy.id));
     }, [policy, isActingAsDelegate]);
 
     return (
diff --git a/src/styles/index.ts b/src/styles/index.ts
index e7ed48d6e06b..7eaeaeff459a 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -396,16 +396,6 @@ const styles = (theme: ThemeColors) =>
             color: theme.text,
         },
 
-        themeTextReversedColor: {
-            color: theme.shadow,
-        },
-
-        darkMutedTextLabel: {
-            color: theme.fallbackIconColor,
-            fontSize: variables.fontSizeLabel,
-            lineHeight: variables.lineHeightNormal,
-        },
-
         mutedTextLabel: {
             color: theme.textSupporting,
             fontSize: variables.fontSizeLabel,
@@ -1191,10 +1181,6 @@ const styles = (theme: ThemeColors) =>
             backgroundColor: theme.buttonHoveredBG,
         },
 
-        promotionBannerBG: {
-            backgroundColor: colors.green100,
-        },
-
         autoGrowHeightInputContainer: (textInputHeight: number, minHeight: number, maxHeight: number) =>
             ({
                 height: lodashClamp(textInputHeight, minHeight, maxHeight),

From 14249fb574c718afd728de71d931fdcfe86b416d Mon Sep 17 00:00:00 2001
From: Kevin Brian Bader <kevin.bader96@gmail.com>
Date: Sat, 8 Feb 2025 16:01:45 -0800
Subject: [PATCH 6/7] addressed lint issues

---
 src/libs/actions/Policy/Policy.ts                                | 1 -
 .../companyCards/WorkspaceCompanyCardPageEmptyState.tsx          | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index 0a16f96602e9..f5018269a304 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -5,7 +5,6 @@ import type {NullishDeep, OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-nat
 import Onyx from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type {ReportExportType} from '@components/ButtonWithDropdownMenu/types';
-import {setHasSeenExpensifyCardPromotionBanner} from '@libs/actions/CompanyCards';
 import * as API from '@libs/API';
 import type {
     AddBillingCardAndRequestWorkspaceOwnerChangeParams,
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
index 9f12b35b380b..1c8aa9470063 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
@@ -13,7 +13,6 @@ import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullsc
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import colors from '@styles/theme/colors';
 import {clearAddNewCardFlow} from '@userActions/CompanyCards';
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';

From 7d91ce998e9a0f563be8feb14446386b00a43388 Mon Sep 17 00:00:00 2001
From: Kevin Brian Bader <kevin.bader96@gmail.com>
Date: Sun, 9 Feb 2025 18:48:01 -0800
Subject: [PATCH 7/7] code review adjustments

---
 src/ONYXKEYS.ts                                              | 4 ----
 src/libs/PolicyUtils.ts                                      | 2 --
 src/libs/actions/CompanyCards.ts                             | 5 -----
 .../companyCards/WorkspaceCompanyCardPageEmptyState.tsx      | 4 +---
 4 files changed, 1 insertion(+), 14 deletions(-)

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 23a2fff451cf..7b3eb78cf1e3 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -177,9 +177,6 @@ const ONYXKEYS = {
     /** Whether the user has dismissed the hold educational interstitial */
     NVP_DISMISSED_HOLD_USE_EXPLANATION: 'nvp_dismissedHoldUseExplanation',
 
-    /** Whether the user has clicked `Learn more` on Expensify Card promotion banner in Workspace: Company cards empty state page */
-    NVP_SEEN_EXPENSIFY_CARD_PROMOTION: 'nvp_seenExpensifyCardPromotion',
-
     /** Whether the user has seen HybridApp explanation modal */
     NVP_SEEN_NEW_USER_MODAL: 'nvp_seen_new_user_modal',
 
@@ -974,7 +971,6 @@ type OnyxValuesMapping = {
     [ONYXKEYS.NVP_RECENT_ATTENDEES]: Attendee[];
     [ONYXKEYS.NVP_TRY_FOCUS_MODE]: boolean;
     [ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION]: boolean;
-    [ONYXKEYS.NVP_SEEN_EXPENSIFY_CARD_PROMOTION]: boolean;
     [ONYXKEYS.FOCUS_MODE_NOTIFICATION]: boolean;
     [ONYXKEYS.NVP_LAST_PAYMENT_METHOD]: OnyxTypes.LastPaymentMethod;
     [ONYXKEYS.NVP_LAST_LOCATION_PERMISSION_PROMPT]: string;
diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts
index 64aecb687b44..d2ef98f77bbc 100644
--- a/src/libs/PolicyUtils.ts
+++ b/src/libs/PolicyUtils.ts
@@ -32,7 +32,6 @@ import type {
 import type PolicyEmployee from '@src/types/onyx/PolicyEmployee';
 import type {SearchPolicy} from '@src/types/onyx/SearchResults';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import {setHasSeenExpensifyCardPromotionBanner} from './actions/CompanyCards';
 import {hasSynchronizationErrorMessage} from './actions/connections';
 import {getCurrentUserAccountID} from './actions/Report';
 import {getCategoryApproverRule} from './CategoryUtils';
@@ -1085,7 +1084,6 @@ function navigateToExpensifyCardPage(policyID: string) {
     Navigation.setNavigationActionToMicrotaskQueue(() => {
         Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID));
     });
-    setHasSeenExpensifyCardPromotionBanner();
 }
 
 function getConnectedIntegration(policy: Policy | undefined, accountingIntegrations?: ConnectionName[]) {
diff --git a/src/libs/actions/CompanyCards.ts b/src/libs/actions/CompanyCards.ts
index 28011ad521ec..0c72cd814cd1 100644
--- a/src/libs/actions/CompanyCards.ts
+++ b/src/libs/actions/CompanyCards.ts
@@ -724,10 +724,6 @@ function openPolicyCompanyCardsFeed(policyID: string, feed: CompanyCardFeed) {
     API.read(READ_COMMANDS.OPEN_POLICY_COMPANY_CARDS_FEED, parameters);
 }
 
-function setHasSeenExpensifyCardPromotionBanner() {
-    Onyx.set(ONYXKEYS.NVP_SEEN_EXPENSIFY_CARD_PROMOTION, true);
-}
-
 export {
     setWorkspaceCompanyCardFeedName,
     deleteWorkspaceCompanyCardFeed,
@@ -745,5 +741,4 @@ export {
     clearAddNewCardFlow,
     setAssignCardStepAndData,
     clearAssignCardStepAndData,
-    setHasSeenExpensifyCardPromotionBanner,
 };
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
index 1c8aa9470063..d31deed58d23 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
@@ -15,7 +15,6 @@ import colors from '@styles/theme/colors';
 import {clearAddNewCardFlow} from '@userActions/CompanyCards';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import WorkspaceCompanyCardExpensifyCardPromotionBanner from './WorkspaceCompanyCardExpensifyCardPromotionBanner';
 
 const companyCardFeatures: FeatureListItem[] = [
@@ -39,7 +38,6 @@ function WorkspaceCompanyCardPageEmptyState({policy}: WithPolicyAndFullscreenLoa
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const [isActingAsDelegate] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => !!account?.delegatedAccess?.delegate});
-    const [hasSeenExpensifyCardPromotion, hasSeenExpensifyCardPromotionResult] = useOnyx(ONYXKEYS.NVP_SEEN_EXPENSIFY_CARD_PROMOTION, {initialValue: false});
     const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
 
     const handleCtaPress = useCallback(() => {
@@ -56,7 +54,7 @@ function WorkspaceCompanyCardPageEmptyState({policy}: WithPolicyAndFullscreenLoa
 
     return (
         <View style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
-            {!isLoadingOnyxValue(hasSeenExpensifyCardPromotionResult) && !hasSeenExpensifyCardPromotion && <WorkspaceCompanyCardExpensifyCardPromotionBanner policy={policy} />}
+            <WorkspaceCompanyCardExpensifyCardPromotionBanner policy={policy} />
             <FeatureList
                 menuItems={companyCardFeatures}
                 title={translate('workspace.moreFeatures.companyCards.feed.title')}
