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

package/src/sections/Tickets.tsx

@@ -0,0 +1,680 @@
+/**
+ * `<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 } from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+import {
+  errorMessage,
+  hooks,
+  ticketQuantityRange,
+  type TicketSelection,
+  type TicketType,
+  type WaitingListEntry,
+} from 'tf-checkout-shared'
+
+import {
+  Button,
+  Card,
+  Divider,
+  ErrorText,
+  Loader,
+  MutedText,
+  SectionHeader,
+} from '../ui/primitives'
+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. */
+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>
+  )
+}
+
+export interface TicketsProps {
+  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,
+}) => {
+  const checkout = useCheckoutContext()
+  const theme = useTheme()
+  const s = useTicketStyles(theme)
+  const ticketsQuery = hooks.useTicketsWithMeta(eventId)
+  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)
+  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 = (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
+    })
+
+  // 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,
+    }))
+    checkout
+      .setTickets(eventId, selections)
+      .then(() => onContinue?.())
+      .catch((e) => setError(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={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'}
+                    </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}>{stripHtml(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] })
+    }
+
+  return (
+    <Card>
+      {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}
+
+      {/* 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>
+  )
+}
+
+/** 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]
+  )