@doswiftly/cli 0.1.1

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

@@ -0,0 +1,216 @@
+"use client";
+
+import Link from "next/link";
+import { useCustomer } from "@doswiftly/commerce-sdk/graphql/client";
+import { useAuth } from "@doswiftly/commerce-sdk/graphql/react";
+import { AuthGuard } from "@/components/auth/auth-guard";
+
+function OrdersContent() {
+  const { customerToken } = useAuth();
+  const { data, isLoading } = useCustomer(
+    { customerAccessToken: customerToken! },
+    { enabled: !!customerToken }
+  );
+
+  if (isLoading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex items-center justify-center py-12">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-gray-900" />
+        </div>
+      </div>
+    );
+  }
+
+  const orders = data?.customer?.orders?.edges?.map((edge) => edge.node) ?? [];
+
+  // Map status to display text and color
+  const getFinancialStatusDisplay = (status: string) => {
+    const statusMap: Record<string, { text: string; className: string }> = {
+      PAID: { text: "Paid", className: "bg-green-100 text-green-800" },
+      PENDING: { text: "Pending", className: "bg-yellow-100 text-yellow-800" },
+      AUTHORIZED: {
+        text: "Authorized",
+        className: "bg-blue-100 text-blue-800",
+      },
+      REFUNDED: { text: "Refunded", className: "bg-gray-100 text-gray-800" },
+      PARTIALLY_REFUNDED: {
+        text: "Partially Refunded",
+        className: "bg-orange-100 text-orange-800",
+      },
+      VOIDED: { text: "Voided", className: "bg-red-100 text-red-800" },
+    };
+    return (
+      statusMap[status] ?? {
+        text: status,
+        className: "bg-gray-100 text-gray-800",
+      }
+    );
+  };
+
+  const getFulfillmentStatusDisplay = (status: string) => {
+    const statusMap: Record<string, { text: string; className: string }> = {
+      FULFILLED: {
+        text: "Fulfilled",
+        className: "bg-green-100 text-green-800",
+      },
+      UNFULFILLED: {
+        text: "Unfulfilled",
+        className: "bg-yellow-100 text-yellow-800",
+      },
+      PARTIALLY_FULFILLED: {
+        text: "Partially Fulfilled",
+        className: "bg-blue-100 text-blue-800",
+      },
+      SCHEDULED: {
+        text: "Scheduled",
+        className: "bg-purple-100 text-purple-800",
+      },
+    };
+    return (
+      statusMap[status] ?? {
+        text: status,
+        className: "bg-gray-100 text-gray-800",
+      }
+    );
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      {/* Breadcrumb */}
+      <nav className="mb-4 text-sm">
+        <ol className="flex items-center gap-2">
+          <li>
+            <Link href="/account" className="text-gray-500 hover:text-gray-700">
+              Account
+            </Link>
+          </li>
+          <li className="text-gray-400">/</li>
+          <li className="text-gray-900">Orders</li>
+        </ol>
+      </nav>
+
+      {/* Page Header */}
+      <h1 className="mb-8 text-3xl font-bold text-gray-900">Order History</h1>
+
+      {/* Orders List */}
+      {orders.length === 0 ? (
+        <div className="rounded-lg border border-gray-200 p-12 text-center">
+          <p className="mb-4 text-gray-500">
+            You haven&apos;t placed any orders yet.
+          </p>
+          <Link
+            href="/products"
+            className="inline-block rounded-lg bg-gray-900 px-6 py-3 font-medium text-white hover:bg-gray-800"
+          >
+            Start Shopping
+          </Link>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {orders.map((order) => {
+            const financialStatus = getFinancialStatusDisplay(
+              order.financialStatus
+            );
+            const fulfillmentStatus = getFulfillmentStatusDisplay(
+              order.fulfillmentStatus
+            );
+            const date = new Date(order.processedAt);
+
+            return (
+              <div
+                key={order.id}
+                className="rounded-lg border border-gray-200 p-6"
+              >
+                {/* Order Header */}
+                <div className="mb-4 flex flex-wrap items-start justify-between gap-4">
+                  <div>
+                    <p className="text-lg font-semibold text-gray-900">
+                      Order #{order.orderNumber}
+                    </p>
+                    <p className="text-sm text-gray-500">
+                      {date.toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })}
+                    </p>
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    <span
+                      className={`rounded-full px-3 py-1 text-xs font-medium ${financialStatus.className}`}
+                    >
+                      {financialStatus.text}
+                    </span>
+                    <span
+                      className={`rounded-full px-3 py-1 text-xs font-medium ${fulfillmentStatus.className}`}
+                    >
+                      {fulfillmentStatus.text}
+                    </span>
+                  </div>
+                </div>
+
+                {/* Order Details */}
+                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                  <div>
+                    <span className="text-sm text-gray-500">Items</span>
+                    <p className="font-medium text-gray-900">
+                      {order.lineItemsCount}{" "}
+                      {order.lineItemsCount === 1 ? "item" : "items"}
+                    </p>
+                  </div>
+                  <div>
+                    <span className="text-sm text-gray-500">Subtotal</span>
+                    <p className="font-medium text-gray-900">
+                      {order.subtotalPrice.currencyCode}{" "}
+                      {order.subtotalPrice.amount}
+                    </p>
+                  </div>
+                  {order.totalShipping && (
+                    <div>
+                      <span className="text-sm text-gray-500">Shipping</span>
+                      <p className="font-medium text-gray-900">
+                        {order.totalShipping.currencyCode}{" "}
+                        {order.totalShipping.amount}
+                      </p>
+                    </div>
+                  )}
+                  <div>
+                    <span className="text-sm text-gray-500">Total</span>
+                    <p className="font-medium text-gray-900">
+                      {order.totalPrice.currencyCode} {order.totalPrice.amount}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Shipping Address */}
+                {order.shippingAddress && (
+                  <div className="mt-4 border-t border-gray-200 pt-4">
+                    <span className="text-sm text-gray-500">Ship to</span>
+                    <p className="text-sm text-gray-900">
+                      {order.shippingAddress.firstName}{" "}
+                      {order.shippingAddress.lastName},{" "}
+                      {order.shippingAddress.address1},{" "}
+                      {order.shippingAddress.city},{" "}
+                      {order.shippingAddress.province}{" "}
+                      {order.shippingAddress.zip},{" "}
+                      {order.shippingAddress.country}
+                    </p>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function OrdersPage() {
+  return (
+    <AuthGuard>
+      <OrdersContent />
+    </AuthGuard>
+  );
+}

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

@@ -0,0 +1,167 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useAuth, useLogout } from "@doswiftly/commerce-sdk/graphql/react";
+import { useCustomer } from "@doswiftly/commerce-sdk/graphql/client";
+import { AuthGuard } from "@/components/auth/auth-guard";
+
+function AccountContent() {
+  const router = useRouter();
+  const { customerToken } = useAuth();
+  const { logout } = useLogout();
+  const { data, isLoading } = useCustomer(
+    { customerAccessToken: customerToken! },
+    { enabled: !!customerToken }
+  );
+
+  const handleLogout = () => {
+    logout();
+    router.push("/");
+  };
+
+  if (isLoading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex items-center justify-center py-12">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-gray-900" />
+        </div>
+      </div>
+    );
+  }
+
+  const customer = data?.customer;
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      {/* Page Header */}
+      <div className="mb-8 flex items-center justify-between">
+        <h1 className="text-3xl font-bold text-gray-900">My Account</h1>
+        <button
+          onClick={handleLogout}
+          className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
+          Logout
+        </button>
+      </div>
+
+      {/* Account Grid */}
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {/* Profile Card */}
+        <div className="rounded-lg border border-gray-200 p-6">
+          <h2 className="mb-4 text-lg font-semibold text-gray-900">Profile</h2>
+          <div className="space-y-3">
+            <div>
+              <span className="text-sm text-gray-500">Name</span>
+              <p className="font-medium text-gray-900">
+                {customer?.firstName && customer?.lastName
+                  ? `${customer.firstName} ${customer.lastName}`
+                  : "Not set"}
+              </p>
+            </div>
+            <div>
+              <span className="text-sm text-gray-500">Email</span>
+              <p className="font-medium text-gray-900">{customer?.email}</p>
+            </div>
+            {customer?.phone && (
+              <div>
+                <span className="text-sm text-gray-500">Phone</span>
+                <p className="font-medium text-gray-900">{customer.phone}</p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Orders Card */}
+        <Link
+          href="/account/orders"
+          className="rounded-lg border border-gray-200 p-6 transition hover:border-gray-300 hover:shadow-sm"
+        >
+          <h2 className="mb-2 text-lg font-semibold text-gray-900">Orders</h2>
+          <p className="text-sm text-gray-600">
+            View your order history and track shipments
+          </p>
+          <div className="mt-4 flex items-center text-sm font-medium text-gray-900">
+            View orders
+            <svg
+              className="ml-2 h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </div>
+        </Link>
+
+        {/* Addresses Card */}
+        <Link
+          href="/account/addresses"
+          className="rounded-lg border border-gray-200 p-6 transition hover:border-gray-300 hover:shadow-sm"
+        >
+          <h2 className="mb-2 text-lg font-semibold text-gray-900">
+            Addresses
+          </h2>
+          <p className="text-sm text-gray-600">
+            Manage your shipping and billing addresses
+          </p>
+          <div className="mt-4 flex items-center text-sm font-medium text-gray-900">
+            Manage addresses
+            <svg
+              className="ml-2 h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </div>
+        </Link>
+      </div>
+
+      {/* Default Addresses */}
+      {customer?.defaultAddress && (
+        <div className="mt-8">
+          <h2 className="mb-4 text-lg font-semibold text-gray-900">
+            Default Address
+          </h2>
+          <div className="rounded-lg border border-gray-200 p-4">
+            <p className="text-gray-900">
+              {customer.defaultAddress.firstName}{" "}
+              {customer.defaultAddress.lastName}
+            </p>
+            <p className="text-gray-600">{customer.defaultAddress.address1}</p>
+            {customer.defaultAddress.address2 && (
+              <p className="text-gray-600">
+                {customer.defaultAddress.address2}
+              </p>
+            )}
+            <p className="text-gray-600">
+              {customer.defaultAddress.city}, {customer.defaultAddress.province}{" "}
+              {customer.defaultAddress.zip}
+            </p>
+            <p className="text-gray-600">{customer.defaultAddress.country}</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function AccountPage() {
+  return (
+    <AuthGuard>
+      <AccountContent />
+    </AuthGuard>
+  );
+}

package/templates/storefront-nextjs/app/auth/login/page.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useState, FormEvent, Suspense } from "react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useLogin } from "@doswiftly/commerce-sdk/graphql/react";
+import { AuthGuard } from "@/components/auth/auth-guard";
+
+function LoginFormContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const login = useLogin();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    try {
+      const result = await login.mutateAsync({
+        input: { email, password },
+      });
+
+      // Check for user errors
+      const userErrors = result.customerAccessTokenCreate?.userErrors;
+      if (userErrors && userErrors.length > 0) {
+        setError(userErrors[0].message);
+        return;
+      }
+
+      // Success - redirect to original page or account
+      const redirectTo = searchParams.get("redirect") || "/account";
+      router.push(redirectTo);
+    } catch (err) {
+      setError("Login failed. Please try again.");
+    }
+  };
+
+  return (
+    <div className="container mx-auto flex min-h-[60vh] items-center justify-center px-4">
+      <div className="w-full max-w-md">
+        <h1 className="mb-8 text-center text-3xl font-bold text-gray-900">
+          Login
+        </h1>
+
+        {error && (
+          <div className="mb-6 rounded-lg bg-red-50 p-4 text-red-700">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div>
+            <label
+              htmlFor="email"
+              className="mb-2 block text-sm font-medium text-gray-900"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="w-full rounded-lg border border-gray-300 px-4 py-3 focus:border-gray-900 focus:outline-none"
+              placeholder="your@email.com"
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="password"
+              className="mb-2 block text-sm font-medium text-gray-900"
+            >
+              Password
+            </label>
+            <input
+              type="password"
+              id="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="w-full rounded-lg border border-gray-300 px-4 py-3 focus:border-gray-900 focus:outline-none"
+              placeholder="••••••••"
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={login.isPending}
+            className="w-full rounded-lg bg-gray-900 py-3 font-medium text-white transition hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {login.isPending ? "Logging in..." : "Login"}
+          </button>
+        </form>
+
+        <p className="mt-6 text-center text-sm text-gray-600">
+          Don&apos;t have an account?{" "}
+          <Link
+            href="/auth/register"
+            className="font-medium text-gray-900 hover:underline"
+          >
+            Register
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function LoginForm() {
+  return (
+    <Suspense
+      fallback={
+        <div className="container mx-auto flex min-h-[60vh] items-center justify-center px-4">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-gray-900" />
+        </div>
+      }
+    >
+      <LoginFormContent />
+    </Suspense>
+  );
+}
+
+export default function LoginPage() {
+  return (
+    <AuthGuard requireGuest>
+      <LoginForm />
+    </AuthGuard>
+  );
+}