refactor: Explain feature icon to match brand guidelines and update link press handling#83169
Conversation
|
Hey, I noticed you changed If you want to automatically generate translations for other locales, an Expensify employee will have to:
Alternatively, if you are an external contributor, you can run the translation script locally with your own OpenAI API key. To learn more, try running: npx ts-node ./scripts/generateTranslations.ts --helpTypically, you'd want to translate only what you changed by running |
There was a problem hiding this comment.
Pull request overview
This PR updates the Explain feature in automated Concierge messages to use a branded Sparkles icon instead of a sparkle emoji, removes bold formatting from the link text, and refactors the link press handling from HTML-based to component-based implementation.
Changes:
- Replaced HTML-based rendering with component-based approach using TextBlock, TextLinkBlock, and Icon components
- Added new Sparkles SVG icon asset and integrated it into the Expensify icons chunk
- Added "explain" translation key across all supported languages and removed the old "AskToExplain" HTML-based translation
- Added new
mr0halfspacing utility for 2px right margin
Reviewed changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/pages/inbox/report/ReportActionItemMessageWithExplain.tsx | Refactored from HTML-based to component-based rendering with TextBlock, TextLinkBlock, and Icon; replaced link handler logic |
| src/styles/utils/spacing.ts | Added mr0half utility for 2px right margin spacing |
| assets/images/sparkles.svg | Added new branded Sparkles icon SVG |
| src/components/Icon/chunks/expensify-icons.chunk.ts | Imported and exported new Sparkles icon |
| src/languages/*.ts (10 files) | Added common.explain translation and removed iou.AskToExplain HTML-based translation across all languages |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a1ee238f9d
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| <TextBlock | ||
| textStyles={[styles.chatItemMessage, styles.colorMuted]} | ||
| text={`${message}. `} | ||
| /> |
There was a problem hiding this comment.
In the actionHasReasoning path, the base message is now rendered through TextBlock as plain text, but this message can contain HTML links (for example modified-expense copy built from iou.basedOnMCC/iou.policyRulesModifiedFields.format). When those actions also include reasoning, users will see raw <a ...> tags and lose the ability to open those links, whereas the previous RenderHTML flow preserved clickable links.
Useful? React with 👍 / 👎.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
@FitseTLT I noticed that delaySubmissions message that's related to harvesting and contain help site url have the reasoning. But we're not handling that existing link in TextLinkBlock properly. This will potentially cause a blocker. I will raise a follow-up ASAP.
Codecov Report❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.
|
|
Can we see dark mode too just to check? Looking good to me though |
|
Here we go.. 
|
JmillsExpensify
left a comment
JmillsExpensify
left a comment
There was a problem hiding this comment.
No concerns with product behavior.
|
Screenshots look correct to me 👍 |
|
Looking good to me too 👍 |
|
I can take over based on https://expensify.slack.com/archives/C02NK2DQWUX/p1771968690980059 |
|
@samranahm pls merge main |
|
Resolving merge conflicts. |
|
@FitseTLT All yours. |
|
Failing typecheck not related to this PR. #83234 (comment) |
| <TextBlock | ||
| textStyles={[styles.chatItemMessage, styles.colorMuted]} | ||
| text={`${message}. `} | ||
| /> |
Reviewer Checklist
Screenshots/VideosAndroid: HybridApp
Android: mWeb Chrome
iOS: HybridAppiOS: mWeb Safari
MacOS: Chrome / Safari
|
|
Resolve conflicts @samranahm |
| billable: (value: boolean) => (value ? 'heeft de uitgave gemarkeerd als ‘door te belasten’' : 'heeft de uitgave gemarkeerd als ‘niet factureerbaar’'), | ||
| correctRateError: 'Los de tarieffout op en probeer het opnieuw.', | ||
| duplicateNonDefaultWorkspacePerDiemError: 'Je kunt dagvergoedingen niet dupliceren tussen werkruimtes, omdat de tarieven per werkruimte kunnen verschillen.', | ||
| rulesModifiedFields: { |
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
|
@marcaaron U can proceed |
marcaaron
left a comment
marcaaron
left a comment
There was a problem hiding this comment.
Woo! Looks great to me 🙇 Thanks everyone for their patience in figuring this out. Feel like we struck a good balance here.
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚧 @marcaaron 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! 🧪🧪
|
|
🚀 Deployed to staging by https://github.com/marcaaron in version: 9.3.28-0 🚀
|
|
🚀 Deployed to staging by https://github.com/marcaaron in version: 9.3.30-0 🚀
|
|
🚀 Deployed to production by https://github.com/blimpich in version: 9.3.30-3 🚀
|
Explanation of Change
Fixed Issues
$ #82171
PROPOSAL: N/A
Tests
Offline tests
QA Steps
// TODO: These must be filled out, or the issue title must include "[No QA]."
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand 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.Screenshots/Videos
Android: Native
Android.Native.mp4
Android: mWeb Chrome
Android.mWeb.Chrome.mp4
iOS: Native
IOS.Native.mp4
iOS: mWeb Safari
IOS.mWeb.Safari.mp4
MacOS: Chrome / Safari
macOS.Chrome.mp4