Skip to content

✨ app: add benefits section redesign with promo integration#1017

Merged
cruzdanilo merged 2 commits into
mainfrom
benefits
May 20, 2026
Merged

✨ app: add benefits section redesign with promo integration#1017
cruzdanilo merged 2 commits into
mainfrom
benefits

Conversation

@franm91
Copy link
Copy Markdown
Member

@franm91 franm91 commented May 14, 2026

closes #989

Summary by CodeRabbit

  • New Features

    • Added a limited-time 0% interest promo with a Promo sheet, promo visibility controls, promo-aware UI across installments, benefits, and pay-mode flows, and a “Learn more” article link.
    • Benefits can trigger a special Exa action when promo is active.
  • Style

    • Redesigned benefit cards with background images, gradient overlay, fixed-height layout, and updated typography.
  • Localization

    • Added/updated Spanish (es, es-AR) and Portuguese translations for promo and installment messaging.
  • Assets

    • Added support for .webp benefit images.
  • Chores

    • Added release notes entries for the patch release.

Review Change Stack

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 14, 2026

🦋 Changeset detected

Latest commit: 9a4b983

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@exactly/mobile Patch

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

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 14, 2026

Note

Reviews paused

It 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 reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

Walkthrough

This 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.

Changes

May 2026 0% APR Installment Promo

Layer / File(s) Summary
Promo utility foundation
src/utils/promo.ts, src/utils/usePromoSheet.ts, src/utils/queryClient.ts, src/utils/server.ts
PROMO constant and helpers (isPromoActive, isPromoted), usePromoSheet() for promo-seen persistence, queryClient defaults for ["settings","promo-seen"], and getCard() syncing installments mode to query cache.
Benefit cards visual redesign
src/assets/images/types.d.ts, src/components/benefits/BenefitCard.tsx
Adds .webp module declaration; BenefitCard now renders background via expo-image with a LinearGradient overlay, uses theme-driven colors and updated typography, and applies fixed height/clipping.
Benefits data model and promo filtering
src/components/benefits/BenefitsSection.tsx
Standardizes BENEFITS entries (background, descriptions), computes filtered benefits based on isPromoActive() and optional onExaPress, updates PaginationDot to accept length, and special-cases Exa press to call onExaPress().
Benefit sheet conditional rendering
src/components/benefits/BenefitSheet.tsx
Render benefit.descriptions only when present and short-circuit primary action when benefit.url is missing.
Promo sheet modal component
src/components/home/PromoSheet.tsx
New controlled PromoSheet with hero image, translated copy (currency-formatted limit), primary CTA (close then onActionPress), and "Learn more" Intercom link with error handling.
Home screen promo & installments orchestration
src/components/home/Home.tsx
Wires PromoSheet and usePromoSheet, adds pendingSheetOpenRef, queries lastInstallments, computes spotlight/promo visibility, implements openInstallments() (manual-repayment branching and deferred opens), passes onExaPress to BenefitsSection, and updates manual repayment flow.
Card status and installments promo display
src/components/home/CardStatus.tsx, src/components/home/InstallmentsSheet.tsx
CardStatus shows "0% interest" badge when promoted; InstallmentsSheet renders promo banner, derives per-installment rateLabel and promoted, applies promo accent colors, and updates APR rendering for promoted/non-promoted/missing-rate states.
Internationalization and release metadata
src/i18n/es-AR.json, src/i18n/es.json, src/i18n/pt.json, .changeset/lemon-hornets-lie.md, .changeset/cool-badgers-yawn.md
Adds/updates Spanish (es, es-AR) and Portuguese promo strings and adds two changesets documenting the patch releases and changelog notes.

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)
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • exactly/exa#634: Prior benefits UI work that modified BenefitCard/BenefitSheet/BenefitsSection structure, related to the redesign and data-model changes.
  • exactly/exa#995: Recent CardStatus edits; both PRs modify CardStatus UI/logic and badge behavior.

Suggested reviewers

  • cruzdanilo
  • dieguezguille
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title clearly and concisely summarizes the main changes: adding a benefits section redesign with promo integration, matching the core functionality implemented across multiple components and files.
Linked Issues check ✅ Passed The PR successfully implements all in-scope requirements from #989: home screen promo banner in benefits section (PromoSheet), Pay Later flow with 0% interest UI treatment (InstallmentsSheet), accurate term reflection, and user understanding through clear labeling.
Out of Scope Changes check ✅ Passed All changes are directly scoped to the promo integration and benefits redesign objectives. No unrelated features or refactoring activities are present; all modifications support the stated design goals.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch benefits

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4


ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 6a2bbf0d-0e6b-49e7-9b32-26cf48165cdc

📥 Commits

