@doswiftly/cli 0.1.18 → 0.1.20

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

@@ -0,0 +1,226 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { Link } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
+import { Plus } from "lucide-react";
+import { useAuthStore, useAuthHydrated } from "@doswiftly/storefront-sdk/react";
+import {
+  useCustomer,
+  useCustomerAddressCreate,
+  useCustomerAddressUpdate,
+  useCustomerAddressDelete,
+  useCustomerDefaultAddressUpdate,
+} from "@/lib/graphql/hooks";
+import { useHydrated } from "@doswiftly/storefront-sdk/react";
+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 t = useTranslations("account");
+  const hydrated = useHydrated();
+  const authHydrated = useAuthHydrated();
+  const accessToken = useAuthStore((s) => s.accessToken);
+
+  const { data: customerData, isPending } = useCustomer();
+
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [editingAddress, setEditingAddress] = useState<Address | undefined>();
+  const [mutationError, setMutationError] = useState<string | null>(null);
+
+  const checkUserErrors = useCallback(<T extends Record<string, unknown>>(data: T, operationKey: keyof T) => {
+    const payload = data?.[operationKey] as { userErrors?: Array<{ message: string }> } | undefined;
+    if (payload?.userErrors?.length) {
+      setMutationError(payload.userErrors[0].message);
+      return true;
+    }
+    setMutationError(null);
+    return false;
+  }, []);
+
+  const deleteMutation = useCustomerAddressDelete({
+    onSuccess: (data) => checkUserErrors(data, 'customerAddressDelete'),
+    onError: () => setMutationError(t('failedDelete')),
+  });
+  const setDefaultMutation = useCustomerDefaultAddressUpdate({
+    onSuccess: (data) => checkUserErrors(data, 'customerDefaultAddressUpdate'),
+    onError: () => setMutationError(t('failedSetDefault')),
+  });
+
+  const createMutation = useCustomerAddressCreate({
+    onSuccess: (data) => {
+      if (!checkUserErrors(data, 'customerAddressCreate')) {
+        setIsFormOpen(false);
+      }
+    },
+    onError: () => setMutationError(t('failedCreate')),
+  });
+
+  const updateMutation = useCustomerAddressUpdate({
+    onSuccess: (data) => {
+      if (!checkUserErrors(data, 'customerAddressUpdate')) {
+        setIsFormOpen(false);
+      }
+    },
+    onError: () => setMutationError(t('failedUpdate')),
+  });
+
+  const addresses = (customerData?.customer?.addresses ?? []).map((addr) => ({
+    id: addr.id,
+    firstName: addr.firstName || "",
+    lastName: addr.lastName || "",
+    company: addr.company || "",
+    address1: addr.address1 || "",
+    address2: addr.address2 || "",
+    city: addr.city || "",
+    province: addr.province || "",
+    zip: addr.zip || "",
+    country: addr.country || "",
+    phone: addr.phone || "",
+    isDefault: addr.isDefault,
+  }));
+
+  const handleAdd = () => {
+    setEditingAddress(undefined);
+    setIsFormOpen(true);
+  };
+
+  const handleEdit = (address: Address) => {
+    setEditingAddress(address);
+    setIsFormOpen(true);
+  };
+
+  const handleDelete = (id: string) => {
+    if (confirm(t("deleteConfirm"))) {
+      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,
+    };
+
+    if (editingAddress?.id) {
+      await updateMutation.mutateAsync({ id: editingAddress.id, address });
+    } else {
+      await createMutation.mutateAsync({ address });
+    }
+  };
+
+  // Wait for DOM + auth persist hydration before checking accessToken
+  if (!hydrated || !authHydrated) {
+    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>
+    );
+  }
+
+  // Data loading (customer query fetching after accessToken is available)
+  if (isPending) {
+    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 (!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("signInToManage", {
+            link: (chunks) => (
+              <Link href="/auth/login?redirect=/account/addresses" className="font-medium underline">
+                {chunks}
+              </Link>
+            ),
+          })}
+        </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">{t("addresses")}</h1>
+          <p className="mt-2 text-muted-foreground">
+            {t("manageAddresses")}
+          </p>
+        </div>
+        <Button onClick={handleAdd}>
+          <Plus className="mr-2 h-4 w-4" />
+          {t("addAddress")}
+        </Button>
+      </div>
+
+      {mutationError && (
+        <div className="mb-4 rounded-lg border border-destructive bg-destructive/10 p-4 text-sm text-destructive">
+          {mutationError}
+        </div>
+      )}
+
+      <AddressList
+        addresses={addresses}
+        onEdit={handleEdit}
+        onDelete={handleDelete}
+        onSetDefault={handleSetDefault}
+        onAdd={handleAdd}
+      />
+
+      <Dialog open={isFormOpen} onOpenChange={setIsFormOpen}>
+        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              {editingAddress ? t("editAddress") : t("addNewAddress")}
+            </DialogTitle>
+          </DialogHeader>
+          <AddressForm
+            address={editingAddress}
+            onSubmit={handleSubmit}
+            onCancel={() => setIsFormOpen(false)}
+          />
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect } from "react";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
+import { AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function AccountError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const t = useTranslations("errors");
+
+  useEffect(() => {
+    console.error("[Account Error]", error);
+  }, [error]);
+
+  return (
+    <div className="container mx-auto flex min-h-[400px] items-center justify-center px-4 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            {t("somethingWentWrong")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-sm text-muted-foreground">
+            {t("couldNotLoadAccount")}
+          </p>
+          <div className="flex gap-3">
+            <Button onClick={reset}>{t("tryAgain")}</Button>
+            <Button variant="outline" asChild>
+              <Link href="/">{t("goHome")}</Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AccountLoading() {
+  return (
+    <div className="container mx-auto px-4 py-16">
+      <div className="mx-auto max-w-4xl">
+        <div className="mb-8">
+          <Skeleton className="mb-2 h-10 w-48" />
+          <Skeleton className="h-5 w-80" />
+        </div>
+        <div className="grid gap-6 md:grid-cols-2">
+          {[...Array(4)].map((_, i) => (
+            <Skeleton key={i} className="h-48 w-full rounded-lg" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}