@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/cart/cart-summary.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { formatAmount } from "@/lib/format";
+
+export interface CartSummaryProps {
+  subtotal: number;
+  total?: number;
+  totalDiscount?: number;
+  currencyCode: string;
+  itemCount: number;
+  onCheckout?: () => void;
+  className?: string;
+}
+
+/**
+ * CartSummary - Cart totals and checkout button
+ */
+export function CartSummary({
+  subtotal,
+  total,
+  totalDiscount,
+  currencyCode,
+  itemCount,
+  onCheckout,
+  className,
+}: CartSummaryProps) {
+  const displayTotal = total ?? subtotal;
+  const hasDiscount = (totalDiscount ?? 0) > 0;
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* Subtotal */}
+      <div className="flex items-center justify-between border-t border-border pt-4">
+        <span className="text-base font-medium text-foreground">Subtotal</span>
+        <span className={cn("text-lg font-semibold text-foreground", hasDiscount && "text-muted-foreground line-through text-base")}>
+          {formatAmount(subtotal, currencyCode)}
+        </span>
+      </div>
+
+      {/* Discount */}
+      {hasDiscount && (
+        <>
+          <div className="flex items-center justify-between text-sm text-green-600 dark:text-green-400">
+            <span>Discount</span>
+            <span>-{formatAmount(totalDiscount!, currencyCode)}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-base font-medium text-foreground">Total</span>
+            <span className="text-lg font-semibold text-foreground">
+              {formatAmount(displayTotal, currencyCode)}
+            </span>
+          </div>
+        </>
+      )}
+
+      {/* Item count */}
+      <p className="text-sm text-muted-foreground">
+        {itemCount} {itemCount === 1 ? "item" : "items"} in cart
+      </p>
+
+      {/* Shipping note */}
+      <p className="text-xs text-muted-foreground">
+        Shipping and taxes calculated at checkout
+      </p>
+
+      {/* Checkout button */}
+      <Button
+        onClick={onCheckout}
+        size="lg"
+        className="w-full"
+        disabled={itemCount === 0}
+      >
+        Proceed to Checkout
+      </Button>
+
+      {/* Continue shopping */}
+      <Button variant="outline" size="lg" className="w-full" asChild>
+        <a href="/products">Continue Shopping</a>
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+export { CartDrawer } from './cart-drawer';
+export type { CartDrawerProps } from './cart-drawer';
+
+export { CartItem } from './cart-item';
+export type { CartItemProps } from './cart-item';
+
+export { CartSummary } from './cart-summary';
+export type { CartSummaryProps } from './cart-summary';
+
+export { CartIcon } from './cart-icon';
+export type { CartIconProps } from './cart-icon';
+
+export { PromoCodeInput } from './promo-code-input';
+export type { PromoCodeInputProps } from './promo-code-input';
+
+export { ShippingEstimator } from './shipping-estimator';
+export type { ShippingEstimatorProps, ShippingOption } from './shipping-estimator';

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

