@liquidcommercedev/rmn-sdk 1.4.1 → 1.4.2-beta.2

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

@@ -0,0 +1,6 @@
+export * from './spot.constant';
+export * from './spot.enum';
+export * from './spot.html.service';
+export * from './spot.interface';
+export * from './spot.selection.service';
+export * from './spot.type';

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

@@ -0,0 +1,3 @@
+export declare const SPOT_ELEMENT_TAG = "spot-element";
+export declare const SPOTS_SELECTION_API_PATH = "/spots/selection";
+export declare const SPOT_EVENT_API_PATH = "/spots/event";

package/dist/types/modules/spot/spot.enum.d.ts

@@ -0,0 +1,57 @@
+export declare enum RMN_SPOT_TYPE {
+    RB_HOMEPAGE_HERO_THREE_TILE = "rbHomepageHeroThreeTile",
+    RB_HOMEPAGE_HERO_TWO_TILE = "rbHomepageHeroTwoTile",
+    RB_HOMEPAGE_HERO_FULL_IMAGE = "rbHomepageHeroFullImage",
+    RB_LARGE_CATEGORY_IMAGE_TOUT = "rbLargeCategoryImageTout",
+    RB_SMALL_DISCOVER_TOUT = "rbSmallDiscoverTout",
+    RB_SMALL_CATEGORY_IMAGE_TOUT = "rbSmallCategoryImageTout",
+    RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK = "rbCollectionBannerWithoutTextBlock",
+    RB_PRODUCT_UPCS = "rbProductUpcs",
+    RB_NAVIGATION_BANNER = "rbNavigationBanner",
+    BILLBOARD = "billboard",
+    LARGE_RECTANGLE = "largeRectangle",
+    VERTICAL_RECTANGLE = "verticalRectangle",
+    SQUARE = "square",
+    LARGE_LEADERBOARD = "largeLeaderboard",
+    WIDE_SKYSCRAPER = "wideSkyscraper",
+    IN_TEXT = "inText",
+    SMALL_RECTANGLE = "smallRectangle",
+    MEDIUM_RECTANGLE = "mediumRectangle",
+    BANNER = "banner",
+    LEADERBOARD = "leaderboard",
+    SKYSCRAPER = "skyscraper",
+    HALF_PAGE = "halfPage",
+    SMALL_SQUARE = "smallSquare",
+    VERTICAL_BANNER = "verticalBanner",
+    BUTTON_2 = "button2",
+    MICRO_BAR = "microBar",
+    POP_UP = "popUp",
+    PORTRAIT = "portrait",
+    SMARTPHONE_BANNER_1 = "smartphoneBanner1",
+    SMARTPHONE_BANNER_2 = "smartphoneBanner2",
+    MOBILE_PHONE_INTERSTITIAL_1 = "mobilePhoneInterstitial1",
+    MOBILE_PHONE_INTERSTITIAL_2 = "mobilePhoneInterstitial2",
+    MOBILE_PHONE_INTERSTITIAL_3 = "mobilePhoneInterstitial3",
+    FEATURE_PHONE_SMALL_BANNER = "featurePhoneSmallBanner",
+    FEATURE_PHONE_MEDIUM_BANNER = "featurePhoneMediumBanner",
+    FEATURE_PHONE_LARGE_BANNER = "featurePhoneLargeBanner"
+}
+export declare enum RMN_FILTER_PROPERTIES {
+    KEYWORDS = "keywords",
+    PARENTCO = "parentCo",
+    BRAND = "brand",
+    CATEGORY = "category",
+    TYPE = "type",
+    CLASSIFICATION = "classification",
+    HOLIDAY = "holiday",
+    PUBLISHERS = "publishers",
+    SECTION = "section"
+}
+export declare enum RMN_SPOT_EVENT {
+    IMPRESSION = "IMPRESSION",
+    CLICK = "CLICK",
+    PURCHASE = "PURCHASE",
+    ADD_TO_CART = "ADD_TO_CART",
+    ADD_TO_WISHLIST = "ADD_TO_WISHLIST",
+    BUY_NOW = "BUY_NOW"
+}

