tf-checkout-react-native 2.0.0-beta.0 → 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/PhoneIdentity.tsx

@@ -0,0 +1,169 @@
+import React, { useState, type FC } from 'react'
+import { Text, View } from 'react-native'
+import {
+  hooks,
+  applyVerifiedPhone,
+  billingDraftFrom,
+  type BillingDraft,
+  type VerifiedCheckoutPhone,
+} from 'tf-checkout-shared'
+import { Button, ErrorText, MutedText } from '../../ui/primitives'
+import { Checkbox, Field, Input } from '../../ui/Field'
+import { TwoFactorForm } from '../../auth/TwoFactorForm'
+export interface PhoneIdentityProps {
+  eventId?: string
+  currentPhone?: string
+  whatsappAvailable: boolean
+  knownEmailSelected?: boolean
+  onUseKnownEmail: (value: boolean) => void
+  onReset: () => void
+  onVerified: (verified: VerifiedCheckoutPhone) => void
+}
+export const PhoneIdentity: FC<PhoneIdentityProps> = ({
+  knownEmailSelected,
+  onUseKnownEmail,
+  onReset,
+  ...options
+}) => {
+  const identity = hooks.useCheckoutPhoneIdentity(options)
+  const [code, setCode] = useState('')
+  const [emailInstead, setEmailInstead] = useState(false)
+  if (emailInstead) return null
+  if (identity.challenge)
+    return (
+      <TwoFactorForm
+        loading={identity.busy}
+        error={identity.error}
+        successMessage=""
+        smsAvailable={identity.challenge.smsAvailable}
+        smsRetryAfter={identity.retryAfter}
+        onSubmit={identity.verifyTwoFactor}
+        onSendSms={identity.sendTwoFactorSms}
+        onCancel={identity.cancel}
+      />
+    )
+  return (
+    <View style={{ gap: 12, paddingVertical: 12 }}>
+      <Text>Verify your phone to complete your details faster</Text>
+      {identity.error ? <ErrorText>{identity.error}</ErrorText> : null}
+      {identity.verified ? (
+        <>
+          <MutedText>Your phone is verified.</MutedText>
+          {identity.result?.prefill.has_known_email === true &&
+          typeof identity.result.prefill.email_masked === 'string' ? (
+            <Checkbox
+              checked={Boolean(knownEmailSelected)}
+              onChange={onUseKnownEmail}
+              label={`Send my tickets to ${identity.result.prefill.email_masked}`}
+            />
+          ) : null}
+        </>
+      ) : (
+        <>
+          <Field label="Mobile number, including country code">
+            <Input
+              accessibilityLabel="Mobile number"
+              value={identity.phone}
+              onChangeText={identity.setPhone}
+              keyboardType="phone-pad"
+              autoComplete="tel"
+              editable={!identity.busy && !identity.sent}
+            />
+          </Field>
+          {identity.sent ? (
+            <>
+              <Field label="Verification code">
+                <Input
+                  value={code}
+                  onChangeText={(value) => setCode(value.replace(/\D/g, '').slice(0, 6))}
+                  keyboardType="number-pad"
+                  textContentType="oneTimeCode"
+                  autoComplete="one-time-code"
+                  maxLength={6}
+                  accessibilityLabel="Verification code"
+                  editable={!identity.busy}
+                />
+              </Field>
+              <Button
+                loading={identity.busy}
+                disabled={!/^\d{6}$/.test(code)}
+                onPress={() => void identity.verify(code)}
+              >
+                Verify phone
+              </Button>
+            </>
+          ) : null}
+          <Button
+            disabled={identity.busy || identity.retryAfter > 0 || !identity.phone.trim()}
+            onPress={() => void identity.request('sms')}
+          >
+            {identity.retryAfter > 0
+              ? `Send another code in ${identity.retryAfter}s`
+              : 'Send code by SMS'}
+          </Button>
+          {options.whatsappAvailable ? (
+            <Button
+              variant="ghost"
+              disabled={
+                identity.busy || identity.retryAfter > 0 || !identity.phone.trim()
+              }
+              onPress={() => void identity.request('whatsapp')}
+            >
+              Send code by WhatsApp
+            </Button>
+          ) : null}
+        </>
+      )}
+      {(identity.sent || identity.verified) && (
+        <Button
+          variant="ghost"
+          disabled={identity.busy}
+          onPress={() => {
+            setCode('')
+            onReset()
+            void identity.cancel()
+          }}
+        >
+          Change phone number
+        </Button>
+      )}
+      <Button
+        variant="ghost"
+        disabled={identity.busy}
+        onPress={() => {
+          void identity.cancel().then(() => setEmailInstead(true))
+        }}
+      >
+        Use email instead
+      </Button>
+    </View>
+  )
+}
+
+/** Billing owns its draft; the phone step only supplies verified, whitelisted prefill. */
+export const BillingPhoneIdentity: FC<{
+  billing: BillingDraft
+  setBilling: React.Dispatch<React.SetStateAction<BillingDraft>>
+  eventId?: string
+  whatsappAvailable: boolean
+}> = ({ billing, setBilling, eventId, whatsappAvailable }) => (
+  <PhoneIdentity
+    eventId={eventId}
+    currentPhone={billing.phone}
+    whatsappAvailable={whatsappAvailable}
+    knownEmailSelected={billing.phoneFirstUseKnownEmail}
+    onUseKnownEmail={(value) =>
+      setBilling((current) => ({ ...current, phoneFirstUseKnownEmail: value }))
+    }
+    onReset={() =>
+      setBilling((current) => ({
+        ...current,
+        phoneVerificationToken: undefined,
+        phoneFirstUseKnownEmail: false,
+      }))
+    }
+    onVerified={(verified) =>
+      setBilling((current) => billingDraftFrom(applyVerifiedPhone(current, verified)))
+    }
+  />
+)