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

package/src/index.tsx

@@ -1,231 +1,29 @@
-import { IMyOrderDetailsTicket } from './api/types'
-import {
-  ICheckoutBody,
-  IEventResponse,
-  IMyOrderDetailsData,
-  IMyOrdersOrder,
-  IPromoCodeResponse,
-  IPurchaseConfirmationData,
-  IRegisterNewUserBody,
-  MyOrderRequestFromType,
-} from './api/types'
-import {
-  CartTimer,
-  Dropdown,
-  DropdownMaterial,
-  Loading,
-  LoggedIn,
-  Login,
-  PromoCode,
-  WaitingList,
-} from './components'
-import { IDropdownStyles } from './components/dropdown/types'
-import { ILoadingStyles } from './components/loading/types'
-import { ILoginSuccessData } from './components/login/types'
-import {
-  BillingInfo,
-  Checkout,
-  MyOrderDetails,
-  MyOrders,
-  PurchaseConfirmation,
-  ResaleTickets,
-  ResetPassword,
-  Tickets,
-} from './containers'
-import { ICheckoutSuccessData } from './features/checkout-v2/hooks/use-checkout'
-import { IConfig } from './helpers/Config'
-import { IMyOrderDetailsProps } from './containers/myOrderDetails/types'
-import { IMyOrdersProps } from './containers/myOrders/types'
-import { IPurchaseConfirmationProps } from './containers/purchaseConfirmation/types'
-import { IResaleTicketsProps } from './containers/resaleTickets/types'
-import { IPasswordProtectedEventData, ITicketsProps } from './containers/tickets/types'
-import {
-  BillingCore,
-  BillingCoreHandle,
-  CheckoutCore,
-  CheckoutCoreHandle,
-  LoginCore,
-  LoginCoreHandle,
-  MyOrdersCore,
-  MyOrdersCoreHandle,
-  OrderDetailsCore,
-  OrderDetailsCoreHandle,
-  PurchaseConfirmationCore,
-  PurchaseConfirmationCoreHandle,
-  ResetPasswordCore,
-  ResetPasswordCoreHandle,
-  SessionCoreHandleType,
-  SessionHandleType,
-  TicketsCore,
-  TicketsCoreHandle,
-  WaitingListCore,
-  WaitingListCoreHandle,
-} from './core'
-import {
-  IBookTicketsOptions,
-  IGetTicketsPayload,
-  IGroupedTickets,
-} from './core/TicketsCore/TicketsCoreTypes'
-import { useRegisterUser, useUserProfile } from './features/auth/api-hooks'
-import {
-  CheckoutController as CheckoutV2,
-  CheckoutProvider,
-  CheckoutStyles,
-} from './features/checkout-v2'
-import { CheckoutForm, PaymentForm } from './features/checkout-v2/form'
-import {
-  useAddons,
-  useAddToCart,
-  useCart,
-  useCheckout,
-  useEventConditions,
-  useEventInfo,
-  usePaymentData,
-  usePaymentSuccess,
-  useTickets,
-  useUpdateCheckout,
-} from './features/checkout-v2/hooks/api-hooks'
-import { useCheckoutFlow } from './features/checkout-v2/hooks/use-checkout'
-import { CheckoutTexts } from './features/checkout-v2/types'
-import { useCountries, useStates } from './features/geo/api-hooks'
-import { setConfig } from './helpers/Config'
-import { deleteAllData, deleteUserData } from './helpers/LocalStorage'
-import { refreshAccessToken } from './helpers/RefreshAccessToken'
-import {
-  IAccountOrdersPurchasedEvent,
-  IAccountOrdersTicket,
-  IAccountTicketsAttributes,
-  IAccountTicketsData,
-  IAccountTicketsResponse,
-  IAddToCartResponse,
-  IError,
-  IEvent,
-  ISelectedTicket,
-  ITicket,
-  ITicketsResponseData,
-  IUserProfile,
-} from './types'
+/**
+ * tf-checkout-react-native — the native checkout, built on `tf-checkout-shared`.
+ *
+ * One import gives you the whole SDK (ttf, ENDPOINTS, dtos, logic, the engine)
+ * PLUS the native platform layer: a `useCheckout` with stripe-react-native
+ * pre-wired, `<CardInput/>`, `configureCheckout`, the UI kit, and the
+ * batteries-included `<EmbeddedCheckout/>`.
+ *
+ *   import { configureCheckout, EmbeddedCheckout } from 'tf-checkout-react-native'
+ */
 
