@doswiftly/cli 0.1.19 → 0.1.20

package/templates/storefront-nextjs-shadcn/app/{account → [locale]/account}/orders/[id]/tracking/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useParams } from "next/navigation";
-import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
 import { ChevronLeft } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Breadcrumbs } from "@/components/layout/breadcrumbs";
@@ -19,6 +20,7 @@ import {
 export default function OrderTrackingPage() {
   const params = useParams();
   const orderId = params.id as string;
+  const t = useTranslations("tracking");
 
   // TODO: Fetch tracking data from backend using GraphQL
   const trackingData = {
@@ -40,26 +42,26 @@ export default function OrderTrackingPage() {
 
   const milestones = [
     {
-      label: "Order Placed",
+      label: t("orderPlaced"),
       status: "completed" as const,
       date: "2024-01-15",
     },
     {
-      label: "Processing",
+      label: t("processing"),
       status: "completed" as const,
       date: "2024-01-16",
     },
     {
-      label: "Shipped",
+      label: t("shipped"),
       status: "completed" as const,
       date: "2024-01-17",
     },
     {
-      label: "In Transit",
+      label: t("inTransit"),
       status: "current" as const,
     },
     {
-      label: "Delivered",
+      label: t("delivered"),
       status: "pending" as const,
     },
   ];
@@ -67,40 +69,40 @@ export default function OrderTrackingPage() {
   const events: TrackingEvent[] = [
     {
       id: "1",
-      status: "In Transit",
-      description: "Package is on the way to the destination",
+      status: t("inTransit"),
+      description: t("onTheWay"),
       location: "Warsaw Distribution Center",
       timestamp: "2024-01-18T14:30:00Z",
       isCompleted: true,
     },
     {
       id: "2",
-      status: "In Transit",
-      description: "Package arrived at sorting facility",
+      status: t("inTransit"),
+      description: t("arrivedAtFacility"),
       location: "Krakow Sorting Facility",
       timestamp: "2024-01-18T08:15:00Z",
       isCompleted: true,
     },
     {
       id: "3",
-      status: "Shipped",
-      description: "Package has been picked up by carrier",
+      status: t("shipped"),
+      description: t("pickedUpByCarrier"),
       location: "Origin Facility",
       timestamp: "2024-01-17T16:45:00Z",
       isCompleted: true,
     },
     {
       id: "4",
-      status: "Processing",
-      description: "Package is being prepared for shipment",
-      location: "Warehouse",
+      status: t("processing"),
+      description: t("preparingShipment"),
+      location: t("warehouse"),
       timestamp: "2024-01-16T10:00:00Z",
       isCompleted: true,
     },
     {
       id: "5",
-      status: "Order Placed",
-      description: "Order has been confirmed",
+      status: t("orderPlaced"),
+      description: t("orderConfirmed"),
       timestamp: "2024-01-15T12:30:00Z",
       isCompleted: true,
     },
@@ -114,17 +116,17 @@ export default function OrderTrackingPage() {
         <Button variant="ghost" asChild>
           <Link href={`/account/orders/${orderId}`}>
             <ChevronLeft className="mr-2 h-4 w-4" />
-            Back to Order Details
+            {t("backToOrderDetails")}
           </Link>
         </Button>
       </div>
 
       <div className="mb-8">
         <h1 className="text-3xl font-bold text-foreground">
-          Track Order {trackingData.orderNumber}
+          {t("trackOrder", { orderNumber: trackingData.orderNumber })}
         </h1>
         <p className="mt-2 text-muted-foreground">
-          Follow your package's journey
+          {t("followJourney")}
         </p>
       </div>
 
@@ -154,7 +156,7 @@ export default function OrderTrackingPage() {
           {/* Tracking Timeline */}
           <div>
             <h2 className="text-xl font-semibold text-foreground mb-4">
-              Tracking History
+              {t("trackingHistory")}
             </h2>
             <TrackingTimeline events={events} />
           </div>
@@ -173,16 +175,16 @@ export default function OrderTrackingPage() {
           {/* Carrier Information */}
           <div className="rounded-lg border border-border bg-background p-6">
             <h3 className="text-lg font-semibold text-foreground mb-4">
-              Carrier Information
+              {t("carrierInfo")}
             </h3>
             <div className="space-y-3 text-sm">
               <div>
-                <span className="font-medium text-foreground">Carrier:</span>
+                <span className="font-medium text-foreground">{t("carrier")}</span>
                 <p className="text-muted-foreground">{trackingData.carrier}</p>
               </div>
               <div>
                 <span className="font-medium text-foreground">
-                  Tracking Number:
+                  {t("trackingNumberLabel")}
                 </span>
                 <p className="font-mono text-muted-foreground">
                   {trackingData.trackingNumber}
@@ -194,7 +196,7 @@ export default function OrderTrackingPage() {
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  Track on Carrier Website
+                  {t("trackOnCarrierWebsite")}
                 </a>
               </Button>
             </div>

package/templates/storefront-nextjs-shadcn/app/{account → [locale]/account}/orders/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import Link from "next/link";
+import { Link } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
 import { useAuthStore, useAuthHydrated } from "@doswiftly/storefront-sdk/react";
 import { useCustomer } from "@/lib/graphql/hooks";
 import { useHydrated } from "@doswiftly/storefront-sdk/react";
@@ -9,6 +10,7 @@ import { OrderHistory } from "@/components/account/order-history";
 import { Skeleton } from "@/components/ui/skeleton";
 
 export default function OrdersPage() {
+  const t = useTranslations("account");
   const hydrated = useHydrated();
   const authHydrated = useAuthHydrated();
   const accessToken = useAuthStore((s) => s.accessToken);
@@ -56,11 +58,13 @@ export default function OrdersPage() {
       <div className="container mx-auto px-4 py-8">
         <Breadcrumbs className="mb-6" />
         <div className="rounded-lg border border-destructive bg-destructive/10 p-8 text-center text-sm text-destructive">
-          You need to{" "}
-          <Link href="/auth/login?redirect=/account/orders" className="font-medium underline">
-            sign in
-          </Link>{" "}
-          to view your orders.
+          {t.rich("signInToView", {
+            link: (chunks) => (
+              <Link href="/auth/login?redirect=/account/orders" className="font-medium underline">
+                {chunks}
+              </Link>
+            ),
+          })}
         </div>
       </div>
     );
@@ -71,7 +75,7 @@ export default function OrdersPage() {
       <div className="container mx-auto px-4 py-8">
         <Breadcrumbs className="mb-6" />
         <div className="rounded-lg border border-red-200 bg-red-50 p-8 text-center">
-          <p className="text-red-800">Failed to load orders</p>
+          <p className="text-red-800">{t("failedLoadOrders")}</p>
         </div>
       </div>
     );
@@ -85,9 +89,9 @@ export default function OrdersPage() {
       <Breadcrumbs className="mb-6" />
 
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-foreground">Order History</h1>
+        <h1 className="text-3xl font-bold text-foreground">{t("orders")}</h1>
         <p className="mt-2 text-muted-foreground">
-          View and track your orders
+          {t("viewTrackOrders")}
         </p>
       </div>
 

package/templates/storefront-nextjs-shadcn/app/{account → [locale]/account}/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
 import { User, Package, MapPin, Settings } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";

package/templates/storefront-nextjs-shadcn/app/{account → [locale]/account}/settings/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import Link from "next/link";
+import { Link } from "@/i18n/navigation";
 import { useAuthStore, useAuthHydrated } from "@doswiftly/storefront-sdk/react";
 import { useCustomerProfile, useCustomerUpdate } from "@/lib/graphql/hooks";
 import { useHydrated } from "@doswiftly/storefront-sdk/react";

package/templates/storefront-nextjs-shadcn/app/{auth → [locale]/auth}/forgot-password/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useState } from "react";
-import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
 import { useMutation } from "@tanstack/react-query";
 import { useExecute } from "@/lib/graphql/client";
 import {
@@ -13,6 +14,7 @@ import { Input } from "@/components/ui/input";
 import { ArrowLeft } from "lucide-react";
 
 export default function ForgotPasswordPage() {
+  const t = useTranslations("auth");
   const execute = useExecute();
   const [email, setEmail] = useState("");
   const [isSubmitted, setIsSubmitted] = useState(false);
@@ -29,7 +31,7 @@ export default function ForgotPasswordPage() {
       setIsSubmitted(true);
     },
     onError: () => {
-      setError("An error occurred. Please try again.");
+      setError(t("unexpectedError"));
     },
   });
 
@@ -59,25 +61,25 @@ export default function ForgotPasswordPage() {
                 />
               </svg>
             </div>
-            <h1 className="text-3xl font-bold text-foreground">Check Your Email</h1>
+            <h1 className="text-3xl font-bold text-foreground">{t("checkYourEmail")}</h1>
             <p className="mt-2 text-muted-foreground">
-              We've sent password reset instructions to {email}
+              {t("resetEmailSent", { email })}
             </p>
           </div>
 
           <div className="space-y-4">
             <p className="text-sm text-muted-foreground">
-              Didn't receive the email? Check your spam folder or try again.
+              {t("didntReceiveEmail")}
             </p>
             <Button variant="outline" onClick={() => setIsSubmitted(false)}>
-              Try Another Email
+              {t("tryAnotherEmail")}
             </Button>
             <div>
               <Link
                 href="/auth/login"
                 className="text-sm text-primary hover:underline"
               >
-                Back to Sign In
+                {t("backToSignIn")}
               </Link>
             </div>
           </div>
@@ -94,13 +96,13 @@ export default function ForgotPasswordPage() {
           className="mb-8 inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground"
         >
           <ArrowLeft className="h-4 w-4" />
-          Back to Sign In
+          {t("backToSignIn")}
         </Link>
 
         <div className="mb-8">
-          <h1 className="text-3xl font-bold text-foreground">Reset Password</h1>
+          <h1 className="text-3xl font-bold text-foreground">{t("resetPasswordTitle")}</h1>
           <p className="mt-2 text-muted-foreground">
-            Enter your email address and we'll send you instructions to reset your password.
+            {t("resetPasswordDescription")}
           </p>
         </div>
 
@@ -113,7 +115,7 @@ export default function ForgotPasswordPage() {
 
           <div className="space-y-2">
             <label htmlFor="email" className="text-sm font-medium text-foreground">
-              Email
+              {t("email")}
             </label>
             <Input
               id="email"
@@ -127,7 +129,7 @@ export default function ForgotPasswordPage() {
           </div>
 
           <Button type="submit" className="w-full" disabled={recoverMutation.isPending}>
-            {recoverMutation.isPending ? "Sending..." : "Send Reset Instructions"}
+            {recoverMutation.isPending ? t("sending") : t("sendResetInstructions")}
           </Button>
         </form>
       </div>

package/templates/storefront-nextjs-shadcn/app/{auth → [locale]/auth}/login/page.tsx

@@ -1,17 +1,20 @@
 "use client";
 
 import { Suspense } from "react";
+import { useTranslations } from "next-intl";
 import { LoginForm } from "@/components/auth/login-form";
 import { Spinner } from "@/components/ui/spinner";
 
 export default function LoginPage() {
+  const t = useTranslations("auth");
+
   return (
     <div className="container mx-auto px-4 py-16">
       <div className="mx-auto max-w-md">
         <div className="mb-8 text-center">
-          <h1 className="text-3xl font-bold text-foreground">Sign In</h1>
+          <h1 className="text-3xl font-bold text-foreground">{t("signInTitle")}</h1>
           <p className="mt-2 text-muted-foreground">
-            Sign in to your account to continue
+            {t("signInDescription")}
           </p>
         </div>
 

package/templates/storefront-nextjs-shadcn/app/{auth → [locale]/auth}/register/page.tsx

@@ -1,15 +1,18 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { RegisterForm } from "@/components/auth/register-form";
 
 export default function RegisterPage() {
+  const t = useTranslations("auth");
+
   return (
     <div className="container mx-auto px-4 py-16">
       <div className="mx-auto max-w-md">
         <div className="mb-8 text-center">
-          <h1 className="text-3xl font-bold text-foreground">Create Account</h1>
+          <h1 className="text-3xl font-bold text-foreground">{t("signUpTitle")}</h1>
           <p className="mt-2 text-muted-foreground">
-            Sign up to start shopping
+            {t("signUpDescription")}
           </p>
         </div>
 

package/templates/storefront-nextjs-shadcn/app/{blog → [locale]/blog}/[slug]/page.tsx

@@ -6,7 +6,7 @@
 
 import { Metadata } from 'next';
 import Image from 'next/image';
-import Link from 'next/link';
+import { Link } from '@/i18n/navigation';
 import { notFound } from 'next/navigation';
 import { Calendar, Clock, Eye, User, ChevronLeft, Share2 } from 'lucide-react';
 import { Breadcrumbs } from '@/components/layout/breadcrumbs';

package/templates/storefront-nextjs-shadcn/app/{cart → [locale]/cart}/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import Link from "next/link";
+import { Link, useRouter } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
 import { useCartStoreApi } from "@/stores/cart-store";
 import { useCartSync } from "@/hooks/use-cart-sync";
 import { useCartActions } from "@/hooks/use-cart-actions";
@@ -14,6 +15,9 @@ import { Button } from "@/components/ui/button";
 import { ArrowLeft, Loader2 } from "lucide-react";
 
 export default function CartPage() {
+  const t = useTranslations("cart");
+  const router = useRouter();
+
   // Server cart data (source of truth)
   const {
     items,
@@ -47,14 +51,14 @@ export default function CartPage() {
   }
 
   const handleCheckout = () => {
-    window.location.href = "/checkout";
+    router.push("/checkout");
   };
 
   const handleApplyPromo = async (code: string) => {
     try {
       const cartId = cartStoreApi.getState().cartId;
       if (!cartId) {
-        return { success: false, message: "Your cart is empty" };
+        return { success: false, message: t("empty") };
       }
 
       const result = await discountMutation.mutateAsync({
@@ -74,15 +78,15 @@ export default function CartPage() {
       if (!payload?.cart) {
         return {
           success: false,
-          message: "Failed to apply promo code",
+          message: t("promoError"),
         };
       }
 
-      return { success: true, message: "Promo code applied!" };
+      return { success: true, message: t("promoApplied") };
     } catch (error) {
       return {
         success: false,
-        message: "Failed to apply promo code",
+        message: t("promoError"),
       };
     }
   };
@@ -104,7 +108,7 @@ export default function CartPage() {
   if (items.length === 0) {
     return (
       <div className="container mx-auto px-4 py-16">
-        <EmptyCart onContinueShopping={() => (window.location.href = "/products")} />
+        <EmptyCart onContinueShopping={() => router.push("/products")} />
       </div>
     );
   }
@@ -116,11 +120,11 @@ export default function CartPage() {
       <Breadcrumbs className="mb-6" />
 
       <div className="mb-8 flex items-center justify-between">
-        <h1 className="text-3xl font-bold text-foreground">Shopping Cart</h1>
+        <h1 className="text-3xl font-bold text-foreground">{t("title")}</h1>
         <Button variant="ghost" asChild>
           <Link href="/products">
             <ArrowLeft className="mr-2 h-4 w-4" />
-            Continue Shopping
+            {t("continueShopping")}
           </Link>
         </Button>
       </div>
@@ -144,7 +148,7 @@ export default function CartPage() {
         {/* Summary */}
         <div className="lg:col-span-1">
           <div className="sticky top-4 space-y-4 rounded-lg border border-border bg-muted/50 p-6">
-            <h2 className="text-lg font-semibold text-foreground">Order Summary</h2>
+            <h2 className="text-lg font-semibold text-foreground">{t("yourOrder")}</h2>
 
             <PromoCodeInput
               onApply={handleApplyPromo}

package/templates/storefront-nextjs-shadcn/app/{categories → [locale]/categories}/[slug]/category-products-client.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { ProductGrid } from "@/components/product/product-grid";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useProducts } from "@/lib/graphql/hooks";
@@ -17,6 +18,7 @@ interface CategoryProductsClientProps {
 export function CategoryProductsClient({
   categoryId,
 }: CategoryProductsClientProps) {
+  const t = useTranslations("product");
   const { data, isLoading, error } = useProducts({
     first: 20,
     filters: { categoryId },
@@ -38,7 +40,7 @@ export function CategoryProductsClient({
     return (
       <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
         <p className="text-muted-foreground">
-          Failed to load products. Please try again.
+          {t("failedLoadProducts")}
         </p>
       </div>
     );
@@ -50,7 +52,7 @@ export function CategoryProductsClient({
       columns={4}
       priorityCount={8}
       showBadges
-      emptyMessage="No products in this category"
+      emptyMessage={t("noProductsInCategory")}
     />
   );
 }

package/templates/storefront-nextjs-shadcn/app/{categories → [locale]/categories}/page.tsx

@@ -1,18 +1,23 @@
 import { Metadata } from "next";
-import Link from "next/link";
+import { getTranslations } from "next-intl/server";
+import { Link } from "@/i18n/navigation";
 import { Card } from "@/components/ui/card";
 import { fetchCategories } from "@/lib/graphql/server";
 import type { CategoryNodeFields } from "@/lib/graphql/fragments";
 
-export const metadata: Metadata = {
-  title: "Categories",
-  description: "Browse products by category",
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("categories");
+  return {
+    title: t("title"),
+    description: t("description"),
+  };
+}
 
 // Enable ISR with 60 second revalidation
 export const revalidate = 60;
 
 export default async function CategoriesPage() {
+  const t = await getTranslations("categories");
   let categoryList: CategoryNodeFields[] = [];
 
   try {
@@ -25,15 +30,15 @@ export default async function CategoriesPage() {
   return (
     <div className="container mx-auto px-4 py-8">
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-foreground">Categories</h1>
+        <h1 className="text-3xl font-bold text-foreground">{t("title")}</h1>
         <p className="mt-2 text-muted-foreground">
-          Browse products by category
+          {t("description")}
         </p>
       </div>
 
       {categoryList.length === 0 ? (
         <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
-          <p className="text-muted-foreground">No categories available yet</p>
+          <p className="text-muted-foreground">{t("noCategories")}</p>
         </div>
       ) : (
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">

package/templates/storefront-nextjs-shadcn/app/{checkout → [locale]/checkout}/error.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import Link from "next/link";
+import { Link } from "@/i18n/navigation";
 import { AlertCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";