@dutchiesdk/ecommerce-extensions-sdk 0.20.0 → 0.21.0

package/README.md

@@ -307,6 +307,45 @@ const LazyFooter = createLazyRemoteBoundaryComponent(
 );
 ```
 
+#### `createRemoteBoundaryComponent(Component)`
+
+Wraps a component with the Data Bridge context provider synchronously. Use this instead of `createLazyRemoteBoundaryComponent` when you don't need code-splitting (e.g., the component is already in the same bundle, or you're registering a component that receives typed props like `ProductCardGridProps`).
+
+**Signature:**
+
+```typescript
+function createRemoteBoundaryComponent<P = WithRemoteBoundaryProps>(
+  Component: ComponentType
+): RemoteBoundaryComponent<P>;
+```
+
+**Parameters:**
+
+- `Component` - The React component to wrap with Data Bridge context
+
+**Returns:** A `RemoteBoundaryComponent` with Data Bridge context and `DataBridgeVersion` attached
+
+**Example:**
+
+```tsx
+import {
+  createRemoteBoundaryComponent,
+  type ProductCardGridProps,
+} from "@dutchiesdk/ecommerce-extensions-sdk";
+
+const MyProductCard = ({ product, pricing, onAddToCart }: ProductCardGridProps) => {
+  return (
+    <div>
+      <h3>{product.name}</h3>
+      <p>{pricing.displayPrice}</p>
+      <button onClick={onAddToCart}>{pricing.buttonCopy}</button>
+    </div>
+  );
+};
+
+export default createRemoteBoundaryComponent<ProductCardGridProps>(MyProductCard);
+```
+
 ### Context
 
 #### `DataBridgeContext`
@@ -400,6 +439,16 @@ import type {
   MetaFields,
   StoreFrontMetaFieldsFunction,
 
+  // Product card types
+  ProductCardProductData,
+  ProductCardImage,
+  ProductCardBadgeData,
+  ProductCardPricingData,
+  ProductCardOptionData,
+  ProductCardOptionsData,
+  ProductCardGridProps,
+  ProductCardListItemProps,
+
   // Events
   Events,
   OnAfterCheckoutData,
@@ -876,6 +925,93 @@ The menu context indicates which interface the extension is running in:
 - `'store-front'` - Online storefront for customers
 - `'kiosk'` - In-store kiosk interface
 
+#### Product Card Types
+
+The SDK provides types for building custom product card extensions. These types are passed as props to components registered as `ProductCard` (grid layout) and `ProductCardListItem` (list layout) in the module registry.
+
+```typescript
+type ProductCardImage = {
+  url: string;
+  description?: string;
+};
+
+type ProductCardProductData = {
+  id: string;
+  name: string;
+  brandName: string;
+  href: string;
+  strainType: string | null;
+  potency: string[];
+  images: ProductCardImage[];
+  fallbackImageUrl: string;
+};
+
+type ProductCardBadgeData = {
+  isStaffPick: boolean;
+  isSponsored: boolean;
+  isSpecialOffer: boolean;
+  specialNames: string[];
+  hideSalesLanguage: boolean;
+  collectionBadge: {
+    title: string;
+    color: string | null;
+    isExclusive: boolean;
+  } | null;
+};
+
+type ProductCardPricingData = {
+  displayPrice: string;
+  standardPrice: string | null;
+  discount: string | null;
+  weight: string;
+  showWeight: boolean;
+  buttonCopy: string;
+};
+
+type ProductCardOptionData = {
+  value: string;
+  label: string;
+  currentPrice: string;
+  originalPrice: string | null;
+  discountLabel: string | null;
+};
+
+type ProductCardOptionsData = {
+  items: ProductCardOptionData[];
+  totalCount: number;
+  hasMultiple: boolean;
+  shouldDisplayLabel: boolean;
+};
+```
+
+**Grid Card Props** (passed to `ProductCard` extensions):
+
+```typescript
+type ProductCardGridProps = {
+  product: ProductCardProductData;
+  pricing: ProductCardPricingData;
+  options: ProductCardOptionsData;
+  badges: ProductCardBadgeData;
+  onLinkClick: () => void;
+  onAddToCart: () => void;
+  productIndex: number;
+};
+```
+
+**List Card Props** (passed to `ProductCardListItem` extensions):
+
+```typescript
+type ProductCardListItemProps = {
+  product: ProductCardProductData;
+  pricing: ProductCardPricingData;
+  options: ProductCardOptionsData;
+  badges: ProductCardBadgeData;
+  onLinkClick: () => void;
+  onOptionClick: (value: string) => void;
+  productIndex: number;
+};
+```
+
 ## Extension Development
 
 ### Creating Components
@@ -955,6 +1091,10 @@ type RemoteModuleRegistry = {
   ProductDetailsPrimary?: ModuleRegistryEntry;
   ListPageHero?: ModuleRegistryEntry;
 
+  // Custom product cards
+  ProductCard?: ModuleRegistryEntry;
+  ProductCardListItem?: ModuleRegistryEntry;
+
   // Category page components (indexed by pagination page number)
   CategoryPageInterstitials?: ListPageEntry[];
   CategoryPageSlots?: ListPageEntry[];
@@ -1179,6 +1319,114 @@ export default {
 } satisfies RemoteModuleRegistry;
 ```
 
