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

package/src/sections/Payment.tsx

@@ -24,6 +24,7 @@ import { CardInput, StripePaymentElement, XenditCardInput } from '../CardInput'
 import { Button } from '../ui/Button'
 import { Card, SectionHeader } from '../ui/Card'
 import { useCheckoutContext, useCheckoutValidation } from '../ui/CheckoutProvider'
+import { useT } from '../ui/I18nProvider'
 import { Checkbox } from '../ui/Field'
 import { cx } from '../ui/cx'
 import { Loader } from '../ui/Loader'
@@ -100,6 +101,7 @@ export const Payment: FC<PaymentProps> = ({
   showTestCardHint = false,
   className,
 }) => {
+  const t = useT()
   const checkout = useCheckoutContext()
   const validation = useCheckoutValidation()
   const [error, setError] = useState('')
@@ -153,7 +155,11 @@ export const Payment: FC<PaymentProps> = ({
     const out: PaymentMethodOption[] = []
     if (isXendit) {
       if (methods.xenditCard)
-        out.push({ id: { kind: 'xenditCard' }, value: 'xenditCard', label: 'Card' })
+        out.push({
+          id: { kind: 'xenditCard' },
+          value: 'xenditCard',
+          label: t('payment.card'),
+        })
       for (const w of methods.xenditEWallets)
         out.push({
           id: { kind: 'xenditEWallet', walletKey: w.key },
@@ -166,7 +172,7 @@ export const Payment: FC<PaymentProps> = ({
       out.push({ id: { kind: 'razorpay' }, value: 'razorpay', label: 'Razorpay' })
     } else {
       // Stripe (or unknown → fail open to card).
-      out.push({ id: { kind: 'card' }, value: 'card', label: 'Card' })
+      out.push({ id: { kind: 'card' }, value: 'card', label: t('payment.card') })
       for (const t of checkout.redirectPaymentMethods ?? []) {
         if (t === 'paypal' && methods.paypal) continue // dedupe vs PayPal Standard
         out.push({
@@ -179,12 +185,12 @@ export const Payment: FC<PaymentProps> = ({
         out.push({
           id: { kind: 'paymentPlan' },
           value: 'paymentPlan',
-          label: 'Payment plan',
+          label: t('payment.paymentPlan'),
         })
       // 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)' })
+        out.push({ id: { kind: 'oxxo' }, value: 'oxxo', label: t('payment.oxxo') })
     }
     if (methods.paypal)
       out.push({ id: { kind: 'paypal' }, value: 'paypal', label: 'PayPal' })
@@ -290,10 +296,10 @@ export const Payment: FC<PaymentProps> = ({
   // The plan CTA carries the brand's terminology ("Confirm Layaway"), and the
   // terms sentence quotes this same label — they must agree.
   const payLabel = isFree
-    ? 'Complete Registration'
+    ? t('payment.completeRegistration')
     : isPlanSelected
       ? planConfirmLabel(checkout.paymentPlan?.configuration)
-      : 'Submit Payment'
+      : t('payment.submitPayment')
   const planTerms = paymentPlanTerms(checkout.paymentPlan?.configuration)
   // 'placing' → order in flight; 'succeeded' → placed, host navigating away.
   // Both keep the CTA busy so it can't be re-clicked during the handoff.
@@ -422,9 +428,7 @@ export const Payment: FC<PaymentProps> = ({
           )}
           {showTestCardHint && (
             <p className="tf-checkout-note">
-              {isXendit
-                ? 'Test card: 4000 0000 0000 0002 · any future date · any CVC'
-                : 'Test card: 4242 4242 4242 4242 · any future date · any CVC'}
+              {isXendit ? t('payment.testCardXendit') : t('payment.testCard')}
             </p>
           )}
         </>
@@ -454,7 +458,7 @@ export const Payment: FC<PaymentProps> = ({
           <Checkbox
             checked={useSavedCard}
             onChange={(e) => setUseSavedCard(e.target.checked)}
-            label="Use this card"
+            label={t('payment.useThisCard')}
           />
         </div>
       )}
@@ -464,13 +468,13 @@ export const Payment: FC<PaymentProps> = ({
   return (
     <div className={['tf-checkout-payment-stack', className].filter(Boolean).join(' ')}>
       <Card>
-        <SectionHeader title="Payment" />
+        <SectionHeader title={t('payment.title')} />
 
         {/* Payment method */}
         {!isFree && (
           <>
             {!singleCard && (
-              <div className="tf-checkout-payment__label">Payment method</div>
+              <div className="tf-checkout-payment__label">{t('payment.method')}</div>
             )}
             {!methods ? (
               <div className="tf-checkout-payment__cardbox">
@@ -548,7 +552,7 @@ export const Payment: FC<PaymentProps> = ({
           loading={finalizing}
           disabled={checkout.isBusy || finalizing || (!isFree && !methods)}
         >
-          {finalizing ? 'Placing…' : payLabel}
+          {finalizing ? t('payment.placing') : payLabel}
         </Button>
       </div>
       {bottomError && <p className="tf-checkout-error-text">{bottomError}</p>}

package/src/sections/Tickets.tsx

@@ -24,6 +24,7 @@ import {
 import { Button } from '../ui/Button'
 import { Card, SectionHeader } from '../ui/Card'
 import { useCheckoutContext } from '../ui/CheckoutProvider'
+import { useT } from '../ui/I18nProvider'
 import { cx } from '../ui/cx'
 import { Field, FieldRow, Input } from '../ui/Field'
 import { Loader } from '../ui/Loader'
@@ -124,7 +125,7 @@ export const Tickets: FC<TicketsProps> = ({
   eventId,
   title = false,
   onContinue,
-  buttonLabel = 'Get tickets',
+  buttonLabel,
   timeSlotDates,
   step,
   onSelectSeats,
@@ -133,7 +134,9 @@ export const Tickets: FC<TicketsProps> = ({
   readAttributionFromUrl = true,
   className,
 }) => {
+  const tr = useT()
   const checkout = useCheckoutContext()
+  const buttonText = buttonLabel ?? tr('tickets.getTickets')
   const ticketsQuery = hooks.useTicketsWithMeta(eventId)
   const promoMeta = ticketsQuery.data?.promo
   const showWaitingList = ticketsQuery.data?.showWaitingList ?? false
@@ -256,7 +259,9 @@ export const Tickets: FC<TicketsProps> = ({
   // Types that can still be bought with a quantity dropdown (all of them for a
   // non-seated event). When empty on a seated event, only "Select seats" shows.
   const directPurchasable = tickets.filter((t) => !seatMapRow(t))
-  const seatCtaLabel = eventInfo?.tableMapEnabled ? 'Select on map' : 'Select seats'
+  const seatCtaLabel = eventInfo?.tableMapEnabled
+    ? tr('tickets.selectOnMap')
+    : tr('tickets.selectSeats')
 
   // A "Tables" divider before the first table type — only when regular tickets
   // actually precede it (a tables-first list gets no stray divider).
@@ -312,7 +317,9 @@ export const Tickets: FC<TicketsProps> = ({
           <div className="tf-checkout-tickets__group">{t.groupName}</div>
         ) : (
           t.id === firstTableId && (
-            <div className="tf-checkout-tickets__group">Reserve tables</div>
+            <div className="tf-checkout-tickets__group">
+              {tr('tickets.reserveTables')}
+            </div>
           )
         )}
         <div className="tf-checkout-tickets__row-wrap">
@@ -330,7 +337,9 @@ export const Tickets: FC<TicketsProps> = ({
                       setVisibleDescription((current) => (current === t.id ? null : t.id))
                     }
                   >
-                    {visibleDescription === t.id ? 'Hide info' : 'View info'}
+                    {visibleDescription === t.id
+                      ? tr('tickets.hideInfo')
+                      : tr('tickets.viewInfo')}
                   </button>
                 )}
               </div>
@@ -367,17 +376,21 @@ export const Tickets: FC<TicketsProps> = ({
             {seatMapRow(t) ? null : unavailable ? (
               <span className="tf-checkout-tickets__soldout">
                 {t.soldOut
-                  ? 'Sold out'
+                  ? tr('tickets.soldOut')
                   : notStarted
-                    ? 'Sales not started'
-                    : 'Sales Ended'}
+                    ? tr('tickets.salesNotStarted')
+                    : tr('tickets.salesEnded')}
               </span>
             ) : (
               <div className="tf-checkout-tickets__qty">
                 {/* Tables pick a number of GUESTS (bounded by minGuests/maxGuests),
                   not a count of tickets — the label makes that explicit, matching
                   the old checkout's "GUESTS" affordance. */}
-                {t.isTable && <span className="tf-checkout-tickets__guests">Guests</span>}
+                {t.isTable && (
+                  <span className="tf-checkout-tickets__guests">
+                    {tr('tickets.guests')}
+                  </span>
+                )}
                 <QuantitySelect
                   value={qty[t.id] ?? 0}
                   min={range.min}
@@ -447,7 +460,7 @@ export const Tickets: FC<TicketsProps> = ({
 
       {isTimeSlot && dates.length > 0 && (
         <div className="tf-checkout-tickets__currency">
-          <span className="tf-checkout-tickets__currency-label">Date</span>
+          <span className="tf-checkout-tickets__currency-label">{tr('common.date')}</span>
           <select
             className="tf-checkout-select"
             value={slotDate}
@@ -467,7 +480,9 @@ export const Tickets: FC<TicketsProps> = ({
 
       {checkout.currency && checkout.currency.available.length > 1 && (
         <div className="tf-checkout-tickets__currency">
-          <span className="tf-checkout-tickets__currency-label">Currency</span>
+          <span className="tf-checkout-tickets__currency-label">
+            {tr('common.currency')}
+          </span>
           <select
             className="tf-checkout-select"
             value={checkout.currency.currency}
@@ -483,7 +498,7 @@ export const Tickets: FC<TicketsProps> = ({
       )}
 
       {isTimeSlot && !slotQuery.isLoading && tickets.length === 0 && slotDate && (
-        <p className="tf-checkout-note">No sessions available on this date.</p>
+        <p className="tf-checkout-note">{tr('tickets.noSessions')}</p>
       )}
 
       {isTimeSlot
@@ -511,7 +526,9 @@ export const Tickets: FC<TicketsProps> = ({
               <FieldRow>
                 <Field>
                   <Input
-                    placeholder={isAccess ? 'Access code' : 'Promo code'}
+                    placeholder={
+                      isAccess ? tr('tickets.accessCode') : tr('tickets.promoCode')
+                    }
                     value={code}
                     onChange={(e) => setCode(e.target.value)}
                     onKeyDown={(e) => e.key === 'Enter' && applyCode()}
@@ -551,10 +568,10 @@ export const Tickets: FC<TicketsProps> = ({
           disabled={checkout.isBusy || selected.length === 0}
         >
           {checkout.isBusy
-            ? 'Reserving…'
+            ? tr('tickets.reserving')
             : selectionIsTable
-              ? 'Reserve tables'
-              : buttonLabel}
+              ? tr('tickets.reserveTables')
+              : buttonText}
         </Button>
       )}
 

package/src/sections/billing/BillingAddressFields.tsx

@@ -1,6 +1,7 @@
 import React, { type Dispatch, type FC, type SetStateAction } from 'react'
 
 import { Field, FieldRow, Input, Select } from '../../ui/Field'
+import { useT } from '../../ui/I18nProvider'
 import type { BillingDraft, BillingFieldError, LocationOption } from './types'
 
 interface BillingAddressFieldsProps {
@@ -19,19 +20,20 @@ export const BillingAddressFields: FC<BillingAddressFieldsProps> = ({
   fieldError,
   setBilling,
 }) => {
+  const t = useT()
   const setValue =
     (key: keyof BillingDraft) => (event: React.ChangeEvent<HTMLInputElement>) =>
       setBilling((current) => ({ ...current, [key]: event.target.value }))
 
   return (
     <>
-      <div className="tf-checkout-billing__section-label">Billing address *</div>
+      <div className="tf-checkout-billing__section-label">{t('billing.address')}</div>
       <Field
-        error={fieldError('Street address', 'Street address is required.')}
+        error={fieldError('Street address', t('billing.streetRequired'))}
         invalid={Boolean(fieldError('Street address'))}
       >
         <Input
-          placeholder="Street address *"
+          placeholder={t('billing.streetPlaceholder')}
           autoComplete="street-address"
           value={billing.streetAddress ?? ''}
           required
@@ -42,11 +44,11 @@ export const BillingAddressFields: FC<BillingAddressFieldsProps> = ({
       </Field>
       <FieldRow>
         <Field
-          error={fieldError('City', 'City is required.')}
+          error={fieldError('City', t('billing.cityRequired'))}
           invalid={Boolean(fieldError('City'))}
         >
           <Input
-            placeholder="City *"
+            placeholder={t('billing.cityPlaceholder')}
             autoComplete="address-level2"
             value={billing.city ?? ''}
             required
@@ -56,11 +58,11 @@ export const BillingAddressFields: FC<BillingAddressFieldsProps> = ({
           />
         </Field>
         <Field
-          error={fieldError('ZIP / postcode', 'ZIP / postcode is required.')}
+          error={fieldError('ZIP / postcode', t('billing.postcodeRequired'))}
           invalid={Boolean(fieldError('ZIP / postcode'))}
         >
           <Input
-            placeholder="ZIP / Postcode *"
+            placeholder={t('billing.postcodePlaceholder')}
             autoComplete="postal-code"
             value={billing.zip ?? ''}
             required
@@ -72,12 +74,12 @@ export const BillingAddressFields: FC<BillingAddressFieldsProps> = ({
       </FieldRow>
       <FieldRow>
         <Field
-          error={fieldError('Country', 'Country is required.')}
+          error={fieldError('Country', t('billing.countryRequired'))}
           invalid={Boolean(fieldError('Country'))}
         >
           <Select
             value={billing.countryId ?? ''}
-            aria-label="Country"
+            aria-label={t('billing.countryLabel')}
             required
             invalid={Boolean(fieldError('Country'))}
             aria-invalid={Boolean(fieldError('Country'))}
@@ -94,7 +96,7 @@ export const BillingAddressFields: FC<BillingAddressFieldsProps> = ({
               }))
             }}
           >
-            <option value="">— country * —</option>
+            <option value="">{t('billing.countryEmpty')}</option>
             {countries.map((country) => (
               <option key={country.id} value={country.id}>
                 {country.name}
@@ -103,13 +105,13 @@ export const BillingAddressFields: FC<BillingAddressFieldsProps> = ({
           </Select>
         </Field>
         <Field
-          error={fieldError('State / county', 'State / county is required.')}
+          error={fieldError('State / county', t('billing.stateRequired'))}
           invalid={Boolean(fieldError('State / county'))}
         >
           <Select
             value={billing.stateId ?? ''}
             disabled={!billing.countryId || states.length === 0}
-            aria-label="State / region"
+            aria-label={t('billing.stateLabel')}
             required={states.length > 0}
             invalid={Boolean(fieldError('State / county'))}
             aria-invalid={Boolean(fieldError('State / county'))}
@@ -124,7 +126,11 @@ export const BillingAddressFields: FC<BillingAddressFieldsProps> = ({
               }))
             }}
           >
-            <option value="">— state / county{states.length > 0 ? ' *' : ''} —</option>
+            <option value="">
+              {states.length > 0
+                ? t('billing.stateEmptyRequired')
+                : t('billing.stateEmpty')}
+            </option>
             {states.map((state) => (
               <option key={state.id} value={state.id}>
                 {state.name}

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