@doswiftly/cli 0.1.18 → 0.1.20

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

@@ -1,215 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Plus } from "lucide-react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { getGraphQLClient } from "@/lib/graphql/client";
-import { useAuthStore } from "@/stores/auth-store";
-import {
-  CustomerDocument,
-  CustomerAddressCreateDocument,
-  CustomerAddressUpdateDocument,
-  CustomerAddressDeleteDocument,
-  CustomerDefaultAddressUpdateDocument,
-} from "@/generated/graphql";
-import { Button } from "@/components/ui/button";
-import { Breadcrumbs } from "@/components/layout/breadcrumbs";
-import {
-  AddressList,
-  type Address,
-} from "@/components/account/address-list";
-import {
-  AddressForm,
-  type AddressFormData,
-} from "@/components/account/address-form";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-
-export default function AddressesPage() {
-  const client = getGraphQLClient();
-  const queryClient = useQueryClient();
-  const { accessToken } = useAuthStore();
-
-  // Fetch customer with addresses
-  const { data: customerData, isLoading } = useQuery({
-    queryKey: ["customer", "addresses", accessToken],
-    queryFn: async () => {
-      if (!accessToken) return null;
-      const result = await client.request(CustomerDocument, {
-        customerAccessToken: accessToken,
-      });
-      return result.customer;
-    },
-    enabled: !!accessToken,
-  });
-
-  const [isFormOpen, setIsFormOpen] = useState(false);
-  const [editingAddress, setEditingAddress] = useState<Address | undefined>();
-
-  // Delete address mutation
-  const deleteMutation = useMutation({
-    mutationFn: async (id: string) => {
-      return client.request(CustomerAddressDeleteDocument, {
-        id,
-        customerAccessToken: accessToken!,
-      });
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["customer", "addresses"] });
-    },
-  });
-
-  // Set default address mutation
-  const setDefaultMutation = useMutation({
-    mutationFn: async (addressId: string) => {
-      return client.request(CustomerDefaultAddressUpdateDocument, {
-        addressId,
-        customerAccessToken: accessToken!,
-      });
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["customer", "addresses"] });
-    },
-  });
-
-  // Create/Update address mutation
-  const saveMutation = useMutation({
-    mutationFn: async ({
-      id,
-      address,
-    }: {
-      id?: string;
-      address: any;
-    }) => {
-      if (id) {
-        return client.request(CustomerAddressUpdateDocument, {
-          id,
-          address,
-          customerAccessToken: accessToken!,
-        });
-      } else {
-        return client.request(CustomerAddressCreateDocument, {
-          address,
-          customerAccessToken: accessToken!,
-        });
-      }
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["customer", "addresses"] });
-      setIsFormOpen(false);
-    },
-  });
-
-  const addresses = customerData?.addresses?.edges?.map((edge) => ({
-    id: edge.node.id,
-    firstName: edge.node.firstName || "",
-    lastName: edge.node.lastName || "",
-    company: edge.node.company || "",
-    address1: edge.node.address1 || "",
-    address2: edge.node.address2 || "",
-    city: edge.node.city || "",
-    province: edge.node.province || "",
-    zip: edge.node.zip || "",
-    country: edge.node.country || "",
-    phone: edge.node.phone || "",
-    isDefault: edge.node.id === customerData?.defaultAddress?.id,
-  })) || [];
-
-  const handleAdd = () => {
-    setEditingAddress(undefined);
-    setIsFormOpen(true);
-  };
-
-  const handleEdit = (address: Address) => {
-    setEditingAddress(address);
-    setIsFormOpen(true);
-  };
-
-  const handleDelete = (id: string) => {
-    if (confirm("Are you sure you want to delete this address?")) {
-      deleteMutation.mutate(id);
-    }
-  };
-
-  const handleSetDefault = (id: string) => {
-    setDefaultMutation.mutate(id);
-  };
-
-  const handleSubmit = async (data: AddressFormData) => {
-    const address = {
-      firstName: data.firstName,
-      lastName: data.lastName,
-      company: data.company || null,
-      address1: data.address1,
-      address2: data.address2 || null,
-      city: data.city,
-      province: data.province,
-      zip: data.zip,
-      country: data.country,
-      phone: data.phone || null,
-    };
-
-    await saveMutation.mutateAsync({
-      id: editingAddress?.id,
-      address,
-    });
-  };
-
-  if (isLoading) {
-    return (
-      <div className="container mx-auto px-4 py-8">
-        <div className="animate-pulse space-y-4">
-          <div className="h-8 bg-muted rounded w-1/4"></div>
-          <div className="h-64 bg-muted rounded"></div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <Breadcrumbs className="mb-6" />
-
-      <div className="mb-8 flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold text-foreground">Addresses</h1>
-          <p className="mt-2 text-muted-foreground">
-            Manage your shipping and billing addresses
-          </p>
-        </div>
-        <Button onClick={handleAdd}>
-          <Plus className="mr-2 h-4 w-4" />
-          Add Address
-        </Button>
-      </div>
-
-      <AddressList
-        addresses={addresses}
-        onEdit={handleEdit}
-        onDelete={handleDelete}
-        onSetDefault={handleSetDefault}
-        onAdd={handleAdd}
-      />
-
-      {/* Address Form Dialog */}
-      <Dialog open={isFormOpen} onOpenChange={setIsFormOpen}>
-        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle>
-              {editingAddress ? "Edit Address" : "Add New Address"}
-            </DialogTitle>
-          </DialogHeader>
-          <AddressForm
-            address={editingAddress}
-            onSubmit={handleSubmit}
-            onCancel={() => setIsFormOpen(false)}
-          />
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}

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

@@ -1,128 +0,0 @@
-"use client";
-
-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 { Button } from "@/components/ui/button";
-import { Breadcrumbs } from "@/components/layout/breadcrumbs";
-import {
-  OrderDetails,
-  type OrderDetailsData,
-} from "@/components/account/order-details";
-
-export default function OrderDetailPage() {
-  const params = useParams();
-  const orderId = params.id as string;
-  const { accessToken } = useAuthStore();
-  const client = getGraphQLClient();
-
-  // 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,
-  });
-
-  // Find specific order
-  const order = customerData?.customer?.orders?.edges?.find(
-    (edge) => edge.node.id === orderId
-  )?.node;
-
-  if (isLoading) {
-    return (
-      <div className="container mx-auto px-4 py-8">
-        <div className="animate-pulse space-y-4">
-          <div className="h-8 bg-muted rounded w-1/4"></div>
-          <div className="h-64 bg-muted rounded"></div>
-        </div>
-      </div>
-    );
-  }
-
-  if (!order) {
-    return (
-      <div className="container mx-auto px-4 py-8">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold">Order not found</h1>
-          <Link href="/account/orders">
-            <Button className="mt-4">Back to Orders</Button>
-          </Link>
-        </div>
-      </div>
-    );
-  }
-
-  // Transform order data to match OrderDetailsData interface
-  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 || "",
-    })),
-    subtotal: order.subtotalPrice?.amount || "0",
-    shipping: order.totalShippingPrice?.amount || "0",
-    tax: order.totalTax?.amount || "0",
-    total: order.totalPrice.amount,
-    currency: order.totalPrice.currencyCode,
-    shippingAddress: order.shippingAddress
-      ? {
-          firstName: order.shippingAddress.firstName || "",
-          lastName: order.shippingAddress.lastName || "",
-          address1: order.shippingAddress.address1 || "",
-          address2: order.shippingAddress.address2 || "",
-          city: order.shippingAddress.city || "",
-          province: order.shippingAddress.province || "",
-          zip: order.shippingAddress.zip || "",
-          country: order.shippingAddress.country || "",
-          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,
-  };
-
-  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">
-            <ChevronLeft className="mr-2 h-4 w-4" />
-            Back to Orders
-          </Link>
-        </Button>
-      </div>
-
-      <OrderDetails order={orderDetails} />
-    </div>
-  );
-}

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