+#### Custom Product Cards
+
+Register custom product card components to replace the default grid and list cards across the storefront. The platform passes pre-computed product data, pricing, badges, and callbacks as props.
+
+**Grid Card:**
+
+```tsx
+import type {
+  RemoteBoundaryComponent,
+  ProductCardGridProps,
+} from "@dutchiesdk/ecommerce-extensions-sdk";
+import { DataBridgeVersion } from "@dutchiesdk/ecommerce-extensions-sdk";
+
+const CustomProductCard: RemoteBoundaryComponent<ProductCardGridProps> = ({
+  product,
+  pricing,
+  badges,
+  onLinkClick,
+  onAddToCart,
+}) => {
+  return (
+    <div onClick={onLinkClick}>
+      <img
+        src={product.images[0]?.url || product.fallbackImageUrl}
+        alt={product.name}
+      />
+      {badges.isStaffPick && <span>Staff Pick</span>}
+      <h3>{product.name}</h3>
+      <p>{product.brandName}</p>
+      <p>{pricing.displayPrice}</p>
+      {pricing.discount && <span>{pricing.discount} off</span>}
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onAddToCart();
+        }}
+      >
+        {pricing.buttonCopy}
+      </button>
+    </div>
+  );
+};
+
+CustomProductCard.DataBridgeVersion = DataBridgeVersion;
+export default CustomProductCard;
+```
+
+**List Card:**
+
+```tsx
+import type {
+  RemoteBoundaryComponent,
+  ProductCardListItemProps,
+} from "@dutchiesdk/ecommerce-extensions-sdk";
+import { DataBridgeVersion } from "@dutchiesdk/ecommerce-extensions-sdk";
+
+const CustomListItem: RemoteBoundaryComponent<ProductCardListItemProps> = ({
+  product,
+  pricing,
+  options,
+  onLinkClick,
+  onOptionClick,
+}) => {
+  return (
+    <div onClick={onLinkClick}>
+      <img
+        src={product.images[0]?.url || product.fallbackImageUrl}
+        alt={product.name}
+      />
+      <div>
+        <h3>{product.name}</h3>
+        <p>{product.brandName}</p>
+        {options.items.map((option) => (
+          <button
+            key={option.value}
+            onClick={(e) => {
+              e.stopPropagation();
+              onOptionClick(option.value);
+            }}
+          >
+            {option.label} — {option.currentPrice}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+CustomListItem.DataBridgeVersion = DataBridgeVersion;
+export default CustomListItem;
+```
+
+**Registration:**
+
+```tsx
+import type { RemoteModuleRegistry } from "@dutchiesdk/ecommerce-extensions-sdk";
+import { createLazyRemoteBoundaryComponent } from "@dutchiesdk/ecommerce-extensions-sdk";
+
+export default {
+  ProductCard: createLazyRemoteBoundaryComponent(
+    () => import("./components/CustomProductCard")
+  ),
+  ProductCardListItem: createLazyRemoteBoundaryComponent(
+    () => import("./components/CustomListItem")
+  ),
+} satisfies RemoteModuleRegistry;
+```
+
 ### Meta Fields & SEO
 
 The `getStoreFrontMetaFields` function allows you to dynamically generate page metadata (title, description, Open Graph tags, structured data) based on the current page and available data.

