tf-checkout-react-native 2.0.0-beta.17 → 2.0.0-beta.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tf-checkout-react-native",
-  "version": "2.0.0-beta.17",
+  "version": "2.0.0-beta.19",
   "description": "TheTicketFairy ReactNative Checkout library",
   "homepage": "https://github.com/theticketfairy/tf-shared-libraries#readme",
   "author": "The Ticket Fairy",
@@ -103,7 +103,9 @@
     "react-dom": "19.1.0",
     "react-native": "0.81.4",
     "react-native-mmkv": "^3.3.1",
+    "react-native-render-html": "6.3.4",
     "react-native-webview": "13.15.0",
+    "react-test-renderer": "19.1.0",
     "release-it": "^19.0.4",
     "tf-checkout-shared": "workspace:*",
     "tf-seat-map-view": "9.4.7-beta.33",
@@ -113,6 +115,21 @@
   },
   "jest": {
     "preset": "react-native",
+    "transform": {
+      "^.+\\.(js|ts|tsx)$": [
+        "babel-jest",
+        {
+          "babelrc": false,
+          "configFile": false,
+          "presets": [
+            "module:@react-native/babel-preset"
+          ]
+        }
+      ]
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!((jest-)?react-native|@react-native(-community)?|\\.pnpm)/)"
+    ],
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/dist/"
@@ -160,6 +177,7 @@
     "react": ">=19.1",
     "react-native": ">=0.81",
     "react-native-mmkv": "^3.0.0",
+    "react-native-render-html": ">=6.3.4 <7",
     "react-native-webview": ">=13.15.0"
   },
   "//dependencies": "tf-checkout-shared is INLINED into this bundle (tsup noExternal), so its own runtime deps are ours too \u2014 axios, entities and htmlparser2 must stay declared here or tsup bundles them (axios drags Node's stream into a browser build) / the consumer never installs them.",

package/src/sections/Accommodation.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
-import { hooks, htmlToPlainText, accommodationBookingDeadline } from 'tf-checkout-shared'
+import { hooks, accommodationBookingDeadline } from 'tf-checkout-shared'
 import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
 import { Field, Input } from '../ui/Field'
 import { QuantitySelect } from '../ui/QuantitySelect'
+import { RichText } from '../ui/RichText'
 import { Button, Card, ErrorText, Loader, MutedText, SectionHeader } from '../ui/primitives'
 
 /** Native controls over the shared stay draft, quote and reservation lifecycle. */
@@ -26,7 +27,7 @@ export const Accommodation = ({ eventId }: { eventId: string }) => {
         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>}
