@doswiftly/cli 0.1.18 → 0.1.20

package/templates/storefront-nextjs-shadcn/components/product/add-to-cart-button.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useRef, useEffect } from "react";
+import { useTranslations } from "next-intl";
 import { ShoppingCart, Check } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
@@ -74,6 +75,7 @@ export function AddToCartButton({
   size = "md",
   fullWidth = false,
 }: AddToCartButtonProps) {
+  const t = useTranslations("product");
   const [isAdded, setIsAdded] = useState(false);
   const { addToCart, isLoading } = useCartActions();
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -95,17 +97,7 @@ export function AddToCartButton({
       if (onAddToCart) {
         await onAddToCart(variantId, quantity);
       } else {
-        await addToCart({
-          variantId,
-          productId,
-          productHandle,
-          productTitle,
-          variantTitle,
-          price,
-          image,
-          available,
-          quantity,
-        });
+        await addToCart(variantId, quantity);
       }
       
       setIsAdded(true);
@@ -143,17 +135,17 @@ export function AddToCartButton({
       {isLoading ? (
         <>
           <Spinner size="sm" className="mr-2" />
-          Adding...
+          {t("adding")}
         </>
       ) : isAdded ? (
         <>
           <Check className="mr-2 h-5 w-5" />
-          Added to Cart
+          {t("addedToCart")}
         </>
       ) : (
         <>
           <ShoppingCart className="mr-2 h-5 w-5" />
-          {!available ? "Out of Stock" : "Add to Cart"}
+          {!available ? t("outOfStock") : t("addToCart")}
         </>
       )}
     </Button>

package/templates/storefront-nextjs-shadcn/components/product/b2b-price-display.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { cn } from "@/lib/utils";
+import { CURRENCY_LOCALES } from "@doswiftly/storefront-sdk";
 import { Tag, LogIn, TrendingDown } from "lucide-react";
-import Link from "next/link";
+import { Link } from "@/i18n/navigation";
 
 /**
  * Types matching GraphQL schema
@@ -67,7 +68,8 @@ export function B2BPriceDisplayComponent({
 
   const formatPrice = (money: Money) => {
     const amount = parseFloat(money.amount);
-    return new Intl.NumberFormat("pl-PL", {
+    const locale = CURRENCY_LOCALES[money.currencyCode] || "en-US";
+    return new Intl.NumberFormat(locale, {
       style: "currency",
       currency: money.currencyCode,
     }).format(amount);

package/templates/storefront-nextjs-shadcn/components/product/filter-active-pills.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { X } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+export interface ActivePill {
+  filterId: string;
+  label: string;
+  value: string;
+  displayValue: string;
+}
+
+interface FilterActivePillsProps {
+  pills: ActivePill[];
+  onRemove: (filterId: string, value: string) => void;
+  onClearAll: () => void;
+}
+
+/**
+ * FilterActivePills - Shows active filters as removable badges
+ *
+ * Pattern from Saleor Storefront:
+ * - Each pill shows "Label: Value" with X button
+ * - "Clear all" link at the end
+ * - Horizontally scrollable on mobile
+ */
+export function FilterActivePills({
+  pills,
+  onRemove,
+  onClearAll,
+}: FilterActivePillsProps) {
+  const t = useTranslations("product");
+
+  if (pills.length === 0) return null;
+
+  return (
+    <div
+      className="scrollbar-hide flex items-center gap-2 overflow-x-auto py-1"
+      role="region"
+      aria-label="Active filters"
+    >
+      {pills.map((pill) => (
+        <Badge
+          key={`${pill.filterId}-${pill.value}`}
+          variant="secondary"
+          className="shrink-0 gap-1.5 pr-1.5"
+        >
+          <span className="text-xs text-muted-foreground">{pill.label}:</span>
+          {pill.displayValue}
+          <button
+            type="button"
+            onClick={() => onRemove(pill.filterId, pill.value)}
+            className="ml-0.5 rounded-full p-0.5 transition-colors hover:bg-background/50"
+            aria-label={`Remove ${pill.displayValue} filter`}
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </Badge>
+      ))}
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-6 shrink-0 px-2 text-xs text-muted-foreground"
+        onClick={onClearAll}
+      >
+        {t("clearAllFilters")}
+      </Button>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/product/filter-mobile-sheet.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { SlidersHorizontal } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
+import { ProductFilters, type ProductFiltersProps } from "./product-filters";
+
+interface FilterMobileSheetProps extends ProductFiltersProps {
+  activeFilterCount: number;
+  totalProducts?: number;
+}
+
+/**
+ * FilterMobileSheet - Mobile filter panel (slides from left)
+ *
+ * Pattern from Saleor Storefront:
+ * - Trigger button visible only on mobile (lg:hidden)
+ * - Sheet slides from left with full filter panel
+ * - Footer shows "Clear all" when filters active
+ * - Auto-closes after clearing
+ */
+export function FilterMobileSheet({
+  activeFilterCount,
+  totalProducts,
+  ...filterProps
+}: FilterMobileSheetProps) {
+  const [open, setOpen] = useState(false);
+  const t = useTranslations("product");
+  const tFilters = useTranslations("filters");
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="shrink-0 lg:hidden"
+        >
+          <SlidersHorizontal className="mr-2 h-4 w-4" />
+          {t("filters")}
+          {activeFilterCount > 0 && (
+            <Badge variant="secondary" className="ml-2 h-5 px-1.5 py-0 text-xs">
+              {activeFilterCount}
+            </Badge>
+          )}
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left" className="flex w-[300px] flex-col overflow-hidden">
+        <SheetHeader>
+          <SheetTitle>{t("filters")}</SheetTitle>
+          <SheetDescription>
+            {totalProducts !== undefined && (
+              <span>{tFilters("productCount", { count: totalProducts })}</span>
+            )}
+          </SheetDescription>
+        </SheetHeader>
+        <div className="flex-1 overflow-y-auto px-4 pb-4">
+          <ProductFilters {...filterProps} />
+        </div>
+        {activeFilterCount > 0 && filterProps.onClearAll && (
+          <div className="border-t border-border p-4">
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => {
+                filterProps.onClearAll?.();
+                setOpen(false);
+              }}
+            >
+              {t("clearAllFilters")} ({activeFilterCount})
+            </Button>
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/product/filter-price-range.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import { useTranslations } from "next-intl";
+import { Slider } from "@/components/ui/slider";
+import { Input } from "@/components/ui/input";
+
+interface FilterPriceRangeProps {
+  min: number;
+  max: number;
+  currentMin?: number;
+  currentMax?: number;
+  currency?: string;
+  onChange: (min: number | undefined, max: number | undefined) => void;
+}
+
+/**
+ * FilterPriceRange - Dual-thumb range slider with number inputs
+ *
+ * - Slider commits on thumb release (onValueCommit) — natural debounce
+ * - Input fields commit on blur — no Apply button needed
+ * - Shows formatted currency values
+ */
+export function FilterPriceRange({
+  min,
+  max,
+  currentMin,
+  currentMax,
+  currency = "PLN",
+  onChange,
+}: FilterPriceRangeProps) {
+  const t = useTranslations("product");
+  const [localMin, setLocalMin] = useState<number>(currentMin ?? min);
+  const [localMax, setLocalMax] = useState<number>(currentMax ?? max);
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  // Sync local state when props change (e.g., URL navigation)
+  useEffect(() => {
+    setLocalMin(currentMin ?? min);
+    setLocalMax(currentMax ?? max);
+  }, [currentMin, currentMax, min, max]);
+
+  const commitChange = useCallback(
+    (newMin: number, newMax: number) => {
+      const effectiveMin = newMin <= min ? undefined : newMin;
+      const effectiveMax = newMax >= max ? undefined : newMax;
+      onChange(effectiveMin, effectiveMax);
+    },
+    [min, max, onChange]
+  );
+
+  const handleSliderChange = useCallback(
+    (values: number[]) => {
+      setLocalMin(values[0]);
+      setLocalMax(values[1]);
+    },
+    []
+  );
+
+  const handleSliderCommit = useCallback(
+    (values: number[]) => {
+      commitChange(values[0], values[1]);
+    },
+    [commitChange]
+  );
+
+  const handleInputBlur = useCallback(() => {
+    // Clamp values
+    const clampedMin = Math.max(min, Math.min(localMin, localMax));
+    const clampedMax = Math.min(max, Math.max(localMin, localMax));
+    setLocalMin(clampedMin);
+    setLocalMax(clampedMax);
+
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      commitChange(clampedMin, clampedMax);
+    }, 150);
+  }, [localMin, localMax, min, max, commitChange]);
+
+  // Cleanup timeout
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+
+  const step = max - min > 1000 ? 10 : max - min > 100 ? 1 : 0.01;
+
+  return (
+    <div className="space-y-4 px-1">
+      {/* Slider */}
+      <Slider
+        value={[localMin, localMax]}
+        min={min}
+        max={max}
+        step={step}
+        onValueChange={handleSliderChange}
+        onValueCommit={handleSliderCommit}
+        aria-label={t("priceRange")}
+      />
+
+      {/* Input fields */}
+      <div className="flex items-center gap-2">
+        <div className="relative flex-1">
+          <Input
+            type="number"
+            value={localMin}
+            onChange={(e) => setLocalMin(parseFloat(e.target.value) || min)}
+            onBlur={handleInputBlur}
+            min={min}
+            max={max}
+            step={step}
+            className="pr-12 text-sm"
+            aria-label={t("minPrice")}
+          />
+          <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
+            {currency}
+          </span>
+        </div>
+        <span className="text-muted-foreground">—</span>
+        <div className="relative flex-1">
+          <Input
+            type="number"
+            value={localMax}
+            onChange={(e) => setLocalMax(parseFloat(e.target.value) || max)}
+            onBlur={handleInputBlur}
+            min={min}
+            max={max}
+            step={step}
+            className="pr-12 text-sm"
+            aria-label={t("maxPrice")}
+          />
+          <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
+            {currency}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/product/index.ts

@@ -1,5 +1,5 @@
 export { ProductCard } from './product-card';
-export type { ProductCardProps, ProductCardProduct } from './product-card';
+export type { ProductCardProps } from './product-card';
 
 export { ProductGrid } from './product-grid';
 export type { ProductGridProps } from './product-grid';
@@ -16,8 +16,15 @@ export type { ProductFiltersProps, FilterGroup, FilterOption } from './product-f
 export { ProductSort } from './product-sort';
 export type { ProductSortProps, SortOption } from './product-sort';
 
+export { FilterActivePills } from './filter-active-pills';
+export type { ActivePill } from './filter-active-pills';
+
+export { FilterPriceRange } from './filter-price-range';
+
+export { FilterMobileSheet } from './filter-mobile-sheet';
+
 export { ProductVariantSelector } from './product-variant-selector';
-export type { ProductVariantSelectorProps, ProductVariant, VariantOption } from './product-variant-selector';
+export type { ProductVariantSelectorProps } from './product-variant-selector';
 
 export { ProductGallery } from './product-gallery';
 export type { ProductGalleryProps } from './product-gallery';

package/templates/storefront-nextjs-shadcn/components/product/product-card.fragment.graphql

@@ -0,0 +1,49 @@
+# Fragment for ProductCard component.
+#
+# Defines the minimal product data needed for listing views:
+# grids, search results, collection products, recommendations.
+#
+# Usage in components:
+#   import type { ProductCardFieldsFragment } from '@/generated/graphql';
+#   interface Props { product: ProductCardFieldsFragment }
+#
+# Usage in custom queries:
+#   query FeaturedProducts {
+#     products(first: 8) {
+#       edges { node { ...ProductCardFields } }
+#     }
+#   }
+
+fragment ProductCardFields on Product {
+  id
+  handle
+  title
+  vendor
+  productType
+  availableForSale
+  averageRating
+  reviewCount
+  tags
+  featuredImage {
+    url
+    altText
+    width
+    height
+  }
+  priceRange {
+    minVariantPrice {
+      amount
+      currencyCode
+    }
+    maxVariantPrice {
+      amount
+      currencyCode
+    }
+  }
+  compareAtPriceRange {
+    minVariantPrice {
+      amount
+      currencyCode
+    }
+  }
+}

package/templates/storefront-nextjs-shadcn/components/product/product-card.tsx

@@ -1,43 +1,16 @@
 "use client";
 
-import Link from "next/link";
+import { Link } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
 import { Gift } from "lucide-react";
 import { ProductImage } from "./product-image";
 import { ProductPrice } from "./product-price";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
-
-export interface ProductCardProduct {
-  id: string;
-  handle: string;
-  title: string;
-  featuredImage?: {
-    url: string;
-    altText?: string | null;
-  } | null;
-  priceRange: {
-    minVariantPrice: {
-      amount: string;
-      currencyCode: string;
-    };
-    maxVariantPrice: {
-      amount: string;
-      currencyCode: string;
-    };
-  };
-  compareAtPriceRange?: {
-    minVariantPrice: {
-      amount: string;
-      currencyCode: string;
-    };
-  } | null;
-  availableForSale: boolean;
-  tags?: string[];
-  type?: string;
-}
+import type { ProductCardFields } from "@/lib/graphql/fragments";
 
 export interface ProductCardProps {
-  product: ProductCardProduct;
+  product: ProductCardFields;
   className?: string;
   priority?: boolean;
   showBadges?: boolean;
@@ -63,6 +36,7 @@ export function ProductCard({
   priority = false,
   showBadges = true,
 }: ProductCardProps) {
+  const t = useTranslations("product");
   const isOnSale = product.compareAtPriceRange &&
     parseFloat(product.compareAtPriceRange.minVariantPrice.amount) >
     parseFloat(product.priceRange.minVariantPrice.amount);
@@ -72,7 +46,7 @@ export function ProductCard({
   );
 
   const isOutOfStock = !product.availableForSale;
-  const isGiftCard = product.type === "GIFT_CARD";
+  const isGiftCard = product.productType === "GIFT_CARD";
 
   return (
     <Link
@@ -98,22 +72,22 @@ export function ProductCard({
             {isGiftCard && (
               <Badge variant="default" className="shadow-sm">
                 <Gift className="mr-1 h-3 w-3" />
-                Karta podarunkowa
+                {t("giftCardLabel")}
               </Badge>
             )}
             {isNew && !isGiftCard && (
               <Badge variant="default" className="shadow-sm">
-                NEW
+                {t("badgeNew")}
               </Badge>
             )}
             {isOnSale && (
               <Badge variant="destructive" className="shadow-sm">
-                SALE
+                {t("badgeSale")}
               </Badge>
             )}
             {isOutOfStock && (
               <Badge variant="secondary" className="shadow-sm">
-                Out of Stock
+                {t("outOfStock")}
               </Badge>
             )}
           </div>
@@ -138,7 +112,7 @@ export function ProductCard({
 
         {isOutOfStock && (
           <p className="mt-2 text-xs text-muted-foreground">
-            Currently unavailable
+            {t("currentlyUnavailable")}
           </p>
         )}
       </div>

package/templates/storefront-nextjs-shadcn/components/product/product-detail.fragment.graphql

@@ -0,0 +1,52 @@
+# Fragment for ProductDetail / ProductPage component.
+#
+# Extends ProductCardFields with full product data needed
+# for the product detail page: gallery, variants, SEO, description.
+#
+# Usage in components:
+#   import type { ProductDetailFieldsFragment } from '@/generated/graphql';
+#   interface Props { product: ProductDetailFieldsFragment }
+#
+# Usage in custom queries:
+#   query ProductWithRecommendations($handle: String!) {
+#     product(handle: $handle) {
+#       ...ProductDetailFields
+#     }
+#   }
+
+fragment ProductDetailFields on Product {
+  ...ProductCardFields
+  description
+  descriptionHtml
+  totalInventory
+  collectRecipientInfo
+  type
+  createdAt
+  updatedAt
+  seo {
+    title
+    description
+  }
+  images(first: 20) {
+    url
+    altText
+    width
+    height
+  }
+  variants(first: 100) {
+    ...ProductVariantFields
+  }
+  # Original prices (before currency conversion) for discount display
+  originalPriceRange {
+    minVariantPrice {
+      amount
+      currencyCode
+    }
+  }
+  originalCompareAtPriceRange {
+    minVariantPrice {
+      amount
+      currencyCode
+    }
+  }
+}