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>

Author: MelvinBot

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>