@doswiftly/cli 0.1.24 → 0.2.0

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

@@ -1,216 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useCustomer } from "@doswiftly/storefront-sdk/graphql/client";
-import { useAuth } from "@doswiftly/storefront-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

@@ -1,167 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useAuth, useLogout } from "@doswiftly/storefront-sdk/graphql/react";
-import { useCustomer } from "@doswiftly/storefront-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

@@ -1,135 +0,0 @@
-"use client";
-
-import { useState, FormEvent, Suspense } from "react";
-import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useLogin } from "@doswiftly/storefront-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>
-  );
-}