@doswiftly/cli 0.1.18 → 0.1.20

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

@@ -1,42 +1,25 @@
 "use client";
 
 import { useState } from "react";
-import { useRouter } from "next/navigation";
-import Link from "next/link";
+import { useRouter, Link } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
 import { z } from "zod";
-import { useMutation } from "@tanstack/react-query";
-import { getGraphQLClient } from "@/lib/graphql/client";
-import { CustomerCreateDocument } from "@/generated/graphql";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useExecute } from "@/lib/graphql/client";
+import { CustomerCreateDocument, type CustomerCreateMutation } from "@/generated/graphql";
+import { useAuthStore } from "@doswiftly/storefront-sdk/react";
+import { createAuthTokenClient } from "@doswiftly/storefront-sdk";
+
+const { setToken: setAuthToken } = createAuthTokenClient();
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 
-// Zod validation schema for registration form
-const registerSchema = z.object({
-  firstName: z
-    .string()
-    .min(1, "First name is required")
-    .min(2, "First name must be at least 2 characters")
-    .max(50, "First name must be less than 50 characters"),
-  lastName: z
-    .string()
-    .min(1, "Last name is required")
-    .min(2, "Last name must be at least 2 characters")
-    .max(50, "Last name must be less than 50 characters"),
-  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")
-    .regex(
-      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
-      "Password must contain at least one uppercase letter, one lowercase letter, and one number"
-    ),
-});
-
-type RegisterFormData = z.infer<typeof registerSchema>;
+type RegisterFormData = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  password: string;
+};
 
 export interface RegisterFormProps {
   onSuccess?: () => void;
@@ -45,12 +28,38 @@ export interface RegisterFormProps {
 
 /**
  * RegisterForm - Reusable registration form component with Zod validation
- * 
+ *
  * Validates user input before submission and displays field-level errors
  */
 export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFormProps) {
+  const t = useTranslations("auth");
   const router = useRouter();
 
+  const registerSchema = z.object({
+    firstName: z
+      .string()
+      .min(1, t("validation.firstNameMinLength"))
+      .min(2, t("validation.firstNameMinLength"))
+      .max(50, t("validation.firstNameMaxLength")),
+    lastName: z
+      .string()
+      .min(1, t("validation.lastNameMinLength"))
+      .min(2, t("validation.lastNameMinLength"))
+      .max(50, t("validation.lastNameMaxLength")),
+    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"))
+      .regex(
+        /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
+        t("validation.passwordRequirements"),
+      ),
+  });
+
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [firstName, setFirstName] = useState("");
@@ -58,7 +67,9 @@ export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFor
   const [error, setError] = useState("");
   const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof RegisterFormData, string>>>({});
 
-  const client = getGraphQLClient();
+  const queryClient = useQueryClient();
+  const { setAuth } = useAuthStore();
+  const execute = useExecute();
 
   const registerMutation = useMutation({
     mutationFn: async (input: {
@@ -67,7 +78,10 @@ export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFor
       firstName: string;
       lastName: string;
     }) => {
-      return client.request(CustomerCreateDocument, { input });
+      return execute<CustomerCreateMutation>(
+        CustomerCreateDocument.toString(),
+        { input },
+      );
     },
   });
 
@@ -105,45 +119,50 @@ export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFor
       });
 
       // Check for user errors first
-      const userErrors = mutationResult?.customerCreate?.userErrors || 
-                        mutationResult?.customerCreate?.customerUserErrors || [];
-      
+      const userErrors = mutationResult?.customerCreate?.userErrors || [];
+
       if (userErrors.length > 0) {
-        setError(userErrors[0].message || "Registration failed");
+        setError(userErrors[0].message || t("registerFailed"));
         return;
       }
 
       if (mutationResult?.customerCreate?.customer) {
-        // Registration successful - token is already in the response
         const accessToken = mutationResult?.customerCreate?.customerAccessToken?.accessToken;
-        
+        const customer = mutationResult.customerCreate.customer;
+
         if (accessToken) {
-          // Store token in httpOnly cookie via API route
-          const tokenResponse = await fetch("/api/auth/set-token", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ token: accessToken }),
-          });
+          // Store token in Zustand store (for client-side GraphQL requests)
+          setAuth(
+            {
+              id: customer.id,
+              email: customer.email,
+              firstName: customer.firstName || undefined,
+              lastName: customer.lastName || undefined,
+              phone: customer.phone || undefined,
+            },
+            accessToken,
+          );
+
+          // Store token in httpOnly cookie (for SSR/middleware)
+          await setAuthToken(accessToken);
+
+          // Invalidate queries so authenticated data loads fresh
+          queryClient.invalidateQueries();
 
