tf-checkout-react 2.0.0-beta.0 → 2.0.0-beta.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/auth/AuthModal.tsx

@@ -62,6 +62,13 @@ export const AuthModal: FC<AuthModalProps> = ({
   const previouslyFocused = useRef<HTMLElement | null>(null)
   const submittingRef = useRef(auth.isSubmitting)
   submittingRef.current = auth.isSubmitting
+  // Consumers pass `onClose` as an inline arrow, so its identity changes on
+  // every parent render — and the parent re-renders once a second while the
+  // reservation timer counts down. Held in a ref so the setup effect below can
+  // depend on `open` alone; with `onClose` in its deps it tore down and re-ran
+  // each tick, stealing focus back to the first field mid-typing.
+  const onCloseRef = useRef(onClose)
+  onCloseRef.current = onClose
 
   useEffect(() => {
     if (!open) return
@@ -83,7 +90,7 @@ export const AuthModal: FC<AuthModalProps> = ({
     initialFocus?.focus()
 
     const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && !submittingRef.current) onClose()
+      if (event.key === 'Escape' && !submittingRef.current) onCloseRef.current()
       if (event.key !== 'Tab') return
       const elements = focusable()
       if (elements.length === 0) {
@@ -107,7 +114,7 @@ export const AuthModal: FC<AuthModalProps> = ({
       document.body.style.overflow = previousOverflow
       previouslyFocused.current?.focus()
     }
-  }, [onClose, open])
+  }, [open])
 
   if (!open) return null
 

package/src/sections/BillingInfo.tsx

@@ -38,6 +38,7 @@ import { CustomFieldInput } from '../ui/CustomFields'
 import { Checkbox, Field, FieldRow, Input } from '../ui/Field'
 import { BillingAddressFields } from './billing/BillingAddressFields'
 import { BuyerField } from './billing/BuyerField'
+import { DOB_MIN, isBlankPhone, toDateInputValue, todayISO } from './billing/fieldRules'
 import { TicketHoldersCard } from './billing/TicketHoldersCard'
 import type { BillingDraft, HolderDraft } from './billing/types'
 
@@ -199,7 +200,8 @@ export const BillingInfo: FC<BillingInfoProps> = ({
         email: prev.email || profileBilling.email || '',
         confirmEmail:
           prev.confirmEmail || (checkout.isLoggedIn ? profileBilling.email : '') || '',
-        phone: prev.phone || profileBilling.phone,
+        phone:
+          (isBlankPhone(prev.phone) ? undefined : prev.phone) || profileBilling.phone,
         streetAddress: prev.streetAddress || profileBilling.streetAddress,
         city: prev.city || profileBilling.city,
         zip: prev.zip || profileBilling.zip,
@@ -209,6 +211,16 @@ export const BillingInfo: FC<BillingInfoProps> = ({
       const keys = Object.keys(next) as (keyof BillingDraft)[]
       return keys.every((k) => next[k] === prev[k]) ? prev : next
     })
+    // Date of birth lives outside `billing`, so it has to be seeded here too —
+    // and it has to be here rather than in its own effect or in the useState
+    // initialiser: the initialiser runs before the profile resolves, and a
+    // separate effect would re-fire and overwrite the buyer, since the live
+    // commit below depends on `dob`. This effect already runs exactly once.
+    setDob((prev) => {
+      if (prev) return prev
+      const { dobYear, dobMonth, dobDay } = profileBilling
+      return toDateInputValue(dobYear, dobMonth, dobDay) ?? prev
+    })
   }, [profile.data, checkout.isLoggedIn])
 
   // Resize holders to the slot count, preserving typed values; tag ticket type.
@@ -297,13 +309,22 @@ export const BillingInfo: FC<BillingInfoProps> = ({
       countries.find((country) => country.code?.toLowerCase() === 'us')
     if (!preferred) return
     countryDefaultApplied.current = true
-    setBilling((current) => ({
-      ...current,
-      countryId: String(preferred.id),
-      countryCode: preferred.code?.toUpperCase(),
-      stateId: undefined,
-      stateCode: undefined,
-    }))
+    setBilling((current) => {
+      // The profile-seed effect above can run in this same commit, so the
+      // `billing` this effect closed over is stale — it still shows no country
+      // even though the seed just supplied one (with its state). Re-check the
+      // live value here: without it the default overwrote the seeded country
+      // and blanked `stateId`, which is why a returning buyer's State/County
+      // came back empty while every other saved field prefilled.
+      if (current.countryId) return current
+      return {
+        ...current,
+        countryId: String(preferred.id),
+        countryCode: preferred.code?.toUpperCase(),
+        stateId: undefined,
+        stateCode: undefined,
+      }
+    })
   }, [
     billing.countryId,
     countries,
@@ -342,28 +363,41 @@ export const BillingInfo: FC<BillingInfoProps> = ({
   const patchHolder = (i: number, patch: Partial<HolderDraft>) =>
     setHolders((hs) => hs.map((h, j) => (j === i ? { ...h, ...patch } : h)))
 
+  const dobMax = useMemo(todayISO, [])
   const [dobYear, dobMonth, dobDay] = dob ? dob.split('-').map(Number) : []
+  // A dial code on its own is not a phone number — see `isBlankPhone`.
+  const buyerPhone = isBlankPhone(billing.phone) ? undefined : billing.phone
   const committedBilling: CheckoutBilling = {
     ...checkout.billing,
     ...billing,
+    phone: buyerPhone,
     stateRequired: gates.showAddress && Boolean(billing.countryId) && states.length > 0,
     dataCapture,
     dobDay,
     dobMonth,
     dobYear,
   }
-  const committedHolders: CheckoutHolder[] = holders.map((holder) => ({
-    firstName: holderNamesRequired
-      ? holder.firstName
-      : holder.firstName || billing.firstName,
-    lastName: holderNamesRequired ? holder.lastName : holder.lastName || billing.lastName,
-    email:
-      showHolders && collectHolderContact ? holder.email : holder.email || billing.email,
-    phone:
-      showHolders && collectHolderContact ? holder.phone : holder.phone || billing.phone,
-    ticketTypeId: holder.ticketTypeId,
-    ticketDataCapture: holder.ticketDataCapture,
-  }))
+  const committedHolders: CheckoutHolder[] = holders.map((holder) => {
+    const holderPhone = isBlankPhone(holder.phone) ? '' : holder.phone
+    return {
+      firstName: holderNamesRequired
+        ? holder.firstName
+        : holder.firstName || billing.firstName,
+      lastName: holderNamesRequired
+        ? holder.lastName
+        : holder.lastName || billing.lastName,
+      email:
+        showHolders && collectHolderContact
+          ? holder.email
+          : holder.email || billing.email,
+      phone:
+        showHolders && collectHolderContact
+          ? holderPhone
+          : holderPhone || buyerPhone || '',
+      ticketTypeId: holder.ticketTypeId,
+      ticketDataCapture: holder.ticketDataCapture,
+    }
+  })
   const missingDetails = missingCheckoutDetails(
     {
       billing: committedBilling,
@@ -584,6 +618,13 @@ export const BillingInfo: FC<BillingInfoProps> = ({
                 fieldError('Valid phone number') ? ' tf-checkout-input--invalid' : ''
               }`}
               defaultCountry={phoneCountry}
+              // The flag owns the country; the input holds the national number
+              // only. Without `disableDialCodeAndPrefix` the empty field still
+              // expects a full international number, so a Mexican buyer typing
+              // "5512345678" has it read as a dial code and the country guess
+              // flips them to Brazil (+55) — submitting the wrong code.
+              disableDialCodeAndPrefix
+              showDisabledDialCodeAndPrefix
               disableDialCodePrefill
               value={billing.phone ?? ''}
               required={gates.phoneRequired}
@@ -616,6 +657,12 @@ export const BillingInfo: FC<BillingInfoProps> = ({
               type="date"
               value={dob}
               required
+              // A date input with no bounds lets the browser's year segment run
+              // to six digits ("202555") and accept dates in the future. The
+              // range both caps the year at four digits and keeps the value a
+              // date someone could actually have been born on.
+              min={DOB_MIN}
+              max={dobMax}
               invalid={Boolean(dobError)}
               aria-invalid={Boolean(dobError)}
               onChange={(e) => setDob(e.target.value)}

package/src/sections/Payment.tsx

@@ -133,6 +133,20 @@ export const Payment: FC<PaymentProps> = ({
   const isFree = bd != null && Number(bd.total) === 0
   const isXendit = checkout.gateway === 'xendit'
 
+  // Whether the server put OXXO on the deferred Elements config. This is
+  // `Checkout::get_payment_method_types()`'s verdict — the event's own OXXO
+  // flag, the voucher-expiry window against the event date, an MX Stripe
+  // account, a MXN 10–10,000 total, and no manual capture. Several of those
+  // inputs (the Stripe account's country, per-ticket ID verification, the
+  // event's timezone) have no client-side equivalent, so this must never be
+  // re-derived here. Absent config (free carts, Xendit, Razorpay) → false,
+  // which is what the legacy checkout does too.
+  const serverMethodTypes = (
+    checkout.stripeElementsConfig as { paymentMethodTypes?: unknown } | undefined
+  )?.paymentMethodTypes
+  const offersOxxo =
+    Array.isArray(serverMethodTypes) && serverMethodTypes.includes('oxxo')
+
   // Build the selectable method rows from gateway + probe + snapshot.
   const options = useMemo<PaymentMethodOption[]>(() => {
     if (isFree || !methods) return []
@@ -167,8 +181,9 @@ export const Payment: FC<PaymentProps> = ({
           value: 'paymentPlan',
           label: 'Payment plan',
         })
-      // OXXO cash voucher — Mexico only, and never listed in redirect methods.
-      if (checkout.breakdown?.currencyCode === 'MXN')
+      // OXXO cash voucher. `oxxo` is deliberately absent from
+      // SUPPORTED_REDIRECT_METHODS, so it never arrives via the loop above.
+      if (offersOxxo)
         out.push({ id: { kind: 'oxxo' }, value: 'oxxo', label: 'OXXO (pay in cash)' })
     }
     if (methods.paypal)
@@ -181,7 +196,7 @@ export const Payment: FC<PaymentProps> = ({
     checkout.gateway,
     checkout.redirectPaymentMethods,
     checkout.paymentPlan,
-    checkout.breakdown,
+    offersOxxo,
   ])
 
   // Default the selection to the first row once options exist.
@@ -204,7 +219,8 @@ export const Payment: FC<PaymentProps> = ({
    * confirmer with "No card element registered". Always gate on the card.
    */
   const reuseSavedCard = Boolean(savedLast4) && useSavedCard
-  const usesCardDetails = !isFree && (isCardSelected || (isPlanSelected && !reuseSavedCard))
+  const usesCardDetails =
+    !isFree && (isCardSelected || (isPlanSelected && !reuseSavedCard))
   // Stripe's CardElement renders its own inline "Card number is invalid" text, so
   // the pay handler can stay quiet and just scroll to it. Xendit's card form is
   // three plain inputs with no error slot — there, the message MUST be shown or

package/src/sections/billing/TicketHoldersCard.tsx

@@ -98,6 +98,11 @@ export const TicketHoldersCard: FC<TicketHoldersCardProps> = ({
                     fieldError(phoneKey) ? ' tf-checkout-input--invalid' : ''
                   }`}
                   defaultCountry={phoneCountry}
+                  // Matches the buyer phone field in ../BillingInfo.tsx — see
+                  // the note there on why the dial code must stay out of the
+                  // input.
+                  disableDialCodeAndPrefix
+                  showDisabledDialCodeAndPrefix
                   disableDialCodePrefill
                   value={holder.phone}
                   required

package/src/sections/billing/fieldRules.ts

@@ -0,0 +1,43 @@
+/**
+ * Small value rules shared by the billing form's inputs. They live here rather
+ * than in `../BillingInfo.tsx` so that file stays inside the checkout
+ * architecture budget, and because each one encodes a non-obvious constraint
+ * worth stating once.
+ */
+
+/**
+ * The phone control keeps the dial code outside the input, so it reports a bare
+ * `"+52"` the moment it mounts — before the buyer has typed anything. A string
+ * that short is a country prefix, not a number, so treat it as blank: it must
+ * not out-rank a saved profile number, and it must never reach the API as a
+ * phone in its own right.
+ */
+export const isBlankPhone = (phone?: string) =>
+  !phone || /^\+?\d{0,4}$/.test(phone.trim())
+
+/** Earliest date of birth the form accepts. Nobody alive predates it. */
+export const DOB_MIN = '1900-01-01'
+
+/**
+ * Today as `yyyy-mm-dd` in the buyer's own timezone. Built from the local
+ * calendar parts rather than `toISOString()`, which would roll over to
+ * tomorrow's date for anyone east of Greenwich late in the day.
+ */
+export const todayISO = () => {
+  const now = new Date()
+  return [
+    now.getFullYear(),
+    String(now.getMonth() + 1).padStart(2, '0'),
+    String(now.getDate()).padStart(2, '0'),
+  ].join('-')
+}
+
+/** `dobDay/dobMonth/dobYear` → the `yyyy-mm-dd` a date input expects. */
+export const toDateInputValue = (
+  year?: number,
+  month?: number,
+  day?: number
+): string | undefined =>
+  year && month && day
+    ? `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
+    : undefined