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

package/src/sections/AccountPaymentPlan.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import { View } from 'react-native'
+import { accountPlanDate, hooks, type AccountPaymentPlan } from 'tf-checkout-shared'
+import {
+  BodyText,
+  Button,
+  Card,
+  ErrorText,
+  MutedText,
+  SectionHeader,
+} from '../ui/primitives'
+import { useAccountT } from '../ui/useAccountT'
+export interface AccountPaymentPlanSectionProps {
+  plan: AccountPaymentPlan
+  orderHash: string
+  locale?: string
+  onOpen: (url: string) => void | Promise<unknown>
+  onReturn?: () => void | Promise<unknown>
+}
+export const AccountPaymentPlanSection = ({
+  plan,
+  orderHash,
+  locale,
+  onOpen,
+  onReturn,
+}: AccountPaymentPlanSectionProps) => {
+  const t = useAccountT(locale)
+  const flow = hooks.useAccountPlanManagement(plan, orderHash, onOpen, onReturn)
+  return (
+    <Card>
+      <SectionHeader title={plan.terminology || t('Payment plan')} />
+      <BodyText>
+        {t(
+          plan.requiresCompletion
+            ? 'Payment plan needs attention'
+            : plan.status === 'pending'
+              ? 'Payments in progress'
+              : plan.status === 'finished'
+                ? 'All payments complete'
+                : plan.status === 'cancelled'
+                  ? 'Payment plan cancelled'
+                  : 'Payment plan setup incomplete'
+        )}
+      </BodyText>
+      <BodyText>
+        {t('Plan total')}: {plan.currency} {plan.totalAmount}
+      </BodyText>
+      {plan.remainingAmount !== null ? (
+        <BodyText>
+          {t('Remaining balance')}: {plan.currency} {plan.remainingAmount}
+        </BodyText>
+      ) : null}
+      {plan.installments.map((row, index) => (
+        <View key={index} style={{ gap: 4, marginVertical: 8 }}>
+          <BodyText>
+            {row.currency} {row.amount} ·{' '}
+            {t(
+              row.status === 'paid'
+                ? 'Paid'
+                : row.status === 'unpaid'
+                  ? 'Scheduled'
+                  : row.status === 'void' || row.status === 'uncollectible'
+                    ? 'Payment unsuccessful'
+                    : row.status
+            )}
+          </BodyText>
+          <MutedText>
+            {accountPlanDate(
+              row.status === 'paid'
+                ? (row.chargeDate ?? row.updatedAt)
+                : row.scheduledDate,
+              locale,
+              row.status === 'paid'
+            ) || t('Date not scheduled')}
+          </MutedText>
+        </View>
+      ))}
+      {plan.status === 'pending' ? (
+        <MutedText>
+          {t('Your QR code becomes available when your payment plan is complete.')}
+        </MutedText>
+      ) : null}
+      <MutedText>
+        {t('Manage this plan on the Ticket Fairy website. Sign in there if asked.')}
+      </MutedText>
+      {flow.error ? <ErrorText>{t(flow.error)}</ErrorText> : null}
+      <Button
+        disabled={flow.busy}
+        onPress={() => {
+          void flow.open(
+            plan.completeUrl ? 'complete' : plan.updateCardUrl ? 'update' : 'manage'
+          )
+        }}
+      >
+        {t(
+          plan.completeUrl
+            ? 'Complete payment plan'
+            : plan.updateCardUrl
+              ? 'Update card details'
+              : 'View payment plan on website'
+        )}
+      </Button>
+    </Card>
+  )
+}

package/src/sections/AccountRewards.tsx

