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

package/package.json

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

package/src/EmbeddedCheckout.tsx

@@ -372,7 +372,12 @@ export const EmbeddedCheckout: FC<EmbeddedCheckoutProps> = ({
   messages,
   className,
 }) => (
-  <CheckoutProvider theme={theme} locale={locale} messages={messages} className={className}>
+  <CheckoutProvider
+    theme={theme}
+    locale={locale}
+    messages={messages}
+    className={className}
+  >
     <Flow
       key={eventId}
       eventId={eventId}

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
 
@@ -115,7 +122,7 @@ export const AuthModal: FC<AuthModalProps> = ({
     if (event.target === event.currentTarget && !auth.isSubmitting) onClose()
   }
   const isPasswordReset = auth.view === 'forgot-password'
-  const title = isPasswordReset ? 'Password reset' : 'Ticket Fairy account'
+  const title = isPasswordReset ? t('auth.passwordReset') : t('auth.title')
 
   return (
     <div className={cx('tf-checkout-auth', className)} onMouseDown={closeFromBackdrop}>
@@ -153,7 +160,7 @@ export const AuthModal: FC<AuthModalProps> = ({
               )}
               onClick={() => auth.showLogin(auth.suggestedEmail)}
             >
-              Login
+              {t('auth.logIn')}
             </button>
             <button
               type="button"
@@ -165,7 +172,7 @@ export const AuthModal: FC<AuthModalProps> = ({
               )}
               onClick={() => auth.showRegister(auth.suggestedEmail)}
             >
-              Sign Up
+              {t('auth.signUp')}
             </button>
           </div>
         )}

package/src/auth/ForgotPasswordForm.tsx

@@ -47,7 +47,7 @@ export const ForgotPasswordForm: FC<ForgotPasswordFormProps> = ({
           {successMessage}
         </div>
         <Button type="button" block onClick={() => onBackToLogin(email)}>
-          Back to log in
+          {t('auth.backToLogin')}
         </Button>
       </div>
     )
@@ -55,9 +55,7 @@ export const ForgotPasswordForm: FC<ForgotPasswordFormProps> = ({
 
   return (
     <form className="tf-checkout-auth__form" onSubmit={submit} noValidate>
-      <p className="tf-checkout-auth__intro">
-        Enter your email and we’ll send you instructions to reset your password.
-      </p>
+      <p className="tf-checkout-auth__intro">{t('auth.forgotIntro')}</p>
       {error && (
         <div className="tf-checkout-auth__alert" role="alert">
           {error}
@@ -79,14 +77,14 @@ export const ForgotPasswordForm: FC<ForgotPasswordFormProps> = ({
         />
       </Field>
       <Button type="submit" block loading={loading}>
-        Send reset instructions
+        {t('auth.sendResetInstructions')}
       </Button>
       <button
         type="button"
         className="tf-checkout-auth__text-button tf-checkout-auth__back"
         onClick={() => onBackToLogin(email)}
       >
-        Back to log in
+        {t('auth.backToLogin')}
       </button>
     </form>
   )

package/src/auth/LoginForm.tsx

@@ -88,7 +88,7 @@ export const LoginForm: FC<LoginFormProps> = ({
         />
       </Field>
       <Button type="submit" block loading={loading}>
-        Login
+        {t('auth.logIn')}
       </Button>
       {allowPasswordReset && onForgotPassword && (
         <button
@@ -96,7 +96,7 @@ export const LoginForm: FC<LoginFormProps> = ({
           className="tf-checkout-auth__text-button tf-checkout-auth__forgot"
           onClick={() => onForgotPassword(email)}
         >
-          Forgot password?
+          {t('auth.forgotPassword')}
         </button>
       )}
     </form>

package/src/auth/RegisterForm.tsx

@@ -236,7 +236,7 @@ export const RegisterForm: FC<RegisterFormProps> = ({
                 onChange={(event) => setField('stateId', event.target.value)}
               >
                 <option value="">
-                  {states.length > 0 ? 'Select state / region' : 'Not required'}
+                  {states.length > 0 ? t('auth.selectState') : t('auth.notRequired')}
                 </option>
                 {states.map((state) => (
                   <option key={state.id} value={state.id}>
@@ -326,7 +326,7 @@ export const RegisterForm: FC<RegisterFormProps> = ({
         </Field>
       </FieldRow>
       <Button type="submit" block loading={loading}>
-        Create Account
+        {t('auth.createAccount')}
       </Button>
     </form>
   )

package/src/auth/ResetPasswordForm.tsx

@@ -28,14 +28,14 @@ export const ResetPasswordForm: FC<ResetPasswordFormProps> = ({
   const validation = useMemo(() => {
     if (!submitted) return {}
     return {
-      token: token ? '' : 'This password-reset link is missing its token.',
+      token: token ? '' : t('auth.missingToken'),
       password:
         password.length < 8
-          ? 'Password must have at least 8 characters.'
+          ? t('auth.passwordTooShort')
           : !/[@$!%*#?&]/.test(password)
-            ? 'Password must contain at least one special character.'
+            ? t('auth.passwordNeedsSpecial')
             : '',
-      confirmation: password !== confirmation ? 'Passwords must match.' : '',
+      confirmation: password !== confirmation ? t('auth.passwordsMustMatch') : '',
     }
   }, [confirmation, password, submitted, token])
 
@@ -58,11 +58,11 @@ export const ResetPasswordForm: FC<ResetPasswordFormProps> = ({
     return (
       <div className="tf-checkout-auth__form">
         <div className="tf-checkout-auth__success" role="status">
-          Your password has been changed. You can now log in.
+          {t('auth.passwordChanged')}
         </div>
         {onBackToLogin && (
           <Button type="button" block onClick={onBackToLogin}>
-            Log in
+            {t('auth.logIn')}
           </Button>
         )}
       </div>
@@ -105,7 +105,7 @@ export const ResetPasswordForm: FC<ResetPasswordFormProps> = ({
         />
       </Field>
       <Button type="submit" block loading={reset.isPending} disabled={!token}>
-        Submit
+        {t('common.submit')}
       </Button>
     </form>
   )

package/src/configure.ts

@@ -5,11 +5,7 @@
  *
  *   configureCheckout({ env: 'PROD', clientId, clientSecret })
  */
-import {
-  configure,
-  type StorageAdapter,
-  type TtfConfig,
-} from 'tf-checkout-shared'
+import { configure, type StorageAdapter, type TtfConfig } from 'tf-checkout-shared'
 
 const isBrowser =
   typeof window !== 'undefined' && typeof window.localStorage !== 'undefined'

package/src/confirmer.ts

@@ -17,11 +17,7 @@ import {
   type StripeCardElement,
   type StripeElements,
 } from '@stripe/stripe-js'
-import type {
-  CheckoutBilling,
-  CheckoutPorts,
-  PaymentConfirmer,
-} from 'tf-checkout-shared'
+import type { CheckoutBilling, CheckoutPorts, PaymentConfirmer } from 'tf-checkout-shared'
 
 import type { WebXenditTokenizer } from './xendit'
 

package/src/sections/AddOns.tsx

@@ -21,6 +21,7 @@ import {
 import { Button } from '../ui/Button'
 import { Card } from '../ui/Card'
 import { useCheckoutContext } from '../ui/CheckoutProvider'
+import { useT } from '../ui/I18nProvider'
 import { CustomFieldGroupFields } from '../ui/CustomFields'
 import { Loader } from '../ui/Loader'
 import { PriceLine } from '../ui/PriceLine'
@@ -45,12 +46,16 @@ export const AddOns: FC<AddOnsProps> = ({
   eventId,
   onContinue,
   onSkip,
-  buttonLabel = 'CONFIRM SELECTION',
-  eyebrow = 'Get Your Tickets',
-  heading = 'UPGRADES & ADD-ONS',
+  buttonLabel,
+  eyebrow,
+  heading,
   className,
 }) => {
+  const t = useT()
   const checkout = useCheckoutContext()
+  const buttonText = buttonLabel ?? t('addons.confirmSelection')
+  const eyebrowText = eyebrow ?? t('addons.eyebrow')
+  const headingText = heading ?? t('addons.heading')
   // No onContinue ⇒ combined form (inside <EmbeddedCheckout/>): apply the selection live
   // (no "confirm" click) — the old checkout applied add-ons at checkout too.
   const combined = !onContinue
@@ -97,8 +102,8 @@ export const AddOns: FC<AddOnsProps> = ({
   const hasRequired = (checkout.requiredAddOns ?? []).some((a) => a.required)
   const head = (
     <div className="tf-checkout-addons__head">
-      {eyebrow && <span className="tf-checkout-addons__eyebrow">{eyebrow}</span>}
-      <span className="tf-checkout-addons__heading">{heading}</span>
+      {eyebrowText && <span className="tf-checkout-addons__eyebrow">{eyebrowText}</span>}
+      <span className="tf-checkout-addons__heading">{headingText}</span>
       {onSkip && !hasRequired && (
         <button type="button" className="tf-checkout-addons__skip" onClick={onSkip}>
           Skip
@@ -190,7 +195,9 @@ export const AddOns: FC<AddOnsProps> = ({
                     )}
                   </div>
                   {soldOut(a) ? (
-                    <span className="tf-checkout-tickets__soldout">Sold out</span>
+                    <span className="tf-checkout-tickets__soldout">
+                      {t('tickets.soldOut')}
+                    </span>
                   ) : (
                     <QuantitySelect
                       value={n}
@@ -227,7 +234,7 @@ export const AddOns: FC<AddOnsProps> = ({
           loading={checkout.isBusy}
           disabled={checkout.isBusy || selectedCount === 0}
         >
-          {checkout.isBusy ? 'Updating…' : buttonLabel}
+          {checkout.isBusy ? t('addons.updating') : buttonText}
         </Button>
       )}
       {missing.length > 0 && (

package/src/sections/BillingInfo.tsx

@@ -34,10 +34,12 @@ import { PhoneInput, type CountryIso2 } from 'react-international-phone'
 import { Button } from '../ui/Button'
 import { Card, SectionHeader } from '../ui/Card'
 import { useCheckoutContext, useCheckoutValidation } from '../ui/CheckoutProvider'
+import { useT } from '../ui/I18nProvider'
 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'
 
@@ -84,22 +86,26 @@ export interface CheckoutPrivacyPolicy {
 export const BillingInfo: FC<BillingInfoProps> = ({
   eventId,
   onContinue,
-  heading = 'Billing Information',
-  buttonLabel = 'Continue to payment',
+  heading,
+  buttonLabel,
   onLogin,
   skipWhenProfileComplete = false,
   requireEmailConfirmation = false,
   collectTicketHolders = false,
   collectHolderContact = false,
-  ttfOptInLabel = 'Keep me updated about future events from The Ticket Fairy',
+  ttfOptInLabel,
   brandOptInLabel,
   privacyPolicy,
   showPrivacyError = false,
   step,
   className,
 }) => {
+  const t = useT()
   const checkout = useCheckoutContext()
   const validation = useCheckoutValidation()
+  const headingText = heading ?? t('billing.heading')
+  const buttonText = buttonLabel ?? t('billing.continueToPayment')
+  const ttfOptInText = ttfOptInLabel ?? t('billing.ttfOptIn')
   const profile = hooks.useProfile({ retry: false })
   const event = hooks.useEvent(eventId)
   // No onContinue ⇒ this is one combined form (inside <EmbeddedCheckout/>): mirror the
@@ -199,7 +205,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 +216,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 +314,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 +368,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,
@@ -383,7 +422,7 @@ export const BillingInfo: FC<BillingInfoProps> = ({
   const complete = missingDetails.length === 0
   const showValidation = validation.attempt > 0
   const missingSet = new Set(missingDetails)
-  const fieldError = (key: string, message = 'This field is required.') =>
+  const fieldError = (key: string, message = t('billing.fieldRequired')) =>
     showValidation && missingSet.has(key) ? message : undefined
   const dobError = showValidation
     ? missingDetails.find(
@@ -399,7 +438,7 @@ export const BillingInfo: FC<BillingInfoProps> = ({
   const commit = () => {
     checkout.setBilling(committedBilling)
     checkout.setHolders(committedHolders)
-    if (ttfOptInLabel || brandOptInLabel) checkout.setConsent(consent)
+    if (ttfOptInText || brandOptInLabel) checkout.setConsent(consent)
   }
 
   // Combined mode: keep the engine in sync as the form is filled, so <Payment/>
@@ -451,7 +490,7 @@ export const BillingInfo: FC<BillingInfoProps> = ({
   return (
     <>
       <Card className={className}>
-        <SectionHeader step={step} title={heading} />
+        <SectionHeader step={step} title={headingText} />
 
         {onLogin && !checkout.isLoggedIn && (
           <div className="tf-checkout-billing__login">
@@ -472,7 +511,7 @@ export const BillingInfo: FC<BillingInfoProps> = ({
             invalid={Boolean(fieldError('First name'))}
           >
             <Input
-              placeholder="First name *"
+              placeholder={t('billing.firstNamePlaceholder')}
               value={billing.firstName}
               required
               invalid={Boolean(fieldError('First name'))}
@@ -485,7 +524,7 @@ export const BillingInfo: FC<BillingInfoProps> = ({
             invalid={Boolean(fieldError('Last name'))}
           >
             <Input
-              placeholder="Last name *"
+              placeholder={t('billing.lastNamePlaceholder')}
               value={billing.lastName}
               required
               invalid={Boolean(fieldError('Last name'))}
@@ -502,7 +541,7 @@ export const BillingInfo: FC<BillingInfoProps> = ({
             <Input
               type="email"
               autoComplete="email"
-              placeholder="Email *"
+              placeholder={t('billing.emailPlaceholder')}
               value={billing.email}
               required
               invalid={Boolean(fieldError('Valid email address'))}
@@ -514,14 +553,14 @@ export const BillingInfo: FC<BillingInfoProps> = ({
             <Field
               error={fieldError(
                 'Matching email confirmation',
-                'Email addresses must match.'
+                t('billing.emailMustMatch')
               )}
               invalid={Boolean(fieldError('Matching email confirmation'))}
             >
               <Input
                 type="email"
                 autoComplete="email"
-                placeholder="Confirm email *"
+                placeholder={t('billing.confirmEmailPlaceholder')}
                 value={billing.confirmEmail ?? ''}
                 required
                 invalid={Boolean(fieldError('Matching email confirmation'))}
@@ -536,21 +575,21 @@ export const BillingInfo: FC<BillingInfoProps> = ({
           billing.confirmEmail &&
           billing.confirmEmail.trim().toLowerCase() !==
             billing.email.trim().toLowerCase() && (
-            <p className="tf-checkout-error-text">The email addresses do not match.</p>
+            <p className="tf-checkout-error-text">{t('billing.emailMismatch')}</p>
           )}
         {emailTaken && (
           <p className="tf-checkout-note tf-checkout-billing__email-taken">
-            This email is already registered.{' '}
+            {t('billing.emailRegistered')}{' '}
             {onLogin ? (
               <button
                 type="button"
                 className="tf-checkout-billing__login-link"
                 onClick={() => onLogin(billing.email)}
               >
-                Log in to autofill your details
+                {t('billing.loginAutofill')}
               </button>
             ) : (
-              'Log in to autofill your details.'
+              t('billing.loginAutofillPlain')
             )}
           </p>
         )}
@@ -564,18 +603,18 @@ export const BillingInfo: FC<BillingInfoProps> = ({
             countries={countries}
             error={fieldError(
               f.kind === 'nationality'
-                ? 'Nationality'
+                ? t('billing.nationality')
                 : f.kind === 'gender'
-                  ? 'Gender'
-                  : 'Instagram handle'
+                  ? t('billing.gender')
+                  : t('billing.instagramHandle')
             )}
           />
         ))}
 
         {gates.showPhone && (
           <Field
-            label={`Phone${gates.phoneRequired ? ' *' : ''}`}
-            error={fieldError('Valid phone number', 'Enter a valid phone number.')}
+            label={gates.phoneRequired ? t('billing.phone') : t('billing.phoneOptional')}
+            error={fieldError('Valid phone number', t('billing.phoneInvalid'))}
             invalid={Boolean(fieldError('Valid phone number'))}
           >
             <PhoneInput
@@ -584,13 +623,20 @@ 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}
-              placeholder="Phone number"
+              placeholder={t('billing.phonePlaceholder')}
               inputProps={{
                 autoComplete: 'tel',
-                'aria-label': 'Phone',
+                'aria-label': t('billing.phoneAria'),
                 'aria-invalid': Boolean(fieldError('Valid phone number')),
               }}
               onChange={(phone) => setBilling((current) => ({ ...current, phone }))}
@@ -600,14 +646,16 @@ export const BillingInfo: FC<BillingInfoProps> = ({
 
         {gates.showDob && (
           <Field
-            label={`Date of birth *${
-              gates.minimumAge ? ` (must be ${gates.minimumAge}+)` : ''
-            }`}
+            label={
+              gates.minimumAge
+                ? t('billing.dobWithAge', { age: gates.minimumAge })
+                : t('billing.dob')
+            }
             error={
               dobError === 'Date of birth'
-                ? 'Date of birth is required.'
+                ? t('billing.dobRequired')
                 : dobError
-                  ? `You must be ${gates.minimumAge} or older.`
+                  ? t('billing.ageMinimum', { age: gates.minimumAge ?? '' })
                   : undefined
             }
             invalid={Boolean(dobError)}
@@ -616,6 +664,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)}
@@ -673,24 +727,24 @@ export const BillingInfo: FC<BillingInfoProps> = ({
               className="tf-checkout-checkbox--consent"
               label={
                 <>
-                  I have read and agree to {privacyPolicy.brandName}{' '}
+                  {t('billing.privacyAgree', { brand: privacyPolicy.brandName })}{' '}
                   <a href={privacyPolicy.url} target="_blank" rel="noreferrer">
-                    {privacyPolicy.linkLabel || 'Privacy Policy.'}
+                    {privacyPolicy.linkLabel || t('billing.privacyLink')}
                   </a>
                   {' *'}
                 </>
               }
             />
             {(showPrivacyError || showValidation) && !consent.ttfOptIn && (
-              <div className="tf-checkout-consent__error">Required</div>
+              <div className="tf-checkout-consent__error">{t('common.required')}</div>
             )}
           </div>
-        ) : ttfOptInLabel ? (
+        ) : ttfOptInText ? (
           <Checkbox
             checked={consent.ttfOptIn}
             onChange={(e) => setConsent((c) => ({ ...c, ttfOptIn: e.target.checked }))}
             className="tf-checkout-checkbox--consent"
-            label={ttfOptInLabel}
+            label={ttfOptInText}
           />
         ) : null}
         {!combined && (
@@ -706,7 +760,7 @@ export const BillingInfo: FC<BillingInfoProps> = ({
                 onContinue?.()
               }}
             >
-              {buttonLabel}
+              {buttonText}
             </Button>
           </>
         )}