@doswiftly/cli 0.1.19 → 0.1.20

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

@@ -1,17 +1,15 @@
-import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
 import { FileQuestion, Home, ShoppingBag, Search } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 
 /**
- * 404 Not Found Page
- *
- * Displayed when a page or resource is not found.
- * Provides helpful navigation back to the site.
- *
- * Requirements: 11.1
+ * 404 Not Found Page (locale-aware)
  */
 export default function NotFound() {
+  const t = useTranslations("notFound");
+
   return (
     <div className="container mx-auto flex min-h-[60vh] items-center justify-center px-4 py-16">
       <Card className="w-full max-w-md text-center">
@@ -19,46 +17,43 @@ export default function NotFound() {
           <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
             <FileQuestion className="h-8 w-8 text-muted-foreground" />
           </div>
-          <CardTitle className="text-6xl font-bold">404</CardTitle>
+          <CardTitle className="text-6xl font-bold">{t("title")}</CardTitle>
           <CardDescription className="text-lg">
-            Strona nie została znaleziona
+            {t("description")}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
           <p className="text-muted-foreground">
-            Przepraszamy, nie mogliśmy znaleźć strony, której szukasz.
-            Mogła zostać przeniesiona lub usunięta.
+            {t("message")}
           </p>
 
-          {/* Navigation options */}
           <div className="flex flex-col gap-3">
             <Button asChild size="lg" className="w-full">
               <Link href="/">
                 <Home className="mr-2 h-4 w-4" />
-                Strona główna
+                {t("home")}
               </Link>
             </Button>
             <div className="flex gap-3">
               <Button asChild variant="outline" size="lg" className="flex-1">
                 <Link href="/products">
                   <ShoppingBag className="mr-2 h-4 w-4" />
-                  Produkty
+                  {t("products")}
                 </Link>
               </Button>
               <Button asChild variant="outline" size="lg" className="flex-1">
                 <Link href="/collections">
                   <Search className="mr-2 h-4 w-4" />
-                  Kolekcje
+                  {t("collections")}
                 </Link>
               </Button>
             </div>
           </div>
 
-          {/* Help text */}
           <p className="text-sm text-muted-foreground">
-            Potrzebujesz pomocy?{" "}
+            {t("needHelp")}{" "}
             <Link href="/contact" className="text-primary underline underline-offset-4">
-              Skontaktuj się z nami
+              {t("contactUs")}
             </Link>
           </p>
         </CardContent>

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

@@ -1,13 +1,17 @@
+import { getTranslations } from "next-intl/server";
 import { HeroSection } from "@/components/home/hero-section";
 import { FeaturedProducts } from "@/components/home/featured-products";
 import { CategoryGrid } from "@/components/home/category-grid";
 import { NewsletterSignup } from "@/components/home/newsletter-signup";
 import type { Metadata } from "next";
 
-export const metadata: Metadata = {
-  title: "Home | " + (process.env.NEXT_PUBLIC_SITE_NAME || "My Store"),
-  description: "Discover our curated collection of quality products at affordable prices.",
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("home");
+  return {
+    title: "Home | " + (process.env.NEXT_PUBLIC_SITE_NAME || "My Store"),
+    description: t("metaDescription"),
+  };
+}
 
 export default function HomePage() {
   return (

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import Link from "next/link";
+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";

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

@@ -1,5 +1,6 @@
 import { Metadata } from "next";
 import { notFound } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { Breadcrumbs } from "@/components/layout/breadcrumbs";
 import { ProductClient } from "./product-client";
 import { fetchProduct, fetchProducts } from "@/lib/graphql/server";
@@ -26,22 +27,23 @@ export async function generateMetadata({
   params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
   try {
+    const t = await getTranslations("productPage");
     const resolvedParams = await params;
-    
+
     if (!resolvedParams?.slug) {
       return {
-        title: "Product",
-        description: "View product details",
+        title: t("title"),
+        description: t("viewDetails"),
       };
     }
-    
+
     const data = await fetchProduct(resolvedParams.slug);
     const product = data?.product;
 
     if (!product) {
       return {
-        title: "Product Not Found",
-        description: "The product you're looking for doesn't exist.",
+        title: t("notFound"),
+        description: t("notFoundDescription"),
       };
     }
 
@@ -88,9 +90,10 @@ export async function generateMetadata({
     };
   } catch (error) {
     console.error("Error generating metadata:", error);
+    const t = await getTranslations("productPage");
     return {
-      title: "Product",
-      description: "View product details",
+      title: t("title"),
+      description: t("viewDetails"),
     };
   }
 }

package/templates/storefront-nextjs-shadcn/app/{products → [locale]/products}/[slug]/product-client.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
 import { useProduct } from "@/lib/graphql/hooks";
 import { useCurrencyStore } from "@doswiftly/storefront-sdk/react";
 import { ProductGallery } from "@/components/product/product-gallery";
@@ -35,6 +36,7 @@ export interface ProductClientProps {
  * Requirements: 2.2, 3.2, 6.4
  */
 export function ProductClient({ product: initialProduct, similarProducts = [] }: ProductClientProps) {
+  const t = useTranslations("productPage");
   const [selectedVariant, setSelectedVariant] = useState(initialProduct.variants[0]);
   const [quantity, setQuantity] = useState(1);
   
@@ -288,7 +290,7 @@ export function ProductClient({ product: initialProduct, similarProducts = [] }:
       {similarProducts.length > 0 && (
         <SimilarProducts
           products={similarProducts}
-          title="You might also like"
+          title={t("youMightAlsoLike")}
           columns={4}
         />
       )}

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

@@ -1,9 +1,12 @@
 import { Suspense } from "react";
+import { getTranslations } from "next-intl/server";
 import { Breadcrumbs } from "@/components/layout/breadcrumbs";
 import { Spinner } from "@/components/ui/spinner";
 import { ProductsClient } from "./products-client";
 
-export default function ProductsPage() {
+export default async function ProductsPage() {
+  const t = await getTranslations("product");
+
   return (
     <div className="container mx-auto px-4 py-8">
       {/* Breadcrumbs */}
@@ -11,9 +14,9 @@ export default function ProductsPage() {
 
       {/* Page Header */}
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-foreground">All Products</h1>
+        <h1 className="text-3xl font-bold text-foreground">{t("allProducts")}</h1>
         <p className="mt-2 text-muted-foreground">
-          Browse our complete collection of products
+          {t("browseCollection")}
         </p>
       </div>
 

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

@@ -1,7 +1,9 @@
 "use client";
 
 import { useCallback, useMemo, useTransition } from "react";
-import { useSearchParams, useRouter, usePathname } from "next/navigation";
+import { useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useRouter, usePathname } from "@/i18n/navigation";
 import { keepPreviousData } from "@tanstack/react-query";
 import { ProductGrid } from "@/components/product/product-grid";
 import { ProductFilters, type FilterGroup } from "@/components/product/product-filters";
@@ -42,6 +44,8 @@ export function ProductsClient() {
   const router = useRouter();
   const pathname = usePathname();
   const [isPending, startTransition] = useTransition();
+  const t = useTranslations("product");
+  const tFilters = useTranslations("filters");
 
   // ========== Parse URL State ==========
   const page = parseInt(searchParams.get("page") || "1", 10);
@@ -151,7 +155,7 @@ export function ProductsClient() {
     if (availableFilters?.categories && availableFilters.categories.length > 0) {
       groups.push({
         id: "category",
-        label: "Categories",
+        label: t("category"),
         type: "checkbox",
         options: availableFilters.categories.map((cat) => ({
           label: cat.name,
@@ -168,7 +172,7 @@ export function ProductsClient() {
       if (minPrice !== maxPrice) {
         groups.push({
           id: "price",
-          label: "Price",
+          label: t("price"),
           type: "range",
           min: Math.floor(minPrice),
           max: Math.ceil(maxPrice),
@@ -210,7 +214,7 @@ export function ProductsClient() {
     }
 
     return groups;
-  }, [availableFilters]);
+  }, [availableFilters, t]);
 
   // ========== Selected Filters (from URL) ==========
   const selectedFilters: Record<string, string[]> = useMemo(() => {
@@ -239,7 +243,7 @@ export function ProductsClient() {
         const cat = availableFilters.categories.find((c) => c.id === catId);
         pills.push({
           filterId: "category",
-          label: "Category",
+          label: t("category"),
           value: catId,
           displayValue: cat?.name || catId,
         });
@@ -252,7 +256,7 @@ export function ProductsClient() {
         availableFilters?.priceRange?.min.currencyCode || "PLN";
       pills.push({
         filterId: "price",
-        label: "Price",
+        label: t("price"),
         value: `${priceMin || 0}-${priceMax || "∞"}`,
         displayValue: `${priceMin || 0} — ${priceMax || "∞"} ${currency}`,
       });
@@ -275,7 +279,7 @@ export function ProductsClient() {
     }
 
     return pills;
-  }, [categoryId, priceMin, priceMax, attributeFilters, availableFilters]);
+  }, [categoryId, priceMin, priceMax, attributeFilters, availableFilters, t]);
 
   const activeFilterCount = activePills.length;
 
@@ -368,8 +372,8 @@ export function ProductsClient() {
           />
           <p className="text-sm text-muted-foreground">
             {totalCount > 0
-              ? `${totalCount} product${totalCount !== 1 ? "s" : ""}`
-              : "No products found"}
+              ? tFilters("productCount", { count: totalCount })
+              : t("noProducts")}
           </p>
         </div>
         <ProductSort value={sort} onChange={handleSortChange} />
@@ -423,7 +427,7 @@ export function ProductsClient() {
                 columns={3}
                 priorityCount={6}
                 showBadges
-                emptyMessage="No products match your filters"
+                emptyMessage={t("noProductsMatch")}
                 onResetFilters={handleClearAll}
               />
             )}

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

@@ -7,7 +7,8 @@
  * and quick add to cart functionality.
  */
 
-import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/navigation';
 import { Heart, ShoppingCart, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -20,6 +21,7 @@ import { useCartActions } from '@/hooks/use-cart-actions';
 import { toast } from 'sonner';
 
 export default function WishlistPage() {
+  const t = useTranslations('wishlist');
   const {
     wishlists,
     getActiveWishlist,
@@ -35,7 +37,7 @@ export default function WishlistPage() {
   const handleClearWishlist = () => {
     if (activeWishlist) {
       clearWishlist(activeWishlist.id);
-      toast.success('Lista życzeń została wyczyszczona');
+      toast.success(t('cleared'));
     }
   };
 
@@ -44,21 +46,13 @@ export default function WishlistPage() {
 
     for (const item of items) {
       try {
-        await addToCart({
-          variantId: item.variantId || item.productId,
-          productId: item.productId,
-          productTitle: item.productTitle,
-          variantTitle: item.variantTitle || '',
-          price: item.price,
-          image: item.image,
-          available: true,
-        });
+        await addToCart(item.variantId || item.productId);
       } catch {
         // Individual item errors are handled by addToCart (shows toast)
       }
     }
 
-    toast.success(`Dodano ${items.length} produktów do koszyka`);
+    toast.success(t('addedToCart', { count: items.length }));
   };
 
   // Show loading state while hydrating from localStorage
@@ -78,8 +72,8 @@ export default function WishlistPage() {
     <div className="container max-w-4xl py-8">
       <Breadcrumbs
         items={[
-          { label: 'Strona główna', href: '/' },
-          { label: 'Lista życzeń' },
+          { label: t('home'), href: '/' },
+          { label: t('title') },
         ]}
       />
 
@@ -87,12 +81,12 @@ export default function WishlistPage() {
         <div>
           <h1 className="text-3xl font-bold tracking-tight flex items-center gap-3">
             <Heart className="h-8 w-8 text-red-500" />
-            Lista życzeń
+            {t('title')}
           </h1>
           <p className="text-muted-foreground mt-1">
             {items.length === 0
-              ? 'Twoja lista życzeń jest pusta'
-              : `${items.length} ${items.length === 1 ? 'produkt' : 'produktów'}`}
+              ? t('empty')
+              : t('itemCount', { count: items.length })}
           </p>
         </div>
 
@@ -100,11 +94,11 @@ export default function WishlistPage() {
           <div className="flex gap-2">
             <Button variant="outline" size="sm" onClick={handleClearWishlist}>
               <Trash2 className="h-4 w-4 mr-2" />
-              Wyczyść
+              {t('clearList')}
             </Button>
             <Button size="sm" onClick={handleAddAllToCart}>
               <ShoppingCart className="h-4 w-4 mr-2" />
-              Dodaj wszystko do koszyka
+              {t('addAllToCart')}
             </Button>
           </div>
         )}
@@ -113,11 +107,11 @@ export default function WishlistPage() {
       {items.length === 0 ? (
         <EmptyState
           icon={<Heart className="h-12 w-12" />}
-          title="Lista życzeń jest pusta"
-          description="Dodaj produkty do listy życzeń, aby śledzić ich ceny i szybko dodawać do koszyka."
+          title={t('empty')}
+          description={t('emptyDescription')}
           action={
             <Link href="/products">
-              <Button>Przeglądaj produkty</Button>
+              <Button>{t('browseProducts')}</Button>
             </Link>
           }
         />
@@ -144,6 +138,8 @@ export default function WishlistPage() {
  * Shows summary of price changes for all items
  */
 function PriceChangeSummary({ items }: { items: Array<{ price: { amount: string }; priceAtAdd: { amount: string } }> }) {
+  const t = useTranslations('wishlist');
+
   const itemsWithPriceDrops = items.filter((item) => {
     const current = parseFloat(item.price.amount);
     const original = parseFloat(item.priceAtAdd.amount);
@@ -162,13 +158,13 @@ function PriceChangeSummary({ items }: { items: Array<{ price: { amount: string
     <Card className="border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950">
       <CardHeader className="pb-2">
         <CardTitle className="text-green-700 dark:text-green-400 text-lg flex items-center gap-2">
-          🎉 Dobre wieści!
+          {t('goodNews')}
         </CardTitle>
       </CardHeader>
       <CardContent>
         <p className="text-green-700 dark:text-green-400">
-          {itemsWithPriceDrops.length} {itemsWithPriceDrops.length === 1 ? 'produkt obniżył' : 'produktów obniżyło'} cenę!
-          Możesz zaoszczędzić łącznie{' '}
+          {t('priceDropped', { count: itemsWithPriceDrops.length })}{' '}
+          {t('totalSavings')}{' '}
           <span className="font-semibold">
             {new Intl.NumberFormat('pl-PL', {
               style: 'currency',

package/templates/storefront-nextjs-shadcn/app/layout.tsx

@@ -1,19 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import { cookies } from "next/headers";
 import "./globals.css";
-import { Header } from "@/components/layout/header";
-import { Footer } from "@/components/layout/footer";
-import { QueryProvider } from "@/components/providers/query-provider";
-import { StorefrontProvider } from "@doswiftly/storefront-sdk/react";
-import { ThemeProvider } from "@/components/providers/theme-provider";
-import { StoresProvider } from "@/components/providers/stores-provider";
-import { Toaster } from "sonner";
-import { fetchShop } from "@/lib/graphql/server";
-import type { ShopQuery } from "@/generated/graphql";
-import { themeConfig } from "@/lib/theme/theme-config";
-import { graphqlConfig } from "@/lib/graphql/config";
-import { AUTH_COOKIE_NAME } from "@doswiftly/storefront-sdk";
+import { defaultLocale } from "@/i18n/routing";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -26,67 +14,17 @@ export const metadata: Metadata = {
   description: "Welcome to our online store powered by DoSwiftly Commerce",
 };
 
-// Enable ISR with 60 second revalidation for shop data (currencies)
-export const revalidate = 60;
-
-const FALLBACK_SHOP: ShopQuery = {
-  shop: {
-    id: 'fallback',
-    name: process.env.NEXT_PUBLIC_SITE_NAME || 'Store',
-    currencyCode: 'PLN',
-    supportedCurrencies: ['PLN'],
-    paymentCurrencies: ['PLN'],
-  },
-};
-
 export default async function RootLayout({
   children,
+  params,
 }: {
   children: React.ReactNode;
+  params: Promise<{ locale?: string }>;
 }) {
-  let shopData: ShopQuery;
-  try {
-    shopData = await fetchShop();
-  } catch (error) {
-    console.error('[RootLayout] Failed to fetch shop data, using fallback:', error instanceof Error ? error.message : error);
-    shopData = FALLBACK_SHOP;
-  }
-
-  // Read httpOnly auth cookie — invisible to JS, so we pass it as a prop
-  const cookieStore = await cookies();
-  const hasAuthToken = !!cookieStore.get(AUTH_COOKIE_NAME)?.value;
-
+  const { locale } = await params;
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
-        <ThemeProvider
-          attribute={themeConfig.attribute}
-          defaultTheme={themeConfig.defaultTheme}
-          enableSystem={themeConfig.enableSystem}
-          disableTransitionOnChange={themeConfig.disableTransitionOnChange}
-          storageKey={themeConfig.storageKey}
-        >
-          <QueryProvider>
-            <StorefrontProvider
-              config={{
-                apiUrl: graphqlConfig.apiUrl,
-                shopSlug: graphqlConfig.shopSlug,
-              }}
-              shopData={shopData.shop}
-              initialIsAuthenticated={hasAuthToken}
-            >
-              <StoresProvider>
-                <div className="flex min-h-screen flex-col">
-                  <Header />
-                  <main className="flex-1">{children}</main>
-                  <Footer />
-                </div>
-                <Toaster position="bottom-right" richColors />
-              </StoresProvider>
-            </StorefrontProvider>
-          </QueryProvider>
-        </ThemeProvider>
-      </body>
+    <html lang={locale || defaultLocale} suppressHydrationWarning>
+      <body className={inter.className}>{children}</body>
     </html>
   );
 }