-          if (tokenResponse.ok) {
-            if (onSuccess) {
-              onSuccess();
-            } else {
-              router.push(redirectTo);
-            }
+          if (onSuccess) {
+            onSuccess();
           } else {
-            setError("Registration successful but session setup failed. Please try logging in.");
+            router.push(redirectTo);
           }
         } else {
-          // No token in response - redirect to login
-          setError("Registration successful! Please log in with your credentials.");
+          setError(t("registerSuccess"));
           setTimeout(() => router.push("/auth/login"), 2000);
         }
       } else {
-        setError("Registration failed. Please try again.");
+        setError(t("registerFailed"));
       }
     } catch (err) {
-      setError("An error occurred. Please try again.");
+      setError(t("unexpectedError"));
     }
   };
 
@@ -161,7 +180,7 @@ export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFor
             htmlFor="firstName"
             className="text-sm font-medium text-foreground"
           >
-            First Name
+            {t("firstName")}
           </label>
           <Input
             id="firstName"
@@ -186,7 +205,7 @@ export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFor
             htmlFor="lastName"
             className="text-sm font-medium text-foreground"
           >
-            Last Name
+            {t("lastName")}
           </label>
           <Input
             id="lastName"
@@ -212,7 +231,7 @@ export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFor
           htmlFor="email"
           className="text-sm font-medium text-foreground"
         >
-          Email
+          {t("email")}
         </label>
         <Input
           id="email"
@@ -237,7 +256,7 @@ export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFor
           htmlFor="password"
           className="text-sm font-medium text-foreground"
         >
-          Password
+          {t("password")}
         </label>
         <Input
           id="password"
@@ -257,7 +276,7 @@ export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFor
           </p>
         ) : (
           <p className="text-xs text-muted-foreground">
-            Must be at least 8 characters with uppercase, lowercase, and number
+            {t("passwordRequirements")}
           </p>
         )}
       </div>
@@ -267,16 +286,16 @@ export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFor
         className="w-full"
         disabled={registerMutation.isPending}
       >
-        {registerMutation.isPending ? "Creating account..." : "Create Account"}
+        {registerMutation.isPending ? t("creatingAccount") : t("createAccount")}
       </Button>
 
       <div className="text-center text-sm text-muted-foreground">
-        Already have an account?{" "}
+        {t("hasAccount")}{" "}
         <Link
           href="/auth/login"
           className="font-medium text-primary hover:underline"
         >
-          Sign in
+          {t("signIn")}
         </Link>
       </div>
     </form>

package/templates/storefront-nextjs-shadcn/components/blog/blog-card.tsx

@@ -7,7 +7,7 @@
  */
 
 import Image from 'next/image';
-import Link from 'next/link';
+import { Link } from '@/i18n/navigation';
 import { Calendar, Clock, Eye, User } from 'lucide-react';
 import { Card, CardContent, CardFooter } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';

package/templates/storefront-nextjs-shadcn/components/blog/blog-sidebar.tsx

@@ -6,7 +6,7 @@
  * Sidebar with categories, tags, recent posts, and search.
  */
 
-import Link from 'next/link';
+import { Link } from '@/i18n/navigation';
 import { Search, FolderOpen, Tag, TrendingUp } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';

package/templates/storefront-nextjs-shadcn/components/brand/brand-card.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Link from "next/link";
+import { Link } from "@/i18n/navigation";
 import Image from "next/image";
 import { Card } from "@/components/ui/card";
 

package/templates/storefront-nextjs-shadcn/components/cart/cart-drawer.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { useEffect } from "react";
+import { useRouter } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
 import { X, ShoppingBag, Loader2 } from "lucide-react";
 import { useCartStore } from "@/stores/cart-store";
 import { useCartSync } from "@/hooks/use-cart-sync";
