@liquidcommercedev/rmn-sdk 1.4.6 → 1.5.0-beta.10

package/dist/types/modules/helper-service/pubsub.service.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Callback function type for event subscribers
+ * @template T The type of data the callback receives
+ */
+export type PubSubCallback<T> = (data: T) => void;
+/**
+ * Function type for unsubscribing from an event
+ */
+export type PubSubUnsubscribe = () => void;
+/**
+ * PubsubService class
+ * Manages event subscriptions and publications
+ * @template IRmnEventMap A record type defining the structure of events and their data
+ */
+export declare class PubsubService<IRmnEventMap> {
+    private static instance;
+    static getInstance<IRmnEventMap>(): PubsubService<IRmnEventMap>;
+    /**
+     * Object to store subscribers for each event type
+     */
+    private subscribers;
+    /**
+     * Subscribe to an event
+     * @param eventType - The type of event to subscribe to
+     * @param callback - The function to be called when the event is published
+     * @returns A function to unsubscribe from the event
+     *
+     * @Example:
+     * const unsubscribe = pubSub.subscribe('userLogin', (data) => {
+     *   console.log(`User ${data.username} logged in`);
+     * });
+     */
+    subscribe<K extends keyof IRmnEventMap>(eventType: K, callback: PubSubCallback<IRmnEventMap[K]>): PubSubUnsubscribe;
+    /**
+     * Publish an event
+     * @param eventType - The type of event to publish
+     * @param data - The data to be passed to the event subscribers
+     *
+     * @Example:
+     * pubSub.publish('userLogin', { username: 'john_doe', timestamp: Date.now() });
+     */
+    publish<K extends keyof IRmnEventMap>(eventType: K, data: IRmnEventMap[K]): void;
+}
+/**
+ * Usage Example:
+ *
+ * interface IRmnEventMap {
+ *   userLogin: { username: string; timestamp: number };
+ *   pageView: { url: string; timestamp: number };
+ * }
+ *
+ * const pubSub = new PubsubService<IRmnEventMap>();
+ *
+ * // Subscribe to events
+ * const unsubscribeLogin = pubSub.subscribe('userLogin', (data) => {
+ *   console.log(`User ${data.username} logged in at ${new Date(data.timestamp)}`);
+ * });
+ *
+ * pubSub.subscribe('pageView', (data) => {
+ *   console.log(`Page ${data.url} viewed at ${new Date(data.timestamp)}`);
+ * });
+ *
+ * // Publish events
+ * pubSub.publish('userLogin', { username: 'john_doe', timestamp: Date.now() });
+ * pubSub.publish('pageView', { url: '/home', timestamp: Date.now() });
+ *
+ * // Unsubscribe from an event
+ * unsubscribeLogin();
+ */

package/dist/types/modules/helper-service/resize.service.d.ts

@@ -0,0 +1,30 @@
+export interface IResizeSize {
+    width: number;
+    height: number;
+}
+export interface IResizeOptions {
+    element: HTMLElement;
+    maxSize: IResizeSize;
+    minScale: number;
+}
+export interface ISizeChangedEvent extends CustomEvent {
+    detail: {
+        width: number;
+        height: number;
+        newWidth: number;
+        newHeight: number;
+        scale: number;
+    };
+}
+export declare class ResizeObserverService {
+    private element;
+    private readonly container;
+    private resizeObserver;
+    private maxSize;
+    private minSize;
+    private aspectRatio;
+    constructor({ element, maxSize, minScale }: IResizeOptions);
+    private setDimensions;
+    private updateElementSize;
+    disconnect(): void;
+}

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

@@ -0,0 +1,2 @@
+export * from './monitor.interface';
+export * from './monitor.service';

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

@@ -0,0 +1,4 @@
+export declare enum AnalyticsTool {
+    GoogleAnalytics = "google-analytics",
+    Other = "Other"
+}

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

@@ -0,0 +1,11 @@
+import type { RMN_SPOT_EVENT } from 'enums';
+export interface INormalizedEventData {
+    event: RMN_SPOT_EVENT;
+    productIds: Array<string | number>;
+}
+export interface IFireAndPublishSpotEventParams {
+    spotEvent: RMN_SPOT_EVENT;
+    eventUrl: string;
+    placementId: string;
+    spotId: string;
+}

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

