@doswiftly/cli 0.1.18 → 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/[locale]/products/[slug]/error.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect } from "react";
+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";
+
+export default function ProductError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("[Product Error]", error);
+  }, [error]);
+
+  return (
+    <div className="container mx-auto flex min-h-[400px] items-center justify-center px-4 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Product not available
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-sm text-muted-foreground">
+            We couldn&apos;t load this product. It may have been removed or is temporarily unavailable.
+          </p>
+          <div className="flex gap-3">
+            <Button onClick={reset}>Try again</Button>
+            <Button variant="outline" asChild>
+              <Link href="/products">Browse products</Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/[locale]/products/[slug]/loading.tsx

@@ -0,0 +1,29 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function ProductLoading() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Skeleton className="mb-6 h-5 w-64" />
+      <div className="grid gap-8 lg:grid-cols-2">
+        {/* Image gallery */}
+        <Skeleton className="aspect-square w-full rounded-lg" />
+        {/* Product info */}
+        <div className="space-y-4">
+          <Skeleton className="h-8 w-3/4" />
+          <Skeleton className="h-6 w-32" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-5/6" />
+          <div className="space-y-2 pt-4">
+            <Skeleton className="h-5 w-20" />
+            <div className="flex gap-2">
+              {[...Array(4)].map((_, i) => (
+                <Skeleton key={i} className="h-10 w-16 rounded-md" />
+              ))}
+            </div>
+          </div>
+          <Skeleton className="mt-6 h-12 w-full rounded-md" />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,8 +1,10 @@
 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";
+import type { ProductQuery } from "@/generated/graphql";
 
 // ============================================================================
 // METADATA GENERATION
@@ -25,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"),
       };
     }
 
@@ -87,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"),
     };
   }
 }
@@ -115,7 +119,7 @@ export async function generateStaticParams() {
       sortKey: "BEST_SELLING",
     });
 
