@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.8

package/page/components/Widgets/Widget.js

@@ -1,8 +1,59 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Suspense,useCallback}from'react';import PropTypes from'prop-types';import{makeStyles}from'@shopgate/engage/styles';import{VisibilityOffIcon,TimeIcon,Loading}from'@shopgate/engage/components';import{usePressHandler}from'@shopgate/engage/core/hooks';import WidgetProvider from"./WidgetProvider";import{dispatchWidgetPreviewEvent}from"./events";import{useWidgetsPreview}from"./hooks";import Tooltip from"./Tooltip";var useStyles=makeStyles()(function(theme,_ref){var marginTop=_ref.marginTop,marginLeft=_ref.marginLeft;return{root:{position:'relative'},widgetInfo:{zIndex:12,position:'absolute',top:-marginTop+(theme.spacing(0.5)+1),left:-marginLeft+theme.spacing(0.5),fontSize:24,padding:theme.spacing(0.5),display:'flex',gap:theme.spacing(1),background:'#fff',borderRadius:4,border:'1px solid rgba(0, 0, 0, 0.23)',':empty':{display:'none'}},preview:{cursor:'pointer'},visibilityIcon:{color:'#f44336'},scheduledIcon:{color:'#347DD3'},scheduledIconExpired:{color:'#f44336'}};});/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Suspense, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
+import { VisibilityOffIcon, TimeIcon, Loading } from '@shopgate/engage/components';
+import { usePressHandler } from '@shopgate/engage/core/hooks';
+import WidgetProvider from "./WidgetProvider";
+import { dispatchWidgetPreviewEvent } from "./events";
+import { useWidgetsPreview } from "./hooks";
+import Tooltip from "./Tooltip";
+const useStyles = makeStyles()((theme, {
+  marginTop,
+  marginLeft
+}) => ({
+  root: {
+    position: 'relative'
+  },
+  widgetInfo: {
+    zIndex: 12,
+    position: 'absolute',
+    top: -marginTop + (theme.spacing(0.5) + 1),
+    left: -marginLeft + theme.spacing(0.5),
+    fontSize: 24,
+    padding: theme.spacing(0.5),
+    display: 'flex',
+    gap: theme.spacing(1),
+    background: '#fff',
+    borderRadius: 4,
+    border: '1px solid rgba(0, 0, 0, 0.23)',
+    ':empty': {
+      display: 'none'
+    }
+  },
+  preview: {
+    cursor: 'pointer'
+  },
+  visibilityIcon: {
+    color: '#f44336'
+  },
+  scheduledIcon: {
+    color: '#347DD3'
+  },
+  scheduledIconExpired: {
+    color: '#f44336'
+  }
+}));
+
+/**
  * @typedef {import('./types').WidgetDefinition} WidgetDefinition
- */ /**
+ */
+
+/**
  * @typedef {import('./types').ScheduledStatus} ScheduledStatus
- */ /**
+ */
+
+/**
  * The Widget component.
  * @param {Object} props The component props.
  * @param {React.ComponentType} props.component The widget component to render.
@@ -11,7 +62,74 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {boolean} props.isCustomLegacyWidget Whether the widget is a legacy custom widget provided
  * by an extension that's configured via an HTML comment inside a HTML widget.
  * @returns {JSX.Element}
- */var Widget=function Widget(_ref2){var _ref3,_definition$layout,_ref4,_definition$layout2,_ref5,_definition$layout3,_ref6,_definition$layout4,_definition$layout5,_definition$layout6,_definition$layout7,_definition$layout8,_definition$meta,_definition$meta$sche,_definition$meta2,_definition$meta2$sch,_definition$meta3,_definition$meta3$sch,_definition$meta4,_definition$meta4$hid,_definition$meta5,_definition$meta5$hid;var Component=_ref2.component,definition=_ref2.definition,isPreview=_ref2.isPreview,isCustomLegacyWidget=_ref2.isCustomLegacyWidget;var _useStyles=useStyles({marginTop:(_ref3=definition===null||definition===void 0?void 0:(_definition$layout=definition.layout)===null||_definition$layout===void 0?void 0:_definition$layout.marginTop)!==null&&_ref3!==void 0?_ref3:0,marginBottom:(_ref4=definition===null||definition===void 0?void 0:(_definition$layout2=definition.layout)===null||_definition$layout2===void 0?void 0:_definition$layout2.marginBottom)!==null&&_ref4!==void 0?_ref4:0,marginLeft:(_ref5=definition===null||definition===void 0?void 0:(_definition$layout3=definition.layout)===null||_definition$layout3===void 0?void 0:_definition$layout3.marginLeft)!==null&&_ref5!==void 0?_ref5:0,marginRight:(_ref6=definition===null||definition===void 0?void 0:(_definition$layout4=definition.layout)===null||_definition$layout4===void 0?void 0:_definition$layout4.marginRight)!==null&&_ref6!==void 0?_ref6:0}),classes=_useStyles.classes,cx=_useStyles.cx;var _useWidgetsPreview=useWidgetsPreview(),setActiveWidget=_useWidgetsPreview.setActiveWidget,activeWidget=_useWidgetsPreview.activeWidget;// Handle clicks on the widget container in preview mode. Take care that highlighting only happens
-// when the widget is not already active, otherwise it would be confusing when users want to
-// interact with widget elements.
-var handleInteraction=useCallback(function(){setActiveWidget(definition.code,activeWidget!==definition.code);dispatchWidgetPreviewEvent('widget-clicked',definition.code);},[activeWidget,definition.code,setActiveWidget]);var handlers=usePressHandler(handleInteraction);if(!Component){return null;}return React.createElement("section",_extends({id:"widget-code-".concat(definition.code),className:cx(classes.root,_defineProperty({},classes.preview,isPreview)),style:{marginTop:definition===null||definition===void 0?void 0:(_definition$layout5=definition.layout)===null||_definition$layout5===void 0?void 0:_definition$layout5.marginTop,marginBottom:definition===null||definition===void 0?void 0:(_definition$layout6=definition.layout)===null||_definition$layout6===void 0?void 0:_definition$layout6.marginBottom,marginLeft:definition===null||definition===void 0?void 0:(_definition$layout7=definition.layout)===null||_definition$layout7===void 0?void 0:_definition$layout7.marginLeft,marginRight:definition===null||definition===void 0?void 0:(_definition$layout8=definition.layout)===null||_definition$layout8===void 0?void 0:_definition$layout8.marginRight},"data-widget-name":definition.widgetConfigDefinitionCode},isPreview&&_extends({},handlers)),isPreview&&(definition===null||definition===void 0?void 0:definition.meta)&&React.createElement("div",{className:classes.widgetInfo},((_definition$meta=definition.meta)===null||_definition$meta===void 0?void 0:(_definition$meta$sche=_definition$meta.scheduled)===null||_definition$meta$sche===void 0?void 0:_definition$meta$sche.isScheduled)&&React.createElement(Tooltip,{text:(_definition$meta2=definition.meta)===null||_definition$meta2===void 0?void 0:(_definition$meta2$sch=_definition$meta2.scheduled)===null||_definition$meta2$sch===void 0?void 0:_definition$meta2$sch.tooltip},React.createElement(TimeIcon,{className:cx(classes.scheduledIcon,_defineProperty({},classes.scheduledIconExpired,(_definition$meta3=definition.meta)===null||_definition$meta3===void 0?void 0:(_definition$meta3$sch=_definition$meta3.scheduled)===null||_definition$meta3$sch===void 0?void 0:_definition$meta3$sch.isExpired))})),((_definition$meta4=definition.meta)===null||_definition$meta4===void 0?void 0:(_definition$meta4$hid=_definition$meta4.hidden)===null||_definition$meta4$hid===void 0?void 0:_definition$meta4$hid.isHidden)&&React.createElement(Tooltip,{text:(_definition$meta5=definition.meta)===null||_definition$meta5===void 0?void 0:(_definition$meta5$hid=_definition$meta5.hidden)===null||_definition$meta5$hid===void 0?void 0:_definition$meta5$hid.tooltip},React.createElement(VisibilityOffIcon,{className:classes.visibilityIcon}))),React.createElement(WidgetProvider,{definition:definition,isPreview:isPreview},React.createElement(Suspense,{fallback:React.createElement(Loading,null)},React.createElement(Component,isCustomLegacyWidget?{settings:definition.widgetConfig}:{}))));};Widget.defaultProps={isCustomLegacyWidget:false};export default Widget;
+ */
+const Widget = ({
+  component: Component,
+  definition,
+  isPreview,
+  isCustomLegacyWidget
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles({
+    marginTop: definition?.layout?.marginTop ?? 0,
+    marginBottom: definition?.layout?.marginBottom ?? 0,
+    marginLeft: definition?.layout?.marginLeft ?? 0,
+    marginRight: definition?.layout?.marginRight ?? 0
+  });
+  const {
+    setActiveWidget,
+    activeWidget
+  } = useWidgetsPreview();
+
+  // Handle clicks on the widget container in preview mode. Take care that highlighting only happens
+  // when the widget is not already active, otherwise it would be confusing when users want to
+  // interact with widget elements.
+  const handleInteraction = useCallback(() => {
+    setActiveWidget(definition.code, activeWidget !== definition.code);
+    dispatchWidgetPreviewEvent('widget-clicked', definition.code);
+  }, [activeWidget, definition.code, setActiveWidget]);
+  const handlers = usePressHandler(handleInteraction);
+  if (!Component) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("section", _extends({
+    id: `widget-code-${definition.code}`,
+    className: cx(classes.root, {
+      [classes.preview]: isPreview
+    }),
+    style: {
+      marginTop: definition?.layout?.marginTop,
+      marginBottom: definition?.layout?.marginBottom,
+      marginLeft: definition?.layout?.marginLeft,
+      marginRight: definition?.layout?.marginRight
+    },
+    "data-widget-name": definition.widgetConfigDefinitionCode
+  }, isPreview && {
+    ...handlers
+  }), isPreview && definition?.meta && /*#__PURE__*/React.createElement("div", {
+    className: classes.widgetInfo
+  }, definition.meta?.scheduled?.isScheduled && /*#__PURE__*/React.createElement(Tooltip, {
+    text: definition.meta?.scheduled?.tooltip
+  }, /*#__PURE__*/React.createElement(TimeIcon, {
+    className: cx(classes.scheduledIcon, {
+      [classes.scheduledIconExpired]: definition.meta?.scheduled?.isExpired
+    })
+  })), definition.meta?.hidden?.isHidden && /*#__PURE__*/React.createElement(Tooltip, {
+    text: definition.meta?.hidden?.tooltip
+  }, /*#__PURE__*/React.createElement(VisibilityOffIcon, {
+    className: classes.visibilityIcon
+  }))), /*#__PURE__*/React.createElement(WidgetProvider, {
+    definition: definition,
+    isPreview: isPreview
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement(Loading, null)
+  }, /*#__PURE__*/React.createElement(Component, isCustomLegacyWidget ? {
+    settings: definition.widgetConfig
+  } : {}))));
+};
+Widget.defaultProps = {
+  isCustomLegacyWidget: false
+};
+export default Widget;

