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

package/src/sections/billing/BillingAddressFields.tsx

@@ -0,0 +1,126 @@
+import React, { type Dispatch, type FC, type SetStateAction } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import { Field, Input } from '../../ui/Field'
+import { BodyText } from '../../ui/primitives'
+import { Select, type SelectOption } from '../../ui/Select'
+import type { BillingDraft, BillingFieldError, LocationOption } from './types'
+
+interface BillingAddressFieldsProps {
+  billing: BillingDraft
+  countries: LocationOption[]
+  states: LocationOption[]
+  fieldError: BillingFieldError
+  setBilling: Dispatch<SetStateAction<BillingDraft>>
+}
+
+/**
+ * Address fields shared by the embedded and stepped billing experiences. The RN
+ * analogue of the web `BillingAddressFields`: country/state `<select>` become the
+ * native `../ui/Select`; text inputs keep the same placeholder copy.
+ */
+export const BillingAddressFields: FC<BillingAddressFieldsProps> = ({
+  billing,
+  countries,
+  states,
+  fieldError,
+  setBilling,
+}) => {
+  const setValue = (key: keyof BillingDraft) => (value: string) =>
+    setBilling((current) => ({ ...current, [key]: value }))
+
+  const countryOptions: SelectOption[] = countries.map((country) => ({
+    label: country.name,
+    value: String(country.id),
+  }))
+  const stateOptions: SelectOption[] = states.map((state) => ({
+    label: state.name,
+    value: String(state.id),
+  }))
+
+  return (
+    <>
+      <BodyText style={styles.sectionLabel}>Billing address *</BodyText>
+      <Field error={fieldError('Street address', 'Street address is required.')}>
+        <Input
+          placeholder="Street address *"
+          value={billing.streetAddress ?? ''}
+          onChangeText={setValue('streetAddress')}
+          invalid={Boolean(fieldError('Street address'))}
+        />
+      </Field>
+      <View style={styles.row}>
+        <View style={styles.col}>
+          <Field error={fieldError('City', 'City is required.')}>
+            <Input
+              placeholder="City *"
+              value={billing.city ?? ''}
+              onChangeText={setValue('city')}
+              invalid={Boolean(fieldError('City'))}
+            />
+          </Field>
+        </View>
+        <View style={styles.col}>
+          <Field error={fieldError('ZIP / postcode', 'ZIP / postcode is required.')}>
+            <Input
+              placeholder="ZIP / Postcode *"
+              value={billing.zip ?? ''}
+              onChangeText={setValue('zip')}
+              keyboardType="numbers-and-punctuation"
+              invalid={Boolean(fieldError('ZIP / postcode'))}
+            />
+          </Field>
+        </View>
+      </View>
+      <View style={styles.row}>
+        <View style={styles.col}>
+          <Field error={fieldError('Country', 'Country is required.')}>
+            <Select
+              value={billing.countryId ?? undefined}
+              onChange={(value) => {
+                const country = countries.find(
+                  (candidate) => String(candidate.id) === value
+                )
+                setBilling((current) => ({
+                  ...current,
+                  countryId: value,
+                  countryCode: country?.code?.toUpperCase(),
+                  stateId: undefined,
+                  stateCode: undefined,
+                }))
+              }}
+              options={countryOptions}
+              placeholder="— country * —"
+              invalid={Boolean(fieldError('Country'))}
+            />
+          </Field>
+        </View>
+        <View style={styles.col}>
+          <Field error={fieldError('State / county', 'State / county is required.')}>
+            <Select
+              value={billing.stateId ?? undefined}
+              onChange={(value) => {
+                const state = states.find((candidate) => String(candidate.id) === value)
+                setBilling((current) => ({
+                  ...current,
+                  stateId: value,
+                  stateCode: state?.code,
+                }))
+              }}
+              options={stateOptions}
+              placeholder={`— state / county${states.length > 0 ? ' *' : ''} —`}
+              disabled={!billing.countryId || states.length === 0}
+              invalid={Boolean(fieldError('State / county'))}
+            />
+          </Field>
+        </View>
+      </View>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  sectionLabel: { fontWeight: '600' },
+  row: { flexDirection: 'row', gap: 10 },
+  col: { flex: 1 },
+})

