@shopgate/engage 7.32.0-beta.4 → 7.32.0-beta.6

package/page/components/Widgets/Widgets.js

@@ -1,5 +1,4 @@
-import React, { useMemo, useRef } from 'react';
-import PropTypes from 'prop-types';
+import { useMemo, useRef } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useRoute, useThemeWidgets } from '@shopgate/engage/core/hooks';
 import { PAGE_PREVIEW_PATTERN } from '@shopgate/engage/page/constants';
@@ -10,10 +9,6 @@ import Widget from "./Widget";
 import Overlay from "./Overlay";
 import { checkScheduled } from "./helpers";
 import { usePreviewIframeCommunication } from "./hooks";
-
-/**
- * @typedef {import('./types').WidgetDefinition} WidgetDefinition
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PLACEHOLDER_COMPONENT = '@shopgate/widgetsInternal/Placeholder';
 const useStyles = makeStyles()({
@@ -24,11 +19,12 @@ const useStyles = makeStyles()({
   }
 });
 
+/**
+ * Props of the {@link Widgets} component.
+ */
+
 /**
  * The Widgets component renders a list of widgets.
- * @param {Object} props The component props.
- * @param {Array<WidgetDefinition>} props.widgets The list of widgets to render.
- * @returns {JSX.Element}
  */
 const Widgets = ({
   widgets: widgetsProp = []
@@ -85,7 +81,4 @@ const Widgets = ({
     })
   });
 };
-Widgets.defaultProps = {
-  widgets: null
-};
 export default Widgets;

package/page/components/Widgets/WidgetsPreviewContext.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Sets the active widget in the preview context.
+ * @param code The code of the widget to set as active.
+ * @param highlight Whether to highlight the widget after setting it as active.
+ */
+export type SetActiveWidget = (code: string, highlight?: boolean) => void;
+/**
+ * Context value provided by the {@link WidgetsPreviewContext}.
+ */
+export interface WidgetsPreviewContextType {
+    /**
+     * The code of the currently active widget.
+     */
+    activeWidget: string | null;
+    /**
+     * A function to set the active widget code.
+     */
+    setActiveWidget: SetActiveWidget;
+}
+export declare const WidgetsPreviewContext: import("react").Context<WidgetsPreviewContextType>;
+//# sourceMappingURL=WidgetsPreviewContext.d.ts.map

package/page/components/Widgets/WidgetsPreviewContext.d.ts.map

@@ -0,0 +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"}

package/page/components/Widgets/WidgetsPreviewContext.js

@@ -1,18 +1,16 @@
 import _noop from "lodash/noop";
 import { createContext } from 'react';
+
 /**
- * @callback SetActiveWidget
- * @param {string} code The code of the widget to set as active.
- * @param {boolean} [highlight=false] Whether to highlight the widget after setting it as active.
+ * Sets the active widget in the preview context.
+ * @param code The code of the widget to set as active.
+ * @param highlight Whether to highlight the widget after setting it as active.
  */
 
 /**
- * @typedef {Object} WidgetsPreviewContextType
- * @property {string} activeWidget The code of the currently active widget.
- * @property {SetActiveWidget} setActiveWidget A function to set the active widget code
+ * Context value provided by the {@link WidgetsPreviewContext}.
  */
 
