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

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/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('')
@@ -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">
@@ -529,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>
@@ -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>}