package/src/sections/billing/BuyerField.tsx

@@ -0,0 +1,78 @@
+import React, { type FC } from 'react'
+
+import type { BuyerFieldSpec } from 'tf-checkout-shared'
+
+import { Field, Input } from '../../ui/Field'
+import { Select, type SelectOption } from '../../ui/Select'
+import type { LocationOption } from './types'
+
+interface BuyerFieldProps {
+  field: BuyerFieldSpec
+  value: string
+  countries: LocationOption[]
+  error?: string
+  onChange: (value: string) => void
+}
+
+/**
+ * Renders one backend-configured buyer field without owning form state. The RN
+ * analogue of the web `BuyerField`: the web `<select>`/`<option>` become the
+ * native `../ui/Select` sheet; the Instagram field stays a text `Input`.
+ */
+export const BuyerField: FC<BuyerFieldProps> = ({
+  field,
+  value,
+  countries,
+  error,
+  onChange,
+}) => {
+  const invalid = error !== undefined && error !== null
+
+  if (field.kind === 'gender') {
+    const options: SelectOption[] = [
+      { label: 'Male', value: 'M' },
+      { label: 'Female', value: 'F' },
+    ]
+    return (
+      <Field label={field.label} required={field.required} error={error}>
+        <Select
+          value={value || undefined}
+          onChange={onChange}
+          options={options}
+          placeholder="— select —"
+          invalid={invalid}
+        />
+      </Field>
+    )
+  }
+
+  if (field.kind === 'nationality') {
+    const options: SelectOption[] = countries.map((country) => ({
+      label: country.name,
+      value: String(country.id),
+    }))
+    return (
+      <Field label={field.label} required={field.required} error={error}>
+        <Select
+          value={value || undefined}
+          onChange={onChange}
+          options={options}
+          placeholder="— select —"
+          invalid={invalid}
+        />
+      </Field>
+    )
+  }
+
+  return (
+    <Field label={field.label} required={field.required} error={error}>
+      <Input
+        placeholder="@handle or profile URL"
+        value={value}
+        onChangeText={onChange}
+        autoCapitalize="none"
+        invalid={invalid}
+      />
+    </Field>
+  )
+}

package/src/sections/billing/TicketHoldersCard.tsx

