@doswiftly/cli 0.1.18 → 0.1.20

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

@@ -1,7 +1,8 @@
 "use client";
 
 import { useParams } from "next/navigation";
-import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
 import { ChevronLeft } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Breadcrumbs } from "@/components/layout/breadcrumbs";
@@ -19,6 +20,7 @@ import {
 export default function OrderTrackingPage() {
   const params = useParams();
   const orderId = params.id as string;
+  const t = useTranslations("tracking");
 
   // TODO: Fetch tracking data from backend using GraphQL
   const trackingData = {
@@ -40,26 +42,26 @@ export default function OrderTrackingPage() {
 
   const milestones = [
     {
-      label: "Order Placed",
+      label: t("orderPlaced"),
       status: "completed" as const,
       date: "2024-01-15",
     },
     {
-      label: "Processing",
+      label: t("processing"),
       status: "completed" as const,
       date: "2024-01-16",
     },
     {
-      label: "Shipped",
+      label: t("shipped"),
       status: "completed" as const,
       date: "2024-01-17",
     },
     {
-      label: "In Transit",
+      label: t("inTransit"),
       status: "current" as const,
     },
     {
-      label: "Delivered",
+      label: t("delivered"),
       status: "pending" as const,
     },
   ];
@@ -67,40 +69,40 @@ export default function OrderTrackingPage() {
   const events: TrackingEvent[] = [
     {
       id: "1",
-      status: "In Transit",
-      description: "Package is on the way to the destination",
+      status: t("inTransit"),
+      description: t("onTheWay"),
       location: "Warsaw Distribution Center",
       timestamp: "2024-01-18T14:30:00Z",
       isCompleted: true,
     },
     {
       id: "2",
-      status: "In Transit",
-      description: "Package arrived at sorting facility",
+      status: t("inTransit"),
+      description: t("arrivedAtFacility"),
       location: "Krakow Sorting Facility",
       timestamp: "2024-01-18T08:15:00Z",
       isCompleted: true,
     },
     {
       id: "3",
-      status: "Shipped",
-      description: "Package has been picked up by carrier",
+      status: t("shipped"),
+      description: t("pickedUpByCarrier"),
       location: "Origin Facility",
       timestamp: "2024-01-17T16:45:00Z",
       isCompleted: true,
     },
     {
       id: "4",
-      status: "Processing",
-      description: "Package is being prepared for shipment",
-      location: "Warehouse",
+      status: t("processing"),
+      description: t("preparingShipment"),
+      location: t("warehouse"),
       timestamp: "2024-01-16T10:00:00Z",
       isCompleted: true,
     },
     {
       id: "5",
-      status: "Order Placed",
-      description: "Order has been confirmed",
+      status: t("orderPlaced"),
+      description: t("orderConfirmed"),
       timestamp: "2024-01-15T12:30:00Z",
       isCompleted: true,
     },
@@ -114,17 +116,17 @@ export default function OrderTrackingPage() {
         <Button variant="ghost" asChild>
           <Link href={`/account/orders/${orderId}`}>
             <ChevronLeft className="mr-2 h-4 w-4" />
-            Back to Order Details
+            {t("backToOrderDetails")}
           </Link>
         </Button>
       </div>
 
       <div className="mb-8">
         <h1 className="text-3xl font-bold text-foreground">
-          Track Order {trackingData.orderNumber}
+          {t("trackOrder", { orderNumber: trackingData.orderNumber })}
         </h1>
         <p className="mt-2 text-muted-foreground">
-          Follow your package's journey
+          {t("followJourney")}
         </p>
       </div>
 
@@ -154,7 +156,7 @@ export default function OrderTrackingPage() {
           {/* Tracking Timeline */}
           <div>
             <h2 className="text-xl font-semibold text-foreground mb-4">
-              Tracking History
+              {t("trackingHistory")}
             </h2>
             <TrackingTimeline events={events} />
           </div>
@@ -173,16 +175,16 @@ export default function OrderTrackingPage() {
           {/* 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
+              {t("carrierInfo")}
             </h3>
             <div className="space-y-3 text-sm">
               <div>
-                <span className="font-medium text-foreground">Carrier:</span>
+                <span className="font-medium text-foreground">{t("carrier")}</span>
                 <p className="text-muted-foreground">{trackingData.carrier}</p>
               </div>
               <div>
                 <span className="font-medium text-foreground">
-                  Tracking Number:
+                  {t("trackingNumberLabel")}
                 </span>
                 <p className="font-mono text-muted-foreground">
                   {trackingData.trackingNumber}
@@ -194,7 +196,7 @@ export default function OrderTrackingPage() {
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  Track on Carrier Website
+                  {t("trackOnCarrierWebsite")}
                 </a>
               </Button>
             </div>

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

@@ -0,0 +1,101 @@
+"use client";
+
+import { Link } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
+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 } from "@/components/account/order-history";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function OrdersPage() {
+  const t = useTranslations("account");
+  const hydrated = useHydrated();
+  const authHydrated = useAuthHydrated();
+  const accessToken = useAuthStore((s) => s.accessToken);
+
+  const { data, isPending, error } = useCustomer();
+
+  // 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" />
+        <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>
+    );
+  }
+
+  // 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">
+          {t.rich("signInToView", {
+            link: (chunks) => (
+              <Link href="/auth/login?redirect=/account/orders" className="font-medium underline">
+                {chunks}
+              </Link>
+            ),
+          })}
+        </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">{t("failedLoadOrders")}</p>
+        </div>
+      </div>
+    );
+  }
+
+  const customer = data?.customer;
+  const orders = customer?.orders?.edges.map((edge) => edge.node) ?? [];
+
+  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">{t("orders")}</h1>
+        <p className="mt-2 text-muted-foreground">
+          {t("viewTrackOrders")}
+        </p>
+      </div>
+
+      <OrderHistory orders={orders} />
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/{account → [locale]/account}/page.tsx

@@ -1,18 +1,20 @@
 "use client";
 
-import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { Link, useRouter } from "@/i18n/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 +99,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/[locale]/account/settings/page.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Link } from "@/i18n/navigation";
+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 hydrated = useHydrated();
+  const authHydrated = useAuthHydrated();
+  const accessToken = useAuthStore((s) => s.accessToken);
+  const updateAuthStore = useAuthStore((s) => s.updateCustomer);
+
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [phone, setPhone] = useState("");
+
+  const { data: customerData, isPending } = useCustomerProfile();
+  const customer: CustomerInfoFields | undefined = customerData?.customer ?? undefined;
+
+  // Populate form when customer data loads
+  useEffect(() => {
+    if (customer) {
+      setFirstName(customer.firstName || "");
+      setLastName(customer.lastName || "");
+      setPhone(customer.phone || "");
+    }
+  }, [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: (error: Error) => {
+      alert(`Failed to save settings: ${error.message}`);
+    },
+  });
+
+  const handleSave = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!accessToken) return;
+    updateMutation.mutate({
+      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">
+          <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}
+                    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">
+                    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>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Change Password</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <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>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/{auth → [locale]/auth}/forgot-password/page.tsx

@@ -1,30 +1,37 @@
 "use client";
 
 import { useState } from "react";
-import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
 import { useMutation } from "@tanstack/react-query";
-import { getGraphQLClient } from "@/lib/graphql/client";
-import { CustomerPasswordRecoverDocument } from "@/generated/graphql";
+import { useExecute } from "@/lib/graphql/client";
+import {
+  CustomerPasswordRecoverDocument,
+  type CustomerPasswordRecoverMutation,
+} from "@/generated/graphql";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ArrowLeft } from "lucide-react";
 
 export default function ForgotPasswordPage() {
+  const t = useTranslations("auth");
+  const execute = useExecute();
   const [email, setEmail] = useState("");
   const [isSubmitted, setIsSubmitted] = useState(false);
   const [error, setError] = useState("");
 
-  const client = getGraphQLClient();
-
   const recoverMutation = useMutation({
     mutationFn: async (email: string) => {
-      return client.request(CustomerPasswordRecoverDocument, { email });
+      return execute<CustomerPasswordRecoverMutation>(
+        CustomerPasswordRecoverDocument.toString(),
+        { email },
+      );
     },
     onSuccess: () => {
       setIsSubmitted(true);
     },
     onError: () => {
-      setError("An error occurred. Please try again.");
+      setError(t("unexpectedError"));
     },
   });
 
@@ -54,25 +61,25 @@ export default function ForgotPasswordPage() {
                 />
               </svg>
             </div>
-            <h1 className="text-3xl font-bold text-foreground">Check Your Email</h1>
+            <h1 className="text-3xl font-bold text-foreground">{t("checkYourEmail")}</h1>
             <p className="mt-2 text-muted-foreground">
-              We've sent password reset instructions to {email}
+              {t("resetEmailSent", { email })}
             </p>
           </div>
 
           <div className="space-y-4">
             <p className="text-sm text-muted-foreground">
-              Didn't receive the email? Check your spam folder or try again.
+              {t("didntReceiveEmail")}
             </p>
             <Button variant="outline" onClick={() => setIsSubmitted(false)}>
-              Try Another Email
+              {t("tryAnotherEmail")}
             </Button>
             <div>
               <Link
                 href="/auth/login"
                 className="text-sm text-primary hover:underline"
               >
-                Back to Sign In
+                {t("backToSignIn")}
               </Link>
             </div>
           </div>
@@ -89,13 +96,13 @@ export default function ForgotPasswordPage() {
           className="mb-8 inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground"
         >
           <ArrowLeft className="h-4 w-4" />
-          Back to Sign In
+          {t("backToSignIn")}
         </Link>
 
         <div className="mb-8">
-          <h1 className="text-3xl font-bold text-foreground">Reset Password</h1>
+          <h1 className="text-3xl font-bold text-foreground">{t("resetPasswordTitle")}</h1>
           <p className="mt-2 text-muted-foreground">
-            Enter your email address and we'll send you instructions to reset your password.
+            {t("resetPasswordDescription")}
           </p>
         </div>
 
@@ -108,7 +115,7 @@ export default function ForgotPasswordPage() {
 
           <div className="space-y-2">
             <label htmlFor="email" className="text-sm font-medium text-foreground">
-              Email
+              {t("email")}
             </label>
             <Input
               id="email"
@@ -122,7 +129,7 @@ export default function ForgotPasswordPage() {
           </div>
 
           <Button type="submit" className="w-full" disabled={recoverMutation.isPending}>
-            {recoverMutation.isPending ? "Sending..." : "Send Reset Instructions"}
+            {recoverMutation.isPending ? t("sending") : t("sendResetInstructions")}
           </Button>
         </form>
       </div>

package/templates/storefront-nextjs-shadcn/app/{auth → [locale]/auth}/login/page.tsx

@@ -1,17 +1,20 @@
 "use client";
 
 import { Suspense } from "react";
+import { useTranslations } from "next-intl";
 import { LoginForm } from "@/components/auth/login-form";
 import { Spinner } from "@/components/ui/spinner";
 
 export default function LoginPage() {
+  const t = useTranslations("auth");
+
   return (
     <div className="container mx-auto px-4 py-16">
       <div className="mx-auto max-w-md">
         <div className="mb-8 text-center">
-          <h1 className="text-3xl font-bold text-foreground">Sign In</h1>
+          <h1 className="text-3xl font-bold text-foreground">{t("signInTitle")}</h1>
           <p className="mt-2 text-muted-foreground">
-            Sign in to your account to continue
+            {t("signInDescription")}
           </p>
         </div>
 

package/templates/storefront-nextjs-shadcn/app/{auth → [locale]/auth}/register/page.tsx

@@ -1,15 +1,18 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { RegisterForm } from "@/components/auth/register-form";
 
 export default function RegisterPage() {
+  const t = useTranslations("auth");
+
   return (
     <div className="container mx-auto px-4 py-16">
       <div className="mx-auto max-w-md">
         <div className="mb-8 text-center">
-          <h1 className="text-3xl font-bold text-foreground">Create Account</h1>
+          <h1 className="text-3xl font-bold text-foreground">{t("signUpTitle")}</h1>
           <p className="mt-2 text-muted-foreground">
-            Sign up to start shopping
+            {t("signUpDescription")}
           </p>
         </div>
 

package/templates/storefront-nextjs-shadcn/app/[locale]/blog/[slug]/loading.tsx

@@ -0,0 +1,17 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function BlogPostLoading() {
+  return (
+    <div className="container mx-auto max-w-3xl px-4 py-8">
+      <Skeleton className="mb-4 h-5 w-64" />
+      <Skeleton className="mb-2 h-10 w-full" />
+      <Skeleton className="mb-8 h-5 w-48" />
+      <Skeleton className="mb-8 aspect-video w-full rounded-lg" />
+      <div className="space-y-4">
+        {[...Array(8)].map((_, i) => (
+          <Skeleton key={i} className="h-4 w-full" />
+        ))}
+      </div>
+    </div>
+  );
+}