@doswiftly/cli 0.1.19 → 0.1.20

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

@@ -2,8 +2,9 @@
 
 import { useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
 import { CheckCircle, Package, Mail, ArrowRight, Clock, Building2, Copy, Check } from "lucide-react";
-import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -14,6 +15,7 @@ interface OrderSuccessPageProps {
 }
 
 export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
+  const t = useTranslations("checkout.success");
   const [orderId, setOrderId] = useState<string>("");
   const [copied, setCopied] = useState(false);
   const searchParams = useSearchParams();
@@ -31,10 +33,10 @@ export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
     try {
       await navigator.clipboard.writeText(text);
       setCopied(true);
-      toast.success("Skopiowano do schowka");
+      toast.success(t("copied"));
       setTimeout(() => setCopied(false), 2000);
     } catch {
-      toast.error("Nie udało się skopiować");
+      toast.error(t("copyFailed"));
     }
   };
 
@@ -43,7 +45,7 @@ export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
     bankName: "Bank XYZ",
     accountNumber: "PL12 3456 7890 1234 5678 9012 3456",
     recipientName: "DoSwiftly Sp. z o.o.",
-    transferTitle: `Zamówienie ${orderId}`,
+    transferTitle: t("bankTransfer.orderTitle", { orderId }),
     amount: "---", // Would be fetched from order
   };
 
@@ -63,23 +65,23 @@ export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
 
         {/* Heading */}
         <h1 className="mb-2 text-3xl font-bold">
-          {isPendingPayment ? "Zamówienie oczekuje na płatność" : "Dziękujemy za zamówienie!"}
+          {isPendingPayment ? t("pendingPayment") : t("thankYou")}
         </h1>
         <p className="mb-8 text-muted-foreground">
           {isPendingPayment
-            ? "Po otrzymaniu płatności rozpoczniemy realizację zamówienia."
-            : "Twoje zamówienie zostało potwierdzone i wkrótce zostanie wysłane."}
+            ? t("pendingDescription")
+            : t("confirmedDescription")}
         </p>
 
         {/* Order Number */}
         <Card className="mb-8">
           <CardHeader>
-            <CardTitle className="text-lg">Potwierdzenie zamówienia</CardTitle>
+            <CardTitle className="text-lg">{t("orderConfirmation")}</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
               <div className="flex items-center justify-between border-b pb-4">
-                <span className="text-muted-foreground">Numer zamówienia</span>
+                <span className="text-muted-foreground">{t("orderNumber")}</span>
                 <span className="font-mono font-medium">{orderId || "..."}</span>
               </div>
 
@@ -87,9 +89,9 @@ export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
                 <div className="flex items-start gap-3">
                   <Mail className="mt-1 h-5 w-5 text-muted-foreground" />
                   <div className="text-left">
-                    <p className="font-medium">Email potwierdzający</p>
+                    <p className="font-medium">{t("confirmationEmail")}</p>
                     <p className="text-sm text-muted-foreground">
-                      Wysłaliśmy potwierdzenie ze szczegółami zamówienia.
+                      {t("emailSent")}
                     </p>
                   </div>
                 </div>
@@ -97,9 +99,9 @@ export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
                 <div className="flex items-start gap-3">
                   <Package className="mt-1 h-5 w-5 text-muted-foreground" />
                   <div className="text-left">
-                    <p className="font-medium">Śledzenie przesyłki</p>
+                    <p className="font-medium">{t("tracking")}</p>
                     <p className="text-sm text-muted-foreground">
-                      Otrzymasz numer śledzenia, gdy paczka zostanie wysłana.
+                      {t("trackingInfo")}
                     </p>
                   </div>
                 </div>
