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

package/dist/styles/tickets.css

@@ -39,6 +39,21 @@
   font-size: 14px;
   line-height: 1.25;
 }
+/* Organiser's scarcity badge ("Selling fast"). Its own token so a host can
+   recolour it without also recolouring validation errors. */
+.tf-checkout-tickets__badge {
+  display: inline-block;
+  max-width: 100%;
+  margin-top: 4px;
+  padding: 2px 7px;
+  border-radius: 3px;
+  background: var(--tf-checkout-badge, var(--tf-checkout-error));
+  color: var(--tf-checkout-badge-contrast, #fff);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
 .tf-checkout-tickets__description-toggle {
   appearance: none;
   border: 0;
@@ -145,7 +160,9 @@
   font-weight: 400;
   text-align: center;
   cursor: pointer;
-  transition: border-color 0.12s, background 0.12s;
+  transition:
+    border-color 0.12s,
+    background 0.12s;
 }
 .tf-checkout-tickets__promo-toggle:hover {
   background: color-mix(in srgb, var(--tf-checkout-text) 78%, var(--tf-checkout-surface));

package/package.json

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

package/src/EmbeddedCheckout.tsx

@@ -28,6 +28,7 @@ import { Payment } from './sections/Payment'
 import { SeatMap } from './sections/SeatMap'
 import { Tickets } from './sections/Tickets'
 import { CheckoutProvider, useCheckoutContext } from './ui/CheckoutProvider'
+import { useT } from './ui/I18nProvider'
 import { TimerBanner } from './ui/TimerBanner'
 import type { CheckoutTheme } from './ui/theme'
 
@@ -148,6 +149,7 @@ const Flow: FC<{
   readAttributionFromUrl,
   showTestCardHint,
 }) => {
+  const t = useT()
   const checkout = useCheckoutContext()
   const [view, setView] = useState<FlowView>(initialView)
   const [selectionView, setSelectionView] = useState<SelectionView>(initialView)
@@ -329,11 +331,7 @@ const Flow: FC<{
           key={authRequest.key}
           open
           initialEmail={authRequest.email}
-          message={
-            authRequest.email
-              ? 'This email already has an account. Log in to autofill your checkout details.'
-              : undefined
-          }
+          message={authRequest.email ? t('auth.existingAccount') : undefined}
           allowRegistration={auth?.allowRegistration}
           allowPasswordReset={auth?.allowPasswordReset}
           requireRegistrationAddress={auth?.requireRegistrationAddress}

package/src/sections/Confirmation.tsx

@@ -100,7 +100,7 @@ export const Confirmation: FC<ConfirmationProps> = ({
           target="_blank"
           rel="noopener noreferrer"
         >
-          View payment voucher
+          {t('confirmation.viewVoucher')}
         </a>
       )}
 
@@ -109,7 +109,7 @@ export const Confirmation: FC<ConfirmationProps> = ({
           className="tf-checkout-button tf-checkout-button--secondary tf-checkout-button--block"
           href={viewOrderUrl}
         >
-          View my tickets
+          {t('confirmation.viewTickets')}
         </a>
       )}
 

package/src/sections/IDVerification.tsx

@@ -15,16 +15,18 @@ import { Button } from '../ui/Button'
 import { Card, SectionHeader } from '../ui/Card'
 import { useCheckoutContext } from '../ui/CheckoutProvider'
 import { cx } from '../ui/cx'
+import { useT } from '../ui/I18nProvider'
 
 type UiPhase = IdVerificationPhase | 'starting'
 
+// Translation keys, not copy: resolved at render so the text follows the locale.
 const MESSAGE: Record<UiPhase, string> = {
-  idle: 'To complete the purchase, please verify your identity.',
-  starting: 'Opening the verification page…',
-  polling: 'Waiting for verification to complete in the other tab…',
-  verified: 'Identity verified — your tickets are on their way.',
-  timeout: 'Still not confirmed. Finish in the other tab, then check again.',
-  error: 'We couldn’t reach the verification service. Try again.',
+  idle: 'verification.idle',
+  starting: 'verification.starting',
+  polling: 'verification.polling',
+  verified: 'verification.verified',
+  timeout: 'verification.timeoutCheckAgain',
+  error: 'verification.error',
 }
 
 export interface IDVerificationProps {
@@ -32,6 +34,7 @@ export interface IDVerificationProps {
 }
 
 export const IDVerification: FC<IDVerificationProps> = ({ className }) => {
+  const t = useT()
   const checkout = useCheckoutContext()
   const order = checkout.order
   const [phase, setPhase] = useState<UiPhase>('idle')
@@ -61,13 +64,17 @@ export const IDVerification: FC<IDVerificationProps> = ({ className }) => {
 
   return (
     <Card className={cx('tf-checkout-idverify', className)}>
-      <SectionHeader title="Account Verification" />
+      <SectionHeader title={t('verification.title')} />
       <p className={cx('tf-checkout-note', done && 'tf-checkout-idverify__done')}>
-        {MESSAGE[phase]}
+        {t(MESSAGE[phase])}
       </p>
       {!done && (
         <Button block onClick={run} loading={running} disabled={running}>
-          {phase === 'idle' ? 'Verify' : running ? 'Verifying…' : 'Check again'}
+          {phase === 'idle'
+            ? t('verification.verify')
+            : running
+              ? t('verification.verifying')
+              : t('verification.checkAgain')}
         </Button>
       )}
       {error && <p className="tf-checkout-error-text">{error}</p>}

package/src/sections/OrderConfirmation.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState, type FC, type ReactNode } from 'rea
 import { errorMessage, ttf } from 'tf-checkout-shared'
 
 import { cx } from '../ui/cx'
+import { useT } from '../ui/I18nProvider'
 import { Loader } from '../ui/Loader'
 
 type ConfirmationData = Record<string, any>
@@ -36,6 +37,9 @@ export interface OrderConfirmationProps {
   className?: string
 }
 
+// Marks "no order hash" in `failure` state; any other value is a server message.
+const MISSING_REFERENCE = '\u0000missing-reference'
+
 /**
  * Reloadable post-purchase confirmation. Its markup intentionally preserves
  * the proven legacy checkout class contract so existing white-label themes do
@@ -43,7 +47,7 @@ export interface OrderConfirmationProps {
  */
 export const OrderConfirmation: FC<OrderConfirmationProps> = ({
   orderHash,
-  title = 'Your order has been confirmed!',
+  title,
   message,
   helper,
   eventTitle,
@@ -56,6 +60,7 @@ export const OrderConfirmation: FC<OrderConfirmationProps> = ({
   onError,
   className,
 }) => {
+  const t = useT()
   const [data, setData] = useState<ConfirmationData | null>(null)
   const [failure, setFailure] = useState('')
   const [copied, setCopied] = useState(false)
@@ -69,7 +74,7 @@ export const OrderConfirmation: FC<OrderConfirmationProps> = ({
 
   useEffect(() => {
     if (!orderHash) {
-      setFailure('The order reference is missing.')
+      setFailure(MISSING_REFERENCE)
       return
     }
 
@@ -98,7 +103,7 @@ export const OrderConfirmation: FC<OrderConfirmationProps> = ({
     return (
       <div className={cx('confirmation-page tf-checkout-confirmation-page', className)}>
         <div className="tf-checkout-auth__alert" role="alert">
-          {failure}
+          {failure === MISSING_REFERENCE ? t('confirmation.missingReference') : failure}
         </div>
       </div>
     )
@@ -124,17 +129,19 @@ export const OrderConfirmation: FC<OrderConfirmationProps> = ({
     ...(Number.isFinite(currentPrice)
       ? [
           {
-            label: 'Your ticket is currently',
+            label: t('referral.currentPrice'),
             price: `${symbol}${currentPrice.toFixed(2)}`,
           },
         ]
       : []),
     ...sales.map((sale: ConfirmationData) => ({
-      label: `If your friends buy ${sale.sales} tickets`,
+      label: t('referral.ifFriendsBuy', { count: sale.sales }),
       subLabel:
-        Number(sale.price) === 0 ? 'Your ticket becomes' : 'Your ticket goes down to',
+        Number(sale.price) === 0 ? t('referral.becomes') : t('referral.goesDownTo'),
       price:
-        Number(sale.price) === 0 ? 'FREE!' : `${symbol}${Number(sale.price).toFixed(2)}`,
+        Number(sale.price) === 0
+          ? t('referral.titleFree')
+          : `${symbol}${Number(sale.price).toFixed(2)}`,
     })),
   ]
 
@@ -150,7 +157,7 @@ export const OrderConfirmation: FC<OrderConfirmationProps> = ({
     <div className={cx('confirmation-page tf-checkout-confirmation-page', className)}>
       <div className="header-container">
         <div className="header-product-text">
-          <p className="title">{title}</p>
+          <p className="title">{title ?? t('confirmation.orderConfirmed')}</p>
           {(eventTitle || eventDate || eventLocation) && (
             <div className="event-details">
               {eventTitle && <div className="event-title">{eventTitle}</div>}
@@ -165,11 +172,11 @@ export const OrderConfirmation: FC<OrderConfirmationProps> = ({
               <>
                 <span className="main">
                   {attachTickets
-                    ? 'Your tickets have been emailed to you'
-                    : (message ?? 'Your tickets are available in My Tickets.')}
+                    ? t('confirmation.emailed')
+                    : (message ?? t('confirmation.inMyTickets'))}
                 </span>
                 <span className="helper">
-                  {attachTickets ? 'Please bring them with you to the event' : helper}
+                  {attachTickets ? t('confirmation.bringThem') : helper}
                 </span>
               </>
             )}
@@ -187,7 +194,7 @@ export const OrderConfirmation: FC<OrderConfirmationProps> = ({
       {orderUrl && (
         <div className="order-details-button-container">
           <a className="view-order-button" href={orderUrl}>
-            View Order
+            {t('confirmation.viewOrder')}
           </a>
         </div>
       )}
@@ -197,26 +204,26 @@ export const OrderConfirmation: FC<OrderConfirmationProps> = ({
           <div className="referral_text_image_section">
             <div className="referral_text_section">
               <div className="referral_title_text">
-                Your ticket can become
-                <span className="strong-text"> cheaper </span>
-                or even
-                <span className="strong-text"> FREE!</span>
+                {t('referral.titleStart')}
+                <span className="strong-text"> {t('referral.titleCheaper')} </span>
+                {t('referral.titleOr')}
+                <span className="strong-text"> {t('referral.titleFree')}</span>
               </div>
               <div className="referral_text">
-                <span className="strong-text">Invite friends </span>
-                and we'll refund up to
+                <span className="strong-text">{t('referral.inviteFriends')} </span>
+                {t('referral.inviteMiddle')}
                 <span className="strong-text"> 100% </span>
-                of your ticket money, if they buy tickets as well!
+                {t('referral.inviteEnd')}
               </div>
             </div>
           </div>
           <div className="share_wrapper">
             <div className="share_section">
               <div className="invitation_section">
-                <div className="invitation_title">How do you invite your friends?</div>
+                <div className="invitation_title">{t('referral.howToInvite')}</div>
                 <div className="share_buttons">
                   <div className="share-by-link">
-                    <h5 className="share-by-link label">Send them this link:</h5>
+                    <h5 className="share-by-link label">{t('referral.sendThisLink')}</h5>
                     <div className="share-btn-inner">
                       <input className="share-input" readOnly value={shareUrl} />
                       <button
@@ -224,7 +231,9 @@ export const OrderConfirmation: FC<OrderConfirmationProps> = ({
                         type="button"
                         onClick={copy}
                       >
-                        <span className="copy-icon">{copied ? 'Copied!' : 'Copy'}</span>
+                        <span className="copy-icon">
+                          {copied ? t('referral.copied') : t('referral.copy')}
+                        </span>
                       </button>
                     </div>
                   </div>
@@ -255,7 +264,7 @@ export const OrderConfirmation: FC<OrderConfirmationProps> = ({
             </div>
             {pricing.length > 0 && (
               <div className="pricing-section">
-                <div className="invitation_title">How much cheaper?</div>
+                <div className="invitation_title">{t('referral.howMuchCheaper')}</div>
                 {pricing.map((item, index) => (
                   <div className="pricing-section_wrapper" key={`${item.label}-${index}`}>
                     <div className="pricing-section_label">

package/src/sections/OrderIDVerification.tsx

@@ -10,19 +10,24 @@ import {
 import { Button } from '../ui/Button'
 import { Card, SectionHeader } from '../ui/Card'
 import { cx } from '../ui/cx'
+import { useT } from '../ui/I18nProvider'
 
 type UiPhase = IdVerificationPhase | 'checking' | 'starting'
 
+// Translation keys, not copy: resolved at render so the text follows the locale.
 const PHASE_MESSAGE: Record<UiPhase, string> = {
-  checking: 'Checking your verification status…',
-  idle: 'To complete the purchase, please verify your identity.',
-  starting: 'Opening the verification page…',
-  polling: 'Waiting for verification to complete in the other tab…',
-  verified: 'Identity verified — your tickets are on their way.',
-  timeout: 'Verification is taking longer than usual. Your payment is safe.',
-  error: 'We couldn’t reach the verification service. Try again.',
+  checking: 'verification.checking',
+  idle: 'verification.idle',
+  starting: 'verification.starting',
+  polling: 'verification.polling',
+  verified: 'verification.verified',
+  timeout: 'verification.timeoutSafe',
+  error: 'verification.error',
 }
 
+// Marks "no order hash" in `failure` state; any other value is a server message.
+const MISSING_REFERENCE = '\u0000missing-reference'
+
 export interface OrderIDVerificationProps {
   orderHash: string
   onVerified?: () => void
@@ -35,13 +40,14 @@ export const OrderIDVerification: FC<OrderIDVerificationProps> = ({
   onVerified,
   className,
 }) => {
+  const t = useT()
   const [phase, setPhase] = useState<UiPhase>('checking')
   const [failure, setFailure] = useState('')
 
   useEffect(() => {
     if (!orderHash) {
       setPhase('error')
-      setFailure('The order reference is missing.')
+      setFailure(MISSING_REFERENCE)
       return
     }
     let active = true
@@ -98,18 +104,24 @@ export const OrderIDVerification: FC<OrderIDVerificationProps> = ({
 
   return (
     <Card className={cx('tf-checkout-idverify', className)}>
-      <SectionHeader title="Account Verification" />
+      <SectionHeader title={t('verification.title')} />
       <p
         className={cx(
           'tf-checkout-note',
           phase === 'verified' && 'tf-checkout-idverify__done'
         )}
       >
-        {failure || PHASE_MESSAGE[phase]}
+        {failure === MISSING_REFERENCE
+          ? t('confirmation.missingReference')
+          : failure || t(PHASE_MESSAGE[phase])}
       </p>
       {phase !== 'verified' && orderHash && (
         <Button block onClick={run} loading={running} disabled={running || !orderHash}>
-          {phase === 'idle' ? 'Verify' : running ? 'Verifying…' : 'Try again'}
+          {phase === 'idle'
+            ? t('verification.verify')
+            : running
+              ? t('verification.verifying')
+              : t('verification.tryAgain')}
         </Button>
       )}
     </Card>

package/src/sections/Payment.tsx

@@ -533,7 +533,7 @@ export const Payment: FC<PaymentProps> = ({
               />
               {invalid && (
                 <div className="tf-checkout-consent__error">
-                  You must accept this condition to continue.
+                  {t('payment.conditionRequired')}
                 </div>
               )}
             </div>

package/src/sections/Tickets.tsx

@@ -35,6 +35,7 @@ const WaitingListForm: FC<{
   ticket: TicketType
   onJoin: (entry: WaitingListEntry) => Promise<void>
 }> = ({ ticket, onJoin }) => {
+  const tr = useT()
   const [form, setForm] = useState({ firstName: '', lastName: '', email: '' })
   const [state, setState] = useState<'idle' | 'busy' | 'done' | 'error'>('idle')
   const [error, setError] = useState('')
@@ -43,7 +44,7 @@ const WaitingListForm: FC<{
   if (state === 'done')
     return (
       <p className="tf-checkout-note tf-checkout-tickets__wl-done">
-        You’re on the waiting list — we’ll email you if a spot opens.
+        {tr('tickets.waitingListJoined')}
       </p>
     )
 
@@ -52,14 +53,14 @@ const WaitingListForm: FC<{
       <FieldRow>
         <Field>
           <Input
-            placeholder="First name"
+            placeholder={tr('tickets.firstName')}
             value={form.firstName}
             onChange={(e) => setForm((f) => ({ ...f, firstName: e.target.value }))}
           />
         </Field>
         <Field>
           <Input
-            placeholder="Last name"
+            placeholder={tr('tickets.lastName')}
             value={form.lastName}
             onChange={(e) => setForm((f) => ({ ...f, lastName: e.target.value }))}
           />
@@ -67,7 +68,7 @@ const WaitingListForm: FC<{
       </FieldRow>
       <Field>
         <Input
-          placeholder="Email"
+          placeholder={tr('tickets.email')}
           value={form.email}
           onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
         />
@@ -87,7 +88,7 @@ const WaitingListForm: FC<{
         disabled={!ok || state === 'busy'}
         variant="secondary"
       >
-        Join the waiting list
+        {tr('tickets.joinWaitingList')}
       </Button>
       {error && <p className="tf-checkout-error-text">{error}</p>}
     </div>
@@ -343,6 +344,11 @@ export const Tickets: FC<TicketsProps> = ({
                   </button>
                 )}
               </div>
+              {/* Only on a type that can be bought, as the old checkout does —
+                  "Selling fast" beside "Sold out" contradicts itself. */}
+              {t.badgeText && !unavailable && (
+                <span className="tf-checkout-tickets__badge">{t.badgeText}</span>
+              )}
               <div className="tf-checkout-tickets__price">
                 {discounted && (
                   <span className="tf-checkout-tickets__old">
@@ -355,18 +361,18 @@ export const Tickets: FC<TicketsProps> = ({
                     isFree && 'tf-checkout-tickets__amount--free'
                   )}
                 >
-                  {isFree ? 'FREE' : money(sym, t.price)}
+                  {isFree ? tr('tickets.free') : money(sym, t.price)}
                 </span>
                 {/* Fees sub-line (the "(… with fees)" the old checkout shows) —
                   omitted for free/sold-out types. */}
                 {!isFree && !t.soldOut && (
                   <span className="tf-checkout-tickets__fees">
-                    ({money(sym, t.priceWithFees)} with fees)
+                    {tr('tickets.withFees', { price: money(sym, t.priceWithFees) })}
                   </span>
                 )}
                 {t.depositPercent != null && (
                   <span className="tf-checkout-tickets__deposit">
-                    {t.depositPercent.toFixed(2)}% DEPOSIT
+                    {tr('tickets.deposit', { percent: t.depositPercent.toFixed(2) })}
                   </span>
                 )}
               </div>
@@ -420,7 +426,7 @@ export const Tickets: FC<TicketsProps> = ({
                 className="tf-checkout-tickets__wl-toggle"
                 onClick={() => setWlOpen((w) => ({ ...w, [t.id]: true }))}
               >
-                Join the waiting list
+                {tr('tickets.joinWaitingList')}
               </button>
             ))}
         </div>
@@ -519,7 +525,7 @@ export const Tickets: FC<TicketsProps> = ({
               className="tf-checkout-tickets__promo-toggle"
               onClick={() => setPromoOpen(true)}
             >
-              Got a promo code? Click here
+              {tr('tickets.gotPromoCode')}
             </button>
           ) : (
             <>

package/src/styles/tickets.css

@@ -39,6 +39,21 @@
   font-size: 14px;
   line-height: 1.25;
 }
+/* Organiser's scarcity badge ("Selling fast"). Its own token so a host can
+   recolour it without also recolouring validation errors. */
+.tf-checkout-tickets__badge {
+  display: inline-block;
+  max-width: 100%;
+  margin-top: 4px;
+  padding: 2px 7px;
+  border-radius: 3px;
+  background: var(--tf-checkout-badge, var(--tf-checkout-error));
+  color: var(--tf-checkout-badge-contrast, #fff);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
 .tf-checkout-tickets__description-toggle {
   appearance: none;
   border: 0;
@@ -145,7 +160,9 @@
   font-weight: 400;
   text-align: center;
   cursor: pointer;
-  transition: border-color 0.12s, background 0.12s;
+  transition:
+    border-color 0.12s,
+    background 0.12s;
 }
 .tf-checkout-tickets__promo-toggle:hover {
   background: color-mix(in srgb, var(--tf-checkout-text) 78%, var(--tf-checkout-surface));

package/src/ui/InstallmentPicker.tsx

@@ -52,7 +52,9 @@ export const useInstallmentPicker = () => {
                 {o.count} × {o.per_installment_formatted ?? o.per_installment}
               </span>
               <span className="tf-checkout-installments__meta">
-                {o.total_formatted ? `${o.total_formatted} total` : ''}
+                {o.total_formatted
+                  ? t('payment.installmentTotal', { amount: o.total_formatted })
+                  : ''}
                 {o.diff_from_original_formatted
                   ? ` · ${o.diff_from_original_formatted}`
                   : ''}
@@ -61,7 +63,7 @@ export const useInstallmentPicker = () => {
           ))}
         </div>
         <Button variant="ghost" block onClick={() => choose(null)}>
-          Pay in full instead
+          {t('payment.payInFull')}
         </Button>
       </div>
     </div>

package/src/ui/Loader.tsx

@@ -1,12 +1,16 @@
 import React, { type FC } from 'react'
 
 import { cx } from './cx'
+import { useT } from './I18nProvider'
 
 /** A spinner that inherits `currentColor` (so it works inside buttons/text). */
-export const Loader: FC<{ className?: string }> = ({ className }) => (
-  <span
-    className={cx('tf-checkout-loader', className)}
-    role="status"
-    aria-label="Loading"
-  />
-)
+export const Loader: FC<{ className?: string }> = ({ className }) => {
+  const t = useT()
+  return (
+    <span
+      className={cx('tf-checkout-loader', className)}
+      role="status"
+      aria-label={t('common.loading')}
+    />
+  )
+}

package/src/ui/Stepper.tsx

@@ -1,6 +1,7 @@
 import React, { type FC } from 'react'
 
 import { cx } from './cx'
+import { useT } from './I18nProvider'
 
 /** Quantity ± control (ticket / add-on quantities). */
 export const Stepper: FC<{
@@ -11,26 +12,29 @@ export const Stepper: FC<{
   step?: number
   disabled?: boolean
   className?: string
-}> = ({ value, onChange, min = 0, max = Infinity, step = 1, disabled, className }) => (
-  <div className={cx('tf-checkout-stepper', className)}>
-    <button
-      type="button"
-      className="tf-checkout-stepper__btn"
-      aria-label="Decrease"
-      disabled={disabled || value <= min}
-      onClick={() => onChange(Math.max(min, value - step))}
-    >
-      −
-    </button>
-    <span className="tf-checkout-stepper__value">{value}</span>
-    <button
-      type="button"
-      className="tf-checkout-stepper__btn"
-      aria-label="Increase"
-      disabled={disabled || value >= max}
-      onClick={() => onChange(Math.min(max, value + step))}
-    >
-      +
-    </button>
-  </div>
-)
+}> = ({ value, onChange, min = 0, max = Infinity, step = 1, disabled, className }) => {
+  const t = useT()
+  return (
+    <div className={cx('tf-checkout-stepper', className)}>
+      <button
+        type="button"
+        className="tf-checkout-stepper__btn"
+        aria-label={t('common.decrease')}
+        disabled={disabled || value <= min}
+        onClick={() => onChange(Math.max(min, value - step))}
+      >
+        −
+      </button>
+      <span className="tf-checkout-stepper__value">{value}</span>
+      <button
+        type="button"
+        className="tf-checkout-stepper__btn"
+        aria-label={t('common.increase')}
+        disabled={disabled || value >= max}
+        onClick={() => onChange(Math.min(max, value + step))}
+      >
+        +
+      </button>
+    </div>
+  )
+}