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

package/src/sections/SeatsIoMap.tsx

@@ -0,0 +1,110 @@
+import React, { useMemo, type FC } from 'react'
+import { View } from 'react-native'
+import { WebView } from 'react-native-webview'
+import {
+  hooks,
+  seatsIoChartDocument,
+  seatsIoLineNotes,
+  seatsIoRendererNavigation,
+  type SeatsIoMapData,
+} from 'tf-checkout-shared'
+import { useCheckoutContext } from '../ui/CheckoutProvider'
+import { FrozenFields } from '../ui/Frozen'
+import { Select } from '../ui/Select'
+import {
+  Button,
+  Card,
+  ErrorText,
+  Loader,
+  MutedText,
+  SectionHeader,
+} from '../ui/primitives'
+
+export const SeatsIoMap: FC<{
+  eventId: string
+  initial: SeatsIoMapData
+  onContinue?: () => void
+}> = ({ eventId, initial, onContinue }) => {
+  const checkout = useCheckoutContext()
+  const flow = hooks.useSeatsIoSelection(eventId, checkout, initial, onContinue)
+  const bundleStarting = hooks.useBundleStarting(checkout.store)
+  const html = useMemo(
+    () => (flow.data.chart ? seatsIoChartDocument(flow.data.chart, flow.nonce) : ''),
+    [flow.data.chart, flow.nonce]
+  )
+  return (
+    <FrozenFields frozen={checkout.orderFixed}>
+      <Card>
+        <SectionHeader title="Select your seats" />
+        {flow.data.maps.length > 1 || !flow.data.chart ? (
+          <Select
+            value={flow.data.chart?.mapId ?? ''}
+            placeholder="Choose a date or seating chart"
+            disabled={flow.loading || flow.adding || checkout.isBusy || bundleStarting}
+            options={flow.data.maps.map((map) => ({
+              value: map.id,
+              label: `${map.name}${map.eventStartsAt ? ` · ${map.eventStartsAt}` : ''}`,
+            }))}
+            onChange={(value) => void flow.selectMap(value)}
+          />
+        ) : null}
+        {flow.data.nextCursor && (
+          <Button
+            variant="ghost"
+            disabled={flow.loading}
+            onPress={() =>
+              void flow.selectMap(flow.data.chart?.mapId ?? '', flow.data.nextCursor!)
+            }
+          >
+            Show more dates
+          </Button>
+        )}
+        {flow.loading && <Loader />}
+        {flow.data.chart && (
+          <View style={{ height: 440 }}>
+            <WebView
+              key={flow.nonce}
+              source={{ html }}
+              javaScriptEnabled
+              incognito
+              originWhitelist={['about:*', 'https://*.seatsio.net']}
+              scrollEnabled={false}
+              onShouldStartLoadWithRequest={({ url }) => seatsIoRendererNavigation(url)}
+              onMessage={({ nativeEvent }) => flow.onMessage(nativeEvent.data)}
+              onError={() =>
+                flow.onMessage(JSON.stringify({ type: 'error', nonce: flow.nonce }))
+              }
+            />
+          </View>
+        )}
+        {flow.preview.map((line) => (
+          <MutedText key={line.ticketTypeId}>
+            {line.labels.length} × {line.name} · {flow.data.chart?.currency} {line.price}{' '}
+            each · {line.labels.join(', ')} {seatsIoLineNotes(line).join(' ')}
+          </MutedText>
+        ))}
+        {flow.secondsLeft != null && (
+          <MutedText>
+            Seats held for {Math.floor(flow.secondsLeft / 60)}:
+            {String(flow.secondsLeft % 60).padStart(2, '0')}
+          </MutedText>
+        )}
+        {flow.error && (
+          <>
+            <ErrorText>{flow.error}</ErrorText>
+            <Button variant="ghost" onPress={flow.restart}>
+              Start again
+            </Button>
+          </>
+        )}
+        <Button
+          onPress={flow.getTickets}
+          loading={flow.adding}
+          disabled={!flow.canContinue || bundleStarting}
+        >
+          Get tickets
+        </Button>
+      </Card>
+    </FrozenFields>
+  )
+}

