tf-checkout-react-native 2.0.0-beta.0 → 2.0.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/README.md +92 -8
  2. package/dist/index.d.mts +7410 -290
  3. package/dist/index.d.ts +7410 -290
  4. package/dist/index.js +23539 -5909
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +23561 -5857
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +22 -10
  9. package/scripts/build-seat-map.mjs +31 -0
  10. package/scripts/seat-map-entry.jsx +22 -0
  11. package/src/CardInput.tsx +64 -3
  12. package/src/EmbeddedCheckout.tsx +129 -36
  13. package/src/auth/AuthModal.tsx +90 -6
  14. package/src/auth/EmailCodeForm.tsx +91 -0
  15. package/src/auth/RegisterForm.tsx +91 -5
  16. package/src/auth/TwoFactorForm.tsx +74 -0
  17. package/src/auth/index.ts +4 -0
  18. package/src/configure.ts +8 -1
  19. package/src/confirmer.ts +112 -20
  20. package/src/generated/seatMapWidget.ts +3 -0
  21. package/src/index.tsx +1 -1
  22. package/src/sections/Accommodation.tsx +57 -0
  23. package/src/sections/AccountRewards.tsx +108 -0
  24. package/src/sections/AddOns.tsx +99 -148
  25. package/src/sections/BillingInfo.tsx +63 -64
  26. package/src/sections/Bundles.tsx +467 -0
  27. package/src/sections/EventDiscussionView.tsx +637 -0
  28. package/src/sections/Passes.tsx +177 -0
  29. package/src/sections/Payment.tsx +169 -52
  30. package/src/sections/PostReaction.tsx +122 -0
  31. package/src/sections/Rewards.tsx +320 -0
  32. package/src/sections/SeatMap.tsx +225 -0
  33. package/src/sections/SeatsIoMap.tsx +110 -0
  34. package/src/sections/Streaming.tsx +278 -0
  35. package/src/sections/TicketChange.tsx +379 -0
  36. package/src/sections/TicketGift.tsx +206 -0
  37. package/src/sections/TicketRefund.tsx +104 -0
  38. package/src/sections/Tickets.tsx +289 -208
  39. package/src/sections/Trips.tsx +87 -0
  40. package/src/sections/WaiverSigning.tsx +429 -0
  41. package/src/sections/billing/PhoneIdentity.tsx +169 -0
  42. package/src/sections/discussion/CommentImages.tsx +366 -0
  43. package/src/sections/discussion/SwipeReply.tsx +88 -0
  44. package/src/sections/index.ts +26 -0
  45. package/src/sections/rewards/RewardsLadder.tsx +167 -0
  46. package/src/sections/rewards/RewardsTree.tsx +117 -0
  47. package/src/storage.ts +8 -9
  48. package/src/ui/CheckoutProvider.tsx +25 -13
  49. package/src/ui/Field.tsx +21 -3
  50. package/src/ui/Frozen.tsx +22 -0
  51. package/src/ui/InstallmentPicker.tsx +15 -18
  52. package/src/ui/PaymentMethods.tsx +6 -3
  53. package/src/ui/ProviderPages.tsx +134 -0
  54. package/src/ui/QuantitySelect.tsx +26 -2
  55. package/src/ui/Select.tsx +4 -1
  56. package/src/ui/SignaturePad.tsx +218 -0
  57. package/src/ui/index.ts +1 -0
  58. package/src/ui/primitives.tsx +13 -2
  59. package/src/ui/useAccountT.ts +16 -0
  60. package/src/useCheckout.ts +3 -1
package/README.md CHANGED
@@ -7,23 +7,34 @@ receipt — or compose the sections yourself.
7
7
  Same API as [`tf-checkout-react`](../tf-checkout-react/README.md); the flow,
8
8
  validation, and gating rules are literally the same code.
9
9
 