-/** @type {React.Context<WidgetsPreviewContextType>} */
 export const WidgetsPreviewContext = /*#__PURE__*/createContext({
   activeWidget: null,
   setActiveWidget: _noop

package/page/components/Widgets/WidgetsPreviewProvider.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+/**
+ * Props of the {@link WidgetsPreviewProvider} component.
+ */
+export interface WidgetsPreviewProviderProps {
+    /**
+     * The child components to render.
+     */
+    children: ReactNode;
+}
+/**
+ * The WidgetsPreviewProvider component is used by the Widgets component when it's rendered
+ * in preview mode. It provides functionality for the Widget component that's needed when
+ * the widgets are rendered in the preview iframe.
+ */
+declare const WidgetsPreviewProvider: ({ children }: WidgetsPreviewProviderProps) => import("react").JSX.Element;
+export default WidgetsPreviewProvider;
+//# sourceMappingURL=WidgetsPreviewProvider.d.ts.map

package/page/components/Widgets/WidgetsPreviewProvider.d.ts.map

@@ -0,0 +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"}

package/page/components/Widgets/WidgetsPreviewProvider.js

@@ -1,17 +1,16 @@
-import React, { useMemo, useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import { useMemo, useState, useCallback } from 'react';
 import { useWidgetPreviewEvent, dispatchWidgetPreviewEvent } from "./events";
 import { WidgetsPreviewContext } from "./WidgetsPreviewContext";
 
+/**
+ * Props of the {@link WidgetsPreviewProvider} component.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * The WidgetsPreviewProvider component is used by the Widgets component when it's rendered
  * in preview mode. It provides functionality for the Widget component that's needed when
  * the widgets are rendered in the preview iframe.
- * @param {Object} props The component props.
- * @param {React.ReactNode} props.children The child components to render.
- * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const WidgetsPreviewProvider = ({
   children
 }) => {

package/page/components/Widgets/constants.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Whether to consider vertical margins when calculating the overlay position.
+ */
+export declare const CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT = false;
+//# sourceMappingURL=constants.d.ts.map

package/page/components/Widgets/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,4CAA4C,QAAQ,CAAC"}

package/page/components/Widgets/constants.js

@@ -1,2 +1,4 @@
-// Whether to consider vertical margins when calculating the overlay position.
+/**
+ * Whether to consider vertical margins when calculating the overlay position.
+ */
 export const CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT = false;

package/page/components/Widgets/events.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Names of the events that are dispatched in the context of widget preview iframe communication.
+ */
+export type WidgetPreviewEventName = 'highlight-widget' | 'widget-clicked' | 'set-active-widget-id';
+/**
+ * Detail payload of a widget preview event.
+ */
+export interface WidgetPreviewEventDetail {
+    /**
+     * The code of the widget related to the event.
+     */
+    widgetCode: string;
+    /**
+     * Optional payload data related to the event.
+     */
+    payload?: unknown;
+}
+/**
+ * Handler for a widget preview event.
+ */
+export type WidgetPreviewEventHandler = (event: CustomEvent<WidgetPreviewEventDetail>) => void;
+/**
+ * Hook to listen for widget preview events.
+ * These events are dispatched in the context of iFrame communication at the widget preview.
+ * @param eventName Name of the listened event
+ * @param handler A callback function to handle the event
+ */
+export declare const useWidgetPreviewEvent: (eventName: WidgetPreviewEventName, handler: WidgetPreviewEventHandler) => void;
+/**
+ * Dispatches widget preview related events.
+ * Used to trigger iFrame postMessage events to the parent window or to react on incoming
+ * postMessage events from the parent window.
+ * @param eventName Name of the event to dispatch
+ * @param widgetCode Code of the widget to dispatch the event for
+ * @param payload Optional payload to include with the event
+ */
+export declare const dispatchWidgetPreviewEvent: (eventName: WidgetPreviewEventName, widgetCode: string, payload?: unknown) => void;
+//# sourceMappingURL=events.d.ts.map

package/page/components/Widgets/events.d.ts.map

@@ -0,0 +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"}

package/page/components/Widgets/events.js

@@ -1,26 +1,22 @@
 import { useEffect } from 'react';
 
 /**
- * @typedef {"highlight-widget"|"widget-clicked"|"set-active-widget-id"} WidgetPreviewEventName
+ * Names of the events that are dispatched in the context of widget preview iframe communication.
  */
 
 /**
- * @typedef {Object} WidgetPreviewEventDetail
- * @property {string} widgetCode The code of the widget related to the event.
- * @property {any} [payload] Optional payload data related to the event.
+ * Detail payload of a widget preview event.
  */
 
 /**
- * @callback WidgetPreviewEventHandler
- * @param {CustomEvent<WidgetPreviewEventDetail>} event The custom event dispatched for the widget
- * preview.
+ * Handler for a widget preview event.
  */
 
 /**
  * Hook to listen for widget preview events.
  * These events are dispatched in the context of iFrame communication at the widget preview.
- * @param {WidgetPreviewEventName} eventName Name of the listened event
- * @param {WidgetPreviewEventHandler} handler A callback function to handle the event
+ * @param eventName Name of the listened event
+ * @param handler A callback function to handle the event
  */
 export const useWidgetPreviewEvent = (eventName, handler) => {
   useEffect(() => {
@@ -35,9 +31,9 @@ export const useWidgetPreviewEvent = (eventName, handler) => {
  * Dispatches widget preview related events.
  * Used to trigger iFrame postMessage events to the parent window or to react on incoming
  * postMessage events from the parent window.
- * @param {WidgetPreviewEventName} eventName Name of the event to dispatch
- * @param {string} widgetCode Code of the widget to dispatch the event for
- * @param {Object} [payload] Optional payload to include with the event
+ * @param eventName Name of the event to dispatch
+ * @param widgetCode Code of the widget to dispatch the event for
+ * @param payload Optional payload to include with the event
  */
 export const dispatchWidgetPreviewEvent = (eventName, widgetCode, payload = null) => {
   const event = new CustomEvent(`widget-preview-${eventName}`, {

package/page/components/Widgets/helpers.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Retrieves the scroll container for the current page. Depending on the PWA mode this can be
+ * a scrollable article element or the window.
+ * @returns The scroll container element, or null if it could not be found.
+ */
+export declare const getScrollContainer: () => HTMLElement | null;
+/**
+ * Parameters for {@link checkScheduled}.
+ */
+export interface ScheduledParams {
+    /**
+     * The start date of the scheduling in ISO format.
+     */
+    from?: string;
+    /**
+     * The end date of the scheduling in ISO format.
+     */
+    to?: string;
+    /**
+     * The timezone offset in minutes. If not provided, the local timezone offset will be used.
+     */
+    timezoneOffset?: number;
+}
+/**
+ * The scheduling status of a widget.
+ */
+export interface ScheduledStatus {
+    /**
+     * Indicates if the widget is scheduled.
+     */
+    isScheduled: boolean;
+    /**
+     * Indicates if the widget is currently active within the scheduled time frame.
+     */
+    isActive: boolean;
+    /**
+     * Indicates if the scheduled time frame has expired.
+     */
+    isExpired: boolean;
+}
+/**
+ * Retrieves the scheduling status of a widget based on the provided parameters.
+ * @param params The parameters for the function.
+ * @param params.from The start date of the scheduling in ISO format.
+ * @param params.to The end date of the scheduling in ISO format.
+ * @param params.timezoneOffset The timezone offset in minutes.
+ * @returns An object containing the scheduling status.
+ */
+export declare function checkScheduled({ from, to, timezoneOffset }?: ScheduledParams): ScheduledStatus;
+//# sourceMappingURL=helpers.d.ts.map

package/page/components/Widgets/helpers.d.ts.map

@@ -0,0 +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"}

package/page/components/Widgets/helpers.js

@@ -4,30 +4,25 @@ import { PAGE_PREVIEW_PATTERN } from '@shopgate/engage/page/constants';
 /**
  * Retrieves the scroll container for the current page. Depending on the PWA mode this can be
  * a scrollable article element or the window.
- * @returns {HTMLElement|null}
+ * @returns The scroll container element, or null if it could not be found.
  */
 export const getScrollContainer = () => document.querySelector(`.route__${PAGE_PREVIEW_PATTERN.replace(/^\/+/, '')}`);
 
 /**
- * @typedef {Object} ScheduledParams
- * @property {string} [from] The start date of the scheduling in ISO format.
- * @property {string} [to] The end date of the scheduling in ISO format.
- * @property {number} [timezoneOffset] The timezone offset in minutes. If not provided, the local
- * timezone offset will be used.
+ * Parameters for {@link checkScheduled}.
  */
 
 /**
- * @typedef {Object} ScheduledStatus
- * @property {boolean} isScheduled Indicates if the widget is scheduled.
- * @property {boolean} isActive Indicates if the widget is currently active within the
- * scheduled time frame.
- * @property {boolean} isExpired Indicates if the scheduled time frame has expired.
+ * The scheduling status of a widget.
  */
 
 /**
  * Retrieves the scheduling status of a widget based on the provided parameters.
- * @param {ScheduledParams} [params] The parameters for the function.
- * @returns {ScheduledStatus} An object containing the scheduling status.
+ * @param params The parameters for the function.
+ * @param params.from The start date of the scheduling in ISO format.
+ * @param params.to The end date of the scheduling in ISO format.
+ * @param params.timezoneOffset The timezone offset in minutes.
+ * @returns An object containing the scheduling status.
  */
 export function checkScheduled({
   from,

package/page/components/Widgets/hooks.d.ts

@@ -0,0 +1,13 @@
+import { type WidgetsPreviewContextType } from './WidgetsPreviewContext';
+/**
+ * Hook to handle communication with the parent window in a page preview iframe.
+ * @param isActive Whether the preview communication is active.
+ */
+export declare const usePreviewIframeCommunication: (isActive?: boolean) => void;
+/**
+ * The useWidgetsPreview hook provides access to the context that is wrapped around the Widgets
+ * component when it's rendered in preview mode.
+ * @returns The widget preview context.
+ */
+export declare const useWidgetsPreview: () => WidgetsPreviewContextType;
+//# sourceMappingURL=hooks.d.ts.map

package/page/components/Widgets/hooks.d.ts.map

@@ -0,0 +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"}

package/page/components/Widgets/hooks.js

@@ -10,9 +10,13 @@ import { getScrollContainer } from "./helpers";
 import { WidgetsPreviewContext } from "./WidgetsPreviewContext";
 import { dispatchWidgetPreviewEvent, useWidgetPreviewEvent } from "./events";
 
+/**
+ * Message payload exchanged with the parent window in the page preview iframe.
+ */
+
 /**
  * Hook to handle communication with the parent window in a page preview iframe.
- * @param {boolean} isActive Whether the preview communication is active.
+ * @param isActive Whether the preview communication is active.
  */
 export const usePreviewIframeCommunication = (isActive = false) => {
   const dispatch = useDispatch();
@@ -37,12 +41,15 @@ export const usePreviewIframeCommunication = (isActive = false) => {
       dispatch(receivePageConfigV2({
         type: 'cms',
         slug: PAGE_PREVIEW_SLUG,
-        data: data.payload
+        data: data.payload ?? {}
       }));
     } else if (data.type === 'scrollToWidget' && data.payload?.widgetCode) {
       // Parent window requested to scroll to a specific widget.
+      const {
+        widgetCode
+      } = data.payload;
       const scrollContainer = getScrollContainer();
-      const target = scrollContainer.querySelector(`#widget-code-${data.payload.widgetCode}`);
+      const target = scrollContainer?.querySelector(`#widget-code-${widgetCode}`);
       if (scrollContainer && target) {
         let marginTop = 0;
         if (considerVerticalMargins) {
@@ -56,13 +63,13 @@ export const usePreviewIframeCommunication = (isActive = false) => {
         const actualScrollTop = Math.min(scrollOffset, maxScrollTop);
 
         // Register the target element as the active widget.
-        dispatchWidgetPreviewEvent('set-active-widget-id', data.payload.widgetCode);
+        dispatchWidgetPreviewEvent('set-active-widget-id', widgetCode);
 
         /**
          * Callback to highlight the widget after scrolling.
          */
         const highlightWidget = () => {
-          dispatchWidgetPreviewEvent('highlight-widget', data.payload.widgetCode);
+          dispatchWidgetPreviewEvent('highlight-widget', widgetCode);
         };
 
         // Add listener to onScrollEnd if available, otherwise use scroll event.
@@ -117,14 +124,9 @@ export const usePreviewIframeCommunication = (isActive = false) => {
   });
 };
 
-/**
- * @typedef {import('./WidgetsPreviewContext.js').WidgetsPreviewContextType}
- * WidgetsPreviewContextType
- */
-
 /**
  * The useWidgetsPreview hook provides access to the context that is wrapped around the Widgets
  * component when it's rendered in preview mode.
- * @returns {WidgetsPreviewContextType} The widget context.
+ * @returns The widget preview context.
  */
 export const useWidgetsPreview = () => useContext(WidgetsPreviewContext);

package/page/components/Widgets/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Widgets';
+export { WidgetContext, type WidgetContextType } from './WidgetContext';
+//# sourceMappingURL=index.d.ts.map

package/page/components/Widgets/index.d.ts.map

@@ -0,0 +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"}