Reviewing files that changed from the base of the PR and between c4d553a and 5501306.

⛔ Files ignored due to path filters (1)
  • src/assets/images/exa-logo.svg is excluded by !**/*.svg
📒 Files selected for processing (23)
  • .changeset/large-keys-attack.md
  • .changeset/lemon-hornets-lie.md
  • .changeset/old-signs-hide.md
  • src/assets/images/airalo.webp
  • src/assets/images/exa-intro.webp
  • src/assets/images/exa-pay.webp
  • src/assets/images/pax.webp
  • src/assets/images/types.d.ts
  • src/assets/images/visa.webp
  • src/components/benefits/BenefitCard.tsx
  • src/components/benefits/BenefitSheet.tsx
  • src/components/benefits/BenefitsSection.tsx
  • src/components/home/CardStatus.tsx
  • src/components/home/Home.tsx
  • src/components/home/InstallmentsSheet.tsx
  • src/components/home/PromoSheet.tsx
  • src/i18n/es-AR.json
  • src/i18n/es.json
  • src/i18n/pt.json
  • src/utils/promo.ts
  • src/utils/queryClient.ts
  • src/utils/server.ts
  • src/utils/usePromoSheet.ts

Comment thread .changeset/large-keys-attack.md Outdated
Comment thread src/components/benefits/BenefitsSection.tsx
Comment thread src/i18n/es.json Outdated
Comment thread src/i18n/pt.json Outdated
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread src/components/benefits/BenefitCard.tsx Outdated
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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".

Comment thread src/components/benefits/BenefitsSection.tsx
Comment thread src/components/benefits/BenefitsSection.tsx
Comment thread src/utils/promo.ts
Comment thread src/components/home/InstallmentsSheet.tsx
Comment thread src/components/home/Home.tsx Outdated
Comment thread src/components/home/Home.tsx Outdated
@franm91 franm91 changed the title Benefits Add benefits section redesign with promo integration May 14, 2026
@sentry
Copy link
Copy Markdown

sentry Bot commented May 14, 2026

Codecov Report

❌ Patch coverage is 58.58586% with 41 lines in your changes missing coverage. Please review.
✅ Project coverage is 71.65%. Comparing base (75c1fc8) to head (9a4b983).
⚠️ Report is 3 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
src/components/home/Home.tsx 34.61% 17 Missing ⚠️
src/components/home/PromoSheet.tsx 30.00% 7 Missing ⚠️
src/components/home/InstallmentsSheet.tsx 68.42% 6 Missing ⚠️
src/components/benefits/BenefitSheet.tsx 37.50% 5 Missing ⚠️
src/components/benefits/BenefitsSection.tsx 71.42% 4 Missing ⚠️
src/components/home/CardStatus.tsx 92.85% 1 Missing ⚠️
src/utils/queryClient.ts 50.00% 1 Missing ⚠️
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              
Flag Coverage Δ
e2e 71.65% <58.58%> (-1.45%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@cruzdanilo cruzdanilo changed the title Add benefits section redesign with promo integration ✨ app: add benefits section redesign with promo integration May 14, 2026
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

♻️ Duplicate comments (1)
src/components/benefits/BenefitsSection.tsx (1)

186-189: 🧹 Nitpick | 🔵 Trivial | 💤 Low value

Guard 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 when onExaPress is missing. When !onExaPress, the exa item cannot appear in the benefits array, so this branch cannot be reached with item.id === "exa".

Optional simplification

Since the exa benefit is filtered out when onExaPress is 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

📥 Commits

Reviewing files that changed from the base of the PR and between 5501306 and 7b64199.

📒 Files selected for processing (15)
  • .changeset/cool-badgers-yawn.md
  • src/components/benefits/BenefitCard.tsx
  • src/components/benefits/BenefitSheet.tsx
  • src/components/benefits/BenefitsSection.tsx
  • src/components/home/CardStatus.tsx
  • src/components/home/Home.tsx
  • src/components/home/InstallmentsSheet.tsx
  • src/components/home/PromoSheet.tsx
  • src/i18n/es-AR.json
  • src/i18n/es.json
  • src/i18n/pt.json
  • src/utils/promo.ts
  • src/utils/queryClient.ts
  • src/utils/server.ts
  • src/utils/usePromoSheet.ts

Comment thread src/components/home/InstallmentsSheet.tsx
Comment thread src/components/home/PromoSheet.tsx
Comment thread src/utils/promo.ts
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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".

Comment thread src/components/home/Home.tsx Outdated
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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".

Comment thread src/utils/promo.ts
@franm91 franm91 changed the base branch from main to gas May 15, 2026 20:36
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1


ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 24b90d78-b081-441e-b620-d28964bea035

📥 Commits

Reviewing files that changed from the base of the PR and between 7b64199 and d6c04e5.

⛔ Files ignored due to path filters (1)
  • src/assets/images/exa-logo.svg is excluded by !**/*.svg
