@doswiftly/cli 0.1.1

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

@@ -0,0 +1,160 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { cn } from "@/lib/utils";
+import { CreditCard, AlertCircle, Loader2 } from "lucide-react";
+import { PaymentMethodCard, PaymentMethod } from "./payment-method-card";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+
+export interface PaymentStepProps {
+  /** Available payment methods from checkout */
+  availablePaymentMethods: PaymentMethod[];
+  /** Currently selected payment method ID */
+  selectedPaymentMethodId?: string | null;
+  /** Callback when payment method is selected */
+  onPaymentMethodSelect: (paymentMethodId: string) => void | Promise<void>;
+  /** Whether the mutation is loading */
+  isLoading?: boolean;
+  /** Error message to display */
+  error?: string | null;
+  /** Whether checkout is ready for payment */
+  checkoutReady?: boolean;
+  /** Callback to proceed to next step */
+  onContinue?: () => void;
+  className?: string;
+}
+
+/**
+ * PaymentStep - Checkout step for selecting payment method
+ *
+ * Features:
+ * - Lists available payment methods with icons
+ * - Pre-selects default or previously selected method
+ * - Shows loading state during mutation
+ * - Error handling with user feedback
+ *
+ * Requirements: R23.1, R23.2, R23.5
+ */
+export function PaymentStep({
+  availablePaymentMethods,
+  selectedPaymentMethodId,
+  onPaymentMethodSelect,
+  isLoading = false,
+  error,
+  checkoutReady = false,
+  onContinue,
+  className,
+}: PaymentStepProps) {
+  const [localSelectedId, setLocalSelectedId] = useState<string | null>(
+    selectedPaymentMethodId ||
+    availablePaymentMethods.find((m) => m.isDefault)?.id ||
+    availablePaymentMethods[0]?.id ||
+    null
+  );
+
+  const handleSelect = useCallback(
+    async (method: PaymentMethod) => {
+      setLocalSelectedId(method.id);
+      await onPaymentMethodSelect(method.id);
+    },
+    [onPaymentMethodSelect]
+  );
+
+  // No payment methods available
+  if (availablePaymentMethods.length === 0) {
+    return (
+      <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>
+        </div>
+
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            No payment methods are available. Please contact support.
+          </AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+
+  const selectedMethod = availablePaymentMethods.find(
+    (m) => m.id === (selectedPaymentMethodId || localSelectedId)
+  );
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* 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>
+      </div>
+
+      {/* Description */}
+      <p className="text-sm text-muted-foreground">
+        Choose how you'd like to pay for your order.
+      </p>
+
+      {/* Error Alert */}
+      {error && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* Payment Methods List */}
+      <div className="space-y-3">
+        {availablePaymentMethods.map((method) => (
+          <PaymentMethodCard
+            key={method.id}
+            method={method}
+            selected={
+              method.id === (selectedPaymentMethodId || localSelectedId)
+            }
+            onSelect={handleSelect}
+            disabled={isLoading}
+          />
+        ))}
+      </div>
+
+      {/* Loading Indicator */}
+      {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>
+        </div>
+      )}
+
+      {/* Continue Button */}
+      {onContinue && (
+        <Button
+          onClick={onContinue}
+          disabled={!selectedMethod || isLoading || !checkoutReady}
+          className="w-full"
+        >
+          {isLoading ? (
+            <>
+              <Loader2 className="h-4 w-4 animate-spin mr-2" />
+              Processing...
+            </>
+          ) : (
+            "Continue to Review"
+          )}
+        </Button>
+      )}
+
+      {/* Selected Method Info */}
+      {selectedMethod && (
+        <p className="text-xs text-muted-foreground text-center">
+          Selected: {selectedMethod.name}
+          {selectedMethod.description && ` - ${selectedMethod.description}`}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export default PaymentStep;

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

@@ -0,0 +1,154 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Receipt } from "lucide-react";
+
+/**
+ * Types matching GraphQL schema
+ */
+export interface Money {
+  amount: string;
+  currencyCode: string;
+}
+
+export interface TaxLine {
+  title: string;
+  rate: number;
+  price: Money;
+}
+
+export interface TaxBreakdownProps {
+  taxLines: TaxLine[];
+  totalTax: Money;
+  className?: string;
+  /** Whether to show the header */
+  showHeader?: boolean;
+  /** Compact mode for smaller displays */
+  compact?: boolean;
+}
+
+/**
+ * TaxBreakdown - Display tax line items with rates and amounts
+ *
+ * Features:
+ * - Shows each tax line with name, rate, and amount
+ * - Shows total tax
+ * - Supports compact mode for checkout summary
+ *
+ * Requirements: R36.1, R36.2, R36.3
+ */
+export function TaxBreakdown({
+  taxLines,
+  totalTax,
+  className,
+  showHeader = true,
+  compact = false,
+}: TaxBreakdownProps) {
+  const formatPrice = (money: Money) => {
+    const amount = parseFloat(money.amount);
+    return new Intl.NumberFormat("pl-PL", {
+      style: "currency",
+      currency: money.currencyCode,
+    }).format(amount);
+  };
+
+  const formatRate = (rate: number) => {
+    return `${(rate * 100).toFixed(0)}%`;
+  };
+
+  // No tax lines to show
+  if (taxLines.length === 0) {
+    return null;
+  }
+
+  // Compact mode - just show total
+  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 font-medium text-foreground">
+          {formatPrice(totalTax)}
+        </span>
+      </div>
+    );
+  }
+
+  // Full breakdown
+  return (
+    <div className={cn("space-y-2", className)}>
+      {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>
+        </div>
+      )}
+
+      <div className="space-y-1.5 rounded-lg border border-border bg-muted/30 p-3">
+        {taxLines.map((taxLine, index) => (
+          <div
+            key={`${taxLine.title}-${index}`}
+            className="flex items-center justify-between text-sm"
+          >
+            <span className="text-muted-foreground">
+              {taxLine.title}
+              <span className="ml-1 text-xs">({formatRate(taxLine.rate)})</span>
+            </span>
+            <span className="font-medium text-foreground">
+              {formatPrice(taxLine.price)}
+            </span>
+          </div>
+        ))}
+
+        {/* Total if multiple tax lines */}
+        {taxLines.length > 1 && (
+          <>
+            <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-semibold text-foreground">
+                {formatPrice(totalTax)}
+              </span>
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Tax exemption note (for B2B) */}
+      {parseFloat(totalTax.amount) === 0 && taxLines.length === 0 && (
+        <p className="text-xs text-muted-foreground">
+          Tax exempt order
+        </p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * TaxSummaryLine - Simple tax line for order summary
+ */
+export function TaxSummaryLine({
+  totalTax,
+  label = "Tax",
+  className,
+}: {
+  totalTax: Money;
+  label?: string;
+  className?: string;
+}) {
+  const formatPrice = (money: Money) => {
+    const amount = parseFloat(money.amount);
+    return new Intl.NumberFormat("pl-PL", {
+      style: "currency",
+      currency: money.currencyCode,
+    }).format(amount);
+  };
+
+  return (
+    <div className={cn("flex items-center justify-between text-sm", className)}>
+      <span className="text-muted-foreground">{label}</span>
+      <span className="text-foreground">{formatPrice(totalTax)}</span>
+    </div>
+  );
+}
+
+export default TaxBreakdown;

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

@@ -0,0 +1,225 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { ChevronDown, Check, Globe } from "lucide-react";
+import { useCurrencyStore } from "@/stores/currency-store";
+import { useQueryClient } from "@tanstack/react-query";
+
+// ============================================================================
+// CURRENCY DATA
+// ============================================================================
+
+const CURRENCY_SYMBOLS: Record<string, string> = {
+  PLN: "zł",
+  EUR: "€",
+  USD: "$",
+  GBP: "£",
+  CHF: "CHF",
+  CZK: "Kč",
+  SEK: "kr",
+  NOK: "kr",
+  DKK: "kr",
+  JPY: "¥",
+  CNY: "¥",
+  AUD: "A$",
+  CAD: "C$",
+};
+
+const CURRENCY_NAMES: Record<string, string> = {
+  PLN: "Polski złoty",
+  EUR: "Euro",
+  USD: "US Dollar",
+  GBP: "British Pound",
+  CHF: "Swiss Franc",
+  CZK: "Czech Koruna",
+  SEK: "Swedish Krona",
+  NOK: "Norwegian Krone",
+  DKK: "Danish Krone",
+  JPY: "Japanese Yen",
+  CNY: "Chinese Yuan",
+  AUD: "Australian Dollar",
+  CAD: "Canadian Dollar",
+};
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+interface CurrencySelectorProps {
+  className?: string;
+  variant?: "default" | "compact";
+}
+
+// ============================================================================
+// COMPONENT
+// ============================================================================
+
+/**
+ * CurrencySelector - Dropdown for selecting preferred currency
+ *
+ * Features:
+ * - Shows current currency with symbol
+ * - Lists all supported currencies from Shop
+ * - Persists selection to HTTP cookie (SSR-safe)
+ * - Invalidates React Query cache on change (refetches prices)
+ * - Handles hydration properly (no flash)
+ * - Works seamlessly with Server-Side Rendering
+ *
+ * Technical Details:
+ * - Currency stored in cookie (not localStorage)
+ * - Cookie accessible by both client and server
+ * - GraphQL requests automatically include X-Preferred-Currency header
+ * - Cache invalidation ensures immediate price updates
+ *
+ * @example
+ * ```tsx
+ * <CurrencySelector />
+ * <CurrencySelector variant="compact" />
+ * ```
+ */
+export function CurrencySelector({
+  className = "",
+  variant = "default",
+}: CurrencySelectorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const queryClient = useQueryClient();
+
+  // Get currency state from store
+  const currency = useCurrencyStore((state) => state.currency);
+  const supportedCurrencies = useCurrencyStore((state) => state.supportedCurrencies);
+  const setCurrency = useCurrencyStore((state) => state.setCurrency);
+  const isHydrated = useCurrencyStore((state) => state.isHydrated);
+
+  // Handle currency change
+  const handleCurrencyChange = (newCurrency: string) => {
+    // Update Zustand store (which automatically writes to cookie)
+    setCurrency(newCurrency);
+    
+    // Close dropdown
+    setIsOpen(false);
+    
+    // Invalidate all React Query cache to refetch with new currency
+    // This ensures prices are immediately updated across the app
+    queryClient.invalidateQueries();
+  };
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+
+  // Don't render until hydrated (prevents flash)
+  if (!isHydrated) {
+    return (
+      <div className={`flex items-center gap-2 ${className}`}>
+        <Globe className="h-4 w-4 text-muted-foreground" />
+        <span className="text-sm text-muted-foreground">Loading...</span>
+      </div>
+    );
+  }
+
+  const currentSymbol = currency ? (CURRENCY_SYMBOLS[currency] || currency) : "USD";
+  const currentName = currency ? (CURRENCY_NAMES[currency] || currency) : "US Dollar";
+
+  if (variant === "compact") {
+    return (
+      <div ref={dropdownRef} className={`relative ${className}`}>
+        <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"
+        >
+          <span className="font-medium">{currentSymbol}</span>
+          <ChevronDown className="h-3 w-3" />
+        </button>
+
+        {isOpen && (
+          <div className="absolute right-0 top-full z-50 mt-2 w-48 rounded-md border border-border bg-background shadow-lg">
+            <div className="max-h-64 overflow-y-auto p-1">
+              {supportedCurrencies.map((code) => (
+                <button
+                  key={code}
+                  onClick={() => handleCurrencyChange(code)}
+                  className="flex w-full items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-muted"
+                >
+                  <span className="flex items-center gap-2">
+                    <span className="font-medium">
+                      {CURRENCY_SYMBOLS[code] || code}
+                    </span>
+                    <span className="text-muted-foreground">{code}</span>
+                  </span>
+                  {currency === code && (
+                    <Check className="h-4 w-4 text-primary" />
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={dropdownRef} className={`relative ${className}`}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2 text-sm hover:bg-muted"
+        aria-label="Select currency"
+      >
+        <Globe className="h-4 w-4 text-muted-foreground" />
+        <span className="font-medium">{currentSymbol}</span>
+        <span className="text-muted-foreground">{currency}</span>
+        <ChevronDown className="h-4 w-4 text-muted-foreground" />
+      </button>
+
+      {isOpen && (
+        <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
+            </p>
+            <p className="text-xs text-muted-foreground">
+              Prices will be displayed in your selected currency
+            </p>
+          </div>
+          <div className="max-h-64 overflow-y-auto p-1">
+            {supportedCurrencies.map((code) => (
+              <button
+                key={code}
+                onClick={() => handleCurrencyChange(code)}
+                className="flex w-full items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-muted"
+              >
+                <span className="flex items-center gap-2">
+                  <span className="font-medium">
+                    {CURRENCY_SYMBOLS[code] || code}
+                  </span>
+                  <span className="text-muted-foreground">
+                    {CURRENCY_NAMES[code] || code}
+                  </span>
+                </span>
+                {currency === code && (
+                  <Check className="h-4 w-4 text-primary" />
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,62 @@
+"use client";
+
+import { useSearchParams, usePathname } from "next/navigation";
+import Link from "next/link";
+
+interface PaginationProps {
+  hasMore: boolean;
+  endCursor?: string | null;
+  currentCursor?: string;
+  totalShown: number;
+}
+
+/**
+ * Pagination - URL-based pagination that preserves filters
+ */
+export function Pagination({
+  hasMore,
+  endCursor,
+  currentCursor,
+  totalShown,
+}: PaginationProps) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  // Build URL preserving current filters
+  const buildUrl = (cursor?: string | null) => {
+    const params = new URLSearchParams(searchParams.toString());
+
+    if (cursor) {
+      params.set("after", cursor);
+    } else {
+      params.delete("after");
+    }
+
+    const queryString = params.toString();
+    return queryString ? `${pathname}?${queryString}` : pathname;
+  };
+
+  return (
+    <div className="mt-12 flex justify-center gap-2">
+      <Link
+        href={buildUrl()}
+        className={`btn btn-outline ${
+          !currentCursor ? "pointer-events-none opacity-50" : ""
+        }`}
+      >
+        First Page
+      </Link>
+      <span className="flex items-center px-4 text-gray-600">
+        Showing {totalShown} products
+      </span>
+      <Link
+        href={hasMore && endCursor ? buildUrl(endCursor) : "#"}
+        className={`btn btn-outline ${
+          !hasMore ? "pointer-events-none opacity-50" : ""
+        }`}
+      >
+        Next
+      </Link>
+    </div>
+  );
+}