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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-beta.1",
+  "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

@@ -122,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}>
@@ -160,7 +160,7 @@ export const AuthModal: FC<AuthModalProps> = ({
               )}
               onClick={() => auth.showLogin(auth.suggestedEmail)}
             >
-              Login
+              {t('auth.logIn')}
             </button>
             <button
               type="button"
@@ -172,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,6 +34,7 @@ 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'
@@ -85,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
@@ -417,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(
@@ -433,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/>
@@ -485,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">
@@ -506,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'))}
@@ -519,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'))}
@@ -536,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'))}
@@ -548,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'))}
@@ -570,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>
         )}
@@ -598,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
@@ -628,10 +633,10 @@ export const BillingInfo: FC<BillingInfoProps> = ({
               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 }))}
@@ -641,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)}
@@ -720,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 && (
@@ -753,7 +760,7 @@ export const BillingInfo: FC<BillingInfoProps> = ({
                 onContinue?.()
               }}
             >
-              {buttonLabel}
+              {buttonText}
             </Button>
           </>
         )}

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(