Add support for onDataChanged and user-id

Author: dgoemans

src/faslet-widget.tsx

@@ -29,6 +29,16 @@ export interface FasletWidgetProps {
   shopPageUrl?: string
   onAddToCart?: (id: string) => Promise<unknown>
   onResult?: ({ label }: { label: string }, resultType: 'auto' | 'result-screen') => unknown
+  onDataChanged?: (userData: {
+    userId: string
+    widgetVersion?: string
+    seenExperiments?: string
+    experimentVariants?: string
+    profile?: unknown
+  }) => unknown
+  userId?: string
+  onButtonShow?: () => unknown
+  onButtonHidden?: () => unknown
 }
 
 export function FasletWidget({
@@ -45,6 +55,10 @@ export function FasletWidget({
   onAddToCart,
   shopPageUrl,
   onResult,
+  onDataChanged,
+  userId,
+  onButtonShow,
+  onButtonHidden,
 }: FasletWidgetProps) {
   // Add script tag to head
   useEffect(() => {
@@ -83,6 +97,9 @@ export function FasletWidget({
     shopUrl: shopPageUrl,
     addToCart: onAddToCart,
     onResult,
+    onDataChanged,
+    onButtonShow,
+    onButtonHidden,
   }
 
   const extraAttributes: Record<string, any> = {}
@@ -91,6 +108,10 @@ export function FasletWidget({
     extraAttributes['disable-product-recommendations'] = true
   }
 
+  if (userId) {
+    extraAttributes['user-id'] = userId
+  }
+
   return (
     <faslet-app
       shop-id={shopId}

src/global.d.ts

@@ -1,34 +1,38 @@
 interface Window {
   _faslet?: {
-    id: string; // The product identifier
-    sku: string; // The product SKU if it exists
-    shopUrl: string;
-    addToCart?: (variantId: string) => Promise<unknown>;
-    onButtonShow?: () => unknown;
-    onButtonHidden?: () => unknown;
-    openWidget?: () => unknown;
-    onResult?: (
-      { label: string },
-      resultType: 'auto' | 'result-screen'
-    ) => unknown;
-    onColorSelected?: (colorId: string) => unknown;
-    selectColor?: (colorId: string) => unknown;
+    id: string // The product identifier
+    sku: string // The product SKU if it exists
+    shopUrl: string
+    addToCart?: (variantId: string) => Promise<unknown>
+    onButtonShow?: () => unknown
+    onButtonHidden?: () => unknown
+    openWidget?: () => unknown
+    onResult?: ({ label: string }, resultType: 'auto' | 'result-screen') => unknown
+    onColorSelected?: (colorId: string) => unknown
+    selectColor?: (colorId: string) => unknown
     variants: {
-      size: string;
-      color?: string;
-      id: string;
-      available: boolean;
-      sku: string;
-      price?: number;
-      imageUrl?: string;
-    }[];
+      size: string
+      color?: string
+      id: string
+      available: boolean
+      sku: string
+      price?: number
+      imageUrl?: string
+    }[]
     colors?: {
-      id: string;
-      name: string;
-    }[];
-  };
+      id: string
+      name: string
+    }[]
+    onDataChanged?: (userData: {
+      userId: string
+      widgetVersion?: string
+      seenExperiments?: string
+      experimentVariants?: string
+      profile?: unknown
+    }) => unknown
+  }
   _faslet_orders?: {
-    configure: () => unknown;
-    event: (name: string, shopId: string, eventData: unknown) => unknown;
-  };
+    configure: () => unknown
+    event: (name: string, shopId: string, eventData: unknown) => unknown
+  }
 }