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

package/src/sections/Confirmation.tsx

@@ -14,6 +14,7 @@ import React, { useState, type FC, type ReactNode } from 'react'
 import { Button } from '../ui/Button'
 import { Card } from '../ui/Card'
 import { useCheckoutContext } from '../ui/CheckoutProvider'
+import { useT } from '../ui/I18nProvider'
 import { cx } from '../ui/cx'
 
 export interface ConfirmationProps {
@@ -35,6 +36,7 @@ export const Confirmation: FC<ConfirmationProps> = ({
   children,
   className,
 }) => {
+  const t = useT()
   const checkout = useCheckoutContext()
   const order = checkout.order
   const [copied, setCopied] = useState(false)
@@ -78,14 +80,14 @@ export const Confirmation: FC<ConfirmationProps> = ({
     <Card className={cx('tf-checkout-confirmation', className)}>
       <span className="tf-checkout-confirmation__check">{pending ? '⏳' : '✓'}</span>
       <strong className="tf-checkout-confirmation__title">
-        {pending ? 'Payment pending' : 'Your Tickets are Confirmed!'}
+        {pending ? t('confirmation.pending') : t('confirmation.confirmed')}
       </strong>
       <p className="tf-checkout-note">
         {pending
-          ? 'We’ll email your tickets as soon as the payment settles.'
+          ? t('confirmation.pendingBody')
           : order.alreadyPaid
-            ? 'This order was already paid — nothing was charged again.'
-            : 'Your tickets are available in the My Tickets section — please bring them with you to the event.'}
+            ? t('confirmation.alreadyPaid')
+            : t('confirmation.available')}
       </p>
       {order.orderHash && (
         <p className="tf-checkout-confirmation__ref">Reference: {order.orderHash}</p>
@@ -116,14 +118,14 @@ export const Confirmation: FC<ConfirmationProps> = ({
       {/* Referral / share — invite friends for cheaper (or free) tickets. */}
       {!pending && url && (
         <div className="tf-checkout-confirmation__share">
-          <strong>Your tickets can be cheaper — or even FREE!</strong>
+          <strong>{t('referral.cheaperOrFree')}</strong>
           <p className="tf-checkout-note">
             Invite friends with your link. When they buy, you get rewarded.
           </p>
           <div className="tf-checkout-confirmation__share-link">
             <input className="tf-checkout-input" readOnly value={url} />
             <Button variant="secondary" onClick={copy}>
-              {copied ? 'Copied!' : 'Copy link'}
+              {copied ? t('referral.copied') : t('referral.copyLink')}
             </Button>
           </div>
           <div className="tf-checkout-confirmation__socials">

package/src/sections/OrderSummary.tsx

@@ -4,6 +4,7 @@ import { hooks } from 'tf-checkout-shared'
 
 import { Card } from '../ui/Card'
 import { useCheckoutContext } from '../ui/CheckoutProvider'
+import { useT } from '../ui/I18nProvider'
 
 export interface OrderSummaryProps {
   eventId?: string
@@ -12,6 +13,7 @@ export interface OrderSummaryProps {
 
 /** Storefront-compatible order summary shown after the checkout controls. */
 export const OrderSummary: FC<OrderSummaryProps> = ({ eventId, className }) => {
+  const t = useT()
   const checkout = useCheckoutContext()
   const event = hooks.useEvent(eventId)
   const breakdown = checkout.breakdown
@@ -23,13 +25,13 @@ export const OrderSummary: FC<OrderSummaryProps> = ({ eventId, className }) => {
     <Card className={['tf-checkout-order-summary', className].filter(Boolean).join(' ')}>
       {event.data?.name && (
         <div className="tf-checkout-order-summary__group">
-          <div className="tf-checkout-order-summary__label">Event</div>
+          <div className="tf-checkout-order-summary__label">{t('common.event')}</div>
           <div className="tf-checkout-order-summary__event">{event.data.name}</div>
         </div>
       )}
 
       <div className="tf-checkout-order-summary__group">
-        <div className="tf-checkout-order-summary__label">Your Tickets</div>
+        <div className="tf-checkout-order-summary__label">{t('tickets.yourTickets')}</div>
         {breakdown.tickets.map((ticket, index) => {
           const detail = detailed?.tickets[index]
           return (
@@ -39,7 +41,7 @@ export const OrderSummary: FC<OrderSummaryProps> = ({ eventId, className }) => {
             >
               <div className="tf-checkout-order-summary__ticket">
                 {ticket.quantity} x {ticket.name} - {detail?.unit_price ?? ticket.unit}{' '}
-                each
+                {t('common.each')}
               </div>
               {detail?.line_total && detail.line_total !== detail.unit_price && (
                 <div className="tf-checkout-order-summary__fees">
@@ -63,7 +65,7 @@ export const OrderSummary: FC<OrderSummaryProps> = ({ eventId, className }) => {
             >
               <div className="tf-checkout-order-summary__ticket">
                 {addOn.quantity} x {addOn.name}
-                {addOn.show_price ? ` - ${addOn.unit_price} each` : ''}
+                {addOn.show_price ? ` - ${addOn.unit_price} ${t('common.each')}` : ''}
               </div>
             </div>
           ))}
@@ -71,7 +73,7 @@ export const OrderSummary: FC<OrderSummaryProps> = ({ eventId, className }) => {
       )}
 
       <div className="tf-checkout-order-summary__total">
-        <div className="tf-checkout-order-summary__label">Total</div>
+        <div className="tf-checkout-order-summary__label">{t('common.total')}</div>
         <div className="tf-checkout-order-summary__amount">
           {detailed?.total ??
             `${breakdown.currencySymbol || `${breakdown.currencyCode} `}${Number(

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('')
@@ -133,13 +135,31 @@ 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 []
     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 },
@@ -152,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({
@@ -165,11 +185,12 @@ export const Payment: FC<PaymentProps> = ({
         out.push({
           id: { kind: 'paymentPlan' },
           value: 'paymentPlan',
-          label: 'Payment plan',
+          label: t('payment.paymentPlan'),
         })
-      // OXXO cash voucher — Mexico only, and never listed in redirect methods.
-      if (checkout.breakdown?.currencyCode === 'MXN')
-        out.push({ id: { kind: 'oxxo' }, value: 'oxxo', label: 'OXXO (pay in cash)' })
+      // 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: t('payment.oxxo') })
     }
     if (methods.paypal)
       out.push({ id: { kind: 'paypal' }, value: 'paypal', label: 'PayPal' })
@@ -181,7 +202,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 +225,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
@@ -274,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.
@@ -406,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>
           )}
         </>
@@ -438,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>
       )}
@@ -448,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">
@@ -532,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}