@liquidcommercedev/rmn-sdk 1.4.6 → 1.5.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
+
*/
|