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

package/src/sections/billing/TicketHoldersCard.tsx

@@ -3,6 +3,7 @@ import { PhoneInput, type CountryIso2 } from 'react-international-phone'
 
 import { Card, SectionHeader } from '../../ui/Card'
 import { Field, FieldRow, Input } from '../../ui/Field'
+import { useT } from '../../ui/I18nProvider'
 import type { BillingFieldError, HolderDraft } from './types'
 
 interface TicketHoldersCardProps {
@@ -24,96 +25,109 @@ export const TicketHoldersCard: FC<TicketHoldersCardProps> = ({
   fieldError,
   renderCustomFields,
   patchHolder,
-}) => (
-  <Card className="tf-checkout-billing__holders-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`
+}) => {
+  const t = useT()
 
-      return (
-        <div key={index} className="tf-checkout-billing__holder">
-          <div className="tf-checkout-billing__holder-title">Ticket {index + 1}</div>
-          {holderNamesRequired && (
-            <FieldRow>
-              <Field
-                label="First Name *"
-                error={fieldError(firstNameKey, 'First name is required.')}
-                invalid={Boolean(fieldError(firstNameKey))}
-              >
-                <Input
-                  value={holder.firstName}
-                  required
+  return (
+    <Card className="tf-checkout-billing__holders-card">
+      <SectionHeader title={t('billing.ticketHolders')} />
+      {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 (
+          <div key={index} className="tf-checkout-billing__holder">
+            <div className="tf-checkout-billing__holder-title">
+              {t('billing.holderTitle', { number: index + 1 })}
+            </div>
+            {holderNamesRequired && (
+              <FieldRow>
+                <Field
+                  label={t('billing.holderFirstName')}
+                  error={fieldError(firstNameKey, t('billing.firstNameRequired'))}
                   invalid={Boolean(fieldError(firstNameKey))}
-                  aria-invalid={Boolean(fieldError(firstNameKey))}
-                  onChange={(event) =>
-                    patchHolder(index, { firstName: event.target.value })
-                  }
-                />
-              </Field>
-              <Field
-                label="Last Name *"
-                error={fieldError(lastNameKey, 'Last name is required.')}
-                invalid={Boolean(fieldError(lastNameKey))}
-              >
-                <Input
-                  value={holder.lastName}
-                  required
+                >
+                  <Input
+                    value={holder.firstName}
+                    required
+                    invalid={Boolean(fieldError(firstNameKey))}
+                    aria-invalid={Boolean(fieldError(firstNameKey))}
+                    onChange={(event) =>
+                      patchHolder(index, { firstName: event.target.value })
+                    }
+                  />
+                </Field>
+                <Field
+                  label={t('billing.holderLastName')}
+                  error={fieldError(lastNameKey, t('billing.lastNameRequired'))}
                   invalid={Boolean(fieldError(lastNameKey))}
-                  aria-invalid={Boolean(fieldError(lastNameKey))}
-                  onChange={(event) =>
-                    patchHolder(index, { lastName: event.target.value })
-                  }
-                />
-              </Field>
-            </FieldRow>
-          )}
-          {collectHolderContact && (
-            <FieldRow>
-              <Field
-                label="Email Address *"
-                error={fieldError(emailKey, 'Enter a valid email address.')}
-                invalid={Boolean(fieldError(emailKey))}
-              >
-                <Input
-                  type="email"
-                  autoComplete="email"
-                  value={holder.email}
-                  required
+                >
+                  <Input
+                    value={holder.lastName}
+                    required
+                    invalid={Boolean(fieldError(lastNameKey))}
+                    aria-invalid={Boolean(fieldError(lastNameKey))}
+                    onChange={(event) =>
+                      patchHolder(index, { lastName: event.target.value })
+                    }
+                  />
+                </Field>
+              </FieldRow>
+            )}
+            {collectHolderContact && (
+              <FieldRow>
+                <Field
+                  label={t('billing.email')}
+                  error={fieldError(emailKey, t('billing.emailInvalid'))}
                   invalid={Boolean(fieldError(emailKey))}
-                  aria-invalid={Boolean(fieldError(emailKey))}
-                  onChange={(event) => patchHolder(index, { email: event.target.value })}
-                />
-              </Field>
-              <Field
-                label="Phone *"
-                error={fieldError(phoneKey, 'Enter a valid phone number.')}
-                invalid={Boolean(fieldError(phoneKey))}
-              >
-                <PhoneInput
-                  className="tf-checkout-phone"
-                  inputClassName={`tf-checkout-input tf-checkout-phone__input${
-                    fieldError(phoneKey) ? ' tf-checkout-input--invalid' : ''
-                  }`}
-                  defaultCountry={phoneCountry}
-                  disableDialCodePrefill
-                  value={holder.phone}
-                  required
-                  inputProps={{
-                    autoComplete: 'tel',
-                    'aria-label': phoneKey,
-                    'aria-invalid': Boolean(fieldError(phoneKey)),
-                  }}
-                  onChange={(phone) => patchHolder(index, { phone })}
-                />
-              </Field>
-            </FieldRow>
-          )}
-          {renderCustomFields(holder, index)}
-        </div>
-      )
-    })}
-  </Card>
-)
+                >
+                  <Input
+                    type="email"
+                    autoComplete="email"
+                    value={holder.email}
+                    required
+                    invalid={Boolean(fieldError(emailKey))}
+                    aria-invalid={Boolean(fieldError(emailKey))}
+                    onChange={(event) =>
+                      patchHolder(index, { email: event.target.value })
+                    }
+                  />
+                </Field>
+                <Field
+                  label={t('billing.phone')}
+                  error={fieldError(phoneKey, t('billing.phoneInvalid'))}
+                  invalid={Boolean(fieldError(phoneKey))}
+                >
+                  <PhoneInput
+                    className="tf-checkout-phone"
+                    inputClassName={`tf-checkout-input tf-checkout-phone__input${
+                      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
+                    inputProps={{
+                      autoComplete: 'tel',
+                      'aria-label': phoneKey,
+                      'aria-invalid': Boolean(fieldError(phoneKey)),
+                    }}
+                    onChange={(phone) => patchHolder(index, { phone })}
+                  />
+                </Field>
+              </FieldRow>
+            )}
+            {renderCustomFields(holder, index)}
+          </div>
+        )
+      })}
+    </Card>
+  )
+}

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

package/src/ui/CheckoutProvider.tsx

@@ -148,7 +148,11 @@ export const CheckoutProvider: FC<CheckoutProviderProps> = ({
       // binding); absent ⇒ the self-providing branch owns it. The choice is
       // static per mount, so the two branches never swap and violate the rules
       // of hooks.
-      value ? <CheckoutRoot checkout={value} {...rest} /> : <SelfProvidedCheckout {...rest} />
+      value ? (
+        <CheckoutRoot checkout={value} {...rest} />
+      ) : (
+        <SelfProvidedCheckout {...rest} />
+      )
     }
   </I18nProvider>
 )

package/src/ui/InstallmentPicker.tsx

@@ -10,8 +10,10 @@ import React, { useCallback, useState } from 'react'
 import type { InstallmentOffer } from 'tf-checkout-shared'
 
 import { Button } from './Button'
+import { useT } from './I18nProvider'
 
 export const useInstallmentPicker = () => {
+  const t = useT()
   const [pending, setPending] = useState<{
     offers: InstallmentOffer[]
     resolve: (o: InstallmentOffer | null) => void
@@ -34,10 +36,10 @@ export const useInstallmentPicker = () => {
     <div
       className="tf-checkout-installments"
       role="dialog"
-      aria-label="Choose installments"
+      aria-label={t('payment.chooseInstallments')}
     >
       <div className="tf-checkout-installments__box">
-        <strong>Pay in installments?</strong>
+        <strong>{t('payment.payInInstallments')}</strong>
         <div className="tf-checkout-installments__list">
           {pending.offers.map((o, i) => (
             <button

package/src/ui/PaymentMethods.tsx

@@ -9,15 +9,13 @@
 import React, { type FC, type ReactNode } from 'react'
 
 import { cx } from './cx'
+import { useT } from './I18nProvider'
 import { Field, Input } from './Field'
 
 // The method descriptor + row shape live in the SDK so both platforms render
 // the SAME option list. Imported for local use and re-exported for consumers
 // that already import them from here.
-import type {
-  PaymentMethodId,
-  PaymentMethodOption,
-} from 'tf-checkout-shared'
+import type { PaymentMethodId, PaymentMethodOption } from 'tf-checkout-shared'
 
 export type { PaymentMethodId, PaymentMethodOption }
 
@@ -55,79 +53,87 @@ export const PaymentMethods: FC<PaymentMethodsProps> = ({
   children,
   inputSlotFor,
   className,
-}) => (
-  <div
-    className={cx('tf-checkout-payment__methods', className)}
-    role="radiogroup"
-    aria-label="Payment method"
-  >
-    {options.map((o) => {
-      const isSelected = o.value === selected
-      const extraValue =
-        o.extra === 'phoneNumber'
-          ? extraValues[o.value]?.phoneNumber
-          : extraValues[o.value]?.cashtag
-      const extraInvalid =
-        Boolean(isSelected && o.extra && showValidation) && !extraValue?.trim()
-      return (
-        <label
-          key={o.value}
-          className={cx(
-            'tf-checkout-payment__method',
-            isSelected && 'tf-checkout-payment__method--selected'
-          )}
-        >
-          <span className="tf-checkout-payment__method-head">
-            <input
-              type="radio"
-              name="tf-pay-method"
-              className="tf-checkout-payment__method-radio"
-              checked={isSelected}
-              onChange={() => onSelect(o.value)}
-            />
-            {o.iconUrl && (
-              <img className="tf-checkout-payment__method-icon" src={o.iconUrl} alt="" />
+}) => {
+  const t = useT()
+
+  return (
+    <div
+      className={cx('tf-checkout-payment__methods', className)}
+      role="radiogroup"
+      aria-label={t('payment.method')}
+    >
+      {options.map((o) => {
+        const isSelected = o.value === selected
+        const extraValue =
+          o.extra === 'phoneNumber'
+            ? extraValues[o.value]?.phoneNumber
+            : extraValues[o.value]?.cashtag
+        const extraInvalid =
+          Boolean(isSelected && o.extra && showValidation) && !extraValue?.trim()
+        return (
+          <label
+            key={o.value}
+            className={cx(
+              'tf-checkout-payment__method',
+              isSelected && 'tf-checkout-payment__method--selected'
             )}
-            <span className="tf-checkout-payment__method-label">{o.label}</span>
-          </span>
+          >
+            <span className="tf-checkout-payment__method-head">
+              <input
+                type="radio"
+                name="tf-pay-method"
+                className="tf-checkout-payment__method-radio"
+                checked={isSelected}
+                onChange={() => onSelect(o.value)}
+              />
+              {o.iconUrl && (
+                <img
+                  className="tf-checkout-payment__method-icon"
+                  src={o.iconUrl}
+                  alt=""
+                />
+              )}
+              <span className="tf-checkout-payment__method-label">{o.label}</span>
+            </span>
 
-          {isSelected && (o.value === inputSlotFor || o.extra) && (
-            <div className="tf-checkout-payment__method-body">
-              {o.value === inputSlotFor && children}
-              {o.extra && (
-                <Field
-                  label={`${EXTRA_LABEL[o.extra]} *`}
-                  error={extraInvalid ? 'This field is required.' : undefined}
-                  invalid={extraInvalid}
-                >
-                  <Input
-                    inputMode={o.extra === 'phoneNumber' ? 'tel' : 'text'}
-                    required
+            {isSelected && (o.value === inputSlotFor || o.extra) && (
+              <div className="tf-checkout-payment__method-body">
+                {o.value === inputSlotFor && children}
+                {o.extra && (
+                  <Field
+                    label={`${EXTRA_LABEL[o.extra]} *`}
+                    error={extraInvalid ? t('billing.fieldRequired') : undefined}
                     invalid={extraInvalid}
-                    aria-invalid={extraInvalid}
-                    placeholder={
-                      o.extra === 'phoneNumber' ? 'e.g. 081234567890' : '$cashtag'
-                    }
-                    value={
-                      o.extra === 'phoneNumber'
-                        ? (extraValues[o.value]?.phoneNumber ?? '')
-                        : (extraValues[o.value]?.cashtag ?? '')
-                    }
-                    onChange={(e) =>
-                      onExtraChange(
-                        o.value,
+                  >
+                    <Input
+                      inputMode={o.extra === 'phoneNumber' ? 'tel' : 'text'}
+                      required
+                      invalid={extraInvalid}
+                      aria-invalid={extraInvalid}
+                      placeholder={
+                        o.extra === 'phoneNumber' ? 'e.g. 081234567890' : '$cashtag'
+                      }
+                      value={
                         o.extra === 'phoneNumber'
-                          ? { phoneNumber: e.target.value }
-                          : { cashtag: e.target.value }
-                      )
-                    }
-                  />
-                </Field>
-              )}
-            </div>
-          )}
-        </label>
-      )
-    })}
-  </div>
-)
+                          ? (extraValues[o.value]?.phoneNumber ?? '')
+                          : (extraValues[o.value]?.cashtag ?? '')
+                      }
+                      onChange={(e) =>
+                        onExtraChange(
+                          o.value,
+                          o.extra === 'phoneNumber'
+                            ? { phoneNumber: e.target.value }
+                            : { cashtag: e.target.value }
+                        )
+                      }
+                    />
+                  </Field>
+                )}
+              </div>
+            )}
+          </label>
+        )
+      })}
+    </div>
+  )
+}

package/src/ui/TimerBanner.tsx

@@ -7,6 +7,7 @@
 import React, { useState, type FC } from 'react'
 
 import { cx } from './cx'
+import { useT } from './I18nProvider'
 
 const clock = (s: number) => {
   const m = String(Math.floor(s / 60)).padStart(2, '0')
@@ -25,9 +26,10 @@ export interface TimerBannerProps {
 export const TimerBanner: FC<TimerBannerProps> = ({
   seconds,
   urgentAt = 60,
-  message = 'Please complete your purchase before the timer reaches zero.',
+  message,
   className,
 }) => {
+  const t = useT()
   const [dismissed, setDismissed] = useState(false)
   if (seconds === undefined || seconds <= 0 || dismissed) return null
   const urgent = seconds <= urgentAt
@@ -40,12 +42,14 @@ export const TimerBanner: FC<TimerBannerProps> = ({
         className
       )}
     >
-      <span className="tf-checkout-timerbanner__msg">{message}</span>
+      <span className="tf-checkout-timerbanner__msg">
+        {message ?? t('timer.completePurchase')}
+      </span>
       <span className="tf-checkout-timerbanner__clock">{clock(seconds)}</span>
       <button
         type="button"
         className="tf-checkout-timerbanner__close"
-        aria-label="Dismiss"
+        aria-label={t('common.dismiss')}
         onClick={() => setDismissed(true)}
       >
         ×