@@ -0,0 +1,108 @@
+import React, { type FC } from 'react'
+import { Alert, Image, Share, View } from 'react-native'
+import {
+  createTranslator,
+  hooks,
+  resolveLocale,
+  type AccountRewardsSectionProps,
+} from 'tf-checkout-shared'
+import {
+  BodyText,
+  Button,
+  Card,
+  ErrorText,
+  Loader,
+  SectionHeader,
+} from '../ui/primitives'
+
+/** The account aggregate has no order identity and offers no reward mutations. */
+export const AccountRewardsSection: FC<AccountRewardsSectionProps> = ({
+  locale,
+  onBrowseEvents,
+  onViewTickets,
+}) => {
+  const t = createTranslator({ locale: resolveLocale(locale) })
+  const { session, query, view } = hooks.useAccountRewardsSummary(t)
+  const assertOwner = hooks.useSessionAction()
+  const share = async (imageUrl: string) => {
+    try {
+      assertOwner()
+      await Share.share({ url: imageUrl, message: imageUrl })
+    } catch {
+      try {
+        assertOwner()
+        Alert.alert(t('rewards.account.shareError'))
+      } catch {
+        // A retired buyer must not display an alert in the next buyer's account.
+      }
+    }
+  }
+  return (
+    <View style={{ gap: 16 }}>
+      <SectionHeader
+        title={t('rewards.account.title')}
+        subtitle={t('rewards.account.intro')}
+      />
+      {!session.isAuthenticated ? (
+        <BodyText>{t('rewards.account.signIn')}</BodyText>
+      ) : (
+        <>
+          {query.isLoading && <Loader />}
+          {query.error && <ErrorText>{t('rewards.account.error')}</ErrorText>}
+          <Button
+            variant="ghost"
+            loading={query.isFetching}
+            onPress={() => void query.refetch()}
+          >
+            {t('rewards.account.refresh')}
+          </Button>
+          {view?.empty && <BodyText>{t('rewards.account.empty')}</BodyText>}
+          {view &&
+            (['ambassador', 'packs', 'prizes'] as const).map((kind) =>
+              view[kind].length ? (
+                <View key={kind} style={{ gap: 12 }}>
+                  <SectionHeader title={t(`rewards.account.${kind}`)} />
+                  {view[kind].map((row) => (
+                    <Card key={row.key}>
+                      <SectionHeader title={row.title} />
+                      {row.lines.map((line, index) => (
+                        <BodyText key={index}>{line}</BodyText>
+                      ))}
+                    </Card>
+                  ))}
+                </View>
+              ) : null
+            )}
+          {!!view?.shareCards.length && (
+            <View style={{ gap: 12 }}>
+              <SectionHeader title={t('rewards.account.shareCards')} />
+              {view.shareCards.map((card) => (
+                <Card key={card.key}>
+                  <Image
+                    source={{ uri: card.imageUrl }}
+                    accessibilityLabel={t('rewards.account.shareCard')}
+                    resizeMode="contain"
+                    style={{ width: '100%', aspectRatio: 1.91 }}
+                  />
+                  <Button variant="ghost" onPress={() => void share(card.imageUrl)}>
+                    {t('rewards.account.share')}
+                  </Button>
+                </Card>
+              ))}
+            </View>
+          )}
+          {onViewTickets && (
+            <Button variant="ghost" onPress={onViewTickets}>
+              {t('rewards.account.viewTickets')}
+            </Button>
+          )}
+          {onBrowseEvents && (
+            <Button variant="ghost" onPress={onBrowseEvents}>
+              {t('rewards.account.browse')}
+            </Button>
+          )}
+        </>
+      )}
+    </View>
+  )
+}

package/src/sections/AddOns.tsx

@@ -8,18 +8,18 @@
  * Renders nothing when the event has no applicable add-ons (or they're all sold
  * out), so it's safe to always place between `<Tickets/>` and `<BillingInfo/>`.
  */
-import React, { Fragment, useEffect, useMemo, useState, type FC } from 'react'
+import React, { Fragment, useMemo, type FC } from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 
 import {
   addOnMaxQuantity,
   errorMessage,
   hooks,
-  ttf,
-  type CustomFieldValues,
+  htmlToPlainText,
   type EventAddon,
 } from 'tf-checkout-shared'
 
+import { FrozenFields } from '../ui/Frozen'
 import { Button, Card, ErrorText, Loader, MutedText } from '../ui/primitives'
 import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
 // Created by a sibling agent; imported here per the port plan. Mirrors the web
@@ -28,24 +28,6 @@ import { CustomFieldGroupFields } from '../ui/CustomFields'
 import { QuantitySelect } from '../ui/QuantitySelect'
 import type { ResolvedTheme } from '../ui/theme'
 
-// Web renders the add-on 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 = (currency: string, n: number): string =>
   `${currency} ${Number(n).toFixed(2)}`
 
