@doswiftly/cli 0.1.17 → 0.1.19

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

@@ -0,0 +1,60 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function OrderDetailLoading() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      {/* Breadcrumbs */}
+      <Skeleton className="mb-6 h-5 w-64" />
+
+      {/* Back button */}
+      <Skeleton className="mb-6 h-10 w-40" />
+
+      {/* Order header card */}
+      <div className="mb-6 rounded-lg border p-6">
+        <div className="flex items-center justify-between">
+          <div className="space-y-2">
+            <Skeleton className="h-7 w-48" />
+            <Skeleton className="h-4 w-32" />
+          </div>
+          <Skeleton className="h-8 w-24 rounded-full" />
+        </div>
+      </div>
+
+      {/* Order items card */}
+      <div className="mb-6 rounded-lg border p-6">
+        <Skeleton className="mb-4 h-6 w-24" />
+        <div className="space-y-4">
+          {[...Array(3)].map((_, i) => (
+            <div key={i} className="flex items-center gap-4">
+              <Skeleton className="h-16 w-16 rounded-md" />
+              <div className="flex-1 space-y-2">
+                <Skeleton className="h-4 w-3/4" />
+                <Skeleton className="h-4 w-1/4" />
+              </div>
+              <Skeleton className="h-5 w-20" />
+            </div>
+          ))}
+        </div>
+        <div className="mt-4 border-t pt-4 space-y-2">
+          <Skeleton className="ml-auto h-4 w-32" />
+          <Skeleton className="ml-auto h-4 w-32" />
+          <Skeleton className="ml-auto h-5 w-36" />
+        </div>
+      </div>
+
+      {/* Address cards */}
+      <div className="grid gap-6 md:grid-cols-2">
+        {[...Array(2)].map((_, i) => (
+          <div key={i} className="rounded-lg border p-6">
+            <Skeleton className="mb-3 h-5 w-36" />
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-48" />
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-4 w-32" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -3,10 +3,8 @@
 import { useParams } from "next/navigation";
 import Link from "next/link";
 import { ChevronLeft } from "lucide-react";
-import { useQuery } from "@tanstack/react-query";
-import { getGraphQLClient } from "@/lib/graphql/client";
-import { useAuthStore } from "@/stores/auth-store";
-import { CustomerDocument } from "@/generated/graphql";
+import { useCustomerOrder } from "@/lib/graphql/hooks";
+import { useHydrated } from "@doswiftly/storefront-sdk/react";
 import { Button } from "@/components/ui/button";
 import { Breadcrumbs } from "@/components/layout/breadcrumbs";
 import {
@@ -17,25 +15,13 @@ import {
 export default function OrderDetailPage() {
   const params = useParams();
   const orderId = params.id as string;
-  const { accessToken } = useAuthStore();
-  const client = getGraphQLClient();
+  const hydrated = useHydrated();
 
-  // Fetch customer orders
-  const { data: customerData, isLoading } = useQuery({
-    queryKey: ["customer", "orders", accessToken],
-    queryFn: async () => {
-      if (!accessToken) return null;
-      return client.request(CustomerDocument, { customerAccessToken: accessToken });
-    },
-    enabled: !!accessToken,
-  });
+  const { data, isPending, error } = useCustomerOrder(orderId);
 
-  // Find specific order
-  const order = customerData?.customer?.orders?.edges?.find(
-    (edge) => edge.node.id === orderId
-  )?.node;
+  const order = data?.customerOrder;
 
-  if (isLoading) {
+  if (!hydrated || isPending) {
     return (
       <div className="container mx-auto px-4 py-8">
         <div className="animate-pulse space-y-4">
@@ -46,6 +32,20 @@ export default function OrderDetailPage() {
     );
   }
 
+  if (error) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-destructive">Failed to load order</h1>
+          <p className="mt-2 text-muted-foreground">Something went wrong. Please try again later.</p>
+          <Link href="/account/orders">
+            <Button className="mt-4">Back to Orders</Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
   if (!order) {
     return (
       <div className="container mx-auto px-4 py-8">
@@ -59,23 +59,25 @@ export default function OrderDetailPage() {
     );
   }
 
-  // Transform order data to match OrderDetailsData interface
+  const mapFulfillmentStatus = (status?: string | null): OrderDetailsData["status"] => {
+    switch (status) {
+      case "DELIVERED": return "delivered";
+      case "IN_TRANSIT":
+      case "FULFILLED": return "shipped";
+      case "UNFULFILLED":
+      case "PARTIALLY_FULFILLED": return "processing";
+      default: return "processing";
+    }
+  };
+
   const orderDetails: OrderDetailsData = {
     id: order.id,
     orderNumber: order.orderNumber?.toString() || order.id,
     date: new Date(order.processedAt).toLocaleDateString(),
-    status: order.fulfillmentStatus?.toLowerCase() || "pending",
-    items: order.lineItems.edges.map((edge) => ({
-      id: edge.node.variant?.id || edge.node.title,
-      title: edge.node.title,
-      variantTitle: edge.node.variant?.title || "",
-      quantity: edge.node.quantity,
-      price: edge.node.originalTotalPrice.amount,
-      currency: edge.node.originalTotalPrice.currencyCode,
-      imageUrl: edge.node.variant?.image?.url || "",
-    })),
+    status: mapFulfillmentStatus(order.fulfillmentStatus),
+    items: [],
     subtotal: order.subtotalPrice?.amount || "0",
-    shipping: order.totalShippingPrice?.amount || "0",
+    shipping: order.totalShipping?.amount || "0",
     tax: order.totalTax?.amount || "0",
     total: order.totalPrice.amount,
     currency: order.totalPrice.currencyCode,
@@ -92,21 +94,8 @@ export default function OrderDetailPage() {
           phone: order.shippingAddress.phone || "",
         }
       : undefined,
-    billingAddress: order.billingAddress
-      ? {
-          firstName: order.billingAddress.firstName || "",
-          lastName: order.billingAddress.lastName || "",
-          address1: order.billingAddress.address1 || "",
-          address2: order.billingAddress.address2 || "",
-          city: order.billingAddress.city || "",
-          province: order.billingAddress.province || "",
-          zip: order.billingAddress.zip || "",
-          country: order.billingAddress.country || "",
-          phone: order.billingAddress.phone || "",
-        }
-      : undefined,
-    trackingNumber: order.successfulFulfillments?.[0]?.trackingInfo?.[0]?.number,
-    estimatedDelivery: order.successfulFulfillments?.[0]?.estimatedDeliveryAt,
+    trackingNumber: undefined,
+    estimatedDelivery: undefined,
   };
 
   return (

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

@@ -1,30 +1,22 @@
 "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 Link from "next/link";
+import { useAuthStore, useAuthHydrated } from "@doswiftly/storefront-sdk/react";
+import { useCustomer } from "@/lib/graphql/hooks";
+import { useHydrated } from "@doswiftly/storefront-sdk/react";
 import { Breadcrumbs } from "@/components/layout/breadcrumbs";
-import { OrderHistory, type Order } from "@/components/account/order-history";
+import { OrderHistory } from "@/components/account/order-history";
 import { Skeleton } from "@/components/ui/skeleton";
 
 export default function OrdersPage() {
-  const client = getGraphQLClient();
-  const { accessToken, isAuthenticated } = useAuthStore();
+  const hydrated = useHydrated();
+  const authHydrated = useAuthHydrated();
+  const accessToken = useAuthStore((s) => s.accessToken);
 
-  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,
-  });
+  const { data, isPending, error } = useCustomer();
 
-  if (isLoading) {
+  // Wait for DOM + auth persist hydration before checking accessToken
+  if (!hydrated || !authHydrated) {
     return (
       <div className="container mx-auto px-4 py-8">
         <Breadcrumbs className="mb-6" />
@@ -41,6 +33,39 @@ export default function OrdersPage() {
     );
   }
 
+  // Data loading (customer query fetching after accessToken is available)
+  if (isPending) {
+    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 (!accessToken) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <Breadcrumbs className="mb-6" />
+        <div className="rounded-lg border border-destructive bg-destructive/10 p-8 text-center text-sm text-destructive">
+          You need to{" "}
+          <Link href="/auth/login?redirect=/account/orders" className="font-medium underline">
+            sign in
+          </Link>{" "}
+          to view your orders.
+        </div>
+      </div>
+    );
+  }
+
   if (error) {
     return (
       <div className="container mx-auto px-4 py-8">
@@ -52,16 +77,8 @@ export default function OrdersPage() {
     );
   }
 
-  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,
-    })) || [];
+  const customer = data?.customer;
+  const orders = customer?.orders?.edges.map((edge) => edge.node) ?? [];
 
   return (
     <div className="container mx-auto px-4 py-8">

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

@@ -5,14 +5,17 @@ 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";
+import { useAuth } from "@/hooks/use-auth";
 
 export default function AccountPage() {
   const router = useRouter();
+  const { logout, isLoggingOut } = useAuth();
 
   const handleLogout = async () => {
-    // Clear token via API route
-    await fetch("/api/auth/clear-token", { method: "POST" });
-    router.push("/");
+    const result = await logout();
+    if (result.success) {
+      router.push("/");
+    }
   };
 
   return (
@@ -97,8 +100,8 @@ export default function AccountPage() {
 
         {/* Logout Button */}
         <div className="mt-8">
-          <Button variant="destructive" onClick={handleLogout}>
-            Sign Out
+          <Button variant="destructive" onClick={handleLogout} disabled={isLoggingOut}>
+            {isLoggingOut ? "Signing out..." : "Sign Out"}
           </Button>
         </div>
       </div>

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

@@ -1,81 +1,124 @@
 "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 { useState, useEffect } from "react";
+import Link from "next/link";
+import { useAuthStore, useAuthHydrated } from "@doswiftly/storefront-sdk/react";
+import { useCustomerProfile, useCustomerUpdate } from "@/lib/graphql/hooks";
+import { useHydrated } from "@doswiftly/storefront-sdk/react";
+import type { CustomerInfoFields } from "@/lib/graphql/fragments";
 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";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export default function SettingsPage() {
-  const { accessToken } = useAuthStore();
-  const client = getGraphQLClient();
-  const queryClient = useQueryClient();
+  const hydrated = useHydrated();
+  const authHydrated = useAuthHydrated();
+  const accessToken = useAuthStore((s) => s.accessToken);
+  const updateAuthStore = useAuthStore((s) => s.updateCustomer);
 
-  const [email, setEmail] = useState("");
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
   const [phone, setPhone] = useState("");
 
-  // Fetch customer data
-  const { data: customerData } = useQuery({
-    queryKey: ["customer", accessToken],
-    queryFn: async () => {
-      if (!accessToken) return null;
-      return client.request(CustomerDocument, { customerAccessToken: accessToken });
-    },
-    enabled: !!accessToken,
-  });
+  const { data: customerData, isPending } = useCustomerProfile();
+  const customer: CustomerInfoFields | undefined = customerData?.customer ?? undefined;
 
-  // 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 || "");
+  // Populate form when customer data loads
+  useEffect(() => {
+    if (customer) {
+      setFirstName(customer.firstName || "");
+      setLastName(customer.lastName || "");
+      setPhone(customer.phone || "");
     }
-  });
+  }, [customer]);
 
-  // Update customer mutation
-  const updateMutation = useMutation({
-    mutationFn: async (customer: any) => {
-      return client.request(CustomerUpdateDocument, {
-        customer,
-        customerAccessToken: accessToken!,
-      });
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["customer"] });
+  const updateMutation = useCustomerUpdate({
+    onSuccess: (data) => {
+      const errors = data?.customerUpdate?.userErrors;
+      if (errors && errors.length > 0) {
+        alert(errors.map((e) => e.message).join(", "));
+        return;
+      }
+      const updated = data?.customerUpdate?.customer;
+      if (updated) {
+        updateAuthStore({
+          firstName: updated.firstName || undefined,
+          lastName: updated.lastName || undefined,
+          phone: updated.phone || undefined,
+        });
+      }
       alert("Settings saved successfully!");
     },
-    onError: () => {
-      alert("Failed to save settings");
+    onError: (error: Error) => {
+      alert(`Failed to save settings: ${error.message}`);
     },
   });
 
   const handleSave = (e: React.FormEvent) => {
     e.preventDefault();
+    if (!accessToken) return;
     updateMutation.mutate({
-      firstName,
-      lastName,
-      email,
-      phone,
+      firstName: firstName || undefined,
+      lastName: lastName || undefined,
+      phone: phone || undefined,
     });
   };
 
+  // Wait for DOM hydration AND auth persist rehydration before checking accessToken
+  if (!hydrated || !authHydrated) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <Breadcrumbs className="mb-6" />
+        <div className="mx-auto max-w-2xl">
+          <Skeleton className="mb-8 h-10 w-64" />
+          <Skeleton className="h-96 w-full" />
+        </div>
+      </div>
+    );
+  }
+
+  // Data loading (customer query enabled only when accessToken is available)
+  if (isPending) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <Breadcrumbs className="mb-6" />
+        <div className="mx-auto max-w-2xl">
+          <Skeleton className="mb-8 h-10 w-64" />
+          <Skeleton className="h-96 w-full" />
+        </div>
+      </div>
+    );
+  }
+
+  if (!accessToken) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <Breadcrumbs className="mb-6" />
+        <div className="mx-auto max-w-2xl">
+          <div className="rounded-lg border border-destructive bg-destructive/10 p-8 text-center text-sm text-destructive">
+            You need to{" "}
+            <Link href="/auth/login?redirect=/account/settings" className="font-medium underline">
+              sign in
+            </Link>{" "}
+            to manage your account settings.
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const email = customer?.email || "";
+
   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>
@@ -112,8 +155,12 @@ export default function SettingsPage() {
                     id="email"
                     type="email"
                     value={email}
-                    onChange={(e) => setEmail(e.target.value)}
+                    disabled
+                    className="bg-muted"
                   />
+                  <p className="text-xs text-muted-foreground">
+                    Email cannot be changed. Contact support if you need to update it.
+                  </p>
                 </div>
                 <div className="space-y-2">
                   <label htmlFor="phone" className="text-sm font-medium">
@@ -132,38 +179,28 @@ export default function SettingsPage() {
               </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>
+              <p className="mb-4 text-sm text-muted-foreground">
+                To change your password, we&apos;ll send a password reset link to your email.
+              </p>
+              <Button
+                variant="outline"
+                onClick={() => {
+                  if (email) {
+                    alert(`Password reset email sent to ${email}. Check your inbox.`);
+                  }
+                }}
+                disabled={!email}
+              >
+                Send Password Reset Email
+              </Button>
             </CardContent>
           </Card>
-          
-          {/* Email preferences are managed via the self-service preferences portal */}
         </div>
       </div>
     </div>

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

@@ -1,87 +1,3 @@
-/**
- * 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 { createClearTokenHandler } from '@doswiftly/storefront-sdk';
 
-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",
-    },
-  });
-}
+export const POST = createClearTokenHandler();