@doswiftly/cli 0.1.18 → 0.1.20

package/templates/storefront-nextjs-shadcn/components/account/address-list.tsx

@@ -4,6 +4,7 @@ import { MapPin, Edit, Trash2, Plus } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/card";
+import { useTranslations } from "next-intl";
 
 export interface Address {
   id: string;
@@ -40,11 +41,11 @@ export function AddressList({
   onAdd,
   className,
 }: AddressListProps) {
+  const t = useTranslations("account");
+
   const handleDelete = (id: string, address: Address) => {
     if (
-      confirm(
-        `Are you sure you want to delete the address at ${address.address1}?`
-      )
+      confirm(t("deleteAddressConfirm", { address: address.address1 }))
     ) {
       onDelete?.(id);
     }
@@ -55,15 +56,15 @@ export function AddressList({
       <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
         <MapPin className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
         <h2 className="text-xl font-semibold text-foreground mb-2">
-          No addresses saved
+          {t("noAddressesSaved")}
         </h2>
         <p className="text-muted-foreground mb-6">
-          Add an address to make checkout faster
+          {t("addAddressDescription")}
         </p>
         {onAdd && (
           <Button onClick={onAdd}>
             <Plus className="mr-2 h-4 w-4" />
-            Add Your First Address
+            {t("addFirstAddress")}
           </Button>
         )}
       </div>
@@ -78,7 +79,7 @@ export function AddressList({
             <div className="mb-4 flex items-start justify-between">
               <div className="flex items-center gap-2">
                 <MapPin className="h-5 w-5 text-muted-foreground" />
-                {address.isDefault && <Badge variant="default">Default</Badge>}
+                {address.isDefault && <Badge variant="default">{t("defaultBadge")}</Badge>}
               </div>
               <div className="flex gap-2">
                 {onEdit && (
@@ -87,7 +88,7 @@ export function AddressList({
                     size="sm"
                     className="h-8 w-8 p-0"
                     onClick={() => onEdit(address)}
-                    aria-label="Edit address"
+                    aria-label={t("editAddress")}
                   >
                     <Edit className="h-4 w-4" />
                   </Button>
@@ -98,7 +99,7 @@ export function AddressList({
                     size="sm"
                     className="h-8 w-8 p-0 text-destructive hover:text-destructive"
                     onClick={() => handleDelete(address.id, address)}
-                    aria-label="Delete address"
+                    aria-label={t("deleteAddress")}
                   >
                     <Trash2 className="h-4 w-4" />
                   </Button>
@@ -133,7 +134,7 @@ export function AddressList({
                 className="mt-4 w-full"
                 onClick={() => onSetDefault(address.id)}
               >
-                Set as Default
+                {t("setAsDefault")}
               </Button>
             )}
           </Card>

package/templates/storefront-nextjs-shadcn/components/account/customer-info.fragment.graphql

@@ -0,0 +1,36 @@
+# Fragment for CustomerInfo / AccountDashboard components.
+#
+# Customer profile data for account pages.
+# Does NOT include orders or addresses (fetch separately).
+#
+# Usage in components:
+#   import type { CustomerInfoFieldsFragment } from '@/generated/graphql';
+#   interface Props { customer: CustomerInfoFieldsFragment }
+
+fragment CustomerInfoFields on Customer {
+  id
+  email
+  firstName
+  lastName
+  displayName
+  phone
+  emailVerified
+  ordersCount
+  totalSpent {
+    amount
+    currencyCode
+  }
+  defaultAddress {
+    id
+    firstName
+    lastName
+    address1
+    address2
+    city
+    province
+    zip
+    country
+    phone
+  }
+  createdAt
+}

package/templates/storefront-nextjs-shadcn/components/account/order-details.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Package, Truck, CheckCircle, XCircle } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
@@ -39,7 +40,7 @@ export interface OrderDetailsData {
   tax: string;
   total: string;
   currency: string;
-  shippingAddress: OrderAddress;
+  shippingAddress?: OrderAddress;
   billingAddress?: OrderAddress;
   trackingNumber?: string;
   estimatedDelivery?: string;
@@ -54,6 +55,7 @@ export interface OrderDetailsProps {
  * OrderDetails - Display detailed information about a single order
  */
 export function OrderDetails({ order, className }: OrderDetailsProps) {
+  const t = useTranslations("account");
   const getStatusIcon = (status: OrderDetailsData["status"]) => {
     switch (status) {
       case "delivered":
@@ -131,10 +133,10 @@ export function OrderDetails({ order, className }: OrderDetailsProps) {
         <div className="flex items-start justify-between mb-4">
           <div>
             <h2 className="text-2xl font-bold text-foreground mb-2">
-              Order {order.orderNumber}
+              {t("orderNumber", { number: order.orderNumber })}
             </h2>
             <p className="text-sm text-muted-foreground">
-              Placed on {formatDate(order.date)}
+              {t("placedOn")} {formatDate(order.date)}
             </p>
           </div>
           <div className="flex items-center gap-2">
@@ -146,7 +148,7 @@ export function OrderDetails({ order, className }: OrderDetailsProps) {
         {order.trackingNumber && (
           <div className="mt-4 p-4 bg-muted/50 rounded-lg">
             <p className="text-sm font-medium text-foreground mb-1">
-              Tracking Number
+              {t("trackingNumber")}
             </p>
             <p className="text-sm text-muted-foreground font-mono">
               {order.trackingNumber}
@@ -157,7 +159,7 @@ export function OrderDetails({ order, className }: OrderDetailsProps) {
         {order.estimatedDelivery && (
           <div className="mt-4 p-4 bg-muted/50 rounded-lg">
             <p className="text-sm font-medium text-foreground mb-1">
-              Estimated Delivery
+              {t("estimatedDelivery")}
             </p>
             <p className="text-sm text-muted-foreground">
               {formatDate(order.estimatedDelivery)}
@@ -169,7 +171,7 @@ export function OrderDetails({ order, className }: OrderDetailsProps) {
       {/* Order Items */}
       <Card className="p-6 mb-6">
         <h3 className="text-lg font-semibold text-foreground mb-4">
-          Order Items
+          {t("orderItems")}
         </h3>
         <div className="space-y-4">
           {order.items.map((item) => (
@@ -191,7 +193,7 @@ export function OrderDetails({ order, className }: OrderDetailsProps) {
                   </p>
                 )}
                 <p className="text-sm text-muted-foreground">
-                  Quantity: {item.quantity}
+                  {t("itemCount", { count: item.quantity })}
                 </p>
               </div>
               <div className="text-right">
@@ -208,26 +210,26 @@ export function OrderDetails({ order, className }: OrderDetailsProps) {
         {/* Order Summary */}
         <div className="space-y-2">
           <div className="flex justify-between text-sm">
-            <span className="text-muted-foreground">Subtotal</span>
+            <span className="text-muted-foreground">{t("subtotal")}</span>
             <span className="text-foreground">
               {formatPrice(order.subtotal, order.currency)}
             </span>
           </div>
           <div className="flex justify-between text-sm">
-            <span className="text-muted-foreground">Shipping</span>
+            <span className="text-muted-foreground">{t("shippingLabel")}</span>
             <span className="text-foreground">
               {formatPrice(order.shipping, order.currency)}
             </span>
           </div>
           <div className="flex justify-between text-sm">
-            <span className="text-muted-foreground">Tax</span>
+            <span className="text-muted-foreground">{t("taxLabel")}</span>
             <span className="text-foreground">
               {formatPrice(order.tax, order.currency)}
             </span>
           </div>
           <Separator className="my-2" />
           <div className="flex justify-between text-base font-semibold">
-            <span className="text-foreground">Total</span>
+            <span className="text-foreground">{t("orderTotal")}</span>
             <span className="text-foreground">
               {formatPrice(order.total, order.currency)}
             </span>
@@ -237,17 +239,19 @@ export function OrderDetails({ order, className }: OrderDetailsProps) {
 
       {/* Addresses */}
       <div className="grid gap-6 md:grid-cols-2">
+        {order.shippingAddress && (
         <Card className="p-6">
           <h3 className="text-lg font-semibold text-foreground mb-4">
-            Shipping Address
+            {t("shippingAddress")}
           </h3>
           {formatAddress(order.shippingAddress)}
         </Card>
+        )}
 
         {order.billingAddress && (
           <Card className="p-6">
             <h3 className="text-lg font-semibold text-foreground mb-4">
-              Billing Address
+              {t("billingAddress")}
             </h3>
             {formatAddress(order.billingAddress)}
           </Card>

package/templates/storefront-nextjs-shadcn/components/account/order-history.tsx

@@ -1,23 +1,25 @@
 "use client";
 
-import Link from "next/link";
+import { Link } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
+import { useLocale } from "next-intl";
 import { Package, ChevronRight } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { formatAmount } from "@/lib/format";
+import { formatAmount } from "@doswiftly/storefront-sdk";
+import type { OrderSummaryFields } from "@/lib/graphql/fragments";
 
-export interface Order {
-  id: string;
-  orderNumber: string;
-  date: string;
-  status: "delivered" | "shipped" | "processing" | "cancelled";
-  total: string;
-  currency: string;
-  itemCount: number;
-}
+const STATUS_KEY_MAP: Record<string, string> = {
+  DELIVERED: "delivered",
+  FULFILLED: "fulfilled",
+  IN_TRANSIT: "shipped",
+  PARTIALLY_FULFILLED: "partiallyFulfilled",
+  UNFULFILLED: "processing",
+  RETURNED: "returned",
+};
 
 export interface OrderHistoryProps {
-  orders: Order[];
+  orders: OrderSummaryFields[];
   className?: string;
 }
 
@@ -25,23 +27,33 @@ export interface OrderHistoryProps {
  * OrderHistory - Display list of customer orders
  */
 export function OrderHistory({ orders, className }: OrderHistoryProps) {
-  const getStatusBadge = (status: Order["status"]) => {
-    const variants: Record<Order["status"], "default" | "secondary" | "success" | "warning"> = {
-      delivered: "success",
-      shipped: "default",
-      processing: "warning",
-      cancelled: "secondary",
+  const t = useTranslations("account");
+  const locale = useLocale();
+
+  const getStatusBadge = (status: string) => {
+    const variants: Record<string, "default" | "secondary" | "success" | "warning"> = {
+      DELIVERED: "success",
+      FULFILLED: "success",
+      IN_TRANSIT: "default",
+      PARTIALLY_FULFILLED: "warning",
+      UNFULFILLED: "warning",
+      RETURNED: "secondary",
     };
 
+    const statusKey = STATUS_KEY_MAP[status];
+    const label = statusKey
+      ? t(`orderStatuses.${statusKey}`)
+      : status;
+
     return (
-      <Badge variant={variants[status]}>
-        {status.charAt(0).toUpperCase() + status.slice(1)}
+      <Badge variant={variants[status] ?? "secondary"}>
+        {label}
       </Badge>
     );
   };
 
   const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString("pl-PL", {
+    return new Date(dateString).toLocaleDateString(locale, {
       year: "numeric",
       month: "long",
       day: "numeric",
@@ -53,13 +65,13 @@ export function OrderHistory({ orders, className }: OrderHistoryProps) {
       <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
         <Package className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
         <h2 className="text-xl font-semibold text-foreground mb-2">
-          No orders yet
+          {t("noOrders")}
         </h2>
         <p className="text-muted-foreground mb-6">
-          Start shopping to see your orders here
+          {t("startShoppingDescription")}
         </p>
         <Button asChild>
-          <Link href="/products">Browse Products</Link>
+          <Link href="/products">{t("browseProducts")}</Link>
         </Button>
       </div>
     );
@@ -78,22 +90,22 @@ export function OrderHistory({ orders, className }: OrderHistoryProps) {
               <div className="flex-1">
                 <div className="flex items-center gap-3 mb-2">
                   <h3 className="text-lg font-semibold text-foreground">
-                    Order {order.orderNumber}
+                    {t("orderNumber", { number: order.orderNumber })}
                   </h3>
-                  {getStatusBadge(order.status)}
+                  {getStatusBadge(order.fulfillmentStatus)}
                 </div>
                 <div className="space-y-1 text-sm text-muted-foreground">
-                  <p>Placed on {formatDate(order.date)}</p>
+                  <p>{t("placedOn")} {formatDate(order.processedAt)}</p>
                   <p>
-                    {order.itemCount} {order.itemCount === 1 ? "item" : "items"}
+                    {t("itemCount", { count: order.lineItemsCount })}
                   </p>
                 </div>
               </div>
               <div className="flex items-center gap-4">
                 <div className="text-right">
-                  <p className="text-sm text-muted-foreground">Total</p>
+                  <p className="text-sm text-muted-foreground">{t("orderTotal")}</p>
                   <p className="text-lg font-semibold text-foreground">
-                    {formatAmount(order.total, order.currency)}
+                    {formatAmount(order.totalPrice.amount, order.totalPrice.currencyCode)}
                   </p>
                 </div>
                 <ChevronRight className="h-5 w-5 text-muted-foreground" />

package/templates/storefront-nextjs-shadcn/components/account/order-summary.fragment.graphql

@@ -0,0 +1,36 @@
+# Fragment for OrderCard component in account pages.
+#
+# Minimal order data for listing view. Full order details
+# require the Order fragment from storefront-operations.
+#
+# Usage in components:
+#   import type { OrderSummaryFieldsFragment } from '@/generated/graphql';
+#   interface Props { order: OrderSummaryFieldsFragment }
+
+fragment OrderSummaryFields on Order {
+  id
+  orderNumber
+  status
+  financialStatus
+  fulfillmentStatus
+  processedAt
+  lineItemsCount
+  totalPrice {
+    amount
+    currencyCode
+  }
+  subtotalPrice {
+    amount
+    currencyCode
+  }
+  totalShipping {
+    amount
+    currencyCode
+  }
+  shippingAddress {
+    firstName
+    lastName
+    city
+    country
+  }
+}

package/templates/storefront-nextjs-shadcn/components/auth/account-menu.tsx

@@ -1,30 +1,31 @@
 "use client";
 
 import { useState, useRef, useEffect } from "react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
 import { User, LogOut, Package, MapPin, Settings } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { useAuth } from "@/hooks/use-auth";
 
 export interface AccountMenuProps {
   customerName?: string;
   className?: string;
 }
 
-/**
- * AccountMenu - User account dropdown menu
- * 
- * Shows user profile and quick links to account pages
- */
 export function AccountMenu({ customerName, className }: AccountMenuProps) {
+  const t = useTranslations("account");
+  const tAuth = useTranslations("auth");
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
+  const { logout, isLoggingOut } = useAuth();
 
   const handleLogout = async () => {
-    await fetch("/api/auth/clear-token", { method: "POST" });
-    router.push("/");
+    const result = await logout();
+    if (result.success) {
+      router.push("/");
+    }
     setIsOpen(false);
   };
 
@@ -47,22 +48,22 @@ export function AccountMenu({ customerName, className }: AccountMenuProps) {
 
   const menuItems = [
     {
-      label: "My Account",
+      label: t("title"),
       href: "/account",
       icon: User,
     },
     {
-      label: "Orders",
+      label: t("orders"),
       href: "/account/orders",
       icon: Package,
     },
     {
-      label: "Addresses",
+      label: t("addresses"),
       href: "/account/addresses",
       icon: MapPin,
     },
     {
-      label: "Settings",
+      label: t("settings"),
       href: "/account/settings",
       icon: Settings,
     },
@@ -76,7 +77,7 @@ export function AccountMenu({ customerName, className }: AccountMenuProps) {
         size="sm"
         onClick={() => setIsOpen(!isOpen)}
         className="flex items-center gap-2"
-        aria-label="Account menu"
+        aria-label={t("title")}
         aria-expanded={isOpen}
       >
         <User className="h-5 w-5" />
@@ -119,10 +120,11 @@ export function AccountMenu({ customerName, className }: AccountMenuProps) {
           <div className="border-t border-border py-2">
             <button
               onClick={handleLogout}
-              className="flex w-full items-center gap-3 px-4 py-2 text-sm text-destructive hover:bg-muted transition-colors"
+              disabled={isLoggingOut}
+              className="flex w-full items-center gap-3 px-4 py-2 text-sm text-destructive hover:bg-muted transition-colors disabled:opacity-50"
             >
               <LogOut className="h-4 w-4" />
-              Sign Out
+              {isLoggingOut ? tAuth("signingOut") : tAuth("signOut")}
             </button>
           </div>
         </div>

package/templates/storefront-nextjs-shadcn/components/auth/login-form.tsx

@@ -1,59 +1,56 @@
 "use client";
 
 import { useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useRouter, Link } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
 import { z } from "zod";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { useCustomerLogin } from "@/lib/graphql/hooks";
-
-// Zod validation schema for login form
-const loginSchema = z.object({
-  email: z
-    .string()
-    .min(1, "Email is required")
-    .email("Please enter a valid email address"),
-  password: z
-    .string()
-    .min(1, "Password is required")
-    .min(8, "Password must be at least 8 characters"),
-});
-
-type LoginFormData = z.infer<typeof loginSchema>;
+import { useAuth } from "@/hooks/use-auth";
+
+type LoginFormData = {
+  email: string;
+  password: string;
+};
 
 export interface LoginFormProps {
   onSuccess?: () => void;
   redirectTo?: string;
 }
 
-/**
- * LoginForm - Reusable login form component with Zod validation
- * 
- * Validates user input before submission and displays field-level errors
- */
 export function LoginForm({ onSuccess, redirectTo }: LoginFormProps) {
+  const t = useTranslations("auth");
   const router = useRouter();
   const searchParams = useSearchParams();
   const defaultRedirect = redirectTo || searchParams?.get("redirect") || "/account";
 
+  const loginSchema = z.object({
+    email: z
+      .string()
+      .min(1, t("validation.emailInvalid"))
+      .email(t("validation.emailInvalid")),
+    password: z
+      .string()
+      .min(1, t("validation.passwordMinLength"))
+      .min(8, t("validation.passwordMinLength")),
+  });
+
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof LoginFormData, string>>>({});
 
-  const loginMutation = useCustomerLogin();
+  const { login, isLoggingIn } = useAuth();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
     setFieldErrors({});
 
-    // Validate form data with Zod
     const result = loginSchema.safeParse({ email, password });
 
     if (!result.success) {
-      // Extract field-level errors from Zod validation
       const errors: Partial<Record<keyof LoginFormData, string>> = {};
       result.error.errors.forEach((err) => {
         if (err.path[0]) {
@@ -65,38 +62,20 @@ export function LoginForm({ onSuccess, redirectTo }: LoginFormProps) {
     }
 
     try {
-      const { customerAccessTokenCreate } = await loginMutation.mutateAsync({
-        input: { email, password },
-      });
+      const loginResult = await login(email, password);
 
-      // Check for user errors first
-      const userErrors = customerAccessTokenCreate?.userErrors || [];
-      
-      if (userErrors.length > 0) {
-        setError(userErrors[0].message || "Login failed");
+      if (!loginResult.success) {
+        setError(loginResult.userErrors[0]?.message || t("loginFailed"));
         return;
       }
 
-      if (customerAccessTokenCreate?.customerAccessToken) {
-        // Store token in httpOnly cookie via API route
-        await fetch("/api/auth/set-token", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            token: customerAccessTokenCreate.customerAccessToken.accessToken,
-          }),
-        });
-
-        if (onSuccess) {
-          onSuccess();
-        } else {
-          router.push(defaultRedirect);
-        }
+      if (onSuccess) {
+        onSuccess();
       } else {
-        setError("Login failed. Please check your credentials.");
+        router.push(defaultRedirect);
       }
-    } catch (err) {
-      setError("An error occurred. Please try again.");
+    } catch {
+      setError(t("unexpectedError"));
     }
   };
 
@@ -113,7 +92,7 @@ export function LoginForm({ onSuccess, redirectTo }: LoginFormProps) {
           htmlFor="email"
           className="text-sm font-medium text-foreground"
         >
-          Email
+          {t("email")}
         </label>
         <Input
           id="email"
@@ -139,13 +118,13 @@ export function LoginForm({ onSuccess, redirectTo }: LoginFormProps) {
             htmlFor="password"
             className="text-sm font-medium text-foreground"
           >
-            Password
+            {t("password")}
           </label>
           <Link
             href="/auth/forgot-password"
             className="text-xs text-primary hover:underline"
           >
-            Forgot password?
+            {t("forgotPassword")}
           </Link>
         </div>
         <Input
@@ -169,18 +148,18 @@ export function LoginForm({ onSuccess, redirectTo }: LoginFormProps) {
       <Button
         type="submit"
         className="w-full"
-        disabled={loginMutation.isPending}
+        disabled={isLoggingIn}
       >
-        {loginMutation.isPending ? "Signing in..." : "Sign In"}
+        {isLoggingIn ? t("signingIn") : t("signIn")}
       </Button>
 
       <div className="text-center text-sm text-muted-foreground">
-        Don't have an account?{" "}
+        {t("noAccount")}{" "}
         <Link
           href="/auth/register"
           className="font-medium text-primary hover:underline"
         >
-          Sign up
+          {t("signUp")}
         </Link>
       </div>
     </form>