@@ -0,0 +1,119 @@
+import React, { type FC, type ReactNode } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import { Field, Input } from '../../ui/Field'
+import { BodyText, Card, SectionHeader } from '../../ui/primitives'
+import type { BillingFieldError, HolderDraft } from './types'
+
+interface TicketHoldersCardProps {
+  holders: HolderDraft[]
+  holderNamesRequired: boolean
+  collectHolderContact: boolean
+  fieldError: BillingFieldError
+  renderCustomFields: (holder: HolderDraft, index: number) => ReactNode
+  patchHolder: (index: number, patch: Partial<HolderDraft>) => void
+}
+
+/**
+ * Ticket-holder card kept separate from buyer billing for parity and reuse. The
+ * RN analogue of the web `TicketHoldersCard`: the web `PhoneInput` lib becomes a
+ * plain `Input` with `keyboardType="phone-pad"`.
+ */
+export const TicketHoldersCard: FC<TicketHoldersCardProps> = ({
+  holders,
+  holderNamesRequired,
+  collectHolderContact,
+  fieldError,
+  renderCustomFields,
+  patchHolder,
+}) => (
+  <Card>
+    <SectionHeader title="Ticket Holders" />
+    {holders.map((holder, index) => {
+      const firstNameKey = `Ticket ${index + 1} holder first name`
+      const lastNameKey = `Ticket ${index + 1} holder last name`
+      const emailKey = `Ticket ${index + 1} holder email`
+      const phoneKey = `Ticket ${index + 1} holder phone`
+
+      return (
+        <View key={index} style={styles.holder}>
+          <BodyText style={styles.holderTitle}>Ticket {index + 1}</BodyText>
+          {holderNamesRequired ? (
+            <View style={styles.row}>
+              <View style={styles.col}>
+                <Field
+                  label="First Name"
+                  required
+                  error={fieldError(firstNameKey, 'First name is required.')}
+                >
+                  <Input
+                    value={holder.firstName}
+                    onChangeText={(value) => patchHolder(index, { firstName: value })}
+                    autoCapitalize="words"
+                    invalid={Boolean(fieldError(firstNameKey))}
+                  />
+                </Field>
+              </View>
+              <View style={styles.col}>
+                <Field
+                  label="Last Name"
+                  required
+                  error={fieldError(lastNameKey, 'Last name is required.')}
+                >
+                  <Input
+                    value={holder.lastName}
+                    onChangeText={(value) => patchHolder(index, { lastName: value })}
+                    autoCapitalize="words"
+                    invalid={Boolean(fieldError(lastNameKey))}
+                  />
+                </Field>
+              </View>
+            </View>
+          ) : null}
+          {collectHolderContact ? (
+            <View style={styles.row}>
+              <View style={styles.col}>
+                <Field
+                  label="Email Address"
+                  required
+                  error={fieldError(emailKey, 'Enter a valid email address.')}
+                >
+                  <Input
+                    value={holder.email}
+                    onChangeText={(value) => patchHolder(index, { email: value })}
+                    keyboardType="email-address"
+                    autoCapitalize="none"
+                    invalid={Boolean(fieldError(emailKey))}
+                  />
+                </Field>
+              </View>
+              <View style={styles.col}>
+                <Field
+                  label="Phone"
+                  required
+                  error={fieldError(phoneKey, 'Enter a valid phone number.')}
+                >
+                  {/* Native: plain phone-pad Input in place of web's PhoneInput lib. */}
+                  <Input
+                    value={holder.phone}
+                    onChangeText={(value) => patchHolder(index, { phone: value })}
+                    keyboardType="phone-pad"
+                    invalid={Boolean(fieldError(phoneKey))}
+                  />
+                </Field>
+              </View>
+            </View>
+          ) : null}
+          {renderCustomFields(holder, index)}
+        </View>
+      )
+    })}
+  </Card>
+)
+
+const styles = StyleSheet.create({
+  holder: { gap: 12 },
+  holderTitle: { fontWeight: '700' },
+  row: { flexDirection: 'row', gap: 10 },
+  col: { flex: 1 },
+})

package/src/sections/billing/types.ts

@@ -0,0 +1,10 @@
+/**
+ * The billing form shapes now live in the SDK so web and native share one
+ * model. Re-exported here to keep `./billing/types` imports working.
+ */
+export type {
+  BillingDraft,
+  HolderDraft,
+  LocationOption,
+  BillingFieldError,
+} from 'tf-checkout-shared'

package/src/sections/index.ts

@@ -0,0 +1,8 @@
+/** The native checkout sections — the RN analogues of the web `sections/`. */
+export { Tickets } from './Tickets'
+export { AddOns } from './AddOns'
+export { BillingInfo, type CheckoutPrivacyPolicy } from './BillingInfo'
+export { OrderSummary } from './OrderSummary'
+export { Payment } from './Payment'
+export { IDVerification } from './IDVerification'
+export { Confirmation } from './Confirmation'

package/src/storage.ts

