@liquidcommercedev/rmn-sdk 1.5.0-beta.6 → 1.5.0-beta.8

package/dist/index.cjs

@@ -15560,11 +15560,13 @@ const CAROUSEL_COMPONENT_STYLE = ({ width, height, fluid }) => `
         position: relative;
         height: 100%;
         width: 100%;
+        display: flex;
+        transition: transform 0.5s ease-in-out;
     }
 
     .slide {
-        display: none;
-
+        flex: 0 0 100%;
+        display: flex;
         justify-content: center;
         align-items: center;
         height: 100%;
@@ -15869,9 +15871,9 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
         renderSlides() {
             const slidesContainer = document.createElement('div');
             slidesContainer.className = 'slides';
-            this.slides.forEach((slide, index) => {
+            this.slides.forEach((slide) => {
                 const slideElement = document.createElement('div');
-                slideElement.className = `slide ${index === this.currentSlide ? 'active' : ''}`;
+                slideElement.className = 'slide';
                 if (slide instanceof HTMLElement) {
                     slideElement.appendChild(slide);
                 }
@@ -15950,10 +15952,9 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
         updateCarousel() {
             if (!this.slidesContainer)
                 return;
-            const slides = Array.from(this.slidesContainer.children);
-            slides.forEach((slide, index) => {
-                slide.classList.toggle('active', index === this.currentSlide);
-            });
+            // Calculate the translation distance based on current slide
+            const translateX = -this.currentSlide * 100;
+            this.slidesContainer.style.transform = `translateX(${translateX}%)`;
             this.updateDots();
         }
         updateDots() {
@@ -16377,12 +16378,13 @@ function spotHtmlStringToElement(htmlString) {
     spot.className = 'spot';
     spot.innerHTML = htmlString;
     Object.assign(spot.style, {
-        position: 'relative',
         display: 'block',
         width: '100%',
         height: '100%',
         margin: '0',
         padding: '0',
+        containerType: 'inline-size',
+        position: 'relative',
     });
     return spot;
 }
@@ -17252,7 +17254,6 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 box-sizing: border-box;
                 color: ${textColor};
                 cursor: pointer;
-                container-type: inline-size;
             }
 
             .${prefix}__text {
@@ -17268,7 +17269,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
             .${prefix}__header {
                 font-size: 24px;
                 margin: 0;
-                font-family: "Cormorant";
+                font-family: "Cormorant", system-ui;
                 font-style: normal;
                 font-weight: 300;
                 line-height: normal;
@@ -17387,7 +17388,6 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         height: 100%;
         display: block;
         position: relative;
-        container-type: inline-size;
     }
 
     .${prefix}__content {
@@ -17578,15 +17578,20 @@ function rbHomepageHeroThreeTileTemplate(spot, config) {
 const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix }) => `
   <style>
     .${prefix} {
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .${prefix}__content {
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column-reverse;
         background-color: transparent;
         gap: 6px;
-        cursor: pointer;
-        container-type: inline-size;
-        position: relative;
     }
 
     .${prefix}__image {
@@ -17617,7 +17622,7 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         font-size: 18px;
         margin: 0;
         color: inherit;
-        font-family: "Cormorant";
+        font-family: "Cormorant", system-ui;
         font-style: normal;
         font-weight: 700;
         line-height: normal;
@@ -17659,7 +17664,7 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
     }
 
     @container (min-width: 768px) {
-        .${prefix} {
+        .${prefix}__content {
             flex-direction: row;
         }
         .${prefix}__image {
@@ -17714,12 +17719,14 @@ function rbHomepageHeroTwoTileTemplate(spot, config) {
     ${GFONT_CORMORANT}
     ${STYLES$4(spot, config)}
     <div class="${prefix}">
-        <div class="${prefix}__text">
-            ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
-            ${spot.description ? `<p class="${prefix}__description">${spot.description}</p>` : ''}
-            ${spot.ctaText ? `<span class="${prefix}__cta-button">${spot.ctaText}</span>` : ''}
-        </div>
-        <div class="${prefix}__image"></div>
+      <div class="${prefix}__content">
+          <div class="${prefix}__text">
+              ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
+              ${spot.description ? `<p class="${prefix}__description">${spot.description}</p>` : ''}
+              ${spot.ctaText ? `<span class="${prefix}__cta-button">${spot.ctaText}</span>` : ''}
+          </div>
+          <div class="${prefix}__image"></div>
+      </div>
     </div>
   `;
 }
@@ -17742,12 +17749,10 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         overflow: hidden;
         cursor: pointer;
         color: ${textColor};
-        container-type: inline-size;
       }
 
       .${prefix}__text {
         padding: 20px;
-        width: 70%;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -17759,7 +17764,7 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         color: inherit;
         margin: 0;
         font-size: 20px;
-        font-family: "Cormorant";
+        font-family: "Cormorant", system-ui;
         font-style: normal;
         font-weight: 300;
         line-height: normal;
@@ -17878,7 +17883,6 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
-      container-type: inline-size;
       position: relative;
     }
 
@@ -17948,12 +17952,7 @@ const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
         border-radius: 5px;
         overflow: hidden;
         cursor: pointer;
-        container-type: inline-size;
-      }
-
-      .${prefix}__text {
-        padding: 10px;
-        width: 70%;
+        position: relative;
       }
 
       .${prefix}__header {
@@ -17964,6 +17963,7 @@ const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
         font-style: normal;
         font-weight: 400;
         margin: 0;
+        padding: 10px;
       }
 
       @container (min-width: 640px) {
@@ -17981,9 +17981,7 @@ function rbSmallCategoryImageToutTemplate(spot, config) {
     ${GFONT_CORMORANT}
     ${STYLES$1(spot, config)}
     <div class="${prefix}">
-      <div class="${prefix}__text">
-        ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
-      </div>
+      ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
     </div>
   `;
 }
@@ -17998,7 +17996,6 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       display: flex;
       flex-direction: column;
       border-radius: 5px;
-      container-type: inline-size;
     }
 
     .${prefix}__image {
@@ -18388,11 +18385,38 @@ class EventService {
                 },
             };
         }
-        this.spotStates.set(placementId, { ...currentState, ...updates });
+        const merged = this.deepMerge(currentState, updates);
+        this.spotStates.set(placementId, merged);
         if (publish) {
             this.pubSub.publish(exports.RMN_SPOT_EVENT.LIFECYCLE_STATE, this.spotStates.get(placementId));
         }
     }
+    deepMerge(current, updates) {
+        return {
+            identifier: {
+                ...current.identifier,
+                ...updates.identifier,
+            },
+            dom: updates.dom
+                ? {
+                    ...current.dom,
+                    ...updates.dom,
+                }
+                : current.dom,
+            state: updates.state
+                ? {
+                    ...current.state,
+                    ...updates.state,
+                }
+                : current.state,
+            displayConfig: updates.displayConfig
+                ? {
+                    ...current.displayConfig,
+                    ...updates.displayConfig,
+                }
+                : current.displayConfig,
+        };
+    }
     async handleClick({ placementId, spot, spotElement, }) {
         var _a, _b, _c;
         // Publish click event
@@ -18747,10 +18771,12 @@ class LiquidCommerceRmnClient {
         const config = params.config;
         let inject = params.inject;
         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;
@@ -18769,9 +18795,12 @@ class LiquidCommerceRmnClient {
         // 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;
@@ -18780,9 +18809,11 @@ class LiquidCommerceRmnClient {
             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,
                     },
                 });
@@ -18791,9 +18822,11 @@ class LiquidCommerceRmnClient {
             const placementId = item.placementId.replace('#', '');
             const placement = document.getElementById(placementId);
             if (!placement) {
+                // Handle placement not found error state
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `Placement not found for id "${placementId}".`,
+                        mounted: false,
                         loading: false,
                     },
                 });
@@ -18808,12 +18841,14 @@ 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;
                 }
             }
