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

package/dist/index.esm.js

@@ -11,6 +11,8 @@ var RMN_SPOT_TYPE;
     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";
@@ -6157,7 +6159,7 @@ const extractorConfig = {
         'article_number',
         'reference',
         'salsifyGrouping',
-        'grouping'
+        'grouping',
     ],
     price: [
         'price',
@@ -15819,6 +15821,8 @@ const SPOT_DIMENSIONS = {
     [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.RB_VIDEO_PLAYER]: { width: 1280, height: 720 },
+    [RMN_SPOT_TYPE.RB_IN_TEXT]: { width: 1, height: 1 },
     [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 },
@@ -16668,8 +16672,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 });
@@ -17552,7 +17563,7 @@ function spotHtmlStringToElement(htmlString, spotType) {
     return spot;
 }
 
-const STYLES$i = ({ primaryImage, secondaryImage }) => `
+const STYLES$j = ({ primaryImage, secondaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -17650,7 +17661,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">
@@ -17665,7 +17676,7 @@ function billboardV1Template(spot) {
     `;
 }
 
-const STYLES$h = ({ primaryImage }) => `
+const STYLES$i = ({ primaryImage }) => `
     <style>
         .content {
             display: flex;
@@ -17739,7 +17750,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>
@@ -17750,7 +17761,7 @@ function billboardV2Template(spot) {
     `;
 }
 
-const STYLES$g = ({ primaryImage }) => `
+const STYLES$h = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -17840,7 +17851,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>
@@ -17852,7 +17863,7 @@ function billboardV3Template(spot) {
     `;
 }
 
-const STYLES$f = () => `
+const STYLES$g = () => `
     <style>
         .content {
             display: inline-block;
@@ -17884,7 +17895,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>
@@ -17892,7 +17903,7 @@ function inTextV1Template(spot) {
     `;
 }
 
-const STYLES$e = ({ primaryImage }) => `
+const STYLES$f = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -17974,7 +17985,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>
@@ -17985,7 +17996,7 @@ function largeLeaderboardV1Template(spot) {
     `;
 }
 
-const STYLES$d = ({ primaryImage }) => `
+const STYLES$e = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18061,7 +18072,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>
@@ -18072,7 +18083,7 @@ function largeLeaderboardV2Template(spot) {
     `;
 }
 
-const STYLES$c = ({ primaryImage }) => `
+const STYLES$d = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18120,7 +18131,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">
@@ -18131,7 +18142,7 @@ function largeRectangleV1Template(spot) {
     `;
 }
 
-const STYLES$b = ({ primaryImage }) => `
+const STYLES$c = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18218,7 +18229,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>
@@ -18229,7 +18240,7 @@ function squareV1Template(spot) {
     `;
 }
 
-const STYLES$a = ({ primaryImage }) => `
+const STYLES$b = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18273,14 +18284,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%;
@@ -18338,7 +18349,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>
@@ -18349,7 +18360,7 @@ function verticalRectangleV1Template(spot) {
     `;
 }
 
-const STYLES$8 = ({ primaryImage }) => `
+const STYLES$9 = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18364,12 +18375,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;
@@ -18393,12 +18404,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>
@@ -18537,7 +18548,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>` : ''}
@@ -18548,7 +18559,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%;
@@ -18613,7 +18624,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;
@@ -18725,7 +18736,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>
@@ -18742,7 +18753,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%;
@@ -18884,7 +18895,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">
@@ -18898,6 +18909,37 @@ function rbHomepageHeroTwoTileTemplate(spot, config) {
   `;
 }
 
+const STYLES$4 = ({ textColor = '#ffffff', 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;
+        }
+    </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 `
@@ -19254,6 +19296,13 @@ const SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
         [RMN_SPOT_TYPE.RB_NAVIGATION_BANNER]: {
             rbNavigationBanner: rbNavigationBannerTemplate,
         },
+        [RMN_SPOT_TYPE.RB_IN_TEXT]: {
+            rbInText: rbInTextTemplate,
+        },
+        [RMN_SPOT_TYPE.RB_VIDEO_PLAYER]: {
+            // rbVideoPlayer: rbVideoPlayerTemplate,
+            rbVideoPlayer: () => '', // TODO: Implement this template.
+        },
         [RMN_SPOT_TYPE.RB_PRODUCT_UPCS]: {
             rbProductUpcs: () => '', // No template for this spot type, it will be handled by ReserveBar App.
         },
@@ -20189,6 +20238,39 @@ const SPOT_EVENTS_EXAMPLE = [
             productIds: [107, 108, 109, 110, 111],
         },
     ],