package/page/components/Widgets/WidgetContext.js

@@ -1,9 +1,16 @@
-import{createContext}from'react';/**
+import { createContext } from 'react';
+
+/**
  * @typedef {import('./Widgets.jsx').WidgetDefinition} WidgetDefinition
- */ /**
+ */
+
+/**
  * @typedef {Object} WidgetContextType
  * @property {WidgetDefinition['code']} code The unique widget code.
  * @property {WidgetDefinition['widgetConfig']} config The widget configuration.
  * @property {WidgetDefinition['layout']} layout The widget layout settings.
  * @property {WidgetDefinition['visibility']} visibility The widget visibility settings.
- */ /** @type {React.Context<WidgetContextType>} */export var WidgetContext=createContext({});
+ */
+
+/** @type {React.Context<WidgetContextType>} */
+export const WidgetContext = /*#__PURE__*/createContext({});

package/page/components/Widgets/WidgetProvider.js

@@ -1,8 +1,43 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import{WidgetContext}from"./WidgetContext";/**  @typedef {import('./WidgetContext').WidgetContextType} WidgetContextType */ /**  @typedef {import('./WidgetContext').WidgetDefinition} WidgetDefinition */ /**
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { WidgetContext } from "./WidgetContext";
+
+/**  @typedef {import('./WidgetContext').WidgetContextType} WidgetContextType */
+/**  @typedef {import('./WidgetContext').WidgetDefinition} WidgetDefinition */
+
+/**
  * The WidgetProvider component provides the context for a single widget.
  * @param {Object} props The component props.
  * @param {WidgetDefinition} props.definition The widget definition data.
  * @param {boolean} props.isPreview Whether the widget is in preview mode.
  * @param {React.ReactNode} props.children The child components to render.
  * @returns {JSX.Element}
- */var WidgetProvider=function WidgetProvider(_ref){var children=_ref.children,definition=_ref.definition,isPreview=_ref.isPreview;/** @type {WidgetContextType} */var value=useMemo(function(){var widgetConfig=definition.widgetConfig,layout=definition.layout,visibility=definition.visibility,code=definition.code,widgetConfigDefinitionCode=definition.widgetConfigDefinitionCode;return{code:code,name:widgetConfigDefinitionCode,config:widgetConfig,layout:layout,visibility:visibility,isPreview:isPreview};},[definition,isPreview]);return React.createElement(WidgetContext.Provider,{value:value},children);};export default WidgetProvider;
+ */
+const WidgetProvider = ({
+  children,
+  definition,
+  isPreview
+}) => {
+  /** @type {WidgetContextType} */
+  const value = useMemo(() => {
+    const {
+      widgetConfig,
+      layout,
+      visibility,
+      code,
+      widgetConfigDefinitionCode
+    } = definition;
+    return {
+      code,
+      name: widgetConfigDefinitionCode,
+      config: widgetConfig,
+      layout,
+      visibility,
+      isPreview
+    };
+  }, [definition, isPreview]);
+  return /*#__PURE__*/React.createElement(WidgetContext.Provider, {
+    value: value
+  }, children);
+};
+export default WidgetProvider;

