@doswiftly/cli 0.1.19 → 0.1.20

package/templates/storefront-nextjs-shadcn/CLAUDE.md

@@ -53,14 +53,15 @@ graphql/
 └── custom.example.graphql  # Example custom operations
 
 stores/                 # Zustand stores (Context pattern via SDK createStoreContext)
-├── cart-store.ts       # Cart UI state (cartId, isOpen) — items from server
+├── cart-store.ts       # Re-export facade from SDK (createCartStore with DI)
 ├── checkout-store.ts   # Checkout form state with persistence
 └── wishlist-store.ts   # Wishlist state with persistence
 
 hooks/
 ├── use-auth.ts         # Thin wrapper over SDK useAuth + httpOnly cookies
 ├── use-auth-sync.ts    # Detects auth desync (cookie vs store)
-├── use-cart-actions.ts # Cart mutations with debounce + race condition protection
+├── use-cart-di.ts      # CartActions DI implementation (GraphQL transport for SDK cart store)
+├── use-cart-actions.ts # Cart mutations UX wrapper (debounce, openCart — delegates to SDK store)
 ├── use-cart-sync.ts    # Cart data from server (maps GraphQL → CartItemData)
 └── use-filter-params.ts # URL-driven filter state
 
@@ -72,19 +73,22 @@ generated/
 
 Template importuje z `@doswiftly/storefront-sdk`:
 - **Core (`.`)**: `AUTH_COOKIE_NAME`, `matchesRoute`, `createSetTokenHandler`, `createClearTokenHandler`, `createAuthTokenClient`, `formatPrice`, `formatAmount`, `sanitizeHtml`, `normalizeConnection`
-- **React (`./react`)**: `StorefrontProvider`, `useAuthStore`, `useCurrencyStore`, `useAuthHydrated`, `useStorefrontClient`, `useHydrated`, `useDebouncedValue`, `createStoreContext`
+- **React (`./react`)**: `StorefrontProvider`, `useAuthStore`, `useCurrencyStore`, `useAuthHydrated`, `useStorefrontClient`, `useHydrated`, `useDebouncedValue`, `createStoreContext`, `createCartStore`, `CartProvider`, `useCartStore`, `useCartStoreApi`
 - **Server (`./react/server`)**: `getStorefrontClient`, `getCurrencyFromCookieAsync`
 - **Auth hooks**: `useAuth` (bazowy, owinięty w `hooks/use-auth.ts`)
 
 **Store pattern**: Zustand stores używają `createStore()` (vanilla) + React Context via `createStoreContext()` from SDK.
 Hooki `useAuthStore`/`useCurrencyStore` wymagają owinięcia w `StorefrontProvider`.
-Template stores (cart, checkout, wishlist) wymagają `StoresProvider` (wewnątrz `StorefrontProvider`).
+**Cart store** pochodzi z SDK (`createCartStore` z DI pattern) — template dostarcza `CartActions` via `hooks/use-cart-di.ts`.
+Template stores (checkout, wishlist) wymagają `StoresProvider` (wewnątrz `StorefrontProvider`).
 `useAuthHydrated()` zwraca `true` po rehydracji persist z localStorage.
 `useHydrated()` zwraca `true` po hydration SSR → client.
 
+**Cart DI pattern**: SDK orchestruje stan (init, mutations, error handling), template dostarcza transport via `CartActions` interface.
+`StoresProvider` wiąże DI: `createCartStore({ getActions: () => actionsRef.current, onMutationSuccess, onMutationError })`.
+
 Template NIE importuje z SDK:
 - React Query hooks — są LOCAL w `lib/graphql/hooks.ts`
-- Cart actions — LOCAL w `hooks/use-cart-actions.ts`
 - Data types — LOCAL via codegen (`generated/graphql.ts`)
 
 ## Data Fetching
@@ -189,6 +193,26 @@ Cart mutations use three layers of protection:
 8. **Query keys**: Zawsze z `queryKeys.*` (nie hardcoded arrays)
 9. **Config**: Zawsze z `graphqlConfig` (nie duplikuj env var resolution)
 
