tf-checkout-react-native 2.0.0-beta.17 → 2.0.0-beta.18

package/src/ui/WaitingListForm.tsx

@@ -0,0 +1,139 @@
+import React from 'react'
+import { Alert, Linking, StyleSheet, View } from 'react-native'
+import {
+  createTranslator,
+  hooks,
+  waitingListQuantityCap,
+  type EventWaitingList,
+  type WaitingListEntry,
+  type WaitingListPrefill,
+} from 'tf-checkout-shared'
+import { Field, Input } from './Field'
+import { Button, ErrorText, MutedText, SectionHeader } from './primitives'
+import { Select } from './Select'
+
+export const WaitingListForm = ({
+  eventId,
+  definition,
+  onJoin,
+  prefill,
+}: {
+  eventId: string
+  definition?: EventWaitingList
+  onJoin: (entry: WaitingListEntry) => Promise<void>
+  prefill?: WaitingListPrefill
+}) => {
+  const tr = createTranslator()
+  const flow = hooks.useWaitingListForm(eventId, definition, onJoin, prefill)
+  if (definition?.state === 'closed')
+    return <MutedText>{tr('tickets.waitingListClosed')}</MutedText>
+  if (definition?.state === 'unsupported' && definition.eventUrl)
+    return (
+      <Button
+        variant="ghost"
+        onPress={() =>
+          void Linking.openURL(definition.eventUrl).catch(() =>
+            Alert.alert('Couldn’t open link', 'Please try again.')
+          )
+        }
+      >
+        {tr('tickets.waitingListWebsite')}
+      </Button>
+    )
+  if (definition?.state !== 'open') return null
+  if (flow.done) return <MutedText>{tr('tickets.waitingListJoined')}</MutedText>
+  const cap = waitingListQuantityCap(definition, flow.draft.ticketTypeId)
+  return (
+    <View style={styles.form}>
+      <SectionHeader title={tr('tickets.joinWaitingList')} />
+      <Field label={tr('tickets.firstName')}>
+        <Input
+          accessibilityLabel={tr('tickets.firstName')}
+          autoComplete="given-name"
+          textContentType="givenName"
+          autoCapitalize="words"
+          value={flow.draft.firstName}
+          editable={!flow.busy}
+          onChangeText={(firstName) => flow.update({ firstName })}
+        />
+      </Field>
+      <Field label={tr('tickets.lastName')}>
+        <Input
+          accessibilityLabel={tr('tickets.lastName')}
+          autoComplete="family-name"
+          textContentType="familyName"
+          autoCapitalize="words"
+          value={flow.draft.lastName}
+          editable={!flow.busy}
+          onChangeText={(lastName) => flow.update({ lastName })}
+        />
+      </Field>
+      <Field label={tr('tickets.email')}>
+        <Input
+          accessibilityLabel={tr('tickets.email')}
+          autoComplete="email"
+          textContentType="emailAddress"
+          value={flow.draft.email}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          editable={!flow.busy}
+          onChangeText={(email) => flow.update({ email })}
+        />
+      </Field>
+      {!definition.autoSelectTicketId && definition.ticketTypes.length > 0 ? (
+        <Field label={tr('tickets.waitingListTicket')}>
+          <Select
+            value={flow.draft.ticketTypeId}
+            disabled={flow.busy}
+            onChange={(ticketTypeId) => flow.update({ ticketTypeId, quantity: '' })}
+            options={[
+              ...(definition.allowAnyTicket
+                ? [{ value: '', label: tr('tickets.waitingListAny') }]
+                : []),
+              ...definition.ticketTypes.map((choice) => ({
+                value: choice.id,
+                label: choice.name,
+              })),
+            ]}
+          />
+        </Field>
+      ) : null}
+      {definition.showQuantity && definition.fixedQuantity === undefined ? (
+        <Field
+          label={tr('tickets.waitingListQuantity')}
+          error={
+            flow.quantityInvalid
+              ? tr(
+                  cap === 0
+                    ? 'tickets.waitingListNoQuantity'
+                    : 'tickets.waitingListInvalidQuantity',
+                  { max: cap }
+                )
+              : undefined
+          }
+        >
+          <Input
+            accessibilityLabel={tr('tickets.waitingListQuantity')}
+            keyboardType="number-pad"
+            value={flow.draft.quantity}
+            placeholder={tr('tickets.waitingListQuantityHint')}
+            editable={!flow.busy}
+            invalid={flow.quantityInvalid}
+            onChangeText={(quantity) => flow.update({ quantity })}
+          />
+        </Field>
+      ) : null}
+      <Button
+        variant="ghost"
+        loading={flow.busy}
+        disabled={!flow.canSubmit}
+        onPress={() => void flow.submit()}
+      >
+        {tr('tickets.joinWaitingList')}
+      </Button>
+      {flow.error ? <ErrorText>{flow.error}</ErrorText> : null}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({ form: { gap: 8 } })

package/src/ui/index.ts

@@ -18,3 +18,4 @@ export * from './Timer'
 export * from './TimerBanner'
 export * from './PaymentMethods'
 export * from './InstallmentPicker'
+export * from './RichText'