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

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>
+  )
+}

package/src/sections/TicketRefund.tsx

@@ -0,0 +1,104 @@
+import React, { type FC } from 'react'
+import { Pressable, View } from 'react-native'
+import { hooks, ticketRefundConsequences } from 'tf-checkout-shared'
+import {
+  BodyText,
+  Button,
+  Card,
+  ErrorText,
+  Loader,
+  MutedText,
+  SectionHeader,
+} from '../ui/primitives'
+import { Checkbox } from '../ui/Field'
+import { FrozenFields } from '../ui/Frozen'
+
+export interface TicketRefundProps {
+  ticketHash: string
+  onSubmitted?: () => void
+  onDone?: () => void
+}
+export const TicketRefund: FC<TicketRefundProps> = ({
+  ticketHash,
+  onSubmitted,
+  onDone,
+}) => {
+  const refund = hooks.useTicketRefund(ticketHash, onSubmitted)
+  if (refund.result)
+    return (
+      <Card>
+        <SectionHeader title="Refund requested" />
+        <BodyText>
+          Your refund request has been submitted. We’ll email you when it is complete.
+        </BodyText>
+        {onDone && <Button onPress={onDone}>View my tickets</Button>}
+      </Card>
+    )
+  if (refund.query.isLoading) return <Loader />
+  if (refund.query.isError)
+    return (
+      <Card>
+        <ErrorText>{refund.query.error.message}</ErrorText>
+        <Button onPress={() => void refund.query.refetch()}>Try again</Button>
+      </Card>
+    )
+  const options = refund.query.data?.options ?? []
+  return (
+    <Card>
+      <SectionHeader title="Refund ticket" />
+      {!options.length && (
+        <BodyText>
+          {refund.query.data?.eligibility_reason ||
+            'No refund choices are available for this ticket.'}
+        </BodyText>
+      )}
+      {options.map((option) => (
+        <Pressable
+          key={option.option_id}
+          accessibilityRole="radio"
+          accessibilityState={{
+            checked: refund.selected?.option_id === option.option_id,
+            disabled: refund.busy || refund.commandPending,
+          }}
+          disabled={refund.busy || refund.commandPending}
+          onPress={() => refund.select(option.option_id)}
+        >
+          <BodyText>
+            {refund.selected?.option_id === option.option_id ? '● ' : '○ '}
+            {option.currency} {option.amount}
+          </BodyText>
+        </Pressable>
+      ))}
+      {refund.selected && (
+        <View style={{ gap: 8 }}>
+          <BodyText>
+            You’ll receive {refund.selected.currency} {refund.selected.amount}.
+          </BodyText>
+          <MutedText>
+            Amount retained: {refund.selected.currency} {refund.selected.retained_amount}
+          </MutedText>
+          {ticketRefundConsequences(refund.selected).map((line) => (
+            <BodyText key={line}>{line}</BodyText>
+          ))}
+          <FrozenFields frozen={refund.busy || refund.commandPending}>
+            <Checkbox
+              label="I have reviewed this refund and its effect on my ticket and add-ons."
+              checked={refund.confirmed}
+              onChange={refund.confirm}
+            />
+          </FrozenFields>
+        </View>
+      )}
+      {refund.error && <ErrorText>{refund.error}</ErrorText>}
+      {(refund.selected || refund.commandPending) && (
+        <Button
+          onPress={() => void refund.submit()}
+          loading={refund.busy}
+          disabled={refund.busy || (!refund.commandPending && !refund.confirmed)}
+        >
+          {refund.commandPending ? 'Check refund request' : 'Confirm refund'}
+        </Button>
+      )}
+    </Card>
+  )
+}