-    return products.map((product: any) => ({
+    return products.map((product) => ({
       slug: product.handle,
     }));
   } catch (error) {
@@ -199,7 +203,9 @@ export default async function ProductPage({
  * 
  * @see https://schema.org/Product
  */
-function generateProductJsonLd(product: any) {
+type Product = NonNullable<ProductQuery['product']>;
+
+function generateProductJsonLd(product: Product) {
   const firstImage = product.images?.[0];
   const price = product.priceRange?.minVariantPrice;
   const firstVariant = product.variants?.[0];
@@ -223,10 +229,7 @@ function generateProductJsonLd(product: any) {
       availability: firstVariant?.available
         ? "https://schema.org/InStock"
         : "https://schema.org/OutOfStock",
-      url:
-        typeof window !== "undefined"
-          ? window.location.href
-          : `/products/${product.handle}`,
+      url: `/products/${product.handle}`,
     },
     sku: product.id,
     productID: product.id,

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

@@ -1,8 +1,9 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
 import { useProduct } from "@/lib/graphql/hooks";
-import { useCurrencyStore } from "@/stores/currency-store";
+import { useCurrencyStore } from "@doswiftly/storefront-sdk/react";
 import { ProductGallery } from "@/components/product/product-gallery";
 import { ProductPrice } from "@/components/product/product-price";
 import { ProductVariantSelector } from "@/components/product/product-variant-selector";
@@ -13,58 +14,12 @@ import { SimilarProducts } from "@/components/product/similar-products";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Badge } from "@/components/ui/badge";
 import { Gift } from "lucide-react";
-import { shopConfig } from "@/lib/config";
-
-export interface Product {
-  id: string;
-  handle: string;
-  title: string;
-  description?: string | null;
-  vendor?: string | null;
-  productType?: string | null;
-  type?: string | null;
-  collectRecipientInfo?: boolean;
-  tags?: string[];
-  images: Array<{
-    url: string;
-    altText?: string | null;
-  }>;
-  variants: Array<{
-    id: string;
-    title: string;
-    available: boolean;
-    selectedOptions: Array<{
-      name: string;
-      value: string;
-    }>;
-    price: {
-      amount: string;
-      currencyCode: string;
-    };
-    compareAtPrice?: {
-      amount: string;
-      currencyCode: string;
-    } | null;
-    image?: {
-      url: string;
-      altText?: string | null;
-    } | null;
-  }>;
-  priceRange: {
-    minVariantPrice: {
-      amount: string;
-      currencyCode: string;
-    };
-    maxVariantPrice: {
-      amount: string;
-      currencyCode: string;
-    };
-  };
-}
+import type { ProductQuery } from "@/generated/graphql";
+import type { ProductCardFields, ProductDetailFields } from "@/lib/graphql/fragments";
 
 export interface ProductClientProps {
-  product: Product;
-  similarProducts?: any[];
+  product: ProductDetailFields;
+  similarProducts?: ProductCardFields[];
 }
 
 /**
@@ -81,12 +36,13 @@ 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);
   
   // Get user's preferred currency from store
-  const currency = useCurrencyStore((s: any) => s.currency);
-  const isHydrated = useCurrencyStore((s: any) => s.isHydrated);
+  const currency = useCurrencyStore((s) => s.currency);
+  const isHydrated = useCurrencyStore((s) => s.isLoaded);
   
   // Check if SSR currency matches user's preferred currency
   const ssrCurrency = initialProduct.priceRange?.minVariantPrice?.currencyCode;
@@ -99,7 +55,7 @@ export function ProductClient({ product: initialProduct, similarProducts = [] }:
     enabled: isHydrated,
     // Only use SSR data as placeholder if currency matches
     // Otherwise, don't show stale data from wrong currency
-    placeholderData: currencyMatches ? { product: initialProduct } : undefined,
+    placeholderData: currencyMatches ? { product: initialProduct } as ProductQuery : undefined,
     // Don't use stale data - always refetch when currency changes
     staleTime: 0,
   });
@@ -111,10 +67,10 @@ export function ProductClient({ product: initialProduct, similarProducts = [] }:
   // IMPORTANT: This useEffect must be called BEFORE any conditional returns
   // to comply with React Hooks rules (hooks must be called in the same order every render)
   useEffect(() => {
-    if (product?.variants.length > 0) {
+    if (product && product.variants.length > 0) {
       // Try to maintain the same variant by matching ID
       const matchingVariant = product.variants.find(
-        (v: any) => v.id === selectedVariant.id
+        (v) => v.id === selectedVariant.id
       );
       if (matchingVariant) {
         setSelectedVariant(matchingVariant);
@@ -318,13 +274,13 @@ export function ProductClient({ product: initialProduct, similarProducts = [] }:
         <TabsContent value="shipping" className="mt-6">
           <div className="space-y-4 text-sm">
             <p className="text-muted-foreground">
-              Free shipping on orders over ${shopConfig.shipping.freeShippingThreshold}.
-              Standard delivery takes {shopConfig.shipping.standardDeliveryDays.min}-{shopConfig.shipping.standardDeliveryDays.max} business days.
+              Free shipping on orders over $50.
+              Standard delivery takes 3-5 business days.
             </p>
             <ul className="list-inside list-disc space-y-2 text-muted-foreground">
-              {shopConfig.shipping.features.map((feature, index) => (
-                <li key={index}>{feature}</li>
-              ))}
+              <li>Express shipping available at checkout</li>
+              <li>International shipping available</li>
+              <li>30-day return policy</li>
             </ul>
           </div>
         </TabsContent>
@@ -334,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/[locale]/products/loading.tsx

@@ -0,0 +1,32 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function ProductsLoading() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Skeleton className="mb-6 h-10 w-48" />
+      <div className="flex gap-8">
+        {/* Filters sidebar */}
+        <div className="hidden w-64 shrink-0 lg:block">
+          <Skeleton className="mb-4 h-8 w-32" />
+          <div className="space-y-3">
+            {[...Array(5)].map((_, i) => (
+              <Skeleton key={i} className="h-6 w-full" />
+            ))}
+          </div>
+        </div>
+        {/* Product grid */}
+        <div className="flex-1">
+          <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
+            {[...Array(12)].map((_, i) => (
+              <div key={i} className="space-y-3">
+                <Skeleton className="aspect-square w-full rounded-lg" />
+                <Skeleton className="h-4 w-3/4" />
+                <Skeleton className="h-4 w-1/2" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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>