Conversation
🦋 Changeset detectedLatest commit: fcfdce3 The changes in this PR will be included in the next version bump. 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:
WalkthroughComprehensive feature release introducing installments/pay-later payment modes, redesigned home screen with new CardStatus and PortfolioSummary components, font unification to SplineSans, widespread design token standardization across spacing, new payment-related UI sheets, hook refactoring, and Spanish translation expansion. Includes Maestro E2E test updates validating new payment flows. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Home as Home Component
participant CardStatus as CardStatus Component
participant PayModeSheet as PayModeSheet
participant InstallmentsSheet as InstallmentsSheet
participant useInstallmentRates as useInstallmentRates Hook
participant mutateMode as setCardMode Mutation
participant Backend as Backend API
User->>Home: Opens Home Screen
Home->>CardStatus: Renders with mode, collateral, creditLimit
User->>CardStatus: Taps "Now/Later" Toggle
CardStatus->>PayModeSheet: Opens mode selection
User->>PayModeSheet: Selects "Pay Later"
PayModeSheet->>CardStatus: Calls onModeChange
CardStatus->>InstallmentsSheet: Opens installment selector
User->>InstallmentsSheet: Selects installment count
InstallmentsSheet->>useInstallmentRates: Requests APR for selection
useInstallmentRates->>Backend: Queries market data
Backend-->>useInstallmentRates: Returns rates, utilization
useInstallmentRates-->>InstallmentsSheet: Returns payment schedule
InstallmentsSheet->>User: Displays APR and payments
User->>InstallmentsSheet: Confirms installment count
InstallmentsSheet->>mutateMode: Calls onModeChange(installmentCount)
mutateMode->>Backend: POST card mode change
Backend-->>mutateMode: Confirms update, returns new limits
mutateMode->>Home: Updates state optimistically
Home->>CardStatus: Re-renders with new mode/limits
CardStatus-->>User: Displays updated spending limit
Estimated code review effort🎯 4 (Complex) | ⏱️ ~75 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 |
Summary of ChangesHello @dieguezguille, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request delivers a comprehensive redesign of the application's core user interface, specifically targeting the home and payments sections. The changes aim to modernize the application's appearance, improve navigation, and introduce new functionalities such as an installments calculator and enhanced card management options. The update focuses on providing a more intuitive and visually appealing experience for users interacting with their financial data and card services. Highlights
Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
✅ All tests passed. |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Greptile Summaryredesigned home screen with new installments payment system and visual refresh
Confidence Score: 4/5
Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
Start[User opens Home screen] --> CardStatus[CardStatus Component]
CardStatus --> Toggle{Pay Mode Toggle}
Toggle -->|Now mode = 0| DebitView[Shows Spending Limit]
Toggle -->|Later mode > 0| CreditView[Shows Credit Limit]
Toggle --> InstallmentsButton[User taps Later toggle]
InstallmentsButton -->|mode = 0| SetMode[Set mode to lastInstallments ?? 1]
InstallmentsButton -->|mode > 0| OpenSheet[Open InstallmentsSheet]
OpenSheet --> SelectInstallments[InstallmentsSheet]
SelectInstallments --> LoadRates[useInstallmentRates hook]
LoadRates --> CalcRates[Calculate APR for 1-12 installments]
CalcRates --> Display[Display horizontal scroll cards]
Display --> UserSelect[User selects installment count]
UserSelect --> UpdateMode[Call onModeChange with selected count]
UpdateMode --> MutateMode[mutateMode API call]
MutateMode --> UpdateCache[Update queryClient cache]
CardStatus --> LearnMore[User taps Learn More]
LearnMore --> PayModeSheet[PayModeSheet Component]
PayModeSheet --> ExplainModes[Explain Now vs Later modes]
CreditView --> Payment[User makes purchase]
Payment --> CreateDebt[Debt created with maturity]
CreateDebt --> HomePayments[OverduePayments/UpcomingPayments]
HomePayments --> PaymentClick[User clicks payment]
PaymentClick --> PayComponent[Pay Component]
PayComponent --> AssetSelect[Select payment asset]
AssetSelect --> CalcRoute[Calculate swap route if needed]
CalcRoute --> RepayDebt[Execute repayAtMaturity]
Last reviewed commit: 1220ff6 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
dieguezguille
force-pushed
the
home
branch
2 times, most recently
from
0d1fe98 to
5b91963
Compare
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: fcfdce3de2
ℹ️ 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".
| onPress={() => { | ||
| setSelected(installment); | ||
| selectionAsync().catch(reportError); |
There was a problem hiding this comment.
when useInstallmentRates returns an installment with payments === undefined, the card correctly renders N/A, but this press handler still lets the user select it and the confirm action later forwards that mode to onModeChange. in the scenario where maturity pools are missing for a given count, users can still apply a plan the UI has already classified as unavailable, which creates inconsistent state and can surface failures later when trying to use that pay-later mode.
Useful? React with 👍 / 👎.
| marginVertical="$s4" | ||
| onLayout={(event) => setWidth(event.nativeEvent.layout.width)} | ||
| > | ||
| <XStack width={width * 2} x={mode > 0 ? -width : 0} animation="default" animateOnly={["transform"]}> |
There was a problem hiding this comment.
🟡 LimitPaginator briefly shows wrong panel on initial mount in credit mode
In CardStatus.tsx, the LimitPaginator component initialises width to 0 via useState(0). On the first render, both inner XStack panels have width={0}, so nothing is visible. After onLayout fires and sets width to the real value, the panels instantly become visible (width is not animated), but the x transform from 0 to -width IS animated via animation="default" animateOnly={["transform"]} at src/components/home/CardStatus.tsx:265. This means when mode > 0 (credit mode), users briefly see the spending-limit panel slide out and the credit-limit panel slide in, instead of the credit-limit panel appearing directly.
Was this helpful? React with 👍 or 👎 to provide feedback.
| overflow="hidden" | ||
| alignItems="center" | ||
| justifyContent="flex-end" | ||
| backgroundColor="#1A181A" |
There was a problem hiding this comment.
🟡 Hardcoded hex color violates mandatory design-token rule
The .agents/rules/mobile.md rule file states: "design tokens only: all styling must use predefined tokens from tamagui.config.ts. never use hardcoded values." with explicit examples ❌ color: '#ff0000'. src/components/home/CardStatus.tsx:91 uses backgroundColor="#1A181A" — a hardcoded hex color in JSX where tamagui token props are available.
Was this helpful? React with 👍 or 👎 to provide feedback.
1 participant
closes #501, closes #599, closes #713
Summary by CodeRabbit
New Features
Style & UI Improvements
Bug Fixes
Greptile Summary
this pr implements a comprehensive home screen redesign focused on the new pay mode selection feature, allowing users to toggle between instant payments (pay now/debit mode) and installment-based credit (pay later/credit mode). the changes introduce:
Amountcomponent, addedButtonColumnandButtonLabelvariants to styled button, redesigned portfolio summary with asset logo previewsthe implementation integrates with existing financial calculations from
@exactly/liband maintains consistency with the project's established patterns.Confidence Score: 4/5
useInstallmentRates.tsline 29 which has already been flagged in previous comments.Important Files Changed
Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A[Home Screen] --> B{Card Exists?} B -->|Yes| C[CardStatus Component] C --> D[Pay Mode Toggle] D --> E{User Selects Mode} E -->|Pay Now| F[Debit Mode - mode=0] E -->|Pay Later| G[Credit Mode - mode>0] G --> H[InstallmentsSheet] H --> I[useInstallmentRates Hook] I --> J[Calculate APR for 1-12 installments] J --> K[Display rates in scrollable cards] K --> L[User selects installment count] L --> M[Update card mode via setCardMode API] C --> N[LimitPaginator] N --> O{Mode Check} O -->|mode=0| P[Show Spending Limit] O -->|mode>0| Q[Show Credit Limit] D --> R[Learn More] R --> S[PayModeSheet] S --> T[Explain Pay Now vs Pay Later] A --> U[PortfolioSummary] U --> V[Display assets with Amount component] V --> W[Show APR & collateral]Last reviewed commit: b87e85f