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

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