@cimplify/sdk 0.38.3 → 0.38.4

package/dist/{server-BNy6Ri-4.d.ts → server-CVEsjECc.d.ts}

@@ -117,6 +117,19 @@ interface MockBusiness {
     timezone?: string;
     metadata?: Record<string, unknown>;
 }
+interface MockQuantityPricingTier {
+    min_quantity: number;
+    unit_price: string;
+}
+interface MockBillingPlan {
+    id: string;
+    name: string;
+    interval: "day" | "week" | "month" | "year";
+    interval_count: number;
+    price: string;
+    currency: string;
+    trial_period_days?: number;
+}
 interface MockProduct {
     id: string;
     business_id: string;
@@ -140,6 +153,20 @@ interface MockProduct {
     pairings?: string[];
     is_signature?: boolean;
     is_new?: boolean;
+    /** Override for the auto-derived render hint. */
+    render_hint?: "food" | "physical" | "general";
+    /** Display mode hint (card opens modal, page is a link). Storefronts can override. */
+    display_mode?: "card" | "page";
+    /** For digital products — how the SDK renders fulfilment UI. */
+    digital_product_type?: "download" | "license" | "event_ticket" | "access_pass" | "gift_code";
+    /** For wholesale products — quantity-pricing tiers. */
+    quantity_pricing?: MockQuantityPricingTier[];
+    /** For services — duration unit (drives Rental/Accommodation/Lease cards). */
+    duration_unit?: "minutes" | "hours" | "days" | "nights" | "weeks" | "months" | "years";
+    /** For schedule services — duration in minutes (presence implies non-subscription service). */
+    duration_minutes?: number;
+    /** For subscription services — billing plans. */
+    billing_plans?: MockBillingPlan[];
     metadata?: Record<string, unknown>;
     created_at: string;
     updated_at: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.38.3",
+  "version": "0.38.4",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",

package/templates/storefront/README.md

@@ -1,6 +1,6 @@
 # __STOREFRONT_NAME__
 
-A Cimplify storefront scaffolded from the SDK template — Next.js 15 (App Router), React 19, Tailwind v4, talking to the Cimplify mock API by default.
+A Cimplify storefront scaffolded from the SDK template — Next.js 16 (App Router), React 19, Tailwind v4, talking to the Cimplify mock API by default.
 
 ## Run
 

package/templates/storefront/components/collection-strip.tsx

@@ -36,7 +36,7 @@ export function CollectionStrip({ collection, products, collectionHref }: Collec
       <div className="grid grid-flow-col auto-cols-[minmax(220px,1fr)] gap-4 overflow-x-auto snap-x snap-mandatory pb-2">
         {products.slice(0, 8).map((p) => (
           <div key={p.id} className="snap-start">
-            <StoreProductCard product={p} aspectRatio="square" />
+            <StoreProductCard product={p} />
           </div>
         ))}
       </div>

package/templates/storefront/components/store-product-card.tsx

@@ -1,43 +1,94 @@
 "use client";
 
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { ProductCard } from "@cimplify/sdk/react";
-import type { ProductCardProps } from "@cimplify/sdk/react";
+import {
+  CardVariant,
+  FoodProductCard,
+  RetailProductCard,
+  WholesaleProductCard,
+  DigitalProductCard,
+  BundleProductCard,
+  CompositeProductCard,
+  StandardServiceCard,
+  RentalServiceCard,
+  AccommodationCard,
+  LeaseServiceCard,
+  SubscriptionCard,
+} from "@cimplify/sdk/react";
+import type { CardLayoutProps } from "@cimplify/sdk/react";
 import type { Product } from "@cimplify/sdk";
+import { PRODUCT_TYPE, RENDER_HINT, DURATION_UNIT } from "@cimplify/sdk";
 
-type Props = Omit<ProductCardProps, "displayMode" | "renderLink"> & {
-  product: Product;
+const RENTAL_UNITS = new Set<string>([DURATION_UNIT.Days, DURATION_UNIT.Hours]);
+const LEASE_UNITS = new Set<string>([DURATION_UNIT.Weeks, DURATION_UNIT.Months, DURATION_UNIT.Years]);
+
+const VARIANT_CARDS: Record<CardVariant, React.ComponentType<CardLayoutProps>> = {
+  [CardVariant.Food]: FoodProductCard,
+  [CardVariant.Retail]: RetailProductCard,
+  [CardVariant.Wholesale]: WholesaleProductCard,
+  [CardVariant.Digital]: DigitalProductCard,
+  [CardVariant.Bundle]: BundleProductCard,
+  [CardVariant.Composite]: CompositeProductCard,
+  [CardVariant.Standard]: StandardServiceCard,
+  [CardVariant.Rental]: RentalServiceCard,
+  [CardVariant.Accommodation]: AccommodationCard,
+  [CardVariant.Lease]: LeaseServiceCard,
+  [CardVariant.Subscription]: SubscriptionCard,
 };
 
+function resolveVariant(p: Product): CardVariant {
+  if (p.type === PRODUCT_TYPE.Bundle) return CardVariant.Bundle;
+  if (p.type === PRODUCT_TYPE.Composite) return CardVariant.Composite;
+  if (p.quantity_pricing && p.quantity_pricing.length > 1) return CardVariant.Wholesale;
+  if (p.type === PRODUCT_TYPE.Digital) return CardVariant.Digital;
+  if (p.type === PRODUCT_TYPE.Service) {
+    if (p.duration_unit && RENTAL_UNITS.has(p.duration_unit)) return CardVariant.Rental;
+    if (p.duration_unit === DURATION_UNIT.Nights) return CardVariant.Accommodation;
+    if (p.duration_unit && LEASE_UNITS.has(p.duration_unit)) return CardVariant.Lease;
+    if (p.billing_plans && p.billing_plans.length > 0 && !p.duration_minutes) return CardVariant.Subscription;
+    return CardVariant.Standard;
+  }
+  if (p.render_hint === RENDER_HINT.Food) return CardVariant.Food;
+  return CardVariant.Retail;
+}
+
+interface Props {
+  product: Product;
+  /** Override the auto-detected card variant. */
+  variant?: CardVariant;
+}
+
 /**
- * Wraps the SDK `<ProductCard>` so a click sets `?product=<slug>` instead of
- * opening the SDK's own modal. All variant card styling (Food, Bundle,
- * Composite, …) is preserved — we only intercept navigation so a single
- * deep-linkable `<ProductModal>` instance handles every product surface.
+ * Variant-aware product card that opens the URL-driven product modal on
+ * click (`?product=<slug>`). Renders the underlying SDK variant card
+ * (Food, Bundle, Composite, …) directly and supplies a `renderLink` that
+ * intercepts navigation — so a single `<CardShell>`-rendered `<a>` tag
+ * wraps the card (no nested anchors, no hydration error).
  */
-export function StoreProductCard(props: Props) {
+export function StoreProductCard({ product, variant }: Props) {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  const open = (slug: string) => {
+  const slug = product.slug || product.id;
+  const Card = VARIANT_CARDS[variant ?? resolveVariant(product)];
+
+  const open = () => {
     const next = new URLSearchParams(searchParams?.toString() ?? "");
     next.set("product", slug);
     router.push(`${pathname}?${next.toString()}`, { scroll: false });
   };
 
   return (
-    <ProductCard
-      {...props}
-      displayMode="page"
-      href={`?product=${props.product.slug || props.product.id}`}
+    <Card
+      product={product}
       renderLink={({ href, className, children }) => (
         <a
           href={href}
           className={className}
           onClick={(e) => {
             e.preventDefault();
-            open(props.product.slug || props.product.id);
+            open();
           }}
         >
           {children}

package/templates/storefront/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@cimplify/sdk": "^0.38.1",
-    "next": "^15.1.0",
+    "next": "^16.2.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package/templates/storefront/tsconfig.json

@@ -18,6 +18,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"],
   "exclude": ["node_modules"]
 }