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

package/src/sections/Trips.tsx

@@ -0,0 +1,87 @@
+import React, { type FC } from 'react'
+import { View } from 'react-native'
+import {
+  createTranslator,
+  resolveLocale,
+  tripCopy,
+  tripsView,
+  type TripsProps,
+} from 'tf-checkout-shared'
+import { BodyText, Button, Card, ErrorText, SectionHeader } from '../ui/primitives'
+
+/** onOpen delegates authenticated first-party browser/navigation handoff to the host app. */
+export const Trips: FC<TripsProps> = ({
+  data,
+  locale,
+  loading,
+  errorMessage,
+  onRetry,
+  onOpen,
+  onPage,
+}) => {
+  const copy = tripCopy(locale)
+  const t = createTranslator({ locale: resolveLocale(locale) })
+  const view = data ? tripsView(data, locale) : null
+  return (
+    <View accessibilityLabel={copy.title} accessibilityState={{ busy: Boolean(loading) }}>
+      {loading ? <BodyText>{t('common.loading')}</BodyText> : null}
+      {errorMessage ? (
+        <View accessibilityRole="alert">
+          <ErrorText>{errorMessage}</ErrorText>
+          {onRetry ? <Button onPress={onRetry}>{t('rewards.retry')}</Button> : null}
+        </View>
+      ) : null}
+      {view ? (
+        <>
+          <SectionHeader title={view.title} subtitle={view.subtitle} />
+          {view.sections.map((section) => (
+            <View key={section.key}>
+              {section.title ? <SectionHeader title={section.title} /> : null}
+              {section.cards.length === 0 ? <BodyText>{section.empty}</BodyText> : null}
+              {section.cards.map((card) => (
+                <Card key={card.key}>
+                  <SectionHeader title={card.title} />
+                  {card.lines.map((line, index) => (
+                    <BodyText key={index}>{line}</BodyText>
+                  ))}
+                  {card.actions.map((action) => (
+                    <Button
+                      key={action.url}
+                      variant="ghost"
+                      onPress={() => onOpen(action.url)}
+                    >
+                      {action.label}
+                    </Button>
+                  ))}
+                </Card>
+              ))}
+              {section.page > 1 ? (
+                <Button
+                  disabled={loading}
+                  variant="ghost"
+                  onPress={() =>
+                    onPage({ page: section.page - 1, section: section.section })
+                  }
+                >
+                  {copy.previous}
+                </Button>
+              ) : null}
+              {section.hasMore ? (
+                <Button
+                  disabled={loading}
+                  variant="ghost"
+                  onPress={() =>
+                    onPage({ page: section.page + 1, section: section.section })
+                  }
+                >
+                  {copy.next}
+                </Button>
+              ) : null}
+            </View>
+          ))}
+        </>
+      ) : null}
+    </View>
+  )
+}
+export type { TripsProps } from 'tf-checkout-shared'

package/src/sections/WaiverSigning.tsx