+    rbInText: [
+        {
+            id: 'mxo259',
+            spot: RMN_SPOT_TYPE.RB_IN_TEXT,
+            variant: 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: RMN_SPOT_TYPE.RB_VIDEO_PLAYER,
+            variant: 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: [],
@@ -20549,7 +20631,7 @@ class LiquidCommerceRmnClient {
         const spotElement = this.elementService.createSpotElement({
             content,
             config: {
-                fluid: config === null || config === void 0 ? void 0 : config.fluid,
+                fluid: spot.spot === 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,

package/dist/types/enums.d.ts

@@ -9,6 +9,8 @@ export declare enum RMN_SPOT_TYPE {
     RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK = "rbCollectionBannerWithoutTextBlock",
     RB_PRODUCT_UPCS = "rbProductUpcs",
     RB_NAVIGATION_BANNER = "rbNavigationBanner",
+    RB_VIDEO_PLAYER = "rbVideoPlayer",
+    RB_IN_TEXT = "rbInText",
     BILLBOARD = "billboard",
     LARGE_RECTANGLE = "largeRectangle",
     VERTICAL_RECTANGLE = "verticalRectangle",

package/dist/types/modules/element/template/reservebar/in-text.template.d.ts

@@ -0,0 +1,3 @@
+import type { ISpot } from 'types';
+import type { ISpotTemplateConfig } from '../template.type';
+export declare function rbInTextTemplate(spot: ISpot, config: ISpotTemplateConfig): string;

package/dist/types/modules/element/template/reservebar/index.d.ts

@@ -2,7 +2,9 @@ export * from './collection-banner-without-text-block.template';
 export * from './homepage-hero-full-image.template';
 export * from './homepage-hero-three-tile.template';
 export * from './homepage-hero-two-tile.template';
+export * from './in-text.template';
 export * from './large-category-image-tout.template';
 export * from './navigation-banner.template';
 export * from './small-category-image-tout.template';
 export * from './small-discover-tout.template';
+export * from './video-player.template';

package/dist/types/modules/element/template/reservebar/video-player.template.d.ts

@@ -0,0 +1,3 @@
+import type { ISpot } from 'types';
+import type { ISpotTemplateConfig } from '../template.type';
+export declare function rbVideoPlayerTemplate(spot: ISpot, config: ISpotTemplateConfig): string;

package/dist/types/modules/selection/selection.interface.d.ts

@@ -36,6 +36,14 @@ export interface ISpot {
     mobilePrimaryImage?: string;
     mobileSecondaryImage?: string;
     productIds?: Array<string | number>;
+    videoUrl?: string;
+    videoOverlayImage?: string;
+    videoOverlayHeader?: string;
+    videoOverlayDescription?: string;
+    videoControls?: boolean;
+    videoAutoPlay?: boolean;
+    videoMute?: boolean;
+    videoLoop?: boolean;
     rbProductUpcs?: Array<string | number>;
     rbProductSalsifyGroupings?: Array<string | number>;
     rbProductSalsifyPids?: Array<string | number>;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@liquidcommercedev/rmn-sdk",
   "description": "LiquidCommerce RMN SDK",
   "author": "LiquidCommerce Tech",
-  "version": "1.5.0-beta.24",
+  "version": "1.5.0-beta.25",
   "homepage": "https://docs.liquidcommerce.co/rmn-sdk",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",