tf-checkout-react-native 1.0.47 → 2.0.0-beta.10

package/src/sections/Tickets.tsx

@@ -0,0 +1,761 @@
+/**
+ * `<Tickets/>` — ticket-type catalog + quantity selection. The RN analogue of
+ * the web `Tickets` section, at full parity: per-type price line (struck
+ * original when discounted, FREE at 0, "(… with fees)" sub-line, deposit %),
+ * View/Hide info descriptions, sold-out / not-started / ended badges, group
+ * headings + a "Reserve tables" divider, one-type-at-a-time selection (unless
+ * `allowMultipleTicketTypePurchases`), promo / access codes, waiting-list
+ * sign-up, a currency switcher, time-slot dates, and a "Select seats" hand-off
+ * for seated events. Reads the shared engine via `useCheckoutContext()`; primes
+ * the cart with `checkout.setTickets`.
+ */
+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 {
+  Button,
+  Card,
+  Divider,
+  ErrorText,
+  Loader,
+  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'
+
+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
+  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. */
+  title?: string | false
+  /** Fired once the cart is primed (tickets added) — e.g. reveal `<AddOns/>`. */
+  onContinue?: () => void
+  /** CTA label. Old storefront uses "Get tickets". */
+  buttonLabel?: string
+  /** Force time-slot mode + supply the selectable session dates (ISO yyyy-mm-dd).
+   *  Omit to auto-detect from the event (`isTimeSlotEvent` / `availableDates`). */
+  timeSlotDates?: string[]
+  /** SEATED events: fired when the buyer taps "Select seats". Wire this to
+   *  reveal `<SeatMap/>`. Without it the seat CTA is hidden. */
+  onSelectSeats?: () => void
+  /** Apply this code once when the ticket catalog mounts. */
+  initialPromoCode?: string
+  /** Attribute this visit once. */
+  referrer?: string | number
+  /** Web also reads promo/referral values from the URL. React Native has no
+   *  `window.location`, so URL attribution is skipped here; the prop is accepted
+   *  for parity and defaults true. */
+  readAttributionFromUrl?: boolean
+}
+
+export const Tickets: FC<TicketsProps> = ({
+  eventId,
+  title = false,
+  onContinue,
+  buttonLabel = 'Get tickets',
+  timeSlotDates,
+  onSelectSeats,
+  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
+
+  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 [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 [visibleDescription, setVisibleDescription] = useState<string | null>(null)
+  const attributionEvent = useRef<string | null>(null)
+
+  // Match hosted links: attribute referral visits and apply a carried promo once
+  // 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
+    attributionEvent.current = eventId
+
+    const promo = initialPromoCode?.trim() ?? ''
+    const referral = referrer
+
+    if (referral !== undefined && String(referral).trim()) {
+      checkout.attributeReferrer(eventId, referral).catch(() => undefined)
+    }
+    if (promo) {
+      setCode(promo)
+      setPromoOpen(true)
+      setCodeState('busy')
+      checkout
+        .applyPromoCode(eventId, promo)
+        .catch(() => undefined)
+        .finally(() => {
+          ticketsQuery.refetch().finally(() => 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])
+
+  // 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.
+  useEffect(() => {
+    checkout.syncCurrency(eventId, undefined, { seed: true }).catch(() => undefined)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [eventId])
+
+  const changeCurrency = (nextCode: string) => {
+    checkout
+      .syncCurrency(eventId, nextCode)
+      .then((res) => {
+        if (res.requiresCatalogRefresh) {
+          setQty({})
+          ticketsQuery.refetch()
+        }
+      })
+      .catch(() => undefined)
+  }
+
+  // Remember each type's first-seen (pre-promo) price so a discount can strike it.
+  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])
+
+  const selected = tickets.filter((t) => (qty[t.id] ?? 0) > 0)
+  // The current selection's kind — drives the CTA label and the mutual-exclusion
+  // rule below (a table order and a ticket order can't be combined).
+  const selectionIsTable = selected.some((t) => t.isTable)
+  const allowMultiple = eventInfo?.allowMultipleTicketTypePurchases === true
+
+  // Ported from the old checkout's `handleTicketSelect`: unless the event opts
+  // 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 = (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
+  // with `allowDirectPurchase` opts out and keeps its stepper.
+  const isSeated = eventInfo?.isSeatedEvent ?? false
+  const seatMapRow = (t: TicketType) => isSeated && !t.allowDirectPurchase
+  const hasSeatMapTickets = tickets.some(seatMapRow)
+  const directPurchasable = tickets.filter((t) => !seatMapRow(t))
+  const seatCtaLabel = eventInfo?.tableMapEnabled ? 'Select on map' : 'Select seats'
+
+  // A "Reserve tables" divider before the first table type — only when regular
+  // tickets actually precede it (a tables-first list gets no stray divider).
+  const firstTableIndex = tickets.findIndex((t) => t.isTable)
+  const firstTableId =
+    firstTableIndex > 0 && tickets.slice(0, firstTableIndex).some((t) => !t.isTable)
+      ? tickets[firstTableIndex].id
+      : undefined
+
+  const prime = () => {
+    setError('')
+    const selections: TicketSelection[] = selected.map((t) => ({
+      id: t.id,
+      name: t.name,
+      optionName: t.optionName,
+      price: t.price,
+      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(
+          e instanceof ConfirmerBusyError
+            ? createTranslator()(e.message)
+            : errorMessage(e)
+        )
+      )
+  }
+
+  const applyCode = () => {
+    if (!code.trim()) return
+    setCodeState('busy')
+    checkout
+      .applyPromoCode(eventId, code.trim())
+      .catch(() => undefined)
+      .finally(() => {
+        ticketsQuery.refetch().finally(() => setCodeState('idle'))
+      })
+  }
+
+  const isAccess = promoMeta?.isAccessCodeEnabled
+  const showCodeInput = promoMeta?.isPromotionsEnabled || isAccess
+  const listQuery = isTimeSlot ? slotQuery : ticketsQuery
+  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 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)
+    const ticketIndex = tickets.findIndex((candidate) => candidate.id === t.id)
+    const previousTicket = ticketIndex > 0 ? tickets[ticketIndex - 1] : undefined
+    const startsNamedGroup =
+      Boolean(t.groupName) && t.groupName !== previousTicket?.groupName
+
+    const groupHeading = startsNamedGroup ? (
+      <Text style={s.group}>{t.groupName}</Text>
+    ) : t.id === firstTableId ? (
+      <>
+        <Divider />
+        <Text style={s.group}>Reserve tables</Text>
+      </>
+    ) : null
+
+    return (
+      <Fragment key={t.id}>
+        {groupHeading}
+        <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>
+                    {/* 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
+                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),
+                    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)}
+                    />
+                  </View>
+                )}
+              </View>
+              {t.descriptionRich && visibleDescription === t.id ? (
+                <Text style={s.description}>{htmlToPlainText(t.descriptionRich)}</Text>
+              ) : null}
+            </>
+          )}
+          {canWaitlist ? (
+            wlOpen[t.id] ? (
+              <WaitingListForm
+                ticket={t}
+                onJoin={(entry) => checkout.joinWaitingList(eventId, entry)}
+              />
+            ) : (
+              <Pressable
+                accessibilityRole="button"
+                onPress={() => setWlOpen((w) => ({ ...w, [t.id]: true }))}
+              >
+                <Text style={s.wlToggle}>Join the waiting list</Text>
+              </Pressable>
+            )
+          ) : null}
+        </View>
+      </Fragment>
+    )
+  }
+
+  // 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) {
+      const time = t.timeSlot?.time ?? ''
+      const g = timeGroups.find((x) => x.time === time)
+      if (g) g.items.push(t)
+      else timeGroups.push({ time, items: [t] })
+    }
+
+  const Container = unstyled ? View : Card
+  const continueTitle = checkout.isBusy
+    ? 'Reserving…'
+    : selectionIsTable
+      ? 'Reserve tables'
+      : buttonLabel
+
+  return (
+    <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}
+
+        {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 ? (
+          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>
+  )
+}
+
+/** Theme-independent layout bits (used by the WaitingListForm subcomponent). */
+const staticStyles = StyleSheet.create({
+  wlForm: { gap: 8 },
+})
+
+const useTicketStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        loading: { paddingVertical: 24, alignItems: 'center' },
+        selectBlock: { gap: 6 },
+        selectLabel: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 2,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        slotTime: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '700',
+          marginTop: 4,
+          fontFamily: theme.fontFamily,
+        },
+        group: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '700',
+          marginTop: 4,
+          fontFamily: theme.fontFamily,
+        },
+        rowWrap: { gap: 8 },
+        row: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 },
+        info: { flex: 1, gap: 4 },
+        nameRow: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 8 },
+        name: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        infoToggle: {
+          color: theme.accent,
+          fontSize: theme.fontSize - 2,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        priceRow: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          gap: 6,
+        },
+        oldPrice: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          textDecorationLine: 'line-through',
+          fontVariant: ['tabular-nums'],
+          fontFamily: theme.fontFamily,
+        },
+        amount: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '700',
+          fontVariant: ['tabular-nums'],
+          fontFamily: theme.fontFamily,
+        },
+        amountFree: { color: theme.success },
+        perTable: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+        fees: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+        deposit: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 2,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        soldout: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        qtyWrap: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+        guests: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 2,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        description: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+        wlToggle: {
+          color: theme.accent,
+          fontSize: theme.fontSize - 1,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        promo: { gap: 8 },
+        promoToggle: {
+          color: theme.accent,
+          fontSize: theme.fontSize - 1,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+      }),
+    [theme]
+  )