-import { LogBox, NativeModules } from 'react-native'
-import { storage } from 'tf-checkout-shared'
-import { reactNativeStorageAdapter } from './utils/storageAdapter'
-storage.setAdapter(reactNativeStorageAdapter)
+// The entire shared SDK (the native `useCheckout` below overrides the SDK's).
+export * from 'tf-checkout-shared'
 
-LogBox.ignoreAllLogs()
+// Native platform layer
+export { useCheckout, type UseCheckoutOptions } from './useCheckout'
+export { configureCheckout, mmkvStorageAdapter } from './configure'
+export { createMmkvStorage } from './storage'
+export { CardInput, type CardInputProps } from './CardInput'
 
-export {
-  /**
-   * @deprecated Use hooks like useCart(), useCheckout(), etc. imported directly from 'tf-checkout-react-native'. See core/MIGRATION.md
-   */
-  BillingCore,
-  /**
-   * @deprecated Use hooks like useCart(), useCheckout(), etc. imported directly from 'tf-checkout-react-native'. See core/MIGRATION.md
-   */
-  BillingCoreHandle,
-  BillingInfo,
-  CartTimer,
-  Checkout,
-  /**
-   * @deprecated Use hooks like usePaymentData(), useEventConditions(), etc. imported directly from 'tf-checkout-react-native'. See core/MIGRATION.md
-   */
-  CheckoutCore,
-  CheckoutCoreHandle,
-  /**
-   * @deprecated Use hooks like usePaymentData(), useEventConditions(), etc. imported directly from 'tf-checkout-react-native'. See core/MIGRATION.md
-   */
-  CheckoutForm,
-  CheckoutProvider,
-  CheckoutStyles,
-  CheckoutTexts,
-  CheckoutV2,
-  deleteAllData,
-  deleteUserData,
-  Dropdown,
-  DropdownMaterial,
-  IAccountOrdersPurchasedEvent,
-  IAccountOrdersTicket,
-  IAccountTicketsAttributes,
-  IAccountTicketsData,
-  IAccountTicketsResponse,
-  IAddToCartResponse,
-  IBookTicketsOptions,
-  ICheckoutBody,
-  IDropdownStyles,
-  IError,
-  IEvent,
-  IEventResponse,
-  IGetTicketsPayload,
-  IGroupedTickets,
-  ILoadingStyles,
-  ILoginSuccessData,
-  IMyOrderDetailsData,
-  IMyOrderDetailsProps,
-  IMyOrdersOrder,
-  IMyOrdersProps,
-  IPasswordProtectedEventData,
-  IPromoCodeResponse,
-  IPurchaseConfirmationData,
-  IPurchaseConfirmationProps,
-  IRegisterNewUserBody,
-  IResaleTicketsProps,
-  ISelectedTicket,
-  ITicket,
-  ITicketsProps,
-  ITicketsResponseData,
-  IUserProfile,
-  IConfig,
-  ICheckoutSuccessData,
-  IMyOrderDetailsTicket,
-  Loading,
-  LoggedIn,
-  Login,
-  LoginCore,
-  LoginCoreHandle,
-  MyOrderDetails,
-  MyOrderRequestFromType,
-  MyOrders,
-  MyOrdersCore,
-  MyOrdersCoreHandle,
-  OrderDetailsCore,
-  OrderDetailsCoreHandle,
-  PaymentForm,
-  PromoCode,
-  PurchaseConfirmation,
-  PurchaseConfirmationCore,
-  PurchaseConfirmationCoreHandle,
-  refreshAccessToken,
-  ResaleTickets,
-  ResetPassword,
-  ResetPasswordCore,
-  ResetPasswordCoreHandle,
-  SessionCoreHandleType,
-  SessionHandleType,
-  setConfig,
-  Tickets,
-  TicketsCore,
-  TicketsCoreHandle,
-  useAddons,
-  useAddToCart,
-  // New checkout hooks (replacing BillingCore and CheckoutCore functionality)
-  useCart,
-  useCheckout,
-  useCheckoutFlow,
-  useCountries,
-  useEventConditions,
-  useEventInfo,
-  usePaymentData,
-  usePaymentSuccess,
-  useRegisterUser,
-  useStates,
-  useTickets,
-  useUpdateCheckout,
-  useUserProfile,
-  WaitingList,
-  WaitingListCore,
-  WaitingListCoreHandle,
-}
-export default NativeModules.TFCheckoutRNModule
+// Component library: themeable provider + primitives + sections + auth.
+export * from './ui'
+export * from './sections'
+export * from './auth'
+export { EmbeddedCheckout, type EmbeddedCheckoutProps } from './EmbeddedCheckout'
 
