@doswiftly/cli 0.1.1

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

@@ -0,0 +1,343 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useProduct } from "@/lib/graphql/hooks";
+import { useCurrencyStore } from "@/stores/currency-store";
+import { ProductGallery } from "@/components/product/product-gallery";
+import { ProductPrice } from "@/components/product/product-price";
+import { ProductVariantSelector } from "@/components/product/product-variant-selector";
+import { ProductQuantitySelector } from "@/components/product/product-quantity-selector";
+import { AddToCartButton } from "@/components/product/add-to-cart-button";
+import { StockIndicator } from "@/components/product/stock-indicator";
+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;
+    };
+  };
+}
+
+export interface ProductClientProps {
+  product: Product;
+  similarProducts?: any[];
+}
+
+/**
+ * Product Client Component
+ * 
+ * Handles interactive features and currency-aware price display.
+ * 
+ * Flow:
+ * 1. Receives initial product data from Server Component (base currency)
+ * 2. Checks if user's preferred currency differs from SSR currency
+ * 3. If different, refetches product with preferred currency
+ * 4. Uses suppressHydrationWarning on price elements to prevent mismatch
+ * 
+ * Requirements: 2.2, 3.2, 6.4
+ */
+export function ProductClient({ product: initialProduct, similarProducts = [] }: ProductClientProps) {
+  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);
+  
+  // Check if SSR currency matches user's preferred currency
+  const ssrCurrency = initialProduct.priceRange?.minVariantPrice?.currencyCode;
+  const currencyMatches = !isHydrated || !currency || currency === ssrCurrency;
+  
+  // Refetch product with current currency from store
+  // Query key includes currency, so it auto-refetches when currency changes
+  const { data, isFetching } = useProduct(initialProduct.handle, {
+    // Only enable after hydration to avoid SSR/client mismatch
+    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,
+    // Don't use stale data - always refetch when currency changes
+    staleTime: 0,
+  });
+  
+  // Use fetched product if available, otherwise use initial (SSR) data only if currency matches
+  const product = data?.product || (currencyMatches ? initialProduct : null);
+  
+  // Update selected variant when product changes (currency switch)
+  // 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) {
+      // Try to maintain the same variant by matching ID
+      const matchingVariant = product.variants.find(
+        (v: any) => v.id === selectedVariant.id
+      );
+      if (matchingVariant) {
+        setSelectedVariant(matchingVariant);
+      } else {
+        // Fallback to first variant if ID doesn't match
+        setSelectedVariant(product.variants[0]);
+      }
+    }
+  }, [product, selectedVariant.id]);
+  
+  // Show loading state if we don't have data in correct currency yet
+  // This check comes AFTER all hooks to prevent "Rendered fewer hooks than expected" error
+  if (!product) {
+    return (
+      <div className="space-y-16">
+        <div className="grid gap-8 lg:grid-cols-2 lg:gap-12">
+          <div className="aspect-square animate-pulse bg-muted rounded-lg" />
+          <div className="space-y-6">
+            <div className="h-10 w-3/4 animate-pulse bg-muted rounded" />
+            <div className="h-8 w-1/4 animate-pulse bg-muted rounded" />
+            <div className="h-24 animate-pulse bg-muted rounded" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const isOnSale = selectedVariant.compareAtPrice &&
+    parseFloat(selectedVariant.compareAtPrice.amount) >
+    parseFloat(selectedVariant.price.amount);
+
+  return (
+    <div className="space-y-16">
+      {/* Product Details */}
+      <div className="grid gap-8 lg:grid-cols-2 lg:gap-12">
+        {/* Gallery */}
+        <div>
+          <ProductGallery images={product.images} productTitle={product.title} />
+        </div>
+
+        {/* Info */}
+        <div className="space-y-6">
+          {/* Title & Badges */}
+          <div>
+            <div className="mb-2 flex flex-wrap gap-2">
+              {product.type === "GIFT_CARD" && (
+                <Badge variant="default">
+                  <Gift className="mr-1 h-3 w-3" />
+                  Karta podarunkowa
+                </Badge>
+              )}
+              {product.tags?.includes("new") && product.type !== "GIFT_CARD" && (
+                <Badge variant="default">NEW</Badge>
+              )}
+              {isOnSale && <Badge variant="destructive">SALE</Badge>}
+            </div>
+            <h1 className="text-3xl font-bold text-foreground lg:text-4xl">
+              {product.title}
+            </h1>
+            {product.vendor && (
+              <p className="mt-2 text-sm text-muted-foreground">
+                by {product.vendor}
+              </p>
+            )}
+          </div>
+
+          {/* Price - suppressHydrationWarning prevents mismatch during currency switch */}
+          <div suppressHydrationWarning>
+            <ProductPrice
+              price={selectedVariant.price}
+              compareAtPrice={selectedVariant.compareAtPrice || undefined}
+              showCompareAt
+              size="xl"
+            />
+          </div>
+
+          {/* Stock */}
+          <StockIndicator
+            available={selectedVariant.available}
+            variant="text"
+          />
+
+          {/* Description */}
+          {product.description && (
+            <div className="prose prose-sm max-w-none text-muted-foreground">
+              <p>{product.description}</p>
+            </div>
+          )}
+
+          {/* Variant Selector */}
+          {product.variants.length > 1 && (
+            <ProductVariantSelector
+              variants={product.variants}
+              selectedVariantId={selectedVariant.id}
+              onVariantChange={setSelectedVariant}
+            />
+          )}
+
+          {/* Quantity & Add to Cart */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-4">
+              <ProductQuantitySelector
+                value={quantity}
+                onChange={setQuantity}
+                min={1}
+                max={99}
+                disabled={!selectedVariant.available}
+              />
+              <AddToCartButton
+                variantId={selectedVariant.id}
+                productId={product.id}
+                productHandle={product.handle}
+                productTitle={product.title}
+                variantTitle={selectedVariant.title}
+                price={selectedVariant.price}
+                image={selectedVariant.image || product.images[0]}
+                available={selectedVariant.available}
+                quantity={quantity}
+                fullWidth
+                size="lg"
+              />
+            </div>
+          </div>
+
+          {/* Product Details */}
+          {(product.vendor || product.productType) && (
+            <div className="border-t border-border pt-6">
+              <h3 className="mb-4 text-sm font-semibold text-foreground">
+                Product Details
+              </h3>
+              <dl className="space-y-2 text-sm">
+                {product.vendor && (
+                  <div className="flex justify-between">
+                    <dt className="text-muted-foreground">Vendor</dt>
+                    <dd className="font-medium text-foreground">
+                      {product.vendor}
+                    </dd>
+                  </div>
+                )}
+                {product.productType && (
+                  <div className="flex justify-between">
+                    <dt className="text-muted-foreground">Type</dt>
+                    <dd className="font-medium text-foreground">
+                      {product.productType}
+                    </dd>
+                  </div>
+                )}
+              </dl>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Additional Info Tabs */}
+      <Tabs defaultValue="description" className="w-full">
+        <TabsList className="w-full justify-start">
+          <TabsTrigger value="description">Description</TabsTrigger>
+          <TabsTrigger value="details">Details</TabsTrigger>
+          <TabsTrigger value="shipping">Shipping</TabsTrigger>
+        </TabsList>
+        
+        <TabsContent value="description" className="mt-6">
+          <div className="prose prose-sm max-w-none">
+            <p>{product.description || "No description available."}</p>
+          </div>
+        </TabsContent>
+        
+        <TabsContent value="details" className="mt-6">
+          <dl className="grid gap-4 sm:grid-cols-2">
+            <div>
+              <dt className="font-medium text-foreground">Product ID</dt>
+              <dd className="mt-1 text-sm text-muted-foreground">
+                {product.id}
+              </dd>
+            </div>
+            <div>
+              <dt className="font-medium text-foreground">Handle</dt>
+              <dd className="mt-1 text-sm text-muted-foreground">
+                {product.handle}
+              </dd>
+            </div>
+            {product.vendor && (
+              <div>
+                <dt className="font-medium text-foreground">Vendor</dt>
+                <dd className="mt-1 text-sm text-muted-foreground">
+                  {product.vendor}
+                </dd>
+              </div>
+            )}
+            {product.productType && (
+              <div>
+                <dt className="font-medium text-foreground">Type</dt>
+                <dd className="mt-1 text-sm text-muted-foreground">
+                  {product.productType}
+                </dd>
+              </div>
+            )}
+          </dl>
+        </TabsContent>
+        
+        <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.
+            </p>
+            <ul className="list-inside list-disc space-y-2 text-muted-foreground">
+              {shopConfig.shipping.features.map((feature, index) => (
+                <li key={index}>{feature}</li>
+              ))}
+            </ul>
+          </div>
+        </TabsContent>
+      </Tabs>
+
+      {/* Similar Products */}
+      {similarProducts.length > 0 && (
+        <SimilarProducts
+          products={similarProducts}
+          title="You might also like"
+          columns={4}
+        />
+      )}
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/products/page.tsx

@@ -0,0 +1,25 @@
+import { Suspense } from "react";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { Spinner } from "@/components/ui/spinner";
+import { ProductsClient } from "./products-client";
+
+export default function ProductsPage() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      {/* Breadcrumbs */}
+      <Breadcrumbs className="mb-6" />
+
+      {/* Page Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-foreground">All Products</h1>
+        <p className="mt-2 text-muted-foreground">
+          Browse our complete collection of products
+        </p>
+      </div>
+
+      <Suspense fallback={<Spinner />}>
+        <ProductsClient />
+      </Suspense>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/products/products-client.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { Suspense } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import { ProductGrid } from "@/components/product/product-grid";
+import { ProductFilters } from "@/components/product/product-filters";
+import { ProductSort, type SortOption } from "@/components/product/product-sort";
+import { Pagination } from "@/components/ui/pagination";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useProducts, useCategories } from "@/lib/graphql/hooks";
+
+export function ProductsClient() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  
+  // Parse URL parameters (all lowercase)
+  const page = parseInt(searchParams.get("page") || "1", 10);
+  const sort = (searchParams.get("sort") as SortOption) || "relevance";
+  const categories = searchParams.get("categories")?.split(",").filter(Boolean) || [];
+  const priceMin = searchParams.get("price_min");
+  const priceMax = searchParams.get("price_max");
+  
+  const limit = 20;
+
+  // Fetch categories for filter sidebar
+  const { data: categoriesData } = useCategories();
+  const allCategories = categoriesData?.categories ?? [];
+
+  // Build GraphQL query string for filters
+  let queryString = "";
+  if (categories.length > 0) {
+    // Use category handles in query
+    queryString = categories.map(cat => `category:${cat}`).join(" OR ");
+  }
+
+  // Fetch products using GraphQL
+  // Backend should normalize sort values (e.g., "price-asc" → PRICE + reverse: false)
+  const { data, isLoading, error } = useProducts({
+    first: limit,
+    query: queryString || undefined,
+    sortKey: sort as any, // Backend normalizes this
+  });
+
+  const products = data?.products ?? [];
+  const totalCount = data?.totalCount ?? 0;
+  const totalPages = Math.ceil(totalCount / limit);
+
+  // Build selected filters object
+  const selectedFilters: Record<string, any> = {};
+  if (categories.length > 0) {
+    selectedFilters.categories = categories;
+  }
+  if (priceMin) {
+    selectedFilters.price_min = priceMin;
+  }
+  if (priceMax) {
+    selectedFilters.price_max = priceMax;
+  }
+
+  // Update URL with new filters
+  const updateFilters = (updates: Record<string, any>) => {
+    const newParams = new URLSearchParams(searchParams.toString());
+    
+    Object.entries(updates).forEach(([key, value]) => {
+      if (value === null || value === undefined || value === "") {
+        newParams.delete(key);
+      } else if (Array.isArray(value)) {
+        if (value.length > 0) {
+          newParams.set(key, value.join(","));
+        } else {
+          newParams.delete(key);
+        }
+      } else {
+        newParams.set(key, value.toString());
+      }
+    });
+    
+    // Reset to page 1 when filters change
+    newParams.set("page", "1");
+    router.push(`/products?${newParams.toString()}`);
+  };
+
+  // Handle filter changes
+  const handleFilterChange = (filterId: string, value: any) => {
+    if (filterId === "categories") {
+      // Toggle category in array
+      const newCategories = categories.includes(value)
+        ? categories.filter(c => c !== value)
+        : [...categories, value];
+      updateFilters({ categories: newCategories });
+    } else if (filterId === "price_min") {
+      updateFilters({ price_min: value });
+    } else if (filterId === "price_max") {
+      updateFilters({ price_max: value });
+    }
+  };
+
+  // Build filter options from categories
+  const filterOptions = [
+    {
+      id: "categories",
+      label: "Categories",
+      type: "checkbox" as const,
+      options: allCategories.map((category: any) => ({
+        label: category.name,
+        value: category.slug,
+        count: category.productCount || 0,
+      })),
+    },
+    {
+      id: "price",
+      label: "Price Range",
+      type: "range" as const,
+      min: 0,
+      max: 1000,
+    },
+  ];
+
+  return (
+    <div className="flex flex-col gap-8 lg:flex-row">
+      {/* Sidebar Filters */}
+      <aside className="w-full lg:w-64 lg:flex-shrink-0">
+        <div className="sticky top-4">
+          <h2 className="mb-4 text-lg font-semibold text-foreground">
+            Filters
+          </h2>
+          <Suspense fallback={<Skeleton className="h-96 w-full" />}>
+            <ProductFilters
+              filters={filterOptions}
+              selectedFilters={selectedFilters}
+              onFilterChange={handleFilterChange}
+              onClearAll={() => router.push("/products")}
+            />
+          </Suspense>
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <div className="flex-1">
+        {/* Sort & Results Count */}
+        <div className="mb-6 flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
+          <p className="text-sm text-muted-foreground">
+            {totalCount > 0
+              ? `Showing ${(page - 1) * limit + 1}-${Math.min(page * limit, totalCount)} of ${totalCount} products`
+              : "No products found"}
+          </p>
+          <ProductSort 
+            value={sort} 
+            onChange={(newSort) => {
+              const newParams = new URLSearchParams(searchParams.toString());
+              newParams.set("sort", newSort);
+              router.push(`/products?${newParams.toString()}`);
+            }} 
+          />
+        </div>
+
+        {/* Products Grid */}
+        {isLoading ? (
+          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <Skeleton key={i} className="aspect-square w-full" />
+            ))}
+          </div>
+        ) : (
+          <ProductGrid
+            products={products}
+            columns={3}
+            priorityCount={6}
+            showBadges
+            emptyMessage="No products match your filters"
+            onResetFilters={() => router.push("/products")}
+          />
+        )}
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="mt-8 flex justify-center">
+            <Pagination
+              currentPage={page}
+              totalPages={totalPages}
+              onPageChange={(newPage: number) => {
+                const newParams = new URLSearchParams(searchParams.toString());
+                newParams.set("page", newPage.toString());
+                router.push(`/products?${newParams.toString()}`);
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/returns/page.tsx

@@ -0,0 +1,77 @@
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { RotateCcw, CheckCircle, XCircle } from "lucide-react";
+
+export default function ReturnsPage() {
+  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">Returns & Refunds</h1>
+        
+        <div className="space-y-8">
+          <div>
+            <div className="mb-4 flex items-center gap-3">
+              <RotateCcw className="h-6 w-6 text-primary" />
+              <h2 className="text-2xl font-semibold text-foreground">Return Policy</h2>
+            </div>
+            <p className="text-muted-foreground">
+              We want you to be completely satisfied with your purchase. If you're not happy with your order, you can return it within 30 days of delivery for a full refund.
+            </p>
+          </div>
+          
+          <div>
+            <div className="mb-4 flex items-center gap-3">
+              <CheckCircle className="h-6 w-6 text-green-600" />
+              <h2 className="text-2xl font-semibold text-foreground">Eligible Returns</h2>
+            </div>
+            <ul className="list-inside list-disc space-y-2 text-muted-foreground">
+              <li>Items must be unused and in original condition</li>
+              <li>Items must be in original packaging</li>
+              <li>Return within 30 days of delivery</li>
+              <li>Include proof of purchase</li>
+            </ul>
+          </div>
+          
+          <div>
+            <div className="mb-4 flex items-center gap-3">
+              <XCircle className="h-6 w-6 text-red-600" />
+              <h2 className="text-2xl font-semibold text-foreground">Non-Returnable Items</h2>
+            </div>
+            <ul className="list-inside list-disc space-y-2 text-muted-foreground">
+              <li>Personalized or custom-made items</li>
+              <li>Perishable goods</li>
+              <li>Intimate or sanitary goods</li>
+              <li>Sale or clearance items</li>
+            </ul>
+          </div>
+          
+          <div>
+            <h2 className="mb-4 text-2xl font-semibold text-foreground">How to Return</h2>
+            <ol className="list-inside list-decimal space-y-2 text-muted-foreground">
+              <li>Contact our customer service team to initiate a return</li>
+              <li>Pack the item securely in its original packaging</li>
+              <li>Include your order number and reason for return</li>
+              <li>Ship the package to the address provided</li>
+              <li>Refund will be processed within 5-7 business days after we receive your return</li>
+            </ol>
+          </div>
+          
+          <div>
+            <h2 className="mb-4 text-2xl font-semibold text-foreground">Refund Policy</h2>
+            <p className="text-muted-foreground">
+              Once we receive and inspect your return, we'll send you an email notification. If approved, your refund will be processed and automatically applied to your original payment method within 5-7 business days.
+            </p>
+          </div>
+          
+          <div>
+            <h2 className="mb-4 text-2xl font-semibold text-foreground">Exchanges</h2>
+            <p className="text-muted-foreground">
+              We only replace items if they are defective or damaged. If you need to exchange an item, contact our customer service team.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/robots.ts

@@ -0,0 +1,53 @@
+/**
+ * robots.txt Configuration
+ *
+ * Controls search engine crawler access to the site.
+ *
+ * Requirements: 13.5
+ */
+
+import type { MetadataRoute } from "next";
+
+const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://example.com";
+
+/**
+ * Generate robots.txt rules
+ *
+ * Allows:
+ * - All public pages (products, collections, categories)
+ *
+ * Disallows:
+ * - API routes (/api/*)
+ * - Checkout pages (/checkout/*)
+ * - Account pages (/account/*)
+ * - Admin routes (/admin/*)
+ * - Cart page (/cart)
+ * - Auth pages (/auth/*)
+ */
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      {
+        userAgent: "*",
+        allow: "/",
+        disallow: [
+          "/api/",
+          "/checkout/",
+          "/account/",
+          "/admin/",
+          "/cart",
+          "/auth/",
+          "/_next/",
+          "/private/",
+        ],
+      },
+      // Block bad bots explicitly
+      {
+        userAgent: ["GPTBot", "ChatGPT-User", "CCBot", "anthropic-ai"],
+        disallow: ["/"],
+      },
+    ],
+    sitemap: `${SITE_URL}/sitemap.xml`,
+    host: SITE_URL,
+  };
+}