@tribe-nest/forge 3.25.0 → 3.29.0

package/src/ui/styled/Checkout.tsx

@@ -4,6 +4,7 @@ import { CreditCard, MapPin, Package, User } from "lucide-react";
 import { useCheckout, CHECKOUT_STAGE_ORDER, type CheckoutStage } from "../headless/checkout/useCheckout";
 import type { SelectedShippingRate } from "../headless/checkout/useCheckout";
 import type { ShippingRate, ShippingGroup } from "../../data/queries/useShipping";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useFormatCurrency } from "../format/useFormatCurrency";
@@ -64,6 +65,8 @@ export function Checkout({
   style,
 }: CheckoutProps) {
   const theme = useForgeTheme();
+  // `tr`, not `t`: a ticket line below binds `t` as its own map callback param.
+  const tr = useForgeT();
   const { formatCurrency } = useFormatCurrency();
   // Store display mode (site config) — drives the pre-quote "incl. tax" caption.
   // Once the payment starts, the authoritative taxQuote from start-payment wins.
@@ -177,7 +180,9 @@ export function Checkout({
     return <Loading fullPage />;
   }
 
-  if (c.cartItems.length === 0) {
+  // Tickets count: a cart holding only tickets (buyer skipped the add-ons)
+  // is NOT empty, and this page is the only checkout it has.
+  if (c.cartItems.length === 0 && c.ticketItems.length === 0) {
     return (
       <div
         className={["w-full max-w-4xl mx-auto p-6", className].filter(Boolean).join(" ")}
@@ -185,12 +190,12 @@ export function Checkout({
       >
         <div className="text-center py-12">
           <h1 className="text-2xl font-bold mb-4" style={{ color: theme.colors.text }}>
-            Your cart is empty
+            {tr("forge.checkout.empty_title")}
           </h1>
           <p className="mb-6" style={{ color: `${theme.colors.text}${alpha(0.7)}` }}>
-            Add some items to your cart before checking out.
+            {tr("forge.checkout.empty_body")}
           </p>
-          <PrimaryButton text="Continue Shopping" onClick={() => go(storePath)} />
+          <PrimaryButton text={tr("forge.checkout.continue_shopping")} onClick={() => go(storePath)} />
         </div>
       </div>
     );
@@ -198,14 +203,14 @@ export function Checkout({
 
   const stages = c.hasPhysicalProduct
     ? [
-        { key: "userDetails" as const, label: "User", icon: User },
-        { key: "shippingAddress" as const, label: "Address", icon: MapPin },
-        { key: "shippingRates" as const, label: "Shipping", icon: Package },
-        { key: "payment" as const, label: "Payment", icon: CreditCard },
+        { key: "userDetails" as const, label: tr("forge.checkout.stage_user"), icon: User },
+        { key: "shippingAddress" as const, label: tr("forge.checkout.stage_address"), icon: MapPin },
+        { key: "shippingRates" as const, label: tr("forge.checkout.stage_shipping"), icon: Package },
+        { key: "payment" as const, label: tr("forge.checkout.stage_payment"), icon: CreditCard },
       ]
     : [
-        { key: "userDetails" as const, label: "User", icon: User },
-        { key: "payment" as const, label: "Payment", icon: CreditCard },
+        { key: "userDetails" as const, label: tr("forge.checkout.stage_user"), icon: User },
+        { key: "payment" as const, label: tr("forge.checkout.stage_payment"), icon: CreditCard },
       ];
 
   const currentIdx = stageIdx(c.currentStage);
@@ -270,29 +275,35 @@ export function Checkout({
             >
               <div className="pb-6" style={{ borderTop: `1px solid ${theme.colors.primary}${alpha(0.2)}` }}>
                 <h3 className="text-lg font-semibold mb-4" style={{ color: theme.colors.text }}>
-                  Already have an account?
+                  {tr("forge.checkout.have_account")}
                 </h3>
-                <PrimaryButton text="Login" onClick={handleLogin} fullWidth />
+                <PrimaryButton text={tr("forge.checkout.login")} onClick={handleLogin} fullWidth />
               </div>
               <h2 className="text-2xl font-bold mb-6" style={{ color: theme.colors.text }}>
-                Or
+                {tr("forge.checkout.or")}
               </h2>
 
               <div className="mb-6">
                 <h3 className="text-lg font-semibold mb-4" style={{ color: theme.colors.text }}>
-                  Continue as Guest
+                  {tr("forge.checkout.guest_title")}
                 </h3>
                 <form onSubmit={guestForm.handleSubmit(c.submitGuest)} className="space-y-4">
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div>
                       <label className="block text-sm font-medium mb-2" style={{ color: theme.colors.text }}>
-                        First Name
+                        {tr("forge.checkout.first_name")}
                       </label>
                       <Controller
                         control={guestForm.control}
                         name="firstName"
-                        rules={{ required: "First name is required" }}
-                        render={({ field }) => <input {...field} placeholder="First Name" style={inputStyle} />}
+                        rules={{ required: tr("forge.checkout.first_name_required") }}
+                        render={({ field }) => (
+                          <input
+                            {...field}
+                            placeholder={tr("forge.checkout.first_name_placeholder")}
+                            style={inputStyle}
+                          />
+                        )}
                       />
                       {guestForm.formState.errors.firstName && (
                         <p className="text-sm text-red-500 mt-1">{guestForm.formState.errors.firstName.message}</p>
@@ -300,13 +311,19 @@ export function Checkout({
                     </div>
                     <div>
                       <label className="block text-sm font-medium mb-2" style={{ color: theme.colors.text }}>
-                        Last Name
+                        {tr("forge.checkout.last_name")}
                       </label>
                       <Controller
                         control={guestForm.control}
                         name="lastName"
-                        rules={{ required: "Last name is required" }}
-                        render={({ field }) => <input {...field} placeholder="Last Name" style={inputStyle} />}
+                        rules={{ required: tr("forge.checkout.last_name_required") }}
+                        render={({ field }) => (
+                          <input
+                            {...field}
+                            placeholder={tr("forge.checkout.last_name_placeholder")}
+                            style={inputStyle}
+                          />
+                        )}
                       />
                       {guestForm.formState.errors.lastName && (
                         <p className="text-sm text-red-500 mt-1">{guestForm.formState.errors.lastName.message}</p>
@@ -315,16 +332,26 @@ export function Checkout({
                   </div>
                   <div>
                     <label className="block text-sm font-medium mb-2" style={{ color: theme.colors.text }}>
-                      Email
+                      {tr("forge.checkout.email")}
                     </label>
                     <Controller
                       control={guestForm.control}
                       name="email"
                       rules={{
-                        required: "Email is required",
-                        pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, message: "Invalid email address" },
+                        required: tr("forge.checkout.email_required"),
+                        pattern: {
+                          value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                          message: tr("forge.checkout.email_invalid"),
+                        },
                       }}
-                      render={({ field }) => <input {...field} type="email" placeholder="Email" style={inputStyle} />}
+                      render={({ field }) => (
+                        <input
+                          {...field}
+                          type="email"
+                          placeholder={tr("forge.checkout.email_placeholder")}
+                          style={inputStyle}
+                        />
+                      )}
                     />
                     {guestForm.formState.errors.email && (
                       <p className="text-sm text-red-500 mt-1">{guestForm.formState.errors.email.message}</p>
@@ -340,10 +367,10 @@ export function Checkout({
                       style={{ accentColor: theme.colors.primary }}
                     />
                     <label htmlFor="joinEmailList" className="text-sm" style={{ color: theme.colors.text }}>
-                      Sign up to receive updates
+                      {tr("forge.checkout.join_email_list")}
                     </label>
                   </div>
-                  <PrimaryButton text="Continue as Guest" type="submit" fullWidth />
+                  <PrimaryButton text={tr("forge.checkout.guest_submit")} type="submit" fullWidth />
                 </form>
               </div>
             </div>
@@ -360,18 +387,20 @@ export function Checkout({
               }}
             >
               <h2 className="text-2xl font-bold mb-6" style={{ color: theme.colors.text }}>
-                Shipping Address
+                {tr("forge.checkout.shipping_address_title")}
               </h2>
               <form onSubmit={shippingForm.handleSubmit(c.submitAddress)} className="space-y-4">
                 <div>
                   <label className="block text-sm font-medium mb-2" style={{ color: theme.colors.text }}>
-                    Address Line 1
+                    {tr("forge.checkout.address1_label")}
                   </label>
                   <Controller
                     control={shippingForm.control}
                     name="address1"
-                    rules={{ required: "Address is required" }}
-                    render={({ field }) => <input {...field} placeholder="12 address avenue, Bankstown" style={inputStyle} />}
+                    rules={{ required: tr("forge.checkout.address_required") }}
+                    render={({ field }) => (
+                      <input {...field} placeholder={tr("forge.checkout.address1_placeholder")} style={inputStyle} />
+                    )}
                   />
                   {shippingForm.formState.errors.address1 && (
                     <p className="text-sm text-red-500 mt-1">{shippingForm.formState.errors.address1.message}</p>
@@ -381,13 +410,15 @@ export function Checkout({
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
                     <label className="block text-sm font-medium mb-2" style={{ color: theme.colors.text }}>
-                      City
+                      {tr("forge.checkout.city_label")}
                     </label>
                     <Controller
                       control={shippingForm.control}
                       name="city"
-                      rules={{ required: "City is required" }}
-                      render={({ field }) => <input {...field} placeholder="Sydney" style={inputStyle} />}
+                      rules={{ required: tr("forge.checkout.city_required") }}
+                      render={({ field }) => (
+                        <input {...field} placeholder={tr("forge.checkout.city_placeholder")} style={inputStyle} />
+                      )}
                     />
                     {shippingForm.formState.errors.city && (
                       <p className="text-sm text-red-500 mt-1">{shippingForm.formState.errors.city.message}</p>
@@ -396,13 +427,15 @@ export function Checkout({
 
                   <div>
                     <label className="block text-sm font-medium mb-2" style={{ color: theme.colors.text }}>
-                      Postal Code
+                      {tr("forge.checkout.zip_label")}
                     </label>
                     <Controller
                       control={shippingForm.control}
                       name="zip"
-                      rules={{ required: "Postal code is required" }}
-                      render={({ field }) => <input {...field} placeholder="2200" style={inputStyle} />}
+                      rules={{ required: tr("forge.checkout.zip_required") }}
+                      render={({ field }) => (
+                        <input {...field} placeholder={tr("forge.checkout.zip_placeholder")} style={inputStyle} />
+                      )}
                     />
                     {shippingForm.formState.errors.zip && (
                       <p className="text-sm text-red-500 mt-1">{shippingForm.formState.errors.zip.message}</p>
@@ -413,15 +446,15 @@ export function Checkout({
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
                     <label className="block text-sm font-medium mb-2" style={{ color: theme.colors.text }}>
-                      Country
+                      {tr("forge.checkout.country_label")}
                     </label>
                     <Controller
                       control={shippingForm.control}
                       name="countryCode"
-                      rules={{ required: "Country is required" }}
+                      rules={{ required: tr("forge.checkout.country_required") }}
                       render={({ field }) => (
                         <select {...field} style={inputStyle}>
-                          <option value="">Select Country</option>
+                          <option value="">{tr("forge.checkout.country_select")}</option>
                           {c.countries.map((country) => (
                             <option key={country.code} value={country.code}>
                               {country.name}
@@ -438,15 +471,15 @@ export function Checkout({
                   {selectedCountry?.states && selectedCountry.states.length > 0 && (
                     <div>
                       <label className="block text-sm font-medium mb-2" style={{ color: theme.colors.text }}>
-                        State/Province
+                        {tr("forge.checkout.state_label")}
                       </label>
                       <Controller
                         control={shippingForm.control}
                         name="stateCode"
-                        rules={{ required: "State/Province is required" }}
+                        rules={{ required: tr("forge.checkout.state_required") }}
                         render={({ field }) => (
                           <select {...field} style={inputStyle}>
-                            <option value="">Select State/Province</option>
+                            <option value="">{tr("forge.checkout.state_select")}</option>
                             {selectedCountry.states!.map((state) => (
                               <option key={state.code} value={state.code}>
                                 {state.name}
@@ -464,13 +497,15 @@ export function Checkout({
 
                 <div>
                   <label className="block text-sm font-medium mb-2" style={{ color: theme.colors.text }}>
-                    Phone Number
+                    {tr("forge.checkout.phone_label")}
                   </label>
                   <Controller
                     control={shippingForm.control}
                     name="phone"
-                    rules={{ required: "Phone number is required" }}
-                    render={({ field }) => <input {...field} placeholder="Phone number" style={inputStyle} />}
+                    rules={{ required: tr("forge.checkout.phone_required") }}
+                    render={({ field }) => (
+                      <input {...field} placeholder={tr("forge.checkout.phone_placeholder")} style={inputStyle} />
+                    )}
                   />
                   {shippingForm.formState.errors.phone && (
                     <p className="text-sm text-red-500 mt-1">{shippingForm.formState.errors.phone.message}</p>
@@ -478,9 +513,18 @@ export function Checkout({
                 </div>
 
                 <div className="flex gap-4 pt-4">
-                  {!c.user && <SecondaryButton text="Back" onClick={() => c.setCurrentStage("userDetails")} />}
+                  {!c.user && (
+                    <SecondaryButton
+                      text={tr("forge.checkout.back")}
+                      onClick={() => c.setCurrentStage("userDetails")}
+                    />
+                  )}
                   <PrimaryButton
-                    text={c.isFetchingRates ? "Fetching shipping rates..." : "Continue to Shipping"}
+                    text={
+                      c.isFetchingRates
+                        ? tr("forge.checkout.fetching_rates")
+                        : tr("forge.checkout.continue_to_shipping")
+                    }
                     type="submit"
                     fullWidth
                     disabled={c.isFetchingRates}
@@ -501,7 +545,7 @@ export function Checkout({
               }}
             >
               <h2 className="text-2xl font-bold mb-6" style={{ color: theme.colors.text }}>
-                Shipping Options
+                {tr("forge.checkout.shipping_options_title")}
               </h2>
 
               <ShippingRateSelector
@@ -512,9 +556,12 @@ export function Checkout({
               />
 
               <div className="flex gap-4 pt-6">
-                <SecondaryButton text="Back" onClick={() => c.setCurrentStage("shippingAddress")} />
+                <SecondaryButton
+                  text={tr("forge.checkout.back")}
+                  onClick={() => c.setCurrentStage("shippingAddress")}
+                />
                 <PrimaryButton
-                  text="Continue to Payment"
+                  text={tr("forge.checkout.continue_to_payment")}
                   onClick={c.confirmRates}
                   fullWidth
                   disabled={c.shippingGroups.some((g) => g.selectable && !c.selections[g.id])}
@@ -548,12 +595,17 @@ export function Checkout({
               }}
             >
               <h2 className="text-2xl font-bold mb-6" style={{ color: theme.colors.text }}>
-                Payment Information
+                {tr("forge.checkout.payment_title")}
               </h2>
               <p className="text-sm mb-8" style={{ color: `${theme.colors.text}${alpha(0.7)}` }}>
-                This is a free checkout. You will not be charged anything.
+                {tr("forge.checkout.free_checkout_body")}
               </p>
-              <PrimaryButton text="Complete Checkout" onClick={handleFreeCheckout} fullWidth disabled={c.isFreeCheckoutLoading} />
+              <PrimaryButton
+                text={tr("forge.checkout.complete_checkout")}
+                onClick={handleFreeCheckout}
+                fullWidth
+                disabled={c.isFreeCheckoutLoading}
+              />
             </div>
           )}
         </div>
@@ -569,13 +621,13 @@ export function Checkout({
             }}
           >
             <h3 className="text-xl font-bold mb-4" style={{ color: theme.colors.text }}>
-              Order Summary
+              {tr("forge.checkout.summary_title")}
             </h3>
 
             {/* Customer */}
             <div className="mb-4 pb-4" style={{ borderBottom: `1px solid ${theme.colors.primary}${alpha(0.2)}` }}>
               <h4 className="font-semibold mb-2" style={{ color: theme.colors.text }}>
-                Customer
+                {tr("forge.checkout.summary_customer")}
               </h4>
               {c.user ? (
                 <div className="text-sm">
@@ -593,7 +645,7 @@ export function Checkout({
                 </div>
               ) : (
                 <p className="text-sm" style={{ color: `${theme.colors.text}${alpha(0.5)}` }}>
-                  Guest checkout
+                  {tr("forge.checkout.guest_checkout")}
                 </p>
               )}
             </div>
@@ -602,7 +654,7 @@ export function Checkout({
             {c.hasPhysicalProduct && c.shippingData && (
               <div className="mb-4 pb-4" style={{ borderBottom: `1px solid ${theme.colors.primary}${alpha(0.2)}` }}>
                 <h4 className="font-semibold mb-2" style={{ color: theme.colors.text }}>
-                  Shipping Address
+                  {tr("forge.checkout.summary_shipping_address")}
                 </h4>
                 <div className="text-sm">
                   <p style={{ color: theme.colors.text }}>{c.shippingData.address1}</p>
@@ -619,9 +671,37 @@ export function Checkout({
             {/* Cart Items */}
             <div className="mb-4 pb-4" style={{ borderBottom: `1px solid ${theme.colors.primary}${alpha(0.2)}` }}>
               <h4 className="font-semibold mb-2" style={{ color: theme.colors.text }}>
-                Items
+                {tr("forge.checkout.summary_items")}
               </h4>
               <div className="space-y-2">
+                {/* Ticket lines first: they are what the bundle is FOR, and the
+                    subtotal already includes them, so a summary without them
+                    reads as a wrong total. */}
+                {c.ticketItems.flatMap((t) =>
+                  Object.entries(t.tickets)
+                    .filter(([, qty]) => qty > 0)
+                    .map(([ticketId, qty]) => {
+                      const meta = t.ticketMeta[ticketId];
+                      return (
+                        <div key={`${t.eventId}-${ticketId}`} className="flex justify-between text-sm" data-testid="summary-ticket-line">
+                          <div className="flex-1">
+                            <p className="font-medium" style={{ color: theme.colors.text }}>
+                              {meta?.title ?? tr("forge.checkout.ticket_fallback")}
+                            </p>
+                            <p className="text-xs" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
+                              {t.eventTitle}
+                            </p>
+                            <p className="text-xs" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
+                              {tr("forge.checkout.qty", { count: qty })}
+                            </p>
+                          </div>
+                          <p className="font-medium" style={{ color: theme.colors.text }}>
+                            {formatCurrency((meta?.price ?? 0) * qty)}
+                          </p>
+                        </div>
+                      );
+                    }),
+                )}
                 {c.cartItems.map((item) => (
                   <div
                     key={`${item.productId}-${item.productVariantId}-${item.isGift}-${item.recipientEmail}`}
@@ -637,11 +717,11 @@ export function Checkout({
                       <CartLineOptions item={item} accent={theme.colors.primary} size="small" />
                       {item.isGift && (
                         <p className="text-xs" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
-                          Gift for {item.recipientName}
+                          {tr("forge.checkout.gift_for", { recipient_name: item.recipientName ?? "" })}
                         </p>
                       )}
                       <p className="text-xs" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
-                        Qty: {item.quantity}
+                        {tr("forge.checkout.qty", { count: item.quantity })}
                       </p>
                     </div>
                     <p className="font-medium" style={{ color: theme.colors.text }}>
@@ -668,25 +748,25 @@ export function Checkout({
                     style={{ color: theme.colors.primary }}
                     onClick={() => c.setShowCouponInput(true)}
                   >
-                    Have a coupon code?
+                    {tr("forge.checkout.coupon_prompt")}
                   </button>
                 )}
                 {c.showCouponInput && !c.appliedCoupon && c.isCouponEditable && (
                   <div className="flex gap-2 items-end">
                     <div className="flex-1">
                       <p className="text-sm mb-1" style={{ color: theme.colors.text }}>
-                        Coupon Code
+                        {tr("forge.checkout.coupon_label")}
                       </p>
                       <input
-                        aria-label="Coupon code"
-                        placeholder="Enter coupon code"
+                        aria-label={tr("forge.checkout.aria_coupon_code")}
+                        placeholder={tr("forge.checkout.coupon_placeholder")}
                         style={inputStyle}
                         value={c.couponCode}
                         onChange={(e) => c.setCouponCode(e.target.value.toUpperCase())}
                       />
                     </div>
                     <PrimaryButton
-                      text={c.isApplyingCoupon ? "..." : "Apply"}
+                      text={c.isApplyingCoupon ? "..." : tr("forge.checkout.coupon_apply")}
                       onClick={c.applyCoupon}
                       disabled={c.isApplyingCoupon || !c.couponCode.trim()}
                     />
@@ -696,7 +776,7 @@ export function Checkout({
                     code is priced live, so promising "at payment" would be wrong. */}
                 {c.isBundle && !c.checkoutId && c.showCouponInput && !c.appliedCoupon && c.isCouponEditable && (
                   <p className="text-xs mt-1" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
-                    Your code is applied when you reach payment.
+                    {tr("forge.checkout.coupon_deferred_note")}
                   </p>
                 )}
                 {c.couponError && <p className="text-sm text-red-500 mt-1">{c.couponError}</p>}
@@ -707,19 +787,25 @@ export function Checkout({
                   >
                     <div>
                       <p className="text-sm font-semibold" style={{ color: theme.colors.primary }}>
-                        Coupon applied: {c.appliedCoupon.code}
+                        {tr("forge.checkout.coupon_applied", { code: c.appliedCoupon.code })}
                       </p>
                       {/* A bundle reports the cash that came off and the code it
                           came off under, but not the rate — so say the cash,
                           never a made-up "0% off". */}
                       <p className="text-xs" style={{ color: theme.colors.text }}>
                         {c.appliedCoupon.discountType === "percentage"
-                          ? `${c.appliedCoupon.discountValue}% off`
+                          ? // `String(...)` keeps a null rate rendering exactly as the old template
+                            // literal did, rather than quietly turning it into a made-up "0".
+                            tr("forge.checkout.coupon_percent_off", { percent: String(c.appliedCoupon.discountValue) })
                           : c.appliedCoupon.discountValue != null
-                            ? `${formatCurrency(c.appliedCoupon.discountValue)} off`
+                            ? tr("forge.checkout.coupon_amount_off", {
+                                amount: formatCurrency(c.appliedCoupon.discountValue),
+                              })
                             : c.appliedCoupon.discountAmount != null
-                              ? `${formatCurrency(c.appliedCoupon.discountAmount)} off`
-                              : "Applied at payment"}
+                              ? tr("forge.checkout.coupon_amount_off", {
+                                  amount: formatCurrency(c.appliedCoupon.discountAmount),
+                                })
+                              : tr("forge.checkout.coupon_applied_at_payment")}
                       </p>
                     </div>
                     {c.isCouponEditable && (
@@ -730,7 +816,7 @@ export function Checkout({
                         onClick={c.removeCoupon}
                         disabled={c.isApplyingCoupon}
                       >
-                        Remove
+                        {tr("forge.checkout.coupon_remove")}
                       </button>
                     )}
                   </div>
@@ -741,26 +827,35 @@ export function Checkout({
             {/* Totals */}
             <div className="space-y-2">
               <div className="flex justify-between">
-                <span style={{ color: theme.colors.text }}>Subtotal</span>
+                <span style={{ color: theme.colors.text }}>{tr("forge.checkout.subtotal")}</span>
                 <span style={{ color: theme.colors.text }}>{formatCurrency(c.subTotal)}</span>
               </div>
               {c.discountAmount > 0 && (
                 <div className="flex justify-between">
-                  <span style={{ color: theme.colors.text }}>Discount</span>
+                  <span style={{ color: theme.colors.text }}>{tr("forge.checkout.discount")}</span>
                   <span style={{ color: theme.colors.primary }}>-{formatCurrency(c.discountAmount)}</span>
                 </div>
               )}
               {c.shippingCost > 0 && (
                 <div className="flex justify-between">
-                  <span style={{ color: theme.colors.text }}>Shipping</span>
+                  <span style={{ color: theme.colors.text }}>{tr("forge.checkout.shipping")}</span>
                   <span style={{ color: theme.colors.text }}>{formatCurrency(c.shippingCost)}</span>
                 </div>
               )}
+              {/* The ticket booking fee, named BEFORE the buyer commits. It is
+                  charged either way; omitting the line here left a total that
+                  jumped past the subtotal with no explanation. */}
+              {c.bookingFeeCost > 0 && (
+                <div className="flex justify-between" data-testid="summary-booking-fee">
+                  <span style={{ color: theme.colors.text }}>{tr("forge.checkout.booking_fee")}</span>
+                  <span style={{ color: theme.colors.text }}>{formatCurrency(c.bookingFeeCost)}</span>
+                </div>
+              )}
               {/* Exclusive mode: the authoritative tax line, once the checkout
                   quote is known (added on top of the total). */}
               {taxSummary?.mode === "exclusive" && (
                 <div className="flex justify-between">
-                  <span style={{ color: theme.colors.text }}>Tax</span>
+                  <span style={{ color: theme.colors.text }}>{tr("forge.checkout.tax")}</span>
                   <span style={{ color: theme.colors.text }}>{taxSummary.formattedTax}</span>
                 </div>
               )}
@@ -768,11 +863,11 @@ export function Checkout({
                 className="flex justify-between font-bold text-lg pt-2"
                 style={{ borderTop: `1px solid ${theme.colors.primary}${alpha(0.2)}`, color: theme.colors.primary }}
               >
-                <span>Total</span>
+                <span>{tr("forge.checkout.total")}</span>
                 <span>
                   {c.chargedTotal
                     ? formatCurrency(c.chargedTotal.amount, c.chargedTotal.currency)
-                    : formatCurrency(c.subTotal + c.shippingCost)}
+                    : formatCurrency(c.subTotal + c.shippingCost + c.bookingFeeCost)}
                 </span>
               </div>
               {/* Inclusive mode: the total already contains tax — break out the
@@ -785,7 +880,7 @@ export function Checkout({
                 !taxSummary &&
                 pricesIncludeTax && (
                   <p className="text-xs text-right" style={{ color: `${theme.colors.text}${alpha(0.6)}`, margin: 0 }}>
-                    incl. tax
+                    {tr("forge.checkout.incl_tax")}
                   </p>
                 )
               )}
@@ -818,6 +913,7 @@ function PaymentSection({
   onBack?: () => void;
 }) {
   const theme = useForgeTheme();
+  const tr = useForgeT();
   const renderPay = usePaymentRenderer();
   const { paymentSecret, chargedAmount, chargedCurrency, returnUrl, isPaystack, isCreatingOrder, startError } = checkout;
   const { canOpenPaystack, openPaystackCheckout } = checkout;
@@ -839,7 +935,7 @@ function PaymentSection({
         borderRadius: `${theme.cornerRadius}px`,
       }}
     >
-      Back
+      {tr("forge.checkout.back")}
     </button>
   ) : null;
 
@@ -855,10 +951,10 @@ function PaymentSection({
         }}
       >
         <h2 className="text-2xl font-bold mb-2" style={{ color: theme.colors.text }}>
-          Payment
+          {tr("forge.checkout.payment_heading")}
         </h2>
         <p className="text-lg mb-4" style={{ color: theme.colors.text }}>
-          Payment is not configured
+          {tr("forge.checkout.payment_not_configured")}
         </p>
         {backButton}
       </div>
@@ -875,7 +971,7 @@ function PaymentSection({
       }}
     >
       <h2 className="text-2xl font-bold mb-6" style={{ color: theme.colors.text }}>
-        Payment Information
+        {tr("forge.checkout.payment_title")}
       </h2>
 
       {startError && (
@@ -893,13 +989,15 @@ function PaymentSection({
         expiredMessage={holdExpiredError || undefined}
         onRetry={retryHold}
         isRetrying={isRetryingHold}
-        secondaryAction={onBack ? { label: "Change your order", onClick: onBack } : undefined}
+        secondaryAction={onBack ? { label: tr("forge.checkout.hold_change_order"), onClick: onBack } : undefined}
       />
 
       {/* Suppressed once the server has refused: there is no intent coming, so a
           "Preparing payment…" spinner would sit there forever under a notice
           that has already explained what happened. */}
-      {isCreatingOrder && !hasCharge && !isHoldExpired && <Loading label="Preparing payment…" size={22} />}
+      {isCreatingOrder && !hasCharge && !isHoldExpired && (
+        <Loading label={tr("forge.checkout.preparing_payment")} size={22} />
+      )}
 
       {isPaystack
         ? canOpenPaystack && (
@@ -946,6 +1044,7 @@ function ShippingRateSelector({
   formatCurrency: (amount: number, currencyCode?: string) => string;
 }) {
   const theme = useForgeTheme();
+  const tr = useForgeT();
   if (groups.length === 0) return null;
 
   return (
@@ -972,7 +1071,7 @@ function ShippingRateSelector({
                 </span>
                 {group.rates[0].estimatedDays != null && (
                   <span className="text-xs ml-2" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
-                    ({group.rates[0].estimatedDays} days)
+                    {tr("forge.checkout.rate_days", { days: group.rates[0].estimatedDays })}
                   </span>
                 )}
               </div>
@@ -985,7 +1084,7 @@ function ShippingRateSelector({
             <div className="space-y-2">
               {group.rates.length === 0 && (
                 <p className="text-sm" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
-                  No shipping options available for this address.
+                  {tr("forge.checkout.no_shipping_options")}
                 </p>
               )}
               {group.rates.map((rate) => {
@@ -1014,7 +1113,9 @@ function ShippingRateSelector({
                         </span>
                         {rate.estimatedDays && (
                           <p className="text-xs" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
-                            Estimated {rate.estimatedDays} {rate.estimatedDays === 1 ? "day" : "days"}
+                            {rate.estimatedDays === 1
+                              ? tr("forge.checkout.rate_estimated_day", { days: rate.estimatedDays })
+                              : tr("forge.checkout.rate_estimated_days", { days: rate.estimatedDays })}
                           </p>
                         )}
                       </div>