package/page/components/Widgets/Widgets.js

@@ -1,11 +1,87 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{useMemo,useRef}from'react';import PropTypes from'prop-types';import{makeStyles}from'@shopgate/engage/styles';import{useRoute,useThemeWidgets}from'@shopgate/engage/core/hooks';import{PAGE_PREVIEW_PATTERN}from'@shopgate/engage/page/constants';import{ConditionalWrapper}from'@shopgate/engage/components';import WidgetsPreviewProvider from"./WidgetsPreviewProvider";import Widget from"./Widget";import Overlay from"./Overlay";import{checkScheduled}from"./helpers";import{usePreviewIframeCommunication}from"./hooks";/**
+import React, { useMemo, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
+import { useRoute, useThemeWidgets } from '@shopgate/engage/core/hooks';
+import { PAGE_PREVIEW_PATTERN } from '@shopgate/engage/page/constants';
+import { ConditionalWrapper } from '@shopgate/engage/components';
+import WidgetsPreviewProvider from "./WidgetsPreviewProvider";
+import Widget from "./Widget";
+import Overlay from "./Overlay";
+import { checkScheduled } from "./helpers";
+import { usePreviewIframeCommunication } from "./hooks";
+
+/**
  * @typedef {import('./types').WidgetDefinition} WidgetDefinition
- */var PLACEHOLDER_COMPONENT='@shopgate/widgetsInternal/Placeholder';var useStyles=makeStyles()({preview:{'& *':{scrollbarWidth:'thin'}}});/**
+ */
+
+const PLACEHOLDER_COMPONENT = '@shopgate/widgetsInternal/Placeholder';
+const useStyles = makeStyles()({
+  preview: {
+    '& *': {
+      scrollbarWidth: 'thin'
+    }
+  }
+});
+
+/**
  * 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}
- */var Widgets=function Widgets(_ref){var _ref$widgets=_ref.widgets,widgetsProp=_ref$widgets===void 0?[]:_ref$widgets;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var _useRoute=useRoute(),pattern=_useRoute.pattern;var widgetsRef=useRef(null);var isPreview=pattern===PAGE_PREVIEW_PATTERN;var widgetComponents=useThemeWidgets('v2');usePreviewIframeCommunication(isPreview);// Create sanitized widgets array that only includes widgets with valid components.
-var widgets=useMemo(function(){if(isPreview){// All widgets are allowed in preview mode.
-return widgetsProp;}// Remove widgets that do not have a valid component.
-return widgetsProp.filter(function(widget){return!!widgetComponents[widget.widgetConfigDefinitionCode]&&checkScheduled({from:widget===null||widget===void 0?void 0:widget.visibility.scheduleStartDate,to:widget===null||widget===void 0?void 0:widget.visibility.scheduleEndDate}).isActive;});},[isPreview,widgetComponents,widgetsProp]);if(!Array.isArray(widgets)||widgets.length===0){return null;}return React.createElement(ConditionalWrapper,{condition:isPreview,wrapper:function wrapper(children){return React.createElement(WidgetsPreviewProvider,null,children,React.createElement(Overlay,{containerRef:widgetsRef}));}},React.createElement("div",{className:cx('engage__widgets',_defineProperty({},classes.preview,isPreview)),ref:widgetsRef},widgets.map(function(widget){var component=widgetComponents[widget.widgetConfigDefinitionCode]||widgetComponents[PLACEHOLDER_COMPONENT];return React.createElement(Widget,{key:widget.code,definition:widget,isPreview:isPreview,component:component,isCustomLegacyWidget:widget.isCustomLegacyWidget});})));};Widgets.defaultProps={widgets:null};export default Widgets;
+ */
+const Widgets = ({
+  widgets: widgetsProp = []
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const {
+    pattern
+  } = useRoute();
+  const widgetsRef = useRef(null);
+  const isPreview = pattern === PAGE_PREVIEW_PATTERN;
+  const widgetComponents = useThemeWidgets('v2');
+  usePreviewIframeCommunication(isPreview);
+
+  // Create sanitized widgets array that only includes widgets with valid components.
+  const widgets = useMemo(() => {
+    if (isPreview) {
+      // All widgets are allowed in preview mode.
+      return widgetsProp;
+    }
+
+    // Remove widgets that do not have a valid component.
+    return widgetsProp.filter(widget => !!widgetComponents[widget.widgetConfigDefinitionCode] && checkScheduled({
+      from: widget?.visibility.scheduleStartDate,
+      to: widget?.visibility.scheduleEndDate
+    }).isActive);
+  }, [isPreview, widgetComponents, widgetsProp]);
+  if (!Array.isArray(widgets) || widgets.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ConditionalWrapper, {
+    condition: isPreview,
+    wrapper: children => /*#__PURE__*/React.createElement(WidgetsPreviewProvider, null, children, /*#__PURE__*/React.createElement(Overlay, {
+      containerRef: widgetsRef
+    }))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cx('engage__widgets', {
+      [classes.preview]: isPreview
+    }),
+    ref: widgetsRef
+  }, widgets.map(widget => {
+    const component = widgetComponents[widget.widgetConfigDefinitionCode] || widgetComponents[PLACEHOLDER_COMPONENT];
+    return /*#__PURE__*/React.createElement(Widget, {
+      key: widget.code,
+      definition: widget,
+      isPreview: isPreview,
+      component: component,
+      isCustomLegacyWidget: widget.isCustomLegacyWidget
+    });
+  })));
+};
+Widgets.defaultProps = {
+  widgets: null
+};
+export default Widgets;

