@kasuvia/sdk 0.0.8 → 0.0.9

package/src/components/orders/DeliverableReviewer.tsx

@@ -0,0 +1,139 @@
+"use client";
+import React, { useState } from 'react'
+import { useApproveBespokeDeliverable, useRequestBespokeRevision } from '../../hooks/use-bespoke-availability'
+import type { Order } from '../../types/store'
+import { logger } from '../../utils/logger'
+
+export interface DeliverableReviewerProps {
+  order: Order
+  className?: string
+}
+
+/**
+ * REAL BUG FIXED (2026-09-20): rebuilt entirely — this used to fetch a
+ * "/service/projects/{order_id}/deliverables/" list that doesn't exist
+ * anywhere in the backend. The real bespoke deliverable model is a SINGLE
+ * proofing record per order (BespokeFulfillmentResponse, embedded as
+ * `order.bespoke_fulfillment` and flattened onto the SDK's Order type as
+ * `bespoke_*` fields by normaliseStorefrontOrder), not a fetchable list —
+ * there is no separate GET endpoint for it at all. Approve/request-revision
+ * now call the real endpoints (POST /orders/{id}/bespoke/approve,
+ * .../request-revision) instead of a fictional deliverable-id-scoped route.
+ */
+export function DeliverableReviewer({ order, className = "space-y-4 p-4 border rounded-xl bg-muted/50" }: DeliverableReviewerProps) {
+  const [revisionNotes, setRevisionNotes] = useState('')
+  const [showRevisionForm, setShowRevisionForm] = useState(false)
+
+  const approveMutation = useApproveBespokeDeliverable()
+  const revisionMutation = useRequestBespokeRevision()
+
+  if (!order.bespoke_deliverable_submitted_at) {
+    return (
+      <div className={className}>
+        <h4 className="text-xs font-bold uppercase tracking-wider text-foreground">Deliverable</h4>
+        <p className="text-xs text-muted-foreground py-4 text-center">
+          The seller hasn't submitted a deliverable for review yet.
+        </p>
+      </div>
+    )
+  }
+
+  const awaitingApproval = order.bespoke_status === 'awaiting_approval'
+
+  const handleApprove = async () => {
+    try {
+      await approveMutation.mutateAsync(order.id)
+    } catch (error) {
+      logger.error(error)
+    }
+  }
+
+  const handleRequestRevision = async () => {
+    if (!revisionNotes.trim() || revisionNotes.trim().length < 10) return
+    try {
+      await revisionMutation.mutateAsync({ orderId: order.id, notes: revisionNotes.trim() })
+      setShowRevisionForm(false)
+      setRevisionNotes('')
+    } catch (error) {
+      logger.error(error)
+    }
+  }
+
+  return (
+    <div className={className}>
+      <div className="flex justify-between items-center">
+        <h4 className="text-xs font-bold uppercase tracking-wider text-foreground">Deliverable</h4>
+        {order.bespoke_status && (
+          <span className={`px-2 py-0.5 rounded text-[10px] font-semibold uppercase ${
+            order.bespoke_status === 'confirmed' ? 'bg-primary/10 text-primary' :
+            order.bespoke_status === 'awaiting_approval' ? 'bg-blue-500/10 text-blue-600 dark:text-blue-400' :
+            'bg-amber-500/10 text-amber-600 dark:text-amber-400'
+          }`}>
+            {order.bespoke_status.replace('_', ' ')}
+          </span>
+        )}
+      </div>
+
+      <div className="p-3 bg-card border rounded-lg space-y-2">
+        {order.bespoke_deliverable_url && (
+          <a
+            href={order.bespoke_deliverable_url}
+            target="_blank"
+            rel="noreferrer"
+            className="text-xs text-primary hover:underline flex items-center gap-1"
+          >
+            📎 View Deliverable
+          </a>
+        )}
+
+        {order.bespoke_deliverable_notes && (
+          <p className="text-xs text-muted-foreground">{order.bespoke_deliverable_notes}</p>
+        )}
+
+        {(order.bespoke_revision_count ?? 0) > 0 && (
+          <p className="text-[10px] text-muted-foreground">Revisions requested: {order.bespoke_revision_count}</p>
+        )}
+
+        {awaitingApproval && (
+          <div className="flex items-center gap-2 pt-2">
+            <button
+              type="button"
+              onClick={handleApprove}
+              disabled={approveMutation.isPending}
+              className="px-3 py-1.5 bg-primary text-primary-foreground text-xs font-medium rounded hover:bg-primary/90 disabled:opacity-50"
+            >
+              {approveMutation.isPending ? 'Approving…' : 'Approve Deliverable'}
+            </button>
+            <button
+              type="button"
+              onClick={() => setShowRevisionForm(!showRevisionForm)}
+              className="px-3 py-1.5 border text-xs font-medium rounded hover:bg-muted"
+            >
+              Request Revision
+            </button>
+          </div>
+        )}
+
+        {showRevisionForm && (
+          <div className="pt-2 space-y-2">
+            <textarea
+              rows={2}
+              value={revisionNotes}
+              onChange={(e) => setRevisionNotes(e.target.value)}
+              placeholder="Explain what needs to change (at least 10 characters)..."
+              className="w-full p-2 border rounded text-xs bg-transparent"
+            />
+            <button
+              type="button"
+              onClick={handleRequestRevision}
+              disabled={revisionMutation.isPending || revisionNotes.trim().length < 10}
+              className="px-3 py-1 bg-amber-600 text-white text-xs font-medium rounded hover:bg-amber-700 disabled:opacity-50"
+            >
+              {revisionMutation.isPending ? 'Submitting…' : 'Submit Revision Request'}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/orders/index.ts

@@ -0,0 +1 @@
+export * from './DeliverableReviewer'

package/src/components/product/ProductCard.tsx

@@ -0,0 +1,350 @@
+"use client";
+import React, { useState, useRef, useId } from 'react'
+import type { Product } from '../../types/store'
+import { useCart } from '../../hooks/use-cart'
+import { formatPrice } from '../../utils/format'
+import { SmartImage } from '../shared/SmartImage'
+
+export interface ProductCardProps {
+  product: Product
+  onSelectProduct?: (product: Product) => void
+  onWishlistToggle?: (product: Product, e: React.MouseEvent) => void
+  isWishlistSaved?: boolean
+  showWishlistButton?: boolean
+  priority?: boolean
+  className?: string
+  /** Sizing/aspect-ratio classes for the image's container (e.g. "aspect-square").
+   * Kept separate from `imageClassName` because SmartImage renders the image
+   * in `fill` mode — sizing has to live on the container, not the <img>. */
+  imageContainerClassName?: string
+  imageClassName?: string
+  titleClassName?: string
+  priceClassName?: string
+  buttonClassName?: string
+  enableImageCarousel?: boolean
+  showCarouselDots?: boolean
+  showCarouselArrows?: boolean
+  activeDotClassName?: string
+  dotClassName?: string
+  formatPriceFn?: (price: number) => string
+  /** Rendered top-left over the image. Falls back to a plain product-type
+   * badge when omitted — pass your own (e.g. New/Popular/On Sale badges) to
+   * replace it entirely. */
+  badgeSlot?: React.ReactNode
+  /**
+   * Built-in star-rating row (product.average_rating / rating_count — real
+   * platform fields, synced from kasuvia-crm's review pipeline). On by
+   * default when a product actually has a rating; a storefront with no use
+   * for it, or that wants to build its own, can pass `showRating={false}`.
+   */
+  showRating?: boolean
+  ratingClassName?: string
+  /**
+   * Generic composable slot rendered between the price row and the CTA
+   * button — for "and many more" (stock urgency, shipping badges, a custom
+   * promo line, anything else a specific storefront wants) without forking
+   * this component. Renders nothing by default.
+   */
+  footerSlot?: React.ReactNode
+}
+
+function StarIcon({ half, gradientId }: { half?: boolean; gradientId: string }) {
+  return (
+    <svg viewBox="0 0 20 20" className="w-3.5 h-3.5" aria-hidden="true">
+      {half ? (
+        <>
+          <defs>
+            <linearGradient id={gradientId}>
+              <stop offset="50%" stopColor="currentColor" />
+              <stop offset="50%" stopColor="transparent" stopOpacity="1" />
+            </linearGradient>
+          </defs>
+          <path
+            fill={`url(#${gradientId})`}
+            stroke="currentColor"
+            strokeWidth="1"
+            d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.9l-5.2 2.73.99-5.8-4.21-4.09 5.82-.85L10 1.5z"
+          />
+        </>
+      ) : (
+        <path
+          fill="currentColor"
+          d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.9l-5.2 2.73.99-5.8-4.21-4.09 5.82-.85L10 1.5z"
+        />
+      )}
+    </svg>
+  )
+}
+
+/** Renders 5 stars for a 0-5 `average_rating`, including a half star when
+ * the fractional part is >= 0.25 and < 0.75 (standard rounding convention
+ * for star displays — avoids a misleading full/empty jump at the midpoint).
+ * `idPrefix` (from the caller's own `useId()`) keeps the half-star gradient's
+ * `<linearGradient id>` unique per card instance — several cards with a
+ * half star can render on the same page (a listing grid), and duplicate DOM
+ * ids are invalid HTML even though browsers happen to render them right. */
+function StarRow({ rating, idPrefix }: { rating: number; idPrefix: string }) {
+  const stars = [];
+  for (let i = 1; i <= 5; i++) {
+    const diff = rating - (i - 1);
+    if (diff >= 0.75) stars.push(<StarIcon key={i} gradientId={`${idPrefix}-star-${i}`} />);
+    else if (diff >= 0.25) stars.push(<StarIcon key={i} half gradientId={`${idPrefix}-star-${i}`} />);
+    else stars.push(<svg key={i} viewBox="0 0 20 20" className="w-3.5 h-3.5 text-muted-foreground/30" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.9l-5.2 2.73.99-5.8-4.21-4.09 5.82-.85L10 1.5z" /></svg>);
+  }
+  return <>{stars}</>;
+}
+
+export function ProductCard({
+  product,
+  onSelectProduct,
+  onWishlistToggle,
+  isWishlistSaved = false,
+  showWishlistButton = false,
+  priority = false,
+  className = "flex flex-col h-full rounded-xl border bg-card overflow-hidden shadow-sm hover:shadow-md transition-shadow group",
+  imageContainerClassName = "w-full aspect-square",
+  imageClassName = "transition-transform duration-500 group-hover:scale-105",
+  titleClassName = "text-base font-semibold text-foreground line-clamp-1 cursor-pointer hover:underline",
+  priceClassName = "text-lg font-bold text-foreground",
+  buttonClassName = "w-full py-2.5 px-4 bg-primary hover:bg-primary/90 text-primary-foreground text-sm font-medium rounded-lg transition-colors text-center block mt-auto",
+  enableImageCarousel = true,
+  showCarouselDots = true,
+  showCarouselArrows = true,
+  activeDotClassName = "bg-primary w-4 h-1.5 rounded-full transition-all",
+  dotClassName = "bg-white/70 hover:bg-white w-1.5 h-1.5 rounded-full transition-all",
+  formatPriceFn,
+  badgeSlot,
+  showRating = true,
+  ratingClassName = "flex items-center gap-1 text-amber-500",
+  footerSlot,
+}: ProductCardProps) {
+  const { addItem } = useCart()
+  const ratingIdPrefix = useId()
+  const [currentImageIndex, setCurrentImageIndex] = useState(0)
+  const touchStartX = useRef<number | null>(null)
+  const touchEndX = useRef<number | null>(null)
+
+  const productType = product.product_type
+  const serviceType = product.service_type || 'appointment'
+  const isConsultationRequired = product.service_requires_consultation
+  const images = product.images && product.images.length > 0 ? product.images : []
+  // Swipe-to-browse (touch) and hover arrows/dots (pointer) both gate on
+  // this — a single-image product never renders carousel affordances at all.
+  const hasMultipleImages = images.length > 1 && enableImageCarousel
+  const hasRating = showRating && product.average_rating != null && product.rating_count > 0
+
+  /**
+   * REAL BUG FIXED (2026-09-21), live-reproduced: for `service_type ===
+   * 'recurring'` this used to fall through to `addItem(product)` —
+   * silently trying to cart a SERVICE product. The real backend
+   * (kasuvia-cart-management) hard-rejects every service product from the
+   * cart outright (ErrServiceNotCartable), no sub-type exception — so this
+   * either failed with no user-facing feedback (fire-and-forget mutation,
+   * no error handling here) or, worse, looked like it might have worked.
+   * Separately, `onBookAppointment`/`onRequestQuote`/`onRequestBespoke`
+   * were dead props — no consumer in kasuvia-storefront ever passed them
+   * (confirmed by reading its actual card wrapper), so "Book Appointment"/
+   * "Get a Quote"/bespoke clicks on every product LISTING card (home page,
+   * catalog, related products, wishlist) were silent no-ops even for the
+   * sub-types that didn't try to cart. Every non-cartable type now routes
+   * to the product detail page instead, which already has the full, real
+   * flow for each one (BookingSheet, /bespoke/[slug], or an honest
+   * disabled state) — a listing card was never the right place to
+   * complete a booking/commission/quote flow inline anyway.
+   */
+  const handleCTA = () => {
+    if (productType === 'physical' || productType === 'digital') {
+      addItem(product)
+      return
+    }
+    onSelectProduct?.(product)
+  }
+
+  const getCtaText = () => {
+    if (productType === 'physical' || productType === 'digital') return 'Add to Cart'
+    if (productType === 'bespoke') return 'Start Commission'
+    if (productType === 'service') {
+      if (isConsultationRequired || serviceType === 'project') return 'Get a Quote'
+      if (serviceType === 'appointment') return 'Book Appointment'
+      return 'View Details'
+    }
+    return 'View Details'
+  }
+
+  const handleNextImage = (e?: React.MouseEvent) => {
+    e?.stopPropagation()
+    if (!hasMultipleImages) return
+    setCurrentImageIndex((prev) => (prev + 1) % images.length)
+  }
+
+  const handlePrevImage = (e?: React.MouseEvent) => {
+    e?.stopPropagation()
+    if (!hasMultipleImages) return
+    setCurrentImageIndex((prev) => (prev - 1 + images.length) % images.length)
+  }
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    if (!hasMultipleImages) return
+    touchStartX.current = e.touches[0].clientX
+  }
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    if (!hasMultipleImages) return
+    touchEndX.current = e.touches[0].clientX
+  }
+
+  const handleTouchEnd = () => {
+    if (!hasMultipleImages || touchStartX.current === null || touchEndX.current === null) return
+    const distance = touchStartX.current - touchEndX.current
+    const isSwipeLeft = distance > 40
+    const isSwipeRight = distance < -40
+
+    if (isSwipeLeft) handleNextImage()
+    else if (isSwipeRight) handlePrevImage()
+
+    touchStartX.current = null
+    touchEndX.current = null
+  }
+
+  return (
+    <div className={className}>
+      <div
+        className="relative overflow-hidden cursor-pointer group/image"
+        onClick={() => onSelectProduct?.(product)}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+      >
+        {images.length > 0 ? (
+          <SmartImage
+            src={images[currentImageIndex]}
+            alt={`${product.name} - image ${currentImageIndex + 1}`}
+            className={imageContainerClassName}
+            imageClassName={imageClassName}
+            priority={priority}
+            sizes="(min-width: 1024px) 25vw, 50vw"
+          />
+        ) : (
+          <div className={`${imageContainerClassName} flex items-center justify-center text-muted-foreground text-sm`}>
+            No Image
+          </div>
+        )}
+
+        {badgeSlot ? (
+          <div className="absolute top-2 left-2 z-10 flex flex-col gap-1">
+            {badgeSlot}
+          </div>
+        ) : (
+          <span className="absolute top-2 right-2 px-2 py-0.5 text-xs font-semibold rounded bg-black/60 text-white capitalize z-10">
+            {productType}
+          </span>
+        )}
+
+        {showWishlistButton && (
+          <button
+            type="button"
+            aria-label={isWishlistSaved ? "Remove from wishlist" : "Save to wishlist"}
+            onClick={(e) => {
+              e.stopPropagation()
+              onWishlistToggle?.(product, e)
+            }}
+            className="absolute top-2 right-2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-card/80 backdrop-blur shadow-sm hover:bg-card transition-colors"
+          >
+            <svg
+              className={`w-4 h-4 ${isWishlistSaved ? "fill-red-500 text-red-500" : "text-muted-foreground"}`}
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+            </svg>
+          </button>
+        )}
+
+        {/* Carousel controls & dots — swipe-to-browse is handled by the
+            touch handlers on this wrapper above regardless of these props;
+            these only control the visible pointer-device affordances. */}
+        {hasMultipleImages && (
+          <>
+            {showCarouselArrows && (
+              <>
+                <button
+                  type="button"
+                  aria-label="Previous image"
+                  onClick={handlePrevImage}
+                  className="absolute left-2 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full bg-black/50 hover:bg-black/75 text-white flex items-center justify-center opacity-0 group-hover/image:opacity-100 transition-opacity z-10"
+                >
+                  ‹
+                </button>
+                <button
+                  type="button"
+                  aria-label="Next image"
+                  onClick={handleNextImage}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full bg-black/50 hover:bg-black/75 text-white flex items-center justify-center opacity-0 group-hover/image:opacity-100 transition-opacity z-10"
+                >
+                  ›
+                </button>
+              </>
+            )}
+
+            {showCarouselDots && (
+              <div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex items-center gap-1 z-10 px-2 py-1 rounded-full bg-black/30 backdrop-blur-xs">
+                {images.map((_, idx) => (
+                  <button
+                    key={idx}
+                    type="button"
+                    aria-label={`Go to image ${idx + 1}`}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      setCurrentImageIndex(idx)
+                    }}
+                    className={idx === currentImageIndex ? activeDotClassName : dotClassName}
+                  />
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      <div className="p-4 flex flex-col flex-1 space-y-3">
+        <h3 className={titleClassName} onClick={() => onSelectProduct?.(product)}>
+          {product.name}
+        </h3>
+
+        {product.description && (
+          <p className="text-xs text-muted-foreground line-clamp-2">
+            {product.description}
+          </p>
+        )}
+
+        {hasRating && (
+          <div className={ratingClassName}>
+            <StarRow rating={product.average_rating!} idPrefix={ratingIdPrefix} />
+            <span className="text-xs text-muted-foreground font-medium">
+              {product.average_rating!.toFixed(1)} ({product.rating_count})
+            </span>
+          </div>
+        )}
+
+        <div className="flex items-center justify-between pt-2 mt-auto">
+          <div className={priceClassName}>
+            {formatPriceFn
+              ? formatPriceFn(product.sale_price ?? product.base_price)
+              : formatPrice(product.sale_price ?? product.base_price, product.currency)}
+          </div>
+        </div>
+
+        {footerSlot}
+
+        <button
+          type="button"
+          onClick={handleCTA}
+          className={buttonClassName}
+        >
+          {getCtaText()}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/product/ProductGrid.tsx

@@ -0,0 +1,84 @@
+"use client";
+import React from 'react'
+import { useQuery } from '@tanstack/react-query'
+import type { Product, ListParams } from '../../types/store'
+import { getStorefrontProducts } from '../../services/product.service'
+import { useSdkContext, resolveHookArgs } from '../../context/sdk-context'
+import { getCacheTier } from '../../utils/cache'
+import { ProductCard } from './ProductCard'
+import { CardSkeleton } from '../skeletons/CardSkeleton'
+
+export interface ProductGridProps {
+  params?: ListParams
+  onSelectProduct?: (product: Product) => void
+  onWishlistToggle?: (product: Product, e: React.MouseEvent) => void
+  isWishlistSavedFn?: (product: Product) => boolean
+  showWishlistButton?: boolean
+  formatPriceFn?: (price: number) => string
+  className?: string
+  cardClassName?: string
+}
+
+export function ProductGrid({
+  params,
+  onSelectProduct,
+  onWishlistToggle,
+  isWishlistSavedFn,
+  showWishlistButton = false,
+  formatPriceFn,
+  className = "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6",
+  cardClassName,
+}: ProductGridProps) {
+  // REAL BUG FIXED (2026-09-21): this called `useStorefrontProducts`, which
+  // fetched from a Next.js API route (`/api/products`) deleted earlier this
+  // session as confirmed orphaned — this component was missed by that grep
+  // since it has no consumer in kasuvia-storefront yet. Fixed to call the
+  // real GraphQL service function directly, resolving config from
+  // SdkContext the same way every other SDK hook does.
+  const ctx = useSdkContext()
+  const { config } = resolveHookArgs(undefined, undefined, ctx)
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['products', 'grid', params],
+    queryFn: () => getStorefrontProducts(config, params),
+    ...getCacheTier('medium'),
+  })
+
+  if (isLoading) {
+    return <CardSkeleton count={8} containerClassName={className} />
+  }
+
+  if (error) {
+    return (
+      <div className="text-center py-12 text-destructive">
+        Failed to load products. Please try again.
+      </div>
+    )
+  }
+
+  const products: Product[] = data?.items || []
+
+  if (products.length === 0) {
+    return (
+      <div className="text-center py-12 text-muted-foreground">
+        No products found.
+      </div>
+    )
+  }
+
+  return (
+    <div className={className}>
+      {products.map((product) => (
+        <ProductCard
+          key={product.id}
+          product={product}
+          onSelectProduct={onSelectProduct}
+          onWishlistToggle={onWishlistToggle}
+          isWishlistSaved={isWishlistSavedFn ? isWishlistSavedFn(product) : false}
+          showWishlistButton={showWishlistButton}
+          formatPriceFn={formatPriceFn}
+          className={cardClassName}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/product/index.ts

@@ -0,0 +1,2 @@
+export * from './ProductCard'
+export * from './ProductGrid'