@@ -1,80 +0,0 @@
-"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/settings/page.tsx

@@ -1,171 +0,0 @@
-"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("");
-
-  // 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 || "");
-    }
-  });
-
-  // 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,
-    });
-  };
-
-  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>
-          
-          {/* Email preferences are managed via the self-service preferences portal */}
-        </div>
-      </div>
-    </div>
-  );
-}

package/templates/storefront-nextjs-shadcn/app/categories/[slug]/page.tsx

@@ -1,78 +0,0 @@
-"use client";
-
-import { useParams } from "next/navigation";
-import { ProductGrid } from "@/components/product/product-grid";
-import { Breadcrumbs } from "@/components/layout/breadcrumbs";
-import { Skeleton } from "@/components/ui/skeleton";
-import { useProducts } from "@/lib/graphql/hooks";
-
-export default function CategoryPage() {
-  const params = useParams();
-  const slug = params.slug as string;
-
-  // Fetch products for this category using GraphQL query
-  const { data, isLoading, error } = useProducts({
-    first: 20,
-    query: `category:${slug}`,
-  });
-
-  const products = data?.products ?? [];
-
-  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-4" />
-          <Skeleton className="h-6 w-96" />
-        </div>
-        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
-          {Array.from({ length: 8 }).map((_, i) => (
-            <Skeleton key={i} className="aspect-square 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-border bg-muted/50 p-12 text-center">
-          <h1 className="text-2xl font-bold text-foreground mb-2">
-            Category Not Found
-          </h1>
-          <p className="text-muted-foreground">
-            The category you're looking for doesn't exist.
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <Breadcrumbs className="mb-6" />
-
-      {/* Category Header */}
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-foreground capitalize">
-          {slug.replace(/-/g, " ")}
-        </h1>
-        <p className="mt-2 text-muted-foreground">
-          Browse products in this category
-        </p>
-      </div>
-
-      {/* Products Grid */}
-      <ProductGrid
-        products={products}
-        columns={4}
-        priorityCount={8}
-        showBadges
-        emptyMessage="No products in this category"
-      />
-    </div>
-  );
-}