@liquidcommerce/elements-sdk 2.5.11 → 2.6.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/README.md +1 -0
- package/dist/index.esm.js +9759 -9550
- package/dist/types/core/{api-client.service.d.ts → api/api-client.service.d.ts} +2 -2
- package/dist/types/core/{auth.service.d.ts → api/auth-client.service.d.ts} +2 -2
- package/dist/types/core/api/http-client.service.d.ts +45 -0
- package/dist/types/core/client/client-config.service.d.ts +2 -0
- package/dist/types/core/command/base-command.service.d.ts +1 -1
- package/dist/types/core/debug-panel/debug-panel.styles.d.ts +1 -1
- package/dist/types/core/store/interfaces/checkout.interface.d.ts +2 -0
- package/dist/types/elements-base-client.d.ts +3 -3
- package/dist/types/interfaces/configs/global.interface.d.ts +1 -0
- package/dist/types/interfaces/core.interface.d.ts +1 -0
- package/docs/THEMING.md +3 -0
- package/package.json +2 -2
- package/umd/elements.js +1 -1
- package/dist/types/core/utils.d.ts +0 -23
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { AuthClientService } from '@/core/api/auth-client.service';
|
|
2
2
|
import type { IPersistedStore } from '@/core/store/interfaces/core.interface';
|
|
3
3
|
import type { IAddressAutocompleteResult, IAddressDetailsResult, ICart, ICartUpdateParams, ICatalog, ICatalogParams, ICheckoutCompleteParams, ICheckoutCompleteResponse, ICheckoutPrepareParams, ICheckoutPrepareResponse, ILiquidPaymentToken, ILoc, IProductData } from '@/interfaces/cloud';
|
|
4
4
|
import type { IUserPaymentSession, IUserSession } from '@/interfaces/cloud/user.interface';
|
|
@@ -8,7 +8,7 @@ export declare class ApiClientService {
|
|
|
8
8
|
private readonly logger;
|
|
9
9
|
constructor();
|
|
10
10
|
static getInstance(): ApiClientService;
|
|
11
|
-
setClient(client:
|
|
11
|
+
setClient(client: AuthClientService): Promise<void>;
|
|
12
12
|
getAllConfigs(): Promise<IAllConfigs>;
|
|
13
13
|
setPersistedStore(userDeviceId: string, data: IPersistedStore): Promise<void>;
|
|
14
14
|
getPersistedStore(userDeviceId: string): Promise<IPersistedStore | null>;
|
|
@@ -29,7 +29,7 @@ export interface IApiResponseBase {
|
|
|
29
29
|
export type IApiResponseWithData<T> = IApiResponseBase & {
|
|
30
30
|
data: T;
|
|
31
31
|
};
|
|
32
|
-
export declare class
|
|
32
|
+
export declare class AuthClientService {
|
|
33
33
|
private readonly apiKey;
|
|
34
34
|
private readonly baseUrl;
|
|
35
35
|
private readonly env;
|
|
@@ -40,7 +40,7 @@ export declare class AuthService {
|
|
|
40
40
|
private readonly logger;
|
|
41
41
|
private readonly clientConfig;
|
|
42
42
|
private constructor();
|
|
43
|
-
static getInstance(config: IAuthConfig):
|
|
43
|
+
static getInstance(config: IAuthConfig): AuthClientService;
|
|
44
44
|
authenticate(): Promise<boolean>;
|
|
45
45
|
isTokenExpired(): boolean;
|
|
46
46
|
private request;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
export type FetchFunction = typeof fetch;
|
|
2
|
+
export interface IHttpClientOptions {
|
|
3
|
+
method: string;
|
|
4
|
+
headers: Record<string, string>;
|
|
5
|
+
body?: string;
|
|
6
|
+
}
|
|
7
|
+
export interface ICustomResponse {
|
|
8
|
+
ok: boolean;
|
|
9
|
+
status: number;
|
|
10
|
+
statusText: string;
|
|
11
|
+
headers: Record<string, string>;
|
|
12
|
+
json: () => Promise<any>;
|
|
13
|
+
text: () => Promise<string>;
|
|
14
|
+
_bodyText?: string;
|
|
15
|
+
}
|
|
16
|
+
export interface IRequestOptions {
|
|
17
|
+
method: 'GET' | 'POST' | 'PUT' | 'DELETE';
|
|
18
|
+
headers?: Record<string, string>;
|
|
19
|
+
body?: any;
|
|
20
|
+
}
|
|
21
|
+
export interface IHttpRequestConfig {
|
|
22
|
+
url: string;
|
|
23
|
+
options: IHttpClientOptions;
|
|
24
|
+
retryConfig?: {
|
|
25
|
+
maxRetries: number;
|
|
26
|
+
retryDelay: number;
|
|
27
|
+
shouldRetry?: (error: any, response?: ICustomResponse) => boolean;
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
export declare class HttpClientService {
|
|
31
|
+
private readonly fetchImpl;
|
|
32
|
+
private readonly logger;
|
|
33
|
+
constructor();
|
|
34
|
+
request(config: IHttpRequestConfig): Promise<ICustomResponse>;
|
|
35
|
+
private defaultShouldRetry;
|
|
36
|
+
private logFailedResponse;
|
|
37
|
+
private logNetworkError;
|
|
38
|
+
private diagnosePossibleCauses;
|
|
39
|
+
private enhanceError;
|
|
40
|
+
private sanitizeHeaders;
|
|
41
|
+
private delay;
|
|
42
|
+
private getFetchImplementation;
|
|
43
|
+
private fetchAdapter;
|
|
44
|
+
private xhrFetch;
|
|
45
|
+
}
|
|
@@ -20,6 +20,7 @@ export interface IClientConfigs {
|
|
|
20
20
|
clientPrepared: boolean;
|
|
21
21
|
promoTicker: IPromoTicker[] | null;
|
|
22
22
|
paymentMethodId?: string;
|
|
23
|
+
openShadowDom?: boolean;
|
|
23
24
|
}
|
|
24
25
|
export interface IClientConfigInput {
|
|
25
26
|
env?: ElementsEnv;
|
|
@@ -31,6 +32,7 @@ export interface IClientConfigInput {
|
|
|
31
32
|
development?: {
|
|
32
33
|
customApiUrl?: string;
|
|
33
34
|
paymentMethodId?: string;
|
|
35
|
+
openShadowDom?: boolean;
|
|
34
36
|
};
|
|
35
37
|
}
|
|
36
38
|
export declare class ClientConfigService {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ApiClientService } from '@/core/api-client.service';
|
|
1
|
+
import { ApiClientService } from '@/core/api/api-client.service';
|
|
2
2
|
import { ClientConfigService } from '@/core/client/client-config.service';
|
|
3
3
|
import { GoogleTagManagerService } from '@/core/google-tag-manager.service';
|
|
4
4
|
import { LoggerFactory } from '@/core/logger/logger-factory';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const DEBUG_PANEL_STYLES = "\n :host {\n position: fixed;\n z-index: 2147483647;\n display: block;\n }\n\n .panel {\n position: relative;\n background: rgba(15, 23, 42, 0.95);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(148, 163, 184, 0.2);\n border-radius: 12px;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;\n font-size: 12px;\n color: #e2e8f0;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n user-select: none;\n transition: all 0.2s ease;\n width: 100%;\n height: 100%;\n }\n\n .panel:hover {\n border-color: rgba(148, 163, 184, 0.4);\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);\n }\n\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n border-bottom: 1px solid rgba(148, 163, 184, 0.2);\n background: rgba(30, 41, 59, 0.5);\n cursor: move;\n }\n\n .icon {\n font-size: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n }\n\n .title-container {\n display: flex;\n flex-direction: column;\n
|
|
1
|
+
export declare const DEBUG_PANEL_STYLES = "\n :host {\n position: fixed;\n z-index: 2147483647;\n display: block;\n }\n\n .panel {\n position: relative;\n background: rgba(15, 23, 42, 0.95);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(148, 163, 184, 0.2);\n border-radius: 12px;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;\n font-size: 12px;\n color: #e2e8f0;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n user-select: none;\n transition: all 0.2s ease;\n width: 100%;\n height: 100%;\n }\n\n .panel:hover {\n border-color: rgba(148, 163, 184, 0.4);\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);\n }\n\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n border-bottom: 1px solid rgba(148, 163, 184, 0.2);\n background: rgba(30, 41, 59, 0.5);\n cursor: move;\n }\n\n .icon {\n font-size: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n }\n\n .title-container {\n display: flex;\n flex-direction: column;\n flex: 1;\n margin: 0 12px;\n }\n \n .title-container > *:not(:first-child) {\n margin-top: 2px;\n }\n\n .title {\n font-weight: 600;\n color: #f1f5f9;\n font-size: 13px;\n }\n\n\n .subtitle {\n font-size: 10px;\n color: #94a3b8;\n }\n\n .minimize {\n background: none;\n border: none;\n color: #94a3b8;\n font-size: 18px;\n cursor: pointer;\n padding: 4px;\n border-radius: 4px;\n transition: all 0.2s ease;\n line-height: 1;\n font-weight: bold;\n }\n\n .minimize:hover {\n background: rgba(148, 163, 184, 0.1);\n color: #cbd5e1;\n }\n\n .toggles {\n display: flex;\n padding: 8px 16px;\n border-bottom: 1px solid rgba(148, 163, 184, 0.2);\n background: rgba(30, 41, 59, 0.3);\n align-items: center;\n }\n\n .toggles > *:not(:last-child) {\n margin-right: 12px;\n }\n\n .toggle {\n display: flex;\n align-items: center;\n cursor: pointer;\n font-size: 11px;\n color: #cbd5e1;\n transition: color 0.2s ease;\n }\n \n .toggle > *:not(:last-child) {\n margin-right: 6px;\n }\n\n .toggle:hover {\n color: #f1f5f9;\n }\n\n .toggle input[type=\"checkbox\"] {\n width: 12px;\n height: 12px;\n accent-color: #3b82f6;\n cursor: pointer;\n }\n\n .clear-btn {\n background: none;\n border: none;\n color: #ef4444;\n font-size: 14px;\n padding: 0;\n cursor: pointer;\n transition: all 0.2s ease;\n margin-left: auto;\n min-width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .clear-btn:hover {\n transform: scale(1.1);\n color: #dc2626;\n }\n\n .logs {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 8px;\n background: rgba(15, 23, 42, 0.8);\n min-height: 0;\n max-height: 100%;\n }\n\n .log-entry {\n display: flex;\n align-items: flex-start;\n padding: 8px 12px;\n margin-bottom: 2px;\n border-radius: 6px;\n font-size: 11px;\n line-height: 1.4;\n transition: background-color 0.2s ease;\n user-select: text;\n }\n \n .log-entry > *:not(:last-child) {\n margin-right: 8px;\n }\n\n .log-entry:hover {\n background-color: rgba(148, 163, 184, 0.1);\n }\n\n /* Event type background colors */\n .log-entry.event {\n background: rgba(59, 130, 246, 0.1);\n }\n\n .log-entry.action {\n background: rgba(16, 185, 129, 0.1);\n }\n\n .log-entry.gtm {\n background: rgba(245, 158, 11, 0.1);\n }\n\n .log-entry.logger {\n background: rgba(139, 92, 246, 0.1);\n }\n\n\n .log-meta {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 50px;\n }\n \n .log-meta > *:not(:first-child) {\n margin-top: 2px;\n }\n\n .log-type {\n font-weight: 600;\n font-size: 9px;\n padding: 2px 0;\n border-radius: 3px;\n white-space: nowrap;\n text-align: center;\n line-height: 1;\n font-weight: bold;\n letter-spacing: 0.5px;\n }\n\n .log-timestamp {\n color: #64748b;\n font-size: 9px;\n white-space: nowrap;\n line-height: 1;\n }\n\n .log-type.event {\n background: rgba(59, 130, 246, 0.2);\n color: #60a5fa;\n }\n\n .log-type.action {\n color: #34d399;\n }\n\n .log-type.gtm {\n color: #fbbf24;\n }\n\n .log-type.logger {\n color: #a78bfa;\n }\n\n .log-message {\n flex: 1;\n word-break: break-word;\n user-select: text;\n }\n\n .log-context {\n color: #94a3b8;\n font-size: 10px;\n margin-top: 2px;\n font-style: italic;\n }\n\n .log-data {\n background: rgba(30, 41, 59, 0.6);\n border: 1px solid rgba(148, 163, 184, 0.2);\n border-radius: 4px;\n padding: 8px;\n margin-top: 6px;\n font-size: 10px;\n color: #cbd5e1;\n max-height: 120px;\n overflow-y: auto;\n font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;\n user-select: text;\n }\n\n .log-data pre {\n margin: 0;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n .resize-handle {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 12px;\n height: 12px;\n background: linear-gradient(-45deg, transparent 30%, rgba(148, 163, 184, 0.3) 30%, rgba(148, 163, 184, 0.3) 70%, transparent 70%);\n cursor: nw-resize;\n border-radius: 0 0 12px 0;\n }\n\n .resize-handle:hover {\n background: linear-gradient(-45deg, transparent 30%, rgba(148, 163, 184, 0.7) 30%, rgba(148, 163, 184, 0.7) 70%, transparent 70%);\n transform: scale(1.1);\n }\n\n .resize-handle:active {\n background: linear-gradient(-45deg, transparent 30%, rgba(148, 163, 184, 0.9) 30%, rgba(148, 163, 184, 0.9) 70%, transparent 70%);\n }\n\n /* Scrollbar styling */\n .logs::-webkit-scrollbar {\n width: 6px;\n }\n\n .logs::-webkit-scrollbar-track {\n background: rgba(30, 41, 59, 0.3);\n border-radius: 3px;\n }\n\n .logs::-webkit-scrollbar-thumb {\n background: rgba(148, 163, 184, 0.3);\n border-radius: 3px;\n }\n\n .logs::-webkit-scrollbar-thumb:hover {\n background: rgba(148, 163, 184, 0.5);\n }\n\n .log-data::-webkit-scrollbar {\n width: 4px;\n }\n\n .log-data::-webkit-scrollbar-track {\n background: rgba(30, 41, 59, 0.3);\n border-radius: 2px;\n }\n\n .log-data::-webkit-scrollbar-thumb {\n background: rgba(148, 163, 184, 0.3);\n border-radius: 2px;\n }\n\n .log-data::-webkit-scrollbar-thumb:hover {\n background: rgba(148, 163, 184, 0.5);\n }\n\n /* Floating button styles */\n .floating-btn {\n position: absolute;\n top: 20px;\n left: 20px;\n width: 40px;\n height: 40px;\n background: rgba(15, 23, 42, 0.95);\n border: 1px solid rgba(148, 163, 184, 0.2);\n border-radius: 50%;\n display: none;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-size: 18px;\n user-select: none;\n z-index: 1;\n }\n\n .floating-btn:hover {\n background: rgba(30, 41, 59, 0.95);\n border-color: rgba(148, 163, 184, 0.4);\n }\n\n /* Mobile Responsiveness */\n @media (max-width: 768px) {\n .panel {\n font-size: 11px;\n border-radius: 8px;\n }\n\n .header {\n padding: 8px 12px;\n }\n\n .title {\n font-size: 12px;\n }\n\n .subtitle {\n font-size: 9px;\n }\n\n .toggles {\n padding: 6px 12px;\n flex-wrap: wrap;\n }\n \n .toggles > *:not(:last-child) {\n margin-right: 8px;\n }\n\n .toggle {\n font-size: 10px;\n }\n\n .toggle input[type=\"checkbox\"] {\n width: 10px;\n height: 10px;\n }\n\n .logs {\n padding: 6px;\n }\n\n .log-entry {\n padding: 6px 8px;\n font-size: 10px;\n }\n\n .log-type {\n font-size: 8px;\n }\n\n .log-timestamp {\n font-size: 8px;\n }\n\n .log-data {\n font-size: 9px;\n padding: 6px;\n max-height: 80px;\n }\n\n .floating-btn {\n width: 36px;\n height: 36px;\n font-size: 16px;\n top: 15px;\n left: 15px;\n }\n }\n\n @media (max-width: 480px) {\n .panel {\n font-size: 10px;\n border-radius: 6px;\n }\n\n .header {\n padding: 6px 10px;\n }\n\n .title {\n font-size: 11px;\n }\n\n .subtitle {\n font-size: 8px;\n }\n\n .toggles {\n padding: 4px 10px;\n }\n \n .toggles > *:not(:first-child) {\n margin-right: 6px;\n }\n\n .toggle {\n font-size: 9px;\n }\n\n .logs {\n padding: 4px;\n }\n\n .log-entry {\n padding: 4px 6px;\n font-size: 9px;\n }\n \n .log-entry > *:not(:first-child) {\n margin-top: 4px;\n }\n\n .log-meta {\n min-width: 40px;\n }\n\n .log-type {\n font-size: 7px;\n }\n\n .log-timestamp {\n font-size: 7px;\n }\n\n .log-data {\n font-size: 8px;\n padding: 4px;\n max-height: 60px;\n }\n\n .floating-btn {\n width: 32px;\n height: 32px;\n font-size: 14px;\n top: 10px;\n left: 10px;\n }\n }\n";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ApiClientService } from '@/core/api-client.service';
|
|
2
|
-
import {
|
|
1
|
+
import { ApiClientService } from '@/core/api/api-client.service';
|
|
2
|
+
import { AuthClientService } from '@/core/api/auth-client.service';
|
|
3
3
|
import { ClientActionService } from '@/core/client/client-action.service';
|
|
4
4
|
import { ClientConfigService, type IClientConfigs } from '@/core/client/client-config.service';
|
|
5
5
|
import { CommandService } from '@/core/command/command.service';
|
|
@@ -13,7 +13,7 @@ import { type ComponentType } from '@/enums';
|
|
|
13
13
|
import type { IInjectedComponent, IInjectProductElement, IInjectProductListParams, ILiquidCommerceElementsActions, IProcessInjectElementParams } from '@/interfaces/core.interface';
|
|
14
14
|
import { ThemeProviderService } from '@/modules/theme-provider/theme-provider.service';
|
|
15
15
|
export declare abstract class ElementsBaseClient {
|
|
16
|
-
protected readonly
|
|
16
|
+
protected readonly authClient: AuthClientService;
|
|
17
17
|
protected readonly clientConfig: ClientConfigService;
|
|
18
18
|
protected readonly store: StoreService;
|
|
19
19
|
protected readonly commands: CommandService;
|
|
@@ -14,6 +14,7 @@ export interface IElementsProxyConfig {
|
|
|
14
14
|
export interface ILiquidCommerceElementsDevelopmentConfig {
|
|
15
15
|
customApiUrl?: string;
|
|
16
16
|
paymentMethodId?: string;
|
|
17
|
+
openShadowDom?: boolean;
|
|
17
18
|
}
|
|
18
19
|
export interface IClientCustomThemeConfig {
|
|
19
20
|
global?: UpdateComponentGlobalConfigs;
|
package/docs/THEMING.md
CHANGED
|
@@ -37,6 +37,7 @@ interface IGlobalTheme {
|
|
|
37
37
|
accentColor: string;
|
|
38
38
|
defaultTextColor: string;
|
|
39
39
|
selectedTextColor: string;
|
|
40
|
+
linkTextColor: string;
|
|
40
41
|
errorColor: string;
|
|
41
42
|
warningColor: string;
|
|
42
43
|
successColor: string;
|
|
@@ -68,6 +69,7 @@ customTheme: {
|
|
|
68
69
|
accentColor: '#6c757d',
|
|
69
70
|
defaultTextColor: '#212529',
|
|
70
71
|
selectedTextColor: '#ffffff',
|
|
72
|
+
linkTextColor: '#1d4ed8',
|
|
71
73
|
errorColor: '#dc3545',
|
|
72
74
|
warningColor: '#ffc107',
|
|
73
75
|
successColor: '#28a745',
|
|
@@ -367,6 +369,7 @@ const client = await Elements('YOUR_API_KEY', {
|
|
|
367
369
|
accentColor: '#6c757d',
|
|
368
370
|
defaultTextColor: '#212529',
|
|
369
371
|
selectedTextColor: '#ffffff',
|
|
372
|
+
linkTextColor: '#1d4ed8',
|
|
370
373
|
errorColor: '#dc3545',
|
|
371
374
|
warningColor: '#ffc107',
|
|
372
375
|
successColor: '#28a745',
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "LiquidCommerce Elements SDK",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"author": "LiquidCommerce Team",
|
|
6
|
-
"version": "2.
|
|
6
|
+
"version": "2.6.0-beta.2",
|
|
7
7
|
"homepage": "https://docs.liquidcommerce.co/elements-sdk",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"conventional-changelog-cli": "^5.0.0",
|
|
92
92
|
"husky": "^9.1.7",
|
|
93
93
|
"process": "^0.11.10",
|
|
94
|
-
"rollup": "^4.53.
|
|
94
|
+
"rollup": "^4.53.3",
|
|
95
95
|
"rollup-obfuscator": "^4.1.1",
|
|
96
96
|
"rollup-plugin-typescript2": "^0.36.0",
|
|
97
97
|
"semantic-release": "^25.0.2",
|