package/dist/components/remote-boundary.cjs

@@ -24,8 +24,9 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    withRemoteBoundary: ()=>withRemoteBoundary,
     createLazyRemoteBoundaryComponent: ()=>createLazyRemoteBoundaryComponent,
-    withRemoteBoundary: ()=>withRemoteBoundary
+    createRemoteBoundaryComponent: ()=>createRemoteBoundaryComponent
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
@@ -65,10 +66,22 @@ function createLazyRemoteBoundaryComponent(importFn, options = {}) {
     LazyRemoteBoundaryWrapper.DataBridgeVersion = ecommerce_data_bridge_cjs_namespaceObject.DataBridgeVersion;
     return LazyRemoteBoundaryWrapper;
 }
+function createRemoteBoundaryComponent(Component) {
+    const WrappedComponent = withRemoteBoundary(Component);
+    function RemoteBoundaryWrapper(props) {
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(WrappedComponent, {
+            ...props
+        });
+    }
+    RemoteBoundaryWrapper.DataBridgeVersion = ecommerce_data_bridge_cjs_namespaceObject.DataBridgeVersion;
+    return RemoteBoundaryWrapper;
+}
 exports.createLazyRemoteBoundaryComponent = __webpack_exports__.createLazyRemoteBoundaryComponent;
+exports.createRemoteBoundaryComponent = __webpack_exports__.createRemoteBoundaryComponent;
 exports.withRemoteBoundary = __webpack_exports__.withRemoteBoundary;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "createLazyRemoteBoundaryComponent",