package/src/sections/TicketChange.tsx

@@ -0,0 +1,379 @@
+/**
+ * `<TicketChange/>` — the RN analogue of the web section: a buyer changes or
+ * upgrades one ticket. It lists what the ticket can change to with the one
+ * price the server words, confirms, and makes the change; a paid change opens
+ * the hosted payment page. When no change is open it says why and offers
+ * "Sell it instead" or the upgrade waitlist. The flow lives in
+ * `hooks.useTicketChange`, shared with web.
+ *
+ * Pass `orderHash` (from the order email link) for a buyer with no account.
+ */
+import React, { useMemo, type FC } from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+import {
+  createTranslator,
+  hooks,
+  ticketChangeCharge,
+  ticketChangeDoneCopy,
+  ticketChangeView,
+  type LocaleCode,
+  type Messages,
+  type TicketChangeOption,
+  type Translate,
+} from 'tf-checkout-shared'
+
+import { rnPorts } from '../instance'
+import { useTheme } from '../ui/CheckoutProvider'
+import { Button, Card, ErrorText, Loader, SectionHeader } from '../ui/primitives'
+import type { ResolvedTheme } from '../ui/theme'
+
+export interface TicketChangeProps {
+  ticketHash: string
+  /** The order's own link hash, for a buyer who is not signed in. */
+  orderHash?: string
+  /** Fired by the Back button after a change that needed no payment is made.
+   *  Without it, Back returns to the start of the change flow. */
+  onChanged?: () => void
+  /** Opens server links (payment page, resale). Defaults to the system browser. */
+  openUrl?: (url: string) => void | Promise<void>
+  /** Opens the host's sign-in. When given, a credit change that needs an
+   *  account shows a Sign in button beside the prompt. A sign-in through the
+   *  SDK reads the options again by itself; a host with its own session
+   *  returns a promise that settles once the buyer is signed in. */
+  onLogin?: () => void | Promise<unknown>
+  locale?: LocaleCode
+  messages?: Partial<Messages>
+  translate?: Translate
+}
+
+export const TicketChange: FC<TicketChangeProps> = ({
+  ticketHash,
+  orderHash,
+  onChanged,
+  openUrl,
+  onLogin,
+  locale,
+  messages,
+  translate,
+}) => {
+  const theme = useTheme()
+  const s = useChangeStyles(theme)
+  const t = translate ?? createTranslator({ locale, messages })
+  const open = openUrl ?? rnPorts.openUrl
+  const flow = hooks.useTicketChange({ ticketHash, orderHash }, open)
+  const options = flow.query.data
+  // A credit change that needs an account: the prompt replaces Confirm, and
+  // the ticket stays as it is.
+  const signInLine = flow.signInRequired ? (
+    <View>
+      <Text style={s.muted} accessibilityLiveRegion="polite">
+        {t('ticketChange.signInRequired')}
+      </Text>
+      {onLogin ? (
+        <Button onPress={() => flow.signIn(onLogin)}>{t('ticketChange.signIn')}</Button>
+      ) : null}
+    </View>
+  ) : null
+  const label = (option: TicketChangeOption) =>
+    option.eventName
+      ? t('ticketChange.otherEvent', { name: option.name, event: option.eventName })
+      : option.name
+  // A change for this ticket from before the buyer left and came back is
+  // still running: the controls show busy, never dead.
+  const savingLine =
+    flow.saving && flow.step !== 'submitting' ? (
+      <Text style={s.muted} accessibilityLiveRegion="polite">
+        {t('common.stillSaving')}
+      </Text>
+    ) : null
+  // The options on screen may be old after a failed reread: say so, offer a
+  // retry, and keep every action disabled until it works.
+  const refreshLine = flow.refreshFailed ? (
+    <View>
+      <ErrorText>{t('ticketChange.refreshFailed')}</ErrorText>
+      <Button
+        variant="ghost"
+        disabled={!flow.can.retry}
+        onPress={() => void flow.retryRefresh()}
+      >
+        {t('ticketChange.retry')}
+      </Button>
+    </View>
+  ) : null
+  const header = (
+    <>
+      <SectionHeader title={t('ticketChange.heading')} />
+      {savingLine}
+      {refreshLine}
+    </>
+  )
+
+  // A payment for this ticket began in a flow that is gone: no new change
+  // until the buyer continues it, starts again, or it is over.
+  if (flow.paymentInProgress) {
+    return (
+      <Card>
+        {header}
+        <Text style={s.muted} accessibilityLiveRegion="polite">
+          {t('ticketChange.paymentInProgress')}
+        </Text>
+        {flow.canContinuePayment ? (
+          <Button onPress={flow.continuePayment}>
+            {t('ticketChange.continuePayment')}
+          </Button>
+        ) : null}
+        {flow.notice ? <ErrorText>{t(flow.notice)}</ErrorText> : null}
+        <Button variant="ghost" onPress={flow.startAgain}>
+          {t('ticketChange.startAgain')}
+        </Button>
+      </Card>
+    )
+  }
+
+  if (flow.query.isLoading) {
+    return (
+      <Card>
+        {header}
+        <View style={s.loader}>
+          <Loader />
+        </View>
+      </Card>
+    )
+  }
+  if (!options) {
+    return (
+      <Card>
+        {header}
+        <ErrorText>
+          {flow.query.error
+            ? (flow.query.error as Error).message
+            : t('ticketChange.closed')}
+        </ErrorText>
+      </Card>
+    )
+  }
+
+  if (flow.step === 'done') {
+    // Only a made change is reported as one: a refund to wait for, or an
+    // answer that is not confirmed, leaves the ticket as it is.
+    const done = ticketChangeDoneCopy(flow.result)
+    const priceText =
+      flow.result && 'priceText' in flow.result ? flow.result.priceText : ''
+    return (
+      <Card>
+        {header}
+        <Text style={s.strong}>
+          {'text' in done ? done.text : t(done.key, done.values)}
+        </Text>
+        {priceText ? <Text style={s.strong}>{priceText}</Text> : null}
+        <Button
+          onPress={() => (done.changed && onChanged ? onChanged() : flow.restart())}
+        >
+          {t('ticketChange.back')}
+        </Button>
+      </Card>
+    )
+  }
+
+  if (flow.step === 'payment' && flow.result?.status === 'payment_required') {
+    return (
+      <Card>
+        {header}
+        <Text style={s.muted}>{t('ticketChange.payment')}</Text>
+        <Button disabled={!flow.can.pay} onPress={flow.openPayment}>
+          {t('ticketChange.paymentOpen')}
+        </Button>
+        {flow.notice ? <ErrorText>{t(flow.notice)}</ErrorText> : null}
+        {/* Back rereads the options under the ticket's lock: wait for it. */}
+        <Button
+          variant="ghost"
+          loading={flow.busy}
+          disabled={!flow.can.back}
+          onPress={flow.back}
+        >
+          {t('ticketChange.back')}
+        </Button>
+      </Card>
+    )
+  }
+
+  if ((flow.step === 'confirm' || flow.step === 'submitting') && flow.selected) {
+    const option = flow.selected
+    const submitting = flow.step === 'submitting'
+    return (
+      <Card>
+        {header}
+        <Text style={s.strong}>
+          {t('ticketChange.confirmTitle', { name: label(option) })}
+        </Text>
+        <Text style={s.price}>{option.priceText}</Text>
+        {(() => {
+          // The server's price text is the difference; a change fee comes on top.
+          const charge = ticketChangeCharge(option)
+          if (!charge || option.fee <= 0) return null
+          return (
+            <Text style={s.muted}>
+              {t('ticketChange.fee', {
+                amount: `${option.currency} ${option.fee.toFixed(2)}`,
+              })}
+              {'\n'}
+              {t('ticketChange.total', {
+                amount: `${charge.currency} ${charge.amount.toFixed(2)}`,
+              })}
+            </Text>
+          )
+        })()}
+        {flow.error ? <ErrorText>{flow.error}</ErrorText> : null}
+        {flow.notice ? <Text style={s.muted}>{t(flow.notice)}</Text> : null}
+        {signInLine}
+        {flow.alternatives.length > 0 ? (
+          <View style={s.slots}>
+            <Text style={s.muted}>{t('ticketChange.slotFull')}</Text>
+            {flow.alternatives.map((slot) => (
+              <Button
+                key={slot.slotValue}
+                variant="ghost"
+                disabled={!flow.can.chooseAlternative}
+                onPress={() => void flow.chooseAlternative(slot)}
+              >
+                {slot.label}
+              </Button>
+            ))}
+          </View>
+        ) : null}
+        {/* No Confirm for a slot just refused: the buyer picks an open one. */}
+        {flow.canConfirm || submitting ? (
+          <Button
+            loading={submitting}
+            disabled={!flow.can.confirm}
+            onPress={() => void flow.confirm()}
+          >
+            {submitting
+              ? t('ticketChange.submitting')
+              : option.paymentRequired
+                ? t('ticketChange.confirmPay')
+                : t('ticketChange.confirm')}
+          </Button>
+        ) : null}
+        <Button variant="ghost" disabled={!flow.can.back} onPress={flow.back}>
+          {t('ticketChange.back')}
+        </Button>
+      </Card>
+    )
+  }
+
+  if (ticketChangeView(options) === 'choose') {
+    return (
+      <Card>
+        {header}
+        <Text style={s.muted}>{t('ticketChange.choose')}</Text>
+        {options.options.map((option) => (
+          <Pressable
+            key={option.ticketTypeId}
+            accessibilityRole="button"
+            accessibilityState={{ disabled: !flow.can.select }}
+            disabled={!flow.can.select}
+            onPress={() => flow.select(option)}
+            style={[
+              s.option,
+              { borderColor: theme.border },
+              !flow.can.select && s.optionDisabled,
+            ]}
+          >
+            <Text style={s.strong}>{label(option)}</Text>
+            <Text style={s.price}>{option.priceText}</Text>
+          </Pressable>
+        ))}
+        {flow.error ? <ErrorText>{flow.error}</ErrorText> : null}
+        {flow.notice ? <Text style={s.muted}>{t(flow.notice)}</Text> : null}
+        {signInLine}
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      {header}
+      <Text style={s.muted}>{options.message || t('ticketChange.closed')}</Text>
+      {options.sellInstead.available ? (
+        <>
+          <Text style={s.muted}>{t('ticketChange.sellInsteadNote')}</Text>
+          <Button disabled={!flow.can.sellInstead} onPress={flow.sellInstead}>
+            {t('ticketChange.sellInstead')}
+          </Button>
+        </>
+      ) : null}
+      {options.waitlistOptions.map((wait) => (
+        <View key={wait.ticketTypeId} style={s.waitlist}>
+          {wait.entry ? (
+            <>
+              <Text style={s.muted}>
+                {t(
+                  wait.entry.status === 'offered'
+                    ? 'ticketChange.waitlist.offered'
+                    : 'ticketChange.waitlist.waiting',
+                  { name: wait.name }
+                )}
+              </Text>
+              <Button
+                variant="ghost"
+                loading={flow.busyWaitlist}
+                disabled={!flow.can.waitlist}
+                onPress={() => wait.entry && void flow.leaveWaitlist(wait.entry.id)}
+              >
+                {t('ticketChange.waitlist.leave')}
+              </Button>
+            </>
+          ) : (
+            <Button
+              variant="ghost"
+              loading={flow.busyWaitlist}
+              disabled={!flow.can.waitlist}
+              onPress={() => void flow.joinWaitlist(wait.ticketTypeId)}
+            >
+              {t('ticketChange.waitlist.join', { name: wait.name })}
+            </Button>
+          )}
+        </View>
+      ))}
+      {flow.error ? <ErrorText>{flow.error}</ErrorText> : null}
+      {flow.notice ? <Text style={s.muted}>{t(flow.notice)}</Text> : null}
+    </Card>
+  )
+}
+
+const useChangeStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        loader: { paddingVertical: 20, alignItems: 'center' },
+        muted: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+        strong: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        price: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '700',
+          fontFamily: theme.fontFamily,
+        },
+        option: {
+          borderWidth: StyleSheet.hairlineWidth,
+          borderRadius: 8,
+          padding: 12,
+          gap: 4,
+        },
+        optionDisabled: { opacity: 0.4 },
+        slots: { gap: 8 },
+        waitlist: { gap: 6, paddingTop: 8 },
+      }),
+    [theme]
+  )

