From 9c26e7cd8203673a8d0a1de5491f10beddebfcba Mon Sep 17 00:00:00 2001
From: VH <hoangzinhvn@gmail.com>
Date: Mon, 14 Apr 2025 23:12:29 +0700
Subject: [PATCH 1/7] Fix "Schedule demo" text is misaligned when language set
 as Spanish

---
 src/components/Button/index.tsx                                | 2 +-
 src/pages/home/HeaderView.tsx                                  | 2 +-
 src/pages/home/TalkToSalesButton/index.tsx                     | 2 +-
 .../CardSection/BillingBanner/EarlyDiscountBanner.tsx          | 3 ++-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 1226fbc669d3..7d60be2a6ad9 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -317,7 +317,7 @@ function Button(
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         if (icon || shouldShowRightIcon) {
             return (
-                <View style={[isContentCentered ? styles.justifyContentCenter : styles.justifyContentBetween, styles.flexRow]}>
+                <View style={[isContentCentered ? styles.justifyContentCenter : styles.justifyContentBetween, styles.flexRow, styles.mw100]}>
                     <View style={[styles.alignItemsCenter, styles.flexRow, styles.flexShrink1]}>
                         {!!icon && (
                             <View style={[styles.mr2, !text && styles.mr0, iconStyles]}>
diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx
index 13c05a27db3d..a2831776392e 100644
--- a/src/pages/home/HeaderView.tsx
+++ b/src/pages/home/HeaderView.tsx
@@ -214,7 +214,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
             onPress={() => {
                 openExternalLink(account?.guideDetails?.calendarLink ?? '');
             }}
-            style={shouldUseNarrowLayout && shouldShowGuideBookingButtonInEarlyDiscountBanner && [styles.flex1]}
+            style={shouldUseNarrowLayout && shouldShowGuideBookingButtonInEarlyDiscountBanner && [styles.flex1, styles.flexBasisAuto]}
             icon={CalendarSolid}
         />
     );
diff --git a/src/pages/home/TalkToSalesButton/index.tsx b/src/pages/home/TalkToSalesButton/index.tsx
index 80c1d0261ad0..3593ea836745 100644
--- a/src/pages/home/TalkToSalesButton/index.tsx
+++ b/src/pages/home/TalkToSalesButton/index.tsx
@@ -55,7 +55,7 @@ function TalkToSalesButton({shouldUseNarrowLayout, reportID}: TalkToSalesButtonP
 
                 initializeOpenAIRealtime(Number(reportID) ?? CONST.DEFAULT_NUMBER_ID, abTestCtaText());
             }}
-            style={shouldUseNarrowLayout && [styles.flex1]}
+            style={shouldUseNarrowLayout && [styles.flex1, styles.flexBasisAuto]}
             icon={talkToSalesIcon()}
             isLoading={talkToAISales?.isLoading}
         />
diff --git a/src/pages/settings/Subscription/CardSection/BillingBanner/EarlyDiscountBanner.tsx b/src/pages/settings/Subscription/CardSection/BillingBanner/EarlyDiscountBanner.tsx
index b18b84365fba..bd5af644acfb 100644
--- a/src/pages/settings/Subscription/CardSection/BillingBanner/EarlyDiscountBanner.tsx
+++ b/src/pages/settings/Subscription/CardSection/BillingBanner/EarlyDiscountBanner.tsx
@@ -86,7 +86,7 @@ function EarlyDiscountBanner({isSubscriptionPage, GuideBookingButton, TalkToSale
                 {GuideBookingButton}
                 <Button
                     success
-                    style={shouldUseNarrowLayout ? styles.flex1 : styles.mr2}
+                    style={shouldUseNarrowLayout ? [styles.flex1, styles.flexBasisAuto] : styles.mr2}
                     text={translate('subscription.billingBanner.earlyDiscount.claimOffer')}
                     onPress={() => Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION.getRoute(Navigation.getActiveRoute()))}
                 />
@@ -103,6 +103,7 @@ function EarlyDiscountBanner({isSubscriptionPage, GuideBookingButton, TalkToSale
         styles.alignItemsCenter,
         styles.flex1,
         styles.mr2,
+        styles.flexBasisAuto,
         TalkToSalesButton,
         GuideBookingButton,
         translate,

From 43105cfed079e9b5af3541b50ddde6f4ebd100e5 Mon Sep 17 00:00:00 2001
From: VH <hoangzinhvn@gmail.com>
Date: Tue, 15 Apr 2025 22:02:24 +0700
Subject: [PATCH 2/7] Refactor style

---
 src/pages/home/HeaderView.tsx                               | 2 +-
 src/pages/home/TalkToSalesButton/index.tsx                  | 2 +-
 .../CardSection/BillingBanner/EarlyDiscountBanner.tsx       | 5 ++---
 src/styles/index.ts                                         | 6 ++++++
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx
index a2831776392e..988b3ee0ba1e 100644
--- a/src/pages/home/HeaderView.tsx
+++ b/src/pages/home/HeaderView.tsx
@@ -214,7 +214,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
             onPress={() => {
                 openExternalLink(account?.guideDetails?.calendarLink ?? '');
             }}
-            style={shouldUseNarrowLayout && shouldShowGuideBookingButtonInEarlyDiscountBanner && [styles.flex1, styles.flexBasisAuto]}
+            style={shouldUseNarrowLayout && shouldShowGuideBookingButtonInEarlyDiscountBanner && styles.earlyDiscountButton}
             icon={CalendarSolid}
         />
     );
diff --git a/src/pages/home/TalkToSalesButton/index.tsx b/src/pages/home/TalkToSalesButton/index.tsx
index 3593ea836745..277b5ee10e7c 100644
--- a/src/pages/home/TalkToSalesButton/index.tsx
+++ b/src/pages/home/TalkToSalesButton/index.tsx
@@ -55,7 +55,7 @@ function TalkToSalesButton({shouldUseNarrowLayout, reportID}: TalkToSalesButtonP
 
                 initializeOpenAIRealtime(Number(reportID) ?? CONST.DEFAULT_NUMBER_ID, abTestCtaText());
             }}
-            style={shouldUseNarrowLayout && [styles.flex1, styles.flexBasisAuto]}
+            style={shouldUseNarrowLayout && styles.earlyDiscountButton}
             icon={talkToSalesIcon()}
             isLoading={talkToAISales?.isLoading}
         />
diff --git a/src/pages/settings/Subscription/CardSection/BillingBanner/EarlyDiscountBanner.tsx b/src/pages/settings/Subscription/CardSection/BillingBanner/EarlyDiscountBanner.tsx
index bd5af644acfb..1f34d464bc5e 100644
--- a/src/pages/settings/Subscription/CardSection/BillingBanner/EarlyDiscountBanner.tsx
+++ b/src/pages/settings/Subscription/CardSection/BillingBanner/EarlyDiscountBanner.tsx
@@ -86,7 +86,7 @@ function EarlyDiscountBanner({isSubscriptionPage, GuideBookingButton, TalkToSale
                 {GuideBookingButton}
                 <Button
                     success
-                    style={shouldUseNarrowLayout ? [styles.flex1, styles.flexBasisAuto] : styles.mr2}
+                    style={shouldUseNarrowLayout ? styles.earlyDiscountButton : styles.mr2}
                     text={translate('subscription.billingBanner.earlyDiscount.claimOffer')}
                     onPress={() => Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION.getRoute(Navigation.getActiveRoute()))}
                 />
@@ -101,9 +101,8 @@ function EarlyDiscountBanner({isSubscriptionPage, GuideBookingButton, TalkToSale
         styles.flexRow,
         styles.gap2,
         styles.alignItemsCenter,
-        styles.flex1,
+        styles.earlyDiscountButton,
         styles.mr2,
-        styles.flexBasisAuto,
         TalkToSalesButton,
         GuideBookingButton,
         translate,
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 9828d3ada925..79a272095187 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5587,6 +5587,12 @@ const styles = (theme: ThemeColors) =>
             left: 0,
             right: 0,
         },
+
+        earlyDiscountButton: {
+            flexGrow: 1,
+            flexShrink: 1,
+            flexBasis: 'auto',
+        },
     } satisfies Styles);
 
 type ThemeStyles = ReturnType<typeof styles>;

From d40ca0de14ef9f5d2f7bcd8a4de1399d476c35d4 Mon Sep 17 00:00:00 2001
From: VH <hoangzinhvn@gmail.com>
Date: Thu, 24 Apr 2025 21:18:39 +0700
Subject: [PATCH 3/7] Refactor code by using custom prop

---
 src/components/Button/index.tsx            | 6 +++++-
 src/pages/home/HeaderView.tsx              | 2 ++
 src/pages/home/TalkToSalesButton/index.tsx | 2 ++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 7d60be2a6ad9..34ab3e22f3ec 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -39,6 +39,9 @@ type ButtonProps = Partial<ChildrenProps> & {
     /** Any additional styles to pass to the right icon container. */
     iconRightStyles?: StyleProp<ViewStyle>;
 
+    /** Any additional styles to pass to the icon wrapper container. */
+    iconWrapperStyles?: StyleProp<ViewStyle>;
+
     /** Small sized button */
     small?: boolean;
 
@@ -216,6 +219,7 @@ function Button(
         icon = null,
         iconStyles = [],
         iconRightStyles = [],
+        iconWrapperStyles = [],
         text = '',
 
         small = false,
@@ -317,7 +321,7 @@ function Button(
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         if (icon || shouldShowRightIcon) {
             return (
-                <View style={[isContentCentered ? styles.justifyContentCenter : styles.justifyContentBetween, styles.flexRow, styles.mw100]}>
+                <View style={[isContentCentered ? styles.justifyContentCenter : styles.justifyContentBetween, styles.flexRow, iconWrapperStyles]}>
                     <View style={[styles.alignItemsCenter, styles.flexRow, styles.flexShrink1]}>
                         {!!icon && (
                             <View style={[styles.mr2, !text && styles.mr0, iconStyles]}>
diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx
index b2f03486ab0c..7bfcf56b7e70 100644
--- a/src/pages/home/HeaderView.tsx
+++ b/src/pages/home/HeaderView.tsx
@@ -223,6 +223,8 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
             }}
             style={shouldUseNarrowLayout && shouldShowGuideBookingButtonInEarlyDiscountBanner && styles.earlyDiscountButton}
             icon={CalendarSolid}
+            // Ensure that a button with an icon displays an ellipsis when its content overflows https://github.com/Expensify/App/issues/58974#issuecomment-2794297554
+            iconWrapperStyles={[styles.w100]}
         />
     );
 
diff --git a/src/pages/home/TalkToSalesButton/index.tsx b/src/pages/home/TalkToSalesButton/index.tsx
index 277b5ee10e7c..6732c01eefe2 100644
--- a/src/pages/home/TalkToSalesButton/index.tsx
+++ b/src/pages/home/TalkToSalesButton/index.tsx
@@ -57,6 +57,8 @@ function TalkToSalesButton({shouldUseNarrowLayout, reportID}: TalkToSalesButtonP
             }}
             style={shouldUseNarrowLayout && styles.earlyDiscountButton}
             icon={talkToSalesIcon()}
+            // Ensure that a button with an icon displays an ellipsis when its content overflows https://github.com/Expensify/App/issues/58974#issuecomment-2794297554
+            iconWrapperStyles={[styles.w100]}
             isLoading={talkToAISales?.isLoading}
         />
     );

From 6f8b0e7bd41ae2c9651de2f6c0200fa2012dcb4f Mon Sep 17 00:00:00 2001
From: VH <hoangzinhvn@gmail.com>
Date: Thu, 24 Apr 2025 21:44:27 +0700
Subject: [PATCH 4/7] Fix content is not center

---
 src/pages/home/HeaderView.tsx              | 1 +
 src/pages/home/TalkToSalesButton/index.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx
index 7bfcf56b7e70..2668e38e3b1c 100644
--- a/src/pages/home/HeaderView.tsx
+++ b/src/pages/home/HeaderView.tsx
@@ -225,6 +225,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
             icon={CalendarSolid}
             // Ensure that a button with an icon displays an ellipsis when its content overflows https://github.com/Expensify/App/issues/58974#issuecomment-2794297554
             iconWrapperStyles={[styles.w100]}
+            isContentCentered
         />
     );
 
diff --git a/src/pages/home/TalkToSalesButton/index.tsx b/src/pages/home/TalkToSalesButton/index.tsx
index 6732c01eefe2..afbf12e25aed 100644
--- a/src/pages/home/TalkToSalesButton/index.tsx
+++ b/src/pages/home/TalkToSalesButton/index.tsx
@@ -59,6 +59,7 @@ function TalkToSalesButton({shouldUseNarrowLayout, reportID}: TalkToSalesButtonP
             icon={talkToSalesIcon()}
             // Ensure that a button with an icon displays an ellipsis when its content overflows https://github.com/Expensify/App/issues/58974#issuecomment-2794297554
             iconWrapperStyles={[styles.w100]}
+            isContentCentered
             isLoading={talkToAISales?.isLoading}
         />
     );

From 953222794b402897160a91eb75bb9f87de7e76c2 Mon Sep 17 00:00:00 2001
From: VH <hoangzinhvn@gmail.com>
Date: Thu, 24 Apr 2025 21:54:25 +0700
Subject: [PATCH 5/7] Fix eslint

---
 src/pages/home/TalkToSalesButton/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/TalkToSalesButton/index.tsx b/src/pages/home/TalkToSalesButton/index.tsx
index afbf12e25aed..ea06d785cae3 100644
--- a/src/pages/home/TalkToSalesButton/index.tsx
+++ b/src/pages/home/TalkToSalesButton/index.tsx
@@ -15,10 +15,10 @@ type TalkToSalesButtonProps = {
 
 function TalkToSalesButton({shouldUseNarrowLayout, reportID}: TalkToSalesButtonProps) {
     const {translate} = useLocalize();
-    const [talkToAISales] = useOnyx(ONYXKEYS.TALK_TO_AI_SALES);
+    const [talkToAISales] = useOnyx(ONYXKEYS.TALK_TO_AI_SALES, {canBeMissing: false});
     const styles = useThemeStyles();
-    const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
-    const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.accountID});
+    const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED, {canBeMissing: true});
+    const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.accountID, canBeMissing: false});
 
     if (!reportID || !accountID) {
         return;

From 625b4faf1b02b89b4e25dd1790eda828949e6d2b Mon Sep 17 00:00:00 2001
From: Vinh Hoang <hoangzinhvn@gmail.com>
Date: Thu, 1 May 2025 07:06:17 +0700
Subject: [PATCH 6/7] Update to mw100

Co-authored-by: Shubham Agrawal <58412969+shubham1206agra@users.noreply.github.com>
---
 src/pages/home/HeaderView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx
index 2668e38e3b1c..fb3d819dfc9e 100644
--- a/src/pages/home/HeaderView.tsx
+++ b/src/pages/home/HeaderView.tsx
@@ -224,7 +224,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
             style={shouldUseNarrowLayout && shouldShowGuideBookingButtonInEarlyDiscountBanner && styles.earlyDiscountButton}
             icon={CalendarSolid}
             // Ensure that a button with an icon displays an ellipsis when its content overflows https://github.com/Expensify/App/issues/58974#issuecomment-2794297554
-            iconWrapperStyles={[styles.w100]}
+            iconWrapperStyles={[styles.mw100]}
             isContentCentered
         />
     );

From 2237b9376b4a18fc1c7bc43c089aa0e03a5c0a10 Mon Sep 17 00:00:00 2001
From: Vinh Hoang <hoangzinhvn@gmail.com>
Date: Thu, 1 May 2025 07:06:26 +0700
Subject: [PATCH 7/7] Update to mw100

Co-authored-by: Shubham Agrawal <58412969+shubham1206agra@users.noreply.github.com>
---
 src/pages/home/TalkToSalesButton/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/TalkToSalesButton/index.tsx b/src/pages/home/TalkToSalesButton/index.tsx
index ea06d785cae3..1bb1d318ed96 100644
--- a/src/pages/home/TalkToSalesButton/index.tsx
+++ b/src/pages/home/TalkToSalesButton/index.tsx
@@ -58,7 +58,7 @@ function TalkToSalesButton({shouldUseNarrowLayout, reportID}: TalkToSalesButtonP
             style={shouldUseNarrowLayout && styles.earlyDiscountButton}
             icon={talkToSalesIcon()}
             // Ensure that a button with an icon displays an ellipsis when its content overflows https://github.com/Expensify/App/issues/58974#issuecomment-2794297554
-            iconWrapperStyles={[styles.w100]}
+            iconWrapperStyles={[styles.mw100]}
             isContentCentered
             isLoading={talkToAISales?.isLoading}
         />