@liquidcommercedev/rmn-sdk 1.4.6 → 1.5.0-beta.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.cjs +2463 -720
- package/dist/index.esm.js +2463 -721
- package/dist/types/common/helpers/uuid.helper.d.ts +49 -0
- package/dist/types/enums.d.ts +59 -1
- package/dist/types/index.umd.d.ts +2 -2
- package/dist/types/modules/element/component/carousel/carousel.component.d.ts +3 -0
- package/dist/types/modules/element/component/carousel/carousel.interface.d.ts +35 -0
- package/dist/types/modules/element/component/carousel/carousel.style.d.ts +2 -0
- package/dist/types/modules/element/component/carousel/index.d.ts +3 -0
- package/dist/types/modules/element/component/spot/index.d.ts +2 -0
- package/dist/types/modules/element/component/spot/spot.component.d.ts +3 -0
- package/dist/types/modules/element/component/spot/spot.interface.d.ts +10 -0
- package/dist/types/modules/element/component/utils.d.ts +1 -0
- package/dist/types/modules/{spot/html/constants/html.constant.d.ts → element/element.constant.d.ts} +2 -5
- package/dist/types/modules/element/element.interface.d.ts +52 -0
- package/dist/types/modules/element/element.service.d.ts +40 -0
- package/dist/types/modules/element/index.d.ts +3 -0
- package/dist/types/modules/element/template/helper.d.ts +4 -0
- package/dist/types/modules/element/template/index.d.ts +1 -0
- package/dist/types/modules/element/template/reservebar/collection-banner-without-text-block.template.d.ts +3 -0
- package/dist/types/modules/element/template/reservebar/homepage-hero-full-image.template.d.ts +3 -0
- package/dist/types/modules/element/template/reservebar/homepage-hero-three-tile.template.d.ts +3 -0
- package/dist/types/modules/element/template/reservebar/homepage-hero-two-tile.template.d.ts +3 -0
- package/dist/types/modules/element/template/reservebar/large-category-image-tout.template.d.ts +3 -0
- package/dist/types/modules/element/template/reservebar/navigation-banner.template.d.ts +3 -0
- package/dist/types/modules/element/template/reservebar/small-category-image-tout.template.d.ts +3 -0
- package/dist/types/modules/element/template/reservebar/small-discover-tout.template.d.ts +3 -0
- package/dist/types/modules/element/template/template.service.d.ts +11 -0
- package/dist/types/modules/element/template/template.type.d.ts +11 -0
- package/dist/types/modules/event/event.constant.d.ts +1 -0
- package/dist/types/modules/event/event.interface.d.ts +72 -0
- package/dist/types/modules/event/event.service.d.ts +47 -0
- package/dist/types/modules/event/helpers/index.d.ts +3 -0
- package/dist/types/modules/event/helpers/intersection.service.d.ts +8 -0
- package/dist/types/modules/event/helpers/localstorage.service.d.ts +26 -0
- package/dist/types/modules/event/helpers/resize.service.d.ts +30 -0
- package/dist/types/modules/event/index.d.ts +4 -0
- package/dist/types/modules/event/pubsub.d.ts +69 -0
- package/dist/types/modules/selection/index.d.ts +4 -0
- package/dist/types/modules/selection/selection.constant.d.ts +1 -0
- package/dist/types/modules/{spot/spot.interface.d.ts → selection/selection.interface.d.ts} +10 -13
- package/dist/types/modules/selection/selection.service.d.ts +18 -0
- package/dist/types/modules/{spot/spot.type.d.ts → selection/selection.type.d.ts} +4 -3
- package/dist/types/rmn-client.d.ts +66 -23
- package/dist/types/static.constant.d.ts +4 -0
- package/dist/types/types.d.ts +17 -6
- package/package.json +2 -2
- package/umd/liquidcommerce-rmn-sdk.min.js +1 -1
- package/dist/types/modules/spot/html/constants/index.d.ts +0 -1
- package/dist/types/modules/spot/html/index.d.ts +0 -1
- package/dist/types/modules/spot/html/spot.element.service.d.ts +0 -7
- package/dist/types/modules/spot/html/templates/index.d.ts +0 -1
- package/dist/types/modules/spot/html/templates/reservebar/collection-banner-without-text-block.template.d.ts +0 -2
- package/dist/types/modules/spot/html/templates/reservebar/homepage-hero-full-image.template.d.ts +0 -2
- package/dist/types/modules/spot/html/templates/reservebar/homepage-hero-three-tile.template.d.ts +0 -2
- package/dist/types/modules/spot/html/templates/reservebar/homepage-hero-two-tile.template.d.ts +0 -2
- package/dist/types/modules/spot/html/templates/reservebar/large-category-image-tout.template.d.ts +0 -2
- package/dist/types/modules/spot/html/templates/reservebar/navigation-banner.template.d.ts +0 -2
- package/dist/types/modules/spot/html/templates/reservebar/small-category-image-tout.template.d.ts +0 -2
- package/dist/types/modules/spot/html/templates/reservebar/small-discover-tout.template.d.ts +0 -2
- package/dist/types/modules/spot/html/templates/spot.template.d.ts +0 -21
- package/dist/types/modules/spot/index.d.ts +0 -6
- package/dist/types/modules/spot/spot.constant.d.ts +0 -4
- package/dist/types/modules/spot/spot.enum.d.ts +0 -57
- package/dist/types/modules/spot/spot.html.service.d.ts +0 -22
- package/dist/types/modules/spot/spot.selection.service.d.ts +0 -15
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/billboard/billboard-v1.template.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/billboard/billboard-v2.template.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/billboard/billboard-v3.template.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/billboard/index.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/in-text/in-text-v1.template.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/in-text/index.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/index.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/large-leaderboard/index.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/large-leaderboard/large-leaderboard-v1.template.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/large-leaderboard/large-leaderboard-v2.template.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/large-rectangle/index.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/large-rectangle/large-rectangle-v1.template.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/square/index.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/square/square-v1.template.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/square/square-v2.template.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/vertical-rectangle/index.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/vertical-rectangle/vertical-rectangle-v1.template.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/wide-skyscraper/index.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/iab/wide-skyscraper/wide-skyscraper-v1.template.d.ts +0 -0
- /package/dist/types/modules/{spot/html/templates → element/template}/reservebar/index.d.ts +0 -0
@@ -0,0 +1,49 @@
|
|
1
|
+
export declare class UniqueIdGenerator {
|
2
|
+
private static readonly epoch;
|
3
|
+
private static readonly nodeBits;
|
4
|
+
private static readonly sequenceBits;
|
5
|
+
private static lastTimestamp;
|
6
|
+
private static sequence;
|
7
|
+
private static nodeId;
|
8
|
+
private static readonly base32Chars;
|
9
|
+
/**
|
10
|
+
* Initialize the generator with a node ID
|
11
|
+
* @param nodeId Number between 0-1023 to identify this instance
|
12
|
+
*/
|
13
|
+
static initialize(nodeId?: number): void;
|
14
|
+
/**
|
15
|
+
* Convert a number to base32 string with specified length
|
16
|
+
*/
|
17
|
+
private static toBase32;
|
18
|
+
/**
|
19
|
+
* Generate a cryptographically secure random number
|
20
|
+
*/
|
21
|
+
private static getSecureRandom;
|
22
|
+
/**
|
23
|
+
* Wait until next millisecond
|
24
|
+
*/
|
25
|
+
private static waitNextMillis;
|
26
|
+
/**
|
27
|
+
* Generates a highly unique ID with the following format:
|
28
|
+
* TTTTTTTTTTCCCCNNNNNRRRR
|
29
|
+
* T: Timestamp (10 chars)
|
30
|
+
* C: Counter (4 chars)
|
31
|
+
* N: Node ID (5 chars)
|
32
|
+
* R: Random (4 chars)
|
33
|
+
*
|
34
|
+
* Total length: 23 characters, always uppercase alphanumeric
|
35
|
+
*/
|
36
|
+
static generate(): string;
|
37
|
+
/**
|
38
|
+
* Validates if a string matches the expected ID format
|
39
|
+
*/
|
40
|
+
static isValid(id: string): boolean;
|
41
|
+
/**
|
42
|
+
* Decode base32 string to number
|
43
|
+
*/
|
44
|
+
private static decodeBase32;
|
45
|
+
/**
|
46
|
+
* Extract timestamp from ID
|
47
|
+
*/
|
48
|
+
static getTimestamp(id: string): Date;
|
49
|
+
}
|
package/dist/types/enums.d.ts
CHANGED
@@ -1,4 +1,62 @@
|
|
1
|
-
export
|
1
|
+
export declare enum RMN_SPOT_TYPE {
|
2
|
+
RB_HOMEPAGE_HERO_THREE_TILE = "rbHomepageHeroThreeTile",
|
3
|
+
RB_HOMEPAGE_HERO_TWO_TILE = "rbHomepageHeroTwoTile",
|
4
|
+
RB_HOMEPAGE_HERO_FULL_IMAGE = "rbHomepageHeroFullImage",
|
5
|
+
RB_LARGE_CATEGORY_IMAGE_TOUT = "rbLargeCategoryImageTout",
|
6
|
+
RB_SMALL_DISCOVER_TOUT = "rbSmallDiscoverTout",
|
7
|
+
RB_SMALL_CATEGORY_IMAGE_TOUT = "rbSmallCategoryImageTout",
|
8
|
+
RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK = "rbCollectionBannerWithoutTextBlock",
|
9
|
+
RB_PRODUCT_UPCS = "rbProductUpcs",
|
10
|
+
RB_NAVIGATION_BANNER = "rbNavigationBanner",
|
11
|
+
BILLBOARD = "billboard",
|
12
|
+
LARGE_RECTANGLE = "largeRectangle",
|
13
|
+
VERTICAL_RECTANGLE = "verticalRectangle",
|
14
|
+
SQUARE = "square",
|
15
|
+
LARGE_LEADERBOARD = "largeLeaderboard",
|
16
|
+
WIDE_SKYSCRAPER = "wideSkyscraper",
|
17
|
+
IN_TEXT = "inText",
|
18
|
+
SMALL_RECTANGLE = "smallRectangle",
|
19
|
+
MEDIUM_RECTANGLE = "mediumRectangle",
|
20
|
+
BANNER = "banner",
|
21
|
+
LEADERBOARD = "leaderboard",
|
22
|
+
SKYSCRAPER = "skyscraper",
|
23
|
+
HALF_PAGE = "halfPage",
|
24
|
+
SMALL_SQUARE = "smallSquare",
|
25
|
+
VERTICAL_BANNER = "verticalBanner",
|
26
|
+
BUTTON_2 = "button2",
|
27
|
+
MICRO_BAR = "microBar",
|
28
|
+
POP_UP = "popUp",
|
29
|
+
PORTRAIT = "portrait",
|
30
|
+
SMARTPHONE_BANNER_1 = "smartphoneBanner1",
|
31
|
+
SMARTPHONE_BANNER_2 = "smartphoneBanner2",
|
32
|
+
MOBILE_PHONE_INTERSTITIAL_1 = "mobilePhoneInterstitial1",
|
33
|
+
MOBILE_PHONE_INTERSTITIAL_2 = "mobilePhoneInterstitial2",
|
34
|
+
MOBILE_PHONE_INTERSTITIAL_3 = "mobilePhoneInterstitial3",
|
35
|
+
FEATURE_PHONE_SMALL_BANNER = "featurePhoneSmallBanner",
|
36
|
+
FEATURE_PHONE_MEDIUM_BANNER = "featurePhoneMediumBanner",
|
37
|
+
FEATURE_PHONE_LARGE_BANNER = "featurePhoneLargeBanner"
|
38
|
+
}
|
39
|
+
export declare enum RMN_FILTER_PROPERTIES {
|
40
|
+
KEYWORDS = "keywords",
|
41
|
+
PAGE_LOCATION = "pageLocation",
|
42
|
+
PARENTCO = "parentCo",
|
43
|
+
BRAND = "brand",
|
44
|
+
CATEGORY = "category",
|
45
|
+
TYPE = "type",
|
46
|
+
CLASSIFICATION = "classification",
|
47
|
+
HOLIDAY = "holiday",
|
48
|
+
PUBLISHERS = "publishers",
|
49
|
+
SECTION = "section"
|
50
|
+
}
|
51
|
+
export declare enum RMN_SPOT_EVENT {
|
52
|
+
LIFECYCLE_STATE = "LIFECYCLE_STATE",
|
53
|
+
IMPRESSION = "IMPRESSION",
|
54
|
+
CLICK = "CLICK",
|
55
|
+
PURCHASE = "PURCHASE",
|
56
|
+
ADD_TO_CART = "ADD_TO_CART",
|
57
|
+
ADD_TO_WISHLIST = "ADD_TO_WISHLIST",
|
58
|
+
BUY_NOW = "BUY_NOW"
|
59
|
+
}
|
2
60
|
export declare enum RMN_ENV {
|
3
61
|
LOCAL = "local",
|
4
62
|
DEVELOPMENT = "development",
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import { RmnClient, RmnCreateSpotElement } from './index';
|
2
|
-
export { RmnClient, RmnCreateSpotElement };
|
1
|
+
import { RmnClient, RmnCreateSpotElement, RmnEventManager } from './index';
|
2
|
+
export { RmnClient, RmnCreateSpotElement, RmnEventManager };
|
@@ -0,0 +1,35 @@
|
|
1
|
+
import type { ICreateElementConfig } from 'modules/element';
|
2
|
+
export type CarouselNavPositionType = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'middle-left' | 'middle-right' | 'middle-sides';
|
3
|
+
export interface ICarouselDotOptions {
|
4
|
+
position: CarouselNavPositionType;
|
5
|
+
color: string;
|
6
|
+
activeColor: string;
|
7
|
+
size: 'small' | 'base' | 'large';
|
8
|
+
opacity: number;
|
9
|
+
}
|
10
|
+
export interface ICarouselButtonOptions {
|
11
|
+
position: CarouselNavPositionType;
|
12
|
+
together: boolean;
|
13
|
+
textColor: string;
|
14
|
+
backgroundColor: string;
|
15
|
+
borderRadius: string;
|
16
|
+
size: 'small' | 'base' | 'large';
|
17
|
+
opacity: number;
|
18
|
+
prev: string;
|
19
|
+
next: string;
|
20
|
+
}
|
21
|
+
export interface ICarouselOptions {
|
22
|
+
autoplay?: boolean;
|
23
|
+
interval?: number;
|
24
|
+
useDots?: ICarouselDotOptions | boolean;
|
25
|
+
useButtons?: ICarouselButtonOptions | boolean;
|
26
|
+
}
|
27
|
+
export type ICustomCarouselElementData = ICreateElementConfig & ICarouselOptions;
|
28
|
+
export interface ICustomCarouselElement extends HTMLElement {
|
29
|
+
data: ICustomCarouselElementData;
|
30
|
+
slides: HTMLElement[];
|
31
|
+
}
|
32
|
+
export interface ICreateCarouselElementParams {
|
33
|
+
slides: HTMLElement[];
|
34
|
+
config: ICreateElementConfig;
|
35
|
+
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import type { ICreateElementConfig } from 'modules/element';
|
2
|
+
export type ICustomSpotElementData = ICreateElementConfig;
|
3
|
+
export interface ICustomSpotElement extends HTMLElement {
|
4
|
+
data: ICustomSpotElementData;
|
5
|
+
content: HTMLElement;
|
6
|
+
}
|
7
|
+
export interface ICreateSpotElementParams {
|
8
|
+
content: HTMLElement;
|
9
|
+
config: ICreateElementConfig;
|
10
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare function calculateScaleFactor(elementScale: number): number;
|
package/dist/types/modules/{spot/html/constants/html.constant.d.ts → element/element.constant.d.ts}
RENAMED
@@ -1,8 +1,5 @@
|
|
1
|
+
export declare const SPOT_ELEMENT_TAG = "spot-element";
|
2
|
+
export declare const CAROUSEL_ELEMENT_TAG = "spot-carousel-element";
|
1
3
|
export declare const GFONT_PRECONNECT = "\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n";
|
2
4
|
export declare const GFONT_SOURCE_SANS_3 = "\n <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap\">\n";
|
3
5
|
export declare const GFONT_CORMORANT = "\n <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\">\n";
|
4
|
-
export declare const SPOT_ELEMENT_TEMPLATE: (width: number, height: number, hasCustomContent: boolean) => {
|
5
|
-
style: HTMLStyleElement;
|
6
|
-
wrapper: HTMLDivElement;
|
7
|
-
slot: HTMLSlotElement;
|
8
|
-
};
|
@@ -0,0 +1,52 @@
|
|
1
|
+
import type { RMN_SPOT_TYPE } from 'enums';
|
2
|
+
import type { ICarouselOptions, ICreateCarouselElementParams } from 'modules/element/component/carousel';
|
3
|
+
import type { ICreateSpotElementParams } from 'modules/element/component/spot';
|
4
|
+
import type { RmnFilterType } from 'modules/selection';
|
5
|
+
export interface ISpotColors {
|
6
|
+
textColor?: string;
|
7
|
+
backgroundColor?: string;
|
8
|
+
ctaTextColor?: string;
|
9
|
+
ctaBorderColor?: string;
|
10
|
+
}
|
11
|
+
export interface ISpotOverlay {
|
12
|
+
size: 'small' | 'base' | 'large';
|
13
|
+
color: string;
|
14
|
+
opacity: 'light' | 'medium' | 'dark';
|
15
|
+
}
|
16
|
+
export interface IInjectSpotElementConfig {
|
17
|
+
fluid?: boolean;
|
18
|
+
url?: string;
|
19
|
+
colors?: ISpotColors;
|
20
|
+
minScale?: number;
|
21
|
+
overlay?: ISpotOverlay;
|
22
|
+
carousel?: ICarouselOptions;
|
23
|
+
}
|
24
|
+
export interface IInjectSpotElement {
|
25
|
+
placementId: string;
|
26
|
+
spotType: RMN_SPOT_TYPE | string;
|
27
|
+
count?: number;
|
28
|
+
config?: Omit<IInjectSpotElementConfig, 'url'>;
|
29
|
+
filter?: Partial<RmnFilterType>;
|
30
|
+
}
|
31
|
+
export interface ICreateElementConfig {
|
32
|
+
spot?: RMN_SPOT_TYPE;
|
33
|
+
width: number;
|
34
|
+
height: number;
|
35
|
+
fluid?: boolean;
|
36
|
+
minScale: number;
|
37
|
+
}
|
38
|
+
export interface IInjectSpotElementParams {
|
39
|
+
inject: IInjectSpotElement[];
|
40
|
+
config?: IInjectSpotElementConfig;
|
41
|
+
filter?: Partial<RmnFilterType>;
|
42
|
+
}
|
43
|
+
export interface IElementService {
|
44
|
+
createSpotElement(params: ICreateSpotElementParams): HTMLElement | null;
|
45
|
+
createCarouselElement(params: ICreateCarouselElementParams): HTMLElement | null;
|
46
|
+
}
|
47
|
+
export interface IRmnCreateSpotElementConfig {
|
48
|
+
fluid?: boolean;
|
49
|
+
colors?: ISpotColors;
|
50
|
+
overlay?: ISpotOverlay;
|
51
|
+
minScale?: number;
|
52
|
+
}
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import type { ISpot } from 'modules/selection';
|
2
|
+
import type { ICreateCarouselElementParams } from './component/carousel';
|
3
|
+
import type { ICreateSpotElementParams } from './component/spot';
|
4
|
+
import type { IElementService, ISpotColors } from './element.interface';
|
5
|
+
export declare class ElementService implements IElementService {
|
6
|
+
static getInstance(): ElementService;
|
7
|
+
/**
|
8
|
+
* Creates the html element based on the provided data, content and configs using shadow dom.
|
9
|
+
*
|
10
|
+
* This method is only available in browser environments.
|
11
|
+
*
|
12
|
+
* @param {ICreateSpotElementParams} params - The parameters to create the final element.
|
13
|
+
*
|
14
|
+
* @return {HTMLElement | null} - The html element or null if the browser environment is not available.
|
15
|
+
*/
|
16
|
+
createSpotElement({ content, config }: ICreateSpotElementParams): HTMLElement | null;
|
17
|
+
/**
|
18
|
+
* Creates the carousel html element based on the provided slides and configs using shadow dom.
|
19
|
+
*
|
20
|
+
* This method is only available in browser environments.
|
21
|
+
*
|
22
|
+
* @param {ICreateCarouselElementParams} params - The parameters to create the final element.
|
23
|
+
*
|
24
|
+
* @return {HTMLElement | null} - The html element or null if the browser environment is not available.
|
25
|
+
*/
|
26
|
+
createCarouselElement({ slides, config, }: ICreateCarouselElementParams): HTMLElement | null;
|
27
|
+
/**
|
28
|
+
* Overrides the spot colors with the provided colors.
|
29
|
+
*
|
30
|
+
* @param {ISpot} spot - The spot data.
|
31
|
+
* @param {ISpotColors} colors - The colors to override.
|
32
|
+
*
|
33
|
+
* @return {ISpot} - The spot data with the colors overridden.
|
34
|
+
*/
|
35
|
+
overrideSpotColors(spot: ISpot, colors?: ISpotColors): ISpot;
|
36
|
+
/**
|
37
|
+
* @returns {boolean} - True if the browser environment is available and the element is defined.
|
38
|
+
*/
|
39
|
+
private ensureBrowserEnvironmentAndDefineElement;
|
40
|
+
}
|
@@ -0,0 +1,4 @@
|
|
1
|
+
import type { ISpotOverlay } from '../element.interface';
|
2
|
+
export declare function convertHexToRgba(hex: string, opacity?: number): string;
|
3
|
+
export declare function generateGradientColor(overlay?: ISpotOverlay, fallback?: string): string;
|
4
|
+
export declare function spotHtmlStringToElement(htmlString: string): HTMLElement;
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './template.service';
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import type { ISpot } from 'types';
|
2
|
+
import type { ISpotTemplateConfig } from './template.type';
|
3
|
+
/**
|
4
|
+
* Returns the HTML element for the given spot.
|
5
|
+
*
|
6
|
+
* @param {ISpot} spot - The spot object.
|
7
|
+
* @param {ISpotTemplateConfig} config - The spot template configuration.
|
8
|
+
*
|
9
|
+
* @return {HTMLElement | null} - The HTML element for the given spot or null if the spot template is not found.
|
10
|
+
*/
|
11
|
+
export declare const SPOT_TEMPLATE_HTML_ELEMENT: (spot: ISpot, config?: ISpotTemplateConfig) => HTMLElement | null;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import type { RMN_SPOT_TYPE } from 'enums';
|
2
|
+
import type { SpotVariantType } from 'modules/selection';
|
3
|
+
import type { ISpot } from 'types';
|
4
|
+
import type { ISpotOverlay } from '../element.interface';
|
5
|
+
export interface ISpotTemplateConfig {
|
6
|
+
overlay?: ISpotOverlay;
|
7
|
+
prefix?: string;
|
8
|
+
}
|
9
|
+
export type TemplateFunction = (spot: ISpot, config: ISpotTemplateConfig) => string;
|
10
|
+
export type SpotTypeTemplate = Partial<Record<SpotVariantType, TemplateFunction>>;
|
11
|
+
export type SpotTemplates = Record<RMN_SPOT_TYPE, SpotTypeTemplate>;
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const EVENT_API_PATH = "/spots/event";
|
@@ -0,0 +1,72 @@
|
|
1
|
+
import type { RMN_SPOT_EVENT } from 'enums';
|
2
|
+
import type { ISpot } from '../selection';
|
3
|
+
export interface IFireEventParams {
|
4
|
+
event: RMN_SPOT_EVENT;
|
5
|
+
eventUrl: string;
|
6
|
+
}
|
7
|
+
export interface ILSIdentifier {
|
8
|
+
placementId: string;
|
9
|
+
spotId: string;
|
10
|
+
spotType: string;
|
11
|
+
}
|
12
|
+
export interface ILSDom {
|
13
|
+
visibleOnViewport: boolean;
|
14
|
+
spotElement?: HTMLElement;
|
15
|
+
}
|
16
|
+
export interface ILSState {
|
17
|
+
mounted: boolean;
|
18
|
+
unmounted: boolean;
|
19
|
+
loading: boolean;
|
20
|
+
error?: string;
|
21
|
+
}
|
22
|
+
export interface ILSDisplayConfig {
|
23
|
+
isCarousel: boolean;
|
24
|
+
isCarouselItem: boolean;
|
25
|
+
isSingleItem: boolean;
|
26
|
+
}
|
27
|
+
export interface ILifecycleState {
|
28
|
+
identifier: Partial<ILSIdentifier>;
|
29
|
+
dom?: Partial<ILSDom>;
|
30
|
+
state?: Partial<ILSState>;
|
31
|
+
displayConfig?: Partial<ILSDisplayConfig>;
|
32
|
+
}
|
33
|
+
export interface IClickEvent {
|
34
|
+
placementId: string;
|
35
|
+
spotId: string;
|
36
|
+
spotElement: HTMLElement;
|
37
|
+
}
|
38
|
+
export interface IImpressionEvent {
|
39
|
+
placementId: string;
|
40
|
+
spotId: string;
|
41
|
+
spotElement: HTMLElement;
|
42
|
+
}
|
43
|
+
export interface IAddToCartEvent {
|
44
|
+
placementId: string;
|
45
|
+
spotId: string;
|
46
|
+
}
|
47
|
+
export interface IAddToWishlistEvent {
|
48
|
+
placementId: string;
|
49
|
+
spotId: string;
|
50
|
+
}
|
51
|
+
export interface IPurchaseEvent {
|
52
|
+
placementId: string;
|
53
|
+
spotId: string;
|
54
|
+
}
|
55
|
+
export interface IBuyNowEvent {
|
56
|
+
placementId: string;
|
57
|
+
spotId: string;
|
58
|
+
}
|
59
|
+
export interface IEventMap {
|
60
|
+
[RMN_SPOT_EVENT.LIFECYCLE_STATE]: ILifecycleState;
|
61
|
+
[RMN_SPOT_EVENT.CLICK]: IClickEvent;
|
62
|
+
[RMN_SPOT_EVENT.IMPRESSION]: IImpressionEvent;
|
63
|
+
[RMN_SPOT_EVENT.ADD_TO_CART]: IAddToCartEvent;
|
64
|
+
[RMN_SPOT_EVENT.ADD_TO_WISHLIST]: IAddToWishlistEvent;
|
65
|
+
[RMN_SPOT_EVENT.PURCHASE]: IPurchaseEvent;
|
66
|
+
[RMN_SPOT_EVENT.BUY_NOW]: IBuyNowEvent;
|
67
|
+
}
|
68
|
+
export interface IRegisterSpotParams {
|
69
|
+
placementId: string;
|
70
|
+
spotElement: HTMLElement;
|
71
|
+
spot: ISpot;
|
72
|
+
}
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import { RMN_SPOT_EVENT } from 'enums';
|
2
|
+
import type { IEventMap, ILifecycleState, IRegisterSpotParams } from './event.interface';
|
3
|
+
export declare class EventService {
|
4
|
+
private static instance;
|
5
|
+
private pubSub;
|
6
|
+
private localStorage;
|
7
|
+
private intersectionObserver;
|
8
|
+
private spotStates;
|
9
|
+
private activeSpots;
|
10
|
+
private constructor();
|
11
|
+
static getInstance(): EventService;
|
12
|
+
subscribe(eventType: RMN_SPOT_EVENT, callback: (data: IEventMap[RMN_SPOT_EVENT]) => void): () => void;
|
13
|
+
publish(eventType: RMN_SPOT_EVENT, data: IEventMap[RMN_SPOT_EVENT]): void;
|
14
|
+
registerSpot(params: IRegisterSpotParams): void;
|
15
|
+
unregisterSpot(placementId: string): void;
|
16
|
+
/**
|
17
|
+
* Updates the state of a spot.
|
18
|
+
*
|
19
|
+
* @param {string} placementId - The placement ID of the spot.
|
20
|
+
* @param {Partial<ILifecycleState>} updates - The updates to apply to the spot state.
|
21
|
+
* @param {boolean} publish - Whether to publish the updated state.
|
22
|
+
*
|
23
|
+
* @returns {void}
|
24
|
+
*/
|
25
|
+
handleSpotState(placementId: string, updates: Partial<ILifecycleState>, publish?: boolean): void;
|
26
|
+
private handleClick;
|
27
|
+
private handleIntersectionObserver;
|
28
|
+
private fireImpressionEvent;
|
29
|
+
/**
|
30
|
+
* Fires an event using the navigator.sendBeacon method or a fallback method if sendBeacon is not available.
|
31
|
+
* If the event is a click event and a redirect URL is found, it redirects the user to that URL.
|
32
|
+
*
|
33
|
+
* @param {IFireEventParams} params - The parameters for firing the event.
|
34
|
+
* @param {RMN_SPOT_EVENT} params.event - The event type.
|
35
|
+
* @param {string} params.eventUrl - The URL to which the event is sent.
|
36
|
+
* @returns {Promise<void>} - A promise that resolves when the event is fired.
|
37
|
+
*/
|
38
|
+
private fireEvent;
|
39
|
+
private fallbackEventFire;
|
40
|
+
/**
|
41
|
+
* Extracts and decodes a URL from a base64-encoded query parameter.
|
42
|
+
*
|
43
|
+
* @param {string} url - The URL containing the base64-encoded query parameter.
|
44
|
+
* @returns {string | null} - The decoded URL or null if not found or invalid.
|
45
|
+
*/
|
46
|
+
private getRedirectUrlFromPayload;
|
47
|
+
}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
export declare class IntersectionObserverService {
|
2
|
+
private observers;
|
3
|
+
private defaultOptions;
|
4
|
+
constructor(defaultOptions?: IntersectionObserverInit);
|
5
|
+
observe(element: HTMLElement, callback: (entry: IntersectionObserverEntry) => void, options?: IntersectionObserverInit): void;
|
6
|
+
unobserve(element: HTMLElement): void;
|
7
|
+
unobserveAll(): void;
|
8
|
+
}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import type { RMN_SPOT_TYPE } from 'enums';
|
2
|
+
import type { ISpotEvent } from 'modules/selection';
|
3
|
+
export interface ILocalStorageSpot {
|
4
|
+
spotId: string;
|
5
|
+
spotType: RMN_SPOT_TYPE;
|
6
|
+
events: ISpotEvent[];
|
7
|
+
productIds: Array<string | number>;
|
8
|
+
createdAt?: number;
|
9
|
+
}
|
10
|
+
export declare class LocalStorage {
|
11
|
+
private spots;
|
12
|
+
private static instance;
|
13
|
+
private static readonly localStorageKey;
|
14
|
+
private static readonly spotExpirationTime;
|
15
|
+
private constructor();
|
16
|
+
static getInstance(): LocalStorage;
|
17
|
+
private syncLocalStorage;
|
18
|
+
setSpot(spotId: string, data: ILocalStorageSpot): void;
|
19
|
+
getSpot(spotId: string): ILocalStorageSpot | undefined;
|
20
|
+
removeSpot(spotId: string): void;
|
21
|
+
private updateLocalStorage;
|
22
|
+
clearLocalStorage(): void;
|
23
|
+
private removeExpiredSpots;
|
24
|
+
private mapToObj;
|
25
|
+
private objToMap;
|
26
|
+
}
|
@@ -0,0 +1,30 @@
|
|
1
|
+
export interface IResizeSize {
|
2
|
+
width: number;
|
3
|
+
height: number;
|
4
|
+
}
|
5
|
+
export interface IResizeOptions {
|
6
|
+
element: HTMLElement;
|
7
|
+
maxSize: IResizeSize;
|
8
|
+
minScale: number;
|
9
|
+
}
|
10
|
+
export interface ISizeChangedEvent extends CustomEvent {
|
11
|
+
detail: {
|
12
|
+
width: number;
|
13
|
+
height: number;
|
14
|
+
newWidth: number;
|
15
|
+
newHeight: number;
|
16
|
+
scale: number;
|
17
|
+
};
|
18
|
+
}
|
19
|
+
export declare class ResizeObserverService {
|
20
|
+
private element;
|
21
|
+
private container;
|
22
|
+
private resizeObserver;
|
23
|
+
private maxSize;
|
24
|
+
private minSize;
|
25
|
+
private aspectRatio;
|
26
|
+
constructor({ element, maxSize, minScale }: IResizeOptions);
|
27
|
+
private setDimensions;
|
28
|
+
private updateElementSize;
|
29
|
+
disconnect(): void;
|
30
|
+
}
|
@@ -0,0 +1,69 @@
|
|
1
|
+
/**
|
2
|
+
* Callback function type for event subscribers
|
3
|
+
* @template T The type of data the callback receives
|
4
|
+
*/
|
5
|
+
export type PubSubCallback<T> = (data: T) => void;
|
6
|
+
/**
|
7
|
+
* Function type for unsubscribing from an event
|
8
|
+
*/
|
9
|
+
export type PubSubUnsubscribe = () => void;
|
10
|
+
/**
|
11
|
+
* PubSub class
|
12
|
+
* Manages event subscriptions and publications
|
13
|
+
* @template IEventMap A record type defining the structure of events and their data
|
14
|
+
*/
|
15
|
+
export declare class PubSub<IEventMap> {
|
16
|
+
private static instance;
|
17
|
+
static getInstance<IEventMap>(): PubSub<IEventMap>;
|
18
|
+
/**
|
19
|
+
* Object to store subscribers for each event type
|
20
|
+
*/
|
21
|
+
private subscribers;
|
22
|
+
/**
|
23
|
+
* Subscribe to an event
|
24
|
+
* @param eventType - The type of event to subscribe to
|
25
|
+
* @param callback - The function to be called when the event is published
|
26
|
+
* @returns A function to unsubscribe from the event
|
27
|
+
*
|
28
|
+
* @Example:
|
29
|
+
* const unsubscribe = pubSub.subscribe('userLogin', (data) => {
|
30
|
+
* console.log(`User ${data.username} logged in`);
|
31
|
+
* });
|
32
|
+
*/
|
33
|
+
subscribe<K extends keyof IEventMap>(eventType: K, callback: PubSubCallback<IEventMap[K]>): PubSubUnsubscribe;
|
34
|
+
/**
|
35
|
+
* Publish an event
|
36
|
+
* @param eventType - The type of event to publish
|
37
|
+
* @param data - The data to be passed to the event subscribers
|
38
|
+
*
|
39
|
+
* @Example:
|
40
|
+
* pubSub.publish('userLogin', { username: 'john_doe', timestamp: Date.now() });
|
41
|
+
*/
|
42
|
+
publish<K extends keyof IEventMap>(eventType: K, data: IEventMap[K]): void;
|
43
|
+
}
|
44
|
+
/**
|
45
|
+
* Usage Example:
|
46
|
+
*
|
47
|
+
* interface IEventMap {
|
48
|
+
* userLogin: { username: string; timestamp: number };
|
49
|
+
* pageView: { url: string; timestamp: number };
|
50
|
+
* }
|
51
|
+
*
|
52
|
+
* const pubSub = new PubSub<IEventMap>();
|
53
|
+
*
|
54
|
+
* // Subscribe to events
|
55
|
+
* const unsubscribeLogin = pubSub.subscribe('userLogin', (data) => {
|
56
|
+
* console.log(`User ${data.username} logged in at ${new Date(data.timestamp)}`);
|
57
|
+
* });
|
58
|
+
*
|
59
|
+
* pubSub.subscribe('pageView', (data) => {
|
60
|
+
* console.log(`Page ${data.url} viewed at ${new Date(data.timestamp)}`);
|
61
|
+
* });
|
62
|
+
*
|
63
|
+
* // Publish events
|
64
|
+
* pubSub.publish('userLogin', { username: 'john_doe', timestamp: Date.now() });
|
65
|
+
* pubSub.publish('pageView', { url: '/home', timestamp: Date.now() });
|
66
|
+
*
|
67
|
+
* // Unsubscribe from an event
|
68
|
+
* unsubscribeLogin();
|
69
|
+
*/
|