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

package/src/index.tsx

@@ -16,7 +16,7 @@ export * from 'tf-checkout-shared'
 export { useCheckout, type UseCheckoutOptions } from './useCheckout'
 export { configureCheckout, mmkvStorageAdapter } from './configure'
 export { createMmkvStorage } from './storage'
-export { CardInput, type CardInputProps } from './CardInput'
+export { CardInput, claimCardField, type CardInputProps } from './CardInput'
 
 // Component library: themeable provider + primitives + sections + auth.
 export * from './ui'

package/src/sections/Accommodation.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { hooks, htmlToPlainText, accommodationBookingDeadline } from 'tf-checkout-shared'
+import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
+import { Field, Input } from '../ui/Field'
+import { QuantitySelect } from '../ui/QuantitySelect'
+import { Button, Card, ErrorText, Loader, MutedText, SectionHeader } from '../ui/primitives'
+
+/** Native controls over the shared stay draft, quote and reservation lifecycle. */
+export const Accommodation = ({ eventId }: { eventId: string }) => {
+  const checkout = useCheckoutContext()
+  const flow = hooks.useAccommodationSelection(eventId, checkout)
+  const theme = useTheme()
+  const text = { color: theme.text, fontFamily: theme.fontFamily }
+  if (flow.query.isLoading) return <Loader />
+  if (!flow.rooms.length && !flow.error) return null
+  return (
+    <Card>
+      <SectionHeader title="Accommodation" subtitle="Add a place to stay with your tickets." />
+      {!!flow.error && <ErrorText>{flow.error}</ErrorText>}
+      {flow.query.isError && <Button variant="ghost" onPress={() => void flow.query.refetch()}>Try again</Button>}
+      {flow.rooms.map((room) => {
+        const id = String(room.room_type_id)
+        const stay = flow.stay(room)
+        const quote = flow.quotes[id]
+        return (
+          <View key={id} style={styles.room}>
+            <Text style={[text, styles.title]}>{room.property_name} · {room.name}</Text>
+            {!!room.description && <MutedText>{htmlToPlainText(room.description)}</MutedText>}
+            {accommodationBookingDeadline(room) && <MutedText>{accommodationBookingDeadline(room)}</MutedText>}
+            <MutedText>{room.sold_out ? 'Sold out' : `${room.currency} ${room.min_price.toFixed(2)} per night${room.max_price > room.min_price ? ' and up' : ''}`}</MutedText>
+            <Field label="Rooms">
+              <QuantitySelect value={stay.rooms} max={room.max_rooms_per_line} disabled={flow.busy || room.sold_out} label={`Rooms for ${room.name}`} onChange={(rooms) => flow.update(room, { rooms })} />
+            </Field>
+            {stay.rooms > 0 && <>
+              <Field label="Check-in (YYYY-MM-DD)"><Input accessibilityLabel={`Check-in for ${room.name}`} value={stay.check_in} maxLength={10} autoCapitalize="none" editable={!flow.busy} onChangeText={(check_in) => flow.update(room, { check_in })} /></Field>
+              <Field label="Check-out (YYYY-MM-DD)"><Input accessibilityLabel={`Check-out for ${room.name}`} value={stay.check_out} maxLength={10} autoCapitalize="none" editable={!flow.busy} onChangeText={(check_out) => flow.update(room, { check_out })} /></Field>
+              <Field label={`Guests per room (up to ${room.max_occupancy})`}><Input accessibilityLabel={`Guests per room for ${room.name}`} value={String(stay.num_guests)} keyboardType="number-pad" editable={!flow.busy} onChangeText={(value) => flow.update(room, { num_guests: Number(value) })} /></Field>
+              <Field label="Guest names (optional, one per line)"><Input multiline accessibilityLabel={`Guest names for ${room.name}`} value={(stay.occupants ?? []).map((person) => person.name).join('\n')} editable={!flow.busy} onChangeText={(value) => flow.update(room, { occupants: value.split('\n').map((name) => ({ name })) })} /></Field>
+              <MutedText>{room.cancellation_policy
+                ? `Free cancellation ${room.cancellation_policy.free_cancel_days} or more days before check-in. ${room.cancellation_policy.partial_refund_pct}% refund ${room.cancellation_policy.partial_refund_days} or more days before check-in; no refund after that.`
+                : 'Fully refundable under the property cancellation policy.'}</MutedText>
+              {!!quote && !flow.dirty && <>
+                <Text style={text}>{quote.total_formatted ?? quote.total_price_formatted}</Text>
+                {quote.charges?.map((charge, index) => <MutedText key={index}>{charge.name}: {charge.line_total_formatted}{charge.included ? ' (included)' : ''}</MutedText>)}
+              </>}
+            </>}
+            {!!flow.rejections[id] && <ErrorText>{flow.rejections[id].message}</ErrorText>}
+          </View>
+        )
+      })}
+      {flow.rooms.length > 0 && <Button loading={checkout.isBusy} disabled={flow.busy} onPress={() => void flow.save()}>{flow.dirty ? 'Save accommodation' : 'Refresh accommodation'}</Button>}
+      {flow.dirty && <Button variant="ghost" disabled={flow.busy} onPress={flow.cancel}>Discard changes</Button>}
+    </Card>
+  )
+}
+const styles = StyleSheet.create({ room: { gap: 12, paddingVertical: 12 }, title: { fontSize: 16, fontWeight: '600' } })

package/src/sections/AccountRewards.tsx

