@liquidcommercedev/rmn-sdk 1.4.4 → 1.4.5-beta.2

package/dist/index.cjs

@@ -15152,60 +15152,56 @@ class AuthService extends BaseApi {
 }
 
 const SPOT_ELEMENT_TAG = 'spot-element';
+const SPOT_ELEMENT_SLOT_NAME = `${SPOT_ELEMENT_TAG}-custom-content`;
 const SPOTS_SELECTION_API_PATH = '/spots/selection';
-const SPOT_EVENT_API_PATH = '/spots/event';
 
-const SPOT_ELEMENT_SHADOW_ROOT = (width, height, hasCustomHtmlElement) => {
+const GFONT_PRECONNECT = `
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+`;
+const GFONT_SOURCE_SANS_3 = `
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap">
+`;
+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_ELEMENT_TEMPLATE = (width, height, hasCustomContent) => {
     const style = document.createElement('style');
+    style.textContent = `
+    :host {
+      display: block;
+      position: relative;
+      container-type: inline-size;
+      overflow: hidden;
+    }
+    :host([fluid="true"]) {
+      width: 100%;
+      height: 100%;
+    }
+    :host([fluid="false"]) {
+      width: ${width}px;
+      height: ${height}px;
+    }
+  `;
     const wrapper = document.createElement('div');
     wrapper.className = 'wrapper';
-    style.textContent = `
-        :host {
-            display: block;
-            position: relative;
-            container-type: inline-size;
-            overflow: hidden;
-        }
-        :host([fluid="true"]) {
-            width: 100%;
-            height: 100%;
-        }
-        :host([fluid="false"]) {
-            width: ${width}px;
-            height: ${height}px;
-        }
+    const slot = document.createElement('slot');
+    slot.name = SPOT_ELEMENT_SLOT_NAME;
+    if (!hasCustomContent) {
+        style.textContent += `
+      :host .wrapper {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
     `;
-    if (hasCustomHtmlElement) {
-        return { style, wrapper };
     }
-    style.textContent += `
-        .wrapper {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-        }
-    `;
-    return { style, wrapper };
+    return { style, wrapper, slot };
 };
 
-const GFONT_PRECONNECT = () => `
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-`;
-const GFONT_SOURCE_SANS_3 = () => `
-    <link rel="stylesheet"
-        href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" 
-    >
-`;
-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 STYLES$i = ({ primaryImage, secondaryImage }) => `
     <style>
         .content {
@@ -15301,9 +15297,9 @@ const STYLES$i = ({ primaryImage, secondaryImage }) => `
 `;
 function billboardV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$i(spot)}
         <div class="content">
             <div class="big-image"></div>
@@ -15390,9 +15386,9 @@ const STYLES$h = ({ primaryImage }) => `
 `;
 function billboardV2Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$h(spot)}
         <div class="content">
             <div class="text-container">
@@ -15491,9 +15487,9 @@ const STYLES$g = ({ primaryImage }) => `
 `;
 function billboardV3Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$g(spot)}
         <div class="content">
             <div class="text">
@@ -15535,9 +15531,9 @@ const STYLES$f = () => `
 `;
 function inTextV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$f()}
         <div class="content">
             <span class="header">${spot.header}</span>
@@ -15625,9 +15621,9 @@ const STYLES$e = ({ primaryImage }) => `
 `;
 function largeLeaderboardV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$e(spot)}
         <div class="content">
             <div class="text">
@@ -15712,9 +15708,9 @@ const STYLES$d = ({ primaryImage }) => `
 `;
 function largeLeaderboardV2Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$d(spot)}
         <div class="content">
             <div class="text">
@@ -15771,9 +15767,9 @@ const STYLES$c = ({ primaryImage }) => `
 `;
 function largeRectangleV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$c(spot)}
          <div class="content">
             <div class="image"></div>
@@ -15869,9 +15865,9 @@ const STYLES$b = ({ primaryImage }) => `
 `;
 function squareV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$b(spot)}
         <div class="content">
             <div class="text">
@@ -15924,9 +15920,9 @@ const STYLES$a = ({ primaryImage }) => `
 `;
 function squareV2Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$a(spot)}
         <div class="content">
             <span class="header">${spot.header}</span>
@@ -15989,9 +15985,9 @@ const STYLES$9 = ({ primaryImage }) => `
 `;
 function verticalRectangleV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$9(spot)}
         <div class="content">
             <div class="text">