@@ -0,0 +1,429 @@
+/**
+ * `<WaiverSigning/>` — the RN analogue of the web section: sign the event's
+ * waiver at checkout, one signature per ticket it covers. Each signature is
+ * uploaded on its own and the order carries only its reference. When the
+ * organiser made signing optional, a buyer can skip it: each guest gets a
+ * link to sign later.
+ *
+ * The signer draws a signature (`SignaturePad`, React Native core only, no
+ * native module) or types their name, from the methods the backend accepts
+ * for the event (`waiverSignatureMethods`).
+ *
+ * Renders nothing when the event has no waiver.
+ */
+import React, { useMemo, useRef, useState, type FC } from 'react'
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
+
+import {
+  createTranslator,
+  draftWithAllowedMethod,
+  emptyWaiverDraft,
+  formatDateDigits,
+  hooks,
+  htmlToPlainText,
+  holderBackfilledFrom,
+  signatureMatchesHolder,
+  waiverTicketFormKey,
+  waiverTickets,
+  withSignatureMethod,
+  type LocaleCode,
+  type Messages,
+  type Translate,
+  type WaiverSignatureDraft,
+  type WaiverSignatureMethod,
+  type WaiverTicket,
+  waiverSignableAtCheckout,
+  waiverSignatureMethods,
+} from 'tf-checkout-shared'
+
+import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
+import { SignaturePad } from '../ui/SignaturePad'
+import { Checkbox, Field, Input } from '../ui/Field'
+import { Button, Card, ErrorText, SectionHeader } from '../ui/primitives'
+import type { ResolvedTheme } from '../ui/theme'
+
+export interface WaiverSigningProps {
+  eventId: string
+  locale?: LocaleCode
+  messages?: Partial<Messages>
+  translate?: Translate
+}
+
+export const WaiverSigning: FC<WaiverSigningProps> = ({
+  eventId,
+  locale,
+  messages,
+  translate,
+}) => {
+  const checkout = useCheckoutContext()
+  // While the order is placed or charged its signatures are fixed (`orderFixed`).
+  const locked = Boolean(checkout.orderFixed)
+  const theme = useTheme()
+  const s = useWaiverStyles(theme)
+  const t = translate ?? createTranslator({ locale, messages })
+  const waiver = checkout.waiver
+  const signing = hooks.useWaiverSigning(
+    eventId,
+    waiver,
+    checkout.setWaiverSignature,
+    checkout.holdWaiverSigning
+  )
+  const [open, setOpen] = useState<Record<string, boolean>>({})
+  const [reloading, setReloading] = useState(false)
+
+  // The waiver could not be read: the order waits until it is.
+  if (checkout.unavailableDetails?.includes('waiver')) {
+    return (
+      <Card>
+        <SectionHeader title={t('waivers.heading')} />
+        <ErrorText>{t('waivers.error.load')}</ErrorText>
+        <Button
+          variant="ghost"
+          loading={reloading}
+          onPress={() => {
+            setReloading(true)
+            checkout.reloadCheckoutDetails().finally(() => setReloading(false))
+          }}
+        >
+          {t('waivers.retry')}
+        </Button>
+      </Card>
+    )
+  }
+
+  const tickets = waiverTickets(waiver, checkout)
+  if (!waiver || tickets.length === 0) return null
+  // The backend accepts no method this checkout offers: the guests sign
+  // through the emailed link, and payment does not wait.
+  if (!waiverSignableAtCheckout(waiver)) {
+    return (
+      <Card>
+        <SectionHeader title={waiver.title || t('waivers.heading')} />
+        <Text style={s.muted}>{t('waivers.signLater')}</Text>
+      </Card>
+    )
+  }
+  const signatures = checkout.waiverSignatures ?? {}
+
+  return (
+    <Card>
+      <SectionHeader title={waiver.title || t('waivers.heading')} />
+      <Text style={s.muted}>
+        {t(
+          waiver.checkoutMode === 'required'
+            ? 'waivers.intro.required'
+            : 'waivers.intro.optional'
+        )}
+      </Text>
+      <ScrollView style={[s.textBox, { borderColor: theme.border }]} nestedScrollEnabled>
+        <Text style={s.body}>{htmlToPlainText(waiver.bodyHtml)}</Text>
+      </ScrollView>
+
+      {tickets.map((ticket) => {
+        const signed = signatures[ticket.index]
+        // Another event, waiver text or ticket is another form, with its own draft.
+        const formKey = waiverTicketFormKey(checkout.eventId, waiver, ticket)
+        // A signature counts only for the ticket's holder now.
+        const forHolder =
+          !signed ||
+          signatureMatchesHolder(
+            signed,
+            checkout.holders[ticket.index],
+            holderBackfilledFrom(checkout, ticket.index)
+          )
+        const label = ticket.holderName
+          ? t('waivers.ticketFor', {
+              number: ticket.ticketNumber,
+              name: ticket.holderName,
+            })
+          : t('waivers.ticket', { number: ticket.ticketNumber })
+        return (
+          <View key={formKey} style={[s.ticket, { borderTopColor: theme.border }]}>
+            <Text style={s.strong}>{label}</Text>
+            {signed ? (
+              <View style={s.row}>
+                <Text style={s.body}>
+                  {t(
+                    !forHolder
+                      ? 'waivers.signedForSomeoneElse'
+                      : signed.signerRole === 'guardian'
+                        ? 'waivers.signedByGuardian'
+                        : 'waivers.signedBy',
+                    { name: signed.signerName }
+                  )}
+                </Text>
+                <Button
+                  variant="ghost"
+                  disabled={locked}
+                  onPress={() => {
+                    checkout.setWaiverSignature(ticket.index, null)
+                    setOpen((o) => ({ ...o, [formKey]: true }))
+                  }}
+                >
+                  {t('waivers.signAgain')}
+                </Button>
+              </View>
+            ) : open[formKey] ? (
+              <TicketForm
+                ticket={ticket}
+                consentText={waiver.consentText}
+                t={t}
+                methods={waiverSignatureMethods(waiver)}
+                busy={signing.isBusy(ticket.index)}
+                locked={locked}
+                error={signing.errors[ticket.index]}
+                onSign={(draft, currentDraft) =>
+                  signing.sign(ticket.index, draft, currentDraft)
+                }
+              />
+            ) : (
+              <Button
+                variant="ghost"
+                disabled={locked}
+                onPress={() => setOpen((o) => ({ ...o, [formKey]: true }))}
+              >
+                {t('waivers.signThis')}
+              </Button>
+            )}
+          </View>
+        )
+      })}
+    </Card>
+  )
+}
+
+const TicketForm: FC<{
+  ticket: WaiverTicket
+  consentText: string | null
+  t: Translate
+  /** The methods the backend accepts, its default first. */
+  methods: WaiverSignatureMethod[]
+  /** A signing for this ticket runs (perhaps started before the buyer came back). */
+  busy: boolean
+  /** The order is being placed: signing waits until it ends. */
+  locked?: boolean
+  error?: string
+  /** `currentDraft` reads the form's draft when the upload ends. */
+  onSign: (
+    draft: WaiverSignatureDraft,
+    currentDraft: () => WaiverSignatureDraft
+  ) => Promise<string[]>
+}> = ({ ticket, consentText, t, methods, busy, locked = false, error, onSign }) => {
+  const theme = useTheme()
+  const s = useWaiverStyles(theme)
+  const [heldDraft, setDraft] = useState<WaiverSignatureDraft>(() =>
+    emptyWaiverDraft(
+      { firstName: ticket.holderFirstName, lastName: ticket.holderLastName },
+      { signatureMethods: methods }
+    )
+  )
+  // Always a method this waiver accepts, so the form can always be signed.
+  const draft = draftWithAllowedMethod(heldDraft, methods)
+  const [problems, setProblems] = useState<string[]>([])
+  // True while this form's own press is being saved; otherwise a busy ticket
+  // is still saving a change from before.
+  const [pressed, setPressed] = useState(false)
+  // While a signature is saved or the order is placed, the draft cannot change.
+  const frozen = busy || locked
+  const draftRef = useRef(draft)
+  draftRef.current = draft
+  const patch = (next: Partial<WaiverSignatureDraft>) => {
+    if (!frozen) setDraft((d) => ({ ...d, ...next }))
+  }
+  const guardian = draft.signerRole === 'guardian'
+
+  return (
+    <View style={s.form}>
+      <Text style={s.strong}>{t('waivers.role.label')}</Text>
+      {(['holder', 'guardian'] as const).map((role) => (
+        <Pressable
+          key={role}
+          accessibilityRole="radio"
+          accessibilityState={{ selected: draft.signerRole === role, disabled: frozen }}
+          disabled={frozen}
+          onPress={() =>
+            patch(
+              role === 'guardian'
+                ? {
+                    signerRole: role,
+                    minorName: draft.minorName ?? ticket.holderName ?? '',
+                  }
+                : { signerRole: role }
+            )
+          }
+          style={s.choice}
+        >
+          <View
+            style={[
+              s.radio,
+              { borderColor: theme.accent },
+              draft.signerRole === role && { backgroundColor: theme.accent },
+            ]}
+          />
+          <Text style={s.body}>{t(`waivers.role.${role}`)}</Text>
+        </Pressable>
+      ))}
+
+      <Field label={t('waivers.firstName')}>
+        <Input
+          editable={!frozen}
+          value={draft.firstName}
+          autoCapitalize="words"
+          onChangeText={(firstName) => patch({ firstName })}
+        />
+      </Field>
+      <Field label={t('waivers.lastName')}>
+        <Input
+          editable={!frozen}
+          value={draft.lastName}
+          autoCapitalize="words"
+          onChangeText={(lastName) => patch({ lastName })}
+        />
+      </Field>
+      {guardian ? (
+        <>
+          <Field label={t('waivers.minorName')}>
+            <Input
+              editable={!frozen}
+              value={draft.minorName ?? ''}
+              autoCapitalize="words"
+              onChangeText={(minorName) => patch({ minorName })}
+            />
+          </Field>
+          <Field label={t('waivers.relationship')}>
+            <Input
+              editable={!frozen}
+              value={draft.guardianRelationship ?? ''}
+              onChangeText={(guardianRelationship) => patch({ guardianRelationship })}
+            />
+          </Field>
+          <Field label={t('waivers.minorDob')}>
+            <Input
+              editable={!frozen}
+              value={draft.minorDob ?? ''}
+              placeholder="YYYY-MM-DD"
+              keyboardType="number-pad"
+              autoCapitalize="none"
+              onChangeText={(minorDob) =>
+                patch({ minorDob: formatDateDigits(minorDob) || undefined })
+              }
+            />
+          </Field>
+        </>
+      ) : null}
+
+      {methods.length > 1
+        ? methods.map((method) => (
+            <Pressable
+              key={method}
+              accessibilityRole="radio"
+              accessibilityState={{ selected: draft.method === method }}
+              disabled={frozen}
+              onPress={() => setDraft((d) => withSignatureMethod(d, method))}
+              style={s.choice}
+            >
+              <View
+                style={[
+                  s.radio,
+                  { borderColor: theme.accent },
+                  draft.method === method && { backgroundColor: theme.accent },
+                ]}
+              />
+              <Text style={s.body}>{t(`waivers.method.${method}`)}</Text>
+            </Pressable>
+          ))
+        : null}
+      {draft.method === 'typed' ? (
+        <Field label={t('waivers.typedName')}>
+          <Input
+            editable={!frozen}
+            value={draft.typedName ?? ''}
+            autoCapitalize="words"
+            onChangeText={(typedName) => patch({ typedName })}
+          />
+        </Field>
+      ) : (
+        <SignaturePad
+          label={t('waivers.draw')}
+          clearLabel={t('waivers.clear')}
+          disabled={frozen}
+          onChange={(imageDataUrl, inkLength) => patch({ imageDataUrl, inkLength })}
+        />
+      )}
+      <Checkbox
+        checked={draft.agreeElectronic}
+        onChange={(agreeElectronic) => patch({ agreeElectronic })}
+        label={consentText || t('waivers.agree')}
+      />
+
+      {problems.map((key) => (
+        <ErrorText key={key}>{t(key)}</ErrorText>
+      ))}
+      {error ? <ErrorText>{error}</ErrorText> : null}
+      {busy && !pressed ? (
+        <Text style={s.muted} accessibilityLiveRegion="polite">
+          {t('common.stillSaving')}
+        </Text>
+      ) : null}
+
+      <Button
+        loading={busy}
+        disabled={busy || locked}
+        onPress={() => {
+          setPressed(true)
+          void onSign(draft, () => draftRef.current)
+            .then(setProblems)
+            .finally(() => setPressed(false))
+        }}
+      >
+        {busy ? t('waivers.signing') : t('waivers.sign')}
+      </Button>
+    </View>
+  )
+}
+
+const useWaiverStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        muted: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+        body: {
+          color: theme.text,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+          flexShrink: 1,
+        },
+        strong: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        textBox: {
+          maxHeight: 220,
+          borderWidth: StyleSheet.hairlineWidth,
+          borderRadius: 8,
+          padding: 12,
+        },
+        ticket: { gap: 8, paddingTop: 12, borderTopWidth: StyleSheet.hairlineWidth },
+        row: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 12,
+        },
+        form: { gap: 10 },
+        choice: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 8,
+          paddingVertical: 4,
+        },
+        radio: { width: 18, height: 18, borderRadius: 9, borderWidth: 2 },
+      }),
+    [theme]
+  )