@@ -0,0 +1,27 @@
+/**
+ * React Native storage adapter for the SDK's token/session store.
+ *
+ * The shared transport reads/writes tokens through a SYNCHRONOUS `StorageAdapter`
+ * (see tf-checkout-shared `client/storage.ts`). Web hands it a `localStorage`
+ * adapter; the native side needs a synchronous, persisted store so the buyer's
+ * bearer session survives an app restart. `react-native-mmkv` is exactly that —
+ * synchronous get/set/delete backed by native MMKV — so we wrap it here.
+ *
+ * Unlike web, native has no session cookie: the bearer token IS the session, so
+ * `configureCheckout` defaults to this persisted adapter (never in-memory) so a
+ * signed-in buyer stays signed in between launches.
+ */
+import { MMKV } from 'react-native-mmkv'
+
+import type { StorageAdapter } from 'tf-checkout-shared'
+
+/** Build a `StorageAdapter` backed by an MMKV instance (its own `id` namespace
+ *  so it never collides with the host app's MMKV data). */
+export const createMmkvStorage = (id = 'tf-checkout'): StorageAdapter => {
+  const mmkv = new MMKV({ id })
+  return {
+    getItem: (key) => mmkv.getString(key) ?? null,
+    setItem: (key, value) => mmkv.set(key, value),
+    removeItem: (key) => mmkv.delete(key),
+  }
+}

package/src/ui/CheckoutProvider.tsx

@@ -0,0 +1,140 @@
+/**
+ * `<CheckoutProvider>` — wrap your checkout UI once. The RN analogue of the web
+ * provider. It:
+ *   - provides the checkout to every section via context (so `<Tickets/>`,
+ *     `<Payment/>`, … just read it). By default it runs `useCheckout()` (the
+ *     native-wired engine: stripe-react-native + shared store); pass your own
+ *     instance as `value` to bring your own.
+ *   - resolves the `theme` token set and exposes it via `useTheme()`.
+ *   - coordinates submit-attempt validation across separately composed sections.
+ *   - bundles a `QueryClientProvider` (the shared react-query hooks need one).
+ *
+ * Unlike web there are no CSS variables and no DOM scroll-to-invalid — sections
+ * read `attempt` to reveal their own errors on a failed submit.
+ */
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type FC,
+  type ReactNode,
+} from 'react'
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import type { UseCheckout } from 'tf-checkout-shared'
+
+import { useCheckout } from '../useCheckout'
+import { useInstallmentPicker } from './InstallmentPicker'
+import { resolveTheme, type CheckoutTheme, type ResolvedTheme } from './theme'
+
+const CheckoutCtx = createContext<UseCheckout | null>(null)
+const ThemeCtx = createContext<ResolvedTheme>(resolveTheme())
+const ValidationCtx = createContext<{
+  attempt: number
+  requestValidation: () => void
+} | null>(null)
+
+/** One shared react-query client for the whole checkout — created lazily so it
+ *  survives across mounts (matching the app-wide engine store singleton). */
+let sharedQueryClient: QueryClient | null = null
+const getQueryClient = (): QueryClient => {
+  if (!sharedQueryClient) {
+    sharedQueryClient = new QueryClient({
+      defaultOptions: { queries: { retry: 1, staleTime: 60_000 } },
+    })
+  }
+  return sharedQueryClient
+}
+
+export interface CheckoutProviderProps {
+  /**
+   * Bring your own checkout instance (from a top-level `useCheckout()`). Omit
+   * and the provider runs `useCheckout()` itself. Either way the sections read
+   * the same shared cart (the engine store is a module singleton).
+   */
+  value?: UseCheckout
+  /** Retheme via design tokens. */
+  theme?: CheckoutTheme
+  /** Provide your own react-query client instead of the bundled shared one. */
+  queryClient?: QueryClient
+  children: ReactNode
+}
+
+/** The context boundary — given a resolved checkout instance + theme. */
+const CheckoutRoot: FC<{
+  checkout: UseCheckout
+  theme?: CheckoutTheme
+  children: ReactNode
+}> = ({ checkout, theme, children }) => {
+  const [attempt, setAttempt] = useState(0)
+  const requestValidation = useCallback(() => setAttempt((n) => n + 1), [])
+  const validation = useMemo(
+    () => ({ attempt, requestValidation }),
+    [attempt, requestValidation]
+  )
+  const resolved = useMemo(() => resolveTheme(theme), [theme])
+
+  return (
+    <CheckoutCtx.Provider value={checkout}>
+      <ThemeCtx.Provider value={resolved}>
+        <ValidationCtx.Provider value={validation}>{children}</ValidationCtx.Provider>
+      </ThemeCtx.Provider>
+    </CheckoutCtx.Provider>
+  )
+}
+
+/** Default path: the provider owns the `useCheckout()` call. */
+const SelfProvidedCheckout: FC<Omit<CheckoutProviderProps, 'value' | 'queryClient'>> = ({
+  children,
+  ...rest
+}) => {
+  // Bridge the engine's mid-payment MSI (installments) callback to a native modal.
+  const { onInstallmentOffers, picker } = useInstallmentPicker()
+  const checkout = useCheckout({ ports: { onInstallmentOffers } })
+  return (
+    <CheckoutRoot checkout={checkout} {...rest}>
+      {children}
+      {picker}
+    </CheckoutRoot>
+  )
+}
+
+export const CheckoutProvider: FC<CheckoutProviderProps> = ({
+  value,
+  queryClient,
+  ...rest
+}) => (
+  // `value` present ⇒ don't call `useCheckout()` (no second binding); absent ⇒
+  // the self-providing branch owns it. The choice is static per mount.
+  <QueryClientProvider client={queryClient ?? getQueryClient()}>
+    {value ? (
+      <CheckoutRoot checkout={value} {...rest} />
+    ) : (
+      <SelfProvidedCheckout {...rest} />
+    )}
+  </QueryClientProvider>
+)
+
+/** Read the shared checkout inside any component under `<CheckoutProvider>`. */
+export const useCheckoutContext = (): UseCheckout => {
+  const ctx = useContext(CheckoutCtx)
+  if (!ctx) {
+    throw new Error('useCheckoutContext must be used within <CheckoutProvider>.')
+  }
+  return ctx
+}
+
+/** Read the resolved theme tokens. */
+export const useTheme = (): ResolvedTheme => useContext(ThemeCtx)
+
+/** Coordinate submit-attempt validation across separately composed sections. */
+export const useCheckoutValidation = () => {
+  const ctx = useContext(ValidationCtx)
+  if (!ctx) {
+    throw new Error('useCheckoutValidation must be used within <CheckoutProvider>.')
+  }
+  return ctx
+}