package/src/sections/TicketGift.tsx

@@ -0,0 +1,206 @@
+import React, { type FC } from 'react'
+import { View } from 'react-native'
+import { hooks, type TicketGiftProps } from 'tf-checkout-shared'
+import {
+  BodyText,
+  Button,
+  Card,
+  ErrorText,
+  Loader,
+  SectionHeader,
+} from '../ui/primitives'
+import { Checkbox, Field, Input } from '../ui/Field'
+import { useAccountT } from '../ui/useAccountT'
+
+export const TicketGift: FC<TicketGiftProps> = ({
+  ticketHash,
+  onTicketsChanged,
+  onDone,
+  locale,
+}) => {
+  const t = useAccountT(locale)
+  const flow = hooks.useTicketGift(ticketHash, onTicketsChanged)
+  const { state, query } = flow
+  const command = state.command ?? state.submitted
+  if (command)
+    return (
+      <Card>
+        <SectionHeader
+          title={t(command.kind === 'send' ? 'Review your gift' : 'Cancel gift')}
+        />
+        {command.kind === 'send' ? (
+          <>
+            <BodyText>
+              {command.intent.first_name} {command.intent.last_name}
+            </BodyText>
+            <BodyText>{command.intent.email}</BodyText>
+            {query.data?.add_ons
+              .filter(
+                (item) =>
+                  !query.data?.select_add_ons ||
+                  command.intent.add_on_ids.includes(item.id)
+              )
+              .map((item) => (
+                <BodyText key={item.id}>{item.name}</BodyText>
+              ))}
+            <BodyText>
+              {t(
+                'Once the gift is accepted, this ticket will belong to the recipient and you will no longer be able to use it.'
+              )}
+            </BodyText>
+          </>
+        ) : (
+          <BodyText>
+            {t(
+              'Cancel this pending gift so you can keep or send your ticket to someone else?'
+            )}
+          </BodyText>
+        )}
+        {state.error && <ErrorText>{t(state.error)}</ErrorText>}
+        <Button
+          loading={state.busy}
+          disabled={state.busy}
+          onPress={() => void flow.submit()}
+        >
+          {t(
+            state.submitted
+              ? 'Check gift status'
+              : command.kind === 'send'
+                ? 'Send gift'
+                : 'Cancel gift'
+          )}
+        </Button>
+        {!state.submitted && (
+          <Button variant="ghost" onPress={flow.back}>
+            {t('Back')}
+          </Button>
+        )}
+      </Card>
+    )
+  if (query.isLoading) return <Loader />
+  if (query.error)
+    return (
+      <Card>
+        <ErrorText>{t(query.error.message)}</ErrorText>
+        <Button onPress={() => void query.refetch()}>{t('Try again')}</Button>
+      </Card>
+    )
+  const gift = query.data
+  if (!gift) return null
+  return (
+    <Card>
+      <SectionHeader title={t('Gift ticket')} />
+      {state.result === 'cancelled' && (
+        <BodyText>{t('Your gift was cancelled. Your ticket is still yours.')}</BodyText>
+      )}
+      {gift.status === 'sent' && (
+        <BodyText>
+          {t('Your ticket has been given to the recipient. You can no longer use it.')}
+        </BodyText>
+      )}
+      {gift.pending && (
+        <>
+          <BodyText>
+            {t(
+              gift.status === 'processing'
+                ? 'Your gift is being completed.'
+                : 'Your gift is waiting for the recipient to accept it.'
+            )}
+          </BodyText>
+          <BodyText>
+            {gift.pending.first_name} {gift.pending.last_name}
+          </BodyText>
+          <BodyText>{gift.pending.email}</BodyText>
+          {gift.pending.can_cancel && (
+            <Button onPress={flow.confirmCancel}>{t('Cancel gift')}</Button>
+          )}
+          <Button variant="ghost" onPress={() => void query.refetch()}>
+            {t('Check gift status')}
+          </Button>
+        </>
+      )}
+      {gift.can_send ? (
+        <View style={{ gap: 12 }}>
+          <BodyText>
+            {t(
+              'Give this ticket to someone else. Once they receive it, you will no longer own it or be able to use it.'
+            )}
+          </BodyText>
+          <Field label={t('First name')}>
+            <Input
+              value={state.draft.first_name}
+              accessibilityLabel={t('First name')}
+              maxLength={100}
+              onChangeText={(value) => flow.edit({ first_name: value })}
+              autoCapitalize="words"
+            />
+          </Field>
+          <Field label={t('Last name')}>
+            <Input
+              value={state.draft.last_name}
+              accessibilityLabel={t('Last name')}
+              maxLength={100}
+              onChangeText={(value) => flow.edit({ last_name: value })}
+              autoCapitalize="words"
+            />
+          </Field>
+          <Field label={t('Email address')}>
+            <Input
+              value={state.draft.email}
+              accessibilityLabel={t('Email address')}
+              maxLength={254}
+              onChangeText={(value) => flow.edit({ email: value })}
+              keyboardType="email-address"
+              autoCapitalize="none"
+            />
+          </Field>
+          <Field label={t('Confirm email address')}>
+            <Input
+              value={state.draft.confirm_email}
+              accessibilityLabel={t('Confirm email address')}
+              maxLength={254}
+              onChangeText={(value) => flow.edit({ confirm_email: value })}
+              keyboardType="email-address"
+              autoCapitalize="none"
+            />
+          </Field>
+          {gift.add_ons.length > 0 && (
+            <BodyText>
+              {t(
+                gift.select_add_ons
+                  ? 'Choose add-ons to include'
+                  : 'These add-ons are included with your gift'
+              )}
+            </BodyText>
+          )}
+          {gift.add_ons.map((item) =>
+            gift.select_add_ons ? (
+              <Checkbox
+                key={item.id}
+                label={item.name}
+                checked={state.draft.add_on_ids.includes(item.id)}
+                onChange={() => flow.toggleAddOn(item.id)}
+              />
+            ) : (
+              <BodyText key={item.id}>{item.name}</BodyText>
+            )
+          )}
+          <Checkbox
+            checked={state.draft.confirm_terms}
+            onChange={(value) => flow.edit({ confirm_terms: value })}
+            label={t('I understand that this ticket will belong to the recipient.')}
+          />
+          {state.error && <ErrorText>{t(state.error)}</ErrorText>}
+          <Button onPress={flow.review}>{t('Review gift')}</Button>
+        </View>
+      ) : gift.status === 'unavailable' ? (
+        <BodyText>{t('This ticket cannot be gifted now.')}</BodyText>
+      ) : null}
+      {onDone && (
+        <Button variant="ghost" onPress={onDone}>
+          {t('View my tickets')}
+        </Button>
+      )}
+    </Card>
+  )
+}