package/src/sections/billing/BillingAddressFields.tsx

@@ -0,0 +1,126 @@
+import React, { type Dispatch, type FC, type SetStateAction } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import { Field, Input } from '../../ui/Field'
+import { BodyText } from '../../ui/primitives'
+import { Select, type SelectOption } from '../../ui/Select'
+import type { BillingDraft, BillingFieldError, LocationOption } from './types'
+
+interface BillingAddressFieldsProps {
+  billing: BillingDraft
+  countries: LocationOption[]
+  states: LocationOption[]
+  fieldError: BillingFieldError
+  setBilling: Dispatch<SetStateAction<BillingDraft>>
+}
+
+/**
+ * Address fields shared by the embedded and stepped billing experiences. The RN
+ * analogue of the web `BillingAddressFields`: country/state `<select>` become the
+ * native `../ui/Select`; text inputs keep the same placeholder copy.
+ */
+export const BillingAddressFields: FC<BillingAddressFieldsProps> = ({
+  billing,
+  countries,
+  states,
+  fieldError,
+  setBilling,
+}) => {
+  const setValue = (key: keyof BillingDraft) => (value: string) =>
+    setBilling((current) => ({ ...current, [key]: value }))
+
+  const countryOptions: SelectOption[] = countries.map((country) => ({
+    label: country.name,
+    value: String(country.id),
+  }))
+  const stateOptions: SelectOption[] = states.map((state) => ({
+    label: state.name,
+    value: String(state.id),
+  }))
+
+  return (
+    <>
+      <BodyText style={styles.sectionLabel}>Billing address *</BodyText>
+      <Field error={fieldError('Street address', 'Street address is required.')}>
+        <Input
+          placeholder="Street address *"
+          value={billing.streetAddress ?? ''}
+          onChangeText={setValue('streetAddress')}
+          invalid={Boolean(fieldError('Street address'))}
+        />
+      </Field>
+      <View style={styles.row}>
+        <View style={styles.col}>
+          <Field error={fieldError('City', 'City is required.')}>
+            <Input
+              placeholder="City *"
+              value={billing.city ?? ''}
+              onChangeText={setValue('city')}
+              invalid={Boolean(fieldError('City'))}
+            />
+          </Field>
+        </View>
+        <View style={styles.col}>
+          <Field error={fieldError('ZIP / postcode', 'ZIP / postcode is required.')}>
+            <Input
+              placeholder="ZIP / Postcode *"
+              value={billing.zip ?? ''}
+              onChangeText={setValue('zip')}
+              keyboardType="numbers-and-punctuation"
+              invalid={Boolean(fieldError('ZIP / postcode'))}
+            />
+          </Field>
+        </View>
+      </View>
+      <View style={styles.row}>
+        <View style={styles.col}>
+          <Field error={fieldError('Country', 'Country is required.')}>
+            <Select
+              value={billing.countryId ?? undefined}
+              onChange={(value) => {
+                const country = countries.find(
+                  (candidate) => String(candidate.id) === value
+                )
+                setBilling((current) => ({
+                  ...current,
+                  countryId: value,
+                  countryCode: country?.code?.toUpperCase(),
+                  stateId: undefined,
+                  stateCode: undefined,
+                }))
+              }}
+              options={countryOptions}
+              placeholder="— country * —"
+              invalid={Boolean(fieldError('Country'))}
+            />
+          </Field>
+        </View>
+        <View style={styles.col}>
+          <Field error={fieldError('State / county', 'State / county is required.')}>
+            <Select
+              value={billing.stateId ?? undefined}
+              onChange={(value) => {
+                const state = states.find((candidate) => String(candidate.id) === value)
+                setBilling((current) => ({
+                  ...current,
+                  stateId: value,
+                  stateCode: state?.code,
+                }))
+              }}
+              options={stateOptions}
+              placeholder={`— state / county${states.length > 0 ? ' *' : ''} —`}
+              disabled={!billing.countryId || states.length === 0}
+              invalid={Boolean(fieldError('State / county'))}
+            />
+          </Field>
+        </View>
+      </View>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  sectionLabel: { fontWeight: '600' },
+  row: { flexDirection: 'row', gap: 10 },
+  col: { flex: 1 },
+})