+## i18n (next-intl + SDK)
+
+**Architecture**: Dynamic locales from backend, static defaultLocale from env var.
+
+**Env vars**:
+- `NEXT_PUBLIC_DEFAULT_LOCALE` — default locale for URL routing (fallback: `'pl'`). Controls which locale is hidden in URL (`as-needed` prefix). After changing defaultLanguage in admin panel, update this env var in `.env.local` and restart dev server.
+
+**Locale flow**:
+- `proxy.ts` middleware fetches `supportedLanguages` from backend (cached 60s) — fully dynamic
+- `routing.ts` exports `defaultLocale` (env+fallback) and `localePrefix` — no `defineRouting`, no hardcoded locales
+- `navigation.ts` uses `createNavigation` without `locales` — any locale string accepted at runtime
+- `layout.tsx` validates locale against `shop.supportedLanguages` from backend
+
+**Language cookie**: Single `preferred-language` cookie (1 year) — serves both:
+- next-intl middleware (locale detection/routing, via `localeCookie.name` override in proxy.ts)
+- SDK language store (X-Lang header for backend, framework-agnostic)
+- Cookie name constant: `LANGUAGE_COOKIE_NAME` exported from `@doswiftly/storefront-sdk`
+
+**Known limitation**: `defaultLocale` is static (env var). Changing it requires `.env.local` update + restart. Dynamic `supportedLanguages` (add/remove locale) works immediately — no restart needed.
+
 ## GraphQL Operations
 
 Operacje i schemat sa zdefiniowane w:

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

@@ -1,31 +1,34 @@
+import { getTranslations } from "next-intl/server";
 import { Breadcrumbs } from "@/components/layout/breadcrumbs";
 