+            {!!room.description && <RichText html={room.description} />}
             {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">

package/src/sections/AddOns.tsx

@@ -15,7 +15,6 @@ import {
   addOnMaxQuantity,
   errorMessage,
   hooks,
-  htmlToPlainText,
   type EventAddon,
 } from 'tf-checkout-shared'
 
@@ -26,6 +25,7 @@ import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
 // `CustomFieldGroupFields` API: { group, values, onChange(name, value) }.
 import { CustomFieldGroupFields } from '../ui/CustomFields'
 import { QuantitySelect } from '../ui/QuantitySelect'
+import { RichText } from '../ui/RichText'
 import type { ResolvedTheme } from '../ui/theme'
 
 const money = (currency: string, n: number): string =>
@@ -135,7 +135,6 @@ export const AddOns: FC<AddOnsProps> = ({
             {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}>
@@ -150,7 +149,9 @@ export const AddOns: FC<AddOnsProps> = ({
                           <Text style={s.priceNote}> incl. fees</Text>
                         ) : null}
                       </Text>
-                      {desc ? <Text style={s.desc}>{desc}</Text> : null}
+                      {a.description ? (
+                        <RichText html={a.description} textStyle={s.desc} />
+                      ) : null}
                     </View>
                     <View style={s.quantity}>
                       {soldOut(a) ? (

package/src/sections/Bundles.tsx

@@ -17,7 +17,6 @@ import { StyleSheet, Text, View } from 'react-native'
 import {
   bundleAvailabilityCopy,
   bundleContentsLine,
-  htmlToPlainText,
   bundleQuantityRange,
   createTranslator,
   hooks,
@@ -33,6 +32,7 @@ import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
 import { Field, Input } from '../ui/Field'
 import { Button, Card, ErrorText, Loader } from '../ui/primitives'
 import { QuantitySelect } from '../ui/QuantitySelect'
+import { RichText } from '../ui/RichText'
 import type { ResolvedTheme } from '../ui/theme'
 
 const money = (currency: string, amount: number) => `${currency} ${amount.toFixed(2)}`
@@ -361,7 +361,6 @@ export const Bundles: FC<BundlesProps> = ({
         const range = bundleQuantityRange(bundle)
         const stock = bundleAvailabilityCopy(bundle)
         const contents = bundleContentsLine(bundle)
-        const desc = htmlToPlainText(bundle.description ?? '')
         return (
           <View key={bundle.id} style={[s.item, { borderTopColor: theme.border }]}>
             <View style={s.info}>
@@ -377,7 +376,9 @@ export const Bundles: FC<BundlesProps> = ({
                   })}
                 </Text>
               )}
-              {desc ? <Text style={s.muted}>{desc}</Text> : null}
+              {bundle.description ? (
+                <RichText html={bundle.description} textStyle={s.muted} />
+              ) : null}
               {stock && stock.key !== 'bundles.soldOut' ? (
                 <Text style={[s.muted, s.stock]}>{t(stock.key, stock.values)}</Text>
               ) : null}

package/src/sections/Payment.tsx

@@ -15,7 +15,7 @@ import { Accommodation } from './Accommodation'
  *     payment plans. Existing explicit wallet rows keep their own policy gates.
  *   - CheckoutProvider owns provider-page windows for Xendit, redirect methods,
  *     Razorpay and PayPal; imperative hosts provide that port themselves.
- *   - Conditions render as plain text (HTML stripped) — no DOM to inject markup.
+ *   - Conditions use the shared native rich renderer, preserving links/formatting.
  */
 import React, { useEffect, useMemo, useState, type FC } from 'react'
 import { Platform, View } from 'react-native'
@@ -30,7 +30,6 @@ import {
   cartTicketCount,
   getConfig,
   errorMessage,
-  htmlToPlainText,
   missingCheckoutDetails,
   paymentAcknowledgementsMet,
   paymentPlanTerms,
@@ -52,8 +51,13 @@ import {
 import { CardInput, claimCardField } from '../CardInput'
 import { nativePaymentSheetAvailable } from '../paymentSheet'
 import { rnConfirmer } from '../instance'
-import { useCheckoutContext, useCheckoutValidation } from '../ui/CheckoutProvider'
+import {
+  useCheckoutContext,
+  useCheckoutValidation,
+  useTheme,
+} from '../ui/CheckoutProvider'
 import { Checkbox } from '../ui/Field'
+import { RichText } from '../ui/RichText'
 import { PaymentMethods, type PaymentMethodOption } from '../ui/PaymentMethods'
 import {
   BodyText,
@@ -85,10 +89,6 @@ const REDIRECT_LABELS: Record<string, string> = {
 const redirectLabel = (t: string) =>
   REDIRECT_LABELS[t] ?? t.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
 
-/** Condition copy as one line of plain text: native has no DOM to render
- *  markup into, and the copy is a checkbox label. */
-const conditionText = (html: string) => htmlToPlainText(html).replace(/\s*\n\s*/g, ' ')
-
 export interface PaymentProps {
   onComplete?: (order: PlaceOrderResult) => void
   /** Optional event context (parity with web; native `OrderSummary` reads the
@@ -150,6 +150,7 @@ export const Payment: FC<PaymentProps> = ({
 }) => {
   const t = translate ?? createTranslator({ locale, messages })
   const checkout = useCheckoutContext()
+  const theme = useTheme()
   // This checkout's own card field: another checkout on the page has its own.
   const cardOwner = hooks.useTicketCardOwner()
   // A bundle purchase holds the payment SDK: Pay would do nothing now.
@@ -506,7 +507,17 @@ export const Payment: FC<PaymentProps> = ({
                   checked={Boolean(checkout.acceptedConditions?.[c.id])}
                   invalid={invalid}
                   onChange={(next) => checkout.acceptCondition(c.id, next)}
-                  label={`${conditionText(c.content || c.name)}${c.isRequired ? ' *' : ''}`}
+                  label={
+                    <View style={{ flex: 1, minWidth: 0, flexDirection: 'row', gap: 4 }}>
+                      <View style={{ flex: 1, minWidth: 0 }}>
+                        <RichText
+                          html={c.content || c.name}
+                          textStyle={{ color: theme.text }}
+                        />
+                      </View>
+                      {c.isRequired ? <BodyText>*</BodyText> : null}
+                    </View>
+                  }
                 />
               </FrozenFields>
               {invalid ? (

package/src/sections/Tickets.tsx

@@ -25,11 +25,10 @@ import {
   changeTicketQuantity,
   errorMessage,
   hooks,
-  htmlToPlainText,
   ticketQuantityRange,
+  waitingListProfilePrefill,
   type TicketSelection,
   type TicketType,
-  type WaitingListEntry,
   createTranslator,
 } from 'tf-checkout-shared'
 
@@ -46,73 +45,13 @@ import { FrozenFields } from '../ui/Frozen'
 import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
 import { Field, Input } from '../ui/Field'
 import { QuantitySelect } from '../ui/QuantitySelect'
+import { WaitingListForm } from '../ui/WaitingListForm'
+import { RichText } from '../ui/RichText'
 import { Select } from '../ui/Select'
 import type { ResolvedTheme } from '../ui/theme'
 
 const money = (sym: string, n: number): string => `${sym} ${Number(n).toFixed(2)}`
 
-/** Inline waiting-list sign-up for a sold-out type. */
-const WaitingListForm: FC<{
-  ticket: TicketType
-  onJoin: (entry: WaitingListEntry) => Promise<void>
-}> = ({ ticket, onJoin }) => {
-  const [form, setForm] = useState({ firstName: '', lastName: '', email: '' })
-  const [state, setState] = useState<'idle' | 'busy' | 'done' | 'error'>('idle')
-  const [error, setError] = useState('')
-  const ok = Boolean(form.firstName.trim() && form.lastName.trim() && form.email.trim())
-
-  if (state === 'done')
-    return (
-      <MutedText>You’re on the waiting list — we’ll email you if a spot opens.</MutedText>
-    )
-
-  return (
-    <View style={staticStyles.wlForm}>
-      <Field>
-        <Input
-          placeholder="First name"
-          value={form.firstName}
-          onChangeText={(t) => setForm((f) => ({ ...f, firstName: t }))}
-        />
-      </Field>
-      <Field>
-        <Input
-          placeholder="Last name"
-          value={form.lastName}
-          onChangeText={(t) => setForm((f) => ({ ...f, lastName: t }))}
-        />
-      </Field>
-      <Field>
-        <Input
-          placeholder="Email"
-          value={form.email}
-          keyboardType="email-address"
-          autoCapitalize="none"
-          onChangeText={(t) => setForm((f) => ({ ...f, email: t }))}
-        />
-      </Field>
-      <Button
-        variant="ghost"
-        loading={state === 'busy'}
-        disabled={!ok || state === 'busy'}
-        onPress={() => {
-          setState('busy')
-          setError('')
-          onJoin({ ...form, ticketTypeId: ticket.id })
-            .then(() => setState('done'))
-            .catch((e) => {
-              setState('error')
-              setError(errorMessage(e))
-            })
-        }}
-      >
-        Join the waiting list
-      </Button>
-      {error ? <ErrorText>{error}</ErrorText> : null}
-    </View>
-  )
-}
-
 /** Host-owned visuals over the shared catalog and reservation flow. */
 export interface TicketRowRenderProps {
   ticket: TicketType
@@ -177,7 +116,27 @@ export const Tickets: FC<TicketsProps> = ({
   const checkout = useCheckoutContext()
   const theme = useTheme()
   const s = useTicketStyles(theme)
-  const ticketsQuery = hooks.useTicketsWithMeta(eventId)
+  const catalog = hooks.useTicketCatalog(eventId, timeSlotDates)
+  const {
+    ticketsQuery,
+    eventInfo,
+    slotQuery,
+    isTimeSlot,
+    dates,
+    slotDate,
+    setSlotDate,
+    qty,
+    setQty,
+    refetchCatalog,
+    current: catalogCurrent,
+  } = catalog
+  const waitingBuyer = hooks.useAuthSession()
+  const cachedProfile = hooks.useProfile({ enabled: false }).data
+  const waitingPrefill = waitingListProfilePrefill(
+    cachedProfile,
+    waitingBuyer.buyerId,
+    waitingBuyer.sessionScope
+  )
   // 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).
@@ -185,40 +144,18 @@ export const Tickets: FC<TicketsProps> = ({
   const bundleWait = hooks.useTicketGatewayWait(checkout.store)
   const bundleStarting = bundleWait !== null
   const promoMeta = ticketsQuery.data?.promo
-  const showWaitingList = ticketsQuery.data?.showWaitingList ?? false
-
-  const [qty, setQty] = useState<Record<string, number>>({})
-  const [slotDate, setSlotDate] = useState('')
-
-  // Time-slot / calendar events: pick a date, then buy from that session's slots.
-  const eventInfo = hooks.useEvent(eventId).data
-  const isTimeSlot = Boolean(timeSlotDates?.length || eventInfo?.isTimeSlotEvent)
-  const dates = useMemo(
-    () => timeSlotDates ?? eventInfo?.availableDates ?? [],
-    [timeSlotDates, eventInfo?.availableDates]
-  )
-  useEffect(() => {
-    if (isTimeSlot && !slotDate && dates.length) setSlotDate(dates[0])
-  }, [isTimeSlot, slotDate, dates])
-  const slotQuery = hooks.useTimeSlotTickets(eventId, isTimeSlot ? slotDate : undefined)
 
-  const tickets = useMemo(
-    () => (isTimeSlot ? (slotQuery.data ?? []) : (ticketsQuery.data?.tickets ?? [])),
-    [isTimeSlot, slotQuery.data, ticketsQuery.data?.tickets]
+  const tickets = catalog.tickets
+  const [error, updateError] = hooks.useScopedState(catalog.scope, '')
+  const setError = (message: string) => {
+    if (catalogCurrent()) updateError(message)
+  }
+  const [code, setCode] = hooks.useScopedState(catalog.scope, '')
+  const [codeState, setCodeState] = hooks.useScopedState<'idle' | 'busy'>(
+    catalog.scope,
+    'idle'
   )
-  const [error, setError] = useState('')
-  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 [promoOpen, setPromoOpen] = hooks.useScopedState(catalog.scope, false)
   const [visibleDescription, setVisibleDescription] = useState<string | null>(null)
   const attributionEvent = useRef<string | null>(null)
 
@@ -226,7 +163,12 @@ export const Tickets: FC<TicketsProps> = ({
   // per event. Explicit props win. URL reading (web-only) is intentionally
   // skipped on native — `readAttributionFromUrl` is accepted for prop parity.
   useEffect(() => {
-    if (attributionEvent.current === eventId) return
+    if (
+      !catalogCurrent() ||
+      !catalog.attributionReady ||
+      attributionEvent.current === eventId
+    )
+      return
     attributionEvent.current = eventId
 
     const promo = initialPromoCode?.trim() ?? ''
@@ -243,13 +185,27 @@ export const Tickets: FC<TicketsProps> = ({
         .applyPromoCode(eventId, promo)
         .catch(() => undefined)
         .finally(() => {
-          ticketsQuery.refetch().finally(() => setCodeState('idle'))
+          if (!catalogCurrent()) return
+          return refetchCatalog()
+            .catch((e) => {
+              if (catalogCurrent()) setError(errorMessage(e))
+            })
+            .finally(() => {
+              if (catalogCurrent()) setCodeState('idle')
+            })
         })
     }
     // Checkout actions and query functions are stable; this effect is scoped to
     // one attribution pass per event.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [eventId, initialPromoCode, referrer, readAttributionFromUrl])
+  }, [
+    eventId,
+    initialPromoCode,
+    referrer,
+    readAttributionFromUrl,
+    catalog.instance,
+    catalog.attributionReady,
+  ])
 
   // Seed the currency state once so a multi-currency event can offer a switcher
   // on the ticket screen (before the cart is primed). No-op for single-currency.
@@ -262,9 +218,11 @@ export const Tickets: FC<TicketsProps> = ({
     checkout
       .syncCurrency(eventId, nextCode)
       .then((res) => {
-        if (res.requiresCatalogRefresh) {
+        if (catalogCurrent() && res.requiresCatalogRefresh) {
           setQty({})
-          ticketsQuery.refetch()
+          refetchCatalog().catch((e) => {
+            if (catalogCurrent()) setError(errorMessage(e))
+          })
         }
       })
       .catch(() => undefined)
@@ -310,7 +268,9 @@ export const Tickets: FC<TicketsProps> = ({
       : undefined
 
   const prime = () => {
+    if (!catalogCurrent() || catalog.busy || codeState === 'busy' || catalog.error) return
     setError('')
+    const continuationCurrent = catalog.capturePrimeContinuation()
     const selections: TicketSelection[] = selected.map((t) => ({
       id: t.id,
       name: t.name,
@@ -323,7 +283,9 @@ export const Tickets: FC<TicketsProps> = ({
     // payment SDK nothing is primed, and the error names that flow.
     checkout
       .setTickets(eventId, selections)
-      .then(() => onContinue?.())
+      .then(() => {
+        if (continuationCurrent()) onContinue?.()
+      })
       .catch((e) =>
         setError(
           e instanceof ConfirmerBusyError
@@ -334,19 +296,34 @@ export const Tickets: FC<TicketsProps> = ({
   }
 
   const applyCode = () => {
-    if (!code.trim()) return
+    if (
+      !catalogCurrent() ||
+      !catalog.attributionReady ||
+      catalog.busy ||
+      codeState === 'busy' ||
+      !code.trim()
+    )
+      return
+    setError('')
     setCodeState('busy')
     checkout
       .applyPromoCode(eventId, code.trim())
       .catch(() => undefined)
       .finally(() => {
-        ticketsQuery.refetch().finally(() => setCodeState('idle'))
+        if (!catalogCurrent()) return
+        return refetchCatalog()
+          .catch((e) => {
+            if (catalogCurrent()) setError(errorMessage(e))
+          })
+          .finally(() => {
+            if (catalogCurrent()) setCodeState('idle')
+          })
       })
   }
 
   const isAccess = promoMeta?.isAccessCodeEnabled
   const showCodeInput = promoMeta?.isPromotionsEnabled || isAccess
-  const listQuery = isTimeSlot ? slotQuery : ticketsQuery
+  const listQuery = catalog
   const currency = checkout.currency
 
   const renderRow = (t: TicketType) => {
@@ -354,8 +331,6 @@ export const Tickets: FC<TicketsProps> = ({
     const unavailable = t.soldOut || t.salesEnded || notStarted
     const original = originals.current[t.id]
     const discounted = original != null && original > t.price
-    const canWaitlist =
-      t.soldOut && (t.waitingListEnabled || showWaitingList) && !t.salesEnded
     const isFree = Number(t.price) === 0
     const sym = t.priceSymbol || t.currency
     const range = ticketQuantityRange(t)
@@ -457,26 +432,10 @@ export const Tickets: FC<TicketsProps> = ({
                 )}
               </View>
               {t.descriptionRich && visibleDescription === t.id ? (
-                <Text style={s.description}>{htmlToPlainText(t.descriptionRich)}</Text>
+                <RichText html={t.descriptionRich} textStyle={s.description} />
               ) : null}
             </>
           )}
-          {canWaitlist ? (
-            wlOpen[t.id] ? (
-              <WaitingListForm
-                ticket={t}
-                onJoin={(entry) => checkout.joinWaitingList(eventId, entry)}
-              />
-            ) : (
-              <Pressable
-                accessibilityRole="button"
-                style={s.textAction}
-                onPress={() => setWlOpen((w) => ({ ...w, [t.id]: true }))}
-              >
-                <Text style={s.wlToggle}>Join the waiting list</Text>
-              </Pressable>
-            )
-          ) : null}
         </View>
       </Fragment>
     )
@@ -485,7 +444,7 @@ export const Tickets: FC<TicketsProps> = ({
   // Time-slot layout groups the date's tickets under their time heading.
   const timeGroups: { time: string; items: TicketType[] }[] = []
   if (isTimeSlot)
-    for (const t of tickets) {
+    for (const t of catalog.datedTickets) {
       const time = t.timeSlot?.time ?? ''
       const g = timeGroups.find((x) => x.time === time)
       if (g) g.items.push(t)
@@ -521,7 +480,6 @@ export const Tickets: FC<TicketsProps> = ({
               value={slotDate}
               onChange={(d) => {
                 setSlotDate(d)
-                setQty({})
               }}
               options={dates.map((d) => ({ label: d, value: d }))}
             />
@@ -542,7 +500,7 @@ export const Tickets: FC<TicketsProps> = ({
           </View>
         ) : null}
 
-        {isTimeSlot && !slotQuery.isLoading && tickets.length === 0 && slotDate ? (
+        {isTimeSlot && !slotQuery.isLoading && !slotQuery.data?.length && slotDate ? (
           <MutedText>No sessions available on this date.</MutedText>
         ) : null}
 
@@ -555,6 +513,13 @@ export const Tickets: FC<TicketsProps> = ({
             ))
           : tickets.map(renderRow)}
 
+        {isTimeSlot && catalog.regularTickets.length > 0 ? (
+          <>
+            <Text style={s.slotTime}>{createTranslator()('tickets.getTickets')}</Text>
+            {catalog.regularTickets.map(renderRow)}
+          </>
+        ) : null}
+
         {/* Promo / access code */}
         {showCodeInput ? (
           <View style={s.promo}>
@@ -580,7 +545,12 @@ export const Tickets: FC<TicketsProps> = ({
                   variant="ghost"
                   onPress={applyCode}
                   loading={codeState === 'busy'}
-                  disabled={codeState === 'busy' || !code.trim()}
+                  disabled={
+                    !catalog.attributionReady ||
+                    catalog.busy ||
+                    codeState === 'busy' ||
+                    !code.trim()
+                  }
                 >
                   {isAccess ? 'ENTER' : 'APPLY'}
                 </Button>
@@ -610,6 +580,9 @@ export const Tickets: FC<TicketsProps> = ({
                 checkout.orderFixed ||
                 checkout.isBusy ||
                 bundleStarting ||
+                catalog.busy ||
+                codeState === 'busy' ||
+                !!catalog.error ||
                 selected.length === 0,
               title: continueTitle,
             })
@@ -617,7 +590,14 @@ export const Tickets: FC<TicketsProps> = ({
             <Button
               onPress={prime}
               loading={checkout.isBusy}
-              disabled={checkout.isBusy || bundleStarting || selected.length === 0}
+              disabled={
+                checkout.isBusy ||
+                bundleStarting ||
+                catalog.busy ||
+                codeState === 'busy' ||
+                !!catalog.error ||
+                selected.length === 0
+              }
             >
               {checkout.isBusy
                 ? 'Reserving…'
@@ -639,6 +619,13 @@ export const Tickets: FC<TicketsProps> = ({
           </Button>
         ) : null}
 
+        <WaitingListForm
+          eventId={eventId}
+          definition={ticketsQuery.data?.waitingList}
+          prefill={waitingPrefill}
+          onJoin={(entry) => checkout.joinWaitingList(eventId, entry)}
+        />
+
         {error || checkout.error ? (
           <ErrorText>{error || checkout.error}</ErrorText>
         ) : null}
@@ -647,11 +634,6 @@ export const Tickets: FC<TicketsProps> = ({
   )
 }
 
-/** Theme-independent layout bits (used by the WaitingListForm subcomponent). */
-const staticStyles = StyleSheet.create({
-  wlForm: { gap: 8 },
-})
-
 const useTicketStyles = (theme: ResolvedTheme) =>
   useMemo(
     () =>
@@ -775,12 +757,6 @@ const useTicketStyles = (theme: ResolvedTheme) =>
           lineHeight: theme.fontSize * 1.5,
           fontFamily: theme.fontFamily,
         },
-        wlToggle: {
-          color: theme.accent,
-          fontSize: theme.fontSize - 1,
-          fontWeight: '600',
-          fontFamily: theme.fontFamily,
-        },
         promo: { gap: 8 },
         promoToggle: {
           color: theme.accent,

package/src/sections/WaiverSigning.tsx

@@ -20,7 +20,6 @@ import {
   emptyWaiverDraft,
   formatDateDigits,
   hooks,
-  htmlToPlainText,
   holderBackfilledFrom,
   signatureMatchesHolder,
   waiverTicketFormKey,
@@ -38,6 +37,7 @@ import {
 
 import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
 import { SignaturePad } from '../ui/SignaturePad'
+import { RichText } from '../ui/RichText'
 import { Checkbox, Field, Input } from '../ui/Field'
 import { Button, Card, ErrorText, SectionHeader } from '../ui/primitives'
 import type { ResolvedTheme } from '../ui/theme'
@@ -116,7 +116,7 @@ export const WaiverSigning: FC<WaiverSigningProps> = ({
         )}
       </Text>
       <ScrollView style={[s.textBox, { borderColor: theme.border }]} nestedScrollEnabled>
-        <Text style={s.body}>{htmlToPlainText(waiver.bodyHtml)}</Text>
+        <RichText html={waiver.bodyHtml} textStyle={s.body} selectable />
       </ScrollView>
 
       {tickets.map((ticket) => {