package/dist/types/modules/spot/spot.html.service.d.ts

@@ -0,0 +1,22 @@
+import type { ICreateSpotElementConfig, ISpot, ISpotHtmlService } from './spot.interface';
+export declare class SpotHtmlService implements ISpotHtmlService {
+    static getInstance(): SpotHtmlService;
+    /**
+     * Creates the html element based on the provided spot data using shadow dom.
+     *
+     * This method is only available in browser environments.
+     *
+     * @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.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.
+     */
+    createSpotHtmlElement(spot: ISpot, config?: ICreateSpotElementConfig): HTMLElement | null;
+    /**
+     * @returns {boolean} - True if the browser environment is available and the element is defined.
+     */
+    private ensureBrowserEnvironmentAndDefineElement;
+}

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

@@ -0,0 +1,44 @@
+import type { RMN_ENV } from './../../enums';
+import type { RMN_SPOT_EVENT, RMN_SPOT_TYPE } from './spot.enum';
+import type { RmnFilterType, RmnSpotType, SpotIdentifierType, SpotVariantType } from './spot.type';
+export interface ISpotSelectionParams {
+    spots: RmnSpotType[];
+    filter?: Partial<RmnFilterType>;
+}
+export interface ISpotEvent {
+    event: RMN_SPOT_EVENT;
+    url: string;
+}
+export interface ISpot {
+    events: ISpotEvent[];
+    spot: RMN_SPOT_TYPE;
+    variant: SpotVariantType;
+    width: number;
+    height: number;
+    preHeader?: string;
+    header?: string;
+    description?: string;
+    ctaText?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    ctaTextColor?: string;
+    ctaBorderColor?: string;
+    primaryImage?: string;
+    secondaryImage?: string;
+    mobilePrimaryImage?: string;
+    mobileSecondaryImage?: string;
+    productUpcs?: string[];
+    env: RMN_ENV;
+}
+export interface ICreateSpotElementConfig {
+    fluid?: boolean;
+    customHtmlElement?: HTMLElement;
+    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;
+}

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

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

package/dist/types/modules/spot/spot.type.d.ts

@@ -0,0 +1,27 @@
+import type { RMN_FILTER_PROPERTIES, RMN_SPOT_TYPE } from './spot.enum';
+export type RmnFilterType = {
+    [key in RMN_FILTER_PROPERTIES]?: string[];
+};
+export type SpotFilterType = {
+    spot: RMN_SPOT_TYPE | string;
+    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];
+};
+type IABSpotTypeKeys = keyof {
+    [K in keyof typeof RMN_SPOT_TYPE as K extends `RB_${string}` ? never : K]: (typeof RMN_SPOT_TYPE)[K];
+};
+type RBSpotTypeValues = (typeof RMN_SPOT_TYPE)[RBSpotTypeKeys];
+type IABSpotTypeValues = (typeof RMN_SPOT_TYPE)[IABSpotTypeKeys];
+export type SpotVariantType = RBSpotTypeValues | `${IABSpotTypeValues}V${number}`;
+export type SpotDimensionsType = {
+    [key in RMN_SPOT_TYPE]: {
+        width: number;
+        height: number;
+    };
+};
+export {};

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

