@instockng/storefront-ui 1.0.18 → 1.0.20

package/src/providers/StorefrontProvider.tsx

@@ -26,8 +26,9 @@
  */
 
 import { ReactNode } from 'react';
-import { ApiClientProvider } from '@instockng/api-client';
+import { ApiClientProvider, useGetBrand } from '@instockng/api-client';
 import { CartProvider, CartProviderProps } from '../contexts/CartContext';
+import { MetaPixelProvider } from './MetaPixelProvider';
 
 export interface StorefrontProviderProps {
   /** Your children components */
@@ -42,11 +43,36 @@ export interface StorefrontProviderProps {
   shoppingCartProps?: CartProviderProps['shoppingCartProps'];
 }
 
+/**
+ * Internal component that fetches brand config and wraps children with MetaPixelProvider
+ */
+function StorefrontProviderInner({
+  children,
+  brandSlug,
+  initialCartId,
+  shoppingCartProps,
+}: Omit<StorefrontProviderProps, 'apiUrl'>) {
+  const { data: brand } = useGetBrand(brandSlug);
+
+  return (
+    <MetaPixelProvider pixelId={brand?.metaPixelId}>
+      <CartProvider
+        brandSlug={brandSlug}
+        initialCartId={initialCartId}
+        shoppingCartProps={shoppingCartProps}
+      >
+        {children}
+      </CartProvider>
+    </MetaPixelProvider>
+  );
+}
+
 /**
  * All-in-one provider for @oms/storefront-ui
  *
  * Wraps your app with:
  * - ApiClientProvider (for API configuration and React Query)
+ * - MetaPixelProvider (for Meta Pixel tracking based on brand config)
  * - CartProvider (for cart state management)
  */
 export function StorefrontProvider({
@@ -58,13 +84,13 @@ export function StorefrontProvider({
 }: StorefrontProviderProps) {
   return (
     <ApiClientProvider {...(apiUrl && { baseURL: apiUrl })}>
-      <CartProvider
+      <StorefrontProviderInner
         brandSlug={brandSlug}
         initialCartId={initialCartId}
         shoppingCartProps={shoppingCartProps}
       >
         {children}
-      </CartProvider>
+      </StorefrontProviderInner>
     </ApiClientProvider>
   );
 }