@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/account/order-details.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import { Package, Truck, CheckCircle, XCircle } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+
+export interface OrderItem {
+  id: string;
+  title: string;
+  variantTitle?: string;
+  quantity: number;
+  price: string;
+  currency: string;
+  imageUrl?: string;
+}
+
+export interface OrderAddress {
+  firstName: string;
+  lastName: string;
+  company?: string;
+  address1: string;
+  address2?: string;
+  city: string;
+  province: string;
+  zip: string;
+  country: string;
+  phone?: string;
+}
+
+export interface OrderDetailsData {
+  id: string;
+  orderNumber: string;
+  date: string;
+  status: "delivered" | "shipped" | "processing" | "cancelled";
+  items: OrderItem[];
+  subtotal: string;
+  shipping: string;
+  tax: string;
+  total: string;
+  currency: string;
+  shippingAddress: OrderAddress;
+  billingAddress?: OrderAddress;
+  trackingNumber?: string;
+  estimatedDelivery?: string;
+}
+
+export interface OrderDetailsProps {
+  order: OrderDetailsData;
+  className?: string;
+}
+
+/**
+ * OrderDetails - Display detailed information about a single order
+ */
+export function OrderDetails({ order, className }: OrderDetailsProps) {
+  const getStatusIcon = (status: OrderDetailsData["status"]) => {
+    switch (status) {
+      case "delivered":
+        return <CheckCircle className="h-5 w-5 text-green-600" />;
+      case "shipped":
+        return <Truck className="h-5 w-5 text-blue-600" />;
+      case "processing":
+        return <Package className="h-5 w-5 text-yellow-600" />;
+      case "cancelled":
+        return <XCircle className="h-5 w-5 text-red-600" />;
+    }
+  };
+
+  const getStatusBadge = (status: OrderDetailsData["status"]) => {
+    const variants: Record<
+      OrderDetailsData["status"],
+      "default" | "secondary" | "success" | "warning"
+    > = {
+      delivered: "success",
+      shipped: "default",
+      processing: "warning",
+      cancelled: "secondary",
+    };
+
+    return (
+      <Badge variant={variants[status]}>
+        {status.charAt(0).toUpperCase() + status.slice(1)}
+      </Badge>
+    );
+  };
+
+  const formatPrice = (amount: string, currency: string) => {
+    return new Intl.NumberFormat("pl-PL", {
+      style: "currency",
+      currency,
+    }).format(parseFloat(amount));
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString("pl-PL", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  };
+
+  const formatAddress = (address: OrderAddress) => {
+    return (
+      <div className="space-y-1 text-sm">
+        <p className="font-medium text-foreground">
+          {address.firstName} {address.lastName}
+        </p>
+        {address.company && (
+          <p className="text-muted-foreground">{address.company}</p>
+        )}
+        <p className="text-muted-foreground">{address.address1}</p>
+        {address.address2 && (
+          <p className="text-muted-foreground">{address.address2}</p>
+        )}
+        <p className="text-muted-foreground">
+          {address.city}, {address.province} {address.zip}
+        </p>
+        <p className="text-muted-foreground">{address.country}</p>
+        {address.phone && (
+          <p className="text-muted-foreground">{address.phone}</p>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className={className}>
+      {/* Order Header */}
+      <Card className="p-6 mb-6">
+        <div className="flex items-start justify-between mb-4">
+          <div>
+            <h2 className="text-2xl font-bold text-foreground mb-2">
+              Order {order.orderNumber}
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              Placed on {formatDate(order.date)}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            {getStatusIcon(order.status)}
+            {getStatusBadge(order.status)}
+          </div>
+        </div>
+
+        {order.trackingNumber && (
+          <div className="mt-4 p-4 bg-muted/50 rounded-lg">
+            <p className="text-sm font-medium text-foreground mb-1">
+              Tracking Number
+            </p>
+            <p className="text-sm text-muted-foreground font-mono">
+              {order.trackingNumber}
+            </p>
+          </div>
+        )}
+
+        {order.estimatedDelivery && (
+          <div className="mt-4 p-4 bg-muted/50 rounded-lg">
+            <p className="text-sm font-medium text-foreground mb-1">
+              Estimated Delivery
+            </p>
+            <p className="text-sm text-muted-foreground">
+              {formatDate(order.estimatedDelivery)}
+            </p>
+          </div>
+        )}
+      </Card>
+
+      {/* Order Items */}
+      <Card className="p-6 mb-6">
+        <h3 className="text-lg font-semibold text-foreground mb-4">
+          Order Items
+        </h3>
+        <div className="space-y-4">
+          {order.items.map((item) => (
+            <div key={item.id} className="flex gap-4">
+              {item.imageUrl && (
+                <div className="h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg border border-border">
+                  <img
+                    src={item.imageUrl}
+                    alt={item.title}
+                    className="h-full w-full object-cover"
+                  />
+                </div>
+              )}
+              <div className="flex-1">
+                <h4 className="font-medium text-foreground">{item.title}</h4>
+                {item.variantTitle && (
+                  <p className="text-sm text-muted-foreground">
+                    {item.variantTitle}
+                  </p>
+                )}
+                <p className="text-sm text-muted-foreground">
+                  Quantity: {item.quantity}
+                </p>
+              </div>
+              <div className="text-right">
+                <p className="font-medium text-foreground">
+                  {formatPrice(item.price, item.currency)}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <Separator className="my-4" />
+
+        {/* Order Summary */}
+        <div className="space-y-2">
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Subtotal</span>
+            <span className="text-foreground">
+              {formatPrice(order.subtotal, order.currency)}
+            </span>
+          </div>
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Shipping</span>
+            <span className="text-foreground">
+              {formatPrice(order.shipping, order.currency)}
+            </span>
+          </div>
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Tax</span>
+            <span className="text-foreground">
+              {formatPrice(order.tax, order.currency)}
+            </span>
+          </div>
+          <Separator className="my-2" />
+          <div className="flex justify-between text-base font-semibold">
+            <span className="text-foreground">Total</span>
+            <span className="text-foreground">
+              {formatPrice(order.total, order.currency)}
+            </span>
+          </div>
+        </div>
+      </Card>
+
+      {/* Addresses */}
+      <div className="grid gap-6 md:grid-cols-2">
+        <Card className="p-6">
+          <h3 className="text-lg font-semibold text-foreground mb-4">
+            Shipping Address
+          </h3>
+          {formatAddress(order.shippingAddress)}
+        </Card>
+
+        {order.billingAddress && (
+          <Card className="p-6">
+            <h3 className="text-lg font-semibold text-foreground mb-4">
+              Billing Address
+            </h3>
+            {formatAddress(order.billingAddress)}
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/account/order-history.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import Link from "next/link";
+import { Package, ChevronRight } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { formatAmount } from "@/lib/format";
+
+export interface Order {
+  id: string;
+  orderNumber: string;
+  date: string;
+  status: "delivered" | "shipped" | "processing" | "cancelled";
+  total: string;
+  currency: string;
+  itemCount: number;
+}
+
+export interface OrderHistoryProps {
+  orders: Order[];
+  className?: string;
+}
+
+/**
+ * OrderHistory - Display list of customer orders
+ */
+export function OrderHistory({ orders, className }: OrderHistoryProps) {
+  const getStatusBadge = (status: Order["status"]) => {
+    const variants: Record<Order["status"], "default" | "secondary" | "success" | "warning"> = {
+      delivered: "success",
+      shipped: "default",
+      processing: "warning",
+      cancelled: "secondary",
+    };
+
+    return (
+      <Badge variant={variants[status]}>
+        {status.charAt(0).toUpperCase() + status.slice(1)}
+      </Badge>
+    );
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString("pl-PL", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  };
+
+  if (orders.length === 0) {
+    return (
+      <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
+        <Package className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
+        <h2 className="text-xl font-semibold text-foreground mb-2">
+          No orders yet
+        </h2>
+        <p className="text-muted-foreground mb-6">
+          Start shopping to see your orders here
+        </p>
+        <Button asChild>
+          <Link href="/products">Browse Products</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      <div className="space-y-4">
+        {orders.map((order) => (
+          <Link
+            key={order.id}
+            href={`/account/orders/${order.id}`}
+            className="block rounded-lg border border-border bg-background p-6 transition-shadow hover:shadow-md"
+          >
+            <div className="flex items-start justify-between">
+              <div className="flex-1">
+                <div className="flex items-center gap-3 mb-2">
+                  <h3 className="text-lg font-semibold text-foreground">
+                    Order {order.orderNumber}
+                  </h3>
+                  {getStatusBadge(order.status)}
+                </div>
+                <div className="space-y-1 text-sm text-muted-foreground">
+                  <p>Placed on {formatDate(order.date)}</p>
+                  <p>
+                    {order.itemCount} {order.itemCount === 1 ? "item" : "items"}
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-center gap-4">
+                <div className="text-right">
+                  <p className="text-sm text-muted-foreground">Total</p>
+                  <p className="text-lg font-semibold text-foreground">
+                    {formatAmount(order.total, order.currency)}
+                  </p>
+                </div>
+                <ChevronRight className="h-5 w-5 text-muted-foreground" />
+              </div>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/auth/account-menu.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { User, LogOut, Package, MapPin, Settings } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export interface AccountMenuProps {
+  customerName?: string;
+  className?: string;
+}
+
+/**
+ * AccountMenu - User account dropdown menu
+ * 
+ * Shows user profile and quick links to account pages
+ */
+export function AccountMenu({ customerName, className }: AccountMenuProps) {
+  const router = useRouter();
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const handleLogout = async () => {
+    await fetch("/api/auth/clear-token", { method: "POST" });
+    router.push("/");
+    setIsOpen(false);
+  };
+
+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const menuItems = [
+    {
+      label: "My Account",
+      href: "/account",
+      icon: User,
+    },
+    {
+      label: "Orders",
+      href: "/account/orders",
+      icon: Package,
+    },
+    {
+      label: "Addresses",
+      href: "/account/addresses",
+      icon: MapPin,
+    },
+    {
+      label: "Settings",
+      href: "/account/settings",
+      icon: Settings,
+    },
+  ];
+
+  return (
+    <div className={cn("relative", className)} ref={menuRef}>
+      {/* Trigger Button */}
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2"
+        aria-label="Account menu"
+        aria-expanded={isOpen}
+      >
+        <User className="h-5 w-5" />
+        {customerName && (
+          <span className="hidden md:inline text-sm">{customerName}</span>
+        )}
+      </Button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <div className="absolute right-0 top-full mt-2 w-56 rounded-lg border border-border bg-background shadow-lg z-50">
+          {/* User Info */}
+          {customerName && (
+            <div className="border-b border-border px-4 py-3">
+              <p className="text-sm font-medium text-foreground">
+                {customerName}
+              </p>
+            </div>
+          )}
+
+          {/* Menu Items */}
+          <div className="py-2">
+            {menuItems.map((item) => {
+              const Icon = item.icon;
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  onClick={() => setIsOpen(false)}
+                  className="flex items-center gap-3 px-4 py-2 text-sm text-foreground hover:bg-muted transition-colors"
+                >
+                  <Icon className="h-4 w-4 text-muted-foreground" />
+                  {item.label}
+                </Link>
+              );
+            })}
+          </div>
+
+          {/* Logout */}
+          <div className="border-t border-border py-2">
+            <button
+              onClick={handleLogout}
+              className="flex w-full items-center gap-3 px-4 py-2 text-sm text-destructive hover:bg-muted transition-colors"
+            >
+              <LogOut className="h-4 w-4" />
+              Sign Out
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/auth/login-form.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useCustomerLogin } from "@/lib/graphql/hooks";
+
+// Zod validation schema for login form
+const loginSchema = z.object({
+  email: z
+    .string()
+    .min(1, "Email is required")
+    .email("Please enter a valid email address"),
+  password: z
+    .string()
+    .min(1, "Password is required")
+    .min(8, "Password must be at least 8 characters"),
+});
+
+type LoginFormData = z.infer<typeof loginSchema>;
+
+export interface LoginFormProps {
+  onSuccess?: () => void;
+  redirectTo?: string;
+}
+
+/**
+ * LoginForm - Reusable login form component with Zod validation
+ * 
+ * Validates user input before submission and displays field-level errors
+ */
+export function LoginForm({ onSuccess, redirectTo }: LoginFormProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const defaultRedirect = redirectTo || searchParams?.get("redirect") || "/account";
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof LoginFormData, string>>>({});
+
+  const loginMutation = useCustomerLogin();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setFieldErrors({});
+
+    // Validate form data with Zod
+    const result = loginSchema.safeParse({ email, password });
+
+    if (!result.success) {
+      // Extract field-level errors from Zod validation
+      const errors: Partial<Record<keyof LoginFormData, string>> = {};
+      result.error.errors.forEach((err) => {
+        if (err.path[0]) {
+          errors[err.path[0] as keyof LoginFormData] = err.message;
+        }
+      });
+      setFieldErrors(errors);
+      return;
+    }
+
+    try {
+      const { customerAccessTokenCreate } = await loginMutation.mutateAsync({
+        input: { email, password },
+      });
+
+      // Check for user errors first
+      const userErrors = customerAccessTokenCreate?.userErrors || [];
+      
+      if (userErrors.length > 0) {
+        setError(userErrors[0].message || "Login failed");
+        return;
+      }
+
+      if (customerAccessTokenCreate?.customerAccessToken) {
+        // Store token in httpOnly cookie via API route
+        await fetch("/api/auth/set-token", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            token: customerAccessTokenCreate.customerAccessToken.accessToken,
+          }),
+        });
+
+        if (onSuccess) {
+          onSuccess();
+        } else {
+          router.push(defaultRedirect);
+        }
+      } else {
+        setError("Login failed. Please check your credentials.");
+      }
+    } catch (err) {
+      setError("An error occurred. Please try again.");
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {error && (
+        <div className="rounded-lg border border-destructive bg-destructive/10 p-4 text-sm text-destructive">
+          {error}
+        </div>
+      )}
+
+      <div className="space-y-2">
+        <label
+          htmlFor="email"
+          className="text-sm font-medium text-foreground"
+        >
+          Email
+        </label>
+        <Input
+          id="email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="you@example.com"
+          required
+          autoComplete="email"
+          aria-invalid={!!fieldErrors.email}
+          aria-describedby={fieldErrors.email ? "email-error" : undefined}
+        />
+        {fieldErrors.email && (
+          <p id="email-error" className="text-xs text-destructive">
+            {fieldErrors.email}
+          </p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <label
+            htmlFor="password"
+            className="text-sm font-medium text-foreground"
+          >
+            Password
+          </label>
+          <Link
+            href="/auth/forgot-password"
+            className="text-xs text-primary hover:underline"
+          >
+            Forgot password?
+          </Link>
+        </div>
+        <Input
+          id="password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder="••••••••"
+          required
+          autoComplete="current-password"
+          aria-invalid={!!fieldErrors.password}
+          aria-describedby={fieldErrors.password ? "password-error" : undefined}
+        />
+        {fieldErrors.password && (
+          <p id="password-error" className="text-xs text-destructive">
+            {fieldErrors.password}
+          </p>
+        )}
+      </div>
+
+      <Button
+        type="submit"
+        className="w-full"
+        disabled={loginMutation.isPending}
+      >
+        {loginMutation.isPending ? "Signing in..." : "Sign In"}
+      </Button>
+
+      <div className="text-center text-sm text-muted-foreground">
+        Don't have an account?{" "}
+        <Link
+          href="/auth/register"
+          className="font-medium text-primary hover:underline"
+        >
+          Sign up
+        </Link>
+      </div>
+    </form>
+  );
+}