@@ -0,0 +1,121 @@
+"use client";
+
+import { useState } from "react";
+import { Tag, Check, X } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export interface PromoCodeInputProps {
+  onApply: (code: string) => Promise<{ success: boolean; message?: string }>;
+  appliedCode?: string;
+  onRemove?: () => void;
+  className?: string;
+}
+
+/**
+ * PromoCodeInput - Discount code input with validation
+ */
+export function PromoCodeInput({
+  onApply,
+  appliedCode,
+  onRemove,
+  className,
+}: PromoCodeInputProps) {
+  const [code, setCode] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const handleApply = async () => {
+    if (!code.trim()) return;
+
+    setIsLoading(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      const result = await onApply(code.trim());
+      
+      if (result.success) {
+        setSuccess(result.message || "Promo code applied successfully!");
+        setCode("");
+      } else {
+        setError(result.message || "Invalid promo code");
+      }
+    } catch (err) {
+      setError("Failed to apply promo code");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleRemove = () => {
+    if (onRemove) {
+      onRemove();
+      setSuccess(null);
+      setError(null);
+    }
+  };
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {/* Applied code display */}
+      {appliedCode ? (
+        <div className="flex items-center justify-between rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-800 dark:bg-green-950">
+          <div className="flex items-center gap-2">
+            <Check className="h-4 w-4 text-green-600 dark:text-green-400" />
+            <span className="text-sm font-medium text-green-900 dark:text-green-100">
+              {appliedCode}
+            </span>
+          </div>
+          {onRemove && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleRemove}
+              className="h-6 w-6 p-0 text-green-600 hover:text-green-700 dark:text-green-400"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      ) : (
+        <>
+          {/* Input */}
+          <div className="flex gap-2">
+            <div className="relative flex-1">
+              <Tag className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                type="text"
+                placeholder="Enter promo code"
+                value={code}
+                onChange={(e) => setCode(e.target.value.toUpperCase())}
+                onKeyDown={(e) => e.key === "Enter" && handleApply()}
+                disabled={isLoading}
+                className="pl-9"
+              />
+            </div>
+            <Button
+              onClick={handleApply}
+              disabled={!code.trim() || isLoading}
+              size="default"
+            >
+              {isLoading ? "Applying..." : "Apply"}
+            </Button>
+          </div>
+
+          {/* Messages */}
+          {error && (
+            <p className="text-sm text-destructive">{error}</p>
+          )}
+          {success && (
+            <p className="text-sm text-green-600 dark:text-green-400">
+              {success}
+            </p>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,162 @@
+"use client";
+
+import { useState } from "react";
+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 { cn } from "@/lib/utils";
+
+export interface ShippingOption {
+  id: string;
+  name: string;
+  price: number;
+  estimatedDays: string;
+}
+
+export interface ShippingEstimatorProps {
+  onEstimate: (
+    country: string,
+    postalCode: string
+  ) => Promise<ShippingOption[]>;
+  onSelect?: (option: ShippingOption) => void;
+  selectedOption?: ShippingOption;
+  className?: string;
+}
+
+/**
+ * ShippingEstimator - Calculate shipping costs
+ */
+export function ShippingEstimator({
+  onEstimate,
+  onSelect,
+  selectedOption,
+  className,
+}: ShippingEstimatorProps) {
+  const [country, setCountry] = useState("PL");
+  const [postalCode, setPostalCode] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [options, setOptions] = useState<ShippingOption[]>([]);
+  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" },
+  ];
+
+  const handleEstimate = async () => {
+    if (!postalCode.trim()) {
+      setError("Please enter a postal code");
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    setOptions([]);
+
+    try {
+      const result = await onEstimate(country, postalCode.trim());
+      setOptions(result);
+      
+      if (result.length === 0) {
+        setError("No shipping options available for this location");
+      }
+    } catch (err) {
+      setError("Failed to calculate shipping");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const formatPrice = (amount: number) => {
+    return new Intl.NumberFormat("pl-PL", {
+      style: "currency",
+      currency: "PLN",
+    }).format(amount);
+  };
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* Header */}
+      <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
+        </h3>
+      </div>
+
+      {/* Form */}
+      <div className="space-y-3">
+        <Select
+          value={country}
+          onChange={(e) => setCountry(e.target.value)}
+          label="Country"
+          options={countries}
+        />
+
+        <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"
+              value={postalCode}
+              onChange={(e) => setPostalCode(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleEstimate()}
+              disabled={isLoading}
+              className="pl-9"
+            />
+          </div>
+          <Button
+            onClick={handleEstimate}
+            disabled={!postalCode.trim() || isLoading}
+          >
+            {isLoading ? "Calculating..." : "Calculate"}
+          </Button>
+        </div>
+
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </div>
+
+      {/* Shipping options */}
+      {options.length > 0 && (
+        <div className="space-y-2">
+          <p className="text-sm font-medium text-foreground">
+            Available shipping options:
+          </p>
+          <div className="space-y-2">
+            {options.map((option) => (
+              <button
+                key={option.id}
+                onClick={() => onSelect?.(option)}
+                className={cn(
+                  "w-full rounded-lg border p-3 text-left transition-colors",
+                  selectedOption?.id === option.id
+                    ? "border-primary bg-primary/5"
+                    : "border-border hover:border-primary"
+                )}
+              >
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm font-medium text-foreground">
+                      {option.name}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      Estimated delivery: {option.estimatedDays}
+                    </p>
+                  </div>
+                  <p className="text-sm font-semibold text-foreground">
+                    {option.price === 0 ? "FREE" : formatPrice(option.price)}
+                  </p>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,25 @@
+/**
+ * Checkout Components
+ *
+ * Components for the checkout flow.
+ */
+
+export {
+  TaxBreakdown,
+  TaxSummaryLine,
+  type TaxBreakdownProps,
+  type TaxLine,
+  type Money,
+} from "./tax-breakdown";
+
+export {
+  PaymentMethodCard,
+  type PaymentMethodCardProps,
+  type PaymentMethod,
+  type PaymentMethodType,
+} from "./payment-method-card";
+
+export {
+  PaymentStep,
+  type PaymentStepProps,
+} from "./payment-step";

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

@@ -0,0 +1,187 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { CreditCard, Building2, Wallet, Banknote, Check, Smartphone } from "lucide-react";
+
+/**
+ * Payment method type enum (matches GraphQL PaymentMethodType)
+ * Based on actual payment providers supported in the system
+ */
+export type PaymentMethodType =
+  | "CARD"
+  | "BLIK"
+  | "BANK_TRANSFER"
+  | "CASH_ON_DELIVERY"
+  | "APPLE_PAY"
+  | "GOOGLE_PAY"
+  | "PAYPAL"
+  | "OTHER";
+
+/**
+ * Payment method interface matching GraphQL PaymentMethod type
+ */
+export interface PaymentMethod {
+  id: string;
+  name: string;
+  provider: string;
+  type: PaymentMethodType;
+  icon?: string | null;
+  description?: string | null;
+  isDefault: boolean;
+  supportedCurrencies?: string[] | null;
+  position: number;
+}
+
+export interface PaymentMethodCardProps {
+  method: PaymentMethod;
+  selected: boolean;
+  onSelect: (method: PaymentMethod) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * Get icon component based on payment method type
+ * Requirements: R23.3
+ */
+function getPaymentTypeIcon(type: PaymentMethodType) {
+  switch (type) {
+    case "CARD":
+      return CreditCard;
+    case "BLIK":
+      return Smartphone;
+    case "BANK_TRANSFER":
+      return Building2;
+    case "CASH_ON_DELIVERY":
+      return Banknote;
+    case "APPLE_PAY":
+    case "GOOGLE_PAY":
+    case "PAYPAL":
+      return Wallet;
+    case "OTHER":
+    default:
+      return CreditCard;
+  }
+}
+
+/**
+ * Get human-readable label for payment type
+ */
+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;
+  }
+}
+
+/**
+ * PaymentMethodCard - Selectable payment method card
+ *
+ * Features:
+ * - Shows payment method name, provider, and icon
+ * - Visual selection state with ring
+ * - Default badge for default payment method
+ * - Type-based fallback icon
+ *
+ * Requirements: R23.1, R23.3
+ */
+export function PaymentMethodCard({
+  method,
+  selected,
+  onSelect,
+  disabled = false,
+  className,
+}: PaymentMethodCardProps) {
+  const Icon = getPaymentTypeIcon(method.type);
+
+  return (
+    <button
+      type="button"
+      onClick={() => !disabled && onSelect(method)}
+      disabled={disabled}
+      className={cn(
+        "relative flex items-center gap-4 w-full p-4 rounded-lg border text-left transition-all",
+        selected
+          ? "border-primary bg-primary/5 ring-2 ring-primary ring-offset-2"
+          : "border-border bg-background hover:border-primary/50 hover:bg-muted/50",
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      )}
+    >
+      {/* Payment Icon */}
+      <div
+        className={cn(
+          "flex items-center justify-center w-12 h-12 rounded-lg",
+          selected ? "bg-primary/10" : "bg-muted"
+        )}
+      >
+        {method.icon ? (
+          <img
+            src={method.icon}
+            alt={method.name}
+            className="w-8 h-8 object-contain"
+            onError={(e) => {
+              // Fallback to icon if image fails to load
+              e.currentTarget.style.display = "none";
+              e.currentTarget.nextElementSibling?.classList.remove("hidden");
+            }}
+          />
+        ) : null}
+        <Icon
+          className={cn(
+            "w-6 h-6",
+            method.icon ? "hidden" : "",
+            selected ? "text-primary" : "text-muted-foreground"
+          )}
+        />
+      </div>
+
+      {/* Payment Info */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="font-medium text-foreground truncate">
+            {method.name}
+          </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
+            </span>
+          )}
+        </div>
+        <p className="text-sm text-muted-foreground truncate">
+          {method.description || getPaymentTypeLabel(method.type)}
+        </p>
+      </div>
+
+      {/* Selection Indicator */}
+      <div
+        className={cn(
+          "flex items-center justify-center w-5 h-5 rounded-full border-2 transition-colors",
+          selected
+            ? "border-primary bg-primary text-primary-foreground"
+            : "border-muted-foreground/30"
+        )}
+      >
+        {selected && <Check className="w-3 h-3" />}
+      </div>
+    </button>
+  );
+}
+
+export default PaymentMethodCard;