@@ -0,0 +1,12 @@
+export declare class MonitorService {
+    private static instance;
+    private readonly implementedMonitor?;
+    private readonly pubSubService?;
+    private readonly localStorageService?;
+    private constructor();
+    static getInstance(): MonitorService;
+    start(): void;
+    private matchAndFireEvent;
+    private fireAndPublishSpotEvent;
+    private detectAnalyticsTool;
+}

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

@@ -0,0 +1,12 @@
+import type { INormalizedEventData } 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;
+    start(): void;
+    private cleanEventData;
+    stop(): void;
+}

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

@@ -0,0 +1,4 @@
+export * from './selection.constant';
+export * from './selection.interface';
+export * from './selection.service';
+export * from './selection.type';

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

@@ -0,0 +1 @@
+export declare const SELECTION_API_PATH = "/spots/selection";

package/dist/types/modules/{spot/spot.interface.d.ts → selection/selection.interface.d.ts}

@@ -1,5 +1,6 @@
-import type { RMN_SPOT_EVENT, RMN_SPOT_TYPE } from './spot.enum';
-import type { RmnFilterType, RmnSpotType, SpotIdentifierType, SpotVariantType } from './spot.type';
+import type { RMN_SPOT_EVENT, RMN_SPOT_TYPE } from 'enums';
+import type { PlacementIdType, SpotVariantType } from 'modules/selection';
+import type { RmnFilterType, RmnSpotType } from 'types';
 export interface ISpotSelectionParams {
     url?: string;
     spots: RmnSpotType[];
@@ -10,6 +11,7 @@ export interface ISpotEvent {
     url: string;
 }
 export interface ISpot {
+    id: string;
     events: ISpotEvent[];
     spot: RMN_SPOT_TYPE;
     variant: SpotVariantType;
@@ -27,17 +29,14 @@ export interface ISpot {
     secondaryImage?: string;
     mobilePrimaryImage?: string;
     mobileSecondaryImage?: string;
-    productUpcs?: string[];
+    productIds?: Array<string | number>;
+    rbProductUpcs?: Array<string | number>;
+    rbProductSalsifyGroupings?: Array<string | number>;
+    rbProductSalsifyPids?: Array<string | number>;
 }
-export interface ICreateSpotElementConfig {
-    fluid?: boolean;
-    customContent?: HTMLElement | string;
-    redirectOnClick?: boolean;
-}
-export type ISpots = Record<SpotIdentifierType, ISpot[]>;
-export interface ISpotSelectionService {
-    spotSelection(data: ISpotSelectionParams): Promise<ISpots>;
-}
-export interface ISpotHtmlService {
-    createSpotHtmlElement(spot: ISpot, config?: ICreateSpotElementConfig): HTMLElement | null;
+export type ISpots = Record<PlacementIdType, ISpot[]>;
+export interface ISelectionService {
+    spotSelection(data: ISpotSelectionParams): Promise<ISpots | {
+        error: string;
+    }>;
 }

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

@@ -0,0 +1,18 @@
+import { BaseApi } from 'common/http';
+import type { IAuthCredentials } from 'modules/auth';
+import type { ISpots } from 'modules/selection';
+import type { ISelectionService, ISpotSelectionParams } from './selection.interface';
+export declare class SelectionService extends BaseApi implements ISelectionService {
+    private constructor();
+    static getInstance(auth: IAuthCredentials): SelectionService;
+    /**
+     * Makes a selection request on our server based on the provided data.
+     *
+     * @param {ISpotSelectionParams} data - Spots selection parameters.
+     *
+     * @return {Promise<ISpots | { error: string }>} - The spots response object.
+     */
+    spotSelection(data: ISpotSelectionParams): Promise<ISpots | {
+        error: string;
+    }>;
+}

package/dist/types/modules/{spot/spot.type.d.ts → selection/selection.type.d.ts}

@@ -1,13 +1,14 @@
-import type { RMN_FILTER_PROPERTIES, RMN_SPOT_TYPE } from './spot.enum';
+import type { RMN_FILTER_PROPERTIES, RMN_SPOT_TYPE } from 'enums';
 export type RmnFilterType = {
     [key in RMN_FILTER_PROPERTIES]?: string[];
 };
+export type PlacementIdType = RMN_SPOT_TYPE | `${RMN_SPOT_TYPE}${number}` | string;
 export type SpotFilterType = {
+    placementId?: PlacementIdType;
     spot: RMN_SPOT_TYPE | string;
-    count: number;
+    count?: number;
     exactMatch?: string;
 } & Omit<RmnFilterType, RMN_FILTER_PROPERTIES.KEYWORDS>;
-export type SpotIdentifierType = RMN_SPOT_TYPE | `${RMN_SPOT_TYPE}${number}`;
 export type RmnSpotType = RMN_SPOT_TYPE | string | SpotFilterType;
 type RBSpotTypeKeys = keyof {
     [K in keyof typeof RMN_SPOT_TYPE as K extends `RB_${string}` ? K : never]: (typeof RMN_SPOT_TYPE)[K];

package/dist/types/rmn-client.d.ts

@@ -1,34 +1,74 @@
-import type { IAuthCredentials } from './modules/auth';
-import type { ICreateSpotElementConfig, ISpot, ISpots, ISpotSelectionParams } from './modules/spot';
-import type { IRmnClient, IRmnConfig } from './types';
+import type { IAuthCredentials } from 'modules/auth';
+import type { IInjectSpotElementParams, IRmnCreateSpotElementConfig } from 'modules/element';
+import type { ISpot, ISpots, ISpotSelectionParams } from 'modules/selection';
+import type { IRmnClient, IRmnConfig, IRmnEventManager } from 'types';
 export declare class LiquidCommerceRmnClient implements IRmnClient {
-    private readonly spotSelectionService;
-    private readonly spotHtmlService;
+    private readonly selectionService;
+    private readonly elementService;
+    private readonly eventService;
     constructor(auth: IAuthCredentials);
     /**
      * Makes a selection request on our server based on the provided data.
      *
      * To create a spot html element, use the RmnCreateSpotElement function.
      *
-     * @param {ISpotSelectionParams} data - Spots selection parameters.
+     * @param {ISpotSelectionParams} params - Spots selection parameters.
      *
-     * @return {Promise<ISpots>} - The spots response object.
+     * @return {Promise<ISpots | { error : string }>} - The spots response object.
      */
-    spotSelection(data: ISpotSelectionParams): Promise<ISpots>;
+    spotSelection(params: ISpotSelectionParams): Promise<ISpots | {
+        error: string;
+    }>;
     /**
-     * Creates the spot html element based on the provided data using shadow dom.
+     * Injects the spot elements into their provided placement.
      *
-     * This method is useful when you are initializing the client in a browser environment, so you can create the spot html element directly from the RmnClient instance.
+     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
      *
+     * @return {Promise<void>} - A promise that resolves when the spot elements are injected.
+     */
+    injectSpotElement(params: IInjectSpotElementParams): Promise<void>;
+    /**
+     * Makes a selection request on our server based on the provided data.
+     *
+     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
+     *
+     * @return {Promise<ISpots | {error: string}>} - The spots response object.
+     */
+    private spotSelectionRequest;
+    /**
+     * Injects a carousel element with the provided spots into the placement.
+     *
+     * @param {HTMLElement} placement - The placement element.
+     * @param {ISpot[]} spots - The spot data.
+     * @param {IInjectSpotElementConfig} config - The configuration object.
+     *
+     * @return {void}
+     */
+    private injectCarouselSpotElement;
+    /**
+     * Injects a single spot element into the provided placement.
+     *
+     * @param {IInjectSpotElement} injectItem - The inject item data.
+     * @param {HTMLElement} placement - The placement element.
      * @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.customContent} config.customContent - Use a custom html element/string.
-     * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
+     * @param {IInjectSpotElementConfig} config - The configuration object.
+     *
+     * @return {void}
+     */
+    private injectOneSpotElement;
+    /**
+     * Prevents duplicate placement ids in the inject data.
      *
-     * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.
+     * @param {IInjectSpotElement[]} inject - The inject data.
+     *
+     * @throws {Error} - If a duplicate placement id is found.
+     *
+     * @return {void}
      */
-    createSpotElement(spot: ISpot, config?: ICreateSpotElementConfig): HTMLElement | null;
+    private preventDuplicateSpotPlacementIds;
+    private preventNonExistentSpotTypes;
+    private updateSpotsState;
+    private useSpotSelectionExample;
 }
 /**
  * Creates a new instance of the RmnClient.
@@ -39,20 +79,23 @@ export declare class LiquidCommerceRmnClient implements IRmnClient {
  * @return {Promise<IRmnClient>} - The RmnClient instance.
  */
 declare function RmnClient(apiKey: string, config: IRmnConfig): Promise<IRmnClient>;
+/**
+ * Creates a new instance of the RmnEventManager.
+ *
+ * @return {IRmnEventManager} - The RmnEventManager instance.
+ */
+declare function RmnEventManager(): IRmnEventManager;
 /**
  * Creates the spot html element based on the provided data using shadow dom.
  *
  * This method is useful when you are initializing the client in a non-browser environment.
- * When you request a spot selection, you will receive the spot data in server-side and return them back to the client.
+ * When you request a spot selection, you will receive the spot data in server-side and return them to the client.
  * Then you can use this function to create the spot html element based on the provided data without the need of the RmnClient instance.
  *
  * @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.customContent} config.customContent - Use a custom html element/string.
- * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
+ * @param {IRmnCreateSpotElementConfig} config - The configuration object.
  *
  * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.
  */
-declare function RmnCreateSpotElement(spot: ISpot, config?: ICreateSpotElementConfig): HTMLElement | null;
-export { RmnClient, RmnCreateSpotElement };
+declare function RmnCreateSpotElement(spot: ISpot, config?: IRmnCreateSpotElementConfig): HTMLElement | null;
+export { RmnClient, RmnCreateSpotElement, RmnEventManager };

package/dist/types/types.d.ts

@@ -1,10 +1,22 @@
-export type { ICreateSpotElementConfig, ISpotEvent, ISpots, RmnFilterType, RmnSpotType, } from './modules/spot';
-export { ISpot, ISpotSelectionParams } from './modules/spot';
-import type { RMN_ENV } from './enums';
-import type { ICreateSpotElementConfig, ISpot, ISpots, ISpotSelectionParams } from './modules/spot';
+export type { IInjectSpotElement, IInjectSpotElementConfig, IInjectSpotElementParams, IRmnCreateSpotElementConfig, ISpotColors, ISpotOverlay, } from 'modules/element';
+export type { CarouselNavPositionType, ICarouselButtonOptions, ICarouselDotOptions, ICarouselOptions, } from 'modules/element/component/carousel';
+export type { ILifecycleState, ILSDisplayConfig, ILSDom, ILSIdentifier, ILSState, IRmnEventMap, IRmnSpotEvent, } from 'modules/event';
+export type { ISpots, RmnFilterType, RmnSpotType } from 'modules/selection';
+export { ISpot, ISpotEvent, ISpotSelectionParams } from 'modules/selection';
+import type { RMN_ENV, RMN_EVENT } from 'enums';
+import type { IInjectSpotElementParams } from 'modules/element';
+import type { IRmnEventMap } from 'modules/event';
+import type { ISpots, ISpotSelectionParams } from 'modules/selection';
 export interface IRmnClient {
-    spotSelection(data: ISpotSelectionParams): Promise<ISpots>;
-    createSpotElement(spot: ISpot, config?: ICreateSpotElementConfig): HTMLElement | null;
+    spotSelection(params: ISpotSelectionParams): Promise<ISpots | {
+        error: string;
+    }>;
+    injectSpotElement(params: IInjectSpotElementParams): Promise<void>;
+}
+export interface IRmnEventManager {
+    subscribe: (eventType: RMN_EVENT, callback: (data: IRmnEventMap[RMN_EVENT]) => void) => () => void;
+    publish: (eventType: RMN_EVENT, data: IRmnEventMap[RMN_EVENT]) => void;
+    destroySpot: (placementId: string) => void;
 }
 export interface IRmnConfig {
     env: RMN_ENV;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@liquidcommercedev/rmn-sdk",
   "description": "LiquidCommerce RMN SDK",
   "author": "LiquidCommerce Tech",
-  "version": "1.4.6",
+  "version": "1.5.0-beta.10",
   "homepage": "https://docs.liquidcommerce.co/rmn-sdk",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",
@@ -42,7 +42,7 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
-    "lint": "eslint \"src/**/*.ts\" --fix",
+    "lint": "eslint \"src/**/*.ts\"",
     "format": "prettier --write \"src/**/*.ts\"",
     "docs": "typedoc --out docs src",
     "prepublishOnly": "pnpm run build"