@shopgate/engage 7.32.0-beta.4 → 7.32.0-beta.5
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/package.json +7 -7
- package/page/components/NotFound.d.ts +7 -0
- package/page/components/NotFound.d.ts.map +1 -0
- package/page/components/NotFound.js +1 -2
- package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.d.ts +52 -0
- package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.d.ts.map +1 -0
- package/page/components/ResponsiveWidgetImage/index.d.ts +2 -0
- package/page/components/ResponsiveWidgetImage/index.d.ts.map +1 -0
- package/page/components/WidgetRichText/WidgetRichText.d.ts +25 -0
- package/page/components/WidgetRichText/WidgetRichText.d.ts.map +1 -0
- package/page/components/WidgetRichText/index.d.ts +2 -0
- package/page/components/WidgetRichText/index.d.ts.map +1 -0
- package/page/components/WidgetVideo/WidgetVideo.d.ts +43 -0
- package/page/components/WidgetVideo/WidgetVideo.d.ts.map +1 -0
- package/page/components/WidgetVideo/WidgetVideo.js +33 -39
- package/page/components/WidgetVideo/index.d.ts +2 -0
- package/page/components/WidgetVideo/index.d.ts.map +1 -0
- package/page/components/Widgets/Overlay.d.ts +17 -0
- package/page/components/Widgets/Overlay.d.ts.map +1 -0
- package/page/components/Widgets/Overlay.js +24 -38
- package/page/components/Widgets/Tooltip.d.ts +20 -0
- package/page/components/Widgets/Tooltip.d.ts.map +1 -0
- package/page/components/Widgets/Tooltip.js +6 -10
- package/page/components/Widgets/Widget.d.ts +32 -0
- package/page/components/Widgets/Widget.d.ts.map +1 -0
- package/page/components/Widgets/Widget.js +7 -18
- package/page/components/Widgets/WidgetContext.d.ts +32 -38
- package/page/components/Widgets/WidgetContext.d.ts.map +1 -0
- package/page/components/Widgets/WidgetContext.js +2 -8
- package/page/components/Widgets/WidgetProvider.d.ts +25 -0
- package/page/components/Widgets/WidgetProvider.d.ts.map +1 -0
- package/page/components/Widgets/WidgetProvider.js +5 -12
- package/page/components/Widgets/Widgets.d.ts +16 -0
- package/page/components/Widgets/Widgets.d.ts.map +1 -0
- package/page/components/Widgets/Widgets.js +5 -12
- package/page/components/Widgets/WidgetsPreviewContext.d.ts +21 -0
- package/page/components/Widgets/WidgetsPreviewContext.d.ts.map +1 -0
- package/page/components/Widgets/WidgetsPreviewContext.js +5 -7
- package/page/components/Widgets/WidgetsPreviewProvider.d.ts +18 -0
- package/page/components/Widgets/WidgetsPreviewProvider.d.ts.map +1 -0
- package/page/components/Widgets/WidgetsPreviewProvider.js +5 -6
- package/page/components/Widgets/constants.d.ts +5 -0
- package/page/components/Widgets/constants.d.ts.map +1 -0
- package/page/components/Widgets/constants.js +3 -1
- package/page/components/Widgets/events.d.ts +38 -0
- package/page/components/Widgets/events.d.ts.map +1 -0
- package/page/components/Widgets/events.js +8 -12
- package/page/components/Widgets/helpers.d.ts +50 -0
- package/page/components/Widgets/helpers.d.ts.map +1 -0
- package/page/components/Widgets/helpers.js +8 -13
- package/page/components/Widgets/hooks.d.ts +13 -0
- package/page/components/Widgets/hooks.d.ts.map +1 -0
- package/page/components/Widgets/hooks.js +13 -11
- package/page/components/Widgets/index.d.ts +3 -0
- package/page/components/Widgets/index.d.ts.map +1 -0
- package/page/components/Widgets/types.d.ts +111 -113
- package/page/components/Widgets/types.d.ts.map +1 -0
- package/page/components/Widgets/types.js +1 -0
- package/page/components/index.d.ts +5 -0
- package/page/components/index.d.ts.map +1 -0
- package/page/constants/actionTypes.d.ts +4 -0
- package/page/constants/actionTypes.d.ts.map +1 -0
- package/page/constants/index.d.ts +25 -0
- package/page/constants/index.d.ts.map +1 -0
- package/page/helpers/index.d.ts +67 -62
- package/page/helpers/index.d.ts.map +1 -0
- package/page/helpers/index.js +24 -25
- package/page/hooks/index.d.ts +54 -53
- package/page/hooks/index.d.ts.map +1 -0
- package/page/hooks/index.js +20 -15
- package/page/selectors/index.d.ts +32 -0
- package/page/selectors/index.d.ts.map +1 -0
- package/page/widgets/Video/Video.d.ts +6 -0
- package/page/widgets/Video/Video.d.ts.map +1 -0
- package/page/widgets/Video/Video.js +0 -2
- package/page/widgets/Video/hooks.d.ts +53 -0
- package/page/widgets/Video/hooks.d.ts.map +1 -0
- package/page/widgets/Video/hooks.js +4 -12
- package/page/widgets/Video/index.d.ts +2 -0
- package/page/widgets/Video/index.d.ts.map +1 -0
- package/product/components/ProductGrid/constants.d.ts +2 -0
- package/product/components/ProductGrid/constants.d.ts.map +1 -0
- package/product/components/ProductGrid/constants.js +1 -0
- package/product/components/ProductGrid/hooks.d.ts +18 -0
- package/product/components/ProductGrid/hooks.d.ts.map +1 -0
- package/product/components/ProductGrid/hooks.js +49 -0
- package/product/components/ProductGrid/index.js +3 -6
- package/product/components/ProductGrid/spec.js +3 -0
- package/settings/reducers/appSettings.d.ts.map +1 -1
- package/settings/reducers/appSettings.js +8 -0
- package/settings/selectors/appSettings.d.ts +8 -0
- package/settings/selectors/appSettings.d.ts.map +1 -1
- package/settings/selectors/appSettings.js +6 -1
- package/settings/types/appSettings.d.ts +21 -0
- package/settings/types/appSettings.d.ts.map +1 -1
|
@@ -1,42 +1,36 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* Whether the widget is rendered in preview mode
|
|
33
|
-
*/
|
|
34
|
-
isPreview: boolean;
|
|
1
|
+
import { type WidgetDefinitionLayout, type WidgetDefinitionVisibility } from './types';
|
|
2
|
+
export { type WidgetDefinition } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Context value provided by the {@link WidgetContext} for a single widget instance.
|
|
5
|
+
*/
|
|
6
|
+
export interface WidgetContextType<C = Record<string, unknown>> {
|
|
7
|
+
/**
|
|
8
|
+
* The unique code of the widget instance.
|
|
9
|
+
*/
|
|
10
|
+
code: string;
|
|
11
|
+
/**
|
|
12
|
+
* The name of the widget.
|
|
13
|
+
*/
|
|
14
|
+
name: string;
|
|
15
|
+
/**
|
|
16
|
+
* The widget configuration.
|
|
17
|
+
*/
|
|
18
|
+
config: C;
|
|
19
|
+
/**
|
|
20
|
+
* The widget layout settings.
|
|
21
|
+
*/
|
|
22
|
+
layout: WidgetDefinitionLayout;
|
|
23
|
+
/**
|
|
24
|
+
* The widget visibility settings.
|
|
25
|
+
*/
|
|
26
|
+
visibility: WidgetDefinitionVisibility;
|
|
27
|
+
/**
|
|
28
|
+
* Whether the widget is rendered in preview mode.
|
|
29
|
+
*/
|
|
30
|
+
isPreview: boolean;
|
|
35
31
|
}
|
|
36
|
-
|
|
37
32
|
/**
|
|
38
33
|
* React context for widgets.
|
|
39
34
|
*/
|
|
40
|
-
declare const WidgetContext: Context<WidgetContextType
|
|
41
|
-
|
|
42
|
-
export default WidgetContext;
|
|
35
|
+
export declare const WidgetContext: import("react").Context<WidgetContextType<Record<string, unknown>>>;
|
|
36
|
+
//# sourceMappingURL=WidgetContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WidgetContext.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/WidgetContext.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,0BAA0B,EAChC,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC5D;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,MAAM,EAAE,CAAC,CAAC;IACV;;OAEG;IACH,MAAM,EAAE,sBAAsB,CAAC;IAC/B;;OAEG;IACH,UAAU,EAAE,0BAA0B,CAAC;IACvC;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,qEAA4D,CAAC"}
|
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
import { createContext } from 'react';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* @
|
|
4
|
+
* Context value provided by the {@link WidgetContext} for a single widget instance.
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
* @property {WidgetDefinition['code']} code The unique widget code.
|
|
10
|
-
* @property {WidgetDefinition['widgetConfig']} config The widget configuration.
|
|
11
|
-
* @property {WidgetDefinition['layout']} layout The widget layout settings.
|
|
12
|
-
* @property {WidgetDefinition['visibility']} visibility The widget visibility settings.
|
|
8
|
+
* React context for widgets.
|
|
13
9
|
*/
|
|
14
|
-
|
|
15
|
-
/** @type {React.Context<WidgetContextType>} */
|
|
16
10
|
export const WidgetContext = /*#__PURE__*/createContext({});
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type WidgetDefinition } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Props of the {@link WidgetProvider} component.
|
|
5
|
+
*/
|
|
6
|
+
export interface WidgetProviderProps {
|
|
7
|
+
/**
|
|
8
|
+
* The child components to render.
|
|
9
|
+
*/
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* The widget definition data.
|
|
13
|
+
*/
|
|
14
|
+
definition: WidgetDefinition;
|
|
15
|
+
/**
|
|
16
|
+
* Whether the widget is in preview mode.
|
|
17
|
+
*/
|
|
18
|
+
isPreview: boolean;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* The WidgetProvider component provides the context for a single widget.
|
|
22
|
+
*/
|
|
23
|
+
declare const WidgetProvider: ({ children, definition, isPreview }: WidgetProviderProps) => import("react").JSX.Element;
|
|
24
|
+
export default WidgetProvider;
|
|
25
|
+
//# sourceMappingURL=WidgetProvider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WidgetProvider.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/WidgetProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,UAAU,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,QAAA,MAAM,cAAc,GAAI,qCAAqC,mBAAmB,gCAoB/E,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1,25 +1,18 @@
|
|
|
1
|
-
import
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
1
|
+
import { useMemo } from 'react';
|
|
3
2
|
import { WidgetContext } from "./WidgetContext";
|
|
4
3
|
|
|
5
|
-
/** @typedef {import('./WidgetContext').WidgetContextType} WidgetContextType */
|
|
6
|
-
/** @typedef {import('./WidgetContext').WidgetDefinition} WidgetDefinition */
|
|
7
|
-
|
|
8
4
|
/**
|
|
9
|
-
*
|
|
10
|
-
* @param {Object} props The component props.
|
|
11
|
-
* @param {WidgetDefinition} props.definition The widget definition data.
|
|
12
|
-
* @param {boolean} props.isPreview Whether the widget is in preview mode.
|
|
13
|
-
* @param {React.ReactNode} props.children The child components to render.
|
|
14
|
-
* @returns {JSX.Element}
|
|
5
|
+
* Props of the {@link WidgetProvider} component.
|
|
15
6
|
*/
|
|
16
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
/**
|
|
9
|
+
* The WidgetProvider component provides the context for a single widget.
|
|
10
|
+
*/
|
|
17
11
|
const WidgetProvider = ({
|
|
18
12
|
children,
|
|
19
13
|
definition,
|
|
20
14
|
isPreview
|
|
21
15
|
}) => {
|
|
22
|
-
/** @type {WidgetContextType} */
|
|
23
16
|
const value = useMemo(() => {
|
|
24
17
|
const {
|
|
25
18
|
widgetConfig,
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { type WidgetDefinition } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Props of the {@link Widgets} component.
|
|
4
|
+
*/
|
|
5
|
+
export interface WidgetsProps {
|
|
6
|
+
/**
|
|
7
|
+
* The list of widgets to render.
|
|
8
|
+
*/
|
|
9
|
+
widgets?: WidgetDefinition[];
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* The Widgets component renders a list of widgets.
|
|
13
|
+
*/
|
|
14
|
+
declare const Widgets: ({ widgets: widgetsProp, }: WidgetsProps) => import("react").JSX.Element | null;
|
|
15
|
+
export default Widgets;
|
|
16
|
+
//# sourceMappingURL=Widgets.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Widgets.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/Widgets.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAYhD;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC9B;AAED;;GAEG;AACH,QAAA,MAAM,OAAO,GAAI,2BAEd,YAAY,uCA+Dd,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
1
|
+
import { useMemo, useRef } from 'react';
|
|
3
2
|
import { makeStyles } from '@shopgate/engage/styles';
|
|
4
3
|
import { useRoute, useThemeWidgets } from '@shopgate/engage/core/hooks';
|
|
5
4
|
import { PAGE_PREVIEW_PATTERN } from '@shopgate/engage/page/constants';
|
|
@@ -10,10 +9,6 @@ import Widget from "./Widget";
|
|
|
10
9
|
import Overlay from "./Overlay";
|
|
11
10
|
import { checkScheduled } from "./helpers";
|
|
12
11
|
import { usePreviewIframeCommunication } from "./hooks";
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* @typedef {import('./types').WidgetDefinition} WidgetDefinition
|
|
16
|
-
*/
|
|
17
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
18
13
|
const PLACEHOLDER_COMPONENT = '@shopgate/widgetsInternal/Placeholder';
|
|
19
14
|
const useStyles = makeStyles()({
|
|
@@ -24,11 +19,12 @@ const useStyles = makeStyles()({
|
|
|
24
19
|
}
|
|
25
20
|
});
|
|
26
21
|
|
|
22
|
+
/**
|
|
23
|
+
* Props of the {@link Widgets} component.
|
|
24
|
+
*/
|
|
25
|
+
|
|
27
26
|
/**
|
|
28
27
|
* The Widgets component renders a list of widgets.
|
|
29
|
-
* @param {Object} props The component props.
|
|
30
|
-
* @param {Array<WidgetDefinition>} props.widgets The list of widgets to render.
|
|
31
|
-
* @returns {JSX.Element}
|
|
32
28
|
*/
|
|
33
29
|
const Widgets = ({
|
|
34
30
|
widgets: widgetsProp = []
|
|
@@ -85,7 +81,4 @@ const Widgets = ({
|
|
|
85
81
|
})
|
|
86
82
|
});
|
|
87
83
|
};
|
|
88
|
-
Widgets.defaultProps = {
|
|
89
|
-
widgets: null
|
|
90
|
-
};
|
|
91
84
|
export default Widgets;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Sets the active widget in the preview context.
|
|
3
|
+
* @param code The code of the widget to set as active.
|
|
4
|
+
* @param highlight Whether to highlight the widget after setting it as active.
|
|
5
|
+
*/
|
|
6
|
+
export type SetActiveWidget = (code: string, highlight?: boolean) => void;
|
|
7
|
+
/**
|
|
8
|
+
* Context value provided by the {@link WidgetsPreviewContext}.
|
|
9
|
+
*/
|
|
10
|
+
export interface WidgetsPreviewContextType {
|
|
11
|
+
/**
|
|
12
|
+
* The code of the currently active widget.
|
|
13
|
+
*/
|
|
14
|
+
activeWidget: string | null;
|
|
15
|
+
/**
|
|
16
|
+
* A function to set the active widget code.
|
|
17
|
+
*/
|
|
18
|
+
setActiveWidget: SetActiveWidget;
|
|
19
|
+
}
|
|
20
|
+
export declare const WidgetsPreviewContext: import("react").Context<WidgetsPreviewContextType>;
|
|
21
|
+
//# sourceMappingURL=WidgetsPreviewContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WidgetsPreviewContext.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/WidgetsPreviewContext.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;AAE1E;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,eAAe,EAAE,eAAe,CAAC;CAClC;AAED,eAAO,MAAM,qBAAqB,oDAGhC,CAAC"}
|
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
import _noop from "lodash/noop";
|
|
2
2
|
import { createContext } from 'react';
|
|
3
|
+
|
|
3
4
|
/**
|
|
4
|
-
*
|
|
5
|
-
* @param
|
|
6
|
-
* @param
|
|
5
|
+
* Sets the active widget in the preview context.
|
|
6
|
+
* @param code The code of the widget to set as active.
|
|
7
|
+
* @param highlight Whether to highlight the widget after setting it as active.
|
|
7
8
|
*/
|
|
8
9
|
|
|
9
10
|
/**
|
|
10
|
-
* @
|
|
11
|
-
* @property {string} activeWidget The code of the currently active widget.
|
|
12
|
-
* @property {SetActiveWidget} setActiveWidget A function to set the active widget code
|
|
11
|
+
* Context value provided by the {@link WidgetsPreviewContext}.
|
|
13
12
|
*/
|
|
14
13
|
|
|
15
|
-
/** @type {React.Context<WidgetsPreviewContextType>} */
|
|
16
14
|
export const WidgetsPreviewContext = /*#__PURE__*/createContext({
|
|
17
15
|
activeWidget: null,
|
|
18
16
|
setActiveWidget: _noop
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Props of the {@link WidgetsPreviewProvider} component.
|
|
4
|
+
*/
|
|
5
|
+
export interface WidgetsPreviewProviderProps {
|
|
6
|
+
/**
|
|
7
|
+
* The child components to render.
|
|
8
|
+
*/
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* The WidgetsPreviewProvider component is used by the Widgets component when it's rendered
|
|
13
|
+
* in preview mode. It provides functionality for the Widget component that's needed when
|
|
14
|
+
* the widgets are rendered in the preview iframe.
|
|
15
|
+
*/
|
|
16
|
+
declare const WidgetsPreviewProvider: ({ children }: WidgetsPreviewProviderProps) => import("react").JSX.Element;
|
|
17
|
+
export default WidgetsPreviewProvider;
|
|
18
|
+
//# sourceMappingURL=WidgetsPreviewProvider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WidgetsPreviewProvider.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/WidgetsPreviewProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAC2B,KAAK,SAAS,EAC/C,MAAM,OAAO,CAAC;AAOf;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,QAAA,MAAM,sBAAsB,GAAI,cAAc,2BAA2B,gCAyBxE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
|
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
import
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
1
|
+
import { useMemo, useState, useCallback } from 'react';
|
|
3
2
|
import { useWidgetPreviewEvent, dispatchWidgetPreviewEvent } from "./events";
|
|
4
3
|
import { WidgetsPreviewContext } from "./WidgetsPreviewContext";
|
|
5
4
|
|
|
5
|
+
/**
|
|
6
|
+
* Props of the {@link WidgetsPreviewProvider} component.
|
|
7
|
+
*/
|
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
9
|
/**
|
|
7
10
|
* The WidgetsPreviewProvider component is used by the Widgets component when it's rendered
|
|
8
11
|
* in preview mode. It provides functionality for the Widget component that's needed when
|
|
9
12
|
* the widgets are rendered in the preview iframe.
|
|
10
|
-
* @param {Object} props The component props.
|
|
11
|
-
* @param {React.ReactNode} props.children The child components to render.
|
|
12
|
-
* @returns {JSX.Element}
|
|
13
13
|
*/
|
|
14
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
14
|
const WidgetsPreviewProvider = ({
|
|
16
15
|
children
|
|
17
16
|
}) => {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,4CAA4C,QAAQ,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Names of the events that are dispatched in the context of widget preview iframe communication.
|
|
3
|
+
*/
|
|
4
|
+
export type WidgetPreviewEventName = 'highlight-widget' | 'widget-clicked' | 'set-active-widget-id';
|
|
5
|
+
/**
|
|
6
|
+
* Detail payload of a widget preview event.
|
|
7
|
+
*/
|
|
8
|
+
export interface WidgetPreviewEventDetail {
|
|
9
|
+
/**
|
|
10
|
+
* The code of the widget related to the event.
|
|
11
|
+
*/
|
|
12
|
+
widgetCode: string;
|
|
13
|
+
/**
|
|
14
|
+
* Optional payload data related to the event.
|
|
15
|
+
*/
|
|
16
|
+
payload?: unknown;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Handler for a widget preview event.
|
|
20
|
+
*/
|
|
21
|
+
export type WidgetPreviewEventHandler = (event: CustomEvent<WidgetPreviewEventDetail>) => void;
|
|
22
|
+
/**
|
|
23
|
+
* Hook to listen for widget preview events.
|
|
24
|
+
* These events are dispatched in the context of iFrame communication at the widget preview.
|
|
25
|
+
* @param eventName Name of the listened event
|
|
26
|
+
* @param handler A callback function to handle the event
|
|
27
|
+
*/
|
|
28
|
+
export declare const useWidgetPreviewEvent: (eventName: WidgetPreviewEventName, handler: WidgetPreviewEventHandler) => void;
|
|
29
|
+
/**
|
|
30
|
+
* Dispatches widget preview related events.
|
|
31
|
+
* Used to trigger iFrame postMessage events to the parent window or to react on incoming
|
|
32
|
+
* postMessage events from the parent window.
|
|
33
|
+
* @param eventName Name of the event to dispatch
|
|
34
|
+
* @param widgetCode Code of the widget to dispatch the event for
|
|
35
|
+
* @param payload Optional payload to include with the event
|
|
36
|
+
*/
|
|
37
|
+
export declare const dispatchWidgetPreviewEvent: (eventName: WidgetPreviewEventName, widgetCode: string, payload?: unknown) => void;
|
|
38
|
+
//# sourceMappingURL=events.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/events.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,sBAAsB,CAAC;AAEpG;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,CAAC,KAAK,EAAE,WAAW,CAAC,wBAAwB,CAAC,KAAK,IAAI,CAAC;AAE/F;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAChC,WAAW,sBAAsB,EACjC,SAAS,yBAAyB,SASnC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,0BAA0B,GACrC,WAAW,sBAAsB,EACjC,YAAY,MAAM,EAClB,UAAS,OAAc,SAUxB,CAAC"}
|
|
@@ -1,26 +1,22 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* Names of the events that are dispatched in the context of widget preview iframe communication.
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
* @property {string} widgetCode The code of the widget related to the event.
|
|
10
|
-
* @property {any} [payload] Optional payload data related to the event.
|
|
8
|
+
* Detail payload of a widget preview event.
|
|
11
9
|
*/
|
|
12
10
|
|
|
13
11
|
/**
|
|
14
|
-
*
|
|
15
|
-
* @param {CustomEvent<WidgetPreviewEventDetail>} event The custom event dispatched for the widget
|
|
16
|
-
* preview.
|
|
12
|
+
* Handler for a widget preview event.
|
|
17
13
|
*/
|
|
18
14
|
|
|
19
15
|
/**
|
|
20
16
|
* Hook to listen for widget preview events.
|
|
21
17
|
* These events are dispatched in the context of iFrame communication at the widget preview.
|
|
22
|
-
* @param
|
|
23
|
-
* @param
|
|
18
|
+
* @param eventName Name of the listened event
|
|
19
|
+
* @param handler A callback function to handle the event
|
|
24
20
|
*/
|
|
25
21
|
export const useWidgetPreviewEvent = (eventName, handler) => {
|
|
26
22
|
useEffect(() => {
|
|
@@ -35,9 +31,9 @@ export const useWidgetPreviewEvent = (eventName, handler) => {
|
|
|
35
31
|
* Dispatches widget preview related events.
|
|
36
32
|
* Used to trigger iFrame postMessage events to the parent window or to react on incoming
|
|
37
33
|
* postMessage events from the parent window.
|
|
38
|
-
* @param
|
|
39
|
-
* @param
|
|
40
|
-
* @param
|
|
34
|
+
* @param eventName Name of the event to dispatch
|
|
35
|
+
* @param widgetCode Code of the widget to dispatch the event for
|
|
36
|
+
* @param payload Optional payload to include with the event
|
|
41
37
|
*/
|
|
42
38
|
export const dispatchWidgetPreviewEvent = (eventName, widgetCode, payload = null) => {
|
|
43
39
|
const event = new CustomEvent(`widget-preview-${eventName}`, {
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Retrieves the scroll container for the current page. Depending on the PWA mode this can be
|
|
3
|
+
* a scrollable article element or the window.
|
|
4
|
+
* @returns The scroll container element, or null if it could not be found.
|
|
5
|
+
*/
|
|
6
|
+
export declare const getScrollContainer: () => HTMLElement | null;
|
|
7
|
+
/**
|
|
8
|
+
* Parameters for {@link checkScheduled}.
|
|
9
|
+
*/
|
|
10
|
+
export interface ScheduledParams {
|
|
11
|
+
/**
|
|
12
|
+
* The start date of the scheduling in ISO format.
|
|
13
|
+
*/
|
|
14
|
+
from?: string;
|
|
15
|
+
/**
|
|
16
|
+
* The end date of the scheduling in ISO format.
|
|
17
|
+
*/
|
|
18
|
+
to?: string;
|
|
19
|
+
/**
|
|
20
|
+
* The timezone offset in minutes. If not provided, the local timezone offset will be used.
|
|
21
|
+
*/
|
|
22
|
+
timezoneOffset?: number;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* The scheduling status of a widget.
|
|
26
|
+
*/
|
|
27
|
+
export interface ScheduledStatus {
|
|
28
|
+
/**
|
|
29
|
+
* Indicates if the widget is scheduled.
|
|
30
|
+
*/
|
|
31
|
+
isScheduled: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Indicates if the widget is currently active within the scheduled time frame.
|
|
34
|
+
*/
|
|
35
|
+
isActive: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Indicates if the scheduled time frame has expired.
|
|
38
|
+
*/
|
|
39
|
+
isExpired: boolean;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Retrieves the scheduling status of a widget based on the provided parameters.
|
|
43
|
+
* @param params The parameters for the function.
|
|
44
|
+
* @param params.from The start date of the scheduling in ISO format.
|
|
45
|
+
* @param params.to The end date of the scheduling in ISO format.
|
|
46
|
+
* @param params.timezoneOffset The timezone offset in minutes.
|
|
47
|
+
* @returns An object containing the scheduling status.
|
|
48
|
+
*/
|
|
49
|
+
export declare function checkScheduled({ from, to, timezoneOffset }?: ScheduledParams): ScheduledStatus;
|
|
50
|
+
//# sourceMappingURL=helpers.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/helpers.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,QAAO,WAAW,GAAG,IACwC,CAAC;AAE7F;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC5B,EAAE,IAAI,EAAE,EAAE,EAAE,cAAc,EAAE,GAAE,eAAoB,GACjD,eAAe,CAqBjB"}
|
|
@@ -4,30 +4,25 @@ import { PAGE_PREVIEW_PATTERN } from '@shopgate/engage/page/constants';
|
|
|
4
4
|
/**
|
|
5
5
|
* Retrieves the scroll container for the current page. Depending on the PWA mode this can be
|
|
6
6
|
* a scrollable article element or the window.
|
|
7
|
-
* @returns
|
|
7
|
+
* @returns The scroll container element, or null if it could not be found.
|
|
8
8
|
*/
|
|
9
9
|
export const getScrollContainer = () => document.querySelector(`.route__${PAGE_PREVIEW_PATTERN.replace(/^\/+/, '')}`);
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
|
-
* @
|
|
13
|
-
* @property {string} [from] The start date of the scheduling in ISO format.
|
|
14
|
-
* @property {string} [to] The end date of the scheduling in ISO format.
|
|
15
|
-
* @property {number} [timezoneOffset] The timezone offset in minutes. If not provided, the local
|
|
16
|
-
* timezone offset will be used.
|
|
12
|
+
* Parameters for {@link checkScheduled}.
|
|
17
13
|
*/
|
|
18
14
|
|
|
19
15
|
/**
|
|
20
|
-
*
|
|
21
|
-
* @property {boolean} isScheduled Indicates if the widget is scheduled.
|
|
22
|
-
* @property {boolean} isActive Indicates if the widget is currently active within the
|
|
23
|
-
* scheduled time frame.
|
|
24
|
-
* @property {boolean} isExpired Indicates if the scheduled time frame has expired.
|
|
16
|
+
* The scheduling status of a widget.
|
|
25
17
|
*/
|
|
26
18
|
|
|
27
19
|
/**
|
|
28
20
|
* Retrieves the scheduling status of a widget based on the provided parameters.
|
|
29
|
-
* @param
|
|
30
|
-
* @
|
|
21
|
+
* @param params The parameters for the function.
|
|
22
|
+
* @param params.from The start date of the scheduling in ISO format.
|
|
23
|
+
* @param params.to The end date of the scheduling in ISO format.
|
|
24
|
+
* @param params.timezoneOffset The timezone offset in minutes.
|
|
25
|
+
* @returns An object containing the scheduling status.
|
|
31
26
|
*/
|
|
32
27
|
export function checkScheduled({
|
|
33
28
|
from,
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { type WidgetsPreviewContextType } from './WidgetsPreviewContext';
|
|
2
|
+
/**
|
|
3
|
+
* Hook to handle communication with the parent window in a page preview iframe.
|
|
4
|
+
* @param isActive Whether the preview communication is active.
|
|
5
|
+
*/
|
|
6
|
+
export declare const usePreviewIframeCommunication: (isActive?: boolean) => void;
|
|
7
|
+
/**
|
|
8
|
+
* The useWidgetsPreview hook provides access to the context that is wrapped around the Widgets
|
|
9
|
+
* component when it's rendered in preview mode.
|
|
10
|
+
* @returns The widget preview context.
|
|
11
|
+
*/
|
|
12
|
+
export declare const useWidgetsPreview: () => WidgetsPreviewContextType;
|
|
13
|
+
//# sourceMappingURL=hooks.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/hooks.ts"],"names":[],"mappings":"AAcA,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,yBAAyB,CAAC;AAoBjC;;;GAGG;AACH,eAAO,MAAM,6BAA6B,GAAI,kBAAgB,SAyG7D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,QAAO,yBAA8D,CAAC"}
|
|
@@ -10,9 +10,13 @@ import { getScrollContainer } from "./helpers";
|
|
|
10
10
|
import { WidgetsPreviewContext } from "./WidgetsPreviewContext";
|
|
11
11
|
import { dispatchWidgetPreviewEvent, useWidgetPreviewEvent } from "./events";
|
|
12
12
|
|
|
13
|
+
/**
|
|
14
|
+
* Message payload exchanged with the parent window in the page preview iframe.
|
|
15
|
+
*/
|
|
16
|
+
|
|
13
17
|
/**
|
|
14
18
|
* Hook to handle communication with the parent window in a page preview iframe.
|
|
15
|
-
* @param
|
|
19
|
+
* @param isActive Whether the preview communication is active.
|
|
16
20
|
*/
|
|
17
21
|
export const usePreviewIframeCommunication = (isActive = false) => {
|
|
18
22
|
const dispatch = useDispatch();
|
|
@@ -37,12 +41,15 @@ export const usePreviewIframeCommunication = (isActive = false) => {
|
|
|
37
41
|
dispatch(receivePageConfigV2({
|
|
38
42
|
type: 'cms',
|
|
39
43
|
slug: PAGE_PREVIEW_SLUG,
|
|
40
|
-
data: data.payload
|
|
44
|
+
data: data.payload ?? {}
|
|
41
45
|
}));
|
|
42
46
|
} else if (data.type === 'scrollToWidget' && data.payload?.widgetCode) {
|
|
43
47
|
// Parent window requested to scroll to a specific widget.
|
|
48
|
+
const {
|
|
49
|
+
widgetCode
|
|
50
|
+
} = data.payload;
|
|
44
51
|
const scrollContainer = getScrollContainer();
|
|
45
|
-
const target = scrollContainer
|
|
52
|
+
const target = scrollContainer?.querySelector(`#widget-code-${widgetCode}`);
|
|
46
53
|
if (scrollContainer && target) {
|
|
47
54
|
let marginTop = 0;
|
|
48
55
|
if (considerVerticalMargins) {
|
|
@@ -56,13 +63,13 @@ export const usePreviewIframeCommunication = (isActive = false) => {
|
|
|
56
63
|
const actualScrollTop = Math.min(scrollOffset, maxScrollTop);
|
|
57
64
|
|
|
58
65
|
// Register the target element as the active widget.
|
|
59
|
-
dispatchWidgetPreviewEvent('set-active-widget-id',
|
|
66
|
+
dispatchWidgetPreviewEvent('set-active-widget-id', widgetCode);
|
|
60
67
|
|
|
61
68
|
/**
|
|
62
69
|
* Callback to highlight the widget after scrolling.
|
|
63
70
|
*/
|
|
64
71
|
const highlightWidget = () => {
|
|
65
|
-
dispatchWidgetPreviewEvent('highlight-widget',
|
|
72
|
+
dispatchWidgetPreviewEvent('highlight-widget', widgetCode);
|
|
66
73
|
};
|
|
67
74
|
|
|
68
75
|
// Add listener to onScrollEnd if available, otherwise use scroll event.
|
|
@@ -117,14 +124,9 @@ export const usePreviewIframeCommunication = (isActive = false) => {
|
|
|
117
124
|
});
|
|
118
125
|
};
|
|
119
126
|
|
|
120
|
-
/**
|
|
121
|
-
* @typedef {import('./WidgetsPreviewContext.js').WidgetsPreviewContextType}
|
|
122
|
-
* WidgetsPreviewContextType
|
|
123
|
-
*/
|
|
124
|
-
|
|
125
127
|
/**
|
|
126
128
|
* The useWidgetsPreview hook provides access to the context that is wrapped around the Widgets
|
|
127
129
|
* component when it's rendered in preview mode.
|
|
128
|
-
* @returns
|
|
130
|
+
* @returns The widget preview context.
|
|
129
131
|
*/
|
|
130
132
|
export const useWidgetsPreview = () => useContext(WidgetsPreviewContext);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC"}
|