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

package/dist/index.cjs

@@ -16145,6 +16145,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>
@@ -16155,6 +16156,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 = {
+    [exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO]: { width: 1140, height: 640 },
+    [exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE]: { width: 1140, height: 640 },
+    [exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE]: { width: 1140, height: 640 },
+    [exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE]: { width: 1140, height: 640 },
+    [exports.RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT]: { width: 468, height: 410 },
+    [exports.RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT]: { width: 224, height: 378 },
+    [exports.RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT]: { width: 224, height: 410 },
+    [exports.RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK]: { width: 887, height: 344 },
+    [exports.RMN_SPOT_TYPE.RB_PRODUCT_UPCS]: { width: 1, height: 1 },
+    [exports.RMN_SPOT_TYPE.RB_NAVIGATION_BANNER]: { width: 440, height: 220 },
+    [exports.RMN_SPOT_TYPE.SMALL_RECTANGLE]: { width: 180, height: 150 },
+    [exports.RMN_SPOT_TYPE.MEDIUM_RECTANGLE]: { width: 300, height: 250 },
+    [exports.RMN_SPOT_TYPE.LARGE_RECTANGLE]: { width: 336, height: 280 },
+    [exports.RMN_SPOT_TYPE.VERTICAL_RECTANGLE]: { width: 240, height: 400 },
+    [exports.RMN_SPOT_TYPE.BANNER]: { width: 468, height: 60 },
+    [exports.RMN_SPOT_TYPE.LEADERBOARD]: { width: 728, height: 90 },
+    [exports.RMN_SPOT_TYPE.LARGE_LEADERBOARD]: { width: 970, height: 90 },
+    [exports.RMN_SPOT_TYPE.BILLBOARD]: { width: 970, height: 250 },
+    [exports.RMN_SPOT_TYPE.SKYSCRAPER]: { width: 120, height: 600 },
+    [exports.RMN_SPOT_TYPE.WIDE_SKYSCRAPER]: { width: 160, height: 600 },
+    [exports.RMN_SPOT_TYPE.HALF_PAGE]: { width: 300, height: 600 },
+    [exports.RMN_SPOT_TYPE.SMALL_SQUARE]: { width: 200, height: 200 },
+    [exports.RMN_SPOT_TYPE.SQUARE]: { width: 250, height: 250 },
+    [exports.RMN_SPOT_TYPE.VERTICAL_BANNER]: { width: 120, height: 240 },
+    [exports.RMN_SPOT_TYPE.BUTTON_2]: { width: 120, height: 60 },
+    [exports.RMN_SPOT_TYPE.MICRO_BAR]: { width: 88, height: 31 },
+    [exports.RMN_SPOT_TYPE.POP_UP]: { width: 550, height: 480 },
+    [exports.RMN_SPOT_TYPE.PORTRAIT]: { width: 300, height: 1050 },
+    [exports.RMN_SPOT_TYPE.SMARTPHONE_BANNER_1]: { width: 300, height: 50 },
+    [exports.RMN_SPOT_TYPE.SMARTPHONE_BANNER_2]: { width: 320, height: 50 },
+    [exports.RMN_SPOT_TYPE.MOBILE_PHONE_INTERSTITIAL_1]: { width: 640, height: 1136 },
+    [exports.RMN_SPOT_TYPE.MOBILE_PHONE_INTERSTITIAL_2]: { width: 750, height: 1334 },
+    [exports.RMN_SPOT_TYPE.MOBILE_PHONE_INTERSTITIAL_3]: { width: 1080, height: 1920 },
+    [exports.RMN_SPOT_TYPE.FEATURE_PHONE_SMALL_BANNER]: { width: 120, height: 20 },
+    [exports.RMN_SPOT_TYPE.FEATURE_PHONE_MEDIUM_BANNER]: { width: 168, height: 28 },
+    [exports.RMN_SPOT_TYPE.FEATURE_PHONE_LARGE_BANNER]: { width: 216, height: 36 },
+    [exports.RMN_SPOT_TYPE.IN_TEXT]: { width: 1, height: 1 },
+};
 
 class IntersectionObserverService {
     constructor(defaultOptions = {}) {
@@ -16993,6 +17033,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 {
@@ -17100,15 +17252,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;
@@ -17136,6 +17287,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.
      *
@@ -17170,6 +17342,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;
     }
 }
@@ -19315,6 +19490,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.
@@ -19338,24 +19514,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) {
@@ -19363,35 +19544,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) {
@@ -19399,8 +19554,6 @@ class LiquidCommerceRmnClient {
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `Placement not found for id "${placementId}".`,
-                        mounted: false,
-                        loading: false,
                     },
                 });
                 continue;
@@ -19414,43 +19567,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.
      *
@@ -19519,7 +19702,8 @@ class LiquidCommerceRmnClient {
                     loading: false,
                 },
             });
-            return false;
+            this.clearPlacement(placement.id);
+            return;
         }
         placement.replaceChildren(carouselElement);
         this.eventService.handleSpotState(placement.id, {
@@ -19533,7 +19717,6 @@ class LiquidCommerceRmnClient {
                 error: undefined,
             },
         });
-        return true;
     }
     /**
      * Injects a single spot element into the provided placement.
@@ -19569,7 +19752,8 @@ class LiquidCommerceRmnClient {
                     loading: false,
                 },
             });
-            return false;
+            this.clearPlacement(injectItem.placementId);
+            return;
         }
         // Create the spot element
         const spotElement = this.elementService.createSpotElement({
@@ -19590,7 +19774,8 @@ class LiquidCommerceRmnClient {
                     loading: false,
                 },
             });
-            return false;
+            this.clearPlacement(injectItem.placementId);
+            return;
         }
         this.eventService.registerSpot({
             spot: spotData,
@@ -19609,7 +19794,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.
@@ -19627,8 +19843,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;
@@ -19637,6 +19851,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) {
@@ -19644,8 +19864,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;
@@ -19654,22 +19872,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 = {};