@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/app/checkout/success/[orderId]/page.tsx

@@ -0,0 +1,256 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { CheckCircle, Package, Mail, ArrowRight, Clock, Building2, Copy, Check } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { toast } from "sonner";
+
+interface OrderSuccessPageProps {
+  params: Promise<{ orderId: string }>;
+}
+
+export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
+  const [orderId, setOrderId] = useState<string>("");
+  const [copied, setCopied] = useState(false);
+  const searchParams = useSearchParams();
+
+  // Get payment type from URL params
+  const paymentType = searchParams.get("payment");
+  const isBankTransfer = paymentType === "bank_transfer";
+  const isPendingPayment = searchParams.get("status") === "pending";
+
+  useEffect(() => {
+    params.then(({ orderId }) => setOrderId(orderId));
+  }, [params]);
+
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      toast.success("Skopiowano do schowka");
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast.error("Nie udało się skopiować");
+    }
+  };
+
+  // Mock bank transfer details - in production, these would come from backend
+  const bankTransferDetails = {
+    bankName: "Bank XYZ",
+    accountNumber: "PL12 3456 7890 1234 5678 9012 3456",
+    recipientName: "DoSwiftly Sp. z o.o.",
+    transferTitle: `Zamówienie ${orderId}`,
+    amount: "---", // Would be fetched from order
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-16">
+      <div className="mx-auto max-w-2xl text-center">
+        {/* Success Icon */}
+        <div className="mb-6 flex justify-center">
+          <div className={`rounded-full p-4 ${isPendingPayment ? "bg-yellow-100" : "bg-green-100"}`}>
+            {isPendingPayment ? (
+              <Clock className="h-12 w-12 text-yellow-600" />
+            ) : (
+              <CheckCircle className="h-12 w-12 text-green-600" />
+            )}
+          </div>
+        </div>
+
+        {/* Heading */}
+        <h1 className="mb-2 text-3xl font-bold">
+          {isPendingPayment ? "Zamówienie oczekuje na płatność" : "Dziękujemy za zamówienie!"}
+        </h1>
+        <p className="mb-8 text-muted-foreground">
+          {isPendingPayment
+            ? "Po otrzymaniu płatności rozpoczniemy realizację zamówienia."
+            : "Twoje zamówienie zostało potwierdzone i wkrótce zostanie wysłane."}
+        </p>
+
+        {/* Order Number */}
+        <Card className="mb-8">
+          <CardHeader>
+            <CardTitle className="text-lg">Potwierdzenie zamówienia</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between border-b pb-4">
+                <span className="text-muted-foreground">Numer zamówienia</span>
+                <span className="font-mono font-medium">{orderId || "..."}</span>
+              </div>
+
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="flex items-start gap-3">
+                  <Mail className="mt-1 h-5 w-5 text-muted-foreground" />
+                  <div className="text-left">
+                    <p className="font-medium">Email potwierdzający</p>
+                    <p className="text-sm text-muted-foreground">
+                      Wysłaliśmy potwierdzenie ze szczegółami zamówienia.
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-3">
+                  <Package className="mt-1 h-5 w-5 text-muted-foreground" />
+                  <div className="text-left">
+                    <p className="font-medium">Śledzenie przesyłki</p>
+                    <p className="text-sm text-muted-foreground">
+                      Otrzymasz numer śledzenia, gdy paczka zostanie wysłana.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Bank Transfer Instructions */}
+        {isBankTransfer && (
+          <Alert className="mb-8 text-left">
+            <Building2 className="h-4 w-4" />
+            <AlertTitle>Dane do przelewu bankowego</AlertTitle>
+            <AlertDescription className="mt-4 space-y-3">
+              <div className="grid gap-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-muted-foreground">Bank</span>
+                  <span className="font-medium">{bankTransferDetails.bankName}</span>
+                </div>
+                <div className="flex items-center justify-between gap-2">
+                  <span className="text-sm text-muted-foreground">Numer konta</span>
+                  <div className="flex items-center gap-2">
+                    <span className="font-mono text-sm">{bankTransferDetails.accountNumber}</span>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6"
+                      onClick={() => copyToClipboard(bankTransferDetails.accountNumber)}
+                    >
+                      {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-muted-foreground">Odbiorca</span>
+                  <span className="font-medium">{bankTransferDetails.recipientName}</span>
+                </div>
+                <div className="flex items-center justify-between gap-2">
+                  <span className="text-sm text-muted-foreground">Tytuł przelewu</span>
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium">{bankTransferDetails.transferTitle}</span>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6"
+                      onClick={() => copyToClipboard(bankTransferDetails.transferTitle)}
+                    >
+                      {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              <p className="mt-4 text-sm text-muted-foreground">
+                Realizacja zamówienia rozpocznie się po zaksięgowaniu wpłaty (zazwyczaj 1-2 dni robocze).
+              </p>
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {/* What's Next */}
+        <Card className="mb-8">
+          <CardHeader>
+            <CardTitle className="text-lg">Co dalej?</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ol className="space-y-3 text-left">
+              {isBankTransfer ? (
+                <>
+                  <li className="flex items-start gap-3">
+                    <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
+                      1
+                    </span>
+                    <div>
+                      <p className="font-medium">Wykonaj przelew</p>
+                      <p className="text-sm text-muted-foreground">
+                        Prześlij płatność na podane powyżej konto bankowe.
+                      </p>
+                    </div>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
+                      2
+                    </span>
+                    <div>
+                      <p className="font-medium">Potwierdzenie płatności</p>
+                      <p className="text-sm text-muted-foreground">
+                        Po zaksięgowaniu wpłaty otrzymasz email z potwierdzeniem.
+                      </p>
+                    </div>
+                  </li>
+                </>
+              ) : (
+                <li className="flex items-start gap-3">
+                  <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
+                    1
+                  </span>
+                  <div>
+                    <p className="font-medium">Przetwarzanie zamówienia</p>
+                    <p className="text-sm text-muted-foreground">
+                      Przygotowujemy Twoje zamówienie do wysyłki.
+                    </p>
+                  </div>
+                </li>
+              )}
+              <li className="flex items-start gap-3">
+                <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
+                  {isBankTransfer ? 3 : 2}
+                </span>
+                <div>
+                  <p className="font-medium">Wysyłka</p>
+                  <p className="text-sm text-muted-foreground">
+                    Po wysłaniu otrzymasz email z numerem śledzenia przesyłki.
+                  </p>
+                </div>
+              </li>
+              <li className="flex items-start gap-3">
+                <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
+                  {isBankTransfer ? 4 : 3}
+                </span>
+                <div>
+                  <p className="font-medium">Dostawa</p>
+                  <p className="text-sm text-muted-foreground">
+                    Paczka zostanie dostarczona pod wskazany adres.
+                  </p>
+                </div>
+              </li>
+            </ol>
+          </CardContent>
+        </Card>
+
+        {/* Actions */}
+        <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
+          <Button asChild>
+            <Link href="/products">
+              Kontynuuj zakupy
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Link>
+          </Button>
+          <Button variant="outline" asChild>
+            <Link href="/account/orders">Moje zamówienia</Link>
+          </Button>
+        </div>
+
+        {/* Help */}
+        <p className="mt-8 text-sm text-muted-foreground">
+          Potrzebujesz pomocy?{" "}
+          <Link href="/contact" className="text-primary underline underline-offset-4">
+            Skontaktuj się z nami
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/collections/[handle]/page.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { ProductGrid } from "@/components/product/product-grid";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useCollection } from "@/lib/graphql/hooks";
+
+export default function CollectionPage() {
+  const params = useParams();
+  const handle = params.handle as string;
+
+  // Fetch collection using GraphQL
+  const { data, isLoading, error } = useCollection(handle);
+
+  const collection = data?.collection;
+  const products = collection?.products?.edges?.map((edge: any) => edge.node) ?? [];
+
+  if (isLoading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <Breadcrumbs className="mb-6" />
+        <div className="mb-8">
+          <Skeleton className="h-10 w-64 mb-4" />
+          <Skeleton className="h-6 w-96" />
+        </div>
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <Skeleton key={i} className="aspect-square w-full" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !collection) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <Breadcrumbs className="mb-6" />
+        <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
+          <h1 className="text-2xl font-bold text-foreground mb-2">
+            Collection Not Found
+          </h1>
+          <p className="text-muted-foreground">
+            The collection you're looking for doesn't exist.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Breadcrumbs className="mb-6" />
+
+      {/* Collection Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-foreground">{collection.title}</h1>
+        {collection.description && (
+          <p className="mt-2 text-muted-foreground">{collection.description}</p>
+        )}
+      </div>
+
+      {/* Products Grid */}
+      <ProductGrid
+        products={products}
+        columns={4}
+        priorityCount={8}
+        showBadges
+        emptyMessage="No products in this collection"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,75 @@
+import { Metadata } from "next";
+import Link from "next/link";
+import { Card } from "@/components/ui/card";
+import { fetchCollections } from "@/lib/graphql/server";
+
+export const metadata: Metadata = {
+  title: "Collections",
+  description: "Browse our curated collections of products",
+};
+
+// Enable ISR with 60 second revalidation
+export const revalidate = 60;
+
+export default async function CollectionsPage() {
+  // Fetch collections from GraphQL API (already normalized to flat array)
+  const { collections } = await fetchCollections({ first: 20 });
+
+  // Defensive check for empty/undefined response
+  const collectionList = collections || [];
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-foreground">Collections</h1>
+        <p className="mt-2 text-muted-foreground">
+          Browse our curated collections of products
+        </p>
+      </div>
+
+      {collectionList.length === 0 ? (
+        <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
+          <p className="text-muted-foreground">No collections available yet</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {collectionList.map((collection) => (
+            <Link
+              key={collection.id}
+              href={`/collections/${collection.handle}`}
+              className="group"
+            >
+              <Card className="overflow-hidden transition-shadow hover:shadow-lg">
+                <div className="aspect-video bg-muted relative overflow-hidden">
+                  {collection.image?.url ? (
+                    <img
+                      src={collection.image.url}
+                      alt={collection.image.altText || collection.title}
+                      className="h-full w-full object-cover transition-transform group-hover:scale-105"
+                    />
+                  ) : (
+                    <div className="flex h-full items-center justify-center text-muted-foreground">
+                      <span className="text-4xl font-bold opacity-20">
+                        {collection.title.charAt(0)}
+                      </span>
+                    </div>
+                  )}
+                </div>
+                <div className="p-6">
+                  <h2 className="text-xl font-semibold text-foreground group-hover:text-primary transition-colors">
+                    {collection.title}
+                  </h2>
+                  {collection.description && (
+                    <p className="mt-2 text-sm text-muted-foreground line-clamp-2">
+                      {collection.description}
+                    </p>
+                  )}
+                </div>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,114 @@
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { Mail, Phone, MapPin } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function ContactPage() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Breadcrumbs className="mb-6" />
+      
+      <div className="mx-auto max-w-4xl">
+        <h1 className="mb-6 text-4xl font-bold text-foreground">Contact Us</h1>
+        <p className="mb-8 text-lg text-muted-foreground">
+          Have a question? We'd love to hear from you. Send us a message and we'll respond as soon as possible.
+        </p>
+        
+        <div className="grid gap-8 md:grid-cols-3">
+          {/* Contact Info */}
+          <div className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-base">
+                  <Mail className="h-5 w-5" />
+                  Email
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">
+                  support@example.com
+                </p>
+              </CardContent>
+            </Card>
+            
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-base">
+                  <Phone className="h-5 w-5" />
+                  Phone
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">
+                  +48 123 456 789
+                </p>
+              </CardContent>
+            </Card>
+            
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-base">
+                  <MapPin className="h-5 w-5" />
+                  Address
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">
+                  123 Main Street<br />
+                  Warsaw, Poland
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+          
+          {/* Contact Form */}
+          <Card className="md:col-span-2">
+            <CardHeader>
+              <CardTitle>Send us a message</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <form className="space-y-4">
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <div className="space-y-2">
+                    <label htmlFor="name" className="text-sm font-medium">
+                      Name
+                    </label>
+                    <Input id="name" placeholder="Your name" required />
+                  </div>
+                  <div className="space-y-2">
+                    <label htmlFor="email" className="text-sm font-medium">
+                      Email
+                    </label>
+                    <Input id="email" type="email" placeholder="your@email.com" required />
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="subject" className="text-sm font-medium">
+                    Subject
+                  </label>
+                  <Input id="subject" placeholder="How can we help?" required />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="message" className="text-sm font-medium">
+                    Message
+                  </label>
+                  <textarea
+                    id="message"
+                    rows={6}
+                    className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                    placeholder="Your message..."
+                    required
+                  />
+                </div>
+                <Button type="submit" className="w-full">
+                  Send Message
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,90 @@
+'use client';
+
+/**
+ * Error Page - Global error handling for runtime errors
+ *
+ * Displays when an unhandled error occurs in the application.
+ * Provides retry and navigation options.
+ *
+ * Requirements: 11.1
+ */
+
+import { useEffect } from 'react';
+import Link from 'next/link';
+import { AlertTriangle, RefreshCcw, Home, ShoppingBag } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+
+interface ErrorPageProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function ErrorPage({ error, reset }: ErrorPageProps) {
+  useEffect(() => {
+    // Log error to console in development
+    if (process.env.NODE_ENV === 'development') {
+      console.error('[Error Page]', error);
+    }
+    // TODO: Log error to error tracking service (e.g., Sentry)
+  }, [error]);
+
+  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">
+        <CardHeader>
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
+            <AlertTriangle className="h-8 w-8 text-destructive" />
+          </div>
+          <CardTitle className="text-2xl">Wystąpił błąd</CardTitle>
+          <CardDescription className="text-base">
+            Przepraszamy, wystąpił nieoczekiwany problem. Spróbuj odświeżyć stronę lub wróć do strony głównej.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Error details in development */}
+          {process.env.NODE_ENV === 'development' && (
+            <div className="rounded-md bg-muted p-3 text-left text-xs">
+              <p className="font-medium text-destructive">{error.message}</p>
+              {error.digest && (
+                <p className="mt-1 text-muted-foreground">Digest: {error.digest}</p>
+              )}
+            </div>
+          )}
+
+          {/* Action buttons */}
+          <div className="flex flex-col gap-3">
+            <Button onClick={reset} className="w-full">
+              <RefreshCcw className="mr-2 h-4 w-4" />
+              Spróbuj ponownie
+            </Button>
+
+            <div className="flex gap-3">
+              <Button variant="outline" asChild className="flex-1">
+                <Link href="/">
+                  <Home className="mr-2 h-4 w-4" />
+                  Strona główna
+                </Link>
+              </Button>
+              <Button variant="outline" asChild className="flex-1">
+                <Link href="/products">
+                  <ShoppingBag className="mr-2 h-4 w-4" />
+                  Produkty
+                </Link>
+              </Button>
+            </div>
+          </div>
+
+          {/* Help text */}
+          <p className="text-sm text-muted-foreground">
+            Jeśli problem się powtarza,{' '}
+            <Link href="/contact" className="text-primary underline underline-offset-4">
+              skontaktuj się z nami
+            </Link>
+            .
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}