@@ -16053,7 +16049,7 @@ function rbCollectionBannerWithoutTextBlockTemplate(spot) {
   `;
 }
 
-const STYLES$6 = ({ textColor = '#fff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }) => `
     <style>
         :host {
             min-width: 320px;
@@ -16171,9 +16167,9 @@ const STYLES$6 = ({ textColor = '#fff', ctaTextColor = textColor, ctaBorderColor
 `;
 function rbHomepageHeroFullImageTemplate(spot) {
     return `
-    ${GFONT_PRECONNECT()}
-    ${GFONT_SOURCE_SANS_3()}
-    ${GFONT_CORMORANT()}
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
+    ${GFONT_CORMORANT}
     ${STYLES$6(spot)}
     <div class="content">
         <div class="text">
@@ -16338,9 +16334,9 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
 `;
 function rbHomepageHeroThreeTileTemplate(spot) {
     return `
-    ${GFONT_PRECONNECT()}
-    ${GFONT_SOURCE_SANS_3()}
-    ${GFONT_CORMORANT()}
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
+    ${GFONT_CORMORANT}
     ${STYLES$5(spot)}
     <div class="content">
         <div class="primary-image"></div>
@@ -16481,9 +16477,9 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
 `;
 function rbHomepageHeroTwoTileTemplate(spot) {
     return `
-    ${GFONT_PRECONNECT()}
-    ${GFONT_SOURCE_SANS_3()}
-    ${GFONT_CORMORANT()}
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
+    ${GFONT_CORMORANT}
     ${STYLES$4(spot)}
     <div class="content">
         <div class="text">
@@ -16496,7 +16492,7 @@ function rbHomepageHeroTwoTileTemplate(spot) {
   `;
 }
 
-const STYLES$3 = ({ textColor = '#fff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }) => `
   <style>
     :host {
       min-width: 320px;
@@ -16603,9 +16599,9 @@ const STYLES$3 = ({ textColor = '#fff', ctaTextColor = textColor, ctaBorderColor
 `;
 function rbLargeCategoryImageToutTemplate(spot) {
     return `
-    ${GFONT_PRECONNECT()}
-    ${GFONT_SOURCE_SANS_3()}
-    ${GFONT_CORMORANT()}
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
+    ${GFONT_CORMORANT}
     ${STYLES$3(spot)}
     <div class="content">
       <div class="text">
@@ -16617,7 +16613,7 @@ function rbLargeCategoryImageToutTemplate(spot) {
   `;
 }
 
-const STYLES$2 = ({ textColor = '#fff', primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage, }) => `
   <style>
     :host {
       min-width: 320px;
@@ -16675,8 +16671,8 @@ const STYLES$2 = ({ textColor = '#fff', primaryImage, mobilePrimaryImage = prima
 `;
 function rbNavigationBannerTemplate(spot) {
     return `
-    ${GFONT_PRECONNECT()}
-    ${GFONT_SOURCE_SANS_3()}
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
     ${STYLES$2(spot)}
     <div class="content">
       <div class="text">
@@ -16686,7 +16682,7 @@ function rbNavigationBannerTemplate(spot) {
   `;
 }
 
-const STYLES$1 = ({ textColor = '#fff', primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage, }) => `
   <style>
     :host {
       min-width: 165px;
@@ -16718,6 +16714,7 @@ const STYLES$1 = ({ textColor = '#fff', primaryImage, mobilePrimaryImage = prima
       font-style: normal;
       font-weight: 400;
       line-height: normal;
+      margin: 0;
     }
     @media (min-width: 640px) {
       .content {
@@ -16728,8 +16725,8 @@ const STYLES$1 = ({ textColor = '#fff', primaryImage, mobilePrimaryImage = prima
 `;
 function rbSmallCategoryImageToutTemplate(spot) {
     return `
-    ${GFONT_PRECONNECT()}
-    ${GFONT_CORMORANT()}
+    ${GFONT_PRECONNECT}
+    ${GFONT_CORMORANT}
     ${STYLES$1(spot)}
     <div class="content">
       <div class="text">
@@ -16739,7 +16736,7 @@ function rbSmallCategoryImageToutTemplate(spot) {
   `;
 }
 
-const STYLES = ({ textColor = '#000', backgroundColor = 'transparent', primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primaryImage, mobilePrimaryImage = primaryImage, }) => `
   <style>
     :host {
       min-width: 165px;
@@ -16782,6 +16779,7 @@ const STYLES = ({ textColor = '#000', backgroundColor = 'transparent', primaryIm
       font-style: normal;
       font-weight: 400;
       line-height: normal;
+      margin: 0;
     }
     @media (min-width: 640px) {
       .image {
@@ -16792,8 +16790,8 @@ const STYLES = ({ textColor = '#000', backgroundColor = 'transparent', primaryIm
 `;
 function rbSmallDiscoverToutTemplate(spot) {
     return `
-    ${GFONT_PRECONNECT()}
-    ${GFONT_CORMORANT()}
+    ${GFONT_PRECONNECT}
+    ${GFONT_CORMORANT}
     ${STYLES(spot)}
     <div class="content">
       <div class="image"></div>
@@ -16889,16 +16887,20 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
     class CustomSpotElement extends HTMLElement {
         constructor() {
             super();
+            this.hasCustomContent = false;
+            this.handleClick = this.handleClick.bind(this);
             this.attachShadow({ mode: 'open' });
         }
         connectedCallback() {
-            this.addEventListener('click', () => this.registerEvent(exports.RMN_SPOT_EVENT.CLICK));
+            this.hasCustomContent = Boolean(this.customContent);
+            this.addEventListener('click', this.handleClick);
             this.setupIntersectionObserver();
             this.render();
         }
         disconnectedCallback() {
             var _a;
             (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+            this.removeEventListener('click', this.handleClick);
         }
         attributeChangedCallback(_name, oldValue, newValue) {
             if (oldValue !== newValue) {
@@ -16908,14 +16910,26 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
         render() {
             if (!this.shadowRoot || !this.data)
                 return;
-            const { style, wrapper } = SPOT_ELEMENT_SHADOW_ROOT(this.data.width, this.data.height, Boolean(this.customHtmlElement));
-            if (this.customHtmlElement) {
-                wrapper.innerHTML = this.customHtmlElement.outerHTML;
+            const { style, wrapper, slot } = SPOT_ELEMENT_TEMPLATE(this.data.width, this.data.height, this.hasCustomContent);
+            this.shadowRoot.replaceChildren(style, slot);
+            if (this.hasCustomContent) {
+                this.setCustomContent();
             }
-            else {
+            if (!this.hasCustomContent) {
                 wrapper.innerHTML = GET_SPOT_TEMPLATE_HTML_STRING(this.data);
+                this.shadowRoot.appendChild(wrapper);
             }
-            this.shadowRoot.replaceChildren(style, wrapper);
+        }
+        setCustomContent() {
+            const wrapper = document.createElement('div');
+            wrapper.setAttribute('slot', SPOT_ELEMENT_SLOT_NAME);
+            if (typeof this.customContent === 'string') {
+                wrapper.innerHTML = this.customContent;
+            }
+            if (this.customContent instanceof HTMLElement) {
+                wrapper.appendChild(this.customContent);
+            }
+            this.appendChild(wrapper);
         }
         setupIntersectionObserver() {
             const options = {
@@ -16932,47 +16946,37 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
             }, options);
             this.observer.observe(this);
         }
+        handleClick() {
+            this.registerEvent(exports.RMN_SPOT_EVENT.CLICK);
+        }
         async registerEvent(event) {
             var _a, _b;
             if (!this.data)
                 return;
             const shouldRedirectOnClick = this.getAttribute(ENUM_SPOT_ELEMENT_ATTRIBUTE.REDIRECT_ON_CLICK) === 'true';
-            const url = (_b = (_a = this.data.events.find((e) => e.event === event)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '';
+            const eventUrl = (_b = (_a = this.data.events.find((e) => e.event === event)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '';
             try {
                 const options = {
                     method: 'POST',
-                    redirect: 'manual',
+                    redirect: event === exports.RMN_SPOT_EVENT.CLICK && shouldRedirectOnClick ? 'follow' : 'manual',
                 };
-                if (event === exports.RMN_SPOT_EVENT.CLICK && shouldRedirectOnClick) {
-                    options.redirect = 'follow';
-                }
-                const normalizedUrl = this.normalizeUrl(url);
-                const response = await fetch(normalizedUrl, options);
+                const response = await fetch(eventUrl, options);
                 if (response.ok && event === exports.RMN_SPOT_EVENT.CLICK && shouldRedirectOnClick) {
-                    window.location.href = this.getRedirectUrlFromPayload(normalizedUrl);
+                    window.location.href = this.getRedirectUrlFromPayload(eventUrl);
                 }
             }
             catch (error) {
                 console.error(`Rmn error sending ${event} event:`, error);
             }
         }
-        normalizeUrl(url) {
-            if (!this.data)
-                return url;
-            const rmnUrl = `${SDK_CONFIG.url[this.data.env]}/api${SPOT_EVENT_API_PATH}`;
-            return url.replace(/https?:\/\/[^/]+\/[^?]+/, `${rmnUrl}`);
-        }
         getRedirectUrlFromPayload(url) {
-            var _a;
+            var _a, _b;
             const base64String = (_a = new URL(url).searchParams.get('e')) !== null && _a !== void 0 ? _a : '';
             try {
-                const obj = JSON.parse(atob(base64String));
-                if (obj.ur) {
-                    return obj.ur;
-                }
-                return '';
+                const data = JSON.parse(atob(base64String));
+                return (_b = data.ur) !== null && _b !== void 0 ? _b : '';
             }
-            catch (_b) {
+            catch (_c) {
                 return '';
             }
         }
@@ -16993,7 +16997,7 @@ class SpotHtmlService {
      * @param {ISpot} spot - The spot data.
      * @param {ICreateSpotElementConfig} config - The configuration object.
      * @param {ICreateSpotElementConfig.fluid} config.fluid - If the spot should be fluid or not.
-     * @param {ICreateSpotElementConfig.customHtmlElement} config.customHtmlElement - Use a custom html element.
+     * @param {ICreateSpotElementConfig.customContent} config.customContent - Use a custom html element/string.
      * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
      *
      * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.
@@ -17012,8 +17016,9 @@ class SpotHtmlService {
         element.setAttribute(ENUM_SPOT_ELEMENT_ATTRIBUTE.REDIRECT_ON_CLICK, shouldRedirectOnClick.toString());
         // Share the spot data with the element
         element.data = spot;
-        if (config === null || config === void 0 ? void 0 : config.customHtmlElement) {
-            element.customHtmlElement = config.customHtmlElement;
+        // Set custom content
+        if (config === null || config === void 0 ? void 0 : config.customContent) {
+            element.customContent = config.customContent;
         }
         return element;
     }
@@ -17054,22 +17059,10 @@ class SpotSelectionService extends BaseApi {
         if (isOk && val && val.data && (val === null || val === void 0 ? void 0 : val.refresh.token)) {
             this.authInfo.authenticated = true;
             this.authInfo.token = val.refresh.token;
-            let spots = val.data.spots;
-            spots = this.addEnvToSpotData(spots, this.authInfo.env);
-            return spots;
+            return val.data.spots;
         }
         throw new Error('Spot selection response was not successful');
     }
-    addEnvToSpotData(spots, env) {
-        for (const key in spots) {
-            if (spots[key]) {
-                spots[key].forEach((spot) => {
-                    spot.env = env;
-                });
-            }
-        }
-        return spots;
-    }
 }
 
 class LiquidCommerceRmnClient {
@@ -17097,7 +17090,7 @@ class LiquidCommerceRmnClient {
      * @param {ISpot} spot - The spot data.
      * @param {ICreateSpotElementConfig} config - The configuration object.
      * @param {ICreateSpotElementConfig.fluid} config.fluid - If the spot should be fluid or not.
-     * @param {ICreateSpotElementConfig.customHtmlElement} config.customHtmlElement - Use a custom html element.
+     * @param {ICreateSpotElementConfig.customContent} config.customContent - Use a custom html element/string.
      * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
      *
      * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.
@@ -17129,7 +17122,7 @@ async function RmnClient(apiKey, config) {
  * @param {ISpot} spot - The spot data.
  * @param {ICreateSpotElementConfig} config - The configuration object.
  * @param {ICreateSpotElementConfig.fluid} config.fluid - If the spot should be fluid or not.
- * @param {ICreateSpotElementConfig.customHtmlElement} config.customHtmlElement - Use a custom html element.
+ * @param {ICreateSpotElementConfig.customContent} config.customContent - Use a custom html element/string.
  * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
  *
  * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.