📒 Files selected for processing (22)
  • .changeset/cool-badgers-yawn.md
  • .changeset/lemon-hornets-lie.md
  • src/assets/images/airalo.webp
  • src/assets/images/exa-intro.webp
  • src/assets/images/exa-pay.webp
  • src/assets/images/pax.webp
  • src/assets/images/types.d.ts
  • src/assets/images/visa.webp
  • src/components/benefits/BenefitCard.tsx
  • src/components/benefits/BenefitSheet.tsx
  • src/components/benefits/BenefitsSection.tsx
  • src/components/home/CardStatus.tsx
  • src/components/home/Home.tsx
  • src/components/home/InstallmentsSheet.tsx
  • src/components/home/PromoSheet.tsx
  • src/i18n/es-AR.json
  • src/i18n/es.json
  • src/i18n/pt.json
  • src/utils/promo.ts
  • src/utils/queryClient.ts
  • src/utils/server.ts
  • src/utils/usePromoSheet.ts

Comment thread src/components/home/InstallmentsSheet.tsx Outdated
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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".

Comment thread src/components/home/Home.tsx
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2


ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: b298532a-ab51-4d81-99b6-e5c99d43f43e

📥 Commits

Reviewing files that changed from the base of the PR and between d6c04e5 and 2fac4d2.

⛔ Files ignored due to path filters (1)
  • src/assets/images/exa-logo.svg is excluded by !**/*.svg
📒 Files selected for processing (22)
  • .changeset/cool-badgers-yawn.md
  • .changeset/lemon-hornets-lie.md
  • src/assets/images/airalo.webp
  • src/assets/images/exa-intro.webp
  • src/assets/images/exa-pay.webp
  • src/assets/images/pax.webp
  • src/assets/images/types.d.ts
  • src/assets/images/visa.webp
  • src/components/benefits/BenefitCard.tsx
  • src/components/benefits/BenefitSheet.tsx
  • src/components/benefits/BenefitsSection.tsx
  • src/components/home/CardStatus.tsx
  • src/components/home/Home.tsx
  • src/components/home/InstallmentsSheet.tsx
  • src/components/home/PromoSheet.tsx
  • src/i18n/es-AR.json
  • src/i18n/es.json
  • src/i18n/pt.json
  • src/utils/promo.ts
  • src/utils/queryClient.ts
  • src/utils/server.ts
  • src/utils/usePromoSheet.ts

Comment thread src/components/home/CardStatus.tsx
Comment thread src/i18n/es-AR.json Outdated
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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".

Comment thread src/components/home/CardStatus.tsx
Comment thread src/components/home/Home.tsx Outdated
@cruzdanilo cruzdanilo linked an issue May 19, 2026 that may be closed by this pull request
@dieguezguille dieguezguille force-pushed the gas branch 2 times, most recently from 9ee1dd1 to d662fd9 Compare May 20, 2026 16:26
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1


ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: e76c1890-f5fb-454d-a248-1c7ec92d10ac

📥 Commits

Reviewing files that changed from the base of the PR and between 2fac4d2 and 859f350.

⛔ Files ignored due to path filters (1)
  • src/assets/images/exa-logo.svg is excluded by !**/*.svg
📒 Files selected for processing (22)
  • .changeset/cool-badgers-yawn.md
  • .changeset/lemon-hornets-lie.md
  • src/assets/images/airalo.webp
  • src/assets/images/exa-intro.webp
  • src/assets/images/exa-pay.webp
  • src/assets/images/pax.webp
  • src/assets/images/types.d.ts
  • src/assets/images/visa.webp
  • src/components/benefits/BenefitCard.tsx
  • src/components/benefits/BenefitSheet.tsx
  • src/components/benefits/BenefitsSection.tsx
  • src/components/home/CardStatus.tsx
  • src/components/home/Home.tsx
  • src/components/home/InstallmentsSheet.tsx
  • src/components/home/PromoSheet.tsx
  • src/i18n/es-AR.json
  • src/i18n/es.json
  • src/i18n/pt.json
  • src/utils/promo.ts
  • src/utils/queryClient.ts
  • src/utils/server.ts
  • src/utils/usePromoSheet.ts

Comment thread src/components/home/Home.tsx Outdated
Base automatically changed from gas to main May 20, 2026 17:59
@cruzdanilo cruzdanilo merged commit 9a4b983 into main May 20, 2026
10 of 12 checks passed
@cruzdanilo cruzdanilo deleted the benefits branch May 20, 2026 18:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ui: show 0% interest promo in-app

2 participants