@dutchiesdk/ecommerce-extensions-sdk 0.6.3 → 0.8.0

package/README.md

@@ -1,37 +1,18 @@
-
-
 ![Dutchie Logo](https://cdn.prod.website-files.com/61930755e474060ca6298871/64a32a14b7840d452f594fbc_Logo.svg)
 
-# @dutchiesdk/ecommerce-extensions-sdk 
+# @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.
+This SDK provides certified agency partners with the tools needed to create powerful, integrated e-commerce experiences for cannabis retailers on the Dutchie Ecommerce Pro platform.
 
 > ⚠️ **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)
+To request access to the development environment contact: **partners@dutchie.com**. Please include your agency information and intended use case when requesting access.
 
 ## Installation
 
@@ -39,19 +20,21 @@ Please include your agency information and intended use case when requesting acc
 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';
+import React from "react";
+import {
+  useDataBridge,
+  RemoteBoundaryComponent,
+  DataBridgeVersion,
+} from "@dutchie/ecommerce-extensions-sdk";
 
 const MyExtension: RemoteBoundaryComponent = () => {
   const { dataLoaders, actions, location, user, cart } = useDataBridge();
-  
+
   return (
     <div>
       <h1>Welcome to {location?.name}</h1>
@@ -60,20 +43,11 @@ const MyExtension: RemoteBoundaryComponent = () => {
   );
 };
 
-MyExtension.DataBridgeVersion = '0.2';
+MyExtension.DataBridgeVersion = DataBridgeVersion;
 
 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()`
@@ -81,18 +55,18 @@ The Dutchie Ecommerce Extensions SDK is built around several key concepts:
 The primary hook for accessing the Dutchie platform data and functionality.
 
 ```tsx
-import { useDataBridge } from '@dutchie/ecommerce-extensions-sdk';
+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
+    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
 };
 ```
@@ -104,17 +78,20 @@ 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();
   const { data: products, isLoading } = useAsyncLoader(dataLoaders.products);
-  
+
   if (isLoading) return <div>Loading products...</div>;
-  
+
   return (
     <div>
-      {products?.map(product => (
+      {products?.map((product) => (
         <div key={product.id}>{product.name}</div>
       ))}
     </div>
@@ -122,24 +99,15 @@ const ProductList = () => {
 };
 ```
 
-**Parameters:**
-- `fn`: `() => Promise<unknown>` - Async function to execute
+## Data Types
 
-**Returns:**
-- `data`: The resolved data or `null` while loading
-- `isLoading`: Boolean indicating loading state
-
-## Data Types Reference
-
-### Core Platform Types
-
-#### `CommerceComponentsDataInterface`
+### `CommerceComponentsDataInterface`
 
 The main interface providing access to all platform data and functionality.
 
 ```typescript
 interface CommerceComponentsDataInterface {
-  menuContext: 'store-front' | 'kiosk';
+  menuContext: "store-front" | "kiosk";
   location?: Dispensary;
   user?: User;
   cart?: Cart;
@@ -148,159 +116,6 @@ interface CommerceComponentsDataInterface {
 }
 ```
 
-#### `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`
@@ -318,7 +133,7 @@ type RemoteBoundaryComponent = React.FC & {
 ```tsx
 const MyCustomHeader: RemoteBoundaryComponent = () => {
   const { location, user, actions } = useDataBridge();
-  
+
   return (
     <header>
       <h1>{location?.name}</h1>
@@ -331,75 +146,31 @@ const MyCustomHeader: RemoteBoundaryComponent = () => {
   );
 };
 
-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;
-}
+MyCustomHeader.DataBridgeVersion = "0.2";
 ```
 
 ## Actions API
 
 The actions object provides pre-built functions for common e-commerce operations.
 
-### Navigation Actions
+It can be used to route:
 
 ```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
+actions.goToLogin(); // Navigate to login page
 
 // 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
+actions.goToProductDetails("product-123"); // Navigate to product details
 ```
 
-### Cart Actions
+Or to update state:
 
 ```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
+actions.addToCart("product-123", 2); // Add 2 items to cart
+actions.clearCart(); // Remove all items from cart
 ```
 
 ## Data Loaders
@@ -410,293 +181,15 @@ Async functions for loading platform data. All loaders return promises that reso
 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
+const locations = await dataLoaders.getAllLocations(); // All dispensary locations
+const currentLocations = await dataLoaders.locations(); // Current context locations
 ```
 
 **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
+### Error Handling
 
 Always wrap `useDataBridge()` calls in error boundaries and handle loading states:
 
@@ -705,10 +198,10 @@ 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} />;
@@ -716,38 +209,16 @@ const SafeComponent = () => {
 };
 ```
 
-### 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
+### TypeScript Best Practices
 
 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[];
@@ -755,23 +226,23 @@ interface ProductFilterProps {
   onFilterChange: (categoryId: string) => void;
 }
 
-const ProductFilter: React.FC<ProductFilterProps> = ({ 
-  products, 
-  categories, 
-  onFilterChange 
+const ProductFilter: React.FC<ProductFilterProps> = ({
+  products,
+  categories,
+  onFilterChange,
 }) => {
   // Implementation
 };
 ```
 
-### 4. Context Usage
+### Context Usage
 
 Always check for data availability before using:
 
 ```tsx
 const UserProfile = () => {
   const { user, actions } = useDataBridge();
-  
+
   if (!user) {
     return (
       <div className="login-prompt">
@@ -780,7 +251,7 @@ const UserProfile = () => {
       </div>
     );
   }
-  
+
   return (
     <div className="user-profile">
       <h2>Welcome, {user.firstName}!</h2>
@@ -790,49 +261,16 @@ const UserProfile = () => {
 };
 ```
 
-## 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';
+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' },
+  menuContext: "store-front" as const,
+  location: { id: "1", name: "Test Dispensary" },
   dataLoaders: {
     products: jest.fn().mockResolvedValue([]),
     // ... other loaders
@@ -840,20 +278,54 @@ const mockDataBridge = {
   actions: {
     addToCart: jest.fn(),
     // ... other actions
-  }
+  },
 };
 
-test('renders extension correctly', () => {
+test("renders extension correctly", () => {
   render(
     <DataBridgeContext.Provider value={mockDataBridge}>
       <MyExtension />
     </DataBridgeContext.Provider>
   );
-  
-  expect(screen.getByText('Test Dispensary')).toBeInTheDocument();
+
+  expect(screen.getByText("Test Dispensary")).toBeInTheDocument();
+});
+```
+
+### 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>
+  );
 });
 ```
 
+## 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
+
 ## Support
 
 For technical support and questions about the Dutchie Ecommerce Extensions SDK:
@@ -861,8 +333,3 @@ 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