@dutchiesdk/ecommerce-extensions-sdk 0.6.0

package/README.md

@@ -0,0 +1,868 @@
+
+
+![Dutchie Logo](https://cdn.prod.website-files.com/61930755e474060ca6298871/64a32a14b7840d452f594fbc_Logo.svg)
+
+# @dutchiesdk/ecommerce-extensions-sdk 
+
+A comprehensive TypeScript SDK for building custom extensions that run on the Dutchie Ecommerce Pro platform. This SDK provides certified agency partners with the tools needed to create powerful, integrated e-commerce experiences for cannabis retailers.
+
+> ⚠️ **Alpha Release Warning**
+> 
+> This SDK is currently in **alpha** and is subject to breaking changes. APIs, types, and functionality may change significantly between versions. Please use with caution in production environments and be prepared to update your extensions as the SDK evolves.
+
+## Development Environment Access
+
+This SDK requires a **Dutchie-provided development environment** to build, test, and deploy extensions. The SDK alone is not sufficient for development - you must have access to the complete Dutchie Pro development and deployment infrastructure.
+
+**To request access to the development environment:**
+📧 Contact: **partners@dutchie.com**
+
+Please include your agency information and intended use case when requesting access.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Core Concepts](#core-concepts)
+- [React Context & Hooks](#react-context--hooks)
+- [Data Types Reference](#data-types-reference)
+- [Extension Components](#extension-components)
+- [Actions API](#actions-api)
+- [Data Loaders](#data-loaders)
+- [Examples](#examples)
+- [Best Practices](#best-practices)
+- [Development](#development)
+
+## Installation
+
+```bash
+npm install @dutchie/ecommerce-extensions-sdk
+# or
+yarn add @dutchie/ecommerce-extensions-sdk
+# or
+pnpm add @dutchie/ecommerce-extensions-sdk
+```
+
+## Quick Start
+
+```tsx
+import React from 'react';
+import { useDataBridge, RemoteBoundaryComponent } from '@dutchie/ecommerce-extensions-sdk';
+
+const MyExtension: RemoteBoundaryComponent = () => {
+  const { dataLoaders, actions, location, user, cart } = useDataBridge();
+  
+  return (
+    <div>
+      <h1>Welcome to {location?.name}</h1>
+      <p>Cart items: {cart?.items.length || 0}</p>
+    </div>
+  );
+};
+
+MyExtension.DataBridgeVersion = '0.2';
+
+export default MyExtension;
+```
+
+## Core Concepts
+
+The Dutchie Ecommerce Extensions SDK is built around several key concepts:
+
+1. **Data Bridge**: A unified interface for accessing dispensary data, user information, and cart state
+2. **Actions**: Pre-built navigation and cart management functions
+3. **Remote Components**: Extension components that integrate seamlessly with the Dutchie platform
+4. **Context-Driven Architecture**: React context provides data and actions throughout your extension
+
+## React Context & Hooks
+
+### `useDataBridge()`
+
+The primary hook for accessing the Dutchie platform data and functionality.
+
+```tsx
+import { useDataBridge } from '@dutchie/ecommerce-extensions-sdk';
+
+const MyComponent = () => {
+  const {
+    menuContext,    // 'store-front' | 'kiosk'
+    location,       // Current dispensary information
+    user,          // Authenticated user data
+    cart,          // Current cart state
+    dataLoaders,   // Async data loading functions
+    actions        // Navigation and cart actions
+  } = useDataBridge();
+  
+  // Component logic here
+};
+```
+
+**Throws**: Error if used outside of a `DataBridgeProvider`
+
+### `useAsyncLoader(fn)`
+
+A utility hook for handling async data loading with loading states.
+
+```tsx
+import { useAsyncLoader, useDataBridge } from '@dutchie/ecommerce-extensions-sdk';
+
+const ProductList = () => {
+  const { dataLoaders } = useDataBridge();
+  const { data: products, isLoading } = useAsyncLoader(dataLoaders.products);
+  
+  if (isLoading) return <div>Loading products...</div>;
+  
+  return (
+    <div>
+      {products?.map(product => (
+        <div key={product.id}>{product.name}</div>
+      ))}
+    </div>
+  );
+};
+```
+
+**Parameters:**
+- `fn`: `() => Promise<unknown>` - Async function to execute
+
+**Returns:**
+- `data`: The resolved data or `null` while loading
+- `isLoading`: Boolean indicating loading state
+
+## Data Types Reference
+
+### Core Platform Types
+
+#### `CommerceComponentsDataInterface`
+
+The main interface providing access to all platform data and functionality.
+
+```typescript
+interface CommerceComponentsDataInterface {
+  menuContext: 'store-front' | 'kiosk';
+  location?: Dispensary;
+  user?: User;
+  cart?: Cart;
+  dataLoaders: DataLoaders;
+  actions: Actions;
+}
+```
+
+#### `Dispensary`
+
+Complete dispensary information including location, hours, and capabilities.
+
+```typescript
+interface Dispensary {
+  id: string;
+  status: string;
+  name: string;
+  cname: string;                    // URL-friendly name
+  chain: string;
+  phone: string;
+  email: string;
+  hours: DispensaryHoursSettings;
+  orderTypes: DispensaryOrderTypes;
+  images: {
+    logo: string;
+  };
+  address: DispensaryAddress;
+  links: {
+    website: string;
+    storeFrontRoot: string;
+  };
+  orderTypesConfig: OrderTypesConfigV2;
+}
+```
+
+#### `Product`
+
+Product information with essential e-commerce data.
+
+```typescript
+interface Product {
+  id: string;
+  name: string;
+  cname: string;        // URL-friendly name
+  price: number;
+  image: string;
+  description: string;
+}
+```
+
+#### `User`
+
+Authenticated user information.
+
+```typescript
+interface User {
+  email: string;
+  firstName: string;
+  lastName: string;
+  birthday: string;
+}
+```
+
+#### `Cart`
+
+Current shopping cart state and totals.
+
+```typescript
+interface Cart {
+  items: CartItem[];
+  total: number;
+  subtotal: number;
+  tax: number;
+  discount: number;
+}
+
+interface CartItem {
+  productId: string;
+  name: string;
+  price: number;
+  quantity: number;
+}
+```
+
+### Category & Brand Types
+
+#### `Category`
+
+```typescript
+interface Category {
+  id: string;
+  name: string;
+  cname: string;
+}
+```
+
+#### `Brand`
+
+```typescript
+interface Brand {
+  id: string;
+  name: string;
+  cname: string;
+}
+```
+
+#### `Collection`
+
+```typescript
+interface Collection {
+  id: string;
+  name: string;
+  cname: string;
+}
+```
+
+### Business Hours & Order Types
+
+#### `DispensaryHoursSettings`
+
+```typescript
+interface DispensaryHoursSettings {
+  inStorePickup?: HoursSettingsForOrderType;
+  curbsidePickup?: HoursSettingsForOrderType;
+  driveThruPickup?: HoursSettingsForOrderType;
+  delivery?: HoursSettingsForOrderType;
+}
+
+interface HoursSettingsForOrderType {
+  enabled: boolean;
+  effectiveHours?: {
+    Monday?: DayHours;
+    Tuesday?: DayHours;
+    Wednesday?: DayHours;
+    Thursday?: DayHours;
+    Friday?: DayHours;
+    Saturday?: DayHours;
+    Sunday?: DayHours;
+  };
+}
+
+interface DayHours {
+  active?: boolean;
+  start?: string;    // "09:00"
+  end?: string;      // "21:00"
+}
+```
+
+#### `DispensaryOrderTypes`
+
+```typescript
+interface DispensaryOrderTypes {
+  pickup: boolean;
+  inStorePickup: boolean;
+  curbsidePickup: boolean;
+  driveThruPickup: boolean;
+  delivery: boolean;
+  kiosk: boolean;
+}
+```
+
+## Extension Components
+
+### `RemoteBoundaryComponent`
+
+The base type for all extension components that integrate with the Dutchie platform.
+
+```typescript
+type RemoteBoundaryComponent = React.FC & {
+  DataBridgeVersion: string;
+};
+```
+
+**Example:**
+
+```tsx
+const MyCustomHeader: RemoteBoundaryComponent = () => {
+  const { location, user, actions } = useDataBridge();
+  
+  return (
+    <header>
+      <h1>{location?.name}</h1>
+      {user ? (
+        <span>Welcome, {user.firstName}!</span>
+      ) : (
+        <button onClick={actions.goToLogin}>Login</button>
+      )}
+    </header>
+  );
+};
+
+MyCustomHeader.DataBridgeVersion = '0.2';
+```
+
+### `RemoteModuleRegistry`
+
+Registry for different types of extension components.
+
+```typescript
+interface RemoteModuleRegistry {
+  RouteablePages?: RoutablePageRegistryEntry[];
+  StoreFrontHeader?: RemoteBoundaryComponent;
+  StoreFrontNavigation?: RemoteBoundaryComponent;
+  StoreFrontFooter?: RemoteBoundaryComponent;
+  StoreFrontHero?: RemoteBoundaryComponent;
+  ProductDetailsPrimary?: RemoteBoundaryComponent;
+  ProductDetailsSecondary?: RemoteBoundaryComponent;
+}
+
+interface RoutablePageRegistryEntry {
+  path: string;
+  component: RemoteBoundaryComponent;
+}
+```
+
+## Actions API
+
+The actions object provides pre-built functions for common e-commerce operations.
+
+### Navigation Actions
+
+```typescript
+const { actions } = useDataBridge();
+
+// Page navigation
+actions.goToInfoPage();                                    // Navigate to store info
+actions.goToStoreFront();                                  // Navigate to store front
+actions.goToStoreLocator();                               // Navigate to store locator
+actions.goToStoreBrowser();                               // Navigate to store browser
+
+// Authentication
+actions.goToLogin();                                      // Navigate to login page
+actions.goToRegister();                                   // Navigate to registration
+
+// Product & category navigation
+actions.goToProductDetails('product-123');               // Navigate to product details
+actions.goToCategory('flower');                          // Navigate to category page
+actions.goToBrand('brand-456');                          // Navigate to brand page
+actions.goToStore('store-789', 'dispensary-name');       // Navigate to specific store
+actions.goToProductList('category-id', 'category-name'); // Navigate to product list
+actions.goToBrandList('brand-id', 'brand-name');         // Navigate to brand list
+
+// Checkout
+actions.goToCheckout();                                   // Navigate to checkout
+```
+
+### Cart Actions
+
+```typescript
+const { actions } = useDataBridge();
+
+// Cart visibility
+actions.showCart();                                       // Show cart sidebar/modal
+actions.hideCart();                                       // Hide cart sidebar/modal
+
+// Cart management
+actions.addToCart('product-123', 2);                     // Add 2 items to cart
+actions.removeFromCart('product-123');                   // Remove product from cart
+actions.updateCartItem('product-123', 5);                // Update quantity to 5
+actions.clearCart();                                      // Remove all items from cart
+```
+
+## Data Loaders
+
+Async functions for loading platform data. All loaders return promises that resolve to arrays.
+
+```typescript
+const { dataLoaders } = useDataBridge();
+
+// Location data
+const locations = await dataLoaders.getAllLocations();    // All dispensary locations
+const currentLocations = await dataLoaders.locations();  // Current context locations
+
+// Catalog data
+const categories = await dataLoaders.categories();        // Product categories
+const brands = await dataLoaders.brands();              // Available brands
+const products = await dataLoaders.products();          // Product catalog
+const collections = await dataLoaders.collections();    // Product collections
+```
+
+**Note:** All data loaders return empty arrays (`[]`) when no data is available.
+
+## Examples
+
+### Complete Product Catalog Component
+
+```tsx
+import React from 'react';
+import { useDataBridge, useAsyncLoader, RemoteBoundaryComponent } from '@dutchie/ecommerce-extensions-sdk';
+
+const ProductCatalog: RemoteBoundaryComponent = () => {
+  const { dataLoaders, actions, cart } = useDataBridge();
+  
+  const { data: products, isLoading: productsLoading } = useAsyncLoader(dataLoaders.products);
+  const { data: categories, isLoading: categoriesLoading } = useAsyncLoader(dataLoaders.categories);
+  
+  const [selectedCategory, setSelectedCategory] = React.useState<string>('');
+  
+  const filteredProducts = selectedCategory
+    ? products?.filter(product => /* filter logic */)
+    : products || [];
+  
+  if (productsLoading || categoriesLoading) {
+    return <div className="loading">Loading catalog...</div>;
+  }
+  
+  return (
+    <div className="product-catalog">
+      <div className="filters">
+        <select 
+          value={selectedCategory} 
+          onChange={(e) => setSelectedCategory(e.target.value)}
+        >
+          <option value="">All Categories</option>
+          {categories?.map(category => (
+            <option key={category.id} value={category.id}>
+              {category.name}
+            </option>
+          ))}
+        </select>
+      </div>
+      
+      <div className="product-grid">
+        {filteredProducts.map(product => (
+          <div key={product.id} className="product-card">
+            <img src={product.image} alt={product.name} />
+            <h3>{product.name}</h3>
+            <p>${product.price.toFixed(2)}</p>
+            <p>{product.description}</p>
+            
+            <div className="product-actions">
+              <button 
+                onClick={() => actions.goToProductDetails(product.id)}
+              >
+                View Details
+              </button>
+              
+              <button 
+                onClick={() => actions.addToCart(product.id, 1)}
+              >
+                Add to Cart
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+      
+      {cart && cart.items.length > 0 && (
+        <div className="cart-summary">
+          <p>Cart: {cart.items.length} items - ${cart.total.toFixed(2)}</p>
+          <button onClick={actions.showCart}>View Cart</button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+ProductCatalog.DataBridgeVersion = '0.2';
+export default ProductCatalog;
+```
+
+### Custom Store Locator
+
+```tsx
+import React from 'react';
+import { useDataBridge, useAsyncLoader, RemoteBoundaryComponent } from '@dutchie/ecommerce-extensions-sdk';
+
+const StoreLocator: RemoteBoundaryComponent = () => {
+  const { dataLoaders, actions, location: currentLocation } = useDataBridge();
+  const { data: locations, isLoading } = useAsyncLoader(dataLoaders.getAllLocations);
+  
+  if (isLoading) return <div>Loading locations...</div>;
+  
+  const formatHours = (hours: any) => {
+    if (!hours?.effectiveHours) return 'Hours not available';
+    
+    const today = new Date().toLocaleDateString('en-US', { weekday: 'long' });
+    const todayHours = hours.effectiveHours[today];
+    
+    if (!todayHours?.active) return 'Closed today';
+    return `${todayHours.start} - ${todayHours.end}`;
+  };
+  
+  return (
+    <div className="store-locator">
+      <h2>Find a Store</h2>
+      
+      {locations?.map(store => (
+        <div 
+          key={store.id} 
+          className={`store-card ${store.id === currentLocation?.id ? 'current' : ''}`}
+        >
+          <div className="store-header">
+            <img src={store.images.logo} alt={`${store.name} logo`} />
+            <div>
+              <h3>{store.name}</h3>
+              <p className="chain">{store.chain}</p>
+            </div>
+          </div>
+          
+          <div className="store-details">
+            <div className="address">
+              <p>{store.address.street1}</p>
+              {store.address.street2 && <p>{store.address.street2}</p>}
+              <p>{store.address.city}, {store.address.stateAbbreviation} {store.address.zip}</p>
+            </div>
+            
+            <div className="contact">
+              <p>📞 {store.phone}</p>
+              <p>✉️ {store.email}</p>
+            </div>
+            
+            <div className="hours">
+              <p><strong>Today:</strong> {formatHours(store.hours.inStorePickup)}</p>
+            </div>
+            
+            <div className="services">
+              {store.orderTypes.inStorePickup && <span className="service">In-Store Pickup</span>}
+              {store.orderTypes.curbsidePickup && <span className="service">Curbside</span>}
+              {store.orderTypes.delivery && <span className="service">Delivery</span>}
+            </div>
+          </div>
+          
+          <div className="store-actions">
+            <button onClick={() => actions.goToStore(store.id, store.cname)}>
+              Visit Store
+            </button>
+            {store.links.website && (
+              <a href={store.links.website} target="_blank" rel="noopener noreferrer">
+                Website
+              </a>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+StoreLocator.DataBridgeVersion = '0.2';
+export default StoreLocator;
+```
+
+### Enhanced Cart Component
+
+```tsx
+import React from 'react';
+import { useDataBridge, RemoteBoundaryComponent } from '@dutchie/ecommerce-extensions-sdk';
+
+const EnhancedCart: RemoteBoundaryComponent = () => {
+  const { cart, actions, location } = useDataBridge();
+  
+  if (!cart || cart.items.length === 0) {
+    return (
+      <div className="empty-cart">
+        <h3>Your cart is empty</h3>
+        <button onClick={actions.goToStoreFront}>
+          Continue Shopping
+        </button>
+      </div>
+    );
+  }
+  
+  return (
+    <div className="enhanced-cart">
+      <div className="cart-header">
+        <h2>Your Cart</h2>
+        <p>Order from {location?.name}</p>
+      </div>
+      
+      <div className="cart-items">
+        {cart.items.map(item => (
+          <div key={item.productId} className="cart-item">
+            <div className="item-details">
+              <h4>{item.name}</h4>
+              <p className="price">${item.price.toFixed(2)} each</p>
+            </div>
+            
+            <div className="quantity-controls">
+              <button 
+                onClick={() => actions.updateCartItem(item.productId, item.quantity - 1)}
+                disabled={item.quantity <= 1}
+              >
+                -
+              </button>
+              <span className="quantity">{item.quantity}</span>
+              <button 
+                onClick={() => actions.updateCartItem(item.productId, item.quantity + 1)}
+              >
+                +
+              </button>
+            </div>
+            
+            <div className="item-total">
+              ${(item.price * item.quantity).toFixed(2)}
+            </div>
+            
+            <button 
+              className="remove-item"
+              onClick={() => actions.removeFromCart(item.productId)}
+            >
+              Remove
+            </button>
+          </div>
+        ))}
+      </div>
+      
+      <div className="cart-summary">
+        <div className="summary-line">
+          <span>Subtotal:</span>
+          <span>${cart.subtotal.toFixed(2)}</span>
+        </div>
+        
+        {cart.discount > 0 && (
+          <div className="summary-line discount">
+            <span>Discount:</span>
+            <span>-${cart.discount.toFixed(2)}</span>
+          </div>
+        )}
+        
+        <div className="summary-line">
+          <span>Tax:</span>
+          <span>${cart.tax.toFixed(2)}</span>
+        </div>
+        
+        <div className="summary-line total">
+          <span><strong>Total:</strong></span>
+          <span><strong>${cart.total.toFixed(2)}</strong></span>
+        </div>
+      </div>
+      
+      <div className="cart-actions">
+        <button 
+          className="clear-cart"
+          onClick={actions.clearCart}
+        >
+          Clear Cart
+        </button>
+        
+        <button 
+          className="checkout-btn"
+          onClick={actions.goToCheckout}
+        >
+          Proceed to Checkout
+        </button>
+      </div>
+    </div>
+  );
+};
+
+EnhancedCart.DataBridgeVersion = '0.2';
+export default EnhancedCart;
+```
+
+## Best Practices
+
+### 1. Error Handling
+
+Always wrap `useDataBridge()` calls in error boundaries and handle loading states:
+
+```tsx
+const SafeComponent = () => {
+  try {
+    const { dataLoaders } = useDataBridge();
+    const { data, isLoading } = useAsyncLoader(dataLoaders.products);
+    
+    if (isLoading) return <LoadingSpinner />;
+    if (!data) return <ErrorMessage message="Failed to load products" />;
+    
+    return <ProductList products={data} />;
+  } catch (error) {
+    return <ErrorFallback error={error} />;
+  }
+};
+```
+
+### 2. Performance Optimization
+
+Use React.memo and useMemo for expensive operations:
+
+```tsx
+const ProductCard = React.memo(({ product, onAddToCart }) => {
+  const formattedPrice = React.useMemo(() => 
+    new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(product.price),
+    [product.price]
+  );
+  
+  return (
+    <div className="product-card">
+      <h3>{product.name}</h3>
+      <p>{formattedPrice}</p>
+      <button onClick={() => onAddToCart(product.id, 1)}>
+        Add to Cart
+      </button>
+    </div>
+  );
+});
+```
+
+### 3. TypeScript Best Practices
+
+Leverage the provided types for better development experience:
+
+```tsx
+import { Product, Category, useDataBridge } from '@dutchie/ecommerce-extensions-sdk';
+
+interface ProductFilterProps {
+  products: Product[];
+  categories: Category[];
+  onFilterChange: (categoryId: string) => void;
+}
+
+const ProductFilter: React.FC<ProductFilterProps> = ({ 
+  products, 
+  categories, 
+  onFilterChange 
+}) => {
+  // Implementation
+};
+```
+
+### 4. Context Usage
+
+Always check for data availability before using:
+
+```tsx
+const UserProfile = () => {
+  const { user, actions } = useDataBridge();
+  
+  if (!user) {
+    return (
+      <div className="login-prompt">
+        <p>Please log in to view your profile</p>
+        <button onClick={actions.goToLogin}>Login</button>
+      </div>
+    );
+  }
+  
+  return (
+    <div className="user-profile">
+      <h2>Welcome, {user.firstName}!</h2>
+      {/* Profile content */}
+    </div>
+  );
+};
+```
+
+## Development
+
+### Setup
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start development mode
+pnpm dev
+
+# Build for production
+pnpm build
+
+# Run tests
+pnpm test
+
+# Format code
+pnpm format
+
+# Lint and fix
+pnpm check
+```
+
+### Building Extensions
+
+1. Create your extension component
+2. Set the `DataBridgeVersion` property
+3. Export your component
+4. Build and deploy using the Dutchie Pro Deployment platform
+
+### Testing
+
+The SDK includes utilities for testing your extensions:
+
+```tsx
+import { render, screen } from '@testing-library/react';
+import { DataBridgeContext } from '@dutchie/ecommerce-extensions-sdk';
+import MyExtension from './MyExtension';
+
+const mockDataBridge = {
+  menuContext: 'store-front' as const,
+  location: { id: '1', name: 'Test Dispensary' },
+  dataLoaders: {
+    products: jest.fn().mockResolvedValue([]),
+    // ... other loaders
+  },
+  actions: {
+    addToCart: jest.fn(),
+    // ... other actions
+  }
+};
+
+test('renders extension correctly', () => {
+  render(
+    <DataBridgeContext.Provider value={mockDataBridge}>
+      <MyExtension />
+    </DataBridgeContext.Provider>
+  );
+  
+  expect(screen.getByText('Test Dispensary')).toBeInTheDocument();
+});
+```
+
+## Support
+
+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
+
+---
+  
+**License:** MIT  
+**Node Version:** >=16.0.0

package/dist/context/ecommerce-data-bridge.d.ts

@@ -0,0 +1,8 @@
+import { CommerceComponentsDataInterface } from "../types/dutchie-data-bridge";
+export declare const DutchieDataBridgeVersion: string;
+export declare const DutchieDataBridgeContext: import("react").Context<CommerceComponentsDataInterface | undefined>;
+export declare const useDutchieDataBridge: () => CommerceComponentsDataInterface;
+export declare const useAsyncLoader: (fn: () => Promise<unknown>) => {
+    data: unknown;
+    isLoading: boolean;
+};

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

@@ -0,0 +1,22 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__package_json_1116eba2__ from "../../package.json";
+const DutchieDataBridgeVersion = __WEBPACK_EXTERNAL_MODULE__package_json_1116eba2__["default"].version;
+const DutchieDataBridgeContext = (0, __WEBPACK_EXTERNAL_MODULE_react__.createContext)(void 0);
+const useDutchieDataBridge = ()=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(DutchieDataBridgeContext);
+    if (void 0 === context) throw new Error('useDutchieDataBridge must be used within a DutchieDataBridgeProvider');
+    return context;
+};
+const useAsyncLoader = (fn)=>{
+    const [data, setData] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        fn().then(setData);
+    }, [
+        fn
+    ]);
+    return {
+        data,
+        isLoading: null === data
+    };
+};
+export { DutchieDataBridgeContext, DutchieDataBridgeVersion, useAsyncLoader, useDutchieDataBridge };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types/dutchie-data-bridge';
+export * from './types/ecommerce-extension';
+export * from './context/ecommerce-data-bridge';

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from "./types/dutchie-data-bridge.js";
+export * from "./types/ecommerce-extension.js";
+export * from "./context/ecommerce-data-bridge.js";

package/dist/types/dutchie-data-bridge.d.ts

@@ -0,0 +1,109 @@
+export type CommerceComponentsDataInterface = {
+    menuContext: CommerceComponentsMenuContext;
+    location?: Dispensary;
+    user?: User;
+    cart?: Cart;
+    dataLoaders: {
+        getAllLocations: () => Promise<Dispensary[] | []>;
+    };
+    actions: {
+        goToInfoPage: () => void;
+        goToStoreFront: () => void;
+        goToStoreLocator: () => void;
+        goToStoreBrowser: () => void;
+        openLogin: () => void;
+        openSignUp: () => void;
+    };
+};
+export type HoursSettingsForOrderType = {
+    enabled: boolean;
+    effectiveHours?: {
+        Monday?: DayHours;
+        Tuesday?: DayHours;
+        Wednesday?: DayHours;
+        Thursday?: DayHours;
+        Friday?: DayHours;
+        Saturday?: DayHours;
+        Sunday?: DayHours;
+    };
+};
+export type DayHours = {
+    active?: boolean;
+    start?: string;
+    end?: string;
+};
+export type DispensaryHoursSettings = {
+    inStorePickup?: HoursSettingsForOrderType;
+    curbsidePickup?: HoursSettingsForOrderType;
+    driveThruPickup?: HoursSettingsForOrderType;
+    delivery?: HoursSettingsForOrderType;
+};
+export type OrderTypeConfig = {
+    enableASAPOrdering?: boolean;
+    enableScheduledOrdering?: boolean;
+    enableAfterHoursOrdering?: boolean;
+};
+export type OrderTypesConfigV2 = {
+    inStorePickup?: OrderTypeConfig;
+    curbsidePickup?: OrderTypeConfig;
+    driveThruPickup?: OrderTypeConfig;
+    delivery?: OrderTypeConfig;
+    offerAnyPickupService?: boolean;
+    offerDeliveryService?: boolean;
+};
+export type DispensaryOrderTypes = {
+    pickup: boolean;
+    inStorePickup: boolean;
+    curbsidePickup: boolean;
+    driveThruPickup: boolean;
+    delivery: boolean;
+    kiosk: boolean;
+};
+export type DispensaryAddress = {
+    street1: string;
+    street2: string;
+    city: string;
+    state: string;
+    stateAbbreviation: string;
+    zip: string;
+};
+export type Dispensary = {
+    id: string;
+    status: string;
+    name: string;
+    cname: string;
+    chain: string;
+    phone: string;
+    email: string;
+    hours: DispensaryHoursSettings;
+    orderTypes: DispensaryOrderTypes;
+    images: {
+        logo: string;
+    };
+    address: DispensaryAddress;
+    links: {
+        website: string;
+        storeFrontRoot: string;
+    };
+    orderTypesConfig: OrderTypesConfigV2;
+};
+export type User = {
+    email: string;
+    firstName: string;
+    lastName: string;
+    birthday: string;
+};
+export type CartItem = {
+    productId: string;
+    name: string;
+    price: number;
+    quantity: number;
+};
+export type Cart = {
+    items: CartItem[];
+    total: number;
+    subtotal: number;
+    tax: number;
+    discount: number;
+};
+export type CommerceComponentsMenuContext = 'store-front' | 'kiosk';

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

@@ -0,0 +1,16 @@
+export type RemoteBoundaryComponent = React.FC & {
+    DataBridgeVersion: string;
+};
+export type RoutablePageRegistryEntry = {
+    path: string;
+    component: RemoteBoundaryComponent;
+};
+export type RemoteModuleRegistry = {
+    RouteablePages?: RoutablePageRegistryEntry[];
+    StoreFrontHeader?: RemoteBoundaryComponent;
+    StoreFrontNavigation?: RemoteBoundaryComponent;
+    StoreFrontFooter?: RemoteBoundaryComponent;
+    StoreFrontHero?: RemoteBoundaryComponent;
+    ProductDetailsPrimary?: RemoteBoundaryComponent;
+    ProductDetailsSecondary?: RemoteBoundaryComponent;
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@dutchiesdk/ecommerce-extensions-sdk",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.6.0",
+  "license": "MIT",
+  "type": "module",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "check": "biome check --write",
+    "dev": "rslib build --watch",
+    "format": "biome format --write",
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@rsbuild/plugin-react": "^1.3.2",
+    "@rslib/core": "^0.9.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^17.0.0",
+    "jsdom": "^26.1.0",
+    "react": "^17.0.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
+}