package/page/components/Widgets/WidgetsPreviewContext.js

@@ -1,9 +1,19 @@
-import _noop from"lodash/noop";import{createContext}from'react';/**
+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.
- */ /**
+ */
+
+/**
  * @typedef {Object} WidgetsPreviewContextType
  * @property {string} activeWidget The code of the currently active widget.
  * @property {SetActiveWidget} setActiveWidget A function to set the active widget code
- */ /** @type {React.Context<WidgetsPreviewContextType>} */export var WidgetsPreviewContext=createContext({activeWidget:null,setActiveWidget:_noop});
+ */
+
+/** @type {React.Context<WidgetsPreviewContextType>} */
+export const WidgetsPreviewContext = /*#__PURE__*/createContext({
+  activeWidget: null,
+  setActiveWidget: _noop
+});

package/page/components/Widgets/WidgetsPreviewProvider.js

@@ -1,8 +1,35 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useMemo,useState,useCallback}from'react';import PropTypes from'prop-types';import{useWidgetPreviewEvent,dispatchWidgetPreviewEvent}from"./events";import{WidgetsPreviewContext}from"./WidgetsPreviewContext";/**
+import React, { useMemo, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useWidgetPreviewEvent, dispatchWidgetPreviewEvent } from "./events";
+import { WidgetsPreviewContext } from "./WidgetsPreviewContext";
+
+/**
  * 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}
- */var WidgetsPreviewProvider=function WidgetsPreviewProvider(_ref){var children=_ref.children;var _useState=useState(null),_useState2=_slicedToArray(_useState,2),activeWidget=_useState2[0],setActiveWidget=_useState2[1];useWidgetPreviewEvent('set-active-widget-id',function(e){setActiveWidget(e.detail.widgetCode);});var handleSetActiveWidget=useCallback(function(code){var highlight=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;setActiveWidget(code);if(highlight){dispatchWidgetPreviewEvent('highlight-widget',code);}},[]);var value=useMemo(function(){return{activeWidget:activeWidget,setActiveWidget:handleSetActiveWidget};},[activeWidget,handleSetActiveWidget]);return React.createElement(WidgetsPreviewContext.Provider,{value:value},children);};export default WidgetsPreviewProvider;
+ */
+const WidgetsPreviewProvider = ({
+  children
+}) => {
+  const [activeWidget, setActiveWidget] = useState(null);
+  useWidgetPreviewEvent('set-active-widget-id', e => {
+    setActiveWidget(e.detail.widgetCode);
+  });
+  const handleSetActiveWidget = useCallback((code, highlight = false) => {
+    setActiveWidget(code);
+    if (highlight) {
+      dispatchWidgetPreviewEvent('highlight-widget', code);
+    }
+  }, []);
+  const value = useMemo(() => ({
+    activeWidget,
+    setActiveWidget: handleSetActiveWidget
+  }), [activeWidget, handleSetActiveWidget]);
+  return /*#__PURE__*/React.createElement(WidgetsPreviewContext.Provider, {
+    value: value
+  }, children);
+};
+export default WidgetsPreviewProvider;

