Skip to content

feat: add Checkout Components example gallery - #383

Draft
OnurVar wants to merge 3 commits into
ov/feat/componentsfrom
ov/feat/components-example-gallery
Draft

OnurVar wants to merge 3 commits into
ov/feat/componentsfrom
ov/feat/components-example-gallery

Conversation

@OnurVar

@OnurVar OnurVar commented Jun 6, 2026

Copy link
Copy Markdown
Contributor

Summary

Replaces the single-row Checkout Components screen in the example app with an 8-example gallery, ordered as the customization ladder and badged per tier:

  1. Drop-in checkout — prebuilt sheet, zero custom UI
  2. Themed drop-in — same sheet re-branded with one theme prop
  3. eSIM marketplace — composed page: method list, inline card form, dynamic pay button
  4. Coffee reorder — one-tap repurchase on usePrimerVaultManager, new-card fallback
  5. Accordion checkout — payment embedded in a merchant flow with expand/collapse sections
  6. Coin top-up — compact card form inside a popup dialog, outcome rendered in-dialog
  7. Card preview — live card mirroring form state, co-badge pick reflected on the card face, slide-to-pay gesture
  8. Bring-your-own UI — plain TextInputs wired to the hooks only, custom network picker, no Primer components

The list screen fetches a client session per example and presents overlays in place or pushes screens with the token as a route param. Every screen handles loading, processing, success and error (processing mirrors the drop-in's pattern: flag from submit/retry initiation until the outcome lands).

Example-app only; no SDK changes.

Merge gate

Merges after its parents; same ADR gate: https://app.notion.com/p/377ca65dc30e81de958bdc3bb2b887b8

Stacked on

#381 (naming) → #382 (context provider) → this.

Jira

https://primerapi.atlassian.net/browse/ORC-6924

Test plan

  • example app typecheck at its pre-existing baseline
  • manual: each row end-to-end with the sandbox Mastercard; co-badge picker via 4035 5010 0000 0008 on rows 7–8

@OnurVar
OnurVar requested a review from a team as a code owner June 6, 2026 00:25
@github-actions

github-actions Bot commented Jun 6, 2026

Copy link
Copy Markdown
Warnings
⚠️ This PR doesn't seem to contain any updated Unit Test for Swift 🤔. Please consider double checking it 🙏
Messages
📖 ✅ No SwiftLint violations found.

Generated by 🚫 Danger Swift against 7d9f4c5

@unblocked unblocked Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

1 issue found.

About Unblocked

Unblocked has been set up to automatically review your team's pull requests to identify genuine bugs and issues.

📖 Documentation — Learn more in our docs.

💬 Ask questions — Mention @unblocked to request a review or summary, or ask follow-up questions.

👍 Give feedback — React to comments with 👍 or 👎 to help us improve.

⚙️ Customize — Adjust settings in your preferences.

Comment on lines +317 to +321
<TouchableOpacity
style={[styles.payButton, !payEnabled && styles.payButtonDisabled]}
onPress={handlePay}
disabled={!payEnabled}
>

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The pay button is disabled only when !payEnabled, but it does not account for showProcessing. While the processing overlay covers the screen, a fast tap before the overlay renders (or on slower devices) can trigger handlePay a second time since the button is still technically enabled. Other screens in this PR (e.g. AccordionCheckoutScreen line 352, CoffeeReorderScreen line 422) correctly use disabled={!payEnabled || showProcessing}.

Suggested change
<TouchableOpacity
style={[styles.payButton, !payEnabled && styles.payButtonDisabled]}
onPress={handlePay}
disabled={!payEnabled}
>
disabled={!payEnabled || showProcessing}

@github-actions

github-actions Bot commented Jun 6, 2026

Copy link
Copy Markdown
Warnings
⚠️ This PR doesn't seem to contain any updated Unit Test for Kotlin 🤔. Please consider double checking it 🙏
Messages
📖 ✅ No detekt violations found.

Generated by 🚫 Danger Kotlin against 7d9f4c5

@github-actions

github-actions Bot commented Jun 6, 2026

Copy link
Copy Markdown
Warnings
⚠️ Pull Request size seems relatively large. If this Pull Request contains multiple changes, please split each into separate PRs for a faster, easier review.
⚠️ Please assign someone aside from CODEOWNERS (@checkout-pci-reviewers) to review this PR.
Messages
📖 ✅ No ESLint violations found.

Generated by 🚫 dangerJS against 7d9f4c5

@OnurVar OnurVar self-assigned this Jun 6, 2026
@OnurVar
OnurVar marked this pull request as draft June 6, 2026 00:38
@OnurVar
OnurVar force-pushed the ov/feat/components-example-gallery branch from 7d9f4c5 to 6b75ce6 Compare June 10, 2026 15:05
@OnurVar
OnurVar force-pushed the ov/feat/card-form-context-provider branch 2 times, most recently from 6b35a30 to b4b8966 Compare June 10, 2026 23:18
@OnurVar
OnurVar force-pushed the ov/feat/components-example-gallery branch from 6b75ce6 to b142845 Compare June 10, 2026 23:18
@OnurVar
OnurVar force-pushed the ov/feat/card-form-context-provider branch from b4b8966 to a48bae6 Compare June 15, 2026 12:08
@OnurVar
OnurVar force-pushed the ov/feat/components-example-gallery branch from b142845 to 3094940 Compare June 15, 2026 13:02
@OnurVar
OnurVar force-pushed the ov/feat/card-form-context-provider branch from a48bae6 to 3ac806e Compare June 17, 2026 19:41
@OnurVar
OnurVar force-pushed the ov/feat/components-example-gallery branch from 3094940 to d2278aa Compare June 17, 2026 19:44
Base automatically changed from ov/feat/card-form-context-provider to ov/feat/components June 17, 2026 20:17
@OnurVar
OnurVar force-pushed the ov/feat/components-example-gallery branch from d2278aa to ff34021 Compare August 23, 2026 13:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant