@doswiftly/cli 0.1.18 → 0.1.20

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

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

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

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

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

@@ -2,8 +2,9 @@
 
 import { useState, useRef, useEffect } from "react";
 import { ChevronDown, Check, Globe } from "lucide-react";
-import { useCurrencyStore } from "@/stores/currency-store";
+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();
@@ -89,7 +91,7 @@ export function CurrencySelector({
   const currency = useCurrencyStore((state) => state.currency);
   const supportedCurrencies = useCurrencyStore((state) => state.supportedCurrencies);
   const setCurrency = useCurrencyStore((state) => state.setCurrency);
-  const isHydrated = useCurrencyStore((state) => state.isHydrated);
+  const isHydrated = useCurrencyStore((state) => state.isLoaded);
 
   // Handle currency change
   const handleCurrencyChange = (newCurrency: string) => {
@@ -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,9 +1,10 @@
 "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 "@/lib/format";
+import { formatPrice } from "@doswiftly/storefront-sdk";
 
 interface ProductVariant {
   id: string;
@@ -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 "@/lib/hooks";
-import Link from "next/link";
+import { useDebouncedValue } from "@doswiftly/storefront-sdk/react";
 
 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,12 +119,12 @@ 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 ? (
             <div className="max-h-96 overflow-y-auto">
-              {products.slice(0, 5).map((product: any) => (
+              {products.slice(0, 5).map((product) => (
                 <Link
                   key={product.id}
                   href={`/products/${product.handle}`}
@@ -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";