@dutchiesdk/ecommerce-extensions-sdk 0.17.0 → 0.18.0

package/README.md

@@ -26,11 +26,7 @@ yarn add @dutchie/ecommerce-extensions-sdk
 
 ```tsx
 import React from "react";
-import {
-  useDataBridge,
-  RemoteBoundaryComponent,
-  DataBridgeVersion,
-} from "@dutchie/ecommerce-extensions-sdk";
+import { useDataBridge, RemoteBoundaryComponent, DataBridgeVersion } from "@dutchie/ecommerce-extensions-sdk";
 
 const MyExtension: RemoteBoundaryComponent = () => {
   const { dataLoaders, actions, location, user, cart } = useDataBridge();
@@ -78,10 +74,7 @@ const MyComponent = () => {
 A utility hook for handling async data loading with loading states.
 
 ```tsx
-import {
-  useAsyncLoader,
-  useDataBridge,
-} from "@dutchie/ecommerce-extensions-sdk";
+import { useAsyncLoader, useDataBridge } from "@dutchie/ecommerce-extensions-sdk";
 
 const ProductList = () => {
   const { dataLoaders } = useDataBridge();
@@ -125,11 +118,7 @@ All extension components that integrate with the Dutchie platform should satisfy
 **Example:**
 
 ```tsx
-import {
-  RemoteBoundaryComponent,
-  useDataBridge,
-  DataBridgeVersion,
-} from "@dutchie/ecommerce-extensions-sdk";
+import { RemoteBoundaryComponent, useDataBridge, DataBridgeVersion } from "@dutchie/ecommerce-extensions-sdk";
 
 const MyCustomHeader: RemoteBoundaryComponent = () => {
   const { location, user, actions } = useDataBridge();
@@ -137,11 +126,7 @@ const MyCustomHeader: RemoteBoundaryComponent = () => {
   return (
     <header>
       <h1>{location?.name}</h1>
-      {user ? (
-        <span>Welcome, {user.firstName}!</span>
-      ) : (
-        <button onClick={actions.goToLogin}>Login</button>
-      )}
+      {user ? <span>Welcome, {user.firstName}!</span> : <button onClick={actions.goToLogin}>Login</button>}
     </header>
   );
 };
@@ -216,9 +201,7 @@ The `getStoreFrontMetaFields` function is the **recommended approach** for gener
 ### Function Signature
 
 ```typescript
-export type StoreFrontMetaFieldsFunction = (
-  data: CommerceComponentsDataInterface
-) => MetaFields | Promise<MetaFields>;
+export type StoreFrontMetaFieldsFunction = (data: CommerceComponentsDataInterface) => MetaFields | Promise<MetaFields>;
 ```
 
 The function receives the full data bridge interface and can return meta fields synchronously or asynchronously.
@@ -246,14 +229,9 @@ type MetaFields = {
 Create a file in your theme (e.g., `get-meta-fields.ts`):
 
 ```typescript
-import {
-  CommerceComponentsDataInterface,
-  MetaFields,
-} from "@dutchiesdk/ecommerce-extensions-sdk";
-
-export const getStoreFrontMetaFields = async (
-  data: CommerceComponentsDataInterface
-): Promise<MetaFields> => {
+import { CommerceComponentsDataInterface, MetaFields } from "@dutchiesdk/ecommerce-extensions-sdk";
+
+export const getStoreFrontMetaFields = async (data: CommerceComponentsDataInterface): Promise<MetaFields> => {
   const { location, dataLoaders } = data;
   const page = typeof window !== "undefined" ? window.location.pathname : "";
 
@@ -306,6 +284,24 @@ export default {
 } satisfies RemoteModuleRegistry;
 ```
 
+You may also register components for only specific menu contexts:
+
+```typescript
+import { RemoteModuleRegistry } from "@dutchiesdk/ecommerce-extensions-sdk";
+
+export default {
+  StoreFrontHeader: {
+    // use one component for storefront and a different one for kiosk
+    'store-front': createLazyRemoteBoundaryComponent(() => import("./store-header")),
+    kiosk: createLazyRemoteBoundaryComponent(() => import("./kiosk-header")),
+  },
+  StoreFrontFooter: {
+    // only override storefront but not kiosk, kiosk will have default dutchie footer
+    'store-front': createLazyRemoteBoundaryComponent(() => import("./footer")),
+  },
+} satisfies RemoteModuleRegistry;
+```
+
 ### Available Data
 
 The function receives the full `CommerceComponentsDataInterface`:
@@ -417,7 +413,7 @@ const MyComponent = () => {
   const { data, isLoading } = useAsyncLoader(dataLoaders.products);
 
   if (isLoading) return <LoadingSpinner />;
-  if (!data) return <EmptyProducts message='No products found' />;
+  if (!data) return <EmptyProducts message="No products found" />;
 
   return <ProductList products={data} />;
 };
@@ -432,11 +428,7 @@ Any uncaught errors will be caught by a Dutchie error boundary, and the fallback
 Leverage the provided types for better development experience:
 
 ```tsx
-import {
-  Product,
-  Category,
-  useDataBridge,
-} from "@dutchie/ecommerce-extensions-sdk";
+import { Product, Category, useDataBridge } from "@dutchie/ecommerce-extensions-sdk";
 
 interface ProductFilterProps {
   products: Product[];
@@ -444,11 +436,7 @@ interface ProductFilterProps {
   onFilterChange: (categoryId: string) => void;
 }
 
-const ProductFilter: React.FC<ProductFilterProps> = ({
-  products,
-  categories,
-  onFilterChange,
-}) => {
+const ProductFilter: React.FC<ProductFilterProps> = ({ products, categories, onFilterChange }) => {
   // Implementation
 };
 ```
@@ -463,7 +451,7 @@ const UserProfile = () => {
 
   if (!user) {
     return (
-      <div className='login-prompt'>
+      <div className="login-prompt">
         <p>Please log in to view your profile</p>
         <button onClick={actions.goToLogin}>Login</button>
       </div>
@@ -471,7 +459,7 @@ const UserProfile = () => {
   }
 
   return (
-    <div className='user-profile'>
+    <div className="user-profile">
       <h2>Welcome, {user.firstName}!</h2>
       {/* Profile content */}
     </div>
@@ -526,3 +514,11 @@ For technical support and questions about the Dutchie Ecommerce Extensions SDK:
 - 📧 Contact your Dutchie agency partner representative
 - 📚 Refer to the Dutchie Pro platform documentation
 - 🐛 Report issues through the official Dutchie support channels
+
+## Updates
+
+Stay up to date with this SDK by checking here for changes, and updating to the latest version with:
+
+```bash
+npm install @dutchiesdk/ecommerce-extensions-sdk@latest
+```

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.17.0';
+const DataBridgeVersion = '0.18.0';
 const DataBridgeContext = (0, external_react_namespaceObject.createContext)(void 0);
 const useDataBridge = ()=>{
     const context = (0, external_react_namespaceObject.useContext)(DataBridgeContext);

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

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

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

@@ -1,9 +1,14 @@
 import type React from 'react';
+import type { MenuContext } from './data';
 import type { Events } from './events';
 import type { CommerceComponentsDataInterface } from './interface';
 export type RemoteBoundaryComponent<P = {}> = React.FC<P> & {
     DataBridgeVersion: string;
 };
+export type MenuSpecificRemoteComponent = {
+    [key in MenuContext]?: RemoteBoundaryComponent;
+};
+export type ModuleRegistryEntry = MenuSpecificRemoteComponent | RemoteBoundaryComponent;
 export type RoutablePageRegistryEntry = {
     component: RemoteBoundaryComponent;
     path: string;
@@ -40,14 +45,12 @@ export type MetaFields = {
 export type StoreFrontMetaFieldsFunction = (data: CommerceComponentsDataInterface) => MetaFields | Promise<MetaFields>;
 export type RemoteModuleRegistry = {
     RouteablePages?: RoutablePageRegistryEntry[];
-    StoreFrontHeader?: RemoteBoundaryComponent;
-    StoreFrontMeta?: RemoteBoundaryComponent;
-    StoreFrontNavigation?: RemoteBoundaryComponent;
-    StoreFrontFooter?: RemoteBoundaryComponent;
-    StoreFrontCarouselInterstitials?: RemoteBoundaryComponent[];
-    StoreFrontHero?: RemoteBoundaryComponent;
-    ProductDetailsMeta?: RemoteBoundaryComponent;
-    ProductDetailsPrimary?: RemoteBoundaryComponent;
+    StoreFrontHeader?: ModuleRegistryEntry;
+    StoreFrontNavigation?: ModuleRegistryEntry;
+    StoreFrontFooter?: ModuleRegistryEntry;
+    StoreFrontCarouselInterstitials?: ModuleRegistryEntry[];
+    StoreFrontHero?: ModuleRegistryEntry;
+    ProductDetailsPrimary?: ModuleRegistryEntry;
     /**
      * Function that provides meta fields for the current page.
      * Replaces the StoreFrontMeta component approach.
@@ -57,4 +60,12 @@ export type RemoteModuleRegistry = {
      */
     getStoreFrontMetaFields?: StoreFrontMetaFieldsFunction;
     events?: Events;
+    /**
+     * @deprecated Use getStoreFrontMetaFields instead
+     */
+    StoreFrontMeta?: RemoteBoundaryComponent;
+    /**
+     * @deprecated Use getStoreFrontMetaFields instead
+     */
+    ProductDetailsMeta?: RemoteBoundaryComponent;
 };

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

@@ -1,9 +1,14 @@
 import type React from 'react';
+import type { MenuContext } from './data';
 import type { Events } from './events';
 import type { CommerceComponentsDataInterface } from './interface';
 export type RemoteBoundaryComponent<P = {}> = React.FC<P> & {
     DataBridgeVersion: string;
 };
+export type MenuSpecificRemoteComponent = {
+    [key in MenuContext]?: RemoteBoundaryComponent;
+};
+export type ModuleRegistryEntry = MenuSpecificRemoteComponent | RemoteBoundaryComponent;
 export type RoutablePageRegistryEntry = {
     component: RemoteBoundaryComponent;
     path: string;
@@ -40,14 +45,12 @@ export type MetaFields = {
 export type StoreFrontMetaFieldsFunction = (data: CommerceComponentsDataInterface) => MetaFields | Promise<MetaFields>;
 export type RemoteModuleRegistry = {
     RouteablePages?: RoutablePageRegistryEntry[];
-    StoreFrontHeader?: RemoteBoundaryComponent;
-    StoreFrontMeta?: RemoteBoundaryComponent;
-    StoreFrontNavigation?: RemoteBoundaryComponent;
-    StoreFrontFooter?: RemoteBoundaryComponent;
-    StoreFrontCarouselInterstitials?: RemoteBoundaryComponent[];
-    StoreFrontHero?: RemoteBoundaryComponent;
-    ProductDetailsMeta?: RemoteBoundaryComponent;
-    ProductDetailsPrimary?: RemoteBoundaryComponent;
+    StoreFrontHeader?: ModuleRegistryEntry;
+    StoreFrontNavigation?: ModuleRegistryEntry;
+    StoreFrontFooter?: ModuleRegistryEntry;
+    StoreFrontCarouselInterstitials?: ModuleRegistryEntry[];
+    StoreFrontHero?: ModuleRegistryEntry;
+    ProductDetailsPrimary?: ModuleRegistryEntry;
     /**
      * Function that provides meta fields for the current page.
      * Replaces the StoreFrontMeta component approach.
@@ -57,4 +60,12 @@ export type RemoteModuleRegistry = {
      */
     getStoreFrontMetaFields?: StoreFrontMetaFieldsFunction;
     events?: Events;
+    /**
+     * @deprecated Use getStoreFrontMetaFields instead
+     */
+    StoreFrontMeta?: RemoteBoundaryComponent;
+    /**
+     * @deprecated Use getStoreFrontMetaFields instead
+     */
+    ProductDetailsMeta?: RemoteBoundaryComponent;
 };

package/package.json

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