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

package/dist/index.esm.js

@@ -6131,120 +6131,6 @@ function getEventTypeFromRawEvent(event) {
 }
 
 // Configuration object with target field names
-const extractorConfig = {
-    ids: [
-        // Ps: The function handles all the variations of keywords that end with "id" or "ids"
-        // Universal product identifiers
-        'gtin',
-        'gtin8',
-        'gtin12',
-        'gtin13',
-        'gtin14',
-        'mpn',
-        'sku',
-        'upc',
-        'ean',
-        'isbn',
-        'isbn10',
-        'isbn13',
-        'asin',
-        // Product codes and references
-        'coupon',
-        'barcode',
-        'product_code',
-        'part_number',
-        'model_number',
-        'item_variant',
-        'item_number',
-        'article_number',
-        'reference',
-        'salsifyGrouping',
-        'grouping',
-    ],
-    price: [
-        'price',
-        'unitPrice',
-        'cost',
-        'current_price',
-        'sale_price',
-        'price_value',
-        'sale_price_value',
-        'regular_price',
-        'discount_price',
-        'unit_price',
-        'original_price',
-        'final_price',
-        'retail_price',
-    ],
-};
-/**
- * Extracts deep values from an object based on specified target type
- * @param data - The source data object to extract values from
- * @param target - The type of values to extract ('ids' or 'price')
- * @param options - Optional configuration for the extraction process
- * @returns Array of extracted values or a single value if onlyFirst is true
- */
-function extractDeepValues(data, target, options = {}) {
-    const { 
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    onlyFirst = false, shouldIncludeZero = false, } = options;
-    const values = [];
-    const targetProperties = new Set(extractorConfig[target].map((name) => name.toLowerCase()));
-    /**
-     * Checks if a property name matches the target criteria
-     */
-    const isTargetField = (key) => {
-        const normalizedKey = key.toLowerCase();
-        const hasTarget = targetProperties.has(normalizedKey);
-        if (target === 'ids') {
-            return normalizedKey.endsWith('id') || normalizedKey.endsWith('ids') || hasTarget;
-        }
-        return hasTarget;
-    };
-    /**
-     * Validates and normalizes extracted values
-     */
-    const validateValue = (value) => {
-        if (typeof value === 'string') {
-            return value.trim().length > 0;
-        }
-        if (typeof value === 'number') {
-            return !isNaN(value) && (shouldIncludeZero || value !== 0);
-        }
-        return false;
-    };
-    /**
-     * Processes a value and extracts matching fields
-     */
-    const processValue = (value, currentKey) => {
-        // Early exit conditions
-        if (value == null || (onlyFirst && values.length > 0))
-            return;
-        // Process current value if it matches target criteria
-        if (currentKey && isTargetField(currentKey)) {
-            if (Array.isArray(value)) {
-                const validValues = value.filter(validateValue);
-                values.push(...validValues);
-            }
-            else if (validateValue(value)) {
-                values.push(value);
-            }
-            return;
-        }
-        // Recursive processing for nested structures
-        if (Array.isArray(value)) {
-            value.forEach((item) => processValue(item));
-        }
-        else if (typeof value === 'object') {
-            Object.entries(value).forEach(([key, val]) => processValue(val, key));
-        }
-    };
-    processValue(data);
-    // Return based on options
-    if (values.length === 0)
-        return undefined;
-    return onlyFirst ? values[0] : values;
-}
 /**
  * Cleans and normalizes an array of product IDs by:
  * 1. Converting all IDs to strings
@@ -16673,8 +16559,8 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
                 // 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);
+                slideElement.addEventListener('mousedown', () => (isDragging = false));
+                slideElement.addEventListener('mousemove', () => (isDragging = true));
                 // Add event delegation to the slide container
                 slideElement.addEventListener('click', (e) => {
                     if (isDragging) {
@@ -17197,7 +17083,8 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
     CarouselElement = CustomCarouselElement;
 }
 
-function SkeletonTemplate({ fluid, width, height }) {
+function SkeletonTemplate({ fluid, width, height, spotType, }) {
+    const isSmall = spotType === RMN_SPOT_TYPE.RB_IN_TEXT;
     return `
     <style>
      :host {
@@ -17208,42 +17095,20 @@ function SkeletonTemplate({ fluid, width, height }) {
         width: ${fluid ? '100%' : `${width}px`};
         height: ${fluid ? '100%' : `${height}px`};
         background: #ffffff;
-        padding: 20px;
+        padding: ${isSmall ? '0' : '1rem'};
         border-radius: 5px;
       }
 
-      .content {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-      }
-
-      .image-placeholder {
+      .line {
         width: 100%;
         height: 100%;
+        min-height: 15px;
         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;
+        border-radius: 5px;
         position: relative;
         overflow: hidden;
       }
 
-      .image-placeholder::after,
       .line::after {
         content: "";
         position: absolute;
@@ -17260,18 +17125,6 @@ function SkeletonTemplate({ fluid, width, height }) {
         animation: shimmer 1.5s infinite;
       }
 
-      .line.header {
-        width: 25%;
-      }
-
-      .line.description {
-        width: 65%;
-      }
-
-      .line.button {
-        width: 40%;
-      }
-
       @keyframes shimmer {
         0% {
           transform: translateX(-100%);
@@ -17282,14 +17135,7 @@ function SkeletonTemplate({ fluid, width, height }) {
       }
     </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>
+    <div class="line"></div>
   `;
 }
 
@@ -17468,6 +17314,7 @@ class ElementService {
         const skeleton = document.createElement(SKELETON_ELEMENT_TAG);
         const dimensions = SPOT_DIMENSIONS[params.spotType];
         skeleton.data = {
+            spotType: params.spotType,
             fluid: params.fluid,
             ...dimensions,
         };
@@ -18909,7 +18756,7 @@ function rbHomepageHeroTwoTileTemplate(spot, config) {
   `;
 }
 
-const STYLES$4 = ({ textColor = '#ffffff', backgroundColor = 'transparent' }, { prefix }) => `
+const STYLES$4 = ({ textColor = '#212121', backgroundColor = 'transparent' }, { prefix }) => `
     <style>
         .${prefix} {
             display: block;
@@ -18926,6 +18773,10 @@ const STYLES$4 = ({ textColor = '#ffffff', backgroundColor = 'transparent' }, {
             font-family: "Source Sans 3", system-ui;
             margin: 0;
         }
+
+        .${prefix}__header:hover {
+          color: #b5914a;
+        }
     </style>
 `;
 function rbInTextTemplate(spot, config) {
@@ -19379,40 +19230,45 @@ class DataLayerMonitor {
                 return result;
             }
             for (const pushedEvent of args) {
-                const normalizedData = this.cleanEventData(pushedEvent);
-                if (normalizedData) {
-                    this.listener(normalizedData);
+                const eventName = getEventTypeFromRawEvent(pushedEvent.event);
+                if (!eventName) {
+                    continue;
+                }
+                const productData = this.extractProductData(pushedEvent);
+                const eventData = {
+                    event: eventName,
+                    products: productData,
+                };
+                if (productData) {
+                    this.listener(eventData);
                 }
             }
             return result;
         };
     }
-    cleanEventData(data) {
-        const eventName = getEventTypeFromRawEvent(data.event);
-        if (!eventName) {
-            return null;
-        }
-        const productIds = extractDeepValues(data, 'ids', {
-            onlyFirst: false,
-            shouldIncludeZero: true,
-        });
-        if (Array.isArray(productIds) && productIds.length === 0) {
-            return null;
-        }
-        const normalizedData = {
-            event: eventName,
-            productIds,
-        };
-        if (eventName === RMN_SPOT_EVENT.PURCHASE) {
-            const productPrice = extractDeepValues(data, 'price', {
-                onlyFirst: true,
-                shouldIncludeZero: true,
-            });
-            if (productPrice) {
-                normalizedData.productPrice = productPrice;
+    extractProductData(event) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const items = ((_a = event === null || event === void 0 ? void 0 : event.value) === null || _a === void 0 ? void 0 : _a.items) ||
+            ((_b = event === null || event === void 0 ? void 0 : event.ecommerce) === null || _b === void 0 ? void 0 : _b.items) ||
+            ((_d = (_c = event === null || event === void 0 ? void 0 : event.ecommerce) === null || _c === void 0 ? void 0 : _c.detail) === null || _d === void 0 ? void 0 : _d.products) ||
+            ((_f = (_e = event === null || event === void 0 ? void 0 : event.ecommerce) === null || _e === void 0 ? void 0 : _e.checkout) === null || _f === void 0 ? void 0 : _f.products) ||
+            ((_h = (_g = event === null || event === void 0 ? void 0 : event.ecommerce) === null || _g === void 0 ? void 0 : _g.purchase) === null || _h === void 0 ? void 0 : _h.products) ||
+            [];
+        return items.map((item) => {
+            const data = {
+                id: item.item_id || item.id || '',
+                name: item.item_name || item.name || '',
+                brand: item.item_brand || item.brand || '',
+                variant: item.item_variant || item.variant || '',
+                price: Number(item.price) || 0,
+                quantity: Number(item.quantity) || 1,
+                discount: Number(item.discount) || 0,
+            };
+            if (!data.id) {
+                return null;
             }
-        }
-        return normalizedData;
+            return data;
+        });
     }
     stop() {
         if (this.originalPush) {
@@ -19459,27 +19315,52 @@ class MonitorService {
         this.implementedMonitor.start();
     }
     async matchAndFireEvent(eventData, spots) {
-        var _a, _b;
+        var _a;
         if (!spots)
             return;
-        const eventProductIds = new Set(cleanProductIds(eventData.productIds));
         for (const spot of Object.values(spots)) {
             if (!spot.productIds.length)
                 continue;
-            const hasCommonProductIds = cleanProductIds(spot.productIds).find((productId) => eventProductIds.has(productId));
-            if (!hasCommonProductIds || !Object.values(RMN_SPOT_EVENT).includes(eventData.event)) {
-                continue;
+            for (const data of eventData.products) {
+                if (!Object.values(RMN_SPOT_EVENT).includes(eventData.event)) {
+                    continue;
+                }
+                const spotRelatedProductIdsSet = new Set(cleanProductIds(spot.productIds));
+                const [eventProductId] = cleanProductIds([data.id]);
+                const [eventProductBrand] = cleanProductIds([data.brand]);
+                const [eventVariantBrand] = cleanProductIds([data.variant]);
+                const isProductMatch = [eventProductId, eventProductBrand, eventVariantBrand].some((id) => spotRelatedProductIdsSet.has(id));
+                if (!isProductMatch) {
+                    continue;
+                }
+                const eventPosition = spot.events.findIndex((event) => event.event === eventData.event);
+                if (eventPosition === -1)
+                    continue;
+                const eventUrl = spot.events[eventPosition].url;
+                let additionalQueryParams = '';
+                if (eventData.event === RMN_SPOT_EVENT.PURCHASE) {
+                    const gmv = data.price && data.quantity ? data.price * data.quantity : undefined;
+                    // gmv = gross merchandise value, it is calculated by multiplying the product price by the product quantity
+                    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,
+                });
             }
-            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,
-            });
-            await this.fireAndPublishSpotEvent({
-                spotEvent: eventData.event,
-                eventUrl: `${eventUrl}${additionalQueryParams ? `&${additionalQueryParams}` : ''}`,
-                placementId: spot.placementId,
-                spotId: spot.spotId,
-            });
         }
     }
     async fireAndPublishSpotEvent({ spotEvent, eventUrl, placementId, spotId, }) {

package/dist/types/common/helpers/extract-deep.helper.d.ts

@@ -1,4 +1,4 @@
-type ExtractorTarget = 'ids' | 'price';
+type ExtractorTarget = 'ids' | 'price' | 'quantity';
 type ExtractedValue = string | number;
 /**
  * Extracts deep values from an object based on specified target type

package/dist/types/modules/element/component/skeleton/skeleton.interface.d.ts

@@ -1,5 +1,6 @@
 import type { RMN_SPOT_TYPE } from 'enums';
 export interface ICustomSkeletonElementData {
+    spotType: RMN_SPOT_TYPE;
     fluid: boolean;
     width: number;
     height: number;

package/dist/types/modules/element/component/skeleton/skeleton.template.d.ts

@@ -1,2 +1,2 @@
 import type { ICustomSkeletonElementData } from './skeleton.interface';
-export declare function SkeletonTemplate({ fluid, width, height }: ICustomSkeletonElementData): string;
+export declare function SkeletonTemplate({ fluid, width, height, spotType, }: ICustomSkeletonElementData): string;

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

@@ -1,12 +1,13 @@
 import type { RMN_SPOT_EVENT } from 'enums';
 export interface IDataLayerEvent {
-    event: string;
-    [key: string]: any;
+    event: RMN_SPOT_EVENT;
+    products: IProductData[];
 }
 export interface INormalizedEventData {
     event: RMN_SPOT_EVENT;
     productIds: Array<string | number>;
     productPrice?: number;
+    productQuantity?: number;
 }
 export interface IFireAndPublishSpotEventParams {
     spotEvent: RMN_SPOT_EVENT;
@@ -14,3 +15,12 @@ export interface IFireAndPublishSpotEventParams {
     placementId: string;
     spotId: string;
 }
+export interface IProductData {
+    id: string | number;
+    name: string;
+    brand: string;
+    variant: string;
+    price: number;
+    quantity: number;
+    discount?: number;
+}

package/dist/types/modules/monitor/monitors/datalayer.monitor.d.ts

@@ -1,12 +1,12 @@
-import type { INormalizedEventData } from '../monitor.interface';
+import type { IDataLayerEvent } from '../monitor.interface';
 export declare class DataLayerMonitor {
     private static instance;
     private readonly originalPush;
     private listener?;
     private constructor();
     static getInstance(): DataLayerMonitor;
-    setListener(listener: (data: INormalizedEventData) => void): void;
+    setListener(listener: (data: IDataLayerEvent) => void): void;
     start(): void;
-    private cleanEventData;
+    private extractProductData;
     stop(): void;
 }

package/package.json

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