@doswiftly/cli 0.1.19 → 0.1.20

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

@@ -1,8 +1,8 @@
 "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, useQueryClient } from "@tanstack/react-query";
 import { useExecute } from "@/lib/graphql/client";
@@ -14,33 +14,12 @@ 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;
@@ -49,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("");
@@ -115,9 +120,9 @@ export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFor
 
       // Check for user errors first
       const userErrors = mutationResult?.customerCreate?.userErrors || [];
-      
+
       if (userErrors.length > 0) {
-        setError(userErrors[0].message || "Registration failed");
+        setError(userErrors[0].message || t("registerFailed"));
         return;
       }
 
@@ -150,14 +155,14 @@ export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFor
             router.push(redirectTo);
           }
         } else {
-          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"));
     }
   };
 
@@ -175,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"
@@ -200,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"
@@ -226,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"
@@ -251,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"
@@ -271,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>
@@ -281,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,7 +1,8 @@
 "use client";
 
 import { useEffect } from "react";
-import { useRouter } from "next/navigation";
+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";
@@ -24,6 +25,8 @@ export interface CartDrawerProps {
  */
 export function CartDrawer({ className }: CartDrawerProps) {
   const router = useRouter();
+  const t = useTranslations("cart");
+  const tc = useTranslations("common");
 
   // UI state from Zustand
   const { isOpen, closeCart } = useCartStore();
@@ -71,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})
@@ -91,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,6 +1,6 @@
 "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";

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

@@ -1,7 +1,8 @@
 "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";
@@ -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-summary.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { formatAmount } from "@doswiftly/storefront-sdk";
@@ -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>
 

package/templates/storefront-nextjs-shadcn/components/cart/shipping-estimator.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { Truck, MapPin } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -39,6 +40,8 @@ export function ShippingEstimator({
   selectedOption,
   className,
 }: ShippingEstimatorProps) {
+  const t = useTranslations("cart");
+  const tCountries = useTranslations("countries");
   const [country, setCountry] = useState("PL");
   const [postalCode, setPostalCode] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -46,16 +49,16 @@ export function ShippingEstimator({
   const [error, setError] = useState<string | null>(null);
 
   const countries = [
-    { value: "PL", label: "Poland" },
-    { value: "DE", label: "Germany" },
-    { value: "FR", label: "France" },
-    { value: "GB", label: "United Kingdom" },
-    { value: "US", label: "United States" },
+    { value: "PL", label: tCountries("PL") },
+    { value: "DE", label: tCountries("DE") },
+    { value: "FR", label: tCountries("FR") },
+    { value: "GB", label: tCountries("GB") },
+    { value: "US", label: tCountries("US") },
   ];
 
   const handleEstimate = async () => {
     if (!postalCode.trim()) {
-      setError("Please enter a postal code");
+      setError(t("enterPostalCode"));
       return;
     }
 
@@ -68,10 +71,10 @@ export function ShippingEstimator({
       setOptions(result);
       
       if (result.length === 0) {
-        setError("No shipping options available for this location");
+        setError(t("noShippingOptions"));
       }
     } catch (err) {
-      setError("Failed to calculate shipping");
+      setError(t("failedCalculate"));
     } finally {
       setIsLoading(false);
     }
@@ -90,17 +93,17 @@ export function ShippingEstimator({
       <div className="flex items-center gap-2">
         <Truck className="h-5 w-5 text-muted-foreground" />
         <h3 className="text-sm font-medium text-foreground">
-          Estimate Shipping
+          {t("estimateShipping")}
         </h3>
       </div>
 
       {/* Form */}
       <div className="space-y-3">
         <div>
-          <label className="text-sm font-medium text-foreground">Country</label>
+          <label className="text-sm font-medium text-foreground">{t("country")}</label>
           <Select value={country} onValueChange={setCountry}>
             <SelectTrigger>
-              <SelectValue placeholder="Select country" />
+              <SelectValue placeholder={t("selectCountry")} />
             </SelectTrigger>
             <SelectContent>
               {countries.map((c) => (
@@ -117,7 +120,7 @@ export function ShippingEstimator({
             <MapPin className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             <Input
               type="text"
-              placeholder="Postal code"
+              placeholder={t("postalCode")}
               value={postalCode}
               onChange={(e) => setPostalCode(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && handleEstimate()}
@@ -129,7 +132,7 @@ export function ShippingEstimator({
             onClick={handleEstimate}
             disabled={!postalCode.trim() || isLoading}
           >
-            {isLoading ? "Calculating..." : "Calculate"}
+            {isLoading ? t("calculating") : t("calculate")}
           </Button>
         </div>
 
@@ -140,7 +143,7 @@ export function ShippingEstimator({
       {options.length > 0 && (
         <div className="space-y-2">
           <p className="text-sm font-medium text-foreground">
-            Available shipping options:
+            {t("availableOptions")}
           </p>
           <div className="space-y-2">
             {options.map((option) => (
@@ -160,7 +163,7 @@ export function ShippingEstimator({
                       {option.name}
                     </p>
                     <p className="text-xs text-muted-foreground">
-                      Estimated delivery: {option.estimatedDays}
+                      {t("estimatedDelivery")} {option.estimatedDays}
                     </p>
                   </div>
                   <p className="text-sm font-semibold text-foreground">

package/templates/storefront-nextjs-shadcn/components/checkout/payment-method-card.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import { CreditCard, Building2, Wallet, Banknote, Check, Smartphone } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 /**
  * Payment method type enum (matches GraphQL PaymentMethodType)
@@ -65,30 +66,18 @@ function getPaymentTypeIcon(type: PaymentMethodType) {
 }
 
 /**
- * Get human-readable label for payment type
+ * Payment type to translation key mapping
  */
-function getPaymentTypeLabel(type: PaymentMethodType): string {
-  switch (type) {
-    case "CARD":
-      return "Karta płatnicza";
-    case "BLIK":
-      return "BLIK";
-    case "BANK_TRANSFER":
-      return "Przelew bankowy";
-    case "CASH_ON_DELIVERY":
-      return "Płatność przy odbiorze";
-    case "APPLE_PAY":
-      return "Apple Pay";
-    case "GOOGLE_PAY":
-      return "Google Pay";
-    case "PAYPAL":
-      return "PayPal";
-    case "OTHER":
-      return "Inna metoda płatności";
-    default:
-      return type;
-  }
-}
+const PAYMENT_TYPE_KEYS: Record<string, string> = {
+  CARD: "creditCard",
+  BLIK: "blik",
+  BANK_TRANSFER: "bankTransfer",
+  CASH_ON_DELIVERY: "cashOnDelivery",
+  APPLE_PAY: "applePay",
+  GOOGLE_PAY: "googlePay",
+  PAYPAL: "paypal",
+  OTHER: "other",
+};
 
 /**
  * PaymentMethodCard - Selectable payment method card
@@ -108,6 +97,7 @@ export function PaymentMethodCard({
   disabled = false,
   className,
 }: PaymentMethodCardProps) {
+  const t = useTranslations("paymentMethods");
   const Icon = getPaymentTypeIcon(method.type);
 
   return (
@@ -160,12 +150,12 @@ export function PaymentMethodCard({
           </span>
           {method.isDefault && (
             <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-primary/10 text-primary">
-              Default
+              {t("default")}
             </span>
           )}
         </div>
         <p className="text-sm text-muted-foreground truncate">
-          {method.description || getPaymentTypeLabel(method.type)}
+          {method.description || t(PAYMENT_TYPE_KEYS[method.type] || "other")}
         </p>
       </div>