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

package/src/sections/BillingInfo.tsx

@@ -25,6 +25,16 @@ import React, {
 import { Linking, Pressable, StyleSheet, Text, View } from 'react-native'
 
 import {
+  billingDobIso,
+  changeBillingPhone,
+  changeBillingField,
+  billingDraftFrom,
+  billingFilledHolderIndexes,
+  holderDraftsForSlots,
+  holderDraftsFrom,
+  holderDraftsReloaded,
+  holderDraftsMirroringBuyer,
+  patchedHolderDraft,
   hooks,
   mapProfileToBilling,
   missingCheckoutDetails,
@@ -43,9 +53,11 @@ import {
 } from '../ui/CheckoutProvider'
 import { CustomFieldInput } from '../ui/CustomFields'
 import { Checkbox, Field, Input } from '../ui/Field'
+import { FrozenFields } from '../ui/Frozen'
 import { Button, Card, ErrorText, SectionHeader } from '../ui/primitives'
 import type { ResolvedTheme } from '../ui/theme'
 import { BillingAddressFields } from './billing/BillingAddressFields'
+import { BillingPhoneIdentity } from './billing/PhoneIdentity'
 import { BuyerField } from './billing/BuyerField'
 import { TicketHoldersCard } from './billing/TicketHoldersCard'
 import type { BillingDraft, HolderDraft } from './billing/types'
@@ -110,52 +122,42 @@ export const BillingInfo: FC<BillingInfoProps> = ({
   const validation = useCheckoutValidation()
   const theme = useTheme()
   const s = useStyles(theme)
-  const profile = hooks.useProfile({ retry: false })
+  const profile = hooks.useCheckoutBuyerProfile(eventId)
   const event = hooks.useEvent(eventId)
   // No onContinue ⇒ this is one combined form (inside <EmbeddedCheckout/>): mirror the
   // fields into the engine live and drop the "continue" button, so the buyer
   // fills billing + pays with ONE button — the way the old checkout flowed.
   const combined = !onContinue
 
-  const [billing, setBilling] = useState<BillingDraft>({
-    firstName: checkout.billing?.firstName ?? '',
-    lastName: checkout.billing?.lastName ?? '',
-    email: checkout.billing?.email ?? '',
-    confirmEmail: checkout.billing?.confirmEmail ?? '',
-    phone: checkout.billing?.phone,
-    streetAddress: checkout.billing?.streetAddress,
-    city: checkout.billing?.city,
-    zip: checkout.billing?.zip,
-    countryId: checkout.billing?.countryId,
-    stateId: checkout.billing?.stateId,
-    countryCode: checkout.billing?.countryCode,
-    stateCode: checkout.billing?.stateCode,
-    nationality: checkout.billing?.nationality,
-    gender: checkout.billing?.gender,
-    instagramHandle: checkout.billing?.instagramHandle,
-  })
+  const [billing, setBilling] = useState<BillingDraft>(() =>
+    billingDraftFrom(checkout.billing)
+  )
   const [dataCapture, setDataCapture] = useState<CustomFieldValues>(
     checkout.billing?.dataCapture ?? {}
   )
   const [holders, setHolders] = useState<HolderDraft[]>(() =>
-    checkout.holders.map((holder) => ({
-      firstName: holder.firstName,
-      lastName: holder.lastName,
-      email: holder.email,
-      phone: holder.phone ?? '',
-      ticketTypeId: holder.ticketTypeId,
-      ticketDataCapture: holder.ticketDataCapture ?? {},
-    }))
+    holderDraftsFrom(checkout.holders, checkout.backfilledHolderIndexes)
   )
   const [consent, setConsent] = useState({ ttfOptIn: false, brandOptIn: false })
-  const [dob, setDob] = useState(() => {
-    const b = checkout.billing
-    if (!b?.dobDay || !b.dobMonth || !b.dobYear) return ''
-    return `${b.dobYear}-${String(b.dobMonth).padStart(2, '0')}-${String(
-      b.dobDay
-    ).padStart(2, '0')}`
-  }) // ISO yyyy-mm-dd
+  const [dob, setDob] = useState(() => billingDobIso(checkout.billing)) // ISO yyyy-mm-dd
+  // A placement that ended without a charge: show what a retry submits.
+  hooks.useOnOrderReleased(checkout.orderFixed, () => {
+    setBilling(billingDraftFrom(checkout.billing))
+    setDataCapture(checkout.billing?.dataCapture ?? {})
+    setDob(billingDobIso(checkout.billing))
+    setConsent(checkout.consent)
+    setHolders((prev) =>
+      holderDraftsReloaded(prev, checkout.holders, checkout.backfilledHolderIndexes)
+    )
+  })
   const restoredHolders = useRef(checkout.holders)
+  // Another event: its holders and custom answers start empty; the buyer's
+  // own details stay.
+  hooks.useOnEventChange(checkout.eventId, () => {
+    restoredHolders.current = []
+    setHolders([])
+    setDataCapture({})
+  })
   const profileSeeded = useRef(false)
   const countryDefaultApplied = useRef(Boolean(checkout.billing?.countryId))
 
@@ -233,38 +235,21 @@ export const BillingInfo: FC<BillingInfoProps> = ({
 
   // Resize holders to the slot count, preserving typed values; tag ticket type.
   useEffect(() => {
-    setHolders((prev) =>
-      slots.map((slot, i) => ({
-        firstName: prev[i]?.firstName ?? restoredHolders.current[i]?.firstName ?? '',
-        lastName: prev[i]?.lastName ?? restoredHolders.current[i]?.lastName ?? '',
-        email: prev[i]?.email ?? restoredHolders.current[i]?.email ?? '',
-        phone: prev[i]?.phone ?? restoredHolders.current[i]?.phone ?? '',
-        ticketDataCapture:
-          prev[i]?.ticketDataCapture ??
-          restoredHolders.current[i]?.ticketDataCapture ??
-          {},
-        ticketTypeId: slot.ticketTypeId,
-        ticketName: slot.ticketName,
-      }))
-    )
+    setHolders((prev) => holderDraftsForSlots(prev, slots, restoredHolders.current))
   }, [slots])
 
   // Match the storefront: ticket 1 silently starts as the buyer. The legacy
   // checkout has no extra "use buyer details" control.
   useEffect(() => {
     if (!showHolders) return
+    // Ticket 1 stops copying the buyer once the buyer edits it.
     setHolders((prev) =>
-      prev.map((holder, index) =>
-        index === 0
-          ? {
-              ...holder,
-              firstName: billing.firstName,
-              lastName: billing.lastName,
-              email: billing.email,
-              phone: billing.phone ?? '',
-            }
-          : holder
-      )
+      holderDraftsMirroringBuyer(prev, {
+        firstName: billing.firstName,
+        lastName: billing.lastName,
+        email: billing.email,
+        phone: billing.phone,
+      })
     )
   }, [showHolders, billing.firstName, billing.lastName, billing.email, billing.phone])
 
@@ -357,10 +342,10 @@ export const BillingInfo: FC<BillingInfoProps> = ({
   }, [billing.stateId, billing.stateCode, states])
 
   const setB = (k: keyof BillingDraft) => (value: string) =>
-    setBilling((b) => ({ ...b, [k]: value }))
+    setBilling((b) => changeBillingField(b, k, value))
 
   const patchHolder = (i: number, patch: Partial<HolderDraft>) =>
-    setHolders((hs) => hs.map((h, j) => (j === i ? { ...h, ...patch } : h)))
+    setHolders((hs) => hs.map((h, j) => (j === i ? patchedHolderDraft(h, patch) : h)))
 
   const [dobYear, dobMonth, dobDay] = dob ? dob.split('-').map(Number) : []
   const committedBilling: CheckoutBilling = {
@@ -413,7 +398,11 @@ export const BillingInfo: FC<BillingInfoProps> = ({
 
   const commit = () => {
     commitBilling(committedBilling)
-    commitHolders(committedHolders)
+    // Holders that take the buyer's details are marked, so a guardian's
+    // signature for a child counts on them (billingFilledHolderIndexes).
+    commitHolders(committedHolders, {
+      backfilled: billingFilledHolderIndexes(holders, { holderNamesRequired }),
+    })
     if (ttfOptInLabel || brandOptInLabel) commitConsent(consent)
   }
 
@@ -477,8 +466,23 @@ export const BillingInfo: FC<BillingInfoProps> = ({
 
   const privacyInvalid = (showPrivacyError || showValidation) && !consent.ttfOptIn
 
+  const continueButton = !combined ? (
+    <Button
+      onPress={() => {
+        if (!complete) {
+          validation.requestValidation()
+          return
+        }
+        commit()
+        onContinue?.()
+      }}
+    >
+      {buttonLabel}
+    </Button>
+  ) : null
+
   return (
-    <>
+    <FrozenFields frozen={checkout.orderFixed}>
       <Card>
         <SectionHeader title={heading} />
 
@@ -491,6 +495,14 @@ export const BillingInfo: FC<BillingInfoProps> = ({
           </View>
         ) : null}
 
+        {gates.phoneFirstCheckout && !checkout.isLoggedIn ? (
+          <BillingPhoneIdentity
+            billing={billing}
+            setBilling={setBilling}
+            eventId={eventId ?? checkout.eventId ?? undefined}
+            whatsappAvailable={Boolean(gates.phoneFirstWhatsapp)}
+          />
+        ) : null}
         <View style={s.row}>
           <View style={s.col}>
             <Field error={fieldError('First name', 'First name is required.')}>
@@ -598,7 +610,9 @@ export const BillingInfo: FC<BillingInfoProps> = ({
             <Input
               placeholder="Phone number"
               value={billing.phone ?? ''}
-              onChangeText={(v) => setBilling((current) => ({ ...current, phone: v }))}
+              onChangeText={(v) =>
+                setBilling((current) => changeBillingPhone(current, v))
+              }
               keyboardType="phone-pad"
               invalid={Boolean(fieldError('Valid phone number'))}
             />
@@ -688,20 +702,7 @@ export const BillingInfo: FC<BillingInfoProps> = ({
           />
         ) : null}
 
-        {!combined ? (
-          <Button
-            onPress={() => {
-              if (!complete) {
-                validation.requestValidation()
-                return
-              }
-              commit()
-              onContinue?.()
-            }}
-          >
-            {buttonLabel}
-          </Button>
-        ) : null}
+        {!showHolders ? continueButton : null}
       </Card>
 
       {showHolders ? (
@@ -730,7 +731,8 @@ export const BillingInfo: FC<BillingInfoProps> = ({
           }
         />
       ) : null}
-    </>
+      {showHolders ? continueButton : null}
+    </FrozenFields>
   )
 }