✨ app: add benefits section redesign with promo integration#1017
Conversation
🦋 Changeset detectedLatest commit: 9a4b983 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThis PR adds a May 2026 0% APR installment promo: promo utilities and query defaults, BenefitCard visual redesign with .webp backgrounds, a PromoSheet modal, promo-aware benefits filtering, Home orchestration to open installments (with manual-repayment handling), InstallmentsSheet/card UI updates, translations, and two changesets. ChangesMay 2026 0% APR Installment Promo
Sequence Diagram(s)sequenceDiagram
participant User
participant Home
participant PromoSheet
participant usePromoSheet
participant queryClient
participant PROMO
User->>Home: taps benefit / loads Home
Home->>usePromoSheet: read visible
usePromoSheet->>queryClient: get ['settings','promo-seen', PROMO.id]
Home->>PROMO: call isPromoActive()/isPromoted()
Home->>PromoSheet: open (if visible)
PromoSheet->>queryClient: set ['settings','promo-seen', PROMO.id] on dismiss
Home->>InstallmentsSheet: openInstallments() (may defer via pending ref)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 4
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 6a2bbf0d-0e6b-49e7-9b32-26cf48165cdc
⛔ Files ignored due to path filters (1)
src/assets/images/exa-logo.svgis excluded by!**/*.svg
📒 Files selected for processing (23)
.changeset/large-keys-attack.md.changeset/lemon-hornets-lie.md.changeset/old-signs-hide.mdsrc/assets/images/airalo.webpsrc/assets/images/exa-intro.webpsrc/assets/images/exa-pay.webpsrc/assets/images/pax.webpsrc/assets/images/types.d.tssrc/assets/images/visa.webpsrc/components/benefits/BenefitCard.tsxsrc/components/benefits/BenefitSheet.tsxsrc/components/benefits/BenefitsSection.tsxsrc/components/home/CardStatus.tsxsrc/components/home/Home.tsxsrc/components/home/InstallmentsSheet.tsxsrc/components/home/PromoSheet.tsxsrc/i18n/es-AR.jsonsrc/i18n/es.jsonsrc/i18n/pt.jsonsrc/utils/promo.tssrc/utils/queryClient.tssrc/utils/server.tssrc/utils/usePromoSheet.ts
There was a problem hiding this comment.
Code Review
This pull request introduces a new "Exa Card" benefit and a promotional "0% interest" campaign for installments. Key updates include a redesign of the BenefitCard component with support for background images and gradients, the implementation of a PromoSheet modal to announce the offer, and visual enhancements to the InstallmentsSheet and CardStatus components to highlight promoted installment plans. Additionally, new utility logic and hooks were added to manage promotional state and visibility across the application. Feedback was provided to replace hardcoded hex colors in the BenefitCard with Tamagui theme tokens to ensure better consistency and theme support.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5501306eda
ℹ️ 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".
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #1017 +/- ##
==========================================
- Coverage 73.09% 71.65% -1.45%
==========================================
Files 241 243 +2
Lines 10267 10813 +546
Branches 3375 3590 +215
==========================================
+ Hits 7505 7748 +243
- Misses 2458 2761 +303
Partials 304 304
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
src/components/benefits/BenefitsSection.tsx (1)
186-189: 🧹 Nitpick | 🔵 Trivial | 💤 Low valueGuard is now redundant due to filtering logic.
The check on line 186 (
if (item.id === "exa" && onExaPress)) is technically redundant because line 126 already filters out the exa benefit whenonExaPressis missing. When!onExaPress, the exa item cannot appear in thebenefitsarray, so this branch cannot be reached withitem.id === "exa".Optional simplification
Since the exa benefit is filtered out when
onExaPressis missing:- if (item.id === "exa" && onExaPress) { + if (item.id === "exa") { - onExaPress(); + onExaPress?.(); return; }However, keeping the explicit check provides defense-in-depth and is perfectly acceptable.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 09cf18f6-9f06-43fd-874a-cd6dfb01d940
📒 Files selected for processing (15)
.changeset/cool-badgers-yawn.mdsrc/components/benefits/BenefitCard.tsxsrc/components/benefits/BenefitSheet.tsxsrc/components/benefits/BenefitsSection.tsxsrc/components/home/CardStatus.tsxsrc/components/home/Home.tsxsrc/components/home/InstallmentsSheet.tsxsrc/components/home/PromoSheet.tsxsrc/i18n/es-AR.jsonsrc/i18n/es.jsonsrc/i18n/pt.jsonsrc/utils/promo.tssrc/utils/queryClient.tssrc/utils/server.tssrc/utils/usePromoSheet.ts
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c27ae16295
ℹ️ 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".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: cb89deb5b4
ℹ️ 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".
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 24b90d78-b081-441e-b620-d28964bea035
⛔ Files ignored due to path filters (1)
src/assets/images/exa-logo.svgis excluded by!**/*.svg
📒 Files selected for processing (22)
.changeset/cool-badgers-yawn.md.changeset/lemon-hornets-lie.mdsrc/assets/images/airalo.webpsrc/assets/images/exa-intro.webpsrc/assets/images/exa-pay.webpsrc/assets/images/pax.webpsrc/assets/images/types.d.tssrc/assets/images/visa.webpsrc/components/benefits/BenefitCard.tsxsrc/components/benefits/BenefitSheet.tsxsrc/components/benefits/BenefitsSection.tsxsrc/components/home/CardStatus.tsxsrc/components/home/Home.tsxsrc/components/home/InstallmentsSheet.tsxsrc/components/home/PromoSheet.tsxsrc/i18n/es-AR.jsonsrc/i18n/es.jsonsrc/i18n/pt.jsonsrc/utils/promo.tssrc/utils/queryClient.tssrc/utils/server.tssrc/utils/usePromoSheet.ts
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8ba0f4ed31
ℹ️ 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".
There was a problem hiding this comment.
Actionable comments posted: 2
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: b298532a-ab51-4d81-99b6-e5c99d43f43e
⛔ Files ignored due to path filters (1)
src/assets/images/exa-logo.svgis excluded by!**/*.svg
📒 Files selected for processing (22)
.changeset/cool-badgers-yawn.md.changeset/lemon-hornets-lie.mdsrc/assets/images/airalo.webpsrc/assets/images/exa-intro.webpsrc/assets/images/exa-pay.webpsrc/assets/images/pax.webpsrc/assets/images/types.d.tssrc/assets/images/visa.webpsrc/components/benefits/BenefitCard.tsxsrc/components/benefits/BenefitSheet.tsxsrc/components/benefits/BenefitsSection.tsxsrc/components/home/CardStatus.tsxsrc/components/home/Home.tsxsrc/components/home/InstallmentsSheet.tsxsrc/components/home/PromoSheet.tsxsrc/i18n/es-AR.jsonsrc/i18n/es.jsonsrc/i18n/pt.jsonsrc/utils/promo.tssrc/utils/queryClient.tssrc/utils/server.tssrc/utils/usePromoSheet.ts
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2fac4d2ad1
ℹ️ 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".
9ee1dd1 to
d662fd9
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: e76c1890-f5fb-454d-a248-1c7ec92d10ac
⛔ Files ignored due to path filters (1)
src/assets/images/exa-logo.svgis excluded by!**/*.svg
📒 Files selected for processing (22)
.changeset/cool-badgers-yawn.md.changeset/lemon-hornets-lie.mdsrc/assets/images/airalo.webpsrc/assets/images/exa-intro.webpsrc/assets/images/exa-pay.webpsrc/assets/images/pax.webpsrc/assets/images/types.d.tssrc/assets/images/visa.webpsrc/components/benefits/BenefitCard.tsxsrc/components/benefits/BenefitSheet.tsxsrc/components/benefits/BenefitsSection.tsxsrc/components/home/CardStatus.tsxsrc/components/home/Home.tsxsrc/components/home/InstallmentsSheet.tsxsrc/components/home/PromoSheet.tsxsrc/i18n/es-AR.jsonsrc/i18n/es.jsonsrc/i18n/pt.jsonsrc/utils/promo.tssrc/utils/queryClient.tssrc/utils/server.tssrc/utils/usePromoSheet.ts
closes #989
Summary by CodeRabbit
New Features
Style
Localization
Assets
Chores