feat: [91243] add agent promotion banners to workspace#91251
Conversation
This comment has been minimized.
This comment has been minimized.
|
🚧 @NicolasBonet has triggered a test Expensify/App build. You can view the workflow run here. |
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
This comment has been minimized.
This comment has been minimized.
|
@Expensify/design could I get some feedback about this? Workspace BannerNowI was thinking in removing the "Nuevo" (New) badge in mobile or moving it before the title, thoughts? 
Proposal
Rules BannerNowI am not so sure, maybe remove the "Pruebalo" (try it) button, and simply make the banner clickable? 
Proposal
|
|
Ideally we'd place the new badge inline with the title and the button on the promo should fold below on mobile: 
Are we reusing the same component we have elsewhere cause that folds nicely automatically I believe |
it’s the same component, will re check tomorrow and see if I missed something |
NicolasBonet
force-pushed
the
feat/91243-add-agent-promotion-banners-to-workspace
branch
from
9462865 to
78b0aba
Compare
|
@dubielzyk-expensify I was double checking and I wasn't able to find a perfect match for a component with all those things, do you remember where we could find one with a custom icon, close icon, CTA and such? I checked with Claude as well, and found nothing, the closest is a Banner component not used a lot in the app and it's still quite different. |
|
@NicolasBonet can you check and see if we have a "free trial" banner anywhere in the code? I think something like that could be a good starting point? |
|
🚧 @NicolasBonet has triggered a test Expensify/App build. You can view the workflow run here. |
@shawnborton This is what I was able to see, but it has no close icon and it's all defined inline in the component: 
I ended up changing the code I had and create it a re-usable component for other Agent promotional banners: 
|
|
There should be a free trial banner that is shown in the Inbox, typically on the Concierge chat or the #admins room? We might not use it anymore, but I could have sworn we did for the time-based discount or something? |
|
This is what I could find from Figma, but not sure what happened in the product: |
Found it after changing some code: 
But it's still not like the one I implemented, it's called BillingBanner and seems to be used only for subscription stuff with different usages and no close icon, I could try to make it work for our use-case in here, but could be more work than using the existing one, let me give it a try and get back to you! |
|
So @shawnborton in theory we could, but we would need to indeed change a lot of things in that component to make it work, specially for the places where it's used and the containers, we would need to tweak it a lot and add a lot of styles and embed the title using components to make it match, it's really not an ideal component to use for this case, and we probably would need to rename it as well as it won't be anymore a billing thing. PS: I found that the design doesn't work well with the badge been inline with the title, it works differently in mobile vs web, so looking into it. |
|
🚧 @NicolasBonet has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
|
Sounds good, feel free to build something new - ideally generic like we have it in Figma so we can use it in other places if needed. @dubielzyk-expensify can further direct you, but I think that's a good starting point! |
melvin-bot
Bot
requested review from
shubham1206agra and
trjExpensify
and removed request for
a team
|
@shubham1206agra Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
Reviewer Checklist
Screenshots/VideosScreen.Recording.2026-05-26.at.12.20.05.AM.movScreen.Recording.2026-05-26.at.12.25.06.AM.movScreen.Recording.2026-05-26.at.12.34.50.AM.mov |
|
@NicolasBonet Please address everything discussed here |
- Introduced new constants for AGENTS_WORKFLOWS_BANNER and AGENTS_RULES_BANNER in CONST. - Updated AgentPromotionalBanner component to require Sentry labels for CTA. - Refactored PolicyRulesPage and WorkspaceWorkflowsPage to use new constants for Sentry labels.
- Adjusted the margin of the badge in the AgentPromotionalBanner component for improved spacing. - Removed unnecessary whitespace in the title rendering for cleaner output.
- Changed button size from large to medium for better UI consistency.
|
@shubham1206agra @shawnborton replied and fixed
That is not the resolution you have in figma, it will expand until the next breaking point.
Done |
|
@shubham1206agra this should be good for another review |
@NicolasBonet Spacing is missing in native device |
|
🚧 @NicolasBonet has triggered a test Expensify/App build. You can view the workflow run here. |
|
🚧 @NicolasBonet has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
|
Fixed in all platforms: Screen.Recording.2026-05-26.at.9.50.39.AM.movScreen.Recording.2026-05-26.at.10.05.04.AM.movScreen.Recording.2026-05-26.at.10.03.07.AM.mov |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
|
||
| const hasCta = !!ctaText && !!onCtaPress; | ||
|
|
||
| const titleNode = useMemo( |
There was a problem hiding this comment.
❌ CLEAN-REACT-PATTERNS-0 (docs)
React Compiler is enabled in this codebase and automatically memoizes derived values. The useMemo wrapping titleNode (line 48) and rightComponent (line 66) is redundant — the compiler will handle caching these JSX expressions based on their captured dependencies.
Remove both useMemo calls and declare the values as plain expressions:
const titleNode = (
<View style={[styles.flexRow, styles.flexShrink1]}>
<Text style={[styles.textStrong]}>
{title}
<Badge ... />
</Text>
</View>
);Similarly for rightComponent — use a plain conditional expression instead of useMemo. Also remove the useMemo import from react (line 1).
Note: If this file does not compile with React Compiler, the manual memoization may be necessary until the compilation issue is resolved — verify with npm run react-compiler-compliance-check check-changed.
Reviewed at: 75575dd | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
yuwenmemon
deleted the
feat/91243-add-agent-promotion-banners-to-workspace
branch
|
🚧 @yuwenmemon has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
Just noticed that we're using the small button here: 
Should be using the regular button according to the mocks: 
The text underneath should also be label and not our regular body size. Lastly we should tighten up the spacing around the button and X button to be more inline with the mocks |
|
@MelvinBot Can you create a follow up PR for addressing #91251 (comment)? |
|
🤖 Follow-up PR created: #91795 Addresses the design feedback from
Please mark it as "Ready for review" when it is ready for review. |
7 participants
Explanation of Change
Adds two promotional banners to let users know about the existence of agents for workflows and rules:
Both banners are dismissable
Fixed Issues
$ #91243
PROPOSAL:#91243
Tests
Offline tests
No special test required.
QA Steps
Same as tests
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps./** comment above it */thisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
Screen.Recording.2026-05-20.at.5.42.41.PM.mov