+    "createRemoteBoundaryComponent",
     "withRemoteBoundary"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {

package/dist/components/remote-boundary.d.ts

@@ -15,4 +15,6 @@ interface LazyRemoteBoundaryOptions {
 export declare function createLazyRemoteBoundaryComponent<P extends WithRemoteBoundaryProps = WithRemoteBoundaryProps>(importFn: () => Promise<{
     default: ComponentType;
 }>, options?: LazyRemoteBoundaryOptions): RemoteBoundaryComponent<P>;
+/** Wraps a component with the data bridge context (non-lazy). */
+export declare function createRemoteBoundaryComponent<P extends WithRemoteBoundaryProps = WithRemoteBoundaryProps>(Component: ComponentType): RemoteBoundaryComponent<P>;
 export {};

package/dist/context/ecommerce-data-bridge.cjs

@@ -30,7 +30,7 @@ __webpack_require__.d(__webpack_exports__, {
     useDataBridge: ()=>useDataBridge
 });
 const external_react_namespaceObject = require("react");
-const DataBridgeVersion = '0.20.0';
+const DataBridgeVersion = '0.21.0';
 const DataBridgeContext = (0, external_react_namespaceObject.createContext)(void 0);
 const useDataBridge = ()=>{
     const context = (0, external_react_namespaceObject.useContext)(DataBridgeContext);

package/dist/esm/components/remote-boundary.d.ts

@@ -15,4 +15,6 @@ interface LazyRemoteBoundaryOptions {
 export declare function createLazyRemoteBoundaryComponent<P extends WithRemoteBoundaryProps = WithRemoteBoundaryProps>(importFn: () => Promise<{
     default: ComponentType;
 }>, options?: LazyRemoteBoundaryOptions): RemoteBoundaryComponent<P>;
+/** Wraps a component with the data bridge context (non-lazy). */
+export declare function createRemoteBoundaryComponent<P extends WithRemoteBoundaryProps = WithRemoteBoundaryProps>(Component: ComponentType): RemoteBoundaryComponent<P>;
 export {};

package/dist/esm/components/remote-boundary.js

@@ -36,4 +36,14 @@ function createLazyRemoteBoundaryComponent(importFn, options = {}) {
     LazyRemoteBoundaryWrapper.DataBridgeVersion = DataBridgeVersion;
     return LazyRemoteBoundaryWrapper;
 }
-export { createLazyRemoteBoundaryComponent, withRemoteBoundary };
+function createRemoteBoundaryComponent(Component) {
+    const WrappedComponent = withRemoteBoundary(Component);
+    function RemoteBoundaryWrapper(props) {
+        return /*#__PURE__*/ jsx(WrappedComponent, {
+            ...props
+        });
+    }
+    RemoteBoundaryWrapper.DataBridgeVersion = DataBridgeVersion;
+    return RemoteBoundaryWrapper;
+}
+export { createLazyRemoteBoundaryComponent, createRemoteBoundaryComponent, withRemoteBoundary };

package/dist/esm/context/ecommerce-data-bridge.js

@@ -1,5 +1,5 @@
 import { createContext, useContext, useEffect, useState } from "react";
-const DataBridgeVersion = '0.20.0';
+const DataBridgeVersion = '0.21.0';
 const DataBridgeContext = createContext(void 0);
 const useDataBridge = ()=>{
     const context = useContext(DataBridgeContext);

package/dist/esm/index.d.ts

@@ -5,3 +5,4 @@ export * from './types/data';
 export * from './types/ecommerce-extension';
 export * from './types/events';
 export * from './types/interface';
+export * from './types/product-card';

package/dist/esm/index.js

@@ -5,3 +5,4 @@ export * from "./types/data.js";
 export * from "./types/ecommerce-extension.js";
 export * from "./types/events.js";
 export * from "./types/interface.js";
+export * from "./types/product-card.js";

package/dist/esm/types/ecommerce-extension.d.ts

@@ -58,6 +58,10 @@ export type RemoteModuleRegistry = {
     StoreFrontCarouselInterstitials?: ModuleRegistryEntry[];
     StoreFrontHero?: ModuleRegistryEntry;
     ProductDetailsPrimary?: ModuleRegistryEntry;
+    /** Custom grid product card rendered in category pages and carousels */
+    ProductCard?: ModuleRegistryEntry;
+    /** Custom list-view product card rendered in list layout */
+    ProductCardListItem?: ModuleRegistryEntry;
     ListPageHero?: ModuleRegistryEntry;
     /**
      * Function that provides meta fields for the current page.

package/dist/esm/types/product-card.d.ts

@@ -0,0 +1,65 @@
+export type ProductCardImage = {
+    url: string;
+    description?: string;
+};
+export type ProductCardProductData = {
+    id: string;
+    name: string;
+    brandName: string;
+    href: string;
+    strainType: string | null;
+    potency: string[];
+    images: ProductCardImage[];
+    fallbackImageUrl: string;
+};
+export type ProductCardBadgeData = {
+    isStaffPick: boolean;
+    isSponsored: boolean;
+    isSpecialOffer: boolean;
+    specialNames: string[];
+    hideSalesLanguage: boolean;
+    collectionBadge: {
+        title: string;
+        color: string | null;
+        isExclusive: boolean;
+    } | null;
+};
+export type ProductCardPricingData = {
+    displayPrice: string;
+    standardPrice: string | null;
+    discount: string | null;
+    weight: string;
+    showWeight: boolean;
+    buttonCopy: string;
+};
+export type ProductCardOptionData = {
+    value: string;
+    label: string;
+    currentPrice: string;
+    originalPrice: string | null;
+    discountLabel: string | null;
+};
+export type ProductCardOptionsData = {
+    items: ProductCardOptionData[];
+    totalCount: number;
+    hasMultiple: boolean;
+    shouldDisplayLabel: boolean;
+};
+export type ProductCardGridProps = {
+    product: ProductCardProductData;
+    pricing: ProductCardPricingData;
+    options: ProductCardOptionsData;
+    badges: ProductCardBadgeData;
+    onLinkClick: () => void;
+    onAddToCart: () => void;
+    productIndex: number;
+};
+export type ProductCardListItemProps = {
+    product: ProductCardProductData;
+    pricing: ProductCardPricingData;
+    options: ProductCardOptionsData;
+    badges: ProductCardBadgeData;
+    onLinkClick: () => void;
+    onOptionClick: (value: string) => void;
+    productIndex: number;
+};

package/dist/index.cjs

@@ -20,6 +20,9 @@ var __webpack_modules__ = {
     },
     "./types/interface": function(module) {
         module.exports = require("./types/interface.cjs");
+    },
+    "./types/product-card": function(module) {
+        module.exports = require("./types/product-card.cjs");
     }
 };
 var __webpack_module_cache__ = {};
@@ -107,6 +110,12 @@ var __webpack_exports__ = {};
         return _types_interface__WEBPACK_IMPORTED_MODULE_6__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _types_product_card__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__("./types/product-card");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _types_product_card__WEBPACK_IMPORTED_MODULE_7__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _types_product_card__WEBPACK_IMPORTED_MODULE_7__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
 })();
 for(var __webpack_i__ in __webpack_exports__)exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {

package/dist/index.d.ts

@@ -5,3 +5,4 @@ export * from './types/data';
 export * from './types/ecommerce-extension';
 export * from './types/events';
 export * from './types/interface';
+export * from './types/product-card';

package/dist/types/ecommerce-extension.d.ts

@@ -58,6 +58,10 @@ export type RemoteModuleRegistry = {
     StoreFrontCarouselInterstitials?: ModuleRegistryEntry[];
     StoreFrontHero?: ModuleRegistryEntry;
     ProductDetailsPrimary?: ModuleRegistryEntry;
+    /** Custom grid product card rendered in category pages and carousels */
+    ProductCard?: ModuleRegistryEntry;
+    /** Custom list-view product card rendered in list layout */
+    ProductCardListItem?: ModuleRegistryEntry;
     ListPageHero?: ModuleRegistryEntry;
     /**
      * Function that provides meta fields for the current page.

package/dist/types/product-card.cjs

@@ -0,0 +1,18 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+for(var __webpack_i__ in __webpack_exports__)exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/types/product-card.d.ts

@@ -0,0 +1,65 @@
+export type ProductCardImage = {
+    url: string;
+    description?: string;
+};
+export type ProductCardProductData = {
+    id: string;
+    name: string;
+    brandName: string;
+    href: string;
+    strainType: string | null;
+    potency: string[];
+    images: ProductCardImage[];
+    fallbackImageUrl: string;
+};
+export type ProductCardBadgeData = {
+    isStaffPick: boolean;
+    isSponsored: boolean;
+    isSpecialOffer: boolean;
+    specialNames: string[];
+    hideSalesLanguage: boolean;
+    collectionBadge: {
+        title: string;
+        color: string | null;
+        isExclusive: boolean;
+    } | null;
+};
+export type ProductCardPricingData = {
+    displayPrice: string;
+    standardPrice: string | null;
+    discount: string | null;
+    weight: string;
+    showWeight: boolean;
+    buttonCopy: string;
+};
+export type ProductCardOptionData = {
+    value: string;
+    label: string;
+    currentPrice: string;
+    originalPrice: string | null;
+    discountLabel: string | null;
+};
+export type ProductCardOptionsData = {
+    items: ProductCardOptionData[];
+    totalCount: number;
+    hasMultiple: boolean;
+    shouldDisplayLabel: boolean;
+};
+export type ProductCardGridProps = {
+    product: ProductCardProductData;
+    pricing: ProductCardPricingData;
+    options: ProductCardOptionsData;
+    badges: ProductCardBadgeData;
+    onLinkClick: () => void;
+    onAddToCart: () => void;
+    productIndex: number;
+};
+export type ProductCardListItemProps = {
+    product: ProductCardProductData;
+    pricing: ProductCardPricingData;
+    options: ProductCardOptionsData;
+    badges: ProductCardBadgeData;
+    onLinkClick: () => void;
+    onOptionClick: (value: string) => void;
+    productIndex: number;
+};

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.20.0",
+  "version": "0.21.0",
   "license": "MIT",
   "type": "module",
   "module": "./dist/esm/index.js",