package/src/ui/CustomFields.tsx

@@ -0,0 +1,176 @@
+/**
+ * Data-driven custom fields — the RN analogue of the web `ui/CustomFields`. The
+ * event describes what to collect (`EventCustomField[]`, order- / ticket- /
+ * add-on-scoped); these render it and report values back. No per-brand form code:
+ * pass the group, hold the values.
+ *
+ * Native adaptations vs web:
+ *   - `<select>` and `radio` (single choice) both render as the native `Select`
+ *     sheet — there is no native radio primitive.
+ *   - `select_multi` renders a column of native `Checkbox` rows.
+ *   - there is no multiline `Textarea` primitive, so `textarea` falls back to a
+ *     single-line `Input` (value parity preserved).
+ */
+import React, { type FC } from 'react'
+import { View } from 'react-native'
+
+import type {
+  CustomFieldValues,
+  EventCustomField,
+  EventCustomFieldGroup,
+} from 'tf-checkout-shared'
+import { ticketFieldsFor } from 'tf-checkout-shared'
+
+import { Checkbox, Field, Input } from './Field'
+import { ErrorText, MutedText } from './primitives'
+import { Select, type SelectOption } from './Select'
+
+type FieldValue = string | string[]
+
+const asString = (v: FieldValue | undefined): string =>
+  Array.isArray(v) ? (v[0] ?? '') : (v ?? '')
+const asArray = (v: FieldValue | undefined): string[] =>
+  Array.isArray(v) ? v : v ? [v] : []
+
+export interface CustomFieldInputProps {
+  field: EventCustomField
+  value: FieldValue | undefined
+  onChange: (value: FieldValue) => void
+  error?: string
+}
+
+/** Render one custom field by its declared `type`. */
+export const CustomFieldInput: FC<CustomFieldInputProps> = ({
+  field,
+  value,
+  onChange,
+  error,
+}) => {
+  const invalid = error !== undefined && error !== null
+  const desc = field.description ? <MutedText>{field.description}</MutedText> : null
+
+  switch (field.type) {
+    case 'textarea':
+      // Native adaptation: no multiline Textarea primitive — single-line Input.
+      return (
+        <Field label={field.label} required={field.required} error={error}>
+          {desc}
+          <Input value={asString(value)} onChangeText={onChange} invalid={invalid} />
+        </Field>
+      )
+    case 'select':
+    case 'radio': {
+      // Native adaptation: web renders radio inline; both single-choice types use
+      // the `Select` sheet here (no native radio primitive).
+      const options: SelectOption[] = field.options.map((o) => ({
+        label: o.name,
+        value: o.value,
+      }))
+      return (
+        <Field label={field.label} required={field.required} error={error}>
+          {desc}
+          <Select
+            value={asString(value) || undefined}
+            onChange={onChange}
+            options={options}
+            placeholder="— select —"
+            invalid={invalid}
+          />
+        </Field>
+      )
+    }
+    case 'select_multi': {
+      const picked = asArray(value)
+      const toggle = (v: string, on: boolean) =>
+        onChange(on ? [...picked, v] : picked.filter((x) => x !== v))
+      return (
+        <Field label={field.label} required={field.required} error={error}>
+          {desc}
+          <View style={{ gap: 8 }}>
+            {field.options.map((o) => (
+              <Checkbox
+                key={o.id}
+                checked={picked.includes(o.value)}
+                onChange={(on) => toggle(o.value, on)}
+                label={o.name}
+              />
+            ))}
+          </View>
+        </Field>
+      )
+    }
+    case 'checkbox':
+      return (
+        <View style={{ gap: 6 }}>
+          <Checkbox
+            checked={asString(value) === '1'}
+            onChange={(on) => onChange(on ? '1' : '')}
+            label={`${field.label}${field.required ? ' *' : ''}`}
+            invalid={invalid}
+          />
+          {error !== undefined && error !== null ? <ErrorText>{error}</ErrorText> : null}
+        </View>
+      )
+    case 'image':
+      // File capture needs an upload rail the SDK doesn't own yet — surface it
+      // rather than silently dropping a required field.
+      return (
+        <Field label={field.label} required={field.required} error={error}>
+          {desc}
+          <MutedText>Image upload isn’t supported in this build.</MutedText>
+        </Field>
+      )
+    default:
+      // text / phone / email
+      return (
+        <Field label={field.label} required={field.required} error={error}>
+          {desc}
+          <Input
+            value={asString(value)}
+            onChangeText={onChange}
+            keyboardType={
+              field.type === 'email'
+                ? 'email-address'
+                : field.type === 'phone'
+                  ? 'phone-pad'
+                  : 'default'
+            }
+            autoCapitalize={field.type === 'email' ? 'none' : 'sentences'}
+            invalid={invalid}
+          />
+        </Field>
+      )
+  }
+}
+
+export interface CustomFieldGroupFieldsProps {
+  group: EventCustomFieldGroup
+  values: CustomFieldValues
+  onChange: (name: string, value: FieldValue) => void
+  /** Restrict to fields scoped to this holder's ticket type (ticket groups). */
+  ticketTypeId?: string
+}
+
+/** Render every field in a group, wired to a values map. */
+export const CustomFieldGroupFields: FC<CustomFieldGroupFieldsProps> = ({
+  group,
+  values,
+  onChange,
+  ticketTypeId,
+}) => (
+  <>
+    {ticketFieldsFor(group.fields, ticketTypeId).map((f) => (
+      <CustomFieldInput
+        key={f.id}
+        field={f}
+        value={values[f.name]}
+        onChange={(v) => onChange(f.name, v)}
+      />
+    ))}
+  </>
+)
+
+/** True when every required field in the group has a non-empty value.
+ *  Re-exported from the SDK so web, native and the engine preflight all apply
+ *  one rule (including its "image uploads are server-authoritative" carve-out). */
+export { customFieldsComplete } from 'tf-checkout-shared'