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

package/src/sections/Tickets.tsx

@@ -9,16 +9,28 @@
  * for seated events. Reads the shared engine via `useCheckoutContext()`; primes
  * the cart with `checkout.setTickets`.
  */
-import React, { Fragment, useEffect, useMemo, useRef, useState, type FC } from 'react'
+import React, {
+  Fragment,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type FC,
+  type ReactNode,
+} from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 
 import {
+  ConfirmerBusyError,
+  changeTicketQuantity,
   errorMessage,
   hooks,
+  htmlToPlainText,
   ticketQuantityRange,
   type TicketSelection,
   type TicketType,
   type WaitingListEntry,
+  createTranslator,
 } from 'tf-checkout-shared'
 
 import {
@@ -30,30 +42,13 @@ import {
   MutedText,
   SectionHeader,
 } from '../ui/primitives'
+import { FrozenFields } from '../ui/Frozen'
 import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
 import { Field, Input } from '../ui/Field'
 import { QuantitySelect } from '../ui/QuantitySelect'
 import { Select } from '../ui/Select'
 import type { ResolvedTheme } from '../ui/theme'
 
-// Web renders the rich 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 = (sym: string, n: number): string => `${sym} ${Number(n).toFixed(2)}`
 
 /** Inline waiting-list sign-up for a sold-out type. */
@@ -118,7 +113,29 @@ const WaitingListForm: FC<{
   )
 }
 
