tf-checkout-react-native 2.0.0-beta.16 → 2.0.0-beta.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tf-checkout-react-native",
-  "version": "2.0.0-beta.16",
+  "version": "2.0.0-beta.18",
   "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/paymentSheet.ts

@@ -59,12 +59,21 @@ export const nativeSheetIntentIdentity = (
   )
 }
 
-/** The bridge must preserve the complete raw PI payment_method_types list.
- * Stripe may offer card-mode Link within this existing card payment contract. */
-const nativeSheetCardMethods = (intent: unknown): boolean => {
+/** Keep the complete original list: the server can enable immediate USD Cash
+ * App Pay beside card. Other rails still need their own canonical contract. */
+const nativeSheetMethods = (intent: unknown): boolean => {
   if (!intent || typeof intent !== 'object') return false
   const methods = Object.getOwnPropertyDescriptor(intent, 'paymentMethodTypes')?.value
-  return Array.isArray(methods) && methods.length === 1 && methods[0] === 'card'
+  if (!Array.isArray(methods)) return false
+  if (methods.length === 1) return methods[0] === 'card'
+  const currency = Object.getOwnPropertyDescriptor(intent, 'currency')?.value
+  return (
+    methods.length === 2 &&
+    methods.includes('card') &&
+    methods.includes('cashapp') &&
+    typeof currency === 'string' &&
+    currency.toUpperCase() === 'USD'
+  )
 }
 
 /** Internal building block. The caller must hold
@@ -111,7 +120,7 @@ export const createPaymentSheetConfirmation = (
           !nativeSheetIntentIdentity(result.paymentIntent, intentId, options.reviewed)
         )
           throw paymentProviderError(NATIVE_SHEET_REVIEW_REQUIRED, 'notStarted')
-        if (!nativeSheetCardMethods(result.paymentIntent))
+        if (!nativeSheetMethods(result.paymentIntent))
           throw paymentProviderError(NATIVE_SHEET_CARD_FIELD_MESSAGE, 'notStarted', {
             code: NATIVE_SHEET_CARD_FIELD_REQUIRED,
           })
@@ -155,7 +164,7 @@ export const createPaymentSheetConfirmation = (
       if (
         result.error ||
         !nativeSheetIntentIdentity(result.paymentIntent, intentId, options.reviewed) ||
-        !nativeSheetCardMethods(result.paymentIntent)
+        !nativeSheetMethods(result.paymentIntent)
       )
         throw paymentProviderError(
           'The original payment could not be verified.',

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
@@ -178,6 +117,13 @@ export const Tickets: FC<TicketsProps> = ({
   const theme = useTheme()
   const s = useTicketStyles(theme)
   const ticketsQuery = hooks.useTicketsWithMeta(eventId)
+  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,7 +131,6 @@ 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('')
@@ -201,6 +146,11 @@ export const Tickets: FC<TicketsProps> = ({
     if (isTimeSlot && !slotDate && dates.length) setSlotDate(dates[0])
   }, [isTimeSlot, slotDate, dates])
   const slotQuery = hooks.useTimeSlotTickets(eventId, isTimeSlot ? slotDate : undefined)
+  const refetchCatalog = () =>
+    Promise.all([
+      ticketsQuery.refetch(),
+      ...(isTimeSlot && slotDate ? [slotQuery.refetch()] : []),
+    ])
 
   const tickets = useMemo(
     () => (isTimeSlot ? (slotQuery.data ?? []) : (ticketsQuery.data?.tickets ?? [])),
@@ -218,7 +168,6 @@ export const Tickets: FC<TicketsProps> = ({
     setPromoOpen(false)
     setError('')
   })
-  const [wlOpen, setWlOpen] = useState<Record<string, boolean>>({})
   const [visibleDescription, setVisibleDescription] = useState<string | null>(null)
   const attributionEvent = useRef<string | null>(null)
 
@@ -243,7 +192,7 @@ export const Tickets: FC<TicketsProps> = ({
         .applyPromoCode(eventId, promo)
         .catch(() => undefined)
         .finally(() => {
-          ticketsQuery.refetch().finally(() => setCodeState('idle'))
+          refetchCatalog().finally(() => setCodeState('idle'))
         })
     }
     // Checkout actions and query functions are stable; this effect is scoped to
@@ -264,7 +213,7 @@ export const Tickets: FC<TicketsProps> = ({
       .then((res) => {
         if (res.requiresCatalogRefresh) {
           setQty({})
-          ticketsQuery.refetch()
+          refetchCatalog()
         }
       })
       .catch(() => undefined)
@@ -340,7 +289,7 @@ export const Tickets: FC<TicketsProps> = ({
       .applyPromoCode(eventId, code.trim())
       .catch(() => undefined)
       .finally(() => {
-        ticketsQuery.refetch().finally(() => setCodeState('idle'))
+        refetchCatalog().finally(() => setCodeState('idle'))
       })
   }
 
@@ -354,8 +303,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 +404,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>
     )
@@ -639,6 +570,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 +585,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 +708,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) => {