@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/app/account/orders/[id]/tracking/page.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import Link from "next/link";
+import { ChevronLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import {
+  TrackingTimeline,
+  MilestoneTimeline,
+  type TrackingEvent,
+} from "@/components/order/tracking-timeline";
+import { TrackingStatus } from "@/components/order/tracking-status";
+import {
+  DeliveryEstimate,
+  DeliveryProgress,
+} from "@/components/order/delivery-estimate";
+
+export default function OrderTrackingPage() {
+  const params = useParams();
+  const orderId = params.id as string;
+
+  // TODO: Fetch tracking data from backend using GraphQL
+  const trackingData = {
+    orderId,
+    orderNumber: "#12345",
+    status: "in_transit" as const,
+    trackingNumber: "1Z999AA10123456784",
+    carrier: "UPS",
+    estimatedDelivery: "2024-01-20",
+    earliestDelivery: "2024-01-19",
+    latestDelivery: "2024-01-21",
+    lastUpdate: "2024-01-18T14:30:00Z",
+    deliveryAddress: {
+      city: "Warsaw",
+      province: "Mazowieckie",
+      country: "Poland",
+    },
+  };
+
+  const milestones = [
+    {
+      label: "Order Placed",
+      status: "completed" as const,
+      date: "2024-01-15",
+    },
+    {
+      label: "Processing",
+      status: "completed" as const,
+      date: "2024-01-16",
+    },
+    {
+      label: "Shipped",
+      status: "completed" as const,
+      date: "2024-01-17",
+    },
+    {
+      label: "In Transit",
+      status: "current" as const,
+    },
+    {
+      label: "Delivered",
+      status: "pending" as const,
+    },
+  ];
+
+  const events: TrackingEvent[] = [
+    {
+      id: "1",
+      status: "In Transit",
+      description: "Package is on the way to the destination",
+      location: "Warsaw Distribution Center",
+      timestamp: "2024-01-18T14:30:00Z",
+      isCompleted: true,
+    },
+    {
+      id: "2",
+      status: "In Transit",
+      description: "Package arrived at sorting facility",
+      location: "Krakow Sorting Facility",
+      timestamp: "2024-01-18T08:15:00Z",
+      isCompleted: true,
+    },
+    {
+      id: "3",
+      status: "Shipped",
+      description: "Package has been picked up by carrier",
+      location: "Origin Facility",
+      timestamp: "2024-01-17T16:45:00Z",
+      isCompleted: true,
+    },
+    {
+      id: "4",
+      status: "Processing",
+      description: "Package is being prepared for shipment",
+      location: "Warehouse",
+      timestamp: "2024-01-16T10:00:00Z",
+      isCompleted: true,
+    },
+    {
+      id: "5",
+      status: "Order Placed",
+      description: "Order has been confirmed",
+      timestamp: "2024-01-15T12:30:00Z",
+      isCompleted: true,
+    },
+  ];
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Breadcrumbs className="mb-6" />
+
+      <div className="mb-6">
+        <Button variant="ghost" asChild>
+          <Link href={`/account/orders/${orderId}`}>
+            <ChevronLeft className="mr-2 h-4 w-4" />
+            Back to Order Details
+          </Link>
+        </Button>
+      </div>
+
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-foreground">
+          Track Order {trackingData.orderNumber}
+        </h1>
+        <p className="mt-2 text-muted-foreground">
+          Follow your package's journey
+        </p>
+      </div>
+
+      {/* Milestone Progress */}
+      <div className="mb-8">
+        <MilestoneTimeline milestones={milestones} />
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* Main Content */}
+        <div className="lg:col-span-2 space-y-6">
+          {/* Current Status */}
+          <TrackingStatus
+            status={trackingData.status}
+            trackingNumber={trackingData.trackingNumber}
+            carrier={trackingData.carrier}
+            lastUpdate={trackingData.lastUpdate}
+          />
+
+          {/* Delivery Progress */}
+          <DeliveryProgress
+            currentStep={4}
+            totalSteps={5}
+            estimatedDate={trackingData.estimatedDelivery}
+          />
+
+          {/* Tracking Timeline */}
+          <div>
+            <h2 className="text-xl font-semibold text-foreground mb-4">
+              Tracking History
+            </h2>
+            <TrackingTimeline events={events} />
+          </div>
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-6">
+          {/* Delivery Estimate */}
+          <DeliveryEstimate
+            estimatedDate={trackingData.estimatedDelivery}
+            earliestDate={trackingData.earliestDelivery}
+            latestDate={trackingData.latestDelivery}
+            address={trackingData.deliveryAddress}
+          />
+
+          {/* Carrier Information */}
+          <div className="rounded-lg border border-border bg-background p-6">
+            <h3 className="text-lg font-semibold text-foreground mb-4">
+              Carrier Information
+            </h3>
+            <div className="space-y-3 text-sm">
+              <div>
+                <span className="font-medium text-foreground">Carrier:</span>
+                <p className="text-muted-foreground">{trackingData.carrier}</p>
+              </div>
+              <div>
+                <span className="font-medium text-foreground">
+                  Tracking Number:
+                </span>
+                <p className="font-mono text-muted-foreground">
+                  {trackingData.trackingNumber}
+                </p>
+              </div>
+              <Button variant="outline" className="w-full mt-4" asChild>
+                <a
+                  href={`https://www.ups.com/track?tracknum=${trackingData.trackingNumber}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Track on Carrier Website
+                </a>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/account/orders/page.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { getGraphQLClient } from "@/lib/graphql/client";
+import { useAuthStore } from "@/stores/auth-store";
+import { CustomerDocument } from "@/generated/graphql";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { OrderHistory, type Order } from "@/components/account/order-history";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function OrdersPage() {
+  const client = getGraphQLClient();
+  const { accessToken, isAuthenticated } = useAuthStore();
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["customer", "orders", accessToken],
+    queryFn: async () => {
+      if (!accessToken) return null;
+      const result = await client.request(CustomerDocument, {
+        customerAccessToken: accessToken,
+      });
+      return result.customer;
+    },
+    enabled: isAuthenticated && !!accessToken,
+  });
+
+  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-2" />
+          <Skeleton className="h-6 w-96" />
+        </div>
+        <div className="space-y-4">
+          {[...Array(3)].map((_, i) => (
+            <Skeleton key={i} className="h-32 w-full" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <Breadcrumbs className="mb-6" />
+        <div className="rounded-lg border border-red-200 bg-red-50 p-8 text-center">
+          <p className="text-red-800">Failed to load orders</p>
+        </div>
+      </div>
+    );
+  }
+
+  const orders: Order[] =
+    data?.orders?.edges.map((edge) => ({
+      id: edge.node.id,
+      orderNumber: edge.node.orderNumber,
+      date: edge.node.createdAt,
+      status: (edge.node.fulfillmentStatus || "processing") as Order["status"],
+      total: edge.node.totalPrice.amount,
+      currency: edge.node.totalPrice.currencyCode,
+      itemCount: edge.node.lineItems?.edges.length || 0,
+    })) || [];
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Breadcrumbs className="mb-6" />
+
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-foreground">Order History</h1>
+        <p className="mt-2 text-muted-foreground">
+          View and track your orders
+        </p>
+      </div>
+
+      <OrderHistory orders={orders} />
+    </div>
+  );
+}

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

@@ -0,0 +1,107 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { User, Package, MapPin, Settings } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+
+export default function AccountPage() {
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    // Clear token via API route
+    await fetch("/api/auth/clear-token", { method: "POST" });
+    router.push("/");
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-16">
+      <div className="mx-auto max-w-4xl">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-foreground">My Account</h1>
+          <p className="mt-2 text-muted-foreground">
+            Manage your account settings and orders
+          </p>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          {/* Profile Card */}
+          <Card className="p-6">
+            <div className="mb-4 flex items-center gap-3">
+              <div className="rounded-full bg-primary/10 p-3">
+                <User className="h-6 w-6 text-primary" />
+              </div>
+              <h2 className="text-xl font-semibold text-foreground">Profile</h2>
+            </div>
+            <p className="text-sm text-muted-foreground mb-4">
+              View and edit your profile information
+            </p>
+            <Button variant="outline" className="w-full" asChild>
+              <Link href="/account/settings">Edit Profile</Link>
+            </Button>
+          </Card>
+
+          {/* Orders Card */}
+          <Card className="p-6">
+            <div className="mb-4 flex items-center gap-3">
+              <div className="rounded-full bg-primary/10 p-3">
+                <Package className="h-6 w-6 text-primary" />
+              </div>
+              <h2 className="text-xl font-semibold text-foreground">Orders</h2>
+            </div>
+            <p className="text-sm text-muted-foreground mb-4">
+              View your order history and track shipments
+            </p>
+            <Button variant="outline" className="w-full" asChild>
+              <Link href="/account/orders">View Orders</Link>
+            </Button>
+          </Card>
+
+          {/* Addresses Card */}
+          <Card className="p-6">
+            <div className="mb-4 flex items-center gap-3">
+              <div className="rounded-full bg-primary/10 p-3">
+                <MapPin className="h-6 w-6 text-primary" />
+              </div>
+              <h2 className="text-xl font-semibold text-foreground">
+                Addresses
+              </h2>
+            </div>
+            <p className="text-sm text-muted-foreground mb-4">
+              Manage your shipping and billing addresses
+            </p>
+            <Button variant="outline" className="w-full" asChild>
+              <Link href="/account/addresses">Manage Addresses</Link>
+            </Button>
+          </Card>
+
+          {/* Settings Card */}
+          <Card className="p-6">
+            <div className="mb-4 flex items-center gap-3">
+              <div className="rounded-full bg-primary/10 p-3">
+                <Settings className="h-6 w-6 text-primary" />
+              </div>
+              <h2 className="text-xl font-semibold text-foreground">
+                Settings
+              </h2>
+            </div>
+            <p className="text-sm text-muted-foreground mb-4">
+              Update your account preferences
+            </p>
+            <Button variant="outline" className="w-full" asChild>
+              <Link href="/account/settings">Account Settings</Link>
+            </Button>
+          </Card>
+        </div>
+
+        {/* Logout Button */}
+        <div className="mt-8">
+          <Button variant="destructive" onClick={handleLogout}>
+            Sign Out
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/account/settings/page.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { getGraphQLClient } from "@/lib/graphql/client";
+import { useAuthStore } from "@/stores/auth-store";
+import { CustomerDocument, CustomerUpdateDocument } from "@/generated/graphql";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function SettingsPage() {
+  const { accessToken } = useAuthStore();
+  const client = getGraphQLClient();
+  const queryClient = useQueryClient();
+
+  const [email, setEmail] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [acceptsMarketing, setAcceptsMarketing] = useState(false);
+
+  // Fetch customer data
+  const { data: customerData } = useQuery({
+    queryKey: ["customer", accessToken],
+    queryFn: async () => {
+      if (!accessToken) return null;
+      return client.request(CustomerDocument, { customerAccessToken: accessToken });
+    },
+    enabled: !!accessToken,
+  });
+
+  // Initialize form with customer data
+  useState(() => {
+    if (customerData?.customer) {
+      setEmail(customerData.customer.email || "");
+      setFirstName(customerData.customer.firstName || "");
+      setLastName(customerData.customer.lastName || "");
+      setPhone(customerData.customer.phone || "");
+      setAcceptsMarketing(customerData.customer.acceptsMarketing || false);
+    }
+  });
+
+  // Update customer mutation
+  const updateMutation = useMutation({
+    mutationFn: async (customer: any) => {
+      return client.request(CustomerUpdateDocument, {
+        customer,
+        customerAccessToken: accessToken!,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["customer"] });
+      alert("Settings saved successfully!");
+    },
+    onError: () => {
+      alert("Failed to save settings");
+    },
+  });
+
+  const handleSave = (e: React.FormEvent) => {
+    e.preventDefault();
+    updateMutation.mutate({
+      firstName,
+      lastName,
+      email,
+      phone,
+      acceptsMarketing,
+    });
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Breadcrumbs className="mb-6" />
+      
+      <div className="mx-auto max-w-2xl">
+        <h1 className="mb-8 text-3xl font-bold text-foreground">Account Settings</h1>
+        
+        <div className="space-y-6">
+          {/* Personal Information */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Personal Information</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={handleSave} className="space-y-4">
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <div className="space-y-2">
+                    <label htmlFor="firstName" className="text-sm font-medium">
+                      First Name
+                    </label>
+                    <Input
+                      id="firstName"
+                      value={firstName}
+                      onChange={(e) => setFirstName(e.target.value)}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <label htmlFor="lastName" className="text-sm font-medium">
+                      Last Name
+                    </label>
+                    <Input
+                      id="lastName"
+                      value={lastName}
+                      onChange={(e) => setLastName(e.target.value)}
+                    />
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="email" className="text-sm font-medium">
+                    Email
+                  </label>
+                  <Input
+                    id="email"
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="phone" className="text-sm font-medium">
+                    Phone
+                  </label>
+                  <Input
+                    id="phone"
+                    type="tel"
+                    value={phone}
+                    onChange={(e) => setPhone(e.target.value)}
+                  />
+                </div>
+                <Button type="submit" disabled={updateMutation.isPending}>
+                  {updateMutation.isPending ? "Saving..." : "Save Changes"}
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+          
+          {/* Change Password */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Change Password</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <form className="space-y-4">
+                <div className="space-y-2">
+                  <label htmlFor="currentPassword" className="text-sm font-medium">
+                    Current Password
+                  </label>
+                  <Input id="currentPassword" type="password" />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="newPassword" className="text-sm font-medium">
+                    New Password
+                  </label>
+                  <Input id="newPassword" type="password" />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="confirmPassword" className="text-sm font-medium">
+                    Confirm New Password
+                  </label>
+                  <Input id="confirmPassword" type="password" />
+                </div>
+                <Button type="submit">Update Password</Button>
+              </form>
+            </CardContent>
+          </Card>
+          
+          {/* Preferences */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Preferences</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium">Marketing Emails</p>
+                  <p className="text-sm text-muted-foreground">
+                    Receive emails about new products and special offers
+                  </p>
+                </div>
+                <input
+                  type="checkbox"
+                  checked={acceptsMarketing}
+                  onChange={(e) => setAcceptsMarketing(e.target.checked)}
+                  className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-ring"
+                />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/api/auth/clear-token/route.ts

@@ -0,0 +1,87 @@
+/**
+ * API Route: Clear Authentication Token
+ *
+ * Clears the customer access token cookie by setting it to expire immediately.
+ * This is used during logout to ensure the user is fully signed out.
+ *
+ * Security Features:
+ * 1. Origin validation - Only accepts requests from same origin (CSRF protection)
+ * 2. Immediate expiration - Sets maxAge to 0 to delete cookie
+ * 3. Same cookie attributes - Ensures proper deletion across all contexts
+ *
+ * @see lib/auth/cookies.ts - Cookie configuration
+ * @see hooks/use-auth.ts - Client-side usage
+ *
+ * @example
+ * ```tsx
+ * // Client-side usage (via clearAuthToken helper)
+ * await clearAuthToken();
+ * ```
+ */
+
+import { NextRequest, NextResponse } from "next/server";
+import { AUTH_COOKIE_CONFIG } from "@/lib/auth/cookies";
+
+/**
+ * POST /api/auth/clear-token
+ *
+ * Clears the authentication token cookie.
+ *
+ * @param request - Next.js request object
+ * @returns Response confirming token was cleared
+ */
+export async function POST(request: NextRequest) {
+  try {
+    // 1. CSRF Protection: Validate origin
+    const origin = request.headers.get("origin");
+    const host = request.headers.get("host");
+
+    // Only allow requests from same origin
+    if (origin && !origin.includes(host || "")) {
+      return NextResponse.json(
+        { error: "Invalid origin" },
+        { status: 403 }
+      );
+    }
+
+    // 2. Create response
+    const response = NextResponse.json(
+      { success: true, message: "Token cleared successfully" },
+      { status: 200 }
+    );
+
+    // 3. Clear cookie by setting maxAge to 0
+    response.cookies.set({
+      name: AUTH_COOKIE_CONFIG.name,
+      value: "",
+      maxAge: 0, // Expire immediately
+      path: AUTH_COOKIE_CONFIG.path,
+      sameSite: AUTH_COOKIE_CONFIG.sameSite,
+      secure: AUTH_COOKIE_CONFIG.secure,
+      httpOnly: AUTH_COOKIE_CONFIG.httpOnly,
+    });
+
+    return response;
+  } catch (error) {
+    console.error("Error clearing auth token:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * OPTIONS /api/auth/clear-token
+ *
+ * Handle preflight requests for CORS.
+ */
+export async function OPTIONS() {
+  return new NextResponse(null, {
+    status: 204,
+    headers: {
+      "Access-Control-Allow-Methods": "POST, OPTIONS",
+      "Access-Control-Allow-Headers": "Content-Type",
+    },
+  });
+}