@kasuvia/sdk 0.0.8 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kasuvia/sdk",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Kasuvia SDK - Core data fetching, authentication, and API client layer",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -20,6 +20,16 @@
       "types": "./dist/services/index.d.ts",
       "import": "./dist/services/index.mjs",
       "require": "./dist/services/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.mjs",
+      "require": "./dist/components/index.js"
+    },
+    "./config/server": {
+      "types": "./dist/config/server.d.ts",
+      "import": "./dist/config/server.mjs",
+      "require": "./dist/config/server.js"
     }
   },
   "files": [
@@ -32,21 +42,49 @@
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",
     "@tanstack/react-query": "^5.100.13",
+    "client-only": "^0.0.1",
     "graphql": "^16.14.0",
     "graphql-request": "^7.4.0",
-    "react-use-websocket": "^4.13.0",
-    "uuid": "^14.0.0",
-    "zod": "^3.24.2"
+    "server-only": "^0.0.1"
   },
   "peerDependencies": {
+    "@use-gesture/react": ">=10.0.0",
+    "framer-motion": ">=10.0.0",
+    "lucide-react": ">=0.300.0",
+    "next": ">=13.0.0",
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "sonner": ">=1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@use-gesture/react": {
+      "optional": true
+    },
+    "framer-motion": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "sonner": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "^7.4.2",
+    "@graphql-codegen/typed-document-node": "^7.1.0",
+    "@graphql-codegen/typescript": "^6.1.0",
+    "@graphql-codegen/typescript-operations": "^6.1.7",
+    "@graphql-typed-document-node/core": "^3.2.0",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@types/uuid": "^10.0.0",
+    "@use-gesture/react": "^10.3.1",
+    "framer-motion": "^12.38.0",
+    "lucide-react": "^0.475.0",
+    "next": "15.5.9",
+    "openapi-typescript": "^7.13.0",
+    "sonner": "^2.0.7",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   },
@@ -63,6 +101,8 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "type-check": "tsc --noEmit",
+    "codegen": "graphql-codegen --config codegen.ts",
+    "codegen:rest": "openapi-typescript openapi/store-management.json -o src/generated/store-openapi.ts && openapi-typescript openapi/cart-management.json -o src/generated/cart-openapi.ts && openapi-typescript openapi/auth.json -o src/generated/auth-openapi.ts && openapi-typescript openapi/payment-system.json -o src/generated/payment-openapi.ts && openapi-typescript openapi/notification-system.json -o src/generated/notification-openapi.ts && openapi-typescript openapi/cms.json -o src/generated/cms-openapi.ts && openapi-typescript openapi/crm.json -o src/generated/crm-openapi.ts && openapi-typescript openapi/media-system.json -o src/generated/media-openapi.ts",
     "clean": "rm -rf dist"
   }
 }

package/src/components/bespoke/BespokeAvailabilityBadge.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { useBespokeAvailability } from '../../hooks/use-bespoke-availability'
+
+export interface BespokeAvailabilityBadgeProps {
+  productId: string
+  className?: string
+}
+
+export function BespokeAvailabilityBadge({ productId, className = "inline-flex items-center gap-2 px-3 py-1 text-xs rounded-full font-medium" }: BespokeAvailabilityBadgeProps) {
+  const { data: availability, isLoading } = useBespokeAvailability(productId)
+
+  if (isLoading) {
+    return <div className="h-5 w-28 bg-gray-200 dark:bg-gray-800 animate-pulse rounded-full" />
+  }
+
+  if (!availability) return null
+
+  if (availability.is_available) {
+    return (
+      <span className={`${className} bg-emerald-100 dark:bg-emerald-950 text-emerald-700 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800`}>
+        <span className="w-2 h-2 rounded-full bg-emerald-500 animate-ping" />
+        {availability.available_slots} slots available this month
+      </span>
+    )
+  }
+
+  return (
+    <span className={`${className} bg-amber-100 dark:bg-amber-950 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800`}>
+      Fully booked — Next available: {availability.next_available_date ? new Date(availability.next_available_date).toLocaleDateString() : 'Next Month'}
+    </span>
+  )
+}

package/src/components/bespoke/BespokeProgressTracker.tsx