@@ -0,0 +1,58 @@
+import type { IAuthCredentials } from './modules/auth';
+import type { ICreateSpotElementConfig, ISpot, ISpots, ISpotSelectionParams } from './modules/spot';
+import type { IRmnClient, IRmnConfig } from './types';
+export declare class LiquidCommerceRmnClient implements IRmnClient {
+    private readonly spotSelectionService;
+    private readonly spotHtmlService;
+    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.
+     *
+     * @return {Promise<ISpots>} - The spots response object.
+     */
+    spotSelection(data: ISpotSelectionParams): Promise<ISpots>;
+    /**
+     * 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 browser environment, so you can create the spot html element directly from 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.customHtmlElement} config.customHtmlElement - Use a custom html element.
+     * @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.
+     */
+    createSpotElement(spot: ISpot, config?: ICreateSpotElementConfig): HTMLElement | null;
+}
+/**
+ * Creates a new instance of the RmnClient.
+ *
+ * @param {string} apiKey - The api key.
+ * @param {IRmnConfig} config - The configuration object.
+ *
+ * @return {Promise<IRmnClient>} - The RmnClient instance.
+ */
+declare function RmnClient(apiKey: string, config: IRmnConfig): Promise<IRmnClient>;
+/**
+ * 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.
+ * 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.customHtmlElement} config.customHtmlElement - Use a custom html element.
+ * @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.
+ */
+declare function RmnCreateSpotElement(spot: ISpot, config?: ICreateSpotElementConfig): HTMLElement | null;
+export { RmnClient, RmnCreateSpotElement };

package/dist/types/types.d.ts

@@ -0,0 +1,11 @@
+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 interface IRmnClient {
+    spotSelection(data: ISpotSelectionParams): Promise<ISpots>;
+    createSpotElement(spot: ISpot, config?: ICreateSpotElementConfig): HTMLElement | null;
+}
+export interface IRmnConfig {
+    env: RMN_ENV;
+}

package/package.json

@@ -1,17 +1,34 @@
 {
   "name": "@liquidcommercedev/rmn-sdk",
   "description": "LiquidCommerce RMN SDK",
-  "author": "ReserveBar Tech",
-  "version": "1.4.1",
+  "author": "LiquidCommerce Tech",
+  "version": "1.4.2-beta.2",
   "homepage": "https://docs.liquidcommerce.co/rmn-sdk",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "browser": "./cdn/rmn-sdk.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.esm.js",
+  "browser": "./umd/liquidcommerce-rmn-sdk.min.js",
+  "types": "./dist/types/index.d.ts",
+  "packageManager": "pnpm@9.5.0",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.esm.js"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.cjs"
+      },
+      "browser": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./umd/liquidcommerce-rmn-sdk.min.js"
+      }
+    }
+  },
   "files": [
     "dist",
-    "README.md",
-    "CHANGELOG.md"
+    "umd",
+    "README.md"
   ],
   "publishConfig": {
     "access": "public"
@@ -19,7 +36,7 @@
   "type": "module",
   "sideEffects": false,
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c --environment NODE_ENV:production",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "dev": "rollup -c --environment NODE_ENV:development -w",
     "test": "vitest run",
@@ -28,7 +45,7 @@
     "lint": "eslint \"src/**/*.ts\" --fix",
     "format": "prettier --write \"src/**/*.ts\"",
     "docs": "typedoc --out docs src",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "pnpm run build"
   },
   "keywords": [
     "liquidcommerce",
@@ -65,14 +82,14 @@
     "@types/crypto-js": "^4.2.2",
     "@types/eslint__js": "^8.42.3",
     "@types/jest": "^29.4.0",
-    "@types/node": "^20.0.0",
+    "@types/node": "^20.16.11",
     "@typescript-eslint/eslint-plugin": "^8.5.0",
     "@typescript-eslint/parser": "^8.5.0",
     "@vitest/coverage-v8": "^1.0.0",
     "conventional-changelog-cli": "^5.0.0",
     "crypto-js": "^4.2.0",
     "dotenv": "^16.4.5",
-    "eslint": "^8.56.0",
+    "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.30.0",
@@ -82,13 +99,11 @@
     "eslint-plugin-sonarjs": "^2.0.1",
     "eslint-plugin-unicorn": "^55.0.0",
     "events": "^3.3.0",
-    "husky": "^9.1.5",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.4.3",
     "prettier": "^3.3.3",
     "process": "^0.11.10",
     "rollup": "^4.21.0",
-    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "rollup-plugin-serve": "^1.1.1",
@@ -104,5 +119,10 @@
   },
   "engines": {
     "node": ">=20"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": []
+    }
   }
 }