Skip to content

fix: adjust agent promotional banner UI to match design mocks #91795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
MelvinBot wants to merge 3 commits into
base: main
Choose a base branch
from
+49 −24
Draft

fix: adjust agent promotional banner UI to match design mocks #91795

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4848897
Update agent promotional banner UI to match design mocks
MelvinBot May 27, 2026
9dee2f2
Remove redundant gap3 style from AgentPromotionalBanner
MelvinBot May 27, 2026
111146c
Fix right-side spacing: 16px gap between button and dismiss icon
MelvinBot May 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 49 additions & 24 deletions src/components/AgentPromotionalBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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']);
Expand All @@ -63,46 +68,66 @@ 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
small
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}>
<BillingBanner
icon={illustrations.AiBot}
title={titleNode}
subtitle={subtitle}
subtitleStyle={[styles.mt1]}
style={[styles.borderRadiusComponentLarge, styles.gap4]}
rightIcon={expensifyIcons.Close}
onRightIconPress={onDismiss}
rightIconAccessibilityLabel={translate('common.dismiss')}
rightIconSentryLabel={dismissSentryLabel}
subtitleStyle={[styles.mt1, styles.textLabel]}
style={[styles.borderRadiusComponentLarge]}
rightComponent={rightComponent}
/>
</View>
Expand Down
Loading