-export default function AboutPage() {
+export default async function AboutPage() {
+  const t = await getTranslations("about");
+
   return (
     <div className="container mx-auto px-4 py-8">
       <Breadcrumbs className="mb-6" />
-      
+
       <div className="mx-auto max-w-3xl">
-        <h1 className="mb-6 text-4xl font-bold text-foreground">About Us</h1>
-        
+        <h1 className="mb-6 text-4xl font-bold text-foreground">{t("title")}</h1>
+
         <div className="prose prose-gray max-w-none">
           <p className="text-lg text-muted-foreground">
-            Welcome to our store! We are dedicated to providing you with the best products and exceptional customer service.
+            {t("welcome")}
           </p>
-          
-          <h2 className="mt-8 text-2xl font-semibold text-foreground">Our Story</h2>
+
+          <h2 className="mt-8 text-2xl font-semibold text-foreground">{t("ourStory")}</h2>
           <p className="text-muted-foreground">
-            Founded with a passion for quality and customer satisfaction, we've been serving customers worldwide with carefully curated products.
+            {t("ourStoryText")}
           </p>
-          
-          <h2 className="mt-8 text-2xl font-semibold text-foreground">Our Mission</h2>
+
+          <h2 className="mt-8 text-2xl font-semibold text-foreground">{t("ourMission")}</h2>
           <p className="text-muted-foreground">
-            To provide high-quality products at competitive prices while delivering an exceptional shopping experience.
+            {t("ourMissionText")}
           </p>
-          
-          <h2 className="mt-8 text-2xl font-semibold text-foreground">Contact Us</h2>
+
+          <h2 className="mt-8 text-2xl font-semibold text-foreground">{t("contactTitle")}</h2>
           <p className="text-muted-foreground">
-            Have questions? Feel free to reach out to our customer support team.
+            {t("contactText")}
           </p>
         </div>
       </div>

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

@@ -1,7 +1,8 @@
 "use client";
 
 import { useState, useCallback } from "react";
-import Link from "next/link";
+import { Link } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
 import { Plus } from "lucide-react";
 import { useAuthStore, useAuthHydrated } from "@doswiftly/storefront-sdk/react";
 import {
@@ -30,6 +31,7 @@ import {
 } from "@/components/ui/dialog";
 
 export default function AddressesPage() {
+  const t = useTranslations("account");
   const hydrated = useHydrated();
   const authHydrated = useAuthHydrated();
   const accessToken = useAuthStore((s) => s.accessToken);
@@ -52,11 +54,11 @@ export default function AddressesPage() {
 
   const deleteMutation = useCustomerAddressDelete({
     onSuccess: (data) => checkUserErrors(data, 'customerAddressDelete'),
-    onError: () => setMutationError('Failed to delete address'),
+    onError: () => setMutationError(t('failedDelete')),
   });
   const setDefaultMutation = useCustomerDefaultAddressUpdate({
     onSuccess: (data) => checkUserErrors(data, 'customerDefaultAddressUpdate'),
-    onError: () => setMutationError('Failed to set default address'),
+    onError: () => setMutationError(t('failedSetDefault')),
   });
 
   const createMutation = useCustomerAddressCreate({
@@ -65,7 +67,7 @@ export default function AddressesPage() {
         setIsFormOpen(false);
       }
     },
-    onError: () => setMutationError('Failed to create address'),
+    onError: () => setMutationError(t('failedCreate')),
   });
 
   const updateMutation = useCustomerAddressUpdate({
@@ -74,7 +76,7 @@ export default function AddressesPage() {
         setIsFormOpen(false);
       }
     },
-    onError: () => setMutationError('Failed to update address'),
+    onError: () => setMutationError(t('failedUpdate')),
   });
 
   const addresses = (customerData?.customer?.addresses ?? []).map((addr) => ({
@@ -103,7 +105,7 @@ export default function AddressesPage() {
   };
 
   const handleDelete = (id: string) => {
-    if (confirm("Are you sure you want to delete this address?")) {
+    if (confirm(t("deleteConfirm"))) {
       deleteMutation.mutate(id);
     }
   };
@@ -162,11 +164,13 @@ export default function AddressesPage() {
       <div className="container mx-auto px-4 py-8">
         <Breadcrumbs className="mb-6" />
         <div className="rounded-lg border border-destructive bg-destructive/10 p-8 text-center text-sm text-destructive">
-          You need to{" "}
-          <Link href="/auth/login?redirect=/account/addresses" className="font-medium underline">
-            sign in
-          </Link>{" "}
-          to manage your addresses.
+          {t.rich("signInToManage", {
+            link: (chunks) => (
+              <Link href="/auth/login?redirect=/account/addresses" className="font-medium underline">
+                {chunks}
+              </Link>
+            ),
+          })}
         </div>
       </div>
     );
@@ -178,14 +182,14 @@ export default function AddressesPage() {
 
       <div className="mb-8 flex items-center justify-between">
         <div>
-          <h1 className="text-3xl font-bold text-foreground">Addresses</h1>
+          <h1 className="text-3xl font-bold text-foreground">{t("addresses")}</h1>
           <p className="mt-2 text-muted-foreground">
-            Manage your shipping and billing addresses
+            {t("manageAddresses")}
           </p>
         </div>
         <Button onClick={handleAdd}>
           <Plus className="mr-2 h-4 w-4" />
-          Add Address
+          {t("addAddress")}
         </Button>
       </div>
 
@@ -207,7 +211,7 @@ export default function AddressesPage() {
         <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>
-              {editingAddress ? "Edit Address" : "Add New Address"}
+              {editingAddress ? t("editAddress") : t("addNewAddress")}
             </DialogTitle>
           </DialogHeader>
           <AddressForm

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

@@ -1,7 +1,8 @@
 "use client";
 
 import { useEffect } from "react";
-import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
 import { AlertCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -13,6 +14,8 @@ export default function AccountError({
   error: Error & { digest?: string };
   reset: () => void;
 }) {
+  const t = useTranslations("errors");
+
   useEffect(() => {
     console.error("[Account Error]", error);
   }, [error]);
@@ -23,17 +26,17 @@ export default function AccountError({
         <CardHeader>
           <CardTitle className="flex items-center gap-2 text-destructive">
             <AlertCircle className="h-5 w-5" />
-            Something went wrong
+            {t("somethingWentWrong")}
           </CardTitle>
         </CardHeader>
         <CardContent className="space-y-4">
           <p className="text-sm text-muted-foreground">
-            We couldn&apos;t load your account data. This might be a temporary issue.
+            {t("couldNotLoadAccount")}
           </p>
           <div className="flex gap-3">
-            <Button onClick={reset}>Try again</Button>
+            <Button onClick={reset}>{t("tryAgain")}</Button>
             <Button variant="outline" asChild>
-              <Link href="/">Go to homepage</Link>
+              <Link href="/">{t("goHome")}</Link>
             </Button>
           </div>
         </CardContent>

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

@@ -15,7 +15,8 @@
  */
 
 import { useState } from 'react';
-import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/navigation';
 import { ArrowLeft, Gift, Award, History, Loader2, Users, AlertCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -40,6 +41,9 @@ import {
 } from '@/lib/graphql/hooks';
 
 export default function LoyaltyPage() {
+  const t = useTranslations("account");
+  const tl = useTranslations("loyalty.page");
+  const ta = useTranslations("auth");
   const [activeTab, setActiveTab] = useState('overview');
   const { isAuthenticated } = useAuthStore();
   const isHydrated = useAuthHydrated();
@@ -86,7 +90,7 @@ export default function LoyaltyPage() {
         };
       }
 
-      throw new Error('Nie udało się wymienić nagrody');
+      throw new Error(tl('redeemFailed'));
     } catch (error) {
       throw error;
     }
@@ -110,7 +114,7 @@ export default function LoyaltyPage() {
         <Link href="/account">
           <Button variant="ghost" size="sm" className="mb-4">
             <ArrowLeft className="h-4 w-4 mr-2" />
-            Powrót do konta
+            {t("backToAccount")}
           </Button>
         </Link>
 
@@ -118,15 +122,15 @@ export default function LoyaltyPage() {
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <Award className="h-5 w-5" />
-              Program lojalnościowy
+              {t("loyalty")}
             </CardTitle>
           </CardHeader>
           <CardContent>
             <p className="text-muted-foreground mb-4">
-              Zaloguj się, aby zobaczyć swoje punkty i nagrody.
+              {tl("signInToView")}
             </p>
             <Link href="/auth/login?redirect=/account/loyalty">
-              <Button className="w-full">Zaloguj się</Button>
+              <Button className="w-full">{ta("signIn")}</Button>
             </Link>
           </CardContent>
         </Card>
@@ -152,14 +156,14 @@ export default function LoyaltyPage() {
         <Link href="/account">
           <Button variant="ghost" size="sm" className="mb-4">
             <ArrowLeft className="h-4 w-4 mr-2" />
-            Powrót do konta
+            {t("backToAccount")}
           </Button>
         </Link>
 
         <Alert variant="destructive">
           <AlertCircle className="h-4 w-4" />
           <AlertDescription>
-            Nie udało się załadować danych programu lojalnościowego. Spróbuj ponownie później.
+            {tl("loadFailed")}
           </AlertDescription>
         </Alert>
       </div>
@@ -173,14 +177,14 @@ export default function LoyaltyPage() {
         <Link href="/account">
           <Button variant="ghost" size="sm" className="mb-4">
             <ArrowLeft className="h-4 w-4 mr-2" />
-            Powrót do konta
+            {t("backToAccount")}
           </Button>
         </Link>
 
         <Alert>
           <AlertCircle className="h-4 w-4" />
           <AlertDescription>
-            Program lojalnościowy jest obecnie niedostępny. Sprawdź ponownie później.
+            {tl("unavailable")}
           </AlertDescription>
         </Alert>
       </div>
@@ -194,7 +198,7 @@ export default function LoyaltyPage() {
         <Link href="/account">
           <Button variant="ghost" size="sm" className="mb-4">
             <ArrowLeft className="h-4 w-4 mr-2" />
-            Powrót do konta
+            {t("backToAccount")}
           </Button>
         </Link>
 
@@ -202,16 +206,15 @@ export default function LoyaltyPage() {
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <Award className="h-5 w-5" />
-              Dołącz do programu lojalnościowego
+              {tl("joinTitle")}
             </CardTitle>
           </CardHeader>
           <CardContent>
             <p className="text-muted-foreground mb-4">
-              Zbieraj punkty za zakupy i wymieniaj je na nagrody! Zapisanie jest automatyczne
-              przy pierwszym zakupie.
+              {tl("joinDescription")}
             </p>
             <Link href="/products">
-              <Button className="w-full">Przeglądaj produkty</Button>
+              <Button className="w-full">{t("browseProducts")}</Button>
             </Link>
           </CardContent>
         </Card>
@@ -229,15 +232,15 @@ export default function LoyaltyPage() {
         <Link href="/account">
           <Button variant="ghost" size="sm" className="mb-4">
             <ArrowLeft className="h-4 w-4 mr-2" />
-            Powrót do konta
+            {t("backToAccount")}
           </Button>
         </Link>
 
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-3xl font-bold mb-2">Program lojalnościowy</h1>
+            <h1 className="text-3xl font-bold mb-2">{t("loyalty")}</h1>
             <p className="text-muted-foreground">
-              Zbieraj {settings?.pointsName ?? 'punkty'} i wymieniaj je na nagrody
+              {tl("collectAndRedeem", { pointsName: settings?.pointsName ?? 'punkty' })}
             </p>
           </div>
           {member.tier && <TierBadge tier={member.tier.type} name={member.tier.name} size="lg" />}
@@ -249,20 +252,20 @@ export default function LoyaltyPage() {
         <TabsList className="mb-6">
           <TabsTrigger value="overview" className="gap-2">
             <Award className="h-4 w-4" />
-            Przegląd
+            {tl("tabOverview")}
           </TabsTrigger>
           <TabsTrigger value="rewards" className="gap-2">
             <Gift className="h-4 w-4" />
-            Nagrody
+            {tl("tabRewards")}
           </TabsTrigger>
           <TabsTrigger value="history" className="gap-2">
             <History className="h-4 w-4" />
-            Historia
+            {tl("tabHistory")}
           </TabsTrigger>
           {showReferralTab && (
             <TabsTrigger value="referral" className="gap-2">
               <Users className="h-4 w-4" />
-              Polecenia
+              {tl("tabReferrals")}
             </TabsTrigger>
           )}
         </TabsList>
@@ -279,11 +282,11 @@ export default function LoyaltyPage() {
             <div className="p-6 bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-950/30 dark:to-yellow-950/30 rounded-lg border border-amber-200 dark:border-amber-800">
               <h3 className="font-semibold mb-4 flex items-center gap-2">
                 <Award className="h-5 w-5 text-amber-600" />
-                Twoje korzyści na poziomie {member.tier.name}
+                {tl("tierBenefits", { tierName: member.tier.name })}
               </h3>
               <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
                 <div className="p-3 bg-white/50 dark:bg-black/20 rounded-lg">
-                  <div className="font-medium">Mnożnik punktów</div>
+                  <div className="font-medium">{tl("pointsMultiplier")}</div>
                   <div className="text-2xl font-bold text-amber-600">x{member.tier.pointsMultiplier}</div>
                 </div>
                 {member.tier.customBenefits?.slice(0, 2).map((benefit, idx) => (
@@ -311,16 +314,16 @@ export default function LoyaltyPage() {
           <div className="flex flex-wrap gap-4">
             <Button onClick={() => setActiveTab('rewards')}>
               <Gift className="h-4 w-4 mr-2" />
-              Przeglądaj nagrody
+              {tl("browseRewards")}
             </Button>
             <Button variant="outline" onClick={() => setActiveTab('history')}>
               <History className="h-4 w-4 mr-2" />
-              Zobacz historię
+              {tl("viewHistory")}
             </Button>
             {showReferralTab && (
               <Button variant="outline" onClick={() => setActiveTab('referral')}>
                 <Users className="h-4 w-4 mr-2" />
-                Poleć znajomego
+                {tl("referFriend")}
               </Button>
             )}
           </div>
@@ -329,9 +332,9 @@ export default function LoyaltyPage() {
         {/* Rewards Tab */}
         <TabsContent value="rewards">
           <div className="mb-6">
-            <h2 className="text-xl font-semibold mb-2">Dostępne nagrody</h2>
+            <h2 className="text-xl font-semibold mb-2">{tl("availableRewards")}</h2>
             <p className="text-muted-foreground">
-              Wymień swoje {settings?.pointsName ?? 'punkty'} na atrakcyjne nagrody
+              {tl("redeemDescription", { pointsName: settings?.pointsName ?? 'punkty' })}
             </p>
           </div>
           <RewardsCatalog
@@ -345,8 +348,8 @@ export default function LoyaltyPage() {
         {/* History Tab */}
         <TabsContent value="history">
           <div className="mb-6">
-            <h2 className="text-xl font-semibold mb-2">Historia punktów</h2>
-            <p className="text-muted-foreground">Przegląd wszystkich transakcji punktowych</p>
+            <h2 className="text-xl font-semibold mb-2">{tl("pointsHistory")}</h2>
+            <p className="text-muted-foreground">{tl("historyDescription")}</p>
           </div>
           <PointsHistory transactions={transactions} />
         </TabsContent>
@@ -355,10 +358,12 @@ export default function LoyaltyPage() {
         {showReferralTab && referralStats && (
           <TabsContent value="referral">
             <div className="mb-6">
-              <h2 className="text-xl font-semibold mb-2">Poleć znajomego</h2>
+              <h2 className="text-xl font-semibold mb-2">{tl("referFriend")}</h2>
               <p className="text-muted-foreground">
-                Zaproś znajomych i otrzymaj {settings?.referralPoints ?? 0}{' '}
-                {settings?.pointsName ?? 'punktów'} za każde polecenie
+                {tl("referFriendDescription", {
+                  points: settings?.referralPoints ?? 0,
+                  pointsName: settings?.pointsName ?? 'punktów',
+                })}
               </p>
             </div>
             <ReferralSection

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

@@ -1,7 +1,8 @@
 "use client";
 
 import { useParams } from "next/navigation";
-import Link from "next/link";
+import { Link } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
 import { ChevronLeft } from "lucide-react";
 import { useCustomerOrder } from "@/lib/graphql/hooks";
 import { useHydrated } from "@doswiftly/storefront-sdk/react";
@@ -13,6 +14,7 @@ import {
 } from "@/components/account/order-details";
 
 export default function OrderDetailPage() {
+  const t = useTranslations("account");
   const params = useParams();
   const orderId = params.id as string;
   const hydrated = useHydrated();
@@ -36,10 +38,10 @@ export default function OrderDetailPage() {
     return (
       <div className="container mx-auto px-4 py-8">
         <div className="text-center">
-          <h1 className="text-2xl font-bold text-destructive">Failed to load order</h1>
-          <p className="mt-2 text-muted-foreground">Something went wrong. Please try again later.</p>
+          <h1 className="text-2xl font-bold text-destructive">{t("failedLoadOrder")}</h1>
+          <p className="mt-2 text-muted-foreground">{t("tryAgainLater")}</p>
           <Link href="/account/orders">
-            <Button className="mt-4">Back to Orders</Button>
+            <Button className="mt-4">{t("backToOrders")}</Button>
           </Link>
         </div>
       </div>
@@ -50,9 +52,9 @@ export default function OrderDetailPage() {
     return (
       <div className="container mx-auto px-4 py-8">
         <div className="text-center">
-          <h1 className="text-2xl font-bold">Order not found</h1>
+          <h1 className="text-2xl font-bold">{t("orderNotFound")}</h1>
           <Link href="/account/orders">
-            <Button className="mt-4">Back to Orders</Button>
+            <Button className="mt-4">{t("backToOrders")}</Button>
           </Link>
         </div>
       </div>
@@ -106,7 +108,7 @@ export default function OrderDetailPage() {
         <Button variant="ghost" asChild>
           <Link href="/account/orders">
             <ChevronLeft className="mr-2 h-4 w-4" />
-            Back to Orders
+            {t("backToOrders")}
           </Link>
         </Button>
       </div>