package/page/components/Widgets/constants.js

@@ -1,4 +1,7 @@
 /**
  * List of allowed origins for cms page preview iFrame communication.
- */export var ALLOWED_PAGE_PREVIEW_ORIGINS=['https://next.admin.shopgatedev.com','https://next.admin.shopgatepg.com','https://next.admin.shopgate.com','https://next.us.admin.shopgate.com','http://localhost:1337'];// Whether to consider vertical margins when calculating the overlay position.
-export var CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT=false;
+ */
+export const ALLOWED_PAGE_PREVIEW_ORIGINS = ['https://next.admin.shopgatedev.com', 'https://next.admin.shopgatepg.com', 'https://next.admin.shopgate.com', 'https://next.us.admin.shopgate.com', 'http://localhost:1337'];
+
+// Whether to consider vertical margins when calculating the overlay position.
+export const CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT = false;

package/page/components/Widgets/events.js

@@ -1,23 +1,50 @@
-import{useEffect}from'react';/**
+import { useEffect } from 'react';
+
+/**
  * @typedef {"highlight-widget"|"widget-clicked"|"set-active-widget-id"} WidgetPreviewEventName
- */ /**
+ */
+
+/**
  * @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.
- */ /**
+ */
+
+/**
  * @callback WidgetPreviewEventHandler
  * @param {CustomEvent<WidgetPreviewEventDetail>} event The custom event dispatched for the widget
  * preview.
- */ /**
+ */
+
+/**
  * 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
- */export var useWidgetPreviewEvent=function useWidgetPreviewEvent(eventName,handler){useEffect(function(){window.addEventListener("widget-preview-".concat(eventName),handler);return function(){window.removeEventListener("widget-preview-".concat(eventName),handler);};},[eventName,handler]);};/**
+ */
+export const useWidgetPreviewEvent = (eventName, handler) => {
+  useEffect(() => {
+    window.addEventListener(`widget-preview-${eventName}`, handler);
+    return () => {
+      window.removeEventListener(`widget-preview-${eventName}`, handler);
+    };
+  }, [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
- */export var dispatchWidgetPreviewEvent=function dispatchWidgetPreviewEvent(eventName,widgetCode){var payload=arguments.length>2&&arguments[2]!==undefined?arguments[2]:null;var event=new CustomEvent("widget-preview-".concat(eventName),{detail:{widgetCode:widgetCode,payload:payload}});window.dispatchEvent(event);};
+ */
+export const dispatchWidgetPreviewEvent = (eventName, widgetCode, payload = null) => {
+  const event = new CustomEvent(`widget-preview-${eventName}`, {
+    detail: {
+      widgetCode,
+      payload
+    }
+  });
+  window.dispatchEvent(event);
+};

package/page/components/Widgets/helpers.js

@@ -1,23 +1,53 @@
-import{PAGE_PREVIEW_PATTERN}from'@shopgate/engage/page/constants';/**
+import "core-js/modules/es.string.replace.js";
+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}
- */export var getScrollContainer=function getScrollContainer(){return document.querySelector(".route__".concat(PAGE_PREVIEW_PATTERN.replace(/^\/+/,'')));};/**
+ */
+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.
- */ /**
+ */
+
+/**
  * @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.
- */ /**
+ */
+
+/**
  * 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.
- */export function checkScheduled(){var _ref=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{},from=_ref.from,to=_ref.to,timezoneOffset=_ref.timezoneOffset;var now=new Date();// Convert current time to provided or local timezone
-var localOffset=timezoneOffset!==null&&timezoneOffset!==void 0?timezoneOffset:-now.getTimezoneOffset();// in minutes
-var offsetMs=localOffset*60*1000;var localNow=new Date(now.getTime()+offsetMs);var fromDate=from?new Date(from):null;var toDate=to?new Date(to):null;var isActive=(!fromDate||localNow>=new Date(fromDate.getTime()+offsetMs))&&(!toDate||localNow<=new Date(toDate.getTime()+offsetMs));var isExpired=!!toDate&&localNow>new Date(toDate.getTime()+offsetMs);var isScheduled=!!fromDate||!!toDate;return{isScheduled:isScheduled,isActive:isActive,isExpired:isExpired};}
+ */
+export function checkScheduled({
+  from,
+  to,
+  timezoneOffset
+} = {}) {
+  const now = new Date();
+
+  // Convert current time to provided or local timezone
+  const localOffset = timezoneOffset ?? -now.getTimezoneOffset(); // in minutes
+  const offsetMs = localOffset * 60 * 1000;
+  const localNow = new Date(now.getTime() + offsetMs);
+  const fromDate = from ? new Date(from) : null;
+  const toDate = to ? new Date(to) : null;
+  const isActive = (!fromDate || localNow >= new Date(fromDate.getTime() + offsetMs)) && (!toDate || localNow <= new Date(toDate.getTime() + offsetMs));
+  const isExpired = !!toDate && localNow > new Date(toDate.getTime() + offsetMs);
+  const isScheduled = !!fromDate || !!toDate;
+  return {
+    isScheduled,
+    isActive,
+    isExpired
+  };
+}