Skip to content

fix(ramps): match Build Quote payment pill to payment selection modal#28392

Merged
amitabh94 merged 10 commits into
mainfrom
fix/unified-buy-v2-payment-pill-icons
Apr 4, 2026
Merged

fix(ramps): match Build Quote payment pill to payment selection modal#28392
amitabh94 merged 10 commits into
mainfrom
fix/unified-buy-v2-payment-pill-icons

Conversation

@amitabh94

@amitabh94 amitabh94 commented Apr 3, 2026

Copy link
Copy Markdown
Contributor

Description

Unified Buy v2 Build Quote on main shows the generic card icon in the payment pill even when a real method (e.g. Apple Pay) is selected, because the pill did not receive paymentMethod.

This PR passes selectedPaymentMethod into PaymentMethodPill, which renders PaymentMethodIcon the same way as PaymentMethodListItem in the payment selection modal: paymentMethodType with the same cast, and colors.primary.default for the icon (parity with a selected row in the sheet). No extra parsing helpers and no Aggregator changes.

Changelog

CHANGELOG entry: Fixed payment method icon on Buy Build Quote to match the payment selection modal

Related issues

Refs: TRAM-3401

Manual testing steps

Feature: Unified Buy Build Quote payment pill

  Scenario: Pill matches selected method in payment modal
    Given the user is on Build Quote with a payment method selected
    When they compare the pill leading icon to that method’s row in the payment selection modal
    Then the glyph and treatment match (same PaymentMethodIcon path as the list; primary color on the pill)

  Scenario: Pill shows card when no method
    Given the user has not selected a payment method
    When they view the pill
    Then the generic card icon is shown

Screenshots/Recordings

Before (main branch)

image

After (this PR)

Build Quote — Apple Pay selected, pill icon matches list

Pre-merge author checklist

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Low Risk
Low risk UI-only change: the Build Quote payment pill now renders a real payment-method icon when a payment type is available, with test/snapshot updates. No changes to quote fetching, routing, or controllers.

Overview
Build Quote’s payment pill now mirrors the payment selection modal iconography. BuildQuote passes selectedPaymentMethod into PaymentMethodPill, enabling the pill to render PaymentMethodIcon (primary color) when a paymentType is present, and fall back to the generic card icon otherwise.

Tests were updated to include paymentType in the mocked payment method, add coverage for rendering PaymentMethodIcon on any non-empty paymentType, and refresh affected snapshots.

Reviewed by Cursor Bugbot for commit f0bf9dd. Bugbot is set up for automated code reviews on this repo. Configure here.

- Build Quote: pass selected payment method into PaymentMethodPill and render PaymentMethodIcon so the leading icon matches the method (generic card when unset).\n- Apple Pay: use branded mark assets; swap useAssetFromTheme order for PaymentMethodIcon so the mark contrasts on muted/section backgrounds (checkout button keeps original mapping).\n- Tests: PaymentMethodPill coverage; BuildQuote snapshots updated.\n- Docs: PR screenshot helper and after screenshot under docs/ramps/.

Made-with: Cursor
@amitabh94 amitabh94 self-assigned this Apr 3, 2026
@github-actions

github-actions Bot commented Apr 3, 2026

Copy link
Copy Markdown
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@metamaskbot metamaskbot added the team-money-movement issues related to Money Movement features label Apr 3, 2026
@github-actions github-actions Bot added the size-M label Apr 3, 2026
- Add parseRampPaymentType so API strings only match SDK PaymentType values.\n- PaymentMethodIcon: switch on normalized type, handle RevPay, unknown types fall back to card (not wallet).\n- PaymentMethodPill: render PaymentMethodIcon only when type is known or API icons exist; type PaymentMethodForPill for icons.\n- Tests for parser and pill edge cases.

Made-with: Cursor
- before: captured with paymentMethod prop temporarily omitted (generic card in pill).\n- after: current Build Quote with fix.\n- Update pull-request-screenshots.md; PR body references raw GitHub URLs.

Made-with: Cursor
- Remove docs/ramps PNGs and pull-request-screenshots.md (keep images in PR description only).\n- Ignore docs/ramps/*.png so local captures are not re-committed.

Made-with: Cursor
- Use FontAwesome apple for Apple Pay; ignore API apple-pay mark glyphs
- Remove Apple Pay PNG from PaymentMethodIcon (restore main-style vectors)
- PaymentMethodPill: type-only icons via parseRampPaymentType
- Match main default icon fallback in PaymentMethodIcon switch

Made-with: Cursor
@amitabh94 amitabh94 changed the title fix(ramps): payment pill icons and Apple Pay mark contrast fix(ramps): match Build Quote payment pill to payment list icons Apr 3, 2026
Use the same PaymentMethodIcon + paymentType pattern as PaymentMethodListItem
(primary icon color). Drop parseRampPaymentType from the pill path.

Made-with: Cursor
@amitabh94 amitabh94 changed the title fix(ramps): match Build Quote payment pill to payment list icons fix(ramps): match Build Quote payment pill to payment selection modal Apr 3, 2026
- Revert PaymentMethodIcon and Aggregator snapshots to match origin/main
- Remove parseRampPaymentType util + test (never on main)

Unified Buy v2 pill parity remains in Views/BuildQuote + PaymentMethodPill only.

Made-with: Cursor
@github-actions github-actions Bot added size-S and removed size-M labels Apr 3, 2026
@github-actions

github-actions Bot commented Apr 3, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - draft PR

All E2E tests pre-selected.

View GitHub Actions results

@amitabh94 amitabh94 marked this pull request as ready for review April 3, 2026 22:05
@amitabh94 amitabh94 requested a review from a team as a code owner April 3, 2026 22:05
@github-actions

github-actions Bot commented Apr 3, 2026

Copy link
Copy Markdown
Contributor

E2E Fixture Validation — Schema is up to date
17 value mismatches detected (expected — fixture represents an existing user).
View details

@sonarqubecloud

sonarqubecloud Bot commented Apr 3, 2026

Copy link
Copy Markdown

@MetaMask MetaMask deleted a comment from codecov-commenter Apr 3, 2026
@amitabh94 amitabh94 enabled auto-merge April 3, 2026 23:45
@metamaskbot metamaskbot added the INVALID-PR-TEMPLATE PR's body doesn't match template label Apr 4, 2026
@amitabh94 amitabh94 added this pull request to the merge queue Apr 4, 2026
Merged via the queue into main with commit 9e56b9f Apr 4, 2026
214 of 220 checks passed
@amitabh94 amitabh94 deleted the fix/unified-buy-v2-payment-pill-icons branch April 4, 2026 04:18
@github-actions github-actions Bot locked and limited conversation to collaborators Apr 4, 2026
@metamaskbot metamaskbot added the release-7.74.0 Issue or pull request that will be included in release 7.74.0 label Apr 4, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

INVALID-PR-TEMPLATE PR's body doesn't match template release-7.74.0 Issue or pull request that will be included in release 7.74.0 size-S team-money-movement issues related to Money Movement features

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants