@liquidcommercedev/rmn-sdk 1.5.0-beta.24 → 1.5.0-beta.26

package/dist/index.cjs

@@ -13,6 +13,8 @@ exports.RMN_SPOT_TYPE = void 0;
     RMN_SPOT_TYPE["RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK"] = "rbCollectionBannerWithoutTextBlock";
     RMN_SPOT_TYPE["RB_PRODUCT_UPCS"] = "rbProductUpcs";
     RMN_SPOT_TYPE["RB_NAVIGATION_BANNER"] = "rbNavigationBanner";
+    RMN_SPOT_TYPE["RB_VIDEO_PLAYER"] = "rbVideoPlayer";
+    RMN_SPOT_TYPE["RB_IN_TEXT"] = "rbInText";
     // IAB Standard Spot Types
     RMN_SPOT_TYPE["BILLBOARD"] = "billboard";
     RMN_SPOT_TYPE["LARGE_RECTANGLE"] = "largeRectangle";
@@ -6159,7 +6161,7 @@ const extractorConfig = {
         'article_number',
         'reference',
         'salsifyGrouping',
-        'grouping'
+        'grouping',
     ],
     price: [
         'price',
@@ -6176,6 +6178,7 @@ const extractorConfig = {
         'final_price',
         'retail_price',
     ],
+    quantity: ['quantity', 'qty'],
 };
 /**
  * Extracts deep values from an object based on specified target type
@@ -15821,6 +15824,8 @@ const SPOT_DIMENSIONS = {
     [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.RB_VIDEO_PLAYER]: { width: 1280, height: 720 },
+    [exports.RMN_SPOT_TYPE.RB_IN_TEXT]: { width: 1, height: 1 },
     [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 },
@@ -16670,8 +16675,15 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
                 const clonedSlide = this.slides[index].cloneNode(true);
                 // Map clone to original for event handling
                 this.cloneToOriginalMap.set(clonedSlide, this.slides[index]);
+                let isDragging = false;
+                slideElement.addEventListener('mousedown', () => (isDragging = false));
+                slideElement.addEventListener('mousemove', () => (isDragging = true));
                 // Add event delegation to the slide container
                 slideElement.addEventListener('click', (e) => {
+                    if (isDragging) {
+                        e.stopPropagation();
+                        return;
+                    }
                     const original = this.slides[index];
                     // Dispatch a new event on the original element
                     const cloneEvent = new Event(e.type, { bubbles: true, cancelable: true });
@@ -17554,7 +17566,7 @@ function spotHtmlStringToElement(htmlString, spotType) {
     return spot;
 }
 
-const STYLES$i = ({ primaryImage, secondaryImage }) => `
+const STYLES$j = ({ primaryImage, secondaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -17652,7 +17664,7 @@ function billboardV1Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$i(spot)}
+        ${STYLES$j(spot)}
         <div class="content">
             <div class="big-image"></div>
             <div class="main">
@@ -17667,7 +17679,7 @@ function billboardV1Template(spot) {
     `;
 }
 
-const STYLES$h = ({ primaryImage }) => `
+const STYLES$i = ({ primaryImage }) => `
     <style>
         .content {
             display: flex;
@@ -17741,7 +17753,7 @@ function billboardV2Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$h(spot)}
+        ${STYLES$i(spot)}
         <div class="content">
             <div class="text-container">
                 <h2 class="header">${spot.header}</h2>
@@ -17752,7 +17764,7 @@ function billboardV2Template(spot) {
     `;
 }
 
-const STYLES$g = ({ primaryImage }) => `
+const STYLES$h = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -17842,7 +17854,7 @@ function billboardV3Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$g(spot)}
+        ${STYLES$h(spot)}
         <div class="content">
             <div class="text">
                 <h2 class="header">${spot.header}</h2>
@@ -17854,7 +17866,7 @@ function billboardV3Template(spot) {
     `;
 }
 
-const STYLES$f = () => `
+const STYLES$g = () => `
     <style>
         .content {
             display: inline-block;
@@ -17886,7 +17898,7 @@ function inTextV1Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$f()}
+        ${STYLES$g()}
         <div class="content">
             <span class="header">${spot.header}</span>
             <span class="description">${spot.description}</span>
@@ -17894,7 +17906,7 @@ function inTextV1Template(spot) {
     `;
 }
 
-const STYLES$e = ({ primaryImage }) => `
+const STYLES$f = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -17976,7 +17988,7 @@ function largeLeaderboardV1Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$e(spot)}
+        ${STYLES$f(spot)}
         <div class="content">
             <div class="text">
                 <h2 class="header">${spot.header}</h2>
@@ -17987,7 +17999,7 @@ function largeLeaderboardV1Template(spot) {
     `;
 }
 
-const STYLES$d = ({ primaryImage }) => `
+const STYLES$e = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18063,7 +18075,7 @@ function largeLeaderboardV2Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$d(spot)}
+        ${STYLES$e(spot)}
         <div class="content">
             <div class="text">
                 <h2 class="header">${spot.header}</h2>
@@ -18074,7 +18086,7 @@ function largeLeaderboardV2Template(spot) {
     `;
 }
 
-const STYLES$c = ({ primaryImage }) => `
+const STYLES$d = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18122,7 +18134,7 @@ function largeRectangleV1Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$c(spot)}
+        ${STYLES$d(spot)}
          <div class="content">
             <div class="image"></div>
             <div class="text">
@@ -18133,7 +18145,7 @@ function largeRectangleV1Template(spot) {
     `;
 }
 
-const STYLES$b = ({ primaryImage }) => `
+const STYLES$c = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18220,7 +18232,7 @@ function squareV1Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$b(spot)}
+        ${STYLES$c(spot)}
         <div class="content">
             <div class="text">
                 <h2 class="header">${spot.header}</h2>
@@ -18231,7 +18243,7 @@ function squareV1Template(spot) {
     `;
 }
 
-const STYLES$a = ({ primaryImage }) => `
+const STYLES$b = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18275,14 +18287,14 @@ function squareV2Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$a(spot)}
+        ${STYLES$b(spot)}
         <div class="content">
             <span class="header">${spot.header}</span>
         </div>
     `;
 }
 
-const STYLES$9 = ({ primaryImage }) => `
+const STYLES$a = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18340,7 +18352,7 @@ function verticalRectangleV1Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$9(spot)}
+        ${STYLES$a(spot)}
         <div class="content">
             <div class="text">
                 <h2 class="header">${spot.header}</h2>
@@ -18351,7 +18363,7 @@ function verticalRectangleV1Template(spot) {
     `;
 }
 
-const STYLES$8 = ({ primaryImage }) => `
+const STYLES$9 = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18366,12 +18378,12 @@ const STYLES$8 = ({ primaryImage }) => `
 `;
 function wideSkyscraperV1Template(spot) {
     return `
-        ${STYLES$8(spot)}
+        ${STYLES$9(spot)}
         <div class="content"></div>
     `;
 }
 
-const STYLES$7 = ({ primaryImage, mobilePrimaryImage = primaryImage }, { prefix }) => `
+const STYLES$8 = ({ primaryImage, mobilePrimaryImage = primaryImage }, { prefix }) => `
 <style>
   .${prefix} {
     display: block;
@@ -18395,12 +18407,12 @@ const STYLES$7 = ({ primaryImage, mobilePrimaryImage = primaryImage }, { prefix
 function rbCollectionBannerWithoutTextBlockTemplate(spot, config) {
     const { prefix = '' } = config;
     return `
-    ${STYLES$7(spot, config)}
+    ${STYLES$8(spot, config)}
     <div class="${prefix}"></div>
   `;
 }
 
-const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix, overlay }) => {
+const STYLES$7 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix, overlay }) => {
     const linearGradient = generateGradientColor(overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%');
     return `
         <style>
@@ -18539,7 +18551,7 @@ function rbHomepageHeroFullImageTemplate(spot, config) {
     ${GFONT_PRECONNECT}
     ${GFONT_SOURCE_SANS_3}
     ${GFONT_CORMORANT}
-    ${STYLES$6(spot, config)}
+    ${STYLES$7(spot, config)}
     <div class="${prefix}">
       <div class="${prefix}__text">
         ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
@@ -18550,7 +18562,7 @@ function rbHomepageHeroFullImageTemplate(spot, config) {
 `;
 }
 
-const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, secondaryImage, mobileSecondaryImage = secondaryImage, }, { prefix }) => `
+const STYLES$6 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, secondaryImage, mobileSecondaryImage = secondaryImage, }, { prefix }) => `
 <style>
     .${prefix} {
         width: 100%;
@@ -18615,7 +18627,7 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         color: inherit;
         margin: 0;
         font-size: 18px;
-        font-family: "Cormorant";
+        font-family: "Cormorant", system-ui;
         font-style: normal;
         font-weight: 700;
         line-height: normal;
@@ -18727,7 +18739,7 @@ function rbHomepageHeroThreeTileTemplate(spot, config) {
     ${GFONT_PRECONNECT}
     ${GFONT_SOURCE_SANS_3}
     ${GFONT_CORMORANT}
-    ${STYLES$5(spot, config)}
+    ${STYLES$6(spot, config)}
     <div class="${prefix}">
         <div class="${prefix}__content">
             <div class="${prefix}__primary-image"></div>
@@ -18744,7 +18756,7 @@ function rbHomepageHeroThreeTileTemplate(spot, config) {
   `;
 }
 
-const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix }) => `
+const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix }) => `
   <style>
     .${prefix} {
         width: 100%;
@@ -18886,7 +18898,7 @@ function rbHomepageHeroTwoTileTemplate(spot, config) {
     ${GFONT_PRECONNECT}
     ${GFONT_SOURCE_SANS_3}
     ${GFONT_CORMORANT}
-    ${STYLES$4(spot, config)}
+    ${STYLES$5(spot, config)}
     <div class="${prefix}">
       <div class="${prefix}__content">
           <div class="${prefix}__text">
@@ -18900,6 +18912,41 @@ function rbHomepageHeroTwoTileTemplate(spot, config) {
   `;
 }
 
+const STYLES$4 = ({ textColor = '#212121', backgroundColor = 'transparent' }, { prefix }) => `
+    <style>
+        .${prefix} {
+            display: block;
+            cursor: pointer;
+            max-width: fit-content;
+            padding: 0;
+            background-color: ${backgroundColor};
+        }
+        .${prefix}__header {
+            font-size: 0.875rem;
+            line-height: 1.25rem;
+            font-weight: 500;
+            color: ${textColor};
+            font-family: "Source Sans 3", system-ui;
+            margin: 0;
+        }
+
+        .${prefix}__header:hover {
+          color: #b5914a;
+        }
+    </style>
+`;
+function rbInTextTemplate(spot, config) {
+    const { prefix = '' } = config;
+    return `
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${STYLES$4(spot, config)}
+        <div class="${prefix}">
+          ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
+        </div>
+    `;
+}
+
 const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix, overlay }) => {
     const linearGradient = generateGradientColor(overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
     return `
@@ -19256,6 +19303,13 @@ const SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
         [exports.RMN_SPOT_TYPE.RB_NAVIGATION_BANNER]: {
             rbNavigationBanner: rbNavigationBannerTemplate,
         },
+        [exports.RMN_SPOT_TYPE.RB_IN_TEXT]: {
+            rbInText: rbInTextTemplate,
+        },
+        [exports.RMN_SPOT_TYPE.RB_VIDEO_PLAYER]: {
+            // rbVideoPlayer: rbVideoPlayerTemplate,
+            rbVideoPlayer: () => '', // TODO: Implement this template.
+        },
         [exports.RMN_SPOT_TYPE.RB_PRODUCT_UPCS]: {
             rbProductUpcs: () => '', // No template for this spot type, it will be handled by ReserveBar App.
         },
@@ -19361,8 +19415,13 @@ class DataLayerMonitor {
                 onlyFirst: true,
                 shouldIncludeZero: true,
             });
+            const productQuantity = extractDeepValues(data, 'quantity', {
+                onlyFirst: true,
+                shouldIncludeZero: true,
+            });
             if (productPrice) {
                 normalizedData.productPrice = productPrice;
+                normalizedData.productQuantity = productQuantity !== null && productQuantity !== void 0 ? productQuantity : 1;
             }
         }
         return normalizedData;
@@ -19412,7 +19471,7 @@ class MonitorService {
         this.implementedMonitor.start();
     }
     async matchAndFireEvent(eventData, spots) {
-        var _a, _b;
+        var _a;
         if (!spots)
             return;
         const eventProductIds = new Set(cleanProductIds(eventData.productIds));
@@ -19423,16 +19482,32 @@ class MonitorService {
             if (!hasCommonProductIds || !Object.values(exports.RMN_SPOT_EVENT).includes(eventData.event)) {
                 continue;
             }
-            const eventUrl = (_b = (_a = spot.events.find((event) => event.event === eventData.event)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '';
-            const additionalQueryParams = objectToQueryParams({
-                override: eventData.productPrice,
-            });
+            const eventPosition = spot.events.findIndex((event) => event.event === eventData.event);
+            if (eventPosition === -1)
+                continue;
+            const eventUrl = spot.events[eventPosition].url;
+            const gmv = eventData.productPrice && eventData.productQuantity
+                ? eventData.productPrice * eventData.productQuantity
+                : undefined;
+            // gmv = gross merchandise value, it is calculated by multiplying the product price by the product quantity
+            const additionalQueryParams = objectToQueryParams({ gmv });
+            // Fire the event and publish it to the pubsub service
             await this.fireAndPublishSpotEvent({
                 spotEvent: eventData.event,
                 eventUrl: `${eventUrl}${additionalQueryParams ? `&${additionalQueryParams}` : ''}`,
                 placementId: spot.placementId,
                 spotId: spot.spotId,
             });
+            // Remove the event url from the spot to prevent duplicate events
+            spot.events[eventPosition].url = '';
+            // Update the spots in the local storage
+            (_a = this.localStorageService) === null || _a === void 0 ? void 0 : _a.setSpot(spot.spotId, {
+                placementId: spot.placementId,
+                spotId: spot.spotId,
+                spotType: spot.spotType,
+                events: spot.events,
+                productIds: spot.productIds,
+            });
         }
     }
     async fireAndPublishSpotEvent({ spotEvent, eventUrl, placementId, spotId, }) {
@@ -20191,6 +20266,39 @@ const SPOT_EVENTS_EXAMPLE = [
             productIds: [107, 108, 109, 110, 111],
         },
     ],
+    rbInText: [
+        {
+            id: 'mxo259',
+            spot: exports.RMN_SPOT_TYPE.RB_IN_TEXT,
+            variant: exports.RMN_SPOT_TYPE.RB_IN_TEXT,
+            width: 1,
+            height: 1,
+            header: 'Premium Vodka',
+            textColor: '#ffffff',
+            backgroundColor: '#000000',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [107, 108, 109, 110, 111],
+        },
+    ],
+    rbVideoPlayer: [
+        {
+            id: 'mxo259',
+            spot: exports.RMN_SPOT_TYPE.RB_VIDEO_PLAYER,
+            variant: exports.RMN_SPOT_TYPE.RB_VIDEO_PLAYER,
+            width: 1280,
+            height: 720,
+            videoUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+            videoOverlayImage: 'https://placehold.co/1280x720/png?text=Video+Overlay',
+            videoOverlayHeader: 'Watch Our Story',
+            videoOverlayDescription: 'Discover the history of our distillery',
+            videoControls: true,
+            videoAutoPlay: true,
+            videoMute: true,
+            videoLoop: true,
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [107, 108, 109, 110, 111],
+        },
+    ],
 });
 ({
     banner: [],
@@ -20551,7 +20659,7 @@ class LiquidCommerceRmnClient {
         const spotElement = this.elementService.createSpotElement({
             content,
             config: {
-                fluid: config === null || config === void 0 ? void 0 : config.fluid,
+                fluid: spot.spot === exports.RMN_SPOT_TYPE.RB_IN_TEXT ? true : config === null || config === void 0 ? void 0 : config.fluid,
                 spot: spot.spot,
                 width: spot.width,
                 height: spot.height,