Skip to content

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

Open
franm91 wants to merge 2 commits into
mainfrom
benefits
Open

✨ app: add benefits section redesign with promo integration#1017
franm91 wants to merge 2 commits into
mainfrom
benefits

Conversation

@franm91
Copy link
Copy Markdown
Member

@franm91 franm91 commented May 14, 2026

Summary by CodeRabbit

  • New Features

    • Added limited-time 0% interest installment promotion (through May, with interest reimbursed in early June).
    • Added promotional sheet to inform users about the 0% APR offer.
    • Added promotional badge to pay mode selection.
  • Style

    • Redesigned benefit cards with new background images and updated typography.
  • Localization

    • Updated translations in Spanish, Spanish (Argentina), and Portuguese for promo messaging and installment options.

Review Change Stack

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 14, 2026

🦋 Changeset detected

Latest commit: cb89deb

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

Warning

Rate limit exceeded

@franm91 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 1 minute and 12 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 16fa7e6f-b1a2-46d2-9682-ddad853321c3

📥 Commits

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

📒 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

Walkthrough

This PR introduces a time-limited May 2026 0% APR installment promotion for Exa Card users. It adds promo state utilities, redesigns benefit cards with image backgrounds, creates a promo modal, filters benefit visibility based on promo status, orchestrates installments flow through home screen, and adds supporting translations across three locales.

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 defines May 2026 campaign with 1/2/3 installments and June 1 expiration; isPromoActive() and isPromoted() gate feature behind date and e2e bypass; usePromoSheet() tracks seen state; queryClient defaults persist promo-seen cache; getCard() syncs installment mode to query cache.
Benefit cards visual redesign
src/assets/images/types.d.ts, src/components/benefits/BenefitCard.tsx
.webp module declaration; BenefitCard replaces solid background with expo-image and linear-gradient overlay, refactors typography to subHeadline/title2 variants with theme colors, updates spacing and overflow clipping.
Benefits data schema and promo filtering
src/components/benefits/BenefitsSection.tsx
BENEFITS array restructured with standardized background, descriptions, and link fields; BenefitsSection accepts optional onExaPress prop and computes filtered benefits list excluding exa when promo inactive; PaginationDot accepts explicit length prop; exa benefit press calls onExaPress() instead of opening sheet.
Benefit sheet conditional rendering
src/components/benefits/BenefitSheet.tsx
Wraps benefit.descriptions in presence check; primary button returns early if benefit.url is missing to prevent invalid operations.
Promo sheet modal component
src/components/home/PromoSheet.tsx
New controlled ModalSheet displaying hero image, translated title and i18n-formatted currency description, primary CTA (close then call onActionPress), and secondary "Learn more" link opening Intercom article with error handling.
Home screen promo and installments orchestration
src/components/home/Home.tsx
Wires PromoSheet and usePromoSheet; introduces pendingSheetOpenRef for coordinating sheet transitions; queries lastInstallments setting; computes spotlightVisible and promoSheetOpen from card mode and promo state; implements openInstallments() with branching logic for promo/spotlight/manual-repayment flows; connects BenefitsSection onExaPress; refactors ManualRepaymentSheet to clear pending flags and conditionally open installments sheet.
Card status and installments promo display
src/components/home/CardStatus.tsx, src/components/home/InstallmentsSheet.tsx
CardStatus renders "0% interest" badge when installment mode is promoted; InstallmentsSheet shows conditional promo banner with Intercom link, computes per-installment rateLabel and promotion status, applies promo-derived accent colors, and displays "0% APR*" with optional line-through reimbursed rate for promoted installments.
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
Added promo labels, installment options, limited-time messaging, and Pay Later copy across Spanish (Spain), Spanish (Argentina), and Portuguese locales; changesets document patch releases for benefits redesign and promo feature.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • exactly/exa#634: Benefits component work that established the foundational BenefitCard, BenefitSheet, and BenefitsSection structure now being redesigned and extended with promo logic.
  • exactly/exa#701: Prior touchpoints on BenefitsSection.tsx pagination and carousel logic that the current PR refactors with PaginationDot prop changes and filtered benefits rendering.

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 title accurately describes the primary changes: benefits section redesign and promo integration are evident throughout the changeset, including new component styling, promo utilities, and updated translations.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ 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

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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
@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 60.00000% with 38 lines in your changes missing coverage. Please review.
✅ Project coverage is 72.05%. Comparing base (c4d553a) to head (cb89deb).
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
src/components/home/Home.tsx 31.03% 20 Missing ⚠️
src/components/home/InstallmentsSheet.tsx 68.42% 6 Missing ⚠️
src/components/home/PromoSheet.tsx 37.50% 5 Missing ⚠️
src/components/benefits/BenefitsSection.tsx 60.00% 2 Missing ⚠️
src/utils/usePromoSheet.ts 66.66% 2 Missing ⚠️
src/components/benefits/BenefitSheet.tsx 75.00% 1 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   72.23%   72.05%   -0.19%     
==========================================
  Files         240      243       +3     
  Lines        9519     9590      +71     
  Branches     3082     3118      +36     
==========================================
+ Hits         6876     6910      +34     
- Misses       2369     2406      +37     
  Partials      274      274              
Flag Coverage Δ
e2e 72.05% <60.00%> (+4.96%) ⬆️

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

1 participant