From 4848897f364fd9a8ea3b2a9b5600037fbf50dc40 Mon Sep 17 00:00:00 2001
From: "Shubham Agrawal (via MelvinBot)" <infra+melvinbot@expensify.com>
Date: Wed, 27 May 2026 06:43:19 +0000
Subject: [PATCH 1/4] Update agent promotional banner UI to match design mocks

- Use medium button size on wide layout instead of small
- Apply label font size to subtitle text
- Reduce gap spacing from gap4 (16px) to gap3 (12px)

Co-authored-by: Shubham Agrawal <shubham1206agra@users.noreply.github.com>
---
 src/components/AgentPromotionalBanner.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/AgentPromotionalBanner.tsx b/src/components/AgentPromotionalBanner.tsx
index a3c22f8f4c22..aeddedcac9a8 100644
--- a/src/components/AgentPromotionalBanner.tsx
+++ b/src/components/AgentPromotionalBanner.tsx
@@ -83,7 +83,7 @@ function AgentPromotionalBanner({title, subtitle, onDismiss, dismissSentryLabel,
         return (
             <Button
                 success
-                small
+                medium
                 text={ctaText}
                 onPress={onCtaPress}
                 sentryLabel={ctaSentryLabel}
@@ -97,8 +97,8 @@ function AgentPromotionalBanner({title, subtitle, onDismiss, dismissSentryLabel,
                 icon={illustrations.AiBot}
                 title={titleNode}
                 subtitle={subtitle}
-                subtitleStyle={[styles.mt1]}
-                style={[styles.borderRadiusComponentLarge, styles.gap4]}
+                subtitleStyle={[styles.mt1, styles.textLabel]}
+                style={[styles.borderRadiusComponentLarge, styles.gap3]}
                 rightIcon={expensifyIcons.Close}
                 onRightIconPress={onDismiss}
                 rightIconAccessibilityLabel={translate('common.dismiss')}

From 9dee2f2ab371cc9a047bcf8c67e566bffdb4bd2e Mon Sep 17 00:00:00 2001
From: "Shubham Agrawal (via MelvinBot)" <infra+melvinbot@expensify.com>
Date: Wed, 27 May 2026 07:03:30 +0000
Subject: [PATCH 2/4] Remove redundant gap3 style from AgentPromotionalBanner

gap3 is already applied by the BillingBanner component internally,
so specifying it again in the style prop is unnecessary.

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

diff --git a/src/components/AgentPromotionalBanner.tsx b/src/components/AgentPromotionalBanner.tsx
index aeddedcac9a8..47da2a5da222 100644
--- a/src/components/AgentPromotionalBanner.tsx
+++ b/src/components/AgentPromotionalBanner.tsx
@@ -98,7 +98,7 @@ function AgentPromotionalBanner({title, subtitle, onDismiss, dismissSentryLabel,
                 title={titleNode}
                 subtitle={subtitle}
                 subtitleStyle={[styles.mt1, styles.textLabel]}
-                style={[styles.borderRadiusComponentLarge, styles.gap3]}
+                style={[styles.borderRadiusComponentLarge]}
                 rightIcon={expensifyIcons.Close}
                 onRightIconPress={onDismiss}
                 rightIconAccessibilityLabel={translate('common.dismiss')}

From 111146c8dccc88c36dda6c5e77a1b95cdce62b44 Mon Sep 17 00:00:00 2001
From: "Shubham Agrawal (via MelvinBot)" <infra+melvinbot@expensify.com>
Date: Wed, 27 May 2026 12:23:48 +0000
Subject: [PATCH 3/4] Fix right-side spacing: 16px gap between button and
 dismiss icon

Address design review feedback from dubielzyk-expensify:
- Use gap4 (16px) between the CTA button and dismiss icon on wide layout
- Bundle the button and dismiss icon into a single rightComponent
  so their spacing is controlled independently of the container gap

Co-authored-by: Shubham Agrawal <shubham1206agra@users.noreply.github.com>
---
 src/components/AgentPromotionalBanner.tsx | 69 +++++++++++++++--------
 1 file changed, 47 insertions(+), 22 deletions(-)

diff --git a/src/components/AgentPromotionalBanner.tsx b/src/components/AgentPromotionalBanner.tsx
index 47da2a5da222..5abe58be2ac7 100644
--- a/src/components/AgentPromotionalBanner.tsx
+++ b/src/components/AgentPromotionalBanner.tsx
@@ -4,10 +4,14 @@ import {View} from 'react-native';
 import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import BillingBanner from '@pages/settings/Subscription/CardSection/BillingBanner/BillingBanner';
+import CONST from '@src/CONST';
 import Badge from './Badge';
 import Button from './Button';
+import Icon from './Icon';
+import {PressableWithoutFeedback} from './Pressable';
 import Text from './Text';
 
 type AgentPromotionalBannerProps = {
@@ -38,6 +42,7 @@ type AgentPromotionalBannerProps = {
 
 function AgentPromotionalBanner({title, subtitle, onDismiss, dismissSentryLabel, ctaText, onCtaPress, ctaSentryLabel, style}: AgentPromotionalBannerProps) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const illustrations = useMemoizedLazyIllustrations(['AiBot']);
@@ -63,33 +68,57 @@ function AgentPromotionalBanner({title, subtitle, onDismiss, dismissSentryLabel,
         [title, styles, translate],
     );
 
+    const dismissIcon = useMemo(
+        () => (
+            <PressableWithoutFeedback
+                onPress={onDismiss}
+                style={[styles.touchableButtonImage]}
+                role={CONST.ROLE.BUTTON}
+                accessibilityLabel={translate('common.dismiss')}
+                sentryLabel={dismissSentryLabel}
+            >
+                <Icon
+                    src={expensifyIcons.Close}
+                    fill={theme.icon}
+                />
+            </PressableWithoutFeedback>
+        ),
+        [onDismiss, styles.touchableButtonImage, translate, dismissSentryLabel, expensifyIcons.Close, theme.icon],
+    );
+
     const rightComponent = useMemo(() => {
         if (!hasCta) {
-            return null;
+            return dismissIcon;
         }
         if (shouldUseNarrowLayout) {
             return (
-                <View style={[styles.flex0, styles.flexBasis100, styles.maxWidth100Percentage, styles.justifyContentCenter]}>
-                    <Button
-                        success
-                        medium
-                        text={ctaText}
-                        onPress={onCtaPress}
-                        sentryLabel={ctaSentryLabel}
-                    />
-                </View>
+                <>
+                    {dismissIcon}
+                    <View style={[styles.flex0, styles.flexBasis100, styles.maxWidth100Percentage, styles.justifyContentCenter]}>
+                        <Button
+                            success
+                            medium
+                            text={ctaText}
+                            onPress={onCtaPress}
+                            sentryLabel={ctaSentryLabel}
+                        />
+                    </View>
+                </>
             );
         }
         return (
-            <Button
-                success
-                medium
-                text={ctaText}
-                onPress={onCtaPress}
-                sentryLabel={ctaSentryLabel}
-            />
+            <View style={[styles.flexRow, styles.gap4, styles.alignItemsCenter]}>
+                <Button
+                    success
+                    medium
+                    text={ctaText}
+                    onPress={onCtaPress}
+                    sentryLabel={ctaSentryLabel}
+                />
+                {dismissIcon}
+            </View>
         );
-    }, [hasCta, shouldUseNarrowLayout, ctaText, onCtaPress, ctaSentryLabel, styles]);
+    }, [hasCta, shouldUseNarrowLayout, ctaText, onCtaPress, ctaSentryLabel, styles, dismissIcon]);
 
     return (
         <View style={style}>
@@ -99,10 +128,6 @@ function AgentPromotionalBanner({title, subtitle, onDismiss, dismissSentryLabel,
                 subtitle={subtitle}
                 subtitleStyle={[styles.mt1, styles.textLabel]}
                 style={[styles.borderRadiusComponentLarge]}
-                rightIcon={expensifyIcons.Close}
-                onRightIconPress={onDismiss}
-                rightIconAccessibilityLabel={translate('common.dismiss')}
-                rightIconSentryLabel={dismissSentryLabel}
                 rightComponent={rightComponent}
             />
         </View>

From cc42a3013f74a74c709dd6206da63e6ba1a40592 Mon Sep 17 00:00:00 2001
From: "Shubham Agrawal (via MelvinBot)" <infra+melvinbot@expensify.com>
Date: Sun, 31 May 2026 05:32:51 +0000
Subject: [PATCH 4/4] Use BillingBanner's built-in rightIcon for dismiss;
 constrain icon width in BillingBanner

Co-authored-by: Shubham Agrawal <shubham1206agra@users.noreply.github.com>
---
 src/components/AgentPromotionalBanner.tsx     | 69 ++++++-------------
 .../BillingBanner/BillingBanner.tsx           |  3 +-
 2 files changed, 24 insertions(+), 48 deletions(-)

diff --git a/src/components/AgentPromotionalBanner.tsx b/src/components/AgentPromotionalBanner.tsx
index ccf5c70fe393..65780344cd8a 100644
--- a/src/components/AgentPromotionalBanner.tsx
+++ b/src/components/AgentPromotionalBanner.tsx
@@ -4,14 +4,10 @@ import {View} from 'react-native';
 import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import BillingBanner from '@pages/settings/Subscription/CardSection/BillingBanner/BillingBanner';
-import CONST from '@src/CONST';
 import Badge from './Badge';
 import Button from './Button';
-import Icon from './Icon';
-import {PressableWithoutFeedback} from './Pressable';
 import Text from './Text';
 
 type AgentPromotionalBannerProps = {
@@ -42,7 +38,6 @@ type AgentPromotionalBannerProps = {
 
 function AgentPromotionalBanner({title, subtitle, onDismiss, dismissSentryLabel, ctaText, onCtaPress, ctaSentryLabel, style}: AgentPromotionalBannerProps) {
     const styles = useThemeStyles();
-    const theme = useTheme();
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout, isInLandscapeMode} = useResponsiveLayout();
     const illustrations = useMemoizedLazyIllustrations(['AiBot']);
@@ -68,57 +63,33 @@ function AgentPromotionalBanner({title, subtitle, onDismiss, dismissSentryLabel,
         [title, styles, translate],
     );
 
-    const dismissIcon = useMemo(
-        () => (
-            <PressableWithoutFeedback
-                onPress={onDismiss}
-                style={[styles.touchableButtonImage]}
-                role={CONST.ROLE.BUTTON}
-                accessibilityLabel={translate('common.dismiss')}
-                sentryLabel={dismissSentryLabel}
-            >
-                <Icon
-                    src={expensifyIcons.Close}
-                    fill={theme.icon}
-                />
-            </PressableWithoutFeedback>
-        ),
-        [onDismiss, styles.touchableButtonImage, translate, dismissSentryLabel, expensifyIcons.Close, theme.icon],
-    );
-
     const rightComponent = useMemo(() => {
         if (!hasCta) {
-            return dismissIcon;
+            return null;
         }
         if (shouldUseNarrowLayout && !isInLandscapeMode) {
             return (
-                <>
-                    {dismissIcon}
-                    <View style={[styles.flex0, styles.flexBasis100, styles.maxWidth100Percentage, styles.justifyContentCenter]}>
-                        <Button
-                            success
-                            medium
-                            text={ctaText}
-                            onPress={onCtaPress}
-                            sentryLabel={ctaSentryLabel}
-                        />
-                    </View>
-                </>
+                <View style={[styles.flex0, styles.flexBasis100, styles.maxWidth100Percentage, styles.justifyContentCenter]}>
+                    <Button
+                        success
+                        medium
+                        text={ctaText}
+                        onPress={onCtaPress}
+                        sentryLabel={ctaSentryLabel}
+                    />
+                </View>
             );
         }
         return (
-            <View style={[styles.flexRow, styles.gap4, styles.alignItemsCenter]}>
-                <Button
-                    success
-                    medium
-                    text={ctaText}
-                    onPress={onCtaPress}
-                    sentryLabel={ctaSentryLabel}
-                />
-                {dismissIcon}
-            </View>
+            <Button
+                success
+                medium
+                text={ctaText}
+                onPress={onCtaPress}
+                sentryLabel={ctaSentryLabel}
+            />
         );
-    }, [hasCta, shouldUseNarrowLayout, isInLandscapeMode, ctaText, onCtaPress, ctaSentryLabel, styles, dismissIcon]);
+    }, [hasCta, shouldUseNarrowLayout, isInLandscapeMode, ctaText, onCtaPress, ctaSentryLabel, styles]);
 
     return (
         <View style={style}>
@@ -128,6 +99,10 @@ function AgentPromotionalBanner({title, subtitle, onDismiss, dismissSentryLabel,
                 subtitle={subtitle}
                 subtitleStyle={[styles.mt1, styles.textLabel]}
                 style={[styles.borderRadiusComponentLarge]}
+                rightIcon={expensifyIcons.Close}
+                onRightIconPress={onDismiss}
+                rightIconAccessibilityLabel={translate('common.dismiss')}
+                rightIconSentryLabel={dismissSentryLabel}
                 rightComponent={rightComponent}
             />
         </View>
diff --git a/src/pages/settings/Subscription/CardSection/BillingBanner/BillingBanner.tsx b/src/pages/settings/Subscription/CardSection/BillingBanner/BillingBanner.tsx
index 2cde3d64ff5c..152c358a03ea 100644
--- a/src/pages/settings/Subscription/CardSection/BillingBanner/BillingBanner.tsx
+++ b/src/pages/settings/Subscription/CardSection/BillingBanner/BillingBanner.tsx
@@ -75,7 +75,7 @@ function BillingBanner({
             return onRightIconPress && rightIconAccessibilityLabel ? (
                 <PressableWithoutFeedback
                     onPress={onRightIconPress}
-                    style={[styles.touchableButtonImage]}
+                    style={[styles.touchableButtonImage, styles.threeDotsMenuIconWidth]}
                     role={CONST.ROLE.BUTTON}
                     accessibilityLabel={rightIconAccessibilityLabel}
                     sentryLabel={rightIconSentryLabel ?? CONST.SENTRY_LABEL.BILLING_BANNER.RIGHT_ICON}
@@ -108,6 +108,7 @@ function BillingBanner({
         rightIconAccessibilityLabel,
         rightIconSentryLabel,
         styles.touchableButtonImage,
+        styles.threeDotsMenuIconWidth,
         theme.danger,
         theme.icon,
         theme.success,