+/** Host-owned visuals over the shared catalog and reservation flow. */
+export interface TicketRowRenderProps {
+  ticket: TicketType
+  quantity: number
+  range: { min: number; max: number; step: number }
+  unavailable: boolean
+  seated: boolean
+  onQuantityChange: (quantity: number) => void
+}
+
 export interface TicketsProps {
+  /** Replace a row's visuals; availability, selection and cart rules stay SDK-owned. */
+  renderTicket?: (props: TicketRowRenderProps) => ReactNode
+  /** Replace the reserve CTA without reimplementing reservation or validation. */
+  renderContinue?: (props: {
+    onPress: () => void
+    disabled: boolean
+    loading: boolean
+    title: string
+  }) => ReactNode
+  /** Render the catalog directly in the host's own screen/card. */
+  unstyled?: boolean
+
   eventId: string
   /** Optional heading above the catalog. The legacy storefront shows none, so
    *  the default is intentionally hidden. */
@@ -153,11 +170,20 @@ export const Tickets: FC<TicketsProps> = ({
   initialPromoCode,
   referrer,
   readAttributionFromUrl = true,
+  renderTicket,
+  renderContinue,
+  unstyled = false,
 }) => {
   const checkout = useCheckoutContext()
   const theme = useTheme()
   const s = useTicketStyles(theme)
   const ticketsQuery = hooks.useTicketsWithMeta(eventId)
+  // A bundle order is starting: wait, so the two flows never start at once.
+  // The checkout start lock is held by a bundle start or pay (shown as a
+  // wait), or by this checkout's own priming (shown as the busy button).
+  // Why a bundle holds the payment SDK (paying, or setting up a card form).
+  const bundleWait = hooks.useTicketGatewayWait(checkout.store)
+  const bundleStarting = bundleWait !== null
   const promoMeta = ticketsQuery.data?.promo
   const showWaitingList = ticketsQuery.data?.showWaitingList ?? false
 
@@ -184,6 +210,14 @@ export const Tickets: FC<TicketsProps> = ({
   const [code, setCode] = useState('')
   const [codeState, setCodeState] = useState<'idle' | 'busy'>('idle')
   const [promoOpen, setPromoOpen] = useState(false)
+  // Another event: its tickets, date and code start fresh.
+  hooks.useOnEventChange(eventId, () => {
+    setQty({})
+    setSlotDate('')
+    setCode('')
+    setPromoOpen(false)
+    setError('')
+  })
   const [wlOpen, setWlOpen] = useState<Record<string, boolean>>({})
   const [visibleDescription, setVisibleDescription] = useState<string | null>(null)
   const attributionEvent = useRef<string | null>(null)
@@ -253,21 +287,10 @@ export const Tickets: FC<TicketsProps> = ({
   // into multiple types (`allowMultipleTicketTypePurchases`), a new selection
   // REPLACES the previous one — one ticket type per order. Even when multiple are
   // allowed, switching between a table and a regular ticket clears the rest.
-  const selectQty = (t: TicketType, value: number) =>
-    setQty((prev) => {
-      const activeIds = Object.keys(prev).filter((k) => (prev[k] ?? 0) > 0)
-      const prevIsTable = activeIds.length
-        ? Boolean(tickets.find((x) => x.id === activeIds[0])?.isTable)
-        : t.isTable
-      const switchingKind = activeIds.length > 0 && prevIsTable !== t.isTable
-
-      if (!allowMultiple) return value > 0 ? { [t.id]: value } : {}
-      if (switchingKind && value > 0) return { [t.id]: value }
-      const next = { ...prev }
-      if (value > 0) next[t.id] = value
-      else delete next[t.id]
-      return next
-    })
+  const selectQty = (ticket: TicketType, value: number) =>
+    setQty((previous) =>
+      changeTicketQuantity(previous, tickets, ticket, value, allowMultiple)
+    )
 
   // Seated events: the buyer picks on a seat map, so seat-map ticket types show
   // read-only (no quantity control) and the CTA becomes "Select seats". A type
@@ -296,10 +319,18 @@ export const Tickets: FC<TicketsProps> = ({
       quantity: qty[t.id] ?? 0,
       currency: t.currency,
     }))
+    // `setTickets` runs in the confirmer gateway: while another flow holds the
+    // payment SDK nothing is primed, and the error names that flow.
     checkout
       .setTickets(eventId, selections)
       .then(() => onContinue?.())
-      .catch((e) => setError(errorMessage(e)))
+      .catch((e) =>
+        setError(
+          e instanceof ConfirmerBusyError
+            ? createTranslator()(e.message)
+            : errorMessage(e)
+        )
+      )
   }
 
   const applyCode = () => {
@@ -345,71 +376,90 @@ export const Tickets: FC<TicketsProps> = ({
     return (
       <Fragment key={t.id}>
         {groupHeading}
-        <View style={s.rowWrap}>
-          <View style={s.row}>
-            <View style={s.info}>
-              <View style={s.nameRow}>
-                <Text style={s.name}>{t.name}</Text>
-                {t.descriptionRich ? (
-                  <Pressable
-                    accessibilityRole="button"
-                    onPress={() =>
-                      setVisibleDescription((cur) => (cur === t.id ? null : t.id))
-                    }
-                  >
-                    <Text style={s.infoToggle}>
-                      {visibleDescription === t.id ? 'Hide info' : 'View info'}
+        <View style={renderTicket ? undefined : s.rowWrap}>
+          {renderTicket ? (
+            renderTicket({
+              ticket: t,
+              quantity: qty[t.id] ?? 0,
+              range,
+              unavailable: unavailable || checkout.orderFixed,
+              seated: seatMapRow(t),
+              onQuantityChange: (value) => {
+                if (!checkout.orderFixed) selectQty(t, value)
+              },
+            })
+          ) : (
+            <>
+              <View style={s.row}>
+                <View style={s.info}>
+                  <View style={s.nameRow}>
+                    <Text style={s.name}>{t.name}</Text>
+                    {t.descriptionRich ? (
+                      <Pressable
+                        accessibilityRole="button"
+                        onPress={() =>
+                          setVisibleDescription((cur) => (cur === t.id ? null : t.id))
+                        }
+                      >
+                        <Text style={s.infoToggle}>
+                          {visibleDescription === t.id ? 'Hide info' : 'View info'}
+                        </Text>
+                      </Pressable>
+                    ) : null}
+                  </View>
+                  <View style={s.priceRow}>
+                    {discounted && original != null ? (
+                      <Text style={s.oldPrice}>{money(sym, original)}</Text>
+                    ) : null}
+                    <Text style={[s.amount, isFree && s.amountFree]}>
+                      {isFree ? 'FREE' : money(sym, t.price)}
                     </Text>
-                  </Pressable>
-                ) : null}
-              </View>
-              <View style={s.priceRow}>
-                {discounted && original != null ? (
-                  <Text style={s.oldPrice}>{money(sym, original)}</Text>
-                ) : null}
-                <Text style={[s.amount, isFree && s.amountFree]}>
-                  {isFree ? 'FREE' : money(sym, t.price)}
-                </Text>
-                {/* Native affordance kept from the RN ticket screen: tables price
+                    {/* Native affordance kept from the RN ticket screen: tables price
                     per table. */}
-                {t.isTable ? <Text style={s.perTable}>· per table</Text> : null}
-                {/* Fees sub-line — omitted for free / sold-out types. */}
-                {!isFree && !t.soldOut ? (
-                  <Text style={s.fees}>({money(sym, t.priceWithFees)} with fees)</Text>
-                ) : null}
-                {t.depositPercent != null ? (
-                  <Text style={s.deposit}>{t.depositPercent.toFixed(2)}% DEPOSIT</Text>
-                ) : null}
-              </View>
-            </View>
-            {/* Seat-map types are read-only here — no quantity control; the buyer
+                    {t.isTable ? <Text style={s.perTable}>· per table</Text> : null}
+                    {/* Fees sub-line — omitted for free / sold-out types. */}
+                    {!isFree && !t.soldOut ? (
+                      <Text style={s.fees}>
+                        ({money(sym, t.priceWithFees)} with fees)
+                      </Text>
+                    ) : null}
+                    {t.depositPercent != null ? (
+                      <Text style={s.deposit}>
+                        {t.depositPercent.toFixed(2)}% DEPOSIT
+                      </Text>
+                    ) : null}
+                  </View>
+                </View>
+                {/* Seat-map types are read-only here — no quantity control; the buyer
                 picks them on the map via "Select seats". */}
-            {seatMapRow(t) ? null : unavailable ? (
-              <Text style={s.soldout}>
-                {t.soldOut
-                  ? 'Sold out'
-                  : notStarted
-                    ? 'Sales not started'
-                    : 'Sales Ended'}
-              </Text>
-            ) : (
-              <View style={s.qtyWrap}>
-                {/* Tables pick a number of GUESTS (bounded by minGuests/maxGuests),
+                {seatMapRow(t) ? null : unavailable ? (
+                  <Text style={s.soldout}>
+                    {t.soldOut
+                      ? 'Sold out'
+                      : notStarted
+                        ? 'Sales not started'
+                        : 'Sales Ended'}
+                  </Text>
+                ) : (
+                  <View style={s.qtyWrap}>
+                    {/* Tables pick a number of GUESTS (bounded by minGuests/maxGuests),
                     not a count of tickets — the label makes that explicit. */}
-                {t.isTable ? <Text style={s.guests}>Guests</Text> : null}
-                <QuantitySelect
-                  value={qty[t.id] ?? 0}
-                  min={range.min}
-                  max={range.max}
-                  step={range.step}
-                  onChange={(v) => selectQty(t, v)}
-                />
+                    {t.isTable ? <Text style={s.guests}>Guests</Text> : null}
+                    <QuantitySelect
+                      value={qty[t.id] ?? 0}
+                      min={range.min}
+                      max={range.max}
+                      step={range.step}
+                      onChange={(v) => selectQty(t, v)}
+                    />
+                  </View>
+                )}
               </View>
-            )}
-          </View>
-          {t.descriptionRich && visibleDescription === t.id ? (
-            <Text style={s.description}>{stripHtml(t.descriptionRich)}</Text>
-          ) : null}
+              {t.descriptionRich && visibleDescription === t.id ? (
+                <Text style={s.description}>{htmlToPlainText(t.descriptionRich)}</Text>
+              ) : null}
+            </>
+          )}
           {canWaitlist ? (
             wlOpen[t.id] ? (
               <WaitingListForm
@@ -440,123 +490,154 @@ export const Tickets: FC<TicketsProps> = ({
       else timeGroups.push({ time, items: [t] })
     }
 
+  const Container = unstyled ? View : Card
+  const continueTitle = checkout.isBusy
+    ? 'Reserving…'
+    : selectionIsTable
+      ? 'Reserve tables'
+      : buttonLabel
+
   return (
-    <Card>
-      {title ? <SectionHeader title={title} /> : null}
+    <FrozenFields frozen={checkout.orderFixed}>
+      <Container>
+        {title ? <SectionHeader title={title} /> : null}
 
-      {listQuery.isLoading ? (
-        <View style={s.loading}>
-          <Loader />
-        </View>
-      ) : null}
-
-      {listQuery.error ? (
-        <ErrorText>{(listQuery.error as Error).message}</ErrorText>
-      ) : null}
-
-      {isTimeSlot && dates.length > 0 ? (
-        <View style={s.selectBlock}>
-          <Text style={s.selectLabel}>Date</Text>
-          <Select
-            value={slotDate}
-            onChange={(d) => {
-              setSlotDate(d)
-              setQty({})
-            }}
-            options={dates.map((d) => ({ label: d, value: d }))}
-          />
-        </View>
-      ) : null}
-
-      {currency && currency.available.length > 1 ? (
-        <View style={s.selectBlock}>
-          <Text style={s.selectLabel}>Currency</Text>
-          <Select
-            value={currency.currency}
-            onChange={changeCurrency}
-            options={currency.available.map((c) => ({
-              label: `${c.name} (${c.code})`,
-              value: c.code,
-            }))}
-          />
-        </View>
-      ) : null}
-
-      {isTimeSlot && !slotQuery.isLoading && tickets.length === 0 && slotDate ? (
-        <MutedText>No sessions available on this date.</MutedText>
-      ) : null}
-
-      {isTimeSlot
-        ? timeGroups.map((g) => (
-            <Fragment key={g.time}>
-              {g.time ? <Text style={s.slotTime}>{g.time}</Text> : null}
-              {g.items.map(renderRow)}
-            </Fragment>
-          ))
-        : tickets.map(renderRow)}
-
-      {/* Promo / access code */}
-      {showCodeInput ? (
-        <View style={s.promo}>
-          {!isAccess && !promoOpen ? (
-            <Pressable accessibilityRole="button" onPress={() => setPromoOpen(true)}>
-              <Text style={s.promoToggle}>Got a promo code? Tap here</Text>
-            </Pressable>
-          ) : (
-            <>
-              <Field>
-                <Input
-                  placeholder={isAccess ? 'Access code' : 'Promo code'}
-                  value={code}
-                  autoCapitalize="characters"
-                  onChangeText={setCode}
-                />
-              </Field>
-              <Button
-                variant="ghost"
-                onPress={applyCode}
-                loading={codeState === 'busy'}
-                disabled={codeState === 'busy' || !code.trim()}
-              >
-                {isAccess ? 'ENTER' : 'APPLY'}
-              </Button>
-              {promoMeta?.promoCodeMessage ? (
-                promoMeta.promoCodeValid === false ? (
-                  <ErrorText>{promoMeta.promoCodeMessage}</ErrorText>
-                ) : (
-                  <MutedText>{promoMeta.promoCodeMessage}</MutedText>
-                )
-              ) : null}
-            </>
-          )}
-        </View>
-      ) : null}
+        {listQuery.isLoading ? (
+          <View style={s.loading}>
+            <Loader />
+          </View>
+        ) : null}
+
+        {listQuery.error ? (
+          <ErrorText>{(listQuery.error as Error).message}</ErrorText>
+        ) : null}
+
+        {isTimeSlot && dates.length > 0 ? (
+          <View style={s.selectBlock}>
+            <Text style={s.selectLabel}>Date</Text>
+            <Select
+              value={slotDate}
+              onChange={(d) => {
+                setSlotDate(d)
+                setQty({})
+              }}
+              options={dates.map((d) => ({ label: d, value: d }))}
+            />
+          </View>
+        ) : null}
+
+        {currency && currency.available.length > 1 ? (
+          <View style={s.selectBlock}>
+            <Text style={s.selectLabel}>Currency</Text>
+            <Select
+              value={currency.currency}
+              onChange={changeCurrency}
+              options={currency.available.map((c) => ({
+                label: `${c.name} (${c.code})`,
+                value: c.code,
+              }))}
+            />
+          </View>
+        ) : null}
+
+        {isTimeSlot && !slotQuery.isLoading && tickets.length === 0 && slotDate ? (
+          <MutedText>No sessions available on this date.</MutedText>
+        ) : null}
+
+        {isTimeSlot
+          ? timeGroups.map((g) => (
+              <Fragment key={g.time}>
+                {g.time ? <Text style={s.slotTime}>{g.time}</Text> : null}
+                {g.items.map(renderRow)}
+              </Fragment>
+            ))
+          : tickets.map(renderRow)}
+
+        {/* Promo / access code */}
+        {showCodeInput ? (
+          <View style={s.promo}>
+            {!isAccess && !promoOpen ? (
+              <Pressable accessibilityRole="button" onPress={() => setPromoOpen(true)}>
+                <Text style={s.promoToggle}>Got a promo code? Tap here</Text>
+              </Pressable>
+            ) : (
+              <>
+                <Field>
+                  <Input
+                    placeholder={isAccess ? 'Access code' : 'Promo code'}
+                    value={code}
+                    autoCapitalize="characters"
+                    onChangeText={setCode}
+                  />
+                </Field>
+                <Button
+                  variant="ghost"
+                  onPress={applyCode}
+                  loading={codeState === 'busy'}
+                  disabled={codeState === 'busy' || !code.trim()}
+                >
+                  {isAccess ? 'ENTER' : 'APPLY'}
+                </Button>
+                {promoMeta?.promoCodeMessage ? (
+                  promoMeta.promoCodeValid === false ? (
+                    <ErrorText>{promoMeta.promoCodeMessage}</ErrorText>
+                  ) : (
+                    <MutedText>{promoMeta.promoCodeMessage}</MutedText>
+                  )
+                ) : null}
+              </>
+            )}
+          </View>
+        ) : null}
 
-      {/* Direct-purchase CTA — hidden on a fully-seated event (nothing to buy by
+        {bundleStarting && (directPurchasable.length > 0 || hasSeatMapTickets) ? (
+          <MutedText>{createTranslator()(bundleWait ?? 'tickets.waitBundle')}</MutedText>
+        ) : null}
+        {/* Direct-purchase CTA — hidden on a fully-seated event (nothing to buy by
           quantity; the seat map is the only path). */}
-      {directPurchasable.length > 0 ? (
-        <Button
-          onPress={prime}
-          loading={checkout.isBusy}
-          disabled={checkout.isBusy || selected.length === 0}
-        >
-          {checkout.isBusy
-            ? 'Reserving…'
-            : selectionIsTable
-              ? 'Reserve tables'
-              : buttonLabel}
-        </Button>
-      ) : null}
-
-      {/* Seated events: hand off to the seat map instead of quantity selection. */}
-      {hasSeatMapTickets ? (
-        <Button variant="ghost" onPress={() => onSelectSeats?.()}>
-          {seatCtaLabel}
-        </Button>
-      ) : null}
-
-      {error || checkout.error ? <ErrorText>{error || checkout.error}</ErrorText> : null}
-    </Card>
+        {directPurchasable.length > 0 ? (
+          renderContinue ? (
+            renderContinue({
+              onPress: prime,
+              loading: checkout.isBusy,
+              disabled:
+                checkout.orderFixed ||
+                checkout.isBusy ||
+                bundleStarting ||
+                selected.length === 0,
+              title: continueTitle,
+            })
+          ) : (
+            <Button
+              onPress={prime}
+              loading={checkout.isBusy}
+              disabled={checkout.isBusy || bundleStarting || selected.length === 0}
+            >
+              {checkout.isBusy
+                ? 'Reserving…'
+                : selectionIsTable
+                  ? 'Reserve tables'
+                  : buttonLabel}
+            </Button>
+          )
+        ) : null}
+
+        {/* Seated events: hand off to the seat map instead of quantity selection. */}
+        {hasSeatMapTickets ? (
+          <Button
+            variant="ghost"
+            disabled={bundleStarting}
+            onPress={() => onSelectSeats?.()}
+          >
+            {seatCtaLabel}
+          </Button>
+        ) : null}
+
+        {error || checkout.error ? (
+          <ErrorText>{error || checkout.error}</ErrorText>
+        ) : null}
+      </Container>
+    </FrozenFields>
   )
 }