@@ -112,15 +114,15 @@ export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
         {isBankTransfer && (
           <Alert className="mb-8 text-left">
             <Building2 className="h-4 w-4" />
-            <AlertTitle>Dane do przelewu bankowego</AlertTitle>
+            <AlertTitle>{t("bankTransfer.title")}</AlertTitle>
             <AlertDescription className="mt-4 space-y-3">
               <div className="grid gap-3">
                 <div className="flex items-center justify-between">
-                  <span className="text-sm text-muted-foreground">Bank</span>
+                  <span className="text-sm text-muted-foreground">{t("bankTransfer.bankName")}</span>
                   <span className="font-medium">{bankTransferDetails.bankName}</span>
                 </div>
                 <div className="flex items-center justify-between gap-2">
-                  <span className="text-sm text-muted-foreground">Numer konta</span>
+                  <span className="text-sm text-muted-foreground">{t("bankTransfer.accountNumber")}</span>
                   <div className="flex items-center gap-2">
                     <span className="font-mono text-sm">{bankTransferDetails.accountNumber}</span>
                     <Button
@@ -134,11 +136,11 @@ export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
                   </div>
                 </div>
                 <div className="flex items-center justify-between">
-                  <span className="text-sm text-muted-foreground">Odbiorca</span>
+                  <span className="text-sm text-muted-foreground">{t("bankTransfer.recipient")}</span>
                   <span className="font-medium">{bankTransferDetails.recipientName}</span>
                 </div>
                 <div className="flex items-center justify-between gap-2">
-                  <span className="text-sm text-muted-foreground">Tytuł przelewu</span>
+                  <span className="text-sm text-muted-foreground">{t("bankTransfer.transferTitle")}</span>
                   <div className="flex items-center gap-2">
                     <span className="font-medium">{bankTransferDetails.transferTitle}</span>
                     <Button
@@ -153,7 +155,7 @@ export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
                 </div>
               </div>
               <p className="mt-4 text-sm text-muted-foreground">
-                Realizacja zamówienia rozpocznie się po zaksięgowaniu wpłaty (zazwyczaj 1-2 dni robocze).
+                {t("bankTransfer.processingNote")}
               </p>
             </AlertDescription>
           </Alert>
@@ -162,7 +164,7 @@ export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
         {/* What's Next */}
         <Card className="mb-8">
           <CardHeader>
-            <CardTitle className="text-lg">Co dalej?</CardTitle>
+            <CardTitle className="text-lg">{t("whatsNext")}</CardTitle>
           </CardHeader>
           <CardContent>
             <ol className="space-y-3 text-left">
@@ -173,9 +175,9 @@ export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
                       1
                     </span>
                     <div>
-                      <p className="font-medium">Wykonaj przelew</p>
+                      <p className="font-medium">{t("stepMakeTransfer")}</p>
                       <p className="text-sm text-muted-foreground">
-                        Prześlij płatność na podane powyżej konto bankowe.
+                        {t("stepMakeTransferDesc")}
                       </p>
                     </div>
                   </li>
@@ -184,9 +186,9 @@ export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
                       2
                     </span>
                     <div>
-                      <p className="font-medium">Potwierdzenie płatności</p>
+                      <p className="font-medium">{t("stepPaymentConfirmation")}</p>
                       <p className="text-sm text-muted-foreground">
-                        Po zaksięgowaniu wpłaty otrzymasz email z potwierdzeniem.
+                        {t("stepPaymentConfirmationDesc")}
                       </p>
                     </div>
                   </li>
@@ -197,9 +199,9 @@ export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
                     1
                   </span>
                   <div>
-                    <p className="font-medium">Przetwarzanie zamówienia</p>
+                    <p className="font-medium">{t("stepProcessing")}</p>
                     <p className="text-sm text-muted-foreground">
-                      Przygotowujemy Twoje zamówienie do wysyłki.
+                      {t("stepProcessingDesc")}
                     </p>
                   </div>
                 </li>
@@ -209,9 +211,9 @@ export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
                   {isBankTransfer ? 3 : 2}
                 </span>
                 <div>
-                  <p className="font-medium">Wysyłka</p>
+                  <p className="font-medium">{t("stepShipping")}</p>
                   <p className="text-sm text-muted-foreground">
-                    Po wysłaniu otrzymasz email z numerem śledzenia przesyłki.
+                    {t("stepShippingDesc")}
                   </p>
                 </div>
               </li>
@@ -220,9 +222,9 @@ export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
                   {isBankTransfer ? 4 : 3}
                 </span>
                 <div>
-                  <p className="font-medium">Dostawa</p>
+                  <p className="font-medium">{t("stepDelivery")}</p>
                   <p className="text-sm text-muted-foreground">
-                    Paczka zostanie dostarczona pod wskazany adres.
+                    {t("stepDeliveryDesc")}
                   </p>
                 </div>
               </li>
@@ -234,20 +236,20 @@ export default function OrderSuccessPage({ params }: OrderSuccessPageProps) {
         <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
           <Button asChild>
             <Link href="/products">
-              Kontynuuj zakupy
+              {t("continueShopping")}
               <ArrowRight className="ml-2 h-4 w-4" />
             </Link>
           </Button>
           <Button variant="outline" asChild>
-            <Link href="/account/orders">Moje zamówienia</Link>
+            <Link href="/account/orders">{t("myOrders")}</Link>
           </Button>
         </div>
 
         {/* Help */}
         <p className="mt-8 text-sm text-muted-foreground">
-          Potrzebujesz pomocy?{" "}
+          {t("needHelp")}{" "}
           <Link href="/contact" className="text-primary underline underline-offset-4">
-            Skontaktuj się z nami
+            {t("contactUs")}
           </Link>
         </p>
       </div>

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useParams } from "next/navigation";
+import { useTranslations } from "next-intl";
 import { ProductGrid } from "@/components/product/product-grid";
 import { Breadcrumbs } from "@/components/layout/breadcrumbs";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -9,6 +10,7 @@ import { useCollection } from "@/lib/graphql/hooks";
 export default function CollectionPage() {
   const params = useParams();
   const handle = params.handle as string;
+  const t = useTranslations("collections");
 
   // Fetch collection using GraphQL
   const { data, isLoading, error } = useCollection(handle);
@@ -39,10 +41,10 @@ export default function CollectionPage() {
         <Breadcrumbs className="mb-6" />
         <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
           <h1 className="text-2xl font-bold text-foreground mb-2">
-            Collection Not Found
+            {t("notFound")}
           </h1>
           <p className="text-muted-foreground">
-            The collection you're looking for doesn't exist.
+            {t("notFoundDescription")}
           </p>
         </div>
       </div>
@@ -67,7 +69,7 @@ export default function CollectionPage() {
         columns={4}
         priorityCount={8}
         showBadges
-        emptyMessage="No products in this collection"
+        emptyMessage={t("noProducts")}
       />
     </div>
   );

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

@@ -1,17 +1,22 @@
 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 { fetchCollections } from "@/lib/graphql/server";
 
-export const metadata: Metadata = {
-  title: "Collections",
-  description: "Browse our curated collections of products",
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("collections");
+  return {
+    title: t("title"),
+    description: t("description"),
+  };
+}
 
 // Enable ISR with 60 second revalidation
 export const revalidate = 60;
 
 export default async function CollectionsPage() {
+  const t = await getTranslations("collections");
   let collectionList: Awaited<ReturnType<typeof fetchCollections>>['collections'] = [];
 
   try {
@@ -24,15 +29,15 @@ export default async function CollectionsPage() {
   return (
     <div className="container mx-auto px-4 py-8">
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-foreground">Collections</h1>
+        <h1 className="text-3xl font-bold text-foreground">{t("title")}</h1>
         <p className="mt-2 text-muted-foreground">
-          Browse our curated collections of products
+          {t("description")}
         </p>
       </div>
 
       {collectionList.length === 0 ? (
         <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
-          <p className="text-muted-foreground">No collections available yet</p>
+          <p className="text-muted-foreground">{t("noCollections")}</p>
         </div>
       ) : (
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">

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

@@ -1,20 +1,23 @@
+import { getTranslations } from "next-intl/server";
 import { Breadcrumbs } from "@/components/layout/breadcrumbs";
 import { Mail, Phone, MapPin } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
-export default function ContactPage() {
+export default async function ContactPage() {
+  const t = await getTranslations("contact");
+
   return (
     <div className="container mx-auto px-4 py-8">
       <Breadcrumbs className="mb-6" />
-      
+
       <div className="mx-auto max-w-4xl">
-        <h1 className="mb-6 text-4xl font-bold text-foreground">Contact Us</h1>
+        <h1 className="mb-6 text-4xl font-bold text-foreground">{t("title")}</h1>
         <p className="mb-8 text-lg text-muted-foreground">
-          Have a question? We'd love to hear from you. Send us a message and we'll respond as soon as possible.
+          {t("description")}
         </p>
-        
+
         <div className="grid gap-8 md:grid-cols-3">
           {/* Contact Info */}
           <div className="space-y-6">
@@ -22,7 +25,7 @@ export default function ContactPage() {
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-base">
                   <Mail className="h-5 w-5" />
-                  Email
+                  {t("emailLabel")}
                 </CardTitle>
               </CardHeader>
               <CardContent>
@@ -31,12 +34,12 @@ export default function ContactPage() {
                 </p>
               </CardContent>
             </Card>
-            
+
             <Card>
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-base">
                   <Phone className="h-5 w-5" />
-                  Phone
+                  {t("phoneLabel")}
                 </CardTitle>
               </CardHeader>
               <CardContent>
@@ -45,12 +48,12 @@ export default function ContactPage() {
                 </p>
               </CardContent>
             </Card>
-            
+
             <Card>
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-base">
                   <MapPin className="h-5 w-5" />
-                  Address
+                  {t("addressLabel")}
                 </CardTitle>
               </CardHeader>
               <CardContent>
@@ -61,48 +64,48 @@ export default function ContactPage() {
               </CardContent>
             </Card>
           </div>
-          
+
           {/* Contact Form */}
           <Card className="md:col-span-2">
             <CardHeader>
-              <CardTitle>Send us a message</CardTitle>
+              <CardTitle>{t("formTitle")}</CardTitle>
             </CardHeader>
             <CardContent>
               <form className="space-y-4">
                 <div className="grid gap-4 sm:grid-cols-2">
                   <div className="space-y-2">
                     <label htmlFor="name" className="text-sm font-medium">
-                      Name
+                      {t("name")}
                     </label>
-                    <Input id="name" placeholder="Your name" required />
+                    <Input id="name" placeholder={t("namePlaceholder")} required />
                   </div>
                   <div className="space-y-2">
                     <label htmlFor="email" className="text-sm font-medium">
-                      Email
+                      {t("email")}
                     </label>
-                    <Input id="email" type="email" placeholder="your@email.com" required />
+                    <Input id="email" type="email" placeholder={t("emailPlaceholder")} required />
                   </div>
                 </div>
                 <div className="space-y-2">
                   <label htmlFor="subject" className="text-sm font-medium">
-                    Subject
+                    {t("subject")}
                   </label>
-                  <Input id="subject" placeholder="How can we help?" required />
+                  <Input id="subject" placeholder={t("subjectPlaceholder")} required />
                 </div>
                 <div className="space-y-2">
                   <label htmlFor="message" className="text-sm font-medium">
-                    Message
+                    {t("message")}
                   </label>
                   <textarea
                     id="message"
                     rows={6}
                     className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-                    placeholder="Your message..."
+                    placeholder={t("messagePlaceholder")}
                     required
                   />
                 </div>
                 <Button type="submit" className="w-full">
-                  Send Message
+                  {t("send")}
                 </Button>
               </form>
             </CardContent>

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

@@ -10,7 +10,8 @@
  */
 
 import { useEffect } from 'react';
-import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/navigation';
 import { AlertTriangle, RefreshCcw, Home, ShoppingBag } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
@@ -21,6 +22,10 @@ interface ErrorPageProps {
 }
 
 export default function ErrorPage({ error, reset }: ErrorPageProps) {
+  const t = useTranslations('errors');
+  const tNav = useTranslations('nav');
+  const tNotFound = useTranslations('notFound');
+
   useEffect(() => {
     // Log error to console in development
     if (process.env.NODE_ENV === 'development') {
@@ -36,9 +41,9 @@ export default function ErrorPage({ error, reset }: ErrorPageProps) {
           <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
             <AlertTriangle className="h-8 w-8 text-destructive" />
           </div>
-          <CardTitle className="text-2xl">Wystąpił błąd</CardTitle>
+          <CardTitle className="text-2xl">{t("somethingWentWrong")}</CardTitle>
           <CardDescription className="text-base">
-            Przepraszamy, wystąpił nieoczekiwany problem. Spróbuj odświeżyć stronę lub wróć do strony głównej.
+            {t("unexpectedError")}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
@@ -56,20 +61,20 @@ export default function ErrorPage({ error, reset }: ErrorPageProps) {
           <div className="flex flex-col gap-3">
             <Button onClick={reset} className="w-full">
               <RefreshCcw className="mr-2 h-4 w-4" />
-              Spróbuj ponownie
+              {t("tryAgain")}
             </Button>
 
             <div className="flex gap-3">
               <Button variant="outline" asChild className="flex-1">
                 <Link href="/">
                   <Home className="mr-2 h-4 w-4" />
-                  Strona główna
+                  {t("goHome")}
                 </Link>
               </Button>
               <Button variant="outline" asChild className="flex-1">
                 <Link href="/products">
                   <ShoppingBag className="mr-2 h-4 w-4" />
-                  Produkty
+                  {tNav("products")}
                 </Link>
               </Button>
             </div>
@@ -77,9 +82,9 @@ export default function ErrorPage({ error, reset }: ErrorPageProps) {
 
           {/* Help text */}
           <p className="text-sm text-muted-foreground">
-            Jeśli problem się powtarza,{' '}
+            {tNotFound("needHelp")}{' '}
             <Link href="/contact" className="text-primary underline underline-offset-4">
-              skontaktuj się z nami
+              {tNotFound("contactUs")}
             </Link>
             .
           </p>

package/templates/storefront-nextjs-shadcn/app/[locale]/layout.tsx

@@ -0,0 +1,92 @@
+import { cookies } from "next/headers";
+import { NextIntlClientProvider } from "next-intl";
+import { notFound } from "next/navigation";
+import { defaultLocale } from "@/i18n/routing";
+import { Header } from "@/components/layout/header";
+import { Footer } from "@/components/layout/footer";
+import { QueryProvider } from "@/components/providers/query-provider";
+import { StorefrontProvider } from "@doswiftly/storefront-sdk/react";
+import { ThemeProvider } from "@/components/providers/theme-provider";
+import { StoresProvider } from "@/components/providers/stores-provider";
+import { LanguageSyncProvider } from "@/components/providers/language-sync-provider";
+import { Toaster } from "sonner";
+import { fetchShop } from "@/lib/graphql/server";
+import { themeConfig } from "@/lib/theme/theme-config";
+import { graphqlConfig } from "@/lib/graphql/config";
+import { AUTH_COOKIE_NAME } from "@doswiftly/storefront-sdk";
+
+export const revalidate = 60;
+
+type Props = {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+};
+
+export default async function LocaleLayout({ children, params }: Props) {
+  const { locale } = await params;
+
+  let shopData;
+  try {
+    shopData = await fetchShop();
+  } catch (error) {
+    console.error(
+      "[LocaleLayout] Failed to fetch shop data, using fallback:",
+      error instanceof Error ? error.message : error
+    );
+    shopData = {
+      shop: {
+        id: "fallback",
+        name: process.env.NEXT_PUBLIC_SITE_NAME || "Store",
+        currencyCode: "PLN",
+        supportedCurrencies: ["PLN"],
+        paymentCurrencies: ["PLN"],
+        defaultLanguage: defaultLocale,
+        supportedLanguages: [defaultLocale],
+      },
+    };
+  }
+
+  // Validate locale against backend's supportedLanguages (SSOT)
+  const supported = shopData.shop.supportedLanguages;
+  if (supported && supported.length > 0 && !supported.includes(locale)) {
+    notFound();
+  }
+
+  const cookieStore = await cookies();
+  const hasAuthToken = !!cookieStore.get(AUTH_COOKIE_NAME)?.value;
+
+  return (
+    <ThemeProvider
+      attribute={themeConfig.attribute}
+      defaultTheme={themeConfig.defaultTheme}
+      enableSystem={themeConfig.enableSystem}
+      disableTransitionOnChange={themeConfig.disableTransitionOnChange}
+      storageKey={themeConfig.storageKey}
+    >
+      <NextIntlClientProvider>
+        <QueryProvider>
+          <StorefrontProvider
+            config={{
+              apiUrl: graphqlConfig.apiUrl,
+              shopSlug: graphqlConfig.shopSlug,
+            }}
+            shopData={shopData.shop}
+            initialIsAuthenticated={hasAuthToken}
+            initialLanguage={locale}
+          >
+            <LanguageSyncProvider locale={locale}>
+              <StoresProvider>
+                <div className="flex min-h-screen flex-col">
+                  <Header />
+                  <main className="flex-1">{children}</main>
+                  <Footer />
+                </div>
+                <Toaster position="bottom-right" richColors />
+              </StoresProvider>
+            </LanguageSyncProvider>
+          </StorefrontProvider>
+        </QueryProvider>
+      </NextIntlClientProvider>
+    </ThemeProvider>
+  );
+}