@@ -0,0 +1,108 @@
+import React, { type FC } from 'react'
+import { Alert, Image, Share, View } from 'react-native'
+import {
+  createTranslator,
+  hooks,
+  resolveLocale,
+  type AccountRewardsSectionProps,
+} from 'tf-checkout-shared'
+import {
+  BodyText,
+  Button,
+  Card,
+  ErrorText,
+  Loader,
+  SectionHeader,
+} from '../ui/primitives'
+
+/** The account aggregate has no order identity and offers no reward mutations. */
+export const AccountRewardsSection: FC<AccountRewardsSectionProps> = ({
+  locale,
+  onBrowseEvents,
+  onViewTickets,
+}) => {
+  const t = createTranslator({ locale: resolveLocale(locale) })
+  const { session, query, view } = hooks.useAccountRewardsSummary(t)
+  const assertOwner = hooks.useSessionAction()
+  const share = async (imageUrl: string) => {
+    try {
+      assertOwner()
+      await Share.share({ url: imageUrl, message: imageUrl })
+    } catch {
+      try {
+        assertOwner()
+        Alert.alert(t('rewards.account.shareError'))
+      } catch {
+        // A retired buyer must not display an alert in the next buyer's account.
+      }
+    }
+  }
+  return (
+    <View style={{ gap: 16 }}>
+      <SectionHeader
+        title={t('rewards.account.title')}
+        subtitle={t('rewards.account.intro')}
+      />
+      {!session.isAuthenticated ? (
+        <BodyText>{t('rewards.account.signIn')}</BodyText>
+      ) : (
+        <>
+          {query.isLoading && <Loader />}
+          {query.error && <ErrorText>{t('rewards.account.error')}</ErrorText>}
+          <Button
+            variant="ghost"
+            loading={query.isFetching}
+            onPress={() => void query.refetch()}
+          >
+            {t('rewards.account.refresh')}
+          </Button>
+          {view?.empty && <BodyText>{t('rewards.account.empty')}</BodyText>}
+          {view &&
+            (['ambassador', 'packs', 'prizes'] as const).map((kind) =>
+              view[kind].length ? (
+                <View key={kind} style={{ gap: 12 }}>
+                  <SectionHeader title={t(`rewards.account.${kind}`)} />
+                  {view[kind].map((row) => (
+                    <Card key={row.key}>
+                      <SectionHeader title={row.title} />
+                      {row.lines.map((line, index) => (
+                        <BodyText key={index}>{line}</BodyText>
+                      ))}
+                    </Card>
+                  ))}
+                </View>
+              ) : null
+            )}
+          {!!view?.shareCards.length && (
+            <View style={{ gap: 12 }}>
+              <SectionHeader title={t('rewards.account.shareCards')} />
+              {view.shareCards.map((card) => (
+                <Card key={card.key}>
+                  <Image
+                    source={{ uri: card.imageUrl }}
+                    accessibilityLabel={t('rewards.account.shareCard')}
+                    resizeMode="contain"
+                    style={{ width: '100%', aspectRatio: 1.91 }}
+                  />
+                  <Button variant="ghost" onPress={() => void share(card.imageUrl)}>
+                    {t('rewards.account.share')}
+                  </Button>
+                </Card>
+              ))}
+            </View>
+          )}
+          {onViewTickets && (
+            <Button variant="ghost" onPress={onViewTickets}>
+              {t('rewards.account.viewTickets')}
+            </Button>
+          )}
+          {onBrowseEvents && (
+            <Button variant="ghost" onPress={onBrowseEvents}>
+              {t('rewards.account.browse')}
+            </Button>
+          )}
+        </>
+      )}
+    </View>
+  )
+}

package/src/sections/AddOns.tsx

@@ -8,18 +8,18 @@
  * 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 React, { Fragment, useMemo, type FC } from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 
 import {
   addOnMaxQuantity,
   errorMessage,
   hooks,
-  ttf,
-  type CustomFieldValues,
+  htmlToPlainText,
   type EventAddon,
 } from 'tf-checkout-shared'
 
+import { FrozenFields } from '../ui/Frozen'
 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
@@ -28,24 +28,6 @@ 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)}`
 
@@ -74,57 +56,27 @@ export const AddOns: FC<AddOnsProps> = ({
   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 {
+    query: addonsQuery,
+    addons,
+    qty,
+    setQty,
+    capture,
+    setCapture,
+    error,
+    fieldGroups,
+    combined,
+    ticketQuantity,
+    hasRequired,
+    save,
+    skip,
+  } = hooks.useAddOnSelection(eventId, checkout, { onContinue, onSkip })
   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}>
+        <Pressable accessibilityRole="button" onPress={skip} style={s.skipBtn}>
           <Text style={s.skip}>Skip</Text>
         </Pressable>
       ) : null}
@@ -141,6 +93,14 @@ export const AddOns: FC<AddOnsProps> = ({
       </Card>
     )
   }
+  if (addonsQuery.isError)
+    return (
+      <Card>
+        {head}
+        <ErrorText>{errorMessage(addonsQuery.error)}</ErrorText>
+        <Button onPress={() => void addonsQuery.refetch()}>Try again</Button>
+      </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.
@@ -160,95 +120,86 @@ export const AddOns: FC<AddOnsProps> = ({
   }
 
   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>
+    <FrozenFields frozen={checkout.orderFixed}>
+      <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}
+        {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 ? htmlToPlainText(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>
-                  {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 }))}
-                    />
-                  )}
+                  {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>
-                {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>
-      ))}
+              )
+            })}
+          </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>
+        {!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>
+    </FrozenFields>
   )
 }