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

package/src/sections/BillingInfo.tsx

@@ -25,6 +25,16 @@ import React, {
 import { Linking, Pressable, StyleSheet, Text, View } from 'react-native'
 
 import {
+  billingDobIso,
+  changeBillingPhone,
+  changeBillingField,
+  billingDraftFrom,
+  billingFilledHolderIndexes,
+  holderDraftsForSlots,
+  holderDraftsFrom,
+  holderDraftsReloaded,
+  holderDraftsMirroringBuyer,
+  patchedHolderDraft,
   hooks,
   mapProfileToBilling,
   missingCheckoutDetails,
@@ -43,9 +53,11 @@ import {
 } from '../ui/CheckoutProvider'
 import { CustomFieldInput } from '../ui/CustomFields'
 import { Checkbox, Field, Input } from '../ui/Field'
+import { FrozenFields } from '../ui/Frozen'
 import { Button, Card, ErrorText, SectionHeader } from '../ui/primitives'
 import type { ResolvedTheme } from '../ui/theme'
 import { BillingAddressFields } from './billing/BillingAddressFields'
+import { BillingPhoneIdentity } from './billing/PhoneIdentity'
 import { BuyerField } from './billing/BuyerField'
 import { TicketHoldersCard } from './billing/TicketHoldersCard'
 import type { BillingDraft, HolderDraft } from './billing/types'
@@ -110,52 +122,42 @@ export const BillingInfo: FC<BillingInfoProps> = ({
   const validation = useCheckoutValidation()
   const theme = useTheme()
   const s = useStyles(theme)
-  const profile = hooks.useProfile({ retry: false })
+  const profile = hooks.useCheckoutBuyerProfile(eventId)
   const event = hooks.useEvent(eventId)
   // No onContinue ⇒ this is one combined form (inside <EmbeddedCheckout/>): mirror the
   // fields into the engine live and drop the "continue" button, so the buyer
   // fills billing + pays with ONE button — the way the old checkout flowed.
   const combined = !onContinue
 
-  const [billing, setBilling] = useState<BillingDraft>({
-    firstName: checkout.billing?.firstName ?? '',
-    lastName: checkout.billing?.lastName ?? '',
-    email: checkout.billing?.email ?? '',
-    confirmEmail: checkout.billing?.confirmEmail ?? '',
-    phone: checkout.billing?.phone,
-    streetAddress: checkout.billing?.streetAddress,
-    city: checkout.billing?.city,
-    zip: checkout.billing?.zip,
-    countryId: checkout.billing?.countryId,
-    stateId: checkout.billing?.stateId,
-    countryCode: checkout.billing?.countryCode,
-    stateCode: checkout.billing?.stateCode,
-    nationality: checkout.billing?.nationality,
-    gender: checkout.billing?.gender,
-    instagramHandle: checkout.billing?.instagramHandle,
-  })
+  const [billing, setBilling] = useState<BillingDraft>(() =>
+    billingDraftFrom(checkout.billing)
+  )
   const [dataCapture, setDataCapture] = useState<CustomFieldValues>(
     checkout.billing?.dataCapture ?? {}
   )
   const [holders, setHolders] = useState<HolderDraft[]>(() =>
-    checkout.holders.map((holder) => ({
-      firstName: holder.firstName,
-      lastName: holder.lastName,
-      email: holder.email,
-      phone: holder.phone ?? '',
-      ticketTypeId: holder.ticketTypeId,
-      ticketDataCapture: holder.ticketDataCapture ?? {},
-    }))
+    holderDraftsFrom(checkout.holders, checkout.backfilledHolderIndexes)
   )
   const [consent, setConsent] = useState({ ttfOptIn: false, brandOptIn: false })
-  const [dob, setDob] = useState(() => {
-    const b = checkout.billing
-    if (!b?.dobDay || !b.dobMonth || !b.dobYear) return ''
-    return `${b.dobYear}-${String(b.dobMonth).padStart(2, '0')}-${String(
-      b.dobDay
-    ).padStart(2, '0')}`
-  }) // ISO yyyy-mm-dd
+  const [dob, setDob] = useState(() => billingDobIso(checkout.billing)) // ISO yyyy-mm-dd
+  // A placement that ended without a charge: show what a retry submits.
+  hooks.useOnOrderReleased(checkout.orderFixed, () => {
+    setBilling(billingDraftFrom(checkout.billing))
+    setDataCapture(checkout.billing?.dataCapture ?? {})
+    setDob(billingDobIso(checkout.billing))
+    setConsent(checkout.consent)
+    setHolders((prev) =>
+      holderDraftsReloaded(prev, checkout.holders, checkout.backfilledHolderIndexes)
+    )
+  })
   const restoredHolders = useRef(checkout.holders)
+  // Another event: its holders and custom answers start empty; the buyer's
+  // own details stay.
+  hooks.useOnEventChange(checkout.eventId, () => {
+    restoredHolders.current = []
+    setHolders([])
+    setDataCapture({})
+  })
   const profileSeeded = useRef(false)
   const countryDefaultApplied = useRef(Boolean(checkout.billing?.countryId))
 
@@ -233,38 +235,21 @@ export const BillingInfo: FC<BillingInfoProps> = ({
 
   // Resize holders to the slot count, preserving typed values; tag ticket type.
   useEffect(() => {
-    setHolders((prev) =>
-      slots.map((slot, i) => ({
-        firstName: prev[i]?.firstName ?? restoredHolders.current[i]?.firstName ?? '',
-        lastName: prev[i]?.lastName ?? restoredHolders.current[i]?.lastName ?? '',
-        email: prev[i]?.email ?? restoredHolders.current[i]?.email ?? '',
-        phone: prev[i]?.phone ?? restoredHolders.current[i]?.phone ?? '',
-        ticketDataCapture:
-          prev[i]?.ticketDataCapture ??
-          restoredHolders.current[i]?.ticketDataCapture ??
-          {},
-        ticketTypeId: slot.ticketTypeId,
-        ticketName: slot.ticketName,
-      }))
-    )
+    setHolders((prev) => holderDraftsForSlots(prev, slots, restoredHolders.current))
   }, [slots])
 
   // Match the storefront: ticket 1 silently starts as the buyer. The legacy
   // checkout has no extra "use buyer details" control.
   useEffect(() => {
     if (!showHolders) return
+    // Ticket 1 stops copying the buyer once the buyer edits it.
     setHolders((prev) =>
-      prev.map((holder, index) =>
-        index === 0
-          ? {
-              ...holder,
-              firstName: billing.firstName,
-              lastName: billing.lastName,
-              email: billing.email,
-              phone: billing.phone ?? '',
-            }
-          : holder
-      )
+      holderDraftsMirroringBuyer(prev, {
+        firstName: billing.firstName,
+        lastName: billing.lastName,
+        email: billing.email,
+        phone: billing.phone,
+      })
     )
   }, [showHolders, billing.firstName, billing.lastName, billing.email, billing.phone])
 
@@ -357,10 +342,10 @@ export const BillingInfo: FC<BillingInfoProps> = ({
   }, [billing.stateId, billing.stateCode, states])
 
   const setB = (k: keyof BillingDraft) => (value: string) =>
-    setBilling((b) => ({ ...b, [k]: value }))
+    setBilling((b) => changeBillingField(b, k, value))
 
   const patchHolder = (i: number, patch: Partial<HolderDraft>) =>
-    setHolders((hs) => hs.map((h, j) => (j === i ? { ...h, ...patch } : h)))
+    setHolders((hs) => hs.map((h, j) => (j === i ? patchedHolderDraft(h, patch) : h)))
 
   const [dobYear, dobMonth, dobDay] = dob ? dob.split('-').map(Number) : []
   const committedBilling: CheckoutBilling = {
@@ -413,7 +398,11 @@ export const BillingInfo: FC<BillingInfoProps> = ({
 
   const commit = () => {
     commitBilling(committedBilling)
-    commitHolders(committedHolders)
+    // Holders that take the buyer's details are marked, so a guardian's
+    // signature for a child counts on them (billingFilledHolderIndexes).
+    commitHolders(committedHolders, {
+      backfilled: billingFilledHolderIndexes(holders, { holderNamesRequired }),
+    })
     if (ttfOptInLabel || brandOptInLabel) commitConsent(consent)
   }
 
@@ -478,7 +467,7 @@ export const BillingInfo: FC<BillingInfoProps> = ({
   const privacyInvalid = (showPrivacyError || showValidation) && !consent.ttfOptIn
 
   return (
-    <>
+    <FrozenFields frozen={checkout.orderFixed}>
       <Card>
         <SectionHeader title={heading} />
 
@@ -491,6 +480,14 @@ export const BillingInfo: FC<BillingInfoProps> = ({
           </View>
         ) : null}
 
+        {gates.phoneFirstCheckout && !checkout.isLoggedIn ? (
+          <BillingPhoneIdentity
+            billing={billing}
+            setBilling={setBilling}
+            eventId={eventId ?? checkout.eventId ?? undefined}
+            whatsappAvailable={Boolean(gates.phoneFirstWhatsapp)}
+          />
+        ) : null}
         <View style={s.row}>
           <View style={s.col}>
             <Field error={fieldError('First name', 'First name is required.')}>
@@ -598,7 +595,9 @@ export const BillingInfo: FC<BillingInfoProps> = ({
             <Input
               placeholder="Phone number"
               value={billing.phone ?? ''}
-              onChangeText={(v) => setBilling((current) => ({ ...current, phone: v }))}
+              onChangeText={(v) =>
+                setBilling((current) => changeBillingPhone(current, v))
+              }
               keyboardType="phone-pad"
               invalid={Boolean(fieldError('Valid phone number'))}
             />
@@ -730,7 +729,7 @@ export const BillingInfo: FC<BillingInfoProps> = ({
           }
         />
       ) : null}
-    </>
+    </FrozenFields>
   )
 }
 

package/src/sections/Bundles.tsx

@@ -0,0 +1,467 @@
+/**
+ * `<Bundles/>` — the RN analogue of the web section: the event's bundles,
+ * bought on their own order. Choose bundles, enter your details (and, when
+ * offered, a name on each ticket), pay by card, see the confirmation.
+ * Everything the flow decides is in the shared core (`hooks.useBundleFlow`);
+ * this file only renders it.
+ *
+ * At most one native card field exists at a time: the bundle card field is
+ * mounted only while this section is visible.
+ *
+ * Renders nothing when the event sells no bundles. Translated through the
+ * shared translator; `locale`, `messages` or `translate` override it.
+ */
+import React, { useMemo, type FC } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+import {
+  bundleAvailabilityCopy,
+  bundleContentsLine,
+  htmlToPlainText,
+  bundleQuantityRange,
+  createTranslator,
+  hooks,
+  type LocaleCode,
+  type Messages,
+  type PlaceOrderResult,
+  type Translate,
+} from 'tf-checkout-shared'
+
+import { CardInput, claimCardField } from '../CardInput'
+import { rnConfirmer } from '../instance'
+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 type { ResolvedTheme } from '../ui/theme'
+
+const money = (currency: string, amount: number) => `${currency} ${amount.toFixed(2)}`
+
+export interface BundlesProps {
+  eventId: string
+  /** Fired once when a bundle purchase is complete, with its order hash. */
+  onPurchased?: (orderHash: string) => void
+  /**
+   * Fired once when a bundle purchase is complete, in the same shape as a
+   * ticket order, so the host routes both the same way.
+   */
+  onComplete?: (order: PlaceOrderResult) => void
+  /** `redirect`: skip the inline receipt while the host navigates. */
+  confirmationMode?: 'inline' | 'redirect'
+  /** False while the section is hidden: no card field is mounted then. */
+  visible?: boolean
+  /** Section heading. Defaults to the translated "Bundles". */
+  heading?: string
+  locale?: LocaleCode
+  messages?: Partial<Messages>
+  translate?: Translate
+}
+
+export const Bundles: FC<BundlesProps> = ({
+  eventId,
+  onPurchased,
+  onComplete,
+  confirmationMode = 'inline',
+  visible = true,
+  heading,
+  locale,
+  messages,
+  translate,
+}) => {
+  const checkout = useCheckoutContext()
+  const theme = useTheme()
+  const s = useBundleStyles(theme)
+  const t = translate ?? createTranslator({ locale, messages })
+  const flow = hooks.useBundleFlow(rnConfirmer, eventId, {
+    claimCard: claimCardField,
+    defaults: {
+      firstName: checkout.billing?.firstName ?? '',
+      lastName: checkout.billing?.lastName ?? '',
+      email: checkout.billing?.email ?? '',
+    },
+    store: checkout.store,
+    visible,
+    confirmationMode,
+    onComplete,
+    onPurchased,
+  })
+
+  if (flow.view === 'loading') {
+    return (
+      <Card>
+        <View style={s.loader}>
+          <Loader />
+        </View>
+      </Card>
+    )
+  }
+  if (flow.view === 'catalogError') {
+    return (
+      <Card>
+        <ErrorText>{t('bundles.error.catalog')}</ErrorText>
+        <Button
+          variant="ghost"
+          loading={flow.catalogRetrying}
+          disabled={flow.catalogRetrying}
+          onPress={flow.retryCatalog}
+        >
+          {t('bundles.retryCard')}
+        </Button>
+      </Card>
+    )
+  }
+  // No bundles to sell and no purchase to show.
+  if (flow.view === 'hidden') return null
+
+  const title = <Text style={s.heading}>{heading ?? t('bundles.heading')}</Text>
+
+  if (flow.view === 'redirecting') {
+    return (
+      <Card>
+        {title}
+        <Text style={s.muted} accessibilityLiveRegion="polite">
+          {t('bundles.redirecting')}
+        </Text>
+        <Loader />
+      </Card>
+    )
+  }
+  if (flow.view === 'receipt' && flow.result) {
+    const { result } = flow
+    return (
+      <Card>
+        {title}
+        <Text style={s.strong}>{t('bundles.done.title')}</Text>
+        <Text style={s.muted}>
+          {result.pending
+            ? t('bundles.done.pending')
+            : result.email
+              ? t('bundles.done.email', { email: result.email })
+              : t('bundles.done.emailUnknown')}
+        </Text>
+        <Text style={s.muted}>
+          {t('bundles.done.order', { orderHash: result.orderHash })}
+        </Text>
+        {flow.gatewayWait ? (
+          <Text style={s.muted} accessibilityLiveRegion="polite">
+            {t(flow.gatewayWait)}
+          </Text>
+        ) : null}
+        <Button
+          variant="ghost"
+          disabled={flow.gatewayBlocked}
+          onPress={() => void flow.again()}
+        >
+          {t('bundles.done.again')}
+        </Button>
+      </Card>
+    )
+  }
+
+  const anySelected = Object.values(flow.qty).some((n) => n > 0)
+
+  if (flow.view === 'details') {
+    const amount = money(flow.payAmount.currency || flow.currency, flow.payAmount.amount)
+    return (
+      <Card>
+        {title}
+        {flow.notice ? (
+          <Text style={s.muted} accessibilityLiveRegion="polite">
+            {t(flow.notice.key, flow.notice.values)}
+          </Text>
+        ) : null}
+        <Text style={s.strong}>{t('bundles.buyerHeading')}</Text>
+        <Field label={t('bundles.firstName')}>
+          <Input
+            value={flow.buyer.firstName}
+            autoCapitalize="words"
+            editable={!flow.busy}
+            onChangeText={(firstName) => flow.patchBuyer({ firstName })}
+          />
+        </Field>
+        <Field label={t('bundles.lastName')}>
+          <Input
+            value={flow.buyer.lastName}
+            autoCapitalize="words"
+            editable={!flow.busy}
+            onChangeText={(lastName) => flow.patchBuyer({ lastName })}
+          />
+        </Field>
+        <Field label={t('bundles.email')}>
+          <Input
+            value={flow.buyer.email}
+            keyboardType="email-address"
+            autoCapitalize="none"
+            editable={!flow.busy}
+            onChangeText={(email) => flow.patchBuyer({ email })}
+          />
+        </Field>
+
+        {flow.slots.length > 0 ? (
+          <>
+            <Text style={s.strong}>{t('bundles.holdersHeading')}</Text>
+            {!flow.namesRequired ? (
+              <Text style={s.muted}>{t('bundles.holdersOptional')}</Text>
+            ) : null}
+            {flow.slots.map((slot) => {
+              const value = flow.holderValue(slot)
+              const label = t('bundles.holderLabel', {
+                ticket: slot.ticketName,
+                number: String(slot.ticketIndex + 1),
+              })
+              return (
+                <View key={`${slot.bundleId}-${slot.ticketIndex}`}>
+                  <Field label={`${label} · ${t('bundles.holderFirstName')}`}>
+                    <Input
+                      value={value?.firstName ?? ''}
+                      autoCapitalize="words"
+                      editable={!flow.busy}
+                      onChangeText={(firstName) => flow.setHolder(slot, { firstName })}
+                    />
+                  </Field>
+                  <Field label={`${label} · ${t('bundles.holderLastName')}`}>
+                    <Input
+                      value={value?.lastName ?? ''}
+                      autoCapitalize="words"
+                      editable={!flow.busy}
+                      onChangeText={(lastName) => flow.setHolder(slot, { lastName })}
+                    />
+                  </Field>
+                </View>
+              )
+            })}
+          </>
+        ) : null}
+        {flow.problems.map((key) => (
+          <ErrorText key={key}>{t(key)}</ErrorText>
+        ))}
+
+        {flow.awaitingCard ? (
+          <View style={s.card}>
+            <Text style={s.strong}>{t('bundles.cardHeading')}</Text>
+            {flow.cardElsewhere ? (
+              <>
+                <Text style={s.muted}>{t('bundles.payingElsewhere')}</Text>
+                <Button variant="ghost" onPress={flow.payHere}>
+                  {t('bundles.payHere')}
+                </Button>
+              </>
+            ) : flow.cardFailed ? (
+              <Button variant="ghost" onPress={flow.retryCard}>
+                {t('bundles.retryCard')}
+              </Button>
+            ) : flow.cardReady && visible ? (
+              <CardInput owner={flow.cardOwner} visible={visible} />
+            ) : (
+              <Loader />
+            )}
+          </View>
+        ) : null}
+
+        {flow.stillSaving ? (
+          <Text style={s.muted} accessibilityLiveRegion="polite">
+            {t('common.stillSaving')}
+          </Text>
+        ) : null}
+        {flow.checkingAttempt ? (
+          <Text style={s.muted} accessibilityLiveRegion="polite">
+            {t('bundles.checkingAttempt')}
+          </Text>
+        ) : null}
+        {flow.waitingForTickets ? (
+          <Text style={s.muted} accessibilityLiveRegion="polite">
+            {t('bundles.waitTickets')}
+          </Text>
+        ) : null}
+        {flow.waitingForBundle ? (
+          <Text style={s.muted} accessibilityLiveRegion="polite">
+            {t(flow.gatewayWait ?? 'bundles.waitOtherBundle')}
+          </Text>
+        ) : null}
+        <Button
+          onPress={() => void flow.submit()}
+          loading={flow.busy}
+          disabled={flow.submitDisabled}
+        >
+          {flow.paying
+            ? t('bundles.paying')
+            : flow.awaitingCard
+              ? t('bundles.pay', { amount })
+              : t('bundles.continue')}
+        </Button>
+        <Button
+          variant="ghost"
+          disabled={flow.busy || flow.gatewayBlocked}
+          onPress={() => void flow.back()}
+        >
+          {t('bundles.back')}
+        </Button>
+        {flow.error ? <ErrorText>{t(flow.error)}</ErrorText> : null}
+        {flow.orderInProgress ? (
+          <Button variant="ghost" onPress={flow.continueOrder}>
+            {t('bundles.continueOrder')}
+          </Button>
+        ) : null}
+        {flow.canStartOver ? (
+          <Button
+            variant="ghost"
+            disabled={flow.gatewayBlocked}
+            onPress={() => void flow.startOver()}
+          >
+            {t('bundles.startOver')}
+          </Button>
+        ) : null}
+      </Card>
+    )
+  }
+
+  const ticketsInCart = checkout.selections.length > 0
+  return (
+    <Card>
+      {title}
+      <Text style={s.muted}>{t('bundles.subtitle')}</Text>
+      {flow.notice ? (
+        <Text style={s.muted} accessibilityLiveRegion="polite">
+          {t(flow.notice.key, flow.notice.values)}
+        </Text>
+      ) : null}
+      {flow.view === 'heldOrder' ? (
+        <>
+          <Text style={s.muted} accessibilityLiveRegion="polite">
+            {t('bundles.heldOrder')}
+          </Text>
+          {flow.error ? <ErrorText>{t(flow.error)}</ErrorText> : null}
+          {flow.checkingAttempt ? (
+            <Text style={s.muted} accessibilityLiveRegion="polite">
+              {t('bundles.checkingAttempt')}
+            </Text>
+          ) : null}
+          {flow.gatewayWait ? (
+            <Text style={s.muted} accessibilityLiveRegion="polite">
+              {t(flow.gatewayWait)}
+            </Text>
+          ) : null}
+          <Button
+            disabled={flow.busy || flow.checkingAttempt}
+            onPress={flow.continueOrder}
+          >
+            {t('bundles.continueOrder')}
+          </Button>
+          <Button
+            variant="ghost"
+            disabled={flow.busy || flow.checkingAttempt || flow.gatewayBlocked}
+            onPress={() => void flow.startOver()}
+          >
+            {t('bundles.startOver')}
+          </Button>
+        </>
+      ) : null}
+
+      {flow.bundles.map((bundle) => {
+        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}>
+              <Text style={s.name}>{bundle.name}</Text>
+              <Text style={s.price}>{money(bundle.currency, bundle.price)}</Text>
+              {contents ? (
+                <Text style={s.muted}>{t('bundles.includes', { contents })}</Text>
+              ) : null}
+              {bundle.bookingFee > 0 && (
+                <Text style={s.muted}>
+                  {t('bundles.bookingFee', {
+                    amount: money(bundle.currency, bundle.bookingFee),
+                  })}
+                </Text>
+              )}
+              {desc ? <Text style={s.muted}>{desc}</Text> : null}
+              {stock && stock.key !== 'bundles.soldOut' ? (
+                <Text style={[s.muted, s.stock]}>{t(stock.key, stock.values)}</Text>
+              ) : null}
+            </View>
+            {range.max === 0 ? (
+              <Text style={s.soldOut}>{t('bundles.soldOut')}</Text>
+            ) : (
+              <QuantitySelect
+                label={t('bundles.quantity', { name: bundle.name })}
+                value={flow.qty[bundle.id] ?? 0}
+                min={range.min}
+                max={range.max}
+                onChange={(v) => flow.setQuantity(bundle.id, v)}
+              />
+            )}
+          </View>
+        )
+      })}
+
+      {anySelected ? (
+        <Text style={s.strong}>
+          {t('bundles.total', { amount: money(flow.currency, flow.total) })}
+        </Text>
+      ) : null}
+      {anySelected && ticketsInCart ? (
+        <Text style={s.muted}>{t('bundles.boughtSeparately')}</Text>
+      ) : null}
+      <Button onPress={flow.continueToDetails} disabled={!anySelected}>
+        {t('bundles.continue')}
+      </Button>
+    </Card>
+  )
+}
+
+const useBundleStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        loader: { paddingVertical: 20, alignItems: 'center' },
+        heading: {
+          color: theme.text,
+          fontSize: theme.fontSize + 2,
+          fontWeight: '700',
+          fontFamily: theme.fontFamily,
+        },
+        strong: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '700',
+          fontFamily: theme.fontFamily,
+        },
+        muted: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+        stock: { fontWeight: '600' },
+        card: { gap: 8 },
+        item: {
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          gap: 12,
+          paddingTop: 12,
+          borderTopWidth: StyleSheet.hairlineWidth,
+        },
+        info: { flex: 1, gap: 2 },
+        name: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        price: {
+          color: theme.text,
+          fontSize: theme.fontSize - 1,
+          fontVariant: ['tabular-nums'],
+          fontFamily: theme.fontFamily,
+        },
+        soldOut: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+      }),
+    [theme]
+  )