@doswiftly/cli 0.1.19 → 0.1.20

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useCallback } from "react";
+import { useTranslations } from "next-intl";
 import { cn } from "@/lib/utils";
 import { CreditCard, AlertCircle, Loader2 } from "lucide-react";
 import { PaymentMethodCard, PaymentMethod } from "./payment-method-card";
@@ -46,6 +47,7 @@ export function PaymentStep({
   onContinue,
   className,
 }: PaymentStepProps) {
+  const t = useTranslations("checkout.payment");
   const [localSelectedId, setLocalSelectedId] = useState<string | null>(
     selectedPaymentMethodId ||
     availablePaymentMethods.find((m) => m.isDefault)?.id ||
@@ -67,13 +69,13 @@ export function PaymentStep({
       <div className={cn("space-y-4", className)}>
         <div className="flex items-center gap-2">
           <CreditCard className="h-5 w-5 text-muted-foreground" />
-          <h3 className="text-lg font-semibold text-foreground">Payment Method</h3>
+          <h3 className="text-lg font-semibold text-foreground">{t("title")}</h3>
         </div>
 
         <Alert variant="destructive">
           <AlertCircle className="h-4 w-4" />
           <AlertDescription>
-            No payment methods are available. Please contact support.
+            {t("noMethods")}
           </AlertDescription>
         </Alert>
       </div>
@@ -89,12 +91,12 @@ export function PaymentStep({
       {/* Header */}
       <div className="flex items-center gap-2">
         <CreditCard className="h-5 w-5 text-muted-foreground" />
-        <h3 className="text-lg font-semibold text-foreground">Payment Method</h3>
+        <h3 className="text-lg font-semibold text-foreground">{t("title")}</h3>
       </div>
 
       {/* Description */}
       <p className="text-sm text-muted-foreground">
-        Choose how you'd like to pay for your order.
+        {t("chooseMethod")}
       </p>
 
       {/* Error Alert */}
@@ -124,7 +126,7 @@ export function PaymentStep({
       {isLoading && (
         <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
           <Loader2 className="h-4 w-4 animate-spin" />
-          <span>Updating payment method...</span>
+          <span>{t("updating")}</span>
         </div>
       )}
 
@@ -138,10 +140,10 @@ export function PaymentStep({
           {isLoading ? (
             <>
               <Loader2 className="h-4 w-4 animate-spin mr-2" />
-              Processing...
+              {t("processing")}
             </>
           ) : (
-            "Continue to Review"
+            t("continueToReview")
           )}
         </Button>
       )}
@@ -149,7 +151,7 @@ export function PaymentStep({
       {/* Selected Method Info */}
       {selectedMethod && (
         <p className="text-xs text-muted-foreground text-center">
-          Selected: {selectedMethod.name}
+          {t("selected")} {selectedMethod.name}
           {selectedMethod.description && ` - ${selectedMethod.description}`}
         </p>
       )}

package/templates/storefront-nextjs-shadcn/components/checkout/tax-breakdown.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
+import { useTranslations } from "next-intl";
 import { Receipt } from "lucide-react";
 
 /**
@@ -44,6 +45,7 @@ export function TaxBreakdown({
   showHeader = true,
   compact = false,
 }: TaxBreakdownProps) {
+  const t = useTranslations("checkout.tax");
   const formatPrice = (money: Money) => {
     const amount = parseFloat(money.amount);
     return new Intl.NumberFormat("pl-PL", {
@@ -65,7 +67,7 @@ export function TaxBreakdown({
   if (compact) {
     return (
       <div className={cn("flex items-center justify-between", className)}>
-        <span className="text-sm text-muted-foreground">Tax</span>
+        <span className="text-sm text-muted-foreground">{t("title")}</span>
         <span className="text-sm font-medium text-foreground">
           {formatPrice(totalTax)}
         </span>
@@ -79,7 +81,7 @@ export function TaxBreakdown({
       {showHeader && (
         <div className="flex items-center gap-2">
           <Receipt className="h-4 w-4 text-muted-foreground" />
-          <h4 className="text-sm font-medium text-foreground">Tax Breakdown</h4>
+          <h4 className="text-sm font-medium text-foreground">{t("breakdown")}</h4>
         </div>
       )}
 
@@ -104,7 +106,7 @@ export function TaxBreakdown({
           <>
             <div className="border-t border-border my-2" />
             <div className="flex items-center justify-between text-sm">
-              <span className="font-medium text-foreground">Total Tax</span>
+              <span className="font-medium text-foreground">{t("total")}</span>
               <span className="font-semibold text-foreground">
                 {formatPrice(totalTax)}
               </span>
@@ -116,7 +118,7 @@ export function TaxBreakdown({
       {/* Tax exemption note (for B2B) */}
       {parseFloat(totalTax.amount) === 0 && taxLines.length === 0 && (
         <p className="text-xs text-muted-foreground">
-          Tax exempt order
+          {t("exempt")}
         </p>
       )}
     </div>
@@ -128,13 +130,14 @@ export function TaxBreakdown({
  */
 export function TaxSummaryLine({
   totalTax,
-  label = "Tax",
+  label,
   className,
 }: {
   totalTax: Money;
   label?: string;
   className?: string;
 }) {
+  const t = useTranslations("checkout.tax");
   const formatPrice = (money: Money) => {
     const amount = parseFloat(money.amount);
     return new Intl.NumberFormat("pl-PL", {
@@ -145,7 +148,7 @@ export function TaxSummaryLine({
 
   return (
     <div className={cn("flex items-center justify-between text-sm", className)}>
-      <span className="text-muted-foreground">{label}</span>
+      <span className="text-muted-foreground">{label ?? t("title")}</span>
       <span className="text-foreground">{formatPrice(totalTax)}</span>
     </div>
   );

package/templates/storefront-nextjs-shadcn/components/commerce/currency-selector.tsx

@@ -4,6 +4,7 @@ import { useState, useRef, useEffect } from "react";
 import { ChevronDown, Check, Globe } from "lucide-react";
 import { useCurrencyStore } from "@doswiftly/storefront-sdk/react";
 import { useQueryClient } from "@tanstack/react-query";
+import { useTranslations } from "next-intl";
 
 // ============================================================================
 // CURRENCY DATA
@@ -81,6 +82,7 @@ export function CurrencySelector({
   className = "",
   variant = "default",
 }: CurrencySelectorProps) {
+  const t = useTranslations("currency");
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const queryClient = useQueryClient();
@@ -141,7 +143,7 @@ export function CurrencySelector({
         <button
           onClick={() => setIsOpen(!isOpen)}
           className="flex items-center gap-1 rounded-md px-2 py-1 text-sm hover:bg-muted"
-          aria-label="Select currency"
+          aria-label={t("selectCurrency")}
         >
           <span className="font-medium">{currentSymbol}</span>
           <ChevronDown className="h-3 w-3" />
@@ -191,10 +193,10 @@ export function CurrencySelector({
         <div className="absolute right-0 top-full z-50 mt-2 w-64 rounded-md border border-border bg-background shadow-lg">
           <div className="border-b border-border p-3">
             <p className="text-sm font-medium text-foreground">
-              Select Currency
+              {t("selectTitle")}
             </p>
             <p className="text-xs text-muted-foreground">
-              Prices will be displayed in your selected currency
+              {t("selectDescription")}
             </p>
           </div>
           <div className="max-h-64 overflow-y-auto p-1">

package/templates/storefront-nextjs-shadcn/components/commerce/pagination.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useSearchParams, usePathname } from "next/navigation";
-import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { usePathname, Link } from "@/i18n/navigation";
 
 interface PaginationProps {
   hasMore: boolean;
@@ -21,6 +22,8 @@ export function Pagination({
 }: PaginationProps) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const t = useTranslations("product");
+  const tCommon = useTranslations("common");
 
   // Build URL preserving current filters
   const buildUrl = (cursor?: string | null) => {
@@ -44,10 +47,10 @@ export function Pagination({
           !currentCursor ? "pointer-events-none opacity-50" : ""
         }`}
       >
-        First Page
+        {t("firstPage")}
       </Link>
       <span className="flex items-center px-4 text-gray-600">
-        Showing {totalShown} products
+        {t("showingProducts", { count: totalShown })}
       </span>
       <Link
         href={hasMore && endCursor ? buildUrl(endCursor) : "#"}
@@ -55,7 +58,7 @@ export function Pagination({
           !hasMore ? "pointer-events-none opacity-50" : ""
         }`}
       >
-        Next
+        {tCommon("next")}
       </Link>
     </div>
   );

package/templates/storefront-nextjs-shadcn/components/commerce/product-actions.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useMemo } from "react";
+import { useTranslations } from "next-intl";
 import { VariantSelector } from "@/components/commerce/variant-selector";
 import { AddToCartButton } from "@/components/product/add-to-cart-button";
 import { formatPrice } from "@doswiftly/storefront-sdk";
@@ -48,6 +49,7 @@ export function ProductActions({
   productTitle,
   productImages = []
 }: ProductActionsProps) {
+  const t = useTranslations("product");
   // Store only variant ID - derive variant object from props (SSOT)
   const [selectedVariantId, setSelectedVariantId] = useState<string | null>(
     () => variants[0]?.id ?? null
@@ -99,12 +101,12 @@ export function ProductActions({
         {inStock ? (
           <span className="inline-flex items-center gap-2 text-green-600">
             <span className="h-2 w-2 rounded-full bg-green-600" />
-            In Stock
+            {t("inStock")}
           </span>
         ) : (
           <span className="inline-flex items-center gap-2 text-red-600">
             <span className="h-2 w-2 rounded-full bg-red-600" />
-            Out of Stock
+            {t("outOfStock")}
           </span>
         )}
       </div>
@@ -112,7 +114,7 @@ export function ProductActions({
       {/* Quantity & Add to Cart */}
       <div className="space-y-4">
         <div className="flex items-center gap-4">
-          <label className="text-sm font-medium text-gray-700">Quantity:</label>
+          <label className="text-sm font-medium text-gray-700">{t("quantity")}</label>
           <div className="flex items-center rounded-lg border border-gray-300">
             <button
               type="button"

package/templates/storefront-nextjs-shadcn/components/commerce/search-input.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { useState, useEffect, useRef } from "react";
-import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useRouter, Link } from "@/i18n/navigation";
 import { Search, X, Loader2 } from "lucide-react";
 import { useGraphQLQuery } from "@/lib/graphql/hooks";
 import { ProductSearchDocument } from "@/generated/graphql";
 import { useDebouncedValue } from "@doswiftly/storefront-sdk/react";
-import Link from "next/link";
 
 interface SearchInputProps {
   placeholder?: string;
@@ -20,9 +20,10 @@ interface SearchInputProps {
  * Pressing Enter navigates to full search page.
  */
 export function SearchInput({
-  placeholder = "Search products...",
+  placeholder,
   className = "",
 }: SearchInputProps) {
+  const t = useTranslations("search");
   const router = useRouter();
   const [query, setQuery] = useState("");
   const [isOpen, setIsOpen] = useState(false);
@@ -93,7 +94,7 @@ export function SearchInput({
             setIsOpen(true);
           }}
           onFocus={() => query.length >= 2 && setIsOpen(true)}
-          placeholder={placeholder}
+          placeholder={placeholder ?? t("placeholder")}
           className="h-10 w-full rounded-md border border-border bg-background pl-9 pr-9 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         />
         {query && (
@@ -118,7 +119,7 @@ export function SearchInput({
             <div className="flex items-center justify-center p-4">
               <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
               <span className="ml-2 text-sm text-muted-foreground">
-                Searching...
+                {t("searching")}
               </span>
             </div>
           ) : hasResults ? (
@@ -159,12 +160,12 @@ export function SearchInput({
                 }}
                 className="block border-t border-border p-3 text-center text-sm text-primary hover:bg-muted"
               >
-                View all results for "{query}"
+                {t("viewAllResults", { query })}
               </Link>
             </div>
           ) : (
             <div className="p-4 text-center text-sm text-muted-foreground">
-              No products found for "{debouncedQuery}"
+              {t("noProductsFound", { query: debouncedQuery })}
             </div>
           )}
         </div>

package/templates/storefront-nextjs-shadcn/components/common/category-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/common/collection-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";
 import { Badge } from "@/components/ui/badge";

package/templates/storefront-nextjs-shadcn/components/common/social-share.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { Facebook, Twitter, Linkedin, Link2, Check } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { useTranslations } from "next-intl";
 
 export interface SocialShareProps {
   url: string;
@@ -20,6 +21,7 @@ export function SocialShare({
   description = "",
   className = "",
 }: SocialShareProps) {
+  const t = useTranslations("socialShare");
   const [copied, setCopied] = useState(false);
 
   const encodedUrl = encodeURIComponent(url);
@@ -58,14 +60,14 @@ export function SocialShare({
   return (
     <div className={`flex items-center gap-2 ${className}`}>
       <span className="text-sm font-medium text-muted-foreground mr-2">
-        Share:
+        {t("share")}
       </span>
 
       <Button
         variant="outline"
         size="sm"
         onClick={() => handleShare("facebook")}
-        aria-label="Share on Facebook"
+        aria-label={t("shareOnFacebook")}
         className="h-9 w-9 p-0"
       >
         <Facebook className="h-4 w-4" />
@@ -75,7 +77,7 @@ export function SocialShare({
         variant="outline"
         size="sm"
         onClick={() => handleShare("twitter")}
-        aria-label="Share on Twitter"
+        aria-label={t("shareOnTwitter")}
         className="h-9 w-9 p-0"
       >
         <Twitter className="h-4 w-4" />
@@ -85,7 +87,7 @@ export function SocialShare({
         variant="outline"
         size="sm"
         onClick={() => handleShare("linkedin")}
-        aria-label="Share on LinkedIn"
+        aria-label={t("shareOnLinkedIn")}
         className="h-9 w-9 p-0"
       >
         <Linkedin className="h-4 w-4" />
@@ -95,7 +97,7 @@ export function SocialShare({
         variant="outline"
         size="sm"
         onClick={handleCopyLink}
-        aria-label="Copy link"
+        aria-label={t("copyLink")}
         className="h-9 w-9 p-0"
       >
         {copied ? (
@@ -124,6 +126,7 @@ export function SocialShareButton({
   description = "",
   className = "",
 }: SocialShareButtonProps) {
+  const t = useTranslations("socialShare");
   const [isOpen, setIsOpen] = useState(false);
 
   const handleNativeShare = async () => {
@@ -148,7 +151,7 @@ export function SocialShareButton({
     <div className={`relative ${className}`}>
       <Button variant="outline" size="sm" onClick={handleNativeShare}>
         <Link2 className="mr-2 h-4 w-4" />
-        Share
+        {t("shareButton")}
       </Button>
 
       {isOpen && !navigator.share && (

package/templates/storefront-nextjs-shadcn/components/discount/discount-breakdown.tsx

@@ -16,6 +16,7 @@ import { cn } from "@/lib/utils";
 import { Tag, X, Percent, Truck, Gift } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { formatPrice } from "@doswiftly/storefront-sdk";
+import { useTranslations } from "next-intl";
 
 export interface AppliedDiscount {
   id: string;
@@ -63,20 +64,25 @@ function getDiscountIcon(type: AppliedDiscount["type"]) {
 }
 
 /**
- * Get label for discount type
+ * Get translation key for discount type
  */
-function getDiscountTypeLabel(discount: AppliedDiscount): string {
+function getDiscountTypeLabel(
+  discount: AppliedDiscount,
+  t: ReturnType<typeof useTranslations<"discountBreakdown">>
+): string {
   switch (discount.type) {
     case "PERCENTAGE":
-      return discount.value ? `${discount.value}% zniżki` : "Rabat procentowy";
+      return discount.value
+        ? t("percentage", { value: discount.value })
+        : t("percentageDefault");
     case "FIXED_AMOUNT":
-      return "Rabat kwotowy";
+      return t("fixedAmount");
     case "FREE_SHIPPING":
-      return "Darmowa dostawa";
+      return t("freeShipping");
     case "BUY_X_GET_Y":
-      return "Kup X, dostań Y";
+      return t("buyXGetY");
     default:
-      return "Rabat";
+      return t("default");
   }
 }
 
@@ -95,6 +101,8 @@ export function DiscountBreakdown({
   compact = false,
   className,
 }: DiscountBreakdownProps) {
+  const t = useTranslations("discountBreakdown");
+
   if (discounts.length === 0) {
     return null;
   }
@@ -133,7 +141,7 @@ export function DiscountBreakdown({
                   </span>
                   {!compact && (
                     <span className="text-xs text-muted-foreground">
-                      {getDiscountTypeLabel(discount)}
+                      {getDiscountTypeLabel(discount, t)}
                     </span>
                   )}
                 </div>
@@ -180,7 +188,7 @@ export function DiscountBreakdown({
           )}
         >
           <span className={cn("font-medium", compact && "text-sm")}>
-            Łączne oszczędności
+            {t("totalSavings")}
           </span>
           <span
             className={cn(
@@ -211,18 +219,20 @@ export interface DiscountSummaryLineProps {
 }
 
 export function DiscountSummaryLine({
-  label = "Rabat",
+  label,
   amount,
   code,
   onRemove,
   className,
 }: DiscountSummaryLineProps) {
+  const t = useTranslations("discountBreakdown");
+  const displayLabel = label ?? t("default");
   return (
     <div className={cn("flex items-center justify-between text-sm", className)}>
       <div className="flex items-center gap-1.5">
         <Tag className="h-3.5 w-3.5 text-green-600" />
         <span className="text-muted-foreground">
-          {label}
+          {displayLabel}
           {code && <span className="ml-1 font-medium text-foreground">({code})</span>}
         </span>
       </div>

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

@@ -13,6 +13,7 @@
  */
 
 import { useState, useCallback } from "react";
+import { useTranslations } from "next-intl";
 import { cn } from "@/lib/utils";
 import { Tag, Loader2, Check, X, AlertCircle } from "lucide-react";
 import { Input } from "@/components/ui/input";
@@ -64,10 +65,12 @@ export function DiscountCodeInput({
   onValidate,
   appliedCodes = [],
   isApplying = false,
-  placeholder = "Wpisz kod rabatowy",
+  placeholder,
   disabled = false,
   className,
 }: DiscountCodeInputProps) {
+  const t = useTranslations("checkout.discount");
+  const tc = useTranslations("common");
   const [code, setCode] = useState("");
   const [isValidating, setIsValidating] = useState(false);
   const [validationResult, setValidationResult] = useState<DiscountValidationResult | null>(null);
@@ -79,13 +82,13 @@ export function DiscountCodeInput({
     const trimmedCode = code.trim().toUpperCase();
 
     if (!trimmedCode) {
-      setError("Wpisz kod rabatowy");
+      setError(t("enterCode"));
       return;
     }
 
     // Check if already applied
     if (appliedCodes.includes(trimmedCode)) {
-      setError("Ten kod jest już zastosowany");
+      setError(t("alreadyApplied"));
       return;
     }
 
@@ -99,10 +102,10 @@ export function DiscountCodeInput({
         setValidationResult(result);
 
         if (!result.valid) {
-          setError(result.errorMessage || "Kod jest nieprawidłowy");
+          setError(result.errorMessage || t("invalidCode"));
         }
       } catch (e: unknown) {
-        setError(e instanceof Error ? e.message : "Nie udało się zweryfikować kodu");
+        setError(e instanceof Error ? e.message : t("validationFailed"));
       } finally {
         setIsValidating(false);
       }
@@ -148,18 +151,18 @@ export function DiscountCodeInput({
     if (!validationResult?.valid) return null;
 
     if (validationResult.estimatedSavings) {
-      return `Oszczędzisz ${formatPrice(validationResult.estimatedSavings)}`;
+      return t("savings", { savings: formatPrice(validationResult.estimatedSavings) });
     }
 
     if (validationResult.discountType === "PERCENTAGE" && validationResult.discountValue) {
-      return `${validationResult.discountValue}% zniżki`;
+      return t("percentOff", { value: validationResult.discountValue });
     }
 
     if (validationResult.discountType === "FREE_SHIPPING") {
-      return "Darmowa dostawa";
+      return t("freeShippingDiscount");
     }
 
-    return "Kod jest prawidłowy";
+    return t("codeValid");
   };
 
   return (
@@ -178,7 +181,7 @@ export function DiscountCodeInput({
             }}
             onBlur={handleValidate}
             onKeyDown={handleKeyDown}
-            placeholder={placeholder}
+            placeholder={placeholder ?? t("enterCode")}
             disabled={disabled || isLoading}
             className={cn(
               "pl-9 pr-8 uppercase",
@@ -207,10 +210,10 @@ export function DiscountCodeInput({
           ) : validationResult?.valid ? (
             <>
               <Check className="mr-2 h-4 w-4" />
-              Zastosuj
+              {tc("apply")}
             </>
           ) : (
-            "Zastosuj"
+            tc("apply")
           )}
         </Button>
       </div>
@@ -236,7 +239,7 @@ export function DiscountCodeInput({
       {/* Minimum order info */}
       {validationResult?.minimumOrderAmount && (
         <p className="text-xs text-muted-foreground">
-          Minimalna kwota zamówienia: {formatPrice(validationResult.minimumOrderAmount)}
+          {t("minOrderAmount")} {formatPrice(validationResult.minimumOrderAmount)}
         </p>
       )}
     </div>