10
+ The 2.x source is maintained in [`tf-shared-libraries`](https://github.com/theticketfairy/tf-shared-libraries).
11
+ The core is private and bundled into both platform packages. Use React 18+ and
12
+ React Query 5 on web; the native requirements below reflect its supported build.
13
+ Never put a confidential OAuth client secret in browser or mobile code. Public
14
+ checkout integrations use registered SDK client IDs and owned buyer sessions.
15
+
10
16
  ## Install
11
17
 
18
+ The 2.0 line is currently a prerelease. Install `@beta` explicitly; the unqualified
19
+ npm package still resolves to stable 1.x until the 2.0 release gates pass. Pin the
20
+ verified exact version in a production app.
21
+
12
22
  ```bash
13
- npx expo install tf-checkout-react-native \
23
+ npx expo install tf-checkout-react-native@beta \
14
24
  @tanstack/react-query \
15
25
  @stripe/stripe-react-native \
16
- react-native-mmkv \
17
- @react-native-clipboard/clipboard
26
+ react-native-mmkv@3 \
27
+ @react-native-clipboard/clipboard \
28
+ react-native-webview
18
29
  ```
19
30
 
20
31
  Bare React Native:
21
32
 
22
33
  ```bash
23
- npm install tf-checkout-react-native @tanstack/react-query @stripe/stripe-react-native react-native-mmkv @react-native-clipboard/clipboard
34
+ npm install tf-checkout-react-native@beta @tanstack/react-query @stripe/stripe-react-native react-native-mmkv@3 @react-native-clipboard/clipboard react-native-webview
24
35
  ```
25
36
 
26
- Those four are **peer dependencies** on purpose. React contexts and native
37
+ These are **peer dependencies** on purpose. React contexts and native
27
38
  modules must exist exactly once in an app — a second copy of react-query means
28
39
  your `<QueryClientProvider>` is invisible to our hooks, and a second Stripe
29
40
  means a duplicate pod. As peers there is one copy and no Metro aliasing is ever
@@ -35,7 +46,7 @@ Everything else — the SDK core, the flow, the UI — ships inside the package.
35
46
 
36
47
  - React Native `0.81+` with the New Architecture enabled (required by
37
48
  `react-native-mmkv` 3.x)
38
- - React `19.1+`, Node `20.18.3+`
49
+ - React `19.1+`, Node `20.19.4+`
39
50
  - iOS 15.1+ · Android API 24+ (Stripe SDK minimums)
40
51
  - A development build. **Expo Go will not work** — this package uses native
41
52
  modules.
@@ -62,7 +73,7 @@ npx expo run:ios
62
73
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
63
74
  import { configureCheckout, EmbeddedCheckout } from 'tf-checkout-react-native'
64
75
 
65
- configureCheckout({ env: 'PROD', clientId: '…', clientSecret: '…' })
76
+ configureCheckout({ env: 'PROD', clientId: 'PUBLIC_SDK_CLIENT_ID', clientSecret: '', cookieAuth: true })
66
77
 
67
78
  const queryClient = new QueryClient()
68
79
 
@@ -92,7 +103,7 @@ Pass `cookieAuth: false` to opt into the bearer chain.
92
103
  ### Environments
93
104
 
94
105
  ```ts
95
- configureCheckout({ env: 'STAG', clientId, clientSecret })
106
+ configureCheckout({ env: 'STAG', clientId: 'PUBLIC_SDK_CLIENT_ID', clientSecret: '', cookieAuth: true })
96
107
  ```
97
108
 
98
109
  `PROD` → `www.ticketfairy.com`, `STAG` → `test.ticketfairy.com`, `DEV` →
@@ -190,9 +201,71 @@ const order = await checkout.placeOrder('card')
190
201
  `placeOrder` is retry-safe: one order, one charge, however many times the button
191
202
  is pressed.
192
203
 
204
+ ### Starting a new checkout
205
+
206
+ `reset()` discards the cart. It returns nothing, so
207
+ `useEffect(() => checkout.reset(), [eventId])` works as it always has. Before
208
+ any money moves it resets at once. While a payment is going through, it waits
209
+ for the payment to finish, so the payment never lands in a new cart. An order
210
+ that is not confirmed yet is kept when it is charged, or when a payment step
211
+ failed without an answer that nothing was charged (a network error, a
212
+ timeout, or a Stripe error that is not a decline or a cancel). A Razorpay or
213
+ redirect payment page the buyer closes is kept only when a check of the order
214
+ fails or finds a payment; otherwise it is a cancel. Pressing Pay again then
215
+ finishes the order, or pays as usual when nothing was paid. A server refusal
216
+ of the order, such as an expired reservation, releases it.
217
+
218
+ To know which happened, await `resetWhenSettled()` instead. It resolves `true`
219
+ once the checkout is reset, or `false` when it kept the order. In that case,
220
+ show the buyer `PAID_ORDER_PENDING_MESSAGE`. While it waits for a payment
221
+ (`status === 'placing'`), tell the buyer, for example "Finishing your
222
+ payment…":
223
+
224
+ ```tsx
225
+ if (checkout.status === 'placing') setNotice('Finishing your payment…')
226
+ if (!(await checkout.resetWhenSettled())) setNotice(PAID_ORDER_PENDING_MESSAGE)
227
+ ```
228
+
229
+ A custom `providerPage` must resolve `'dismiss'` when it closes or unmounts, and
230
+ any other custom port must settle then too, or `resetWhenSettled()` waits for it.
231
+
232
+ A custom confirmer marks a decline or cancel by rejecting with
233
+ `paymentProviderError(message, 'declined' | 'cancelled')`. Any other rejection
234
+ counts as a payment that may have gone through, so the order is kept.
235
+
193
236
  The full SDK is re-exported from this package — `ttf`, `api`, `hooks`, `dtos`,
194
237
  `logic`, and the engine. See the [SDK reference](../tf-checkout-shared/README.md).
195
238
 
239
+ ## Rewards
240
+
241
+ The native analogue of the web Rewards section: standing, the referral tree,
242
+ the prize ladder, packs, the share card, and one share button.
243
+
244
+ ```tsx
245
+ import { Confirmation, Rewards } from 'tf-checkout-react-native'
246
+ ;<Confirmation>
247
+ <Rewards orderHash={orderHash} />
248
+ </Confirmation>
249
+ ```
250
+
251
+ When `<EmbeddedCheckout/>` renders the receipt itself, pass the block through
252
+ `confirmationChildren`:
253
+
254
+ ```tsx
255
+ <EmbeddedCheckout eventId={eventId} confirmationChildren={<MyRewards />} />
256
+ ```
257
+
258
+ Native adaptations, and why:
259
+
260
+ - **No SVG.** The tree is positioned `View`s, from the same shared layout the
261
+ web SVG uses. Adding `react-native-svg` would be a new native peer for every
262
+ customer app; a dot-and-line picture does not need one.
263
+ - **One share button.** Per-channel buttons collapse into `Share.share()` — the
264
+ OS sheet already lists every installed app, which is what the web's share
265
+ sheet channel reaches for through the browser.
266
+ - **Copy comes in as props**, this package's idiom. `translate`, or `locale` and
267
+ `messages` for the built-in `rewards.*` catalogue.
268
+
196
269
  ## Known gaps vs web
197
270
 
198
271
  - **Seat maps** — the seat-picker view is a placeholder until the native picker
@@ -227,3 +300,14 @@ nothing of the sort.
227
300
  ---
228
301
 
229
302
  Part of the [TicketFairy checkout monorepo](../../README.md).
303
+
304
+
305
+ Public checkout sign-in uses event-scoped server-only buyer binding, without a bundled
306
+ client secret. The checkout's auth modal supplies the event automatically; standalone
307
+ `AuthModal` callers pass `checkoutEventId` and can receive the narrow
308
+ `onCheckoutAuthenticated(CheckoutBuyerProfile)` callback. Password/signup/email/phone
309
+ proofs still complete required two-factor verification. These credentials cannot read
310
+ private account preferences or tickets. See the [shared identity contract](
311
+ ../tf-checkout-shared/README.md) for
312
+ scope, retry, logout and configuration ownership. Existing confidential OAuth clients
313
+ are trusted-server integrations; never distribute their secrets in browser/native code.