@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/order/tracking-timeline.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import { CheckCircle, Circle, Package, Truck, Home } from "lucide-react";
+
+export interface TrackingEvent {
+  id: string;
+  status: string;
+  description: string;
+  location?: string;
+  timestamp: string;
+  isCompleted: boolean;
+}
+
+export interface TrackingTimelineProps {
+  events: TrackingEvent[];
+  className?: string;
+}
+
+/**
+ * TrackingTimeline - Display shipment tracking timeline
+ */
+export function TrackingTimeline({
+  events,
+  className = "",
+}: TrackingTimelineProps) {
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleString("pl-PL", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  const getStatusIcon = (status: string, isCompleted: boolean) => {
+    const iconClass = isCompleted
+      ? "text-green-600"
+      : "text-muted-foreground";
+
+    switch (status.toLowerCase()) {
+      case "ordered":
+      case "processing":
+        return <Package className={`h-5 w-5 ${iconClass}`} />;
+      case "shipped":
+      case "in_transit":
+        return <Truck className={`h-5 w-5 ${iconClass}`} />;
+      case "delivered":
+        return <Home className={`h-5 w-5 ${iconClass}`} />;
+      default:
+        return isCompleted ? (
+          <CheckCircle className="h-5 w-5 text-green-600" />
+        ) : (
+          <Circle className="h-5 w-5 text-muted-foreground" />
+        );
+    }
+  };
+
+  if (events.length === 0) {
+    return (
+      <div className="rounded-lg border border-border bg-muted/50 p-8 text-center">
+        <p className="text-muted-foreground">No tracking information available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`space-y-6 ${className}`}>
+      {events.map((event, index) => (
+        <div key={event.id} className="relative flex gap-4">
+          {/* Timeline Line */}
+          {index < events.length - 1 && (
+            <div
+              className={`absolute left-[10px] top-8 h-full w-0.5 ${
+                event.isCompleted ? "bg-green-600" : "bg-border"
+              }`}
+            />
+          )}
+
+          {/* Status Icon */}
+          <div
+            className={`relative z-10 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full ${
+              event.isCompleted
+                ? "bg-green-100 dark:bg-green-900/30"
+                : "bg-muted"
+            }`}
+          >
+            {getStatusIcon(event.status, event.isCompleted)}
+          </div>
+
+          {/* Event Details */}
+          <div className="flex-1 pb-8">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <h3
+                  className={`font-semibold ${
+                    event.isCompleted
+                      ? "text-foreground"
+                      : "text-muted-foreground"
+                  }`}
+                >
+                  {event.status}
+                </h3>
+                <p
+                  className={`mt-1 text-sm ${
+                    event.isCompleted
+                      ? "text-muted-foreground"
+                      : "text-muted-foreground/70"
+                  }`}
+                >
+                  {event.description}
+                </p>
+                {event.location && (
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    📍 {event.location}
+                  </p>
+                )}
+              </div>
+              <time
+                className={`text-sm ${
+                  event.isCompleted
+                    ? "text-muted-foreground"
+                    : "text-muted-foreground/70"
+                }`}
+              >
+                {formatDate(event.timestamp)}
+              </time>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export interface MilestoneTimelineProps {
+  milestones: {
+    label: string;
+    status: "completed" | "current" | "pending";
+    date?: string;
+  }[];
+  className?: string;
+}
+
+/**
+ * MilestoneTimeline - Simplified milestone-based tracking
+ */
+export function MilestoneTimeline({
+  milestones,
+  className = "",
+}: MilestoneTimelineProps) {
+  return (
+    <div className={`flex items-center justify-between ${className}`}>
+      {milestones.map((milestone, index) => (
+        <div key={index} className="flex flex-1 items-center">
+          <div className="flex flex-col items-center">
+            {/* Milestone Icon */}
+            <div
+              className={`flex h-10 w-10 items-center justify-center rounded-full ${
+                milestone.status === "completed"
+                  ? "bg-green-600 text-white"
+                  : milestone.status === "current"
+                  ? "bg-primary text-white"
+                  : "bg-muted text-muted-foreground"
+              }`}
+            >
+              {milestone.status === "completed" ? (
+                <CheckCircle className="h-5 w-5" />
+              ) : (
+                <Circle className="h-5 w-5" />
+              )}
+            </div>
+
+            {/* Milestone Label */}
+            <p
+              className={`mt-2 text-center text-sm font-medium ${
+                milestone.status === "pending"
+                  ? "text-muted-foreground"
+                  : "text-foreground"
+              }`}
+            >
+              {milestone.label}
+            </p>
+
+            {/* Milestone Date */}
+            {milestone.date && (
+              <p className="mt-1 text-xs text-muted-foreground">
+                {new Date(milestone.date).toLocaleDateString("pl-PL")}
+              </p>
+            )}
+          </div>
+
+          {/* Connecting Line */}
+          {index < milestones.length - 1 && (
+            <div
+              className={`mx-2 h-0.5 flex-1 ${
+                milestone.status === "completed" ? "bg-green-600" : "bg-border"
+              }`}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,161 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { ShoppingCart, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { cn } from "@/lib/utils";
+import { useCartActions } from "@/hooks/use-cart-actions";
+
+export interface AddToCartButtonProps {
+  // Product/Variant info
+  variantId: string;
+  productId: string;
+  productHandle?: string;
+  productTitle: string;
+  variantTitle: string;
+  price: {
+    amount: string;
+    currencyCode: string;
+  };
+  image?: {
+    url: string;
+    altText?: string | null;
+  } | null;
+  available?: boolean;
+  
+  // UI props
+  quantity?: number;
+  disabled?: boolean;
+  className?: string;
+  size?: "sm" | "md" | "lg";
+  fullWidth?: boolean;
+  
+  // Optional custom handler (overrides default GraphQL behavior)
+  onAddToCart?: (variantId: string, quantity: number) => Promise<void>;
+}
+
+/**
+ * AddToCartButton - Add product to cart with GraphQL integration
+ * 
+ * Automatically handles:
+ * - Cart creation if needed
+ * - Adding to GraphQL cart
+ * - Updating local store for immediate UI feedback
+ * - Error handling with toast notifications
+ * 
+ * @example
+ * ```tsx
+ * <AddToCartButton
+ *   variantId={selectedVariant.id}
+ *   productId={product.id}
+ *   productHandle={product.handle}
+ *   productTitle={product.title}
+ *   variantTitle={selectedVariant.title}
+ *   price={selectedVariant.price}
+ *   image={selectedVariant.image}
+ *   quantity={quantity}
+ * />
+ * ```
+ */
+export function AddToCartButton({
+  variantId,
+  productId,
+  productHandle,
+  productTitle,
+  variantTitle,
+  price,
+  image,
+  available = true,
+  quantity = 1,
+  disabled = false,
+  onAddToCart,
+  className,
+  size = "md",
+  fullWidth = false,
+}: AddToCartButtonProps) {
+  const [isAdded, setIsAdded] = useState(false);
+  const { addToCart, isLoading } = useCartActions();
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Cleanup timeout on unmount to prevent memory leak
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleClick = async () => {
+    if (disabled || isLoading) return;
+
+    try {
+      // Use custom handler if provided, otherwise use GraphQL integration
+      if (onAddToCart) {
+        await onAddToCart(variantId, quantity);
+      } else {
+        await addToCart({
+          variantId,
+          productId,
+          productHandle,
+          productTitle,
+          variantTitle,
+          price,
+          image,
+          available,
+          quantity,
+        });
+      }
+      
+      setIsAdded(true);
+
+      // Clear any existing timeout
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      // Reset "added" state after 2 seconds
+      timeoutRef.current = setTimeout(() => {
+        setIsAdded(false);
+      }, 2000);
+    } catch (error) {
+      console.error("Failed to add to cart:", error);
+      // Error toast is handled by useCartActions
+    }
+  };
+
+  const buttonSize = size === "md" ? "default" : size;
+
+  return (
+    <Button
+      type="button"
+      onClick={handleClick}
+      disabled={disabled || isLoading || !available}
+      size={buttonSize}
+      className={cn(
+        "relative transition-all",
+        fullWidth && "w-full",
+        isAdded && "bg-green-600 hover:bg-green-700",
+        className
+      )}
+    >
+      {isLoading ? (
+        <>
+          <Spinner size="sm" className="mr-2" />
+          Adding...
+        </>
+      ) : isAdded ? (
+        <>
+          <Check className="mr-2 h-5 w-5" />
+          Added to Cart
+        </>
+      ) : (
+        <>
+          <ShoppingCart className="mr-2 h-5 w-5" />
+          {!available ? "Out of Stock" : "Add to Cart"}
+        </>
+      )}
+    </Button>
+  );
+}

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

@@ -0,0 +1,250 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Tag, LogIn, TrendingDown } from "lucide-react";
+import Link from "next/link";
+
+/**
+ * Types matching GraphQL schema
+ */
+export interface Money {
+  amount: string;
+  currencyCode: string;
+}
+
+export interface CustomerGroup {
+  id: string;
+  name: string;
+  code: string;
+  discountPercent: number;
+}
+
+export interface B2BVariantPricing {
+  retailPrice: Money;
+  yourPrice: Money;
+  savings: Money;
+  savingsPercent: number;
+  hasGroupDiscount: boolean;
+  appliedGroup?: CustomerGroup;
+  tierName?: string;
+}
+
+export interface B2BPriceDisplay {
+  pricing: B2BVariantPricing;
+  isAuthenticated: boolean;
+  guestMessage?: string;
+}
+
+export interface B2BPriceDisplayProps {
+  priceData: B2BPriceDisplay;
+  showRetailPrice?: boolean;
+  showSavings?: boolean;
+  loginUrl?: string;
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+/**
+ * B2BPriceDisplay - Display B2B pricing with group discounts
+ *
+ * Features:
+ * - Shows retail vs your price comparison
+ * - Displays savings amount and percentage
+ * - Shows applied customer group
+ * - Login prompt for guests
+ *
+ * Requirements: R37.2, R37.5
+ */
+export function B2BPriceDisplayComponent({
+  priceData,
+  showRetailPrice = true,
+  showSavings = true,
+  loginUrl = "/auth/login",
+  className,
+  size = "md",
+}: B2BPriceDisplayProps) {
+  const { pricing, isAuthenticated, guestMessage } = priceData;
+
+  const formatPrice = (money: Money) => {
+    const amount = parseFloat(money.amount);
+    return new Intl.NumberFormat("pl-PL", {
+      style: "currency",
+      currency: money.currencyCode,
+    }).format(amount);
+  };
+
+  const textSizes = {
+    sm: {
+      price: "text-lg",
+      retail: "text-sm",
+      savings: "text-xs",
+      badge: "text-xs px-1.5 py-0.5",
+    },
+    md: {
+      price: "text-2xl",
+      retail: "text-base",
+      savings: "text-sm",
+      badge: "text-xs px-2 py-1",
+    },
+    lg: {
+      price: "text-3xl",
+      retail: "text-lg",
+      savings: "text-sm",
+      badge: "text-sm px-2 py-1",
+    },
+  };
+
+  const sizes = textSizes[size];
+
+  // Guest view - show retail price with login prompt
+  if (!isAuthenticated) {
+    return (
+      <div className={cn("space-y-2", className)}>
+        {/* Retail price */}
+        <div>
+          <p className={cn("font-bold text-foreground", sizes.price)}>
+            {formatPrice(pricing.retailPrice)}
+          </p>
+        </div>
+
+        {/* Login prompt */}
+        {guestMessage && (
+          <Link
+            href={loginUrl}
+            className={cn(
+              "inline-flex items-center gap-1.5 text-primary hover:underline",
+              sizes.savings
+            )}
+          >
+            <LogIn className="h-3.5 w-3.5" />
+            {guestMessage}
+          </Link>
+        )}
+      </div>
+    );
+  }
+
+  // Authenticated view with group discount
+  if (pricing.hasGroupDiscount) {
+    return (
+      <div className={cn("space-y-2", className)}>
+        {/* Your price */}
+        <div className="flex items-baseline gap-2">
+          <p className={cn("font-bold text-primary", sizes.price)}>
+            {formatPrice(pricing.yourPrice)}
+          </p>
+
+          {/* Group badge */}
+          {pricing.appliedGroup && (
+            <span
+              className={cn(
+                "inline-flex items-center gap-1 rounded-full bg-primary/10 text-primary font-medium",
+                sizes.badge
+              )}
+            >
+              <Tag className="h-3 w-3" />
+              {pricing.appliedGroup.name}
+            </span>
+          )}
+        </div>
+
+        {/* Retail price (crossed out) */}
+        {showRetailPrice && (
+          <p
+            className={cn(
+              "text-muted-foreground line-through",
+              sizes.retail
+            )}
+          >
+            Retail: {formatPrice(pricing.retailPrice)}
+          </p>
+        )}
+
+        {/* Savings */}
+        {showSavings && parseFloat(pricing.savings.amount) > 0 && (
+          <div
+            className={cn(
+              "flex items-center gap-1.5 text-green-600",
+              sizes.savings
+            )}
+          >
+            <TrendingDown className="h-3.5 w-3.5" />
+            <span>
+              You save {formatPrice(pricing.savings)} (
+              {pricing.savingsPercent.toFixed(0)}% off)
+            </span>
+          </div>
+        )}
+
+        {/* Tier name */}
+        {pricing.tierName && (
+          <p className={cn("text-muted-foreground", sizes.savings)}>
+            {pricing.tierName} pricing
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  // Authenticated view without group discount
+  return (
+    <div className={cn("space-y-1", className)}>
+      <p className={cn("font-bold text-foreground", sizes.price)}>
+        {formatPrice(pricing.yourPrice)}
+      </p>
+    </div>
+  );
+}
+
+/**
+ * B2BPriceBadge - Compact badge showing B2B discount
+ */
+export function B2BPriceBadge({
+  group,
+  className,
+}: {
+  group: CustomerGroup;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 rounded-full bg-primary/10 text-primary text-xs font-medium px-2 py-0.5",
+        className
+      )}
+    >
+      <Tag className="h-3 w-3" />
+      {group.discountPercent > 0
+        ? `${group.discountPercent}% off`
+        : group.name}
+    </span>
+  );
+}
+
+/**
+ * WholesalePrompt - Prompt for guests to log in for wholesale pricing
+ */
+export function WholesalePrompt({
+  loginUrl = "/auth/login",
+  message = "Log in for wholesale pricing",
+  className,
+}: {
+  loginUrl?: string;
+  message?: string;
+  className?: string;
+}) {
+  return (
+    <Link
+      href={loginUrl}
+      className={cn(
+        "inline-flex items-center gap-1.5 text-sm text-primary hover:underline",
+        className
+      )}
+    >
+      <LogIn className="h-4 w-4" />
+      {message}
+    </Link>
+  );
+}
+
+export default B2BPriceDisplayComponent;