@@ -0,0 +1,58 @@
+"use client";
+import React from 'react'
+
+export type BespokeStageKey = 'received' | 'development' | 'finished' | 'dispatched'
+
+export interface BespokeProgressTrackerProps {
+  stage: BespokeStageKey
+  className?: string
+  activeStepClassName?: string
+  completedStepClassName?: string
+  inactiveStepClassName?: string
+}
+
+export function BespokeProgressTracker({
+  stage,
+  className = "flex items-center w-full my-4",
+  activeStepClassName = "bg-emerald-600 text-white font-bold",
+  completedStepClassName = "bg-emerald-500 text-white",
+  inactiveStepClassName = "border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-500",
+}: BespokeProgressTrackerProps) {
+  const stages = [
+    { key: 'received', label: 'Order Received' },
+    { key: 'development', label: 'In Development' },
+    { key: 'finished', label: 'Finished' },
+    { key: 'dispatched', label: 'Ready / Dispatched' },
+  ] as const
+
+  const currentIdx = stages.findIndex((s) => s.key === stage)
+
+  return (
+    <div className={className}>
+      {stages.map((s, i) => (
+        <div key={s.key} className="flex flex-1 flex-col items-center">
+          <div className="flex w-full items-center">
+            {i > 0 && (
+              <div className={`h-0.5 flex-1 ${i <= currentIdx ? 'bg-emerald-500' : 'bg-gray-200 dark:bg-gray-800'}`} />
+            )}
+            <div className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-semibold ${
+              i < currentIdx
+                ? completedStepClassName
+                : i === currentIdx
+                ? activeStepClassName
+                : inactiveStepClassName
+            }`}>
+              {i < currentIdx ? '✓' : i + 1}
+            </div>
+            {i < stages.length - 1 && (
+              <div className={`h-0.5 flex-1 ${i < currentIdx ? 'bg-emerald-500' : 'bg-gray-200 dark:bg-gray-800'}`} />
+            )}
+          </div>
+          <p className={`mt-2 text-center text-xs ${i === currentIdx ? 'font-semibold text-gray-900 dark:text-gray-100' : 'text-gray-500'}`}>
+            {s.label}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/bespoke/index.ts

@@ -0,0 +1,3 @@
+export * from './BespokeAvailabilityBadge'
+export * from './BespokeProgressTracker'
+

package/src/components/booking/SlotPicker.tsx

@@ -0,0 +1,97 @@
+"use client";
+import React, { useState } from 'react'
+import { useAvailableSlots } from '../../hooks/use-service-booking'
+import { formatTimeString } from '../../utils/format'
+
+export interface SlotPickerProps {
+  productId: string
+  /** A single date (YYYY-MM-DD) — the real backend checks one day at a time. */
+  date: string
+  staffId?: string
+  locationId?: string
+  onSelectSlot: (time: string) => void
+  className?: string
+  slotButtonClassName?: string
+}
+
+/**
+ * REAL BUG FIXED (2026-09-20): rebuilt against the real backend response
+ * (GET /catalog/products/{id}/available-slots — a single `date`, not a
+ * dateFrom/dateTo range; `available_slots` is a flat array of ISO time
+ * strings, not slot objects with start_time/end_time/slots_remaining, none
+ * of which the real endpoint returns).
+ */
+export function SlotPicker({
+  productId,
+  date,
+  staffId,
+  locationId,
+  onSelectSlot,
+  className = "space-y-4",
+  slotButtonClassName = "p-3 border rounded-lg text-sm text-center hover:border-primary focus:outline-none transition-colors",
+}: SlotPickerProps) {
+  const { data, isLoading, error } = useAvailableSlots(undefined, productId, date, { staffId, locationId })
+  const [selectedTime, setSelectedTime] = useState<string | null>(null)
+
+  if (isLoading) {
+    return (
+      <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 animate-pulse">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="h-12 bg-muted rounded-lg" />
+        ))}
+      </div>
+    )
+  }
+
+  if (error || !data) {
+    return (
+      <div className="text-xs text-destructive">
+        Failed to load available time slots. Please select a different date.
+      </div>
+    )
+  }
+
+  if (!data.serviceable) {
+    return (
+      <div className="text-xs text-muted-foreground py-4 text-center">
+        {data.reason || "This service isn't available for booking right now."}
+      </div>
+    )
+  }
+
+  if (data.available_slots.length === 0) {
+    return (
+      <div className="text-xs text-muted-foreground py-4 text-center">
+        No time slots available on this date.
+      </div>
+    )
+  }
+
+  return (
+    <div className={className}>
+      <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Available Time Slots</h4>
+      <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+        {data.available_slots.map((time) => {
+          const isSelected = selectedTime === time
+          return (
+            <button
+              key={time}
+              type="button"
+              onClick={() => {
+                setSelectedTime(time)
+                onSelectSlot(time)
+              }}
+              className={`${slotButtonClassName} ${
+                isSelected
+                  ? 'border-primary bg-primary/10 text-primary font-semibold'
+                  : 'border-border text-foreground'
+              }`}
+            >
+              {formatTimeString(time)}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/booking/index.ts

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

package/src/components/cart/CartItem.tsx

@@ -0,0 +1,81 @@
+"use client";
+import React from 'react'
+import type { CartItem as CartItemType } from '../../types/store'
+
+export interface CartItemProps {
+  item: CartItemType
+  onUpdateQty: (itemId: string, qty: number) => void
+  onRemove: (itemId: string) => void
+  formatPriceFn?: (price: number) => string
+  className?: string
+  imageClassName?: string
+  titleClassName?: string
+  priceClassName?: string
+  quantityGroupClassName?: string
+  buttonClassName?: string
+  removeButtonClassName?: string
+}
+
+export function CartItem({
+  item,
+  onUpdateQty,
+  onRemove,
+  formatPriceFn,
+  className = "flex items-center gap-4 py-3 border-b border-gray-100 dark:border-gray-800",
+  imageClassName = "w-16 h-16 object-cover rounded-md bg-gray-100 dark:bg-gray-800 shrink-0",
+  titleClassName = "text-sm font-medium text-gray-900 dark:text-gray-100 line-clamp-1",
+  priceClassName = "text-sm font-semibold text-gray-900 dark:text-gray-100",
+  quantityGroupClassName = "flex items-center border rounded-md border-gray-200 dark:border-gray-700",
+  buttonClassName = "px-2 py-1 text-xs hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors disabled:opacity-50",
+  removeButtonClassName = "text-xs text-red-600 hover:text-red-700 dark:text-red-400 transition-colors ml-auto",
+}: CartItemProps) {
+  return (
+    <div className={className}>
+      {item.image_url ? (
+        <img src={item.image_url} alt={item.product_name} className={imageClassName} />
+      ) : (
+        <div className={imageClassName} />
+      )}
+      <div className="flex-1 min-w-0 space-y-1">
+        <h4 className={titleClassName}>{item.product_name}</h4>
+        {item.variant_attributes && (
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            {typeof item.variant_attributes === 'string'
+              ? item.variant_attributes
+              : Object.entries(item.variant_attributes).map(([k, v]) => `${k}: ${v}`).join(', ')}
+          </p>
+        )}
+        <div className={priceClassName}>
+          {formatPriceFn ? formatPriceFn(item.unit_price * item.quantity) : `${(item as { currency?: string }).currency || ''}${item.unit_price * item.quantity}`}
+        </div>
+      </div>
+      <div className="flex flex-col items-end gap-2 shrink-0">
+        <div className={quantityGroupClassName}>
+          <button
+            type="button"
+            onClick={() => onUpdateQty(item.id, Math.max(1, item.quantity - 1))}
+            disabled={item.quantity <= 1}
+            className={buttonClassName}
+          >
+            -
+          </button>
+          <span className="px-2 text-xs font-medium">{item.quantity}</span>
+          <button
+            type="button"
+            onClick={() => onUpdateQty(item.id, item.quantity + 1)}
+            className={buttonClassName}
+          >
+            +
+          </button>
+        </div>
+        <button
+          type="button"
+          onClick={() => onRemove(item.id)}
+          className={removeButtonClassName}
+        >
+          Remove
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/cart/CartSidebar.tsx

@@ -0,0 +1,115 @@
+"use client";
+import React from 'react'
+import { useCart } from '../../hooks/use-cart'
+import { CartItem } from './CartItem'
+import { CartTypeMismatchBanner } from './CartTypeMismatchBanner'
+import { CartItemSkeleton } from '../skeletons/CartItemSkeleton'
+import { formatPrice } from '../../utils/format'
+
+export interface CartSidebarProps {
+  onCheckout?: () => void
+  onClose?: () => void
+  formatPriceFn?: (price: number) => string
+  className?: string
+  headerClassName?: string
+  titleClassName?: string
+  bodyClassName?: string
+  footerClassName?: string
+  checkoutButtonClassName?: string
+}
+
+export function CartSidebar({
+  onCheckout,
+  onClose,
+  formatPriceFn,
+  className = "flex flex-col h-full w-full max-w-md bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800 shadow-xl",
+  headerClassName = "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800",
+  titleClassName = "text-lg font-semibold text-gray-900 dark:text-gray-100",
+  bodyClassName = "flex-1 overflow-y-auto p-4 space-y-4",
+  footerClassName = "p-4 border-t border-gray-200 dark:border-gray-800 space-y-3 bg-gray-50/50 dark:bg-gray-900/50",
+  checkoutButtonClassName = "w-full py-3 px-4 bg-emerald-600 hover:bg-emerald-700 text-white font-medium rounded-lg transition-colors text-center block disabled:opacity-50",
+}: CartSidebarProps) {
+  const {
+    items,
+    count,
+    subtotal,
+    isLoading,
+    updateQty,
+    removeItem,
+    productTypeMismatch,
+    handleClearCartAndAdd,
+    handleKeepCurrentCart,
+    setOpen,
+  } = useCart()
+
+  const handleClose = () => {
+    setOpen(false)
+    if (onClose) onClose()
+  }
+
+  return (
+    <div className={className}>
+      <div className={headerClassName}>
+        <h3 className={titleClassName}>Shopping Cart ({count})</h3>
+        <button
+          type="button"
+          onClick={handleClose}
+          className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+          aria-label="Close cart"
+        >
+          ✕
+        </button>
+      </div>
+
+      <div className={bodyClassName}>
+        {productTypeMismatch && (
+          <CartTypeMismatchBanner
+            mismatch={productTypeMismatch}
+            onClearAndAdd={handleClearCartAndAdd}
+            onKeepCurrent={handleKeepCurrentCart}
+          />
+        )}
+
+        {isLoading ? (
+          <CartItemSkeleton count={3} />
+        ) : items.length === 0 ? (
+          <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+            Your cart is empty
+          </div>
+        ) : (
+          items.map((item) => (
+            <CartItem
+              key={item.id}
+              item={item}
+              onUpdateQty={updateQty}
+              onRemove={removeItem}
+              formatPriceFn={formatPriceFn}
+            />
+          ))
+        )}
+      </div>
+
+      {items.length > 0 && (
+        <div className={footerClassName}>
+          <div className="flex justify-between items-center text-sm font-semibold text-gray-900 dark:text-gray-100">
+            <span>Subtotal</span>
+            {/* CartResponse carries no currency field — a consuming app
+                MUST supply formatPriceFn (its own business-currency-aware
+                formatter) for a correct display; the bare fallback is
+                honest about not knowing the real currency rather than
+                guessing one. */}
+            <span>{formatPriceFn ? formatPriceFn(subtotal) : formatPrice(subtotal, undefined)}</span>
+          </div>
+          <button
+            type="button"
+            onClick={onCheckout}
+            disabled={items.length === 0}
+            className={checkoutButtonClassName}
+          >
+            Proceed to Checkout
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/cart/CartTypeMismatchBanner.tsx

@@ -0,0 +1,55 @@
+"use client";
+import React from 'react'
+
+export interface CartTypeMismatchBannerProps {
+  mismatch: {
+    message: string
+    existing_type: string
+    new_type: string
+  }
+  onClearAndAdd: () => void
+  onKeepCurrent: () => void
+  className?: string
+  titleClassName?: string
+  messageClassName?: string
+  buttonGroupClassName?: string
+  confirmButtonClassName?: string
+  cancelButtonClassName?: string
+}
+
+export function CartTypeMismatchBanner({
+  mismatch,
+  onClearAndAdd,
+  onKeepCurrent,
+  className = "p-4 bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800 rounded-lg space-y-3",
+  titleClassName = "text-sm font-semibold text-amber-800 dark:text-amber-200",
+  messageClassName = "text-xs text-amber-700 dark:text-amber-300",
+  buttonGroupClassName = "flex items-center gap-2 pt-1",
+  confirmButtonClassName = "px-3 py-1.5 text-xs font-medium bg-amber-600 hover:bg-amber-700 text-white rounded transition-colors",
+  cancelButtonClassName = "px-3 py-1.5 text-xs font-medium border border-amber-300 dark:border-amber-700 text-amber-800 dark:text-amber-200 rounded hover:bg-amber-100 dark:hover:bg-amber-900/50 transition-colors",
+}: CartTypeMismatchBannerProps) {
+  return (
+    <div className={className}>
+      <div className={titleClassName}>Cart Product Type Conflict</div>
+      <p className={messageClassName}>
+        {mismatch.message || `Your cart currently contains ${mismatch.existing_type} items. You cannot mix ${mismatch.existing_type} and ${mismatch.new_type} items in the same order.`}
+      </p>
+      <div className={buttonGroupClassName}>
+        <button
+          type="button"
+          onClick={onClearAndAdd}
+          className={confirmButtonClassName}
+        >
+          Clear Cart & Add New Item
+        </button>
+        <button
+          type="button"
+          onClick={onKeepCurrent}
+          className={cancelButtonClassName}
+        >
+          Keep Current Cart
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/cart/index.ts

@@ -0,0 +1,3 @@
+export * from './CartItem'
+export * from './CartSidebar'
+export * from './CartTypeMismatchBanner'

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export * from './skeletons'
+export * from './cart'
+export * from './product'
+export * from './booking'
+export * from './bespoke'
+export * from './orders'
+export * from './shared'
+