@doswiftly/cli 0.1.18 → 0.1.20

package/templates/storefront-nextjs-shadcn/app/{checkout → [locale]/checkout}/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { useRouter } from "next/navigation";
-import Link from "next/link";
+import { useRouter, Link } from "@/i18n/navigation";
+import { StorefrontError } from "@doswiftly/storefront-sdk";
 import { useCartStore } from "@/stores/cart-store";
 import { useCartSync } from "@/hooks/use-cart-sync";
 import {
@@ -15,10 +15,13 @@ import {
   useCheckoutDiscountCodeRemove,
   useCheckoutGiftCardApply,
   useCheckoutGiftCardRemove,
+  useCheckoutGiftCardRecipientUpdate,
   useCheckoutComplete,
   useCheckout,
 } from "@/lib/graphql/hooks";
-import { formatAmount } from "@/lib/format";
+import { useQueryClient } from "@tanstack/react-query";
+import { queryKeys } from "@/lib/graphql/query-keys";
+import { formatAmount } from "@doswiftly/storefront-sdk";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -37,6 +40,7 @@ import { PaymentStep } from "@/components/checkout/payment-step";
 import type { PaymentMethod } from "@/components/checkout/payment-method-card";
 import { toast } from "sonner";
 import { z } from "zod";
+import { useTranslations } from "next-intl";
 import {
   Loader2,
   ChevronLeft,
@@ -57,45 +61,7 @@ import {
 // CONSTANTS
 // ============================================================================
 
-const COUNTRIES = [
-  { code: "PL", name: "Polska" },
-  { code: "DE", name: "Niemcy" },
-  { code: "CZ", name: "Czechy" },
-  { code: "SK", name: "Słowacja" },
-  { code: "AT", name: "Austria" },
-  { code: "FR", name: "Francja" },
-  { code: "NL", name: "Holandia" },
-  { code: "BE", name: "Belgia" },
-  { code: "IT", name: "Włochy" },
-  { code: "ES", name: "Hiszpania" },
-  { code: "GB", name: "Wielka Brytania" },
-  { code: "US", name: "Stany Zjednoczone" },
-];
-
-// ============================================================================
-// VALIDATION SCHEMAS
-// ============================================================================
-
-const contactSchema = z.object({
-  email: z.string().email("Podaj prawidłowy adres email"),
-  phone: z
-    .string()
-    .min(9, "Numer telefonu jest wymagany")
-    .regex(/^\+?[0-9\s\-]{9,15}$/, "Nieprawidłowy format numeru telefonu"),
-});
-
-const addressSchema = z.object({
-  firstName: z.string().min(1, "Imię jest wymagane"),
-  lastName: z.string().min(1, "Nazwisko jest wymagane"),
-  address1: z.string().min(1, "Adres jest wymagany"),
-  address2: z.string().optional(),
-  city: z.string().min(1, "Miasto jest wymagane"),
-  province: z.string().optional(),
-  zip: z.string().min(1, "Kod pocztowy jest wymagany"),
-  country: z.string().min(2, "Kraj jest wymagany"),
-  phone: z.string().optional(),
-  company: z.string().optional(),
-});
+const COUNTRY_CODES = ["PL", "DE", "CZ", "SK", "AT", "FR", "NL", "BE", "IT", "ES", "GB", "US"] as const;
 
 // ============================================================================
 // TYPES
@@ -165,11 +131,20 @@ interface AddressFormFieldsProps {
 }
 
 function AddressFormFields({ prefix, values, onChange, errors }: AddressFormFieldsProps) {
+  const t = useTranslations("checkout");
+  const tc = useTranslations("common");
+  const tCountries = useTranslations("countries");
+
+  const countries = COUNTRY_CODES.map((code) => ({
+    code,
+    name: tCountries(code),
+  }));
+
   return (
     <div className="space-y-4">
       <div className="grid gap-4 sm:grid-cols-2">
         <div>
-          <Label htmlFor={`${prefix}_firstName`}>Imię *</Label>
+          <Label htmlFor={`${prefix}_firstName`}>{t("address.firstName")} *</Label>
           <Input
             id={`${prefix}_firstName`}
             value={values.firstName}
@@ -181,7 +156,7 @@ function AddressFormFields({ prefix, values, onChange, errors }: AddressFormFiel
           )}
         </div>
         <div>
-          <Label htmlFor={`${prefix}_lastName`}>Nazwisko *</Label>
+          <Label htmlFor={`${prefix}_lastName`}>{t("address.lastName")} *</Label>
           <Input
             id={`${prefix}_lastName`}
             value={values.lastName}
@@ -195,7 +170,7 @@ function AddressFormFields({ prefix, values, onChange, errors }: AddressFormFiel
       </div>
 
       <div>
-        <Label htmlFor={`${prefix}_company`}>Firma (opcjonalnie)</Label>
+        <Label htmlFor={`${prefix}_company`}>{t("address.company")} ({tc("optional")})</Label>
         <Input
           id={`${prefix}_company`}
           value={values.company}
@@ -204,10 +179,10 @@ function AddressFormFields({ prefix, values, onChange, errors }: AddressFormFiel
       </div>
 
       <div>
-        <Label htmlFor={`${prefix}_address1`}>Adres *</Label>
+        <Label htmlFor={`${prefix}_address1`}>{t("address.address1")} *</Label>
         <Input
           id={`${prefix}_address1`}
-          placeholder="Ulica i numer"
+          placeholder={t("address.address1Placeholder")}
           value={values.address1}
           onChange={(e) => onChange("address1", e.target.value)}
           className={errors[`${prefix}_address1`] ? "border-destructive" : ""}
@@ -218,7 +193,7 @@ function AddressFormFields({ prefix, values, onChange, errors }: AddressFormFiel
       </div>
 
       <div>
-        <Label htmlFor={`${prefix}_address2`}>Mieszkanie, piętro (opcjonalnie)</Label>
+        <Label htmlFor={`${prefix}_address2`}>{t("address.address2")} ({tc("optional")})</Label>
         <Input
           id={`${prefix}_address2`}
           value={values.address2}
@@ -228,10 +203,10 @@ function AddressFormFields({ prefix, values, onChange, errors }: AddressFormFiel
 
       <div className="grid gap-4 sm:grid-cols-2">
         <div>
-          <Label htmlFor={`${prefix}_zip`}>Kod pocztowy *</Label>
+          <Label htmlFor={`${prefix}_zip`}>{t("address.zip")} *</Label>
           <Input
             id={`${prefix}_zip`}
-            placeholder="00-000"
+            placeholder={t("address.zipPlaceholder")}
             value={values.zip}
             onChange={(e) => onChange("zip", e.target.value)}
             className={errors[`${prefix}_zip`] ? "border-destructive" : ""}
@@ -241,7 +216,7 @@ function AddressFormFields({ prefix, values, onChange, errors }: AddressFormFiel
           )}
         </div>
         <div>
-          <Label htmlFor={`${prefix}_city`}>Miasto *</Label>
+          <Label htmlFor={`${prefix}_city`}>{t("address.city")} *</Label>
           <Input
             id={`${prefix}_city`}
             value={values.city}
@@ -256,13 +231,13 @@ function AddressFormFields({ prefix, values, onChange, errors }: AddressFormFiel
 
       <div className="grid gap-4 sm:grid-cols-2">
         <div>
-          <Label htmlFor={`${prefix}_country`}>Kraj *</Label>
+          <Label htmlFor={`${prefix}_country`}>{t("address.country")} *</Label>
           <Select value={values.country} onValueChange={(value) => onChange("country", value)}>
             <SelectTrigger className={errors[`${prefix}_country`] ? "border-destructive" : ""}>
-              <SelectValue placeholder="Wybierz kraj" />
+              <SelectValue placeholder={t("address.countryPlaceholder")} />
             </SelectTrigger>
             <SelectContent>
-              {COUNTRIES.map((country) => (
+              {countries.map((country) => (
                 <SelectItem key={country.code} value={country.code}>
                   {country.name}
                 </SelectItem>
@@ -274,7 +249,7 @@ function AddressFormFields({ prefix, values, onChange, errors }: AddressFormFiel
           )}
         </div>
         <div>
-          <Label htmlFor={`${prefix}_province`}>Województwo (opcjonalnie)</Label>
+          <Label htmlFor={`${prefix}_province`}>{t("address.province")} ({tc("optional")})</Label>
           <Input
             id={`${prefix}_province`}
             value={values.province}
@@ -295,6 +270,42 @@ export default function CheckoutPage() {
   const { cartId, clearCart } = useCartStore();
   const { items, isLoading: isCartLoading } = useCartSync();
 
+  const t = useTranslations("checkout");
+  const tc = useTranslations("common");
+  const tCountries = useTranslations("countries");
+  const tCart = useTranslations("cart");
+
+  // ============================================================================
+  // VALIDATION SCHEMAS (inside component to use translations)
+  // ============================================================================
+
+  const contactSchema = z.object({
+    email: z.string().email(t("validation.emailRequired")),
+    phone: z
+      .string()
+      .min(9, t("validation.phoneRequired"))
+      .regex(/^\+?[0-9\s\-]{9,15}$/, t("validation.phoneInvalid")),
+  });
+
+  const addressSchema = z.object({
+    firstName: z.string().min(1, t("validation.firstNameRequired")),
+    lastName: z.string().min(1, t("validation.lastNameRequired")),
+    address1: z.string().min(1, t("validation.addressRequired")),
+    address2: z.string().optional(),
+    city: z.string().min(1, t("validation.cityRequired")),
+    province: z.string().optional(),
+    zip: z.string().min(1, t("validation.zipRequired")),
+    country: z.string().min(2, t("validation.countryRequired")),
+    phone: z.string().optional(),
+    company: z.string().optional(),
+  });
+
+  // Countries for review section
+  const countries = COUNTRY_CODES.map((code) => ({
+    code,
+    name: tCountries(code),
+  }));
+
   // Step management
   const [currentStep, setCurrentStep] = useState<CheckoutStep>("contact");
   const [checkoutId, setCheckoutId] = useState<string | null>(null);
@@ -337,7 +348,9 @@ export default function CheckoutPage() {
   const removeDiscount = useCheckoutDiscountCodeRemove();
   const applyGiftCard = useCheckoutGiftCardApply();
   const removeGiftCard = useCheckoutGiftCardRemove();
+  const updateGiftCardRecipient = useCheckoutGiftCardRecipientUpdate();
   const completeCheckout = useCheckoutComplete();
+  const queryClient = useQueryClient();
 
   // Query checkout for shipping rates
   const { data: checkoutData, refetch: refetchCheckout } = useCheckout(checkoutId);
@@ -345,8 +358,8 @@ export default function CheckoutPage() {
 
   // Sync discount codes from checkout (transferred from cart) to form state
   useEffect(() => {
-    if (checkout?.discountCodes?.length > 0 && !formState.appliedDiscountCode) {
-      const applicableCode = checkout.discountCodes.find((dc: any) => dc.applicable);
+    if ((checkout?.discountCodes?.length ?? 0) > 0 && !formState.appliedDiscountCode) {
+      const applicableCode = checkout?.discountCodes?.find((dc) => dc.applicable);
       if (applicableCode) {
         setFormState((prev) => ({
           ...prev,
@@ -367,6 +380,7 @@ export default function CheckoutPage() {
     removeDiscount.isPending ||
     applyGiftCard.isPending ||
     removeGiftCard.isPending ||
+    updateGiftCardRecipient.isPending ||
     completeCheckout.isPending;
 
   // Calculate totals from checkout or cart
@@ -398,6 +412,8 @@ export default function CheckoutPage() {
     setErrors({});
 
     try {
+      let newCheckoutId = checkoutId;
+
       // Create checkout if not exists
       if (!checkoutId) {
         const createResult = await createCheckout.mutateAsync({
@@ -413,7 +429,8 @@ export default function CheckoutPage() {
         }
 
         if (createResult.checkoutCreate.checkout) {
-          setCheckoutId(createResult.checkoutCreate.checkout.id);
+          newCheckoutId = createResult.checkoutCreate.checkout.id;
+          setCheckoutId(newCheckoutId);
         }
       } else {
         // Update email on existing checkout
@@ -428,9 +445,38 @@ export default function CheckoutPage() {
         }
       }
 
+      // Send gift card recipient data (if any)
+      if (hasGiftCards && newCheckoutId) {
+        const giftCardItems = items.filter((item) => item.productType === "GIFT_CARD");
+        const recipientMutations = giftCardItems
+          .filter((gc) => giftCardRecipients[gc.lineId]?.recipientEmail)
+          .map((gc) =>
+            updateGiftCardRecipient.mutateAsync({
+              input: {
+                checkoutId: newCheckoutId!,
+                lineItemId: gc.lineId,
+                ...giftCardRecipients[gc.lineId],
+              },
+            })
+          );
+
+        if (recipientMutations.length > 0) {
+          const results = await Promise.allSettled(recipientMutations);
+          const failed = results.filter((r) => r.status === "rejected");
+          if (failed.length > 0) {
+            toast.warning(
+              t("giftCard.recipientSaveError", { count: failed.length })
+            );
+          }
+          // Refetch checkout after recipient updates — prevents stale UI
+          await queryClient.refetchQueries({ queryKey: queryKeys.checkout.detail(newCheckoutId, currencyCode) });
+        }
+      }
+
       setCurrentStep(allGiftCards ? "payment" : "shipping");
-    } catch (error: any) {
-      toast.error(error.message || "Nie udało się przetworzyć danych kontaktowych");
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : t("errors.contactProcessing");
+      toast.error(message);
     }
   };
 
@@ -470,7 +516,7 @@ export default function CheckoutPage() {
     setErrors({});
 
     if (!checkoutId) {
-      toast.error("Checkout nie znaleziony. Wróć i spróbuj ponownie.");
+      toast.error(t("errors.checkoutNotFound"));
       return;
     }
 
@@ -510,8 +556,9 @@ export default function CheckoutPage() {
       // Refetch checkout to get shipping rates
       await refetchCheckout();
       setCurrentStep("delivery");
-    } catch (error: any) {
-      toast.error(error.message || "Nie udało się zaktualizować adresu");
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : t("errors.addressUpdate");
+      toast.error(message);
     }
   };
 
@@ -521,13 +568,13 @@ export default function CheckoutPage() {
 
   const handleDeliverySubmit = async () => {
     if (!formState.selectedShippingRate) {
-      setErrors({ shipping: "Wybierz metodę dostawy" });
+      setErrors({ shipping: t("delivery.selectMethod") });
       return;
     }
     setErrors({});
 
     if (!checkoutId) {
-      toast.error("Checkout nie znaleziony. Wróć i spróbuj ponownie.");
+      toast.error(t("errors.checkoutNotFound"));
       return;
     }
 
@@ -544,8 +591,9 @@ export default function CheckoutPage() {
 
       await refetchCheckout();
       setCurrentStep("payment");
-    } catch (error: any) {
-      toast.error(error.message || "Nie udało się wybrać metody dostawy");
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : t("errors.deliverySelect");
+      toast.error(message);
     }
   };
 
@@ -556,14 +604,14 @@ export default function CheckoutPage() {
   const handlePaymentMethodSelect = (paymentMethodId: string) => {
     // Validate payment method supports current currency
     const selectedMethod = checkout?.availablePaymentMethods?.find(
-      (pm: any) => pm.id === paymentMethodId
+      (pm) => pm.id === paymentMethodId
     );
 
-    if (selectedMethod?.supportedCurrencies?.length > 0) {
+    if (selectedMethod?.supportedCurrencies && selectedMethod.supportedCurrencies.length > 0) {
       const supportsCurrency = selectedMethod.supportedCurrencies.includes(currencyCode);
       if (!supportsCurrency) {
         setErrors({
-          payment: `Ta metoda płatności nie obsługuje waluty ${currencyCode}. Wybierz inną metodę.`,
+          payment: t("payment.unsupportedCurrency", { currency: currencyCode }),
         });
         return;
       }
@@ -575,27 +623,27 @@ export default function CheckoutPage() {
 
   const handlePaymentSubmit = async () => {
     if (!formState.selectedPaymentMethodId) {
-      setErrors({ payment: "Wybierz metodę płatności" });
+      setErrors({ payment: t("payment.selectMethod") });
       return;
     }
 
     // Validate selected payment method still exists and is valid
     const selectedMethod = checkout?.availablePaymentMethods?.find(
-      (pm: any) => pm.id === formState.selectedPaymentMethodId
+      (pm) => pm.id === formState.selectedPaymentMethodId
     );
 
     if (!selectedMethod) {
-      setErrors({ payment: "Wybrana metoda płatności jest niedostępna. Wybierz inną metodę." });
+      setErrors({ payment: t("payment.unavailable") });
       setFormState((prev) => ({ ...prev, selectedPaymentMethodId: null }));
       return;
     }
 
     // Validate currency support
-    if (selectedMethod.supportedCurrencies?.length > 0) {
+    if (selectedMethod.supportedCurrencies && selectedMethod.supportedCurrencies.length > 0) {
       const supportsCurrency = selectedMethod.supportedCurrencies.includes(currencyCode);
       if (!supportsCurrency) {
         setErrors({
-          payment: `Metoda "${selectedMethod.name}" nie obsługuje waluty ${currencyCode}. Wybierz inną metodę.`,
+          payment: t("payment.unsupportedCurrency", { currency: currencyCode }),
         });
         return;
       }
@@ -615,7 +663,7 @@ export default function CheckoutPage() {
     }
 
     if (!checkoutId) {
-      toast.error("Checkout nie znaleziony");
+      toast.error(t("errors.checkoutNotFound"));
       return;
     }
 
@@ -633,7 +681,7 @@ export default function CheckoutPage() {
       }
 
       if (!payload?.checkout) {
-        toast.error("Nie udało się zastosować kodu rabatowego");
+        toast.error(t("errors.discountApply"));
         return;
       }
 
@@ -643,9 +691,10 @@ export default function CheckoutPage() {
         discountCode: "",
       }));
       await refetchCheckout();
-      toast.success("Kod rabatowy został zastosowany");
-    } catch (error: any) {
-      toast.error(error.message || "Nie udało się zastosować kodu rabatowego");
+      toast.success(t("discount.applied"));
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : t("errors.discountApply");
+      toast.error(message);
     }
   };
 
@@ -670,9 +719,10 @@ export default function CheckoutPage() {
         appliedDiscountCode: null,
       }));
       await refetchCheckout();
-      toast.success("Kod rabatowy został usunięty");
-    } catch (error: any) {
-      toast.error(error.message || "Nie udało się usunąć kodu rabatowego");
+      toast.success(t("discount.removed"));
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : t("errors.discountRemove");
+      toast.error(message);
     }
   };
 
@@ -686,7 +736,7 @@ export default function CheckoutPage() {
     }
 
     if (!checkoutId) {
-      toast.error("Checkout nie znaleziony");
+      toast.error(t("errors.checkoutNotFound"));
       return;
     }
 
@@ -700,13 +750,13 @@ export default function CheckoutPage() {
         const error = result.checkoutGiftCardApply.userErrors[0];
         // Translate common error codes to user-friendly messages
         const errorMessages: Record<string, string> = {
-          GIFT_CARD_NOT_FOUND: "Nie znaleziono karty podarunkowej o podanym kodzie",
-          GIFT_CARD_EXPIRED: "Ta karta podarunkowa wygasła",
-          GIFT_CARD_DISABLED: "Ta karta podarunkowa jest wyłączona",
-          GIFT_CARD_NO_BALANCE: "Ta karta podarunkowa nie ma dostępnego salda",
-          GIFT_CARD_ALREADY_APPLIED: "Ta karta jest już zastosowana",
+          GIFT_CARD_NOT_FOUND: t("errors.giftCardNotFound"),
+          GIFT_CARD_EXPIRED: t("errors.giftCardExpired"),
+          GIFT_CARD_DISABLED: t("errors.giftCardDisabled"),
+          GIFT_CARD_DEPLETED: t("errors.giftCardDepleted"),
+          GIFT_CARD_UNUSABLE: t("errors.giftCardUnusable"),
         };
-        toast.error(errorMessages[error.code] || error.message);
+        toast.error((error.code && errorMessages[error.code]) || error.message);
         return;
       }
 
@@ -715,9 +765,10 @@ export default function CheckoutPage() {
         giftCardCode: "",
       }));
       await refetchCheckout();
-      toast.success("Karta podarunkowa została zastosowana");
-    } catch (error: any) {
-      toast.error(error.message || "Nie udało się zastosować karty podarunkowej");
+      toast.success(tCart("giftCardApplied"));
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : t("errors.giftCardApply");
+      toast.error(message);
     }
   };
 
@@ -738,9 +789,10 @@ export default function CheckoutPage() {
       }
 
       await refetchCheckout();
-      toast.success("Karta podarunkowa została usunięta");
-    } catch (error: any) {
-      toast.error(error.message || "Nie udało się usunąć karty podarunkowej");
+      toast.success(tCart("giftCardRemoved"));
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : t("errors.giftCardRemove");
+      toast.error(message);
     }
   };
 
@@ -750,12 +802,12 @@ export default function CheckoutPage() {
 
   const handleCompleteCheckout = async () => {
     if (!formState.acceptTerms) {
-      setErrors({ terms: "Musisz zaakceptować regulamin" });
+      setErrors({ terms: t("review.mustAcceptTerms") });
       return;
     }
 
     if (!formState.selectedPaymentMethodId) {
-      setErrors({ payment: "Wybierz metodę płatności" });
+      setErrors({ payment: t("payment.selectMethod") });
       setCurrentStep("payment");
       return;
     }
@@ -763,7 +815,7 @@ export default function CheckoutPage() {
     setErrors({});
 
     if (!checkoutId) {
-      toast.error("Checkout nie znaleziony. Wróć i spróbuj ponownie.");
+      toast.error(t("errors.checkoutNotFound"));
       return;
     }
 
@@ -781,31 +833,24 @@ export default function CheckoutPage() {
         const errorMessage = error.message;
 
         // Handle specific payment-related error codes
-        switch (errorCode) {
+        // Cast to string since backend may return codes not in the generated enum
+        const codeStr = errorCode as string | null | undefined;
+        switch (codeStr) {
           case "INVALID_PAYMENT_METHOD":
-          case "PAYMENT_METHOD_NOT_FOUND":
-            setErrors({ payment: "Wybrana metoda płatności jest niedostępna. Wybierz inną metodę." });
+          case "NO_PAYMENT_METHODS":
+            setErrors({ payment: t("payment.unavailable") });
             setFormState((prev) => ({ ...prev, selectedPaymentMethodId: null }));
             setCurrentStep("payment");
-            toast.error("Metoda płatności jest niedostępna");
+            toast.error(t("errors.paymentUnavailable"));
             break;
-          case "PAYMENT_METHOD_CURRENCY_NOT_SUPPORTED":
-            setErrors({ payment: `Metoda płatności nie obsługuje wybranej waluty (${currencyCode}).` });
-            setCurrentStep("payment");
-            toast.error("Waluta nie jest obsługiwana przez tę metodę płatności");
+          case "ALREADY_COMPLETED":
+            toast.error(t("errors.sessionExpired"));
             break;
-          case "PAYMENT_DECLINED":
-            toast.error("Płatność została odrzucona. Spróbuj ponownie lub wybierz inną metodę.");
-            setCurrentStep("payment");
-            break;
-          case "CHECKOUT_EXPIRED":
-            toast.error("Sesja checkout wygasła. Proszę odświeżyć stronę i spróbować ponownie.");
-            break;
-          case "INVENTORY_NOT_AVAILABLE":
-            toast.error("Niektóre produkty są niedostępne. Sprawdź swój koszyk.");
+          case "NOT_ENOUGH_IN_STOCK":
+            toast.error(t("errors.outOfStock"));
             break;
           default:
-            toast.error(errorMessage || "Nie udało się sfinalizować zamówienia");
+            toast.error(errorMessage || t("errors.checkoutComplete"));
         }
         return;
       }
@@ -821,7 +866,7 @@ export default function CheckoutPage() {
         const orderId = completeResult.checkoutComplete.order.id;
         const paymentType = formState.selectedPaymentMethodId
           ? checkout?.availablePaymentMethods?.find(
-              (pm: any) => pm.id === formState.selectedPaymentMethodId
+              (pm) => pm.id === formState.selectedPaymentMethodId
             )?.type
           : null;
 
@@ -830,10 +875,11 @@ export default function CheckoutPage() {
         router.push(`/checkout/success/${orderId}${searchParams}`);
       } else {
         // Fallback: no payment URL and no order - show error
-        toast.error("Wystąpił nieoczekiwany błąd. Skontaktuj się z obsługą.");
+        toast.error(t("errors.unexpected"));
       }
-    } catch (error: any) {
-      toast.error(error.message || "Nie udało się sfinalizować zamówienia");
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : t("errors.checkoutComplete");
+      toast.error(message);
     }
   };
 
@@ -863,7 +909,7 @@ export default function CheckoutPage() {
     return (
       <div className="container mx-auto px-4 py-16 text-center">
         <Loader2 className="mx-auto h-8 w-8 animate-spin text-muted-foreground" />
-        <p className="mt-4 text-muted-foreground">Ładowanie...</p>
+        <p className="mt-4 text-muted-foreground">{tc("loading")}</p>
       </div>
     );
   }
@@ -873,12 +919,12 @@ export default function CheckoutPage() {
     return (
       <div className="container mx-auto px-4 py-16 text-center">
         <ShoppingBag className="mx-auto h-16 w-16 text-muted-foreground" />
-        <h1 className="mt-4 text-2xl font-bold">Twój koszyk jest pusty</h1>
+        <h1 className="mt-4 text-2xl font-bold">{tCart("empty")}</h1>
         <p className="mt-2 text-muted-foreground">
-          Dodaj produkty do koszyka, aby kontynuować zakupy.
+          {tCart("emptyDescription")}
         </p>
         <Button className="mt-6" asChild>
-          <Link href="/products">Przeglądaj produkty</Link>
+          <Link href="/products">{tCart("browseProducts")}</Link>
         </Button>
       </div>
     );
@@ -889,11 +935,11 @@ export default function CheckoutPage() {
   // ============================================================================
 
   const allSteps: { id: CheckoutStep; label: string; icon: React.ReactNode }[] = [
-    { id: "contact", label: "Kontakt", icon: <User className="h-4 w-4" /> },
-    { id: "shipping", label: "Adres", icon: <Package className="h-4 w-4" /> },
-    { id: "delivery", label: "Dostawa", icon: <Truck className="h-4 w-4" /> },
-    { id: "payment", label: "Płatność", icon: <CreditCard className="h-4 w-4" /> },
-    { id: "review", label: "Podsumowanie", icon: <ClipboardCheck className="h-4 w-4" /> },
+    { id: "contact", label: t("steps.contact"), icon: <User className="h-4 w-4" /> },
+    { id: "shipping", label: t("steps.shipping"), icon: <Package className="h-4 w-4" /> },
+    { id: "delivery", label: t("steps.delivery"), icon: <Truck className="h-4 w-4" /> },
+    { id: "payment", label: t("steps.payment"), icon: <CreditCard className="h-4 w-4" /> },
+    { id: "review", label: t("steps.review"), icon: <ClipboardCheck className="h-4 w-4" /> },
   ];
   // Skip shipping and delivery steps when all items are gift cards
   const steps = allGiftCards
@@ -911,9 +957,9 @@ export default function CheckoutPage() {
       <Breadcrumbs className="mb-6" />
 
       <div className="mb-8 flex items-center justify-between">
-        <h1 className="text-3xl font-bold">Checkout</h1>
+        <h1 className="text-3xl font-bold">{t("title")}</h1>
         <Link href="/auth/login" className="text-sm text-primary hover:underline">
-          Masz konto? Zaloguj się
+          {t("haveAccount")}
         </Link>
       </div>
 
@@ -961,19 +1007,19 @@ export default function CheckoutPage() {
               <CardHeader>
                 <CardTitle className="flex items-center gap-2">
                   <User className="h-5 w-5" />
-                  Dane kontaktowe
+                  {t("contact.title")}
                 </CardTitle>
                 <CardDescription>
-                  Podaj swój email i telefon - wyślemy na nie potwierdzenie zamówienia
+                  {t("contact.description")}
                 </CardDescription>
               </CardHeader>
               <CardContent className="space-y-4">
                 <div>
-                  <Label htmlFor="email">Email *</Label>
+                  <Label htmlFor="email">{t("contact.email")} *</Label>
                   <Input
                     id="email"
                     type="email"
-                    placeholder="twoj@email.pl"
+                    placeholder={t("contact.emailPlaceholder")}
                     value={formState.email}
                     onChange={(e) =>
                       setFormState((prev) => ({ ...prev, email: e.target.value }))
@@ -986,11 +1032,11 @@ export default function CheckoutPage() {
                 </div>
 
                 <div>
-                  <Label htmlFor="phone">Telefon *</Label>
+                  <Label htmlFor="phone">{t("contact.phone")} *</Label>
                   <Input
                     id="phone"
                     type="tel"
-                    placeholder="+48 123 456 789"
+                    placeholder={t("contact.phonePlaceholder")}
                     value={formState.phone}
                     onChange={(e) =>
                       setFormState((prev) => ({ ...prev, phone: e.target.value }))
@@ -1001,7 +1047,7 @@ export default function CheckoutPage() {
                     <p className="mt-1 text-sm text-destructive">{errors.phone}</p>
                   )}
                   <p className="mt-1 text-xs text-muted-foreground">
-                    Kurier może potrzebować kontaktu w sprawie dostawy
+                    {t("contact.phoneHint")}
                   </p>
                 </div>
 
@@ -1014,7 +1060,7 @@ export default function CheckoutPage() {
                     }
                   />
                   <Label htmlFor="marketing" className="text-sm font-normal cursor-pointer">
-                    Chcę otrzymywać informacje o promocjach i nowościach
+                    {t("contact.marketing")}
                   </Label>
                 </div>
 
@@ -1023,28 +1069,28 @@ export default function CheckoutPage() {
                   <div className="space-y-4 border-t pt-4">
                     <div className="flex items-center gap-2 text-sm font-medium">
                       <Gift className="h-4 w-4" />
-                      Dane odbiorcy karty podarunkowej
+                      {t("giftCard.recipientTitle")}
                     </div>
                     <p className="text-xs text-muted-foreground">
-                      Opcjonalnie: podaj dane osoby, która otrzyma kartę podarunkową
+                      {t("giftCard.recipientDescription")}
                     </p>
                     {items
                       .filter((item) => item.productType === "GIFT_CARD")
                       .map((item) => (
-                        <div key={item.variantId} className="space-y-3 rounded-lg border p-4">
+                        <div key={item.lineId} className="space-y-3 rounded-lg border p-4">
                           <p className="text-sm font-medium">{item.productTitle} — {item.variantTitle}</p>
                           <div>
-                            <Label htmlFor={`recipient-email-${item.variantId}`}>E-mail odbiorcy</Label>
+                            <Label htmlFor={`recipient-email-${item.lineId}`}>{t("giftCard.recipientEmail")}</Label>
                             <Input
-                              id={`recipient-email-${item.variantId}`}
+                              id={`recipient-email-${item.lineId}`}
                               type="email"
-                              placeholder="odbiorca@email.pl"
-                              value={giftCardRecipients[item.variantId]?.recipientEmail || ""}
+                              placeholder={t("giftCard.recipientEmailPlaceholder")}
+                              value={giftCardRecipients[item.lineId]?.recipientEmail || ""}
                               onChange={(e) =>
                                 setGiftCardRecipients((prev) => ({
                                   ...prev,
-                                  [item.variantId]: {
-                                    ...prev[item.variantId],
+                                  [item.lineId]: {
+                                    ...prev[item.lineId],
                                     recipientEmail: e.target.value,
                                   },
                                 }))
@@ -1052,17 +1098,17 @@ export default function CheckoutPage() {
                             />
                           </div>
                           <div>
-                            <Label htmlFor={`recipient-name-${item.variantId}`}>Imię odbiorcy</Label>
+                            <Label htmlFor={`recipient-name-${item.lineId}`}>{t("giftCard.recipientName")}</Label>
                             <Input
-                              id={`recipient-name-${item.variantId}`}
+                              id={`recipient-name-${item.lineId}`}
                               type="text"
-                              placeholder="Jan"
-                              value={giftCardRecipients[item.variantId]?.recipientName || ""}
+                              placeholder={t("giftCard.recipientNamePlaceholder")}
+                              value={giftCardRecipients[item.lineId]?.recipientName || ""}
                               onChange={(e) =>
                                 setGiftCardRecipients((prev) => ({
                                   ...prev,
-                                  [item.variantId]: {
-                                    ...prev[item.variantId],
+                                  [item.lineId]: {
+                                    ...prev[item.lineId],
                                     recipientName: e.target.value,
                                   },
                                 }))
@@ -1070,17 +1116,17 @@ export default function CheckoutPage() {
                             />
                           </div>
                           <div>
-                            <Label htmlFor={`recipient-message-${item.variantId}`}>Wiadomość</Label>
+                            <Label htmlFor={`recipient-message-${item.lineId}`}>{t("giftCard.message")}</Label>
                             <Input
-                              id={`recipient-message-${item.variantId}`}
+                              id={`recipient-message-${item.lineId}`}
                               type="text"
-                              placeholder="Wszystkiego najlepszego!"
-                              value={giftCardRecipients[item.variantId]?.message || ""}
+                              placeholder={t("giftCard.messagePlaceholder")}
+                              value={giftCardRecipients[item.lineId]?.message || ""}
                               onChange={(e) =>
                                 setGiftCardRecipients((prev) => ({
                                   ...prev,
-                                  [item.variantId]: {
-                                    ...prev[item.variantId],
+                                  [item.lineId]: {
+                                    ...prev[item.lineId],
                                     message: e.target.value,
                                   },
                                 }))
@@ -1098,7 +1144,7 @@ export default function CheckoutPage() {
                   ) : (
                     <ChevronRight className="mr-2 h-4 w-4" />
                   )}
-                  {allGiftCards ? "Dalej: Płatność" : "Dalej: Adres dostawy"}
+                  {allGiftCards ? t("contact.nextPayment") : t("contact.nextShipping")}
                 </Button>
               </CardContent>
             </Card>
@@ -1111,9 +1157,9 @@ export default function CheckoutPage() {
                 <CardHeader>
                   <CardTitle className="flex items-center gap-2">
                     <Package className="h-5 w-5" />
-                    Adres dostawy
+                    {t("shipping.title")}
                   </CardTitle>
-                  <CardDescription>Podaj adres, na który mamy wysłać zamówienie</CardDescription>
+                  <CardDescription>{t("shipping.description")}</CardDescription>
                 </CardHeader>
                 <CardContent>
                   <AddressFormFields
@@ -1134,7 +1180,7 @@ export default function CheckoutPage() {
                 <CardHeader>
                   <CardTitle className="flex items-center gap-2">
                     <CreditCard className="h-5 w-5" />
-                    Adres rozliczeniowy
+                    {t("shipping.billingTitle")}
                   </CardTitle>
                 </CardHeader>
                 <CardContent className="space-y-4">
@@ -1147,7 +1193,7 @@ export default function CheckoutPage() {
                       }
                     />
                     <Label htmlFor="sameAsBilling" className="cursor-pointer">
-                      Taki sam jak adres dostawy
+                      {t("shipping.sameAsShipping")}
                     </Label>
                   </div>
 
@@ -1170,7 +1216,7 @@ export default function CheckoutPage() {
               <div className="flex gap-4">
                 <Button variant="outline" onClick={goBack} size="lg">
                   <ChevronLeft className="mr-2 h-4 w-4" />
-                  Wstecz
+                  {tc("back")}
                 </Button>
                 <Button onClick={handleShippingSubmit} disabled={isLoading} className="flex-1" size="lg">
                   {isLoading ? (
@@ -1178,7 +1224,7 @@ export default function CheckoutPage() {
                   ) : (
                     <ChevronRight className="mr-2 h-4 w-4" />
                   )}
-                  Dalej: Metoda dostawy
+                  {t("shipping.nextDelivery")}
                 </Button>
               </div>
             </>
@@ -1190,23 +1236,23 @@ export default function CheckoutPage() {
               <CardHeader>
                 <CardTitle className="flex items-center gap-2">
                   <Truck className="h-5 w-5" />
-                  Metoda dostawy
+                  {t("delivery.title")}
                 </CardTitle>
-                <CardDescription>Wybierz sposób dostarczenia zamówienia</CardDescription>
+                <CardDescription>{t("delivery.description")}</CardDescription>
               </CardHeader>
               <CardContent className="space-y-4">
                 {!shippingRatesReady ? (
                   <div className="flex items-center justify-center py-8">
                     <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-                    <span className="ml-2 text-muted-foreground">Ładowanie metod dostawy...</span>
+                    <span className="ml-2 text-muted-foreground">{t("delivery.loading")}</span>
                   </div>
                 ) : availableShippingRates.length === 0 ? (
                   <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-center">
                     <p className="text-destructive">
-                      Brak dostępnych metod dostawy dla podanego adresu.
+                      {t("delivery.noMethods")}
                     </p>
                     <Button variant="outline" onClick={goBack} className="mt-4">
-                      Zmień adres dostawy
+                      {t("delivery.changeAddress")}
                     </Button>
                   </div>
                 ) : (
@@ -1249,7 +1295,7 @@ export default function CheckoutPage() {
                 <div className="flex gap-4 pt-4">
                   <Button variant="outline" onClick={goBack} size="lg">
                     <ChevronLeft className="mr-2 h-4 w-4" />
-                    Wstecz
+                    {tc("back")}
                   </Button>
                   <Button
                     onClick={handleDeliverySubmit}
@@ -1262,7 +1308,7 @@ export default function CheckoutPage() {
                     ) : (
                       <ChevronRight className="mr-2 h-4 w-4" />
                     )}
-                    Dalej: Płatność
+                    {t("delivery.nextPayment")}
                   </Button>
                 </div>
               </CardContent>
@@ -1275,15 +1321,15 @@ export default function CheckoutPage() {
               <CardHeader>
                 <CardTitle className="flex items-center gap-2">
                   <CreditCard className="h-5 w-5" />
-                  Metoda płatności
+                  {t("payment.title")}
                 </CardTitle>
-                <CardDescription>Wybierz sposób zapłaty za zamówienie</CardDescription>
+                <CardDescription>{t("payment.description")}</CardDescription>
               </CardHeader>
               <CardContent className="space-y-4">
                 {/* PaymentStep component handles payment method selection */}
                 <PaymentStep
                   availablePaymentMethods={(checkout.availablePaymentMethods || []).map(
-                    (pm: any): PaymentMethod => ({
+                    (pm): PaymentMethod => ({
                       id: pm.id,
                       name: pm.name,
                       provider: pm.provider,
@@ -1307,7 +1353,7 @@ export default function CheckoutPage() {
                 <div className="flex gap-4 pt-4">
                   <Button variant="outline" onClick={goBack} size="lg">
                     <ChevronLeft className="mr-2 h-4 w-4" />
-                    Wstecz
+                    {tc("back")}
                   </Button>
                   <Button
                     onClick={handlePaymentSubmit}
@@ -1320,7 +1366,7 @@ export default function CheckoutPage() {
                     ) : (
                       <ChevronRight className="mr-2 h-4 w-4" />
                     )}
-                    Dalej: Podsumowanie
+                    {t("payment.nextReview")}
                   </Button>
                 </div>
               </CardContent>
@@ -1333,15 +1379,15 @@ export default function CheckoutPage() {
               <CardHeader>
                 <CardTitle className="flex items-center gap-2">
                   <ClipboardCheck className="h-5 w-5" />
-                  Podsumowanie zamówienia
+                  {t("review.title")}
                 </CardTitle>
-                <CardDescription>Sprawdź wszystkie dane przed finalizacją</CardDescription>
+                <CardDescription>{t("review.description")}</CardDescription>
               </CardHeader>
               <CardContent className="space-y-6">
                 {/* Contact */}
                 <div className="flex items-start justify-between rounded-lg border p-4">
                   <div>
-                    <h3 className="mb-1 font-medium">Kontakt</h3>
+                    <h3 className="mb-1 font-medium">{t("review.contact")}</h3>
                     <p className="text-sm text-muted-foreground">{checkout.email}</p>
                     <p className="text-sm text-muted-foreground">{formState.phone}</p>
                   </div>
@@ -1350,7 +1396,7 @@ export default function CheckoutPage() {
                     size="sm"
                     onClick={() => setCurrentStep("contact")}
                   >
-                    Zmień
+                    {t("review.change")}
                   </Button>
                 </div>
 
@@ -1358,7 +1404,7 @@ export default function CheckoutPage() {
                 {!allGiftCards && (
                   <div className="flex items-start justify-between rounded-lg border p-4">
                     <div>
-                      <h3 className="mb-1 font-medium">Adres dostawy</h3>
+                      <h3 className="mb-1 font-medium">{t("review.shippingAddress")}</h3>
                       {checkout.shippingAddress && (
                         <p className="text-sm text-muted-foreground">
                           {checkout.shippingAddress.firstName} {checkout.shippingAddress.lastName}
@@ -1373,7 +1419,7 @@ export default function CheckoutPage() {
                           <br />
                           {checkout.shippingAddress.zip} {checkout.shippingAddress.city}
                           <br />
-                          {COUNTRIES.find((c) => c.code === checkout.shippingAddress?.country)?.name ||
+                          {countries.find((c) => c.code === checkout.shippingAddress?.country)?.name ||
                             checkout.shippingAddress.country}
                         </p>
                       )}
@@ -1383,7 +1429,7 @@ export default function CheckoutPage() {
                       size="sm"
                       onClick={() => setCurrentStep("shipping")}
                     >
-                      Zmień
+                      {t("review.change")}
                     </Button>
                   </div>
                 )}
@@ -1392,7 +1438,7 @@ export default function CheckoutPage() {
                 {!allGiftCards && (
                   <div className="flex items-start justify-between rounded-lg border p-4">
                     <div>
-                      <h3 className="mb-1 font-medium">Metoda dostawy</h3>
+                      <h3 className="mb-1 font-medium">{t("review.shippingMethod")}</h3>
                       {checkout.shippingLine && (
                         <p className="text-sm text-muted-foreground">
                           {checkout.shippingLine.title} -{" "}
@@ -1405,7 +1451,7 @@ export default function CheckoutPage() {
                       size="sm"
                       onClick={() => setCurrentStep("delivery")}
                     >
-                      Zmień
+                      {t("review.change")}
                     </Button>
                   </div>
                 )}
@@ -1413,12 +1459,12 @@ export default function CheckoutPage() {
                 {/* Payment Method */}
                 <div className="flex items-start justify-between rounded-lg border p-4">
                   <div>
-                    <h3 className="mb-1 font-medium">Metoda płatności</h3>
+                    <h3 className="mb-1 font-medium">{t("review.paymentMethod")}</h3>
                     {formState.selectedPaymentMethodId && (
                       <p className="text-sm text-muted-foreground">
                         {checkout.availablePaymentMethods?.find(
-                          (pm: any) => pm.id === formState.selectedPaymentMethodId
-                        )?.name || "Wybrana metoda płatności"}
+                          (pm) => pm.id === formState.selectedPaymentMethodId
+                        )?.name || t("review.paymentMethod")}
                       </p>
                     )}
                   </div>
@@ -1427,7 +1473,7 @@ export default function CheckoutPage() {
                     size="sm"
                     onClick={() => setCurrentStep("payment")}
                   >
-                    Zmień
+                    {t("review.change")}
                   </Button>
                 </div>
 
@@ -1444,13 +1490,13 @@ export default function CheckoutPage() {
                     />
                     <div className="grid gap-1.5 leading-none">
                       <Label htmlFor="terms" className="cursor-pointer">
-                        Akceptuję{" "}
+                        {t("review.acceptTerms")}{" "}
                         <Link href="/terms" className="text-primary hover:underline">
-                          regulamin sklepu
+                          {t("review.termsLink")}
                         </Link>{" "}
-                        oraz{" "}
+                        {t("review.and")}{" "}
                         <Link href="/privacy" className="text-primary hover:underline">
-                          politykę prywatności
+                          {t("review.privacyLink")}
                         </Link>{" "}
                         *
                       </Label>
@@ -1464,7 +1510,7 @@ export default function CheckoutPage() {
                 <div className="flex gap-4">
                   <Button variant="outline" onClick={goBack} size="lg">
                     <ChevronLeft className="mr-2 h-4 w-4" />
-                    Wstecz
+                    {tc("back")}
                   </Button>
                   <Button
                     onClick={handleCompleteCheckout}
@@ -1477,7 +1523,7 @@ export default function CheckoutPage() {
                     ) : (
                       <CreditCard className="mr-2 h-4 w-4" />
                     )}
-                    Zapłać i zamów
+                    {t("review.placeOrder")}
                   </Button>
                 </div>
               </CardContent>
@@ -1491,49 +1537,84 @@ export default function CheckoutPage() {
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
                 <ShoppingBag className="h-5 w-5" />
-                Twoje zamówienie
+                {tCart("yourOrder")}
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
               {/* Line Items */}
               <div className="space-y-3">
-                {(checkout?.lineItems || items).map((item: any) => (
-                  <div
-                    key={item.id || item.lineId || item.variantId}
-                    className="flex gap-3 text-sm"
-                  >
-                    <div className="relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border bg-muted">
-                      {item.image?.url ? (
-                        <img
-                          src={item.image.url}
-                          alt={item.title || item.productTitle}
-                          className="h-full w-full object-cover"
-                        />
-                      ) : (
-                        <div className="flex h-full w-full items-center justify-center">
-                          <Package className="h-6 w-6 text-muted-foreground" />
+                {(checkout?.lineItems ?? []).length > 0
+                  ? checkout!.lineItems.map((item) => (
+                      <div
+                        key={item.id}
+                        className="flex gap-3 text-sm"
+                      >
+                        <div className="relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border bg-muted">
+                          {item.image?.url ? (
+                            <img
+                              src={item.image.url}
+                              alt={item.title}
+                              className="h-full w-full object-cover"
+                            />
+                          ) : (
+                            <div className="flex h-full w-full items-center justify-center">
+                              <Package className="h-6 w-6 text-muted-foreground" />
+                            </div>
+                          )}
+                          <span className="absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
+                            {item.quantity}
+                          </span>
                         </div>
-                      )}
-                      <span className="absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
-                        {item.quantity}
-                      </span>
-                    </div>
-                    <div className="flex-1">
-                      <p className="font-medium line-clamp-2">
-                        {item.title || item.productTitle}
-                      </p>
-                      {item.variantTitle && item.variantTitle !== "Default" && (
-                        <p className="text-xs text-muted-foreground">{item.variantTitle}</p>
-                      )}
-                    </div>
-                    <p className="font-medium">
-                      {formatPrice(
-                        item.totalPrice?.amount ||
-                          parseFloat(item.price.amount) * item.quantity
-                      )}
-                    </p>
-                  </div>
-                ))}
+                        <div className="flex-1">
+                          <p className="font-medium line-clamp-2">
+                            {item.title}
+                          </p>
+                          {item.variantTitle && item.variantTitle !== "Default" && (
+                            <p className="text-xs text-muted-foreground">{item.variantTitle}</p>
+                          )}
+                        </div>
+                        <p className="font-medium">
+                          {formatPrice(item.totalPrice.amount)}
+                        </p>
+                      </div>
+                    ))
+                  : items.map((item) => (
+                      <div
+                        key={item.lineId}
+                        className="flex gap-3 text-sm"
+                      >
+                        <div className="relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border bg-muted">
+                          {item.image?.url ? (
+                            <img
+                              src={item.image.url}
+                              alt={item.productTitle}
+                              className="h-full w-full object-cover"
+                            />
+                          ) : (
+                            <div className="flex h-full w-full items-center justify-center">
+                              <Package className="h-6 w-6 text-muted-foreground" />
+                            </div>
+                          )}
+                          <span className="absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
+                            {item.quantity}
+                          </span>
+                        </div>
+                        <div className="flex-1">
+                          <p className="font-medium line-clamp-2">
+                            {item.productTitle}
+                          </p>
+                          {item.variantTitle && item.variantTitle !== "Default" && (
+                            <p className="text-xs text-muted-foreground">{item.variantTitle}</p>
+                          )}
+                        </div>
+                        <p className="font-medium">
+                          {formatPrice(
+                            parseFloat(item.price.amount) * item.quantity
+                          )}
+                        </p>
+                      </div>
+                    ))
+                }
               </div>
 
               {/* Discount Code */}
@@ -1560,7 +1641,7 @@ export default function CheckoutPage() {
                   ) : (
                     <div className="flex gap-2">
                       <Input
-                        placeholder="Kod rabatowy"
+                        placeholder={t("discount.codePlaceholder")}
                         value={formState.discountCode}
                         onChange={(e) =>
                           setFormState((prev) => ({ ...prev, discountCode: e.target.value }))
@@ -1575,7 +1656,7 @@ export default function CheckoutPage() {
                         {applyDiscount.isPending ? (
                           <Loader2 className="h-4 w-4 animate-spin" />
                         ) : (
-                          "Zastosuj"
+                          tc("apply")
                         )}
                       </Button>
                     </div>
@@ -1586,12 +1667,12 @@ export default function CheckoutPage() {
               {/* Gift Card */}
               {checkoutId && (
                 <div className="border-t pt-4 space-y-3">
-                  <p className="text-sm font-medium">Karta podarunkowa</p>
+                  <p className="text-sm font-medium">{tCart("giftCardLabel")}</p>
 
                   {/* Applied Gift Cards */}
                   {checkout?.appliedGiftCards && checkout.appliedGiftCards.length > 0 && (
                     <div className="space-y-2">
-                      {checkout.appliedGiftCards.map((giftCard: any) => (
+                      {checkout.appliedGiftCards.map((giftCard) => (
                         <div
                           key={giftCard.lastCharacters}
                           className="flex items-center justify-between rounded-lg bg-purple-50 p-3 dark:bg-purple-950"
@@ -1624,7 +1705,7 @@ export default function CheckoutPage() {
                   {/* Gift Card Input */}
                   <div className="flex gap-2">
                     <Input
-                      placeholder="Kod karty podarunkowej"
+                      placeholder={tCart("giftCardPlaceholder")}
                       value={formState.giftCardCode}
                       onChange={(e) =>
                         setFormState((prev) => ({ ...prev, giftCardCode: e.target.value.toUpperCase() }))
@@ -1645,7 +1726,7 @@ export default function CheckoutPage() {
                       {applyGiftCard.isPending ? (
                         <Loader2 className="h-4 w-4 animate-spin" />
                       ) : (
-                        "Zastosuj"
+                        tc("apply")
                       )}
                     </Button>
                   </div>
@@ -1656,7 +1737,7 @@ export default function CheckoutPage() {
               <div className="border-t pt-4 space-y-2">
                 {/* Subtotal */}
                 <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">Produkty</span>
+                  <span className="text-muted-foreground">{tCart("products")}</span>
                   <span>
                     {formatPrice(
                       checkout?.subtotalPrice?.amount ||
@@ -1671,20 +1752,20 @@ export default function CheckoutPage() {
                 {/* Shipping */}
                 {checkout?.shippingLine ? (
                   <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">Dostawa</span>
+                    <span className="text-muted-foreground">{tCart("shipping")}</span>
                     <span>{formatPrice(checkout.totalShippingPrice?.amount || "0")}</span>
                   </div>
                 ) : (
                   <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">Dostawa</span>
-                    <span className="text-muted-foreground">Obliczona w następnym kroku</span>
+                    <span className="text-muted-foreground">{tCart("shipping")}</span>
+                    <span className="text-muted-foreground">{tCart("calculatedNextStep")}</span>
                   </div>
                 )}
 
                 {/* Discount */}
                 {checkout?.totalDiscounts && parseFloat(checkout.totalDiscounts.amount) > 0 && (
                   <div className="flex justify-between text-sm text-green-600">
-                    <span>Rabat</span>
+                    <span>{tCart("discount")}</span>
                     <span>-{formatPrice(checkout.totalDiscounts.amount)}</span>
                   </div>
                 )}
@@ -1692,7 +1773,7 @@ export default function CheckoutPage() {
                 {/* Tax */}
                 {checkout?.totalTax && parseFloat(checkout.totalTax.amount) > 0 && (
                   <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">Podatek VAT</span>
+                    <span className="text-muted-foreground">{tCart("tax")}</span>
                     <span>{formatPrice(checkout.totalTax.amount)}</span>
                   </div>
                 )}
@@ -1700,14 +1781,14 @@ export default function CheckoutPage() {
                 {/* Gift Card Deduction */}
                 {checkout?.totalGiftCardAmount && parseFloat(checkout.totalGiftCardAmount.amount) > 0 && (
                   <div className="flex justify-between text-sm text-purple-600">
-                    <span>Karta podarunkowa</span>
+                    <span>{tCart("giftCard")}</span>
                     <span>-{formatPrice(checkout.totalGiftCardAmount.amount)}</span>
                   </div>
                 )}
 
                 {/* Total */}
                 <div className="flex justify-between border-t pt-2 text-lg font-semibold">
-                  <span>Razem</span>
+                  <span>{tCart("total")}</span>
                   <span>
                     {formatPrice(
                       checkout?.totalPrice?.amount ||
@@ -1724,7 +1805,7 @@ export default function CheckoutPage() {
                   checkout?.totalPrice &&
                   parseFloat(checkout.paymentDue.amount) !== parseFloat(checkout.totalPrice.amount) && (
                     <div className="flex justify-between border-t pt-2 text-lg font-bold text-primary">
-                      <span>Do zapłaty</span>
+                      <span>{tCart("paymentDue")}</span>
                       <span>{formatPrice(checkout.paymentDue.amount)}</span>
                     </div>
                   )}
@@ -1735,11 +1816,11 @@ export default function CheckoutPage() {
                 <div className="flex items-center justify-center gap-4 text-xs text-muted-foreground">
                   <div className="flex items-center gap-1">
                     <Check className="h-3 w-3" />
-                    Bezpieczna płatność
+                    {tc("securePayment")}
                   </div>
                   <div className="flex items-center gap-1">
                     <Check className="h-3 w-3" />
-                    Szyfrowane dane
+                    {tc("encryptedData")}
                   </div>
                 </div>
               </div>