@liquidcommercedev/rmn-sdk 1.5.0-beta.12 → 1.5.0-beta.14

package/dist/index.esm.js

@@ -6864,40 +6864,60 @@ class ObjectHelper {
 /**
  * Recursively extracts ID values from a nested data structure.
  * Searches for specified property names and collects their primitive values (strings/numbers).
+ * Captures properties ending with 'id' and any additional specified property names.
  *
  * @param data - The data structure to search through (can be nested objects/arrays)
- * @param propertyNames - Array of property names to look for
+ * @param propertyNames - Array of additional property names to look for (optional)
  * @returns Array of extracted ID values (strings/numbers only)
  *
  * @example
  * const data = {
  *   id: [1, 2, 3],
- *   nested: { id: 'abc' },
- *   items: [{ id: 456 }]
+ *   nested: { id: 'abc', userId: 123 },
+ *   items: [{ id: 456, productId: '789', sku: 'ABC123' }]
  * };
- * extractDeepIds(data); // Returns [1, 2, 3, 'abc', 456]
+ * extractDeepIds(data); // Returns [1, 2, 3, 'abc', 123, 456, '789', 'ABC123']
  */
 function extractDeepIds(data, propertyNames) {
     const ids = [];
-    const defaulPropertyNames = [
-        'id',
-        'upc',
-        'groupingId',
-        'sku',
-        'productId',
-        'item_id',
-        'isbn',
-        'asin',
-        'mpn',
+    const defaultPropertyNames = [
+        // Universal product identifiers
+        'gtin', // Global Trade Item Number
+        'gtin8', // 8-digit GTIN
+        'gtin12', // 12-digit GTIN (UPC)
+        'gtin13', // 13-digit GTIN (EAN)
+        'gtin14', // 14-digit GTIN
+        'mpn', // Manufacturer Part Number
+        'sku', // Stock Keeping Unit
+        'upc', // Universal Product Code
+        'ean', // European Article Number
+        'isbn', // International Standard Book Number
+        'isbn10', // 10-digit ISBN
+        'isbn13', // 13-digit ISBN
+        'asin', // Amazon Standard Identification Number
+        // Product codes and references
+        'coupon',
+        'barcode',
+        'product_code',
+        'part_number',
         'model_number',
-        'article_number',
-        'variant_id',
+        'item_variant',
         'item_number',
-        'catalog_id',
-        'reference_id',
+        'article_number',
+        'reference',
+        'groupingId',
     ];
-    // Set for faster property name lookups
-    const propertySet = new Set(defaulPropertyNames);
+    // Convert property names to lowercase for consistent comparison
+    const additionalProperties = new Set((defaultPropertyNames).map((name) => name.toLowerCase()));
+    /**
+     * Checks if a property name is an ID field
+     * @param key - The property name to check
+     * @returns boolean indicating if the key is an ID field
+     */
+    const isIdField = (key) => {
+        const lowercaseKey = key.toLowerCase();
+        return lowercaseKey.endsWith('id') || additionalProperties.has(lowercaseKey);
+    };
     /**
      * Processes a value and extracts IDs if it matches criteria
      * @param value - The value to process
@@ -6908,7 +6928,7 @@ function extractDeepIds(data, propertyNames) {
         if (value == null)
             return;
         // If current key matches our target properties
-        if (currentKey && propertySet.has(currentKey)) {
+        if (currentKey && isIdField(currentKey)) {
             if (Array.isArray(value)) {
                 // Filter and push valid array values in one pass
                 ids.push(...value.filter((item) => typeof item === 'string' || typeof item === 'number'));
@@ -6930,7 +6950,7 @@ function extractDeepIds(data, propertyNames) {
         }
     };
     processValue(data);
-    return ids; // No need to filter nulls as we handle that during collection
+    return ids;
 }
 // Fallback method using fetch if sendBeacon isn't available
 async function fallbackEventFire(url) {
@@ -16123,6 +16143,7 @@ class AuthService extends BaseApi {
 
 const SPOT_ELEMENT_TAG = 'spot-element';
 const CAROUSEL_ELEMENT_TAG = 'spot-carousel-element';
+const SKELETON_ELEMENT_TAG = 'spot-skeleton-element';
 const GFONT_PRECONNECT = `
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -16133,6 +16154,45 @@ const GFONT_SOURCE_SANS_3 = `
 const GFONT_CORMORANT = `
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap">
 `;
+const SPOT_DIMENSIONS = {
+    [RMN_SPOT_TYPE.RB_HOMEPAGE_HERO]: { width: 1140, height: 640 },
+    [RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE]: { width: 1140, height: 640 },
+    [RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE]: { width: 1140, height: 640 },
+    [RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE]: { width: 1140, height: 640 },
+    [RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT]: { width: 468, height: 410 },
+    [RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT]: { width: 224, height: 378 },
+    [RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT]: { width: 224, height: 410 },
+    [RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK]: { width: 887, height: 344 },
+    [RMN_SPOT_TYPE.RB_PRODUCT_UPCS]: { width: 1, height: 1 },
+    [RMN_SPOT_TYPE.RB_NAVIGATION_BANNER]: { width: 440, height: 220 },
+    [RMN_SPOT_TYPE.SMALL_RECTANGLE]: { width: 180, height: 150 },
+    [RMN_SPOT_TYPE.MEDIUM_RECTANGLE]: { width: 300, height: 250 },
+    [RMN_SPOT_TYPE.LARGE_RECTANGLE]: { width: 336, height: 280 },
+    [RMN_SPOT_TYPE.VERTICAL_RECTANGLE]: { width: 240, height: 400 },
+    [RMN_SPOT_TYPE.BANNER]: { width: 468, height: 60 },
+    [RMN_SPOT_TYPE.LEADERBOARD]: { width: 728, height: 90 },
+    [RMN_SPOT_TYPE.LARGE_LEADERBOARD]: { width: 970, height: 90 },
+    [RMN_SPOT_TYPE.BILLBOARD]: { width: 970, height: 250 },
+    [RMN_SPOT_TYPE.SKYSCRAPER]: { width: 120, height: 600 },
+    [RMN_SPOT_TYPE.WIDE_SKYSCRAPER]: { width: 160, height: 600 },
+    [RMN_SPOT_TYPE.HALF_PAGE]: { width: 300, height: 600 },
+    [RMN_SPOT_TYPE.SMALL_SQUARE]: { width: 200, height: 200 },
+    [RMN_SPOT_TYPE.SQUARE]: { width: 250, height: 250 },
+    [RMN_SPOT_TYPE.VERTICAL_BANNER]: { width: 120, height: 240 },
+    [RMN_SPOT_TYPE.BUTTON_2]: { width: 120, height: 60 },
+    [RMN_SPOT_TYPE.MICRO_BAR]: { width: 88, height: 31 },
+    [RMN_SPOT_TYPE.POP_UP]: { width: 550, height: 480 },
+    [RMN_SPOT_TYPE.PORTRAIT]: { width: 300, height: 1050 },
+    [RMN_SPOT_TYPE.SMARTPHONE_BANNER_1]: { width: 300, height: 50 },
+    [RMN_SPOT_TYPE.SMARTPHONE_BANNER_2]: { width: 320, height: 50 },
+    [RMN_SPOT_TYPE.MOBILE_PHONE_INTERSTITIAL_1]: { width: 640, height: 1136 },
+    [RMN_SPOT_TYPE.MOBILE_PHONE_INTERSTITIAL_2]: { width: 750, height: 1334 },
+    [RMN_SPOT_TYPE.MOBILE_PHONE_INTERSTITIAL_3]: { width: 1080, height: 1920 },
+    [RMN_SPOT_TYPE.FEATURE_PHONE_SMALL_BANNER]: { width: 120, height: 20 },
+    [RMN_SPOT_TYPE.FEATURE_PHONE_MEDIUM_BANNER]: { width: 168, height: 28 },
+    [RMN_SPOT_TYPE.FEATURE_PHONE_LARGE_BANNER]: { width: 216, height: 36 },
+    [RMN_SPOT_TYPE.IN_TEXT]: { width: 1, height: 1 },
+};
 
 class IntersectionObserverService {
     constructor(defaultOptions = {}) {
@@ -16971,6 +17031,118 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
     CarouselElement = CustomCarouselElement;
 }
 
+function SkeletonTemplate({ fluid, width, height }) {
+    return `
+    <style>
+     :host {
+        display: block;
+        position: relative;
+        box-sizing: border-box;
+        overflow: hidden;
+        width: ${fluid ? '100%' : `${width}px`};
+        height: ${fluid ? '100%' : `${height}px`};
+        background: #ffffff;
+        padding: 20px;
+        border-radius: 5px;
+      }
+
+      .content {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+      }
+
+      .image-placeholder {
+        width: 100%;
+        height: 100%;
+        background: #f0f0f0;
+        border-radius: 4px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .lines-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+      }
+
+      .line {
+        height: 20px;
+        background: #f0f0f0;
+        border-radius: 4px;
+        margin-bottom: 15px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .image-placeholder::after,
+      .line::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+          90deg,
+          rgba(255, 255, 255, 0) 0%,
+          rgba(255, 255, 255, 0.5) 50%,
+          rgba(255, 255, 255, 0) 100%
+        );
+        animation: shimmer 1.5s infinite;
+      }
+
+      .line.header {
+        width: 25%;
+      }
+
+      .line.description {
+        width: 65%;
+      }
+
+      .line.button {
+        width: 40%;
+      }
+
+      @keyframes shimmer {
+        0% {
+          transform: translateX(-100%);
+        }
+        100% {
+          transform: translateX(100%);
+        }
+      }
+    </style>
+
+    <div class="content">
+     <div class="image-placeholder"></div>
+      <div class="lines-container">
+        <div class="line header"></div>
+        <div class="line description"></div>
+        <div class="line button"></div>
+      </div>
+    </div>
+  `;
+}
+
+let SkeletonElement;
+if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
+    class CustomSkeletonElement extends HTMLElement {
+        constructor() {
+            super();
+            this.attachShadow({ mode: 'open' });
+        }
+        connectedCallback() {
+            if (!this.shadowRoot || !this.data)
+                return;
+            this.shadowRoot.innerHTML = SkeletonTemplate(this.data);
+        }
+    }
+    SkeletonElement = CustomSkeletonElement;
+}
+
 let SpotElement;
 if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
     class CustomSpotElement extends HTMLElement {
@@ -17078,15 +17250,14 @@ class ElementService {
      * @return {HTMLElement | null} - The html element or null if the browser environment is not available.
      */
     createSpotElement({ content, config }) {
-        var _a, _b;
+        var _a;
         if (!this.ensureBrowserEnvironmentAndDefineElement()) {
             return null;
         }
         const spot = document.createElement(SPOT_ELEMENT_TAG);
-        spot.setAttribute('type', (_a = config === null || config === void 0 ? void 0 : config.spot) !== null && _a !== void 0 ? _a : '');
         spot.data = {
             spot: config === null || config === void 0 ? void 0 : config.spot,
-            fluid: (_b = config === null || config === void 0 ? void 0 : config.fluid) !== null && _b !== void 0 ? _b : false,
+            fluid: (_a = config === null || config === void 0 ? void 0 : config.fluid) !== null && _a !== void 0 ? _a : false,
             ...config,
         };
         spot.content = content;
@@ -17114,6 +17285,27 @@ class ElementService {
         carousel.slides = slides;
         return carousel;
     }
+    /**
+     * Creates the skeleton html element based on the provided data using shadow dom.
+     *
+     * This method is only available in browser environments.
+     *
+     * @param {ICreateSkeletonElementParams} params - The parameters to create the final element.
+     *
+     * @return {HTMLElement | null} - The html element or null if the browser environment is not available.
+     */
+    createSkeletonElement(params) {
+        if (!this.ensureBrowserEnvironmentAndDefineElement()) {
+            return null;
+        }
+        const skeleton = document.createElement(SKELETON_ELEMENT_TAG);
+        const dimensions = SPOT_DIMENSIONS[params.spotType];
+        skeleton.data = {
+            fluid: params.fluid,
+            ...dimensions,
+        };
+        return skeleton;
+    }
     /**
      * Overrides the spot colors with the provided colors.
      *
@@ -17148,6 +17340,9 @@ class ElementService {
         if (!window.customElements.get(CAROUSEL_ELEMENT_TAG)) {
             window.customElements.define(CAROUSEL_ELEMENT_TAG, CarouselElement);
         }
+        if (!window.customElements.get(SKELETON_ELEMENT_TAG)) {
+            window.customElements.define(SKELETON_ELEMENT_TAG, SkeletonElement);
+        }
         return true;
     }
 }
@@ -18984,7 +19179,7 @@ class DataLayerMonitor {
         if (!eventName) {
             return null;
         }
-        const productIds = extractDeepIds(data.value);
+        const productIds = extractDeepIds(data);
         return {
             event: eventName,
             productIds,
@@ -19293,6 +19488,7 @@ class LiquidCommerceRmnClient {
         this.selectionService = SelectionService.getInstance(auth);
         this.elementService = ElementService.getInstance();
         this.eventService = EventService.getInstance();
+        this.intersectionObserver = new IntersectionObserverService();
     }
     /**
      * Makes a selection request on our server based on the provided data.
@@ -19316,24 +19512,29 @@ class LiquidCommerceRmnClient {
     async injectSpotElement(params) {
         var _a;
         if (typeof window === 'undefined' || typeof document === 'undefined') {
-            console.warn('LiquidCommerce Rmn Sdk: Methods which create elements are only available in browser environments.');
+            console.warn('LiquidCommerce Rmn Sdk: injectSpotElement method is only available in the browser environment.');
             return;
         }
         const config = params.config;
         let inject = params.inject;
+        // Handle no spots error state
         if (!inject.length) {
-            // Handle no spots error state
             this.eventService.handleSpotState('all', {
                 state: {
                     error: 'No spot elements provided for injection.',
-                    loading: false,
-                    mounted: false,
                 },
             });
             return;
         }
-        // Update the state of the spots to loading
-        this.updateSpotsState(inject);
+        // Identify the spot elements
+        for (const item of inject) {
+            this.eventService.handleSpotState(item.placementId, {
+                identifier: {
+                    placementId: item.placementId,
+                    spotType: item.spotType,
+                },
+            }, false);
+        }
         // Prevent duplicate placement ids
         const hasDuplicatePlacementIds = this.preventDuplicateSpotPlacementIds(inject);
         if (!hasDuplicatePlacementIds) {
@@ -19341,35 +19542,9 @@ class LiquidCommerceRmnClient {
         }
         // Prevent non-existent spot types
         inject = this.preventNonExistentSpotTypes(inject);
-        // Make the spot selection request
-        const response = await this.spotSelectionRequest({ ...params, inject });
-        // const response = await this.useSpotSelectionExample(inject);
-        // Handle the response
-        if (typeof response === 'object' && 'error' in response) {
-            // Handle request error state
-            this.eventService.handleSpotState('all', {
-                state: {
-                    error: response.error,
-                    mounted: false,
-                    loading: false,
-                },
-            });
-            return;
-        }
+        // Add Intersection Observer to the spot elements to track visibility
+        // This is useful for lazy loading the spot elements
         for (const item of inject) {
-            const itemConfig = (_a = item.config) !== null && _a !== void 0 ? _a : config;
-            const spots = response[item.placementId];
-            if (!(spots === null || spots === void 0 ? void 0 : spots.length)) {
-                // Handle no spots found error state
-                this.eventService.handleSpotState(item.placementId, {
-                    state: {
-                        error: `No spots found for type "${item.spotType}".`,
-                        mounted: false,
-                        loading: false,
-                    },
-                });
-                continue;
-            }
             const placementId = item.placementId.replace('#', '');
             const placement = document.getElementById(placementId);
             if (!placement) {
@@ -19377,8 +19552,6 @@ class LiquidCommerceRmnClient {
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `Placement not found for id "${placementId}".`,
-                        mounted: false,
-                        loading: false,
                     },
                 });
                 continue;
@@ -19392,43 +19565,73 @@ class LiquidCommerceRmnClient {
                 display: 'flex',
                 justifyContent: 'center',
             });
-            // Handle single spot
-            if (spots.length === 1) {
-                const isInjected = this.injectOneSpotElement(item, placement, spots[0], itemConfig);
-                if (!isInjected) {
-                    continue;
-                }
+            const skeletonElement = this.elementService.createSkeletonElement({
+                fluid: (_a = config === null || config === void 0 ? void 0 : config.fluid) !== null && _a !== void 0 ? _a : false,
+                spotType: item.spotType,
+            });
+            if (!skeletonElement) {
+                this.eventService.handleSpotState(item.placementId, {
+                    state: {
+                        error: `Failed to create skeleton loader element.`,
+                        mounted: false,
+                        loading: true,
+                    },
+                });
+                continue;
             }
-            // Handle multiple spots (carousel)
-            if (spots.length > 1) {
-                const isInjected = this.injectCarouselSpotElement(placement, spots, itemConfig);
-                if (!isInjected) {
-                    continue;
+            placement.replaceChildren(skeletonElement);
+            const spotPlacementIsNear = async () => {
+                var _a;
+                // Set the spot element to loading state
+                this.eventService.handleSpotState(item.placementId, {
+                    state: {
+                        loading: true,
+                    },
+                });
+                // Stop observing the placement
+                this.intersectionObserver.unobserve(placement);
+                // Make the spot selection request
+                const response = await this.spotSelectionRequest({ ...params, inject: [item] });
+                // const response = await this.useSpotSelectionExample(inject);
+                // Handle request error state
+                if (typeof response === 'object' && 'error' in response) {
+                    this.eventService.handleSpotState(item.placementId, {
+                        state: {
+                            error: response.error,
+                            mounted: false,
+                            loading: false,
+                        },
+                    });
+                    this.clearPlacement(item.placementId);
+                    return;
                 }
-            }
+                const itemConfig = (_a = item.config) !== null && _a !== void 0 ? _a : config;
+                const spots = response[item.placementId];
+                if (!(spots === null || spots === void 0 ? void 0 : spots.length)) {
+                    // Handle no spots found error state
+                    this.eventService.handleSpotState(item.placementId, {
+                        state: {
+                            error: `No spots found for type "${item.spotType}".`,
+                            mounted: false,
+                            loading: false,
+                        },
+                    });
+                    this.clearPlacement(item.placementId);
+                    return;
+                }
+                // Handle single spot
+                if (spots.length === 1) {
+                    this.injectOneSpotElement(item, placement, spots[0], itemConfig);
+                }
+                // Handle multiple spots (carousel)
+                if (spots.length > 1) {
+                    this.injectCarouselSpotElement(placement, spots, itemConfig);
+                }
+            };
+            this.intersectionObserver.observe(placement, spotPlacementIsNear, { rootMargin: '500px' });
         }
     }
-    /**
-     * Makes a selection request on our server based on the provided data.
-     *
-     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
-     *
-     * @return {Promise<ISpots | {error: string}>} - The spots response object.
-     */
-    async spotSelectionRequest(params) {
-        const { inject, filter, config } = params;
-        const request = {
-            url: config === null || config === void 0 ? void 0 : config.url,
-            filter,
-            spots: inject.map((item) => ({
-                placementId: item.placementId,
-                spot: item.spotType,
-                count: item === null || item === void 0 ? void 0 : item.count,
-                ...item === null || item === void 0 ? void 0 : item.filter,
-            })),
-        };
-        return this.spotSelection(request);
-    }
+    /** ========================= HELPER METHODS ========================= **/
     /**
      * Injects a carousel element with the provided spots into the placement.
      *
@@ -19497,7 +19700,8 @@ class LiquidCommerceRmnClient {
                     loading: false,
                 },
             });
-            return false;
+            this.clearPlacement(placement.id);
+            return;
         }
         placement.replaceChildren(carouselElement);
         this.eventService.handleSpotState(placement.id, {
@@ -19511,7 +19715,6 @@ class LiquidCommerceRmnClient {
                 error: undefined,
             },
         });
-        return true;
     }
     /**
      * Injects a single spot element into the provided placement.
@@ -19547,7 +19750,8 @@ class LiquidCommerceRmnClient {
                     loading: false,
                 },
             });
-            return false;
+            this.clearPlacement(injectItem.placementId);
+            return;
         }
         // Create the spot element
         const spotElement = this.elementService.createSpotElement({
@@ -19568,7 +19772,8 @@ class LiquidCommerceRmnClient {
                     loading: false,
                 },
             });
-            return false;
+            this.clearPlacement(injectItem.placementId);
+            return;
         }
         this.eventService.registerSpot({
             spot: spotData,
@@ -19587,7 +19792,38 @@ class LiquidCommerceRmnClient {
                 error: undefined,
             },
         });
-        return true;
+    }
+    /**
+     * Clears the placement element by removing all its children.
+     *
+     * @param {string} placementId - The placement id.
+     *
+     * @return {void}
+     */
+    clearPlacement(placementId) {
+        var _a;
+        (_a = document.getElementById(placementId)) === null || _a === void 0 ? void 0 : _a.replaceChildren();
+    }
+    /**
+     * Makes a selection request on our server based on the provided data.
+     *
+     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
+     *
+     * @return {Promise<ISpots | {error: string}>} - The spots response object.
+     */
+    async spotSelectionRequest(params) {
+        const { inject, filter, config } = params;
+        const request = {
+            url: config === null || config === void 0 ? void 0 : config.url,
+            filter,
+            spots: inject.map((item) => ({
+                placementId: item.placementId,
+                spot: item.spotType,
+                count: item === null || item === void 0 ? void 0 : item.count,
+                ...item === null || item === void 0 ? void 0 : item.filter,
+            })),
+        };
+        return this.spotSelection(request);
     }
     /**
      * Prevents duplicate placement ids in the inject data.
@@ -19605,8 +19841,6 @@ class LiquidCommerceRmnClient {
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `Duplicate placement id (${item.placementId}) found. Please provide a unique placement id for each spot element.`,
-                        mounted: false,
-                        loading: false,
                     },
                 });
                 return false;
@@ -19615,6 +19849,12 @@ class LiquidCommerceRmnClient {
         }
         return true;
     }
+    /**
+     * Prevents non-existent spot types in the inject data.
+     *
+     * @param {IInjectSpotElement[]} inject - The inject data.
+     * @return {IInjectSpotElement[]} - The filtered inject data.
+     */
     preventNonExistentSpotTypes(inject) {
         const newInject = [];
         for (const item of inject) {
@@ -19622,8 +19862,6 @@ class LiquidCommerceRmnClient {
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `Invalid spot type (${item.spotType}) found. Please provide a valid spot type for each spot element.`,
-                        mounted: false,
-                        loading: false,
                     },
                 });
                 continue;
@@ -19632,22 +19870,7 @@ class LiquidCommerceRmnClient {
         }
         return newInject;
     }
-    // Initialize spots with loading state and identifiers
-    updateSpotsState(inject) {
-        for (const item of inject) {
-            this.eventService.handleSpotState(item.placementId, {
-                identifier: {
-                    placementId: item.placementId,
-                    spotType: item.spotType,
-                },
-                state: {
-                    loading: true,
-                    mounted: false,
-                    error: undefined,
-                },
-            });
-        }
-    }
+    // Use spot selection example data for private testing
     useSpotSelectionExample(inject) {
         const examples = { ...RB_SPOTS_SELECTION_EXAMPLE, ...IAB_SPOTS_SELECTION_EXAMPLE };
         const data = {};

package/dist/types/common/helpers/utils.helper.d.ts

@@ -2,18 +2,19 @@ import type { IFireEventParams } from 'modules/event';
 /**
  * Recursively extracts ID values from a nested data structure.
  * Searches for specified property names and collects their primitive values (strings/numbers).
+ * Captures properties ending with 'id' and any additional specified property names.
  *
  * @param data - The data structure to search through (can be nested objects/arrays)
- * @param propertyNames - Array of property names to look for
+ * @param propertyNames - Array of additional property names to look for (optional)
  * @returns Array of extracted ID values (strings/numbers only)
  *
  * @example
  * const data = {
  *   id: [1, 2, 3],
- *   nested: { id: 'abc' },
- *   items: [{ id: 456 }]
+ *   nested: { id: 'abc', userId: 123 },
+ *   items: [{ id: 456, productId: '789', sku: 'ABC123' }]
  * };
- * extractDeepIds(data); // Returns [1, 2, 3, 'abc', 456]
+ * extractDeepIds(data); // Returns [1, 2, 3, 'abc', 123, 456, '789', 'ABC123']
  */
 export declare function extractDeepIds(data: any, propertyNames?: string[]): Array<string | number>;
 export declare function fallbackEventFire(url: string): Promise<boolean>;