-export * from './apiv2'
-
-export { storage, type StorageAdapter } from 'tf-checkout-shared'
+// Port instances/factories (bring-your-own ports, testing, custom flows).
+export { rnConfirmer, rnPorts } from './instance'
+export { createRnStripeConfirmer, createRnPorts } from './confirmer'

package/src/instance.ts

@@ -0,0 +1,13 @@
+/**
+ * The package-level native platform instances. Created once at module load, so
+ * the hook and the UI components all bind to the SAME confirmer/ports.
+ */
+import type { PaymentConfirmer } from 'tf-checkout-shared'
+
+import { createRnPorts, createRnStripeConfirmer } from './confirmer'
+
+/** The confirmer every `useCheckout`/`<CardInput/>` binds to. */
+export const rnConfirmer: PaymentConfirmer = createRnStripeConfirmer()
+
+/** The native ports the alternative Stripe rails (OXXO / plan) run on. */
+export const rnPorts = createRnPorts()

package/src/sections/AddOns.tsx

@@ -0,0 +1,335 @@
+/**
+ * `<AddOns/>` — optional upsells for the primed cart. The RN analogue of the web
+ * `AddOns` section: lists the event's add-ons (filtered to the tickets in the
+ * cart), lets the buyer pick quantities, and captures any per-add-on custom
+ * fields. On continue it writes the selection (`setAddons`, which reprices) and
+ * the captured fields (`setAddonDataCapture`).
+ *
+ * Renders nothing when the event has no applicable add-ons (or they're all sold
+ * out), so it's safe to always place between `<Tickets/>` and `<BillingInfo/>`.
+ */
+import React, { Fragment, useEffect, useMemo, useState, type FC } from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+import {
+  addOnMaxQuantity,
+  errorMessage,
+  hooks,
+  ttf,
+  type CustomFieldValues,
+  type EventAddon,
+} from 'tf-checkout-shared'
+
+import { Button, Card, ErrorText, Loader, MutedText } from '../ui/primitives'
+import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
+// Created by a sibling agent; imported here per the port plan. Mirrors the web
+// `CustomFieldGroupFields` API: { group, values, onChange(name, value) }.
+import { CustomFieldGroupFields } from '../ui/CustomFields'
+import { QuantitySelect } from '../ui/QuantitySelect'
+import type { ResolvedTheme } from '../ui/theme'
+
+// Web renders the add-on description via `dangerouslySetInnerHTML`. React Native
+// has no HTML renderer, so we strip tags + decode a few common entities to show
+// the description as plain text (the adaptation for native).
+const stripHtml = (html: string): string =>
+  html
+    .replace(/<\s*br\s*\/?\s*>/gi, '\n')
+    .replace(/<\/\s*(p|div|li|h[1-6])\s*>/gi, '\n')
+    .replace(/<[^>]+>/g, '')
+    .replace(/&nbsp;/gi, ' ')
+    .replace(/&amp;/gi, '&')
+    .replace(/&lt;/gi, '<')
+    .replace(/&gt;/gi, '>')
+    .replace(/&#39;|&apos;/gi, "'")
+    .replace(/&quot;/gi, '"')
+    .replace(/\n{3,}/g, '\n\n')
+    .replace(/[ \t]+\n/g, '\n')
+    .trim()
+
+const money = (currency: string, n: number): string =>
+  `${currency} ${Number(n).toFixed(2)}`
+
+export interface AddOnsProps {
+  eventId: string
+  /** Fired once add-ons are saved to the cart — e.g. reveal `<BillingInfo/>`. */
+  onContinue?: () => void
+  /** Fired when the buyer skips add-ons. Hidden when a required add-on exists. */
+  onSkip?: () => void
+  /** CTA label. Old checkout uses "CONFIRM SELECTION". */
+  buttonLabel?: string
+  /** Eyebrow above the title. Old checkout uses "Get Your Tickets". */
+  eyebrow?: string
+  /** Section heading. Old checkout uses "UPGRADES & ADD-ONS". */
+  heading?: string
+}
+
+export const AddOns: FC<AddOnsProps> = ({
+  eventId,
+  onContinue,
+  onSkip,
+  buttonLabel = 'CONFIRM SELECTION',
+  eyebrow = 'Get Your Tickets',
+  heading = 'UPGRADES & ADD-ONS',
+}) => {
+  const checkout = useCheckoutContext()
+  const theme = useTheme()
+  const s = useAddonStyles(theme)
+  // No onContinue ⇒ combined form (inside <EmbeddedCheckout/>): apply the
+  // selection live (no "confirm" click) — the old checkout applied add-ons at
+  // checkout too.
+  const combined = !onContinue
+  const addonsQuery = hooks.useEventAddons(eventId)
+  const all = addonsQuery.data ?? []
+  const addons = ttf.events.filterAddonsForTickets(all, checkout.ticketTypeIds)
+  // Tickets reserved in the cart — the bound for ticket-scoped add-on caps
+  // (the hosted partial's `selectedTotalQty()`).
+  const ticketQuantity = (checkout.breakdown?.tickets ?? []).reduce(
+    (total, line) => total + (line.quantity || 0),
+    0
+  )
+
+  const [qty, setQty] = useState<Record<string, number>>(checkout.addOns ?? {})
+  const [capture, setCapture] = useState<Record<string, CustomFieldValues>>(
+    checkout.addOnDataCapture ?? {}
+  )
+  const [error, setError] = useState('')
+
+  // Custom-field groups keyed by add-on id (scope 'add-on', group id = add-on id).
+  const fieldGroups = useMemo(() => {
+    const map: Record<string, (typeof checkout.customFields)[number]> = {}
+    for (const g of checkout.customFields) if (g.scope === 'add-on') map[g.id] = g
+    return map
+  }, [checkout.customFields])
+
+  // Combined mode: debounce-apply the selection to the cart (which reprices) as
+  // it changes, instead of gating behind a "confirm" button.
+  useEffect(() => {
+    if (!combined) return
+    const selection = Object.fromEntries(Object.entries(qty).filter(([, n]) => n > 0))
+    if (JSON.stringify(selection) === JSON.stringify(checkout.addOns ?? {})) return
+    const captureForSelected = Object.fromEntries(
+      Object.entries(capture).filter(([id]) => (selection[id] ?? 0) > 0)
+    )
+    const t = setTimeout(() => {
+      checkout.setAddonDataCapture(captureForSelected)
+      checkout.setAddons(selection).catch((e) => setError(errorMessage(e)))
+    }, 500)
+    return () => clearTimeout(t)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [combined, qty, capture])
+
+  const hasRequired = (checkout.requiredAddOns ?? []).some((a) => a.required)
+  const head = (
+    <View style={s.head}>
+      {eyebrow ? <Text style={s.eyebrow}>{eyebrow}</Text> : null}
+      <Text style={s.heading}>{heading}</Text>
+      {onSkip && !hasRequired ? (
+        <Pressable accessibilityRole="button" onPress={onSkip} style={s.skipBtn}>
+          <Text style={s.skip}>Skip</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  )
+
+  if (addonsQuery.isLoading) {
+    return (
+      <Card>
+        {head}
+        <View style={s.sectionLoader}>
+          <Loader />
+        </View>
+      </Card>
+    )
+  }
+  if (addons.length === 0) return null
+  // A catalog containing only unavailable rows is not a useful checkout step.
+  // Required sold-out add-ons are already exempted by the engine preflight.
+  if (addons.every((addon) => addon.stock === 0)) return null
+
+  // The hosted cap — ticket-quantity / per-ticket / max-quantity bounds. The
+  // server hard-rejects anything above it, so never offer a larger number.
+  const max = (a: EventAddon) => addOnMaxQuantity(a, ticketQuantity)
+  const soldOut = (a: EventAddon) => a.stock === 0
+
+  // Group add-ons under their groupName heading (nulls fall under no heading).
+  const groups: { heading: string | null; items: EventAddon[] }[] = []
+  for (const a of addons) {
+    const last = groups[groups.length - 1]
+    if (last && last.heading === (a.groupName ?? null)) last.items.push(a)
+    else groups.push({ heading: a.groupName ?? null, items: [a] })
+  }
+
+  const missing = checkout.missingRequiredAddonNames
+  const save = () => {
+    setError('')
+    const selection = Object.fromEntries(Object.entries(qty).filter(([, n]) => n > 0))
+    // Only keep captured fields for add-ons that are actually selected.
+    const captureForSelected = Object.fromEntries(
+      Object.entries(capture).filter(([id]) => (selection[id] ?? 0) > 0)
+    )
+    checkout.setAddonDataCapture(captureForSelected)
+    checkout
+      .setAddons(selection)
+      .then(() => onContinue?.())
+      .catch((e) => setError(errorMessage(e)))
+  }
+
+  const selectedCount = Object.values(qty).filter((n) => n > 0).length
+
+  return (
+    <Card>
+      {head}
+      <Text style={s.subtitle}>PLEASE SELECT FROM THE OPTIONAL ADD-ONS BELOW</Text>
+
+      {groups.map((g, gi) => (
+        <Fragment key={g.heading ?? `g${gi}`}>
+          {g.heading ? <Text style={s.group}>{g.heading}</Text> : null}
+          {g.items.map((a) => {
+            const n = qty[a.id] ?? 0
+            const group = fieldGroups[a.id]
+            const desc = a.description ? stripHtml(a.description) : ''
+            return (
+              <View key={a.id} style={s.item}>
+                <View style={s.row}>
+                  <View style={s.info}>
+                    <Text style={s.name}>
+                      {a.name}
+                      {a.required ? <Text style={s.req}> · required</Text> : null}
+                    </Text>
+                    <Text style={s.price}>
+                      {money(a.currency, a.price)}
+                      {a.feeIncluded ? (
+                        <Text style={s.priceNote}> incl. fees</Text>
+                      ) : null}
+                    </Text>
+                    {desc ? <Text style={s.desc}>{desc}</Text> : null}
+                  </View>
+                  {soldOut(a) ? (
+                    <Text style={s.soldOut}>Sold out</Text>
+                  ) : (
+                    <QuantitySelect
+                      value={n}
+                      min={0}
+                      max={max(a)}
+                      onChange={(v) => setQty((q) => ({ ...q, [a.id]: v }))}
+                    />
+                  )}
+                </View>
+                {n > 0 && group ? (
+                  <View style={s.fields}>
+                    <CustomFieldGroupFields
+                      group={group}
+                      values={capture[a.id] ?? {}}
+                      onChange={(name: string, val: string | string[]) =>
+                        setCapture((c) => ({
+                          ...c,
+                          [a.id]: { ...(c[a.id] ?? {}), [name]: val },
+                        }))
+                      }
+                    />
+                  </View>
+                ) : null}
+              </View>
+            )
+          })}
+        </Fragment>
+      ))}
+
+      {!combined ? (
+        <Button
+          onPress={save}
+          loading={checkout.isBusy}
+          disabled={checkout.isBusy || selectedCount === 0}
+        >
+          {checkout.isBusy ? 'Updating…' : buttonLabel}
+        </Button>
+      ) : null}
+      {missing.length > 0 ? (
+        <MutedText>Required add-on: {missing.join(', ')}.</MutedText>
+      ) : null}
+      {error || checkout.error ? <ErrorText>{error || checkout.error}</ErrorText> : null}
+    </Card>
+  )
+}
+
+const useAddonStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        head: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 8 },
+        eyebrow: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 3,
+          fontWeight: '700',
+          letterSpacing: 0.5,
+          textTransform: 'uppercase',
+          fontFamily: theme.fontFamily,
+        },
+        heading: {
+          flex: 1,
+          color: theme.text,
+          fontSize: theme.fontSize + 2,
+          fontWeight: '700',
+          fontFamily: theme.fontFamily,
+        },
+        skipBtn: { paddingHorizontal: 4, paddingVertical: 2 },
+        skip: {
+          color: theme.accent,
+          fontSize: theme.fontSize - 1,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        subtitle: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 3,
+          fontWeight: '600',
+          letterSpacing: 0.3,
+          textTransform: 'uppercase',
+          fontFamily: theme.fontFamily,
+        },
+        sectionLoader: { paddingVertical: 20, alignItems: 'center' },
+        group: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '700',
+          marginTop: 4,
+          fontFamily: theme.fontFamily,
+        },
+        item: { gap: 10 },
+        row: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 },
+        info: { flex: 1, gap: 2 },
+        name: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        req: { color: theme.muted, fontWeight: '400' },
+        price: {
+          color: theme.text,
+          fontSize: theme.fontSize - 1,
+          fontVariant: ['tabular-nums'],
+          fontFamily: theme.fontFamily,
+        },
+        priceNote: { color: theme.muted },
+        desc: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+        soldOut: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        fields: {
+          gap: 10,
+          paddingTop: 4,
+          paddingLeft: 12,
+          borderLeftWidth: StyleSheet.hairlineWidth,
+          borderLeftColor: theme.border,
+        },
+      }),
+    [theme]
+  )