+            // Handle multiple spots (carousel)
             if (spots.length > 1) {
                 const isInjected = this.injectCarouselSpotElement(placement, spots, itemConfig);
                 if (!isInjected) {
@@ -18857,18 +18892,24 @@ class LiquidCommerceRmnClient {
         const carouselSlides = [];
         for (const spotItem of spots) {
             this.eventService.handleSpotState(placement.id, {
+                identifier: {
+                    placementId: placement.id,
+                    spotType: spotItem.spot,
+                    spotId: spotItem.id,
+                },
                 displayConfig: {
+                    isSingleItem: false,
                     isCarousel: true,
                     isCarouselItem: true,
-                    isSingleItem: false,
                 },
-            }, false);
+            });
             const spot = this.elementService.overrideSpotColors(spotItem, config === null || config === void 0 ? void 0 : config.colors);
             const content = SPOT_TEMPLATE_HTML_ELEMENT(spot, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
             if (!content) {
                 this.eventService.handleSpotState(placement.id, {
                     state: {
                         error: `Failed to inject carousel spot item element. Could not create element for type "${spot.spot}".`,
+                        mounted: false,
                         loading: false,
                     },
                 });
@@ -18901,6 +18942,7 @@ class LiquidCommerceRmnClient {
             this.eventService.handleSpotState(placement.id, {
                 state: {
                     error: `Failed to inject spot carousel element. Could not create spot carousel element.`,
+                    mounted: false,
                     loading: false,
                 },
             });
@@ -18910,10 +18952,12 @@ class LiquidCommerceRmnClient {
         this.eventService.handleSpotState(placement.id, {
             dom: {
                 spotElement: carouselElement,
+                visibleOnViewport: false,
             },
             state: {
                 mounted: true,
                 loading: false,
+                error: undefined,
             },
         });
         return true;
@@ -18930,18 +18974,25 @@ class LiquidCommerceRmnClient {
      */
     injectOneSpotElement(injectItem, placement, spot, config) {
         var _a;
-        const spotData = this.elementService.overrideSpotColors(spot, config === null || config === void 0 ? void 0 : config.colors);
         this.eventService.handleSpotState(injectItem.placementId, {
+            identifier: {
+                placementId: injectItem.placementId,
+                spotType: injectItem.spotType,
+                spotId: spot.id,
+            },
             displayConfig: {
                 isSingleItem: true,
+                isCarousel: false,
+                isCarouselItem: false,
             },
-        }, false);
-        // Create the spot template element
+        });
+        const spotData = this.elementService.overrideSpotColors(spot, config === null || config === void 0 ? void 0 : config.colors);
         const content = SPOT_TEMPLATE_HTML_ELEMENT(spotData, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
         if (!content) {
             this.eventService.handleSpotState(injectItem.placementId, {
                 state: {
                     error: `Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`,
+                    mounted: false,
                     loading: false,
                 },
             });
@@ -18962,6 +19013,7 @@ class LiquidCommerceRmnClient {
             this.eventService.handleSpotState(injectItem.placementId, {
                 state: {
                     error: `Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`,
+                    mounted: false,
                     loading: false,
                 },
             });
@@ -18976,10 +19028,12 @@ class LiquidCommerceRmnClient {
         this.eventService.handleSpotState(injectItem.placementId, {
             dom: {
                 spotElement,
+                visibleOnViewport: false,
             },
             state: {
                 mounted: true,
                 loading: false,
+                error: undefined,
             },
         });
         return true;
@@ -19000,6 +19054,8 @@ 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;
@@ -19015,6 +19071,8 @@ 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;
@@ -19023,6 +19081,7 @@ class LiquidCommerceRmnClient {
         }
         return newInject;
     }
+    // Initialize spots with loading state and identifiers
     updateSpotsState(inject) {
         for (const item of inject) {
             this.eventService.handleSpotState(item.placementId, {
@@ -19032,6 +19091,8 @@ class LiquidCommerceRmnClient {
                 },
                 state: {
                     loading: true,
+                    mounted: false,
+                    error: undefined,
                 },
             });
         }