@@ -22,6 +24,10 @@ export interface CartDrawerProps {
  * Mutations go through useCartActions (server-only).
  */
 export function CartDrawer({ className }: CartDrawerProps) {
+  const router = useRouter();
+  const t = useTranslations("cart");
+  const tc = useTranslations("common");
+
   // UI state from Zustand
   const { isOpen, closeCart } = useCartStore();
 
@@ -45,9 +51,7 @@ export function CartDrawer({ className }: CartDrawerProps) {
 
   const handleCheckout = () => {
     closeCart();
-    if (typeof window !== 'undefined') {
-      window.location.href = "/checkout";
-    }
+    router.push("/checkout");
   };
 
   if (!isOpen) return null;
@@ -70,14 +74,14 @@ export function CartDrawer({ className }: CartDrawerProps) {
         )}
         role="dialog"
         aria-modal="true"
-        aria-label="Shopping cart"
+        aria-label={t("title")}
       >
         {/* Header */}
         <div className="flex items-center justify-between border-b border-border p-4">
           <div className="flex items-center gap-2">
             <ShoppingBag className="h-5 w-5" />
             <h2 className="text-lg font-semibold">
-              Shopping Cart
+              {t("title")}
               {totalQuantity > 0 && (
                 <span className="ml-2 text-sm font-normal text-muted-foreground">
                   ({totalQuantity})
@@ -90,7 +94,7 @@ export function CartDrawer({ className }: CartDrawerProps) {
             size="sm"
             onClick={closeCart}
             className="h-8 w-8 p-0"
-            aria-label="Close cart"
+            aria-label={tc("close")}
           >
             <X className="h-5 w-5" />
           </Button>

package/templates/storefront-nextjs-shadcn/components/cart/cart-icon.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useRouter } from "next/navigation";
+import { useRouter } from "@/i18n/navigation";
 import { ShoppingCart } from "lucide-react";
 import { useCartSync } from "@/hooks/use-cart-sync";
+import { useHydrated } from "@doswiftly/storefront-sdk/react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
@@ -15,11 +16,13 @@ export interface CartIconProps {
 /**
  * CartIcon - Cart button with item count badge
  *
- * Client Component that reads cart count from server (source of truth)
+ * Client Component that reads cart count from server (source of truth).
+ * Badge is guarded by isHydrated to prevent hydration mismatch.
  */
 export function CartIcon({ className, navigateToCart = true }: CartIconProps) {
   const router = useRouter();
-  const { totalQuantity, isLoading } = useCartSync();
+  const isHydrated = useHydrated();
+  const { totalQuantity } = useCartSync();
 
   const handleClick = () => {
     if (navigateToCart) {
@@ -33,12 +36,12 @@ export function CartIcon({ className, navigateToCart = true }: CartIconProps) {
       size="sm"
       onClick={handleClick}
       className={cn("relative p-2", className)}
-      aria-label={`Shopping cart with ${totalQuantity} items`}
+      aria-label={`Shopping cart${isHydrated && totalQuantity > 0 ? ` with ${totalQuantity} items` : ""}`}
     >
       <ShoppingCart className="h-5 w-5" />
 
-      {/* Badge */}
-      {totalQuantity > 0 && (
+      {/* Badge — only rendered after hydration to prevent mismatch */}
+      {isHydrated && totalQuantity > 0 && (
         <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
           {totalQuantity > 99 ? "99+" : totalQuantity}
         </span>

package/templates/storefront-nextjs-shadcn/components/cart/cart-item.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import { X, Gift } from "lucide-react";
-import Link from "next/link";
+import { Link } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
 import { ProductImage } from "@/components/product/product-image";
 import { ProductQuantitySelector } from "@/components/product/product-quantity-selector";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { formatPrice, formatAmount } from "@/lib/format";
+import { formatPrice, formatAmount } from "@doswiftly/storefront-sdk";
 import type { CartItemData } from "@/hooks/use-cart-sync";
 
 export interface CartItemProps {
@@ -25,6 +26,7 @@ export function CartItem({
   onRemove,
   className,
 }: CartItemProps) {
+  const t = useTranslations("cart");
   const itemTotal = parseFloat(item.price.amount) * item.quantity;
 
   return (
@@ -56,7 +58,7 @@ export function CartItem({
             {item.productType === "GIFT_CARD" && (
               <p className="mt-1 flex items-center gap-1 text-xs text-primary">
                 <Gift className="h-3 w-3" />
-                Karta podarunkowa
+                {t("giftCardLabel")}
               </p>
             )}
             {item.variantTitle && (
@@ -72,7 +74,7 @@ export function CartItem({
             size="sm"
             onClick={() => onRemove(item.lineId)}
             className="h-8 w-8 p-0"
-            aria-label="Remove item"
+            aria-label={t("remove")}
           >
             <X className="h-4 w-4" />
           </Button>
@@ -94,7 +96,7 @@ export function CartItem({
             </p>
             {item.quantity > 1 && (
               <p className="text-xs text-muted-foreground">
-                {formatPrice(item.price)} each
+                {formatPrice(item.price)} {t("each")}
               </p>
             )}
           </div>
@@ -103,7 +105,7 @@ export function CartItem({
         {/* Out of stock warning */}
         {!item.available && (
           <p className="mt-2 text-xs text-destructive">
-            This item is currently out of stock
+            {t("outOfStockWarning")}
           </p>
         )}
       </div>

package/templates/storefront-nextjs-shadcn/components/cart/cart-line.fragment.graphql

@@ -0,0 +1,53 @@
+# Fragment for CartItem / CartLine component.
+#
+# Maps to the CartItemData interface in use-cart-sync.ts.
+# Used by: CartDrawer, CartPage, MiniCart.
+#
+# Usage in components:
+#   import type { CartLineFieldsFragment } from '@/generated/graphql';
+#   interface Props { line: CartLineFieldsFragment }
+#
+# Note: This is a UI-focused subset. The full Cart fragment
+# from storefront-operations includes cost aggregates and
+# discount allocations for the cart summary.
+
+fragment CartLineFields on CartLine {
+  id
+  quantity
+  productId
+  productTitle
+  productHandle
+  productType
+  merchandise {
+    id
+    title
+    available
+    quantityAvailable
+    price {
+      amount
+      currencyCode
+    }
+    image {
+      url
+      altText
+    }
+    selectedOptions {
+      name
+      value
+    }
+  }
+  cost {
+    amountPerQuantity {
+      amount
+      currencyCode
+    }
+    totalAmount {
+      amount
+      currencyCode
+    }
+    compareAtAmountPerQuantity {
+      amount
+      currencyCode
+    }
+  }
+}

package/templates/storefront-nextjs-shadcn/components/cart/cart-summary.tsx

@@ -1,8 +1,9 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { formatAmount } from "@/lib/format";
+import { formatAmount } from "@doswiftly/storefront-sdk";
 
 export interface CartSummaryProps {
   subtotal: number;
@@ -26,6 +27,7 @@ export function CartSummary({
   onCheckout,
   className,
 }: CartSummaryProps) {
+  const t = useTranslations("cart");
   const displayTotal = total ?? subtotal;
   const hasDiscount = (totalDiscount ?? 0) > 0;
 
@@ -33,7 +35,7 @@ export function CartSummary({
     <div className={cn("space-y-4", className)}>
       {/* Subtotal */}
       <div className="flex items-center justify-between border-t border-border pt-4">
-        <span className="text-base font-medium text-foreground">Subtotal</span>
+        <span className="text-base font-medium text-foreground">{t("subtotal")}</span>
         <span className={cn("text-lg font-semibold text-foreground", hasDiscount && "text-muted-foreground line-through text-base")}>
           {formatAmount(subtotal, currencyCode)}
         </span>
@@ -43,11 +45,11 @@ export function CartSummary({
       {hasDiscount && (
         <>
           <div className="flex items-center justify-between text-sm text-green-600 dark:text-green-400">
-            <span>Discount</span>
+            <span>{t("discount")}</span>
             <span>-{formatAmount(totalDiscount!, currencyCode)}</span>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-base font-medium text-foreground">Total</span>
+            <span className="text-base font-medium text-foreground">{t("total")}</span>
             <span className="text-lg font-semibold text-foreground">
               {formatAmount(displayTotal, currencyCode)}
             </span>
@@ -57,12 +59,12 @@ export function CartSummary({
 
       {/* Item count */}
       <p className="text-sm text-muted-foreground">
-        {itemCount} {itemCount === 1 ? "item" : "items"} in cart
+        {t("itemCount", { count: itemCount })} {t("inCart")}
       </p>
 
       {/* Shipping note */}
       <p className="text-xs text-muted-foreground">
-        Shipping and taxes calculated at checkout
+        {t("shippingTaxNote")}
       </p>
 
       {/* Checkout button */}
@@ -72,12 +74,12 @@ export function CartSummary({
         className="w-full"
         disabled={itemCount === 0}
       >
-        Proceed to Checkout
+        {t("proceedToCheckout")}
       </Button>
 
       {/* Continue shopping */}
       <Button variant="outline" size="lg" className="w-full" asChild>
-        <a href="/products">Continue Shopping</a>
+        <a href="/products">{t("continueShopping")}</a>
       </Button>
     </div>
   );

package/templates/storefront-nextjs-shadcn/components/cart/promo-code-input.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { Tag, Check, X } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -22,6 +23,8 @@ export function PromoCodeInput({
   onRemove,
   className,
 }: PromoCodeInputProps) {
+  const t = useTranslations("cart");
+  const tc = useTranslations("common");
   const [code, setCode] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -38,13 +41,13 @@ export function PromoCodeInput({
       const result = await onApply(code.trim());
       
       if (result.success) {
-        setSuccess(result.message || "Promo code applied successfully!");
+        setSuccess(result.message || t("promoApplied"));
         setCode("");
       } else {
-        setError(result.message || "Invalid promo code");
+        setError(result.message || t("promoError"));
       }
     } catch (err) {
-      setError("Failed to apply promo code");
+      setError(t("promoError"));
     } finally {
       setIsLoading(false);
     }
@@ -88,7 +91,7 @@ export function PromoCodeInput({
               <Tag className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
               <Input
                 type="text"
-                placeholder="Enter promo code"
+                placeholder={t("enterPromoCode")}
                 value={code}
                 onChange={(e) => setCode(e.target.value.toUpperCase())}
                 onKeyDown={(e) => e.key === "Enter" && handleApply()}
@@ -101,7 +104,7 @@ export function PromoCodeInput({
               disabled={!code.trim() || isLoading}
               size="default"
             >
-              {isLoading ? "Applying..." : "Apply"}
+              {isLoading ? t("applying") : tc("apply")}
             </Button>
           </div>