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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tf-checkout-react-native",
-  "version": "2.0.0-beta.18",
+  "version": "2.0.0-beta.21",
   "description": "TheTicketFairy ReactNative Checkout library",
   "homepage": "https://github.com/theticketfairy/tf-shared-libraries#readme",
   "author": "The Ticket Fairy",

package/src/sections/Tickets.tsx

@@ -23,6 +23,7 @@ import { Pressable, StyleSheet, Text, View } from 'react-native'
 import {
   ConfirmerBusyError,
   changeTicketQuantity,
+  ticketPriceContext,
   errorMessage,
   hooks,
   ticketQuantityRange,
@@ -116,7 +117,20 @@ 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(
@@ -132,42 +146,17 @@ export const Tickets: FC<TicketsProps> = ({
   const bundleStarting = bundleWait !== null
   const promoMeta = ticketsQuery.data?.promo
 
-  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 refetchCatalog = () =>
-    Promise.all([
-      ticketsQuery.refetch(),
-      ...(isTimeSlot && slotDate ? [slotQuery.refetch()] : []),
-    ])
-
-  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 [promoOpen, setPromoOpen] = hooks.useScopedState(catalog.scope, false)
   const [visibleDescription, setVisibleDescription] = useState<string | null>(null)
   const attributionEvent = useRef<string | null>(null)
 
@@ -175,7 +164,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() ?? ''
@@ -192,13 +186,27 @@ export const Tickets: FC<TicketsProps> = ({
         .applyPromoCode(eventId, promo)
         .catch(() => undefined)
         .finally(() => {
-          refetchCatalog().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.
@@ -211,9 +219,11 @@ export const Tickets: FC<TicketsProps> = ({
     checkout
       .syncCurrency(eventId, nextCode)
       .then((res) => {
-        if (res.requiresCatalogRefresh) {
+        if (catalogCurrent() && res.requiresCatalogRefresh) {
           setQty({})
-          refetchCatalog()
+          refetchCatalog().catch((e) => {
+            if (catalogCurrent()) setError(errorMessage(e))
+          })
         }
       })
       .catch(() => undefined)
@@ -223,8 +233,9 @@ export const Tickets: FC<TicketsProps> = ({
   const originals = useRef<Record<string, number>>({})
   useEffect(() => {
     for (const t of tickets)
-      if (originals.current[t.id] == null) originals.current[t.id] = t.price
-  }, [tickets])
+      if (originals.current[ticketPriceContext(catalog.scope, t)] == null)
+        originals.current[ticketPriceContext(catalog.scope, t)] = t.price
+  }, [tickets, catalog.scope])
 
   const selected = tickets.filter((t) => (qty[t.id] ?? 0) > 0)
   // The current selection's kind — drives the CTA label and the mutual-exclusion
@@ -259,7 +270,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,
@@ -272,7 +285,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
@@ -283,25 +298,40 @@ 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(() => {
-        refetchCatalog().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) => {
     const notStarted = !t.salesStarted
     const unavailable = t.soldOut || t.salesEnded || notStarted
-    const original = originals.current[t.id]
+    const original = originals.current[ticketPriceContext(catalog.scope, t)]
     const discounted = original != null && original > t.price
     const isFree = Number(t.price) === 0
     const sym = t.priceSymbol || t.currency
@@ -416,7 +446,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)
@@ -452,7 +482,6 @@ export const Tickets: FC<TicketsProps> = ({
               value={slotDate}
               onChange={(d) => {
                 setSlotDate(d)
-                setQty({})
               }}
               options={dates.map((d) => ({ label: d, value: d }))}
             />
@@ -473,7 +502,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}
 
@@ -486,6 +515,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}>
@@ -511,7 +547,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>
@@ -541,6 +582,9 @@ export const Tickets: FC<TicketsProps> = ({
                 checkout.orderFixed ||
                 checkout.isBusy ||
                 bundleStarting ||
+                catalog.busy ||
+                codeState === 'busy' ||
+                !!catalog.error ||
                 selected.length === 0,
               title: continueTitle,
             })
@@ -548,7 +592,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…'