@@ -74,57 +56,27 @@ export const AddOns: FC<AddOnsProps> = ({
   const checkout = useCheckoutContext()
   const theme = useTheme()
   const s = useAddonStyles(theme)
-  // No onContinue ⇒ combined form (inside <EmbeddedCheckout/>): apply the
-  // selection live (no "confirm" click) — the old checkout applied add-ons at
-  // checkout too.
-  const combined = !onContinue
-  const addonsQuery = hooks.useEventAddons(eventId)
-  const all = addonsQuery.data ?? []
-  const addons = ttf.events.filterAddonsForTickets(all, checkout.ticketTypeIds)
-  // Tickets reserved in the cart — the bound for ticket-scoped add-on caps
-  // (the hosted partial's `selectedTotalQty()`).
-  const ticketQuantity = (checkout.breakdown?.tickets ?? []).reduce(
-    (total, line) => total + (line.quantity || 0),
-    0
-  )
-
-  const [qty, setQty] = useState<Record<string, number>>(checkout.addOns ?? {})
-  const [capture, setCapture] = useState<Record<string, CustomFieldValues>>(
-    checkout.addOnDataCapture ?? {}
-  )
-  const [error, setError] = useState('')
-
-  // Custom-field groups keyed by add-on id (scope 'add-on', group id = add-on id).
-  const fieldGroups = useMemo(() => {
-    const map: Record<string, (typeof checkout.customFields)[number]> = {}
-    for (const g of checkout.customFields) if (g.scope === 'add-on') map[g.id] = g
-    return map
-  }, [checkout.customFields])
-
-  // Combined mode: debounce-apply the selection to the cart (which reprices) as
-  // it changes, instead of gating behind a "confirm" button.
-  useEffect(() => {
-    if (!combined) return
-    const selection = Object.fromEntries(Object.entries(qty).filter(([, n]) => n > 0))
-    if (JSON.stringify(selection) === JSON.stringify(checkout.addOns ?? {})) return
-    const captureForSelected = Object.fromEntries(
-      Object.entries(capture).filter(([id]) => (selection[id] ?? 0) > 0)
-    )
-    const t = setTimeout(() => {
-      checkout.setAddonDataCapture(captureForSelected)
-      checkout.setAddons(selection).catch((e) => setError(errorMessage(e)))
-    }, 500)
-    return () => clearTimeout(t)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [combined, qty, capture])
-
-  const hasRequired = (checkout.requiredAddOns ?? []).some((a) => a.required)
+  const {
+    query: addonsQuery,
+    addons,
+    qty,
+    setQty,
+    capture,
+    setCapture,
+    error,
+    fieldGroups,
+    combined,
+    ticketQuantity,
+    hasRequired,
+    save,
+    skip,
+  } = hooks.useAddOnSelection(eventId, checkout, { onContinue, onSkip })
   const head = (
     <View style={s.head}>
       {eyebrow ? <Text style={s.eyebrow}>{eyebrow}</Text> : null}
       <Text style={s.heading}>{heading}</Text>
       {onSkip && !hasRequired ? (
-        <Pressable accessibilityRole="button" onPress={onSkip} style={s.skipBtn}>
+        <Pressable accessibilityRole="button" onPress={skip} style={s.skipBtn}>
           <Text style={s.skip}>Skip</Text>
         </Pressable>
       ) : null}
@@ -141,6 +93,14 @@ export const AddOns: FC<AddOnsProps> = ({
       </Card>
     )
   }
+  if (addonsQuery.isError)
+    return (
+      <Card>
+        {head}
+        <ErrorText>{errorMessage(addonsQuery.error)}</ErrorText>
+        <Button onPress={() => void addonsQuery.refetch()}>Try again</Button>
+      </Card>
+    )
   if (addons.length === 0) return null
   // A catalog containing only unavailable rows is not a useful checkout step.
   // Required sold-out add-ons are already exempted by the engine preflight.
@@ -160,95 +120,86 @@ export const AddOns: FC<AddOnsProps> = ({
   }
 
   const missing = checkout.missingRequiredAddonNames
-  const save = () => {
-    setError('')
-    const selection = Object.fromEntries(Object.entries(qty).filter(([, n]) => n > 0))
-    // Only keep captured fields for add-ons that are actually selected.
-    const captureForSelected = Object.fromEntries(
-      Object.entries(capture).filter(([id]) => (selection[id] ?? 0) > 0)
-    )
-    checkout.setAddonDataCapture(captureForSelected)
-    checkout
-      .setAddons(selection)
-      .then(() => onContinue?.())
-      .catch((e) => setError(errorMessage(e)))
-  }
 
   const selectedCount = Object.values(qty).filter((n) => n > 0).length
 
   return (
-    <Card>
-      {head}
-      <Text style={s.subtitle}>PLEASE SELECT FROM THE OPTIONAL ADD-ONS BELOW</Text>
+    <FrozenFields frozen={checkout.orderFixed}>
+      <Card>
+        {head}
+        <Text style={s.subtitle}>PLEASE SELECT FROM THE OPTIONAL ADD-ONS BELOW</Text>
 
-      {groups.map((g, gi) => (
-        <Fragment key={g.heading ?? `g${gi}`}>
-          {g.heading ? <Text style={s.group}>{g.heading}</Text> : null}
-          {g.items.map((a) => {
-            const n = qty[a.id] ?? 0
-            const group = fieldGroups[a.id]
-            const desc = a.description ? stripHtml(a.description) : ''
-            return (
-              <View key={a.id} style={s.item}>
-                <View style={s.row}>
-                  <View style={s.info}>
-                    <Text style={s.name}>
-                      {a.name}
-                      {a.required ? <Text style={s.req}> · required</Text> : null}
-                    </Text>
-                    <Text style={s.price}>
-                      {money(a.currency, a.price)}
-                      {a.feeIncluded ? (
-                        <Text style={s.priceNote}> incl. fees</Text>
-                      ) : null}
-                    </Text>
-                    {desc ? <Text style={s.desc}>{desc}</Text> : null}
+        {groups.map((g, gi) => (
+          <Fragment key={g.heading ?? `g${gi}`}>
+            {g.heading ? <Text style={s.group}>{g.heading}</Text> : null}
+            {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}>
+                    <View style={s.info}>
+                      <Text style={s.name}>
+                        {a.name}
+                        {a.required ? <Text style={s.req}> · required</Text> : null}
+                      </Text>
+                      <Text style={s.price}>
+                        {money(a.currency, a.price)}
+                        {a.feeIncluded ? (
+                          <Text style={s.priceNote}> incl. fees</Text>
+                        ) : null}
+                      </Text>
+                      {desc ? <Text style={s.desc}>{desc}</Text> : null}
+                    </View>
+                    {soldOut(a) ? (
+                      <Text style={s.soldOut}>Sold out</Text>
+                    ) : (
+                      <QuantitySelect
+                        value={n}
+                        min={0}
+                        max={max(a)}
+                        onChange={(v) => setQty((q) => ({ ...q, [a.id]: v }))}
+                      />
+                    )}
                   </View>
-                  {soldOut(a) ? (
-                    <Text style={s.soldOut}>Sold out</Text>
-                  ) : (
-                    <QuantitySelect
-                      value={n}
-                      min={0}
-                      max={max(a)}
-                      onChange={(v) => setQty((q) => ({ ...q, [a.id]: v }))}
-                    />
-                  )}
+                  {n > 0 && group ? (
+                    <View style={s.fields}>
+                      <CustomFieldGroupFields
+                        group={group}
+                        values={capture[a.id] ?? {}}
+                        onChange={(name: string, val: string | string[]) =>
+                          setCapture((c) => ({
+                            ...c,
+                            [a.id]: { ...(c[a.id] ?? {}), [name]: val },
+                          }))
+                        }
+                      />
+                    </View>
+                  ) : null}
                 </View>
-                {n > 0 && group ? (
-                  <View style={s.fields}>
-                    <CustomFieldGroupFields
-                      group={group}
-                      values={capture[a.id] ?? {}}
-                      onChange={(name: string, val: string | string[]) =>
-                        setCapture((c) => ({
-                          ...c,
-                          [a.id]: { ...(c[a.id] ?? {}), [name]: val },
-                        }))
-                      }
-                    />
-                  </View>
-                ) : null}
-              </View>
-            )
-          })}
-        </Fragment>
-      ))}
+              )
+            })}
+          </Fragment>
+        ))}
 
-      {!combined ? (
-        <Button
-          onPress={save}
-          loading={checkout.isBusy}
-          disabled={checkout.isBusy || selectedCount === 0}
-        >
-          {checkout.isBusy ? 'Updating…' : buttonLabel}
-        </Button>
-      ) : null}
-      {missing.length > 0 ? (
-        <MutedText>Required add-on: {missing.join(', ')}.</MutedText>
-      ) : null}
-      {error || checkout.error ? <ErrorText>{error || checkout.error}</ErrorText> : null}
-    </Card>
+        {!combined ? (
+          <Button
+            onPress={save}
+            loading={checkout.isBusy}
+            disabled={checkout.isBusy || selectedCount === 0}
+          >
+            {checkout.isBusy ? 'Updating…' : buttonLabel}
+          </Button>
+        ) : null}
+        {missing.length > 0 ? (
+          <MutedText>Required add-on: {missing.join(', ')}.</MutedText>
+        ) : null}
+        {error || checkout.error ? (
+          <ErrorText>{error || checkout.error}</ErrorText>
+        ) : null}
+      </Card>
+    </FrozenFields>
   )
 }