@doswiftly/cli 0.1.19 → 0.1.20

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card } from "@/components/ui/card";
@@ -38,6 +39,10 @@ export function AddressForm({
   isLoading = false,
   className,
 }: AddressFormProps) {
+  const t = useTranslations("checkout");
+  const tc = useTranslations("common");
+  const tAccount = useTranslations("account");
+
   const [formData, setFormData] = useState<AddressFormData>(
     address || {
       firstName: "",
@@ -68,25 +73,25 @@ export function AddressForm({
     const newErrors: Partial<Record<keyof AddressFormData, string>> = {};
 
     if (!formData.firstName.trim()) {
-      newErrors.firstName = "First name is required";
+      newErrors.firstName = t("validation.firstNameRequired");
     }
     if (!formData.lastName.trim()) {
-      newErrors.lastName = "Last name is required";
+      newErrors.lastName = t("validation.lastNameRequired");
     }
     if (!formData.address1.trim()) {
-      newErrors.address1 = "Address is required";
+      newErrors.address1 = t("validation.addressRequired");
     }
     if (!formData.city.trim()) {
-      newErrors.city = "City is required";
+      newErrors.city = t("validation.cityRequired");
     }
     if (!formData.province.trim()) {
-      newErrors.province = "Province/State is required";
+      newErrors.province = t("validation.provinceRequired");
     }
     if (!formData.zip.trim()) {
-      newErrors.zip = "Postal code is required";
+      newErrors.zip = t("validation.zipRequired");
     }
     if (!formData.country.trim()) {
-      newErrors.country = "Country is required";
+      newErrors.country = t("validation.countryRequired");
     }
 
     setErrors(newErrors);
@@ -113,7 +118,7 @@ export function AddressForm({
               htmlFor="firstName"
               className="block text-sm font-medium text-foreground mb-1"
             >
-              First Name *
+              {t("address.firstName")} *
             </label>
             <Input
               id="firstName"
@@ -134,7 +139,7 @@ export function AddressForm({
               htmlFor="lastName"
               className="block text-sm font-medium text-foreground mb-1"
             >
-              Last Name *
+              {t("address.lastName")} *
             </label>
             <Input
               id="lastName"
@@ -156,7 +161,7 @@ export function AddressForm({
             htmlFor="company"
             className="block text-sm font-medium text-foreground mb-1"
           >
-            Company (optional)
+            {`${t("address.company")} (${tc("optional")})`}
           </label>
           <Input
             id="company"
@@ -173,7 +178,7 @@ export function AddressForm({
             htmlFor="address1"
             className="block text-sm font-medium text-foreground mb-1"
           >
-            Address *
+            {t("address.address1")} *
           </label>
           <Input
             id="address1"
@@ -194,7 +199,7 @@ export function AddressForm({
             htmlFor="address2"
             className="block text-sm font-medium text-foreground mb-1"
           >
-            Apartment, suite, etc. (optional)
+            {`${t("address.address2")} (${tc("optional")})`}
           </label>
           <Input
             id="address2"
@@ -212,7 +217,7 @@ export function AddressForm({
               htmlFor="city"
               className="block text-sm font-medium text-foreground mb-1"
             >
-              City *
+              {t("address.city")} *
             </label>
             <Input
               id="city"
@@ -233,7 +238,7 @@ export function AddressForm({
               htmlFor="province"
               className="block text-sm font-medium text-foreground mb-1"
             >
-              Province/State *
+              {t("address.province")} *
             </label>
             <Input
               id="province"
@@ -254,7 +259,7 @@ export function AddressForm({
               htmlFor="zip"
               className="block text-sm font-medium text-foreground mb-1"
             >
-              Postal Code *
+              {t("address.zip")} *
             </label>
             <Input
               id="zip"
@@ -276,7 +281,7 @@ export function AddressForm({
             htmlFor="country"
             className="block text-sm font-medium text-foreground mb-1"
           >
-            Country *
+            {t("address.country")} *
           </label>
           <Input
             id="country"
@@ -297,7 +302,7 @@ export function AddressForm({
             htmlFor="phone"
             className="block text-sm font-medium text-foreground mb-1"
           >
-            Phone (optional)
+            {`${t("address.phone")} (${tc("optional")})`}
           </label>
           <Input
             id="phone"
@@ -322,14 +327,14 @@ export function AddressForm({
             htmlFor="isDefault"
             className="text-sm font-medium text-foreground"
           >
-            Set as default address
+            {tAccount("setAsDefault")}
           </label>
         </div>
 
         {/* Form Actions */}
         <div className="flex gap-3 pt-4">
           <Button type="submit" disabled={isLoading} className="flex-1">
-            {isLoading ? "Saving..." : address ? "Update Address" : "Add Address"}
+            {isLoading ? tc("saving") : address ? tAccount("editAddress") : tAccount("addAddress")}
           </Button>
           {onCancel && (
             <Button
@@ -338,7 +343,7 @@ export function AddressForm({
               onClick={onCancel}
               disabled={isLoading}
             >
-              Cancel
+              {tc("cancel")}
             </Button>
           )}
         </div>

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/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";
@@ -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>
@@ -240,7 +242,7 @@ export function OrderDetails({ order, className }: OrderDetailsProps) {
         {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>
@@ -249,7 +251,7 @@ export function OrderDetails({ order, className }: OrderDetailsProps) {
         {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,12 +1,23 @@
 "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 "@doswiftly/storefront-sdk";
 import type { OrderSummaryFields } from "@/lib/graphql/fragments";
 
+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: OrderSummaryFields[];
   className?: string;
@@ -16,6 +27,9 @@ export interface OrderHistoryProps {
  * OrderHistory - Display list of customer orders
  */
 export function OrderHistory({ orders, className }: OrderHistoryProps) {
+  const t = useTranslations("account");
+  const locale = useLocale();
+
   const getStatusBadge = (status: string) => {
     const variants: Record<string, "default" | "secondary" | "success" | "warning"> = {
       DELIVERED: "success",
@@ -26,24 +40,20 @@ export function OrderHistory({ orders, className }: OrderHistoryProps) {
       RETURNED: "secondary",
     };
 
-    const labels: Record<string, string> = {
-      DELIVERED: "Delivered",
-      FULFILLED: "Fulfilled",
-      IN_TRANSIT: "Shipped",
-      PARTIALLY_FULFILLED: "Partially Fulfilled",
-      UNFULFILLED: "Processing",
-      RETURNED: "Returned",
-    };
+    const statusKey = STATUS_KEY_MAP[status];
+    const label = statusKey
+      ? t(`orderStatuses.${statusKey}`)
+      : status;
 
     return (
       <Badge variant={variants[status] ?? "secondary"}>
-        {labels[status] ?? status}
+        {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",
@@ -55,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>
     );
@@ -80,20 +90,20 @@ 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.fulfillmentStatus)}
                 </div>
                 <div className="space-y-1 text-sm text-muted-foreground">
-                  <p>Placed on {formatDate(order.processedAt)}</p>
+                  <p>{t("placedOn")} {formatDate(order.processedAt)}</p>
                   <p>
-                    {order.lineItemsCount} {order.lineItemsCount === 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.totalPrice.amount, order.totalPrice.currencyCode)}
                   </p>

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

@@ -1,8 +1,8 @@
 "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";
@@ -14,6 +14,8 @@ export interface AccountMenuProps {
 }
 
 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);
@@ -46,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,
     },
@@ -75,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" />
@@ -122,7 +124,7 @@ export function AccountMenu({ customerName, className }: AccountMenuProps) {
               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" />
-              {isLoggingOut ? "Signing out..." : "Sign Out"}
+              {isLoggingOut ? tAuth("signingOut") : tAuth("signOut")}
             </button>
           </div>
         </div>

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

@@ -1,25 +1,18 @@
 "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 { useAuth } from "@/hooks/use-auth";
 
-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>;
+type LoginFormData = {
+  email: string;
+  password: string;
+};
 
 export interface LoginFormProps {
   onSuccess?: () => void;
@@ -27,10 +20,22 @@ export interface LoginFormProps {
 }
 
 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("");
@@ -60,7 +65,7 @@ export function LoginForm({ onSuccess, redirectTo }: LoginFormProps) {
       const loginResult = await login(email, password);
 
       if (!loginResult.success) {
-        setError(loginResult.userErrors[0]?.message || "Login failed");
+        setError(loginResult.userErrors[0]?.message || t("loginFailed"));
         return;
       }
 
@@ -70,7 +75,7 @@ export function LoginForm({ onSuccess, redirectTo }: LoginFormProps) {
         router.push(defaultRedirect);
       }
     } catch {
-      setError("An error occurred. Please try again.");
+      setError(t("unexpectedError"));
     }
   };
 
@@ -87,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"
@@ -113,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
@@ -145,16 +150,16 @@ export function LoginForm({ onSuccess, redirectTo }: LoginFormProps) {
         className="w-full"
         disabled={isLoggingIn}
       >
-        {isLoggingIn ? "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>