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

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'
@@ -34,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('')
@@ -42,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>
     )
 
@@ -51,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 }))}
           />
@@ -66,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 }))}
         />
@@ -86,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>
@@ -124,7 +126,7 @@ export const Tickets: FC<TicketsProps> = ({
   eventId,
   title = false,
   onContinue,
-  buttonLabel = 'Get tickets',
+  buttonLabel,
   timeSlotDates,
   step,
   onSelectSeats,
@@ -133,7 +135,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 +260,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 +318,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,10 +338,17 @@ 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>
+              {/* 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">
@@ -346,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>
@@ -367,17 +382,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}
@@ -407,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>
@@ -447,7 +466,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 +486,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 +504,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
@@ -504,14 +525,16 @@ export const Tickets: FC<TicketsProps> = ({
               className="tf-checkout-tickets__promo-toggle"
               onClick={() => setPromoOpen(true)}
             >
-              Got a promo code? Click here
+              {tr('tickets.gotPromoCode')}
             </button>
           ) : (
             <>
               <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 +574,10 @@ export const Tickets: FC<TicketsProps> = ({
           disabled={checkout.isBusy || selected.length === 0}
         >
           {checkout.isBusy
-            ? 'Reserving…'
+            ? tr('tickets.reserving')
             : selectionIsTable
-              ? 'Reserve tables'
-              : buttonLabel}
+              ? tr('tickets.reserveTables')
+              : buttonText}
         </Button>
       )}
 

package/src/sections/billing/BillingAddressFields.tsx

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

package/src/sections/billing/TicketHoldersCard.tsx

@@ -3,6 +3,7 @@ import { PhoneInput, type CountryIso2 } from 'react-international-phone'
 
 import { Card, SectionHeader } from '../../ui/Card'
 import { Field, FieldRow, Input } from '../../ui/Field'
+import { useT } from '../../ui/I18nProvider'
 import type { BillingFieldError, HolderDraft } from './types'
 
 interface TicketHoldersCardProps {
@@ -24,101 +25,109 @@ export const TicketHoldersCard: FC<TicketHoldersCardProps> = ({
   fieldError,
   renderCustomFields,
   patchHolder,
-}) => (
-  <Card className="tf-checkout-billing__holders-card">
-    <SectionHeader title="Ticket Holders" />
-    {holders.map((holder, index) => {
-      const firstNameKey = `Ticket ${index + 1} holder first name`
-      const lastNameKey = `Ticket ${index + 1} holder last name`
-      const emailKey = `Ticket ${index + 1} holder email`
-      const phoneKey = `Ticket ${index + 1} holder phone`
+}) => {
+  const t = useT()
 
-      return (
-        <div key={index} className="tf-checkout-billing__holder">
-          <div className="tf-checkout-billing__holder-title">Ticket {index + 1}</div>
-          {holderNamesRequired && (
-            <FieldRow>
-              <Field
-                label="First Name *"
-                error={fieldError(firstNameKey, 'First name is required.')}
-                invalid={Boolean(fieldError(firstNameKey))}
-              >
-                <Input
-                  value={holder.firstName}
-                  required
+  return (
+    <Card className="tf-checkout-billing__holders-card">
+      <SectionHeader title={t('billing.ticketHolders')} />
+      {holders.map((holder, index) => {
+        const firstNameKey = `Ticket ${index + 1} holder first name`
+        const lastNameKey = `Ticket ${index + 1} holder last name`
+        const emailKey = `Ticket ${index + 1} holder email`
+        const phoneKey = `Ticket ${index + 1} holder phone`
+
+        return (
+          <div key={index} className="tf-checkout-billing__holder">
+            <div className="tf-checkout-billing__holder-title">
+              {t('billing.holderTitle', { number: index + 1 })}
+            </div>
+            {holderNamesRequired && (
+              <FieldRow>
+                <Field
+                  label={t('billing.holderFirstName')}
+                  error={fieldError(firstNameKey, t('billing.firstNameRequired'))}
                   invalid={Boolean(fieldError(firstNameKey))}
-                  aria-invalid={Boolean(fieldError(firstNameKey))}
-                  onChange={(event) =>
-                    patchHolder(index, { firstName: event.target.value })
-                  }
-                />
-              </Field>
-              <Field
-                label="Last Name *"
-                error={fieldError(lastNameKey, 'Last name is required.')}
-                invalid={Boolean(fieldError(lastNameKey))}
-              >
-                <Input
-                  value={holder.lastName}
-                  required
+                >
+                  <Input
+                    value={holder.firstName}
+                    required
+                    invalid={Boolean(fieldError(firstNameKey))}
+                    aria-invalid={Boolean(fieldError(firstNameKey))}
+                    onChange={(event) =>
+                      patchHolder(index, { firstName: event.target.value })
+                    }
+                  />
+                </Field>
+                <Field
+                  label={t('billing.holderLastName')}
+                  error={fieldError(lastNameKey, t('billing.lastNameRequired'))}
                   invalid={Boolean(fieldError(lastNameKey))}
-                  aria-invalid={Boolean(fieldError(lastNameKey))}
-                  onChange={(event) =>
-                    patchHolder(index, { lastName: event.target.value })
-                  }
-                />
-              </Field>
-            </FieldRow>
-          )}
-          {collectHolderContact && (
-            <FieldRow>
-              <Field
-                label="Email Address *"
-                error={fieldError(emailKey, 'Enter a valid email address.')}
-                invalid={Boolean(fieldError(emailKey))}
-              >
-                <Input
-                  type="email"
-                  autoComplete="email"
-                  value={holder.email}
-                  required
+                >
+                  <Input
+                    value={holder.lastName}
+                    required
+                    invalid={Boolean(fieldError(lastNameKey))}
+                    aria-invalid={Boolean(fieldError(lastNameKey))}
+                    onChange={(event) =>
+                      patchHolder(index, { lastName: event.target.value })
+                    }
+                  />
+                </Field>
+              </FieldRow>
+            )}
+            {collectHolderContact && (
+              <FieldRow>
+                <Field
+                  label={t('billing.email')}
+                  error={fieldError(emailKey, t('billing.emailInvalid'))}
                   invalid={Boolean(fieldError(emailKey))}
-                  aria-invalid={Boolean(fieldError(emailKey))}
-                  onChange={(event) => patchHolder(index, { email: event.target.value })}
-                />
-              </Field>
-              <Field
-                label="Phone *"
-                error={fieldError(phoneKey, 'Enter a valid phone number.')}
-                invalid={Boolean(fieldError(phoneKey))}
-              >
-                <PhoneInput
-                  className="tf-checkout-phone"
-                  inputClassName={`tf-checkout-input tf-checkout-phone__input${
-                    fieldError(phoneKey) ? ' tf-checkout-input--invalid' : ''
-                  }`}
-                  defaultCountry={phoneCountry}
-                  // Matches the buyer phone field in ../BillingInfo.tsx — see
-                  // the note there on why the dial code must stay out of the
-                  // input.
-                  disableDialCodeAndPrefix
-                  showDisabledDialCodeAndPrefix
-                  disableDialCodePrefill
-                  value={holder.phone}
-                  required
-                  inputProps={{
-                    autoComplete: 'tel',
-                    'aria-label': phoneKey,
-                    'aria-invalid': Boolean(fieldError(phoneKey)),
-                  }}
-                  onChange={(phone) => patchHolder(index, { phone })}
-                />
-              </Field>
-            </FieldRow>
-          )}
-          {renderCustomFields(holder, index)}
-        </div>
-      )
-    })}
-  </Card>
-)
+                >
+                  <Input
+                    type="email"
+                    autoComplete="email"
+                    value={holder.email}
+                    required
+                    invalid={Boolean(fieldError(emailKey))}
+                    aria-invalid={Boolean(fieldError(emailKey))}
+                    onChange={(event) =>
+                      patchHolder(index, { email: event.target.value })
+                    }
+                  />
+                </Field>
+                <Field
+                  label={t('billing.phone')}
+                  error={fieldError(phoneKey, t('billing.phoneInvalid'))}
+                  invalid={Boolean(fieldError(phoneKey))}
+                >
+                  <PhoneInput
+                    className="tf-checkout-phone"
+                    inputClassName={`tf-checkout-input tf-checkout-phone__input${
+                      fieldError(phoneKey) ? ' tf-checkout-input--invalid' : ''
+                    }`}
+                    defaultCountry={phoneCountry}
+                    // Matches the buyer phone field in ../BillingInfo.tsx — see
+                    // the note there on why the dial code must stay out of the
+                    // input.
+                    disableDialCodeAndPrefix
+                    showDisabledDialCodeAndPrefix
+                    disableDialCodePrefill
+                    value={holder.phone}
+                    required
+                    inputProps={{
+                      autoComplete: 'tel',
+                      'aria-label': phoneKey,
+                      'aria-invalid': Boolean(fieldError(phoneKey)),
+                    }}
+                    onChange={(phone) => patchHolder(index, { phone })}
+                  />
+                </Field>
+              </FieldRow>
+            )}
+            {renderCustomFields(holder, index)}
+          </div>
+        )
+      })}
+    </Card>
+  )
+}

package/src/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/CheckoutProvider.tsx

@@ -148,7 +148,11 @@ export const CheckoutProvider: FC<CheckoutProviderProps> = ({
       // binding); absent ⇒ the self-providing branch owns it. The choice is
       // static per mount, so the two branches never swap and violate the rules
       // of hooks.
-      value ? <CheckoutRoot checkout={value} {...rest} /> : <SelfProvidedCheckout {...rest} />
+      value ? (
+        <CheckoutRoot checkout={value} {...rest} />
+      ) : (
+        <SelfProvidedCheckout {...rest} />
+      )
     }
   </I18nProvider>
 )

package/src/ui/InstallmentPicker.tsx

@@ -10,8 +10,10 @@ import React, { useCallback, useState } from 'react'
 import type { InstallmentOffer } from 'tf-checkout-shared'
 
 import { Button } from './Button'
+import { useT } from './I18nProvider'
 
 export const useInstallmentPicker = () => {
+  const t = useT()
   const [pending, setPending] = useState<{
     offers: InstallmentOffer[]
     resolve: (o: InstallmentOffer | null) => void
@@ -34,10 +36,10 @@ export const useInstallmentPicker = () => {
     <div
       className="tf-checkout-installments"
       role="dialog"
-      aria-label="Choose installments"
+      aria-label={t('payment.chooseInstallments')}
     >
       <div className="tf-checkout-installments__box">
-        <strong>Pay in installments?</strong>
+        <strong>{t('payment.payInInstallments')}</strong>
         <div className="tf-checkout-installments__list">
           {pending.offers.map((o, i) => (
             <button
@@ -50,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}`
                   : ''}
@@ -59,7 +63,7 @@ export const useInstallmentPicker = () => {
           ))}
         </div>
         <Button variant="ghost" block onClick={() => choose(null)}>
-          Pay in full instead
+          {t('payment.payInFull')}
         </Button>
       </div>
     </div>