tf-checkout-react-native 1.0.47 → 2.0.0-beta.10

package/src/sections/billing/BuyerField.tsx

@@ -0,0 +1,78 @@
+import React, { type FC } from 'react'
+
+import type { BuyerFieldSpec } from 'tf-checkout-shared'
+
+import { Field, Input } from '../../ui/Field'
+import { Select, type SelectOption } from '../../ui/Select'
+import type { LocationOption } from './types'
+
+interface BuyerFieldProps {
+  field: BuyerFieldSpec
+  value: string
+  countries: LocationOption[]
+  error?: string
+  onChange: (value: string) => void
+}
+
+/**
+ * Renders one backend-configured buyer field without owning form state. The RN
+ * analogue of the web `BuyerField`: the web `<select>`/`<option>` become the
+ * native `../ui/Select` sheet; the Instagram field stays a text `Input`.
+ */
+export const BuyerField: FC<BuyerFieldProps> = ({
+  field,
+  value,
+  countries,
+  error,
+  onChange,
+}) => {
+  const invalid = error !== undefined && error !== null
+
+  if (field.kind === 'gender') {
+    const options: SelectOption[] = [
+      { label: 'Male', value: 'M' },
+      { label: 'Female', value: 'F' },
+    ]
+    return (
+      <Field label={field.label} required={field.required} error={error}>
+        <Select
+          value={value || undefined}
+          onChange={onChange}
+          options={options}
+          placeholder="— select —"
+          invalid={invalid}
+        />
+      </Field>
+    )
+  }
+
+  if (field.kind === 'nationality') {
+    const options: SelectOption[] = countries.map((country) => ({
+      label: country.name,
+      value: String(country.id),
+    }))
+    return (
+      <Field label={field.label} required={field.required} error={error}>
+        <Select
+          value={value || undefined}
+          onChange={onChange}
+          options={options}
+          placeholder="— select —"
+          invalid={invalid}
+        />
+      </Field>
+    )
+  }
+
+  return (
+    <Field label={field.label} required={field.required} error={error}>
+      <Input
+        placeholder="@handle or profile URL"
+        value={value}
+        onChangeText={onChange}
+        autoCapitalize="none"
+        invalid={invalid}
+      />
+    </Field>
+  )
+}

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

package/src/sections/billing/TicketHoldersCard.tsx

@@ -0,0 +1,123 @@
+import React, { type FC, type ReactNode } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import { Field, Input } from '../../ui/Field'
+import { BodyText, Card, SectionHeader } from '../../ui/primitives'
+import type { BillingFieldError, HolderDraft } from './types'
+
+interface TicketHoldersCardProps {
+  holders: HolderDraft[]
+  holderNamesRequired: boolean
+  collectHolderContact: boolean
+  fieldError: BillingFieldError
+  renderCustomFields: (holder: HolderDraft, index: number) => ReactNode
+  patchHolder: (index: number, patch: Partial<HolderDraft>) => void
+}
+
+/**
+ * Ticket-holder card kept separate from buyer billing for parity and reuse. The
+ * RN analogue of the web `TicketHoldersCard`: the web `PhoneInput` lib becomes a
+ * plain `Input` with `keyboardType="phone-pad"`.
+ */
+export const TicketHoldersCard: FC<TicketHoldersCardProps> = ({
+  holders,
+  holderNamesRequired,
+  collectHolderContact,
+  fieldError,
+  renderCustomFields,
+  patchHolder,
+}) => (
+  <Card>
+    <SectionHeader title="Ticket Holders" />
+    {holders.map((holder, index) => {
+      const firstNameKey = `Ticket ${index + 1} holder first name`
+      const lastNameKey = `Ticket ${index + 1} holder last name`
+      const emailKey = `Ticket ${index + 1} holder email`
+      const phoneKey = `Ticket ${index + 1} holder phone`
+
+      return (
+        <View key={index} style={styles.holder}>
+          <BodyText style={styles.holderTitle}>Ticket {index + 1}</BodyText>
+          {holderNamesRequired ? (
+            <View style={styles.row}>
+              <View style={styles.col}>
+                <Field
+                  label="First Name"
+                  required
+                  error={fieldError(firstNameKey, 'First name is required.')}
+                >
+                  <Input
+                    accessibilityLabel={`Ticket ${index + 1}: First name`}
+                    value={holder.firstName}
+                    onChangeText={(value) => patchHolder(index, { firstName: value })}
+                    autoCapitalize="words"
+                    invalid={Boolean(fieldError(firstNameKey))}
+                  />
+                </Field>
+              </View>
+              <View style={styles.col}>
+                <Field
+                  label="Last Name"
+                  required
+                  error={fieldError(lastNameKey, 'Last name is required.')}
+                >
+                  <Input
+                    accessibilityLabel={`Ticket ${index + 1}: Last name`}
+                    value={holder.lastName}
+                    onChangeText={(value) => patchHolder(index, { lastName: value })}
+                    autoCapitalize="words"
+                    invalid={Boolean(fieldError(lastNameKey))}
+                  />
+                </Field>
+              </View>
+            </View>
+          ) : null}
+          {collectHolderContact ? (
+            <View style={styles.row}>
+              <View style={styles.col}>
+                <Field
+                  label="Email Address"
+                  required
+                  error={fieldError(emailKey, 'Enter a valid email address.')}
+                >
+                  <Input
+                    accessibilityLabel={`Ticket ${index + 1}: Email address`}
+                    value={holder.email}
+                    onChangeText={(value) => patchHolder(index, { email: value })}
+                    keyboardType="email-address"
+                    autoCapitalize="none"
+                    invalid={Boolean(fieldError(emailKey))}
+                  />
+                </Field>
+              </View>
+              <View style={styles.col}>
+                <Field
+                  label="Phone"
+                  required
+                  error={fieldError(phoneKey, 'Enter a valid phone number.')}
+                >
+                  {/* Native: plain phone-pad Input in place of web's PhoneInput lib. */}
+                  <Input
+                    accessibilityLabel={`Ticket ${index + 1}: Phone`}
+                    value={holder.phone}
+                    onChangeText={(value) => patchHolder(index, { phone: value })}
+                    keyboardType="phone-pad"
+                    invalid={Boolean(fieldError(phoneKey))}
+                  />
+                </Field>
+              </View>
+            </View>
+          ) : null}
+          {renderCustomFields(holder, index)}
+        </View>
+      )
+    })}
+  </Card>
+)
+
+const styles = StyleSheet.create({
+  holder: { gap: 12 },
+  holderTitle: { fontWeight: '700' },
+  row: { flexDirection: 'row', gap: 10 },
+  col: { flex: 1 },
+})

package/src/sections/billing/types.ts

@@ -0,0 +1,10 @@
+/**
+ * The billing form shapes now live in the SDK so web and native share one
+ * model. Re-exported here to keep `./billing/types` imports working.
+ */
+export type {
+  BillingDraft,
+  HolderDraft,
+  LocationOption,
+  BillingFieldError,
+} from 'tf-checkout-shared'