@shopgate/engage 7.28.0-beta.6 → 7.29.0-alpha.2

package/page/components/Widgets/Overlay.js

@@ -0,0 +1,51 @@
+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;}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);}import React,{useState,useRef,useEffect,useCallback}from'react';import PropTypes from'prop-types';import{makeStyles,keyframes,colorToRgba}from'@shopgate/engage/styles';import{useRoute}from'@shopgate/engage/core/hooks';import{getScrollContainer}from"./helpers";import{useWidgetPreviewEvent}from"./events";import{useWidgetsPreview}from"./hooks";/**
+ * @typedef {Object} OverlayStyle
+ * @property {number} top Style for the top position of the overlay.
+ * @property {number} left Style for the left position of the overlay.
+ * @property {number} width Style for the width of the overlay.
+ * @property {number} height Style for the height of the overlay.
+ */ /**
+ * @typedef {Object} MarginOverlayStyles
+ * @property {OverlayStyle} top Style for the top margin overlay.
+ * @property {OverlayStyle} left Style for the left margin overlay.
+ * @property {OverlayStyle} bottom Style for the bottom margin overlay.
+ * @property {OverlayStyle} right Style for the right margin overlay.
+ */var useStyles=makeStyles({name:'WidgetPreviewOverlay'})(function(_,_ref){var highlightColor=_ref.highlightColor,overlayBorderColor=_ref.overlayBorderColor,marginOverlayColor=_ref.marginOverlayColor,isFlashing=_ref.isFlashing;return{root:{},mainOverlay:_extends({position:'absolute',pointerEvents:'none',zIndex:10,boxShadow:'0 0 8px 2px rgba(34, 42, 69, 0.07)',outline:"1px solid ".concat(overlayBorderColor||'#50A9AD')},isFlashing&&{animationName:keyframes({'0%':{backgroundColor:'transparent'},'50%':{backgroundColor:colorToRgba(highlightColor||'#50A9AD',0.5)},'100%':{backgroundColor:'transparent'}}),animationDuration:'0.5s',animationTimingFunction:'ease-in-out',animationFillMode:'forwards'}),marginOverlay:{position:'absolute',backgroundColor:colorToRgba(marginOverlayColor||'#50A9AD',0.1),pointerEvents:'none',zIndex:9}};});/**
+ * The Overlay component is used to highlight the active widget when preview mode is active.
+ * It also visualizes the margins of the widget and the borders to its sibling widgets.
+ * @param {Object} props The component props.
+ * @param {React.Ref<HTMLDivElement>} props.containerRef The reference to the container element that
+ * holds the widgets.
+ * @returns {JSX.Element|null}
+ */var Overlay=function Overlay(_ref2){var containerRef=_ref2.containerRef;var _useRoute=useRoute(),_useRoute$query=_useRoute.query,highlightColor=_useRoute$query.highlightColor,overlayBorderColor=_useRoute$query.overlayBorderColor,marginOverlayColor=_useRoute$query.marginOverlayColor;var _useWidgetsPreview=useWidgetsPreview(),activeWidget=_useWidgetsPreview.activeWidget;/**
+   * State to hold the style for the main overlay that highlights the active widget.
+   * @type {[OverlayStyle|null, React.Dispatch<React.SetStateAction<OverlayStyle|null>>]}
+   */var _useState=useState(null),_useState2=_slicedToArray(_useState,2),mainOverlayStyle=_useState2[0],setMainOverlayStyle=_useState2[1];/**
+   * State to hold the styles for the margin overlays that visualize the widget margins.
+   * @type {[MarginOverlayStyles|null,
+   * React.Dispatch<React.SetStateAction<MarginOverlayStyles|null>>]}
+   */var _useState3=useState(null),_useState4=_slicedToArray(_useState3,2),marginOverlays=_useState4[0],setMarginOverlays=_useState4[1];var _useState5=useState(false),_useState6=_slicedToArray(_useState5,2),isFlashing=_useState6[0],setIsFlashing=_useState6[1];var _useStyles=useStyles({highlightColor:highlightColor,overlayBorderColor:overlayBorderColor,marginOverlayColor:marginOverlayColor,isFlashing:isFlashing}),classes=_useStyles.classes;/**
+   * @type {import('react').MutableRefObject<ResizeObserver|null>}
+   */var resizeRef=useRef(null);/**
+   * @type {import('react').MutableRefObject<MutationObserver|null>}
+   */var mutationRef=useRef(null);/**
+   * Callback to update the overlay position, margin overlays and size based on the active widget.
+   */var updateOverlay=useCallback(function(){if(!containerRef.current||!activeWidget){return;}var target=containerRef.current.querySelector("#widget-code-".concat(activeWidget));if(!target){setMainOverlayStyle(null);return;}var scrollContainer=getScrollContainer();// Get the computed styles of the active widget to calculate margins
+var styles=window.getComputedStyle(target);var marginLeft=parseFloat(styles.marginLeft);var marginRight=parseFloat(styles.marginRight);var marginTop=parseFloat(styles.marginTop);var marginBottom=parseFloat(styles.marginBottom);// Get bounding rectangles for the target widget and the scroll container
+var elementRect=target.getBoundingClientRect();var containerRect=scrollContainer.getBoundingClientRect();var baseTop=elementRect.top-containerRect.top+scrollContainer.scrollTop;var baseLeft=elementRect.left-containerRect.left+scrollContainer.scrollLeft;var top=baseTop;var left=baseLeft-marginLeft;var width=target.offsetWidth+marginLeft+marginRight;var height=target.offsetHeight;// Keep a backdoor to re-enable overlay outline inside the widget margins
+var mainOverlayBordersOnMarginEdges=true;var mainTop=baseTop-(mainOverlayBordersOnMarginEdges?marginTop:0);var mainHeight=height+(mainOverlayBordersOnMarginEdges?marginTop+marginBottom:0);setMainOverlayStyle({top:mainTop+1,left:left,width:width,height:mainHeight-2});setMarginOverlays({top:{top:top-marginTop,left:left,width:width,height:marginTop},bottom:{top:top+height,left:left,width:width,height:marginBottom},left:{top:top,left:left,width:marginLeft,height:height},right:{top:top,left:left+width-marginRight,width:marginRight,height:height}});},[activeWidget,containerRef]);// Effect to setup observers that watch for changes in the container and its children.
+// Needed to update the overlay style when the layout changes.
+useEffect(function(){var containerEl=containerRef.current;if(!containerEl)return undefined;// Create a ResizeObserver to watch for size changes of children
+resizeRef.current=new ResizeObserver(function(){// Whenever any observed child resizes, update overlay
+updateOverlay();});// Observe all existing children
+Array.from(containerEl.children).forEach(function(child){if(child.nodeType===Node.ELEMENT_NODE){resizeRef.current.observe(child);}});// Create one MutationObserver on the container to watch for changes in the DOM
+mutationRef.current=new MutationObserver(function(mutations){// eslint-disable-next-line no-restricted-syntax
+var _iteratorNormalCompletion=true;var _didIteratorError=false;var _iteratorError=undefined;try{for(var _iterator=mutations[Symbol.iterator](),_step;!(_iteratorNormalCompletion=(_step=_iterator.next()).done);_iteratorNormalCompletion=true){var mutation=_step.value;if(mutation.type==='childList'){// Handle newly added nodes - observe them for size changes
+mutation.addedNodes.forEach(function(node){if(node.nodeType===Node.ELEMENT_NODE){resizeRef.current.observe(node);}});// Handle removed nodes - remove them from observation
+mutation.removedNodes.forEach(function(node){if(node.nodeType===Node.ELEMENT_NODE){resizeRef.current.unobserve(node);}});// If children were added/removed, recalculate overlay position
+updateOverlay();}else if(mutation.type==='attributes'&&(mutation.attributeName==='class'||mutation.attributeName==='style')){// Update overlay if the class or style of a child changes
+if(mutation.target.parentElement===containerEl){updateOverlay();}}}}catch(err){_didIteratorError=true;_iteratorError=err;}finally{try{if(!_iteratorNormalCompletion&&_iterator["return"]!=null){_iterator["return"]();}}finally{if(_didIteratorError){throw _iteratorError;}}}});// Start observing:
+// - childList:true → to catch added/removed children
+// - subtree:true + attributes:true → to catch any class/style changes in descendants
+mutationRef.current.observe(containerEl,{childList:true,subtree:true,attributes:true,attributeFilter:['class','style']});// Cleanup on unmount or if updateOverlay changes:
+return function(){if(resizeRef.current){resizeRef.current.disconnect();resizeRef.current=null;}if(mutationRef.current){mutationRef.current.disconnect();mutationRef.current=null;}};},[containerRef,updateOverlay]);useWidgetPreviewEvent('highlight-widget',function(){setIsFlashing(true);});var handleAnimationEnd=useCallback(function(){setIsFlashing(false);},[]);if(!mainOverlayStyle)return null;return React.createElement("div",{className:classes.root},React.createElement("div",{className:classes.mainOverlay,style:mainOverlayStyle,onAnimationEnd:handleAnimationEnd}),marginOverlays&&Object.entries(marginOverlays).map(function(_ref3){var _ref4=_slicedToArray(_ref3,2),key=_ref4[0],overlayStyle=_ref4[1];return React.createElement("div",{key:key,className:classes.marginOverlay,style:overlayStyle});}));};export default Overlay;

package/page/components/Widgets/Tooltip.js

@@ -0,0 +1,22 @@
+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 _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,{useState,useRef,useEffect}from'react';import ReactDOM from'react-dom';import PropTypes from'prop-types';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()(function(){return{wrapper:{display:'inline-block',position:'relative',cursor:'help'},tooltipBox:{position:'absolute',padding:'6px 10px',backgroundColor:'rgba(0, 0, 0, 0.87)',color:'#fff',fontSize:'0.875rem',fontWeight:400,borderRadius:'4px',whiteSpace:'normal',// allow multiline
+wordBreak:'break-word',maxWidth:'200px',zIndex:1000,pointerEvents:'none',opacity:0,transform:'scale(0.9)',transition:'opacity 0.1s ease-in-out, transform 0.1s ease-in-out','&[data-visible="true"]':{opacity:1,transform:'scale(1)'}},arrowTop:{'&::before':{content:"''",position:'absolute',bottom:'-6px',left:'var(--arrow-left, 50%)',transform:'translateX(-50%)',borderWidth:'6px 6px 0 6px',borderStyle:'solid',borderColor:'rgba(0, 0, 0, 0.87) transparent transparent transparent'}},arrowBottom:{'&::before':{content:"''",position:'absolute',top:'-6px',left:'var(--arrow-left, 50%)',transform:'translateX(-50%) rotate(180deg)',borderWidth:'6px 6px 0 6px',borderStyle:'solid',borderColor:'rgba(0, 0, 0, 0.87) transparent transparent transparent'}}};});/**
+ * AI generated Tooltip component to display additional information on hover.
+ * @param {Object} props The component props.
+ * @param {React.ReactNode} props.children The child elements to wrap.
+ * @param {string} props.text The tooltip text to display.
+ * @returns {JSX.Element}
+ */function Tooltip(_ref){var children=_ref.children,text=_ref.text;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var wrapperRef=useRef(null);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),visible=_useState2[0],setVisible=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),mounted=_useState4[0],setMounted=_useState4[1];var _useState5=useState(false),_useState6=_slicedToArray(_useState5,2),animate=_useState6[0],setAnimate=_useState6[1];var _useState7=useState({left:0,top:0}),_useState8=_slicedToArray(_useState7,2),coords=_useState8[0],setCoords=_useState8[1];var _useState9=useState(null),_useState10=_slicedToArray(_useState9,2),arrowLeft=_useState10[0],setArrowLeft=_useState10[1];var _useState11=useState('top'),_useState12=_slicedToArray(_useState11,2),positionState=_useState12[0],setPositionState=_useState12[1];// 'top' or 'bottom'
+var tooltipId=useRef(Math.random().toString(36).slice(2,11));// Handle mounting/unmounting and trigger fade animation
+useEffect(function(){var timeoutId;if(visible){setMounted(true);// allow DOM to insert before starting the fade-in
+timeoutId=setTimeout(function(){return setAnimate(true);},10);}else{setAnimate(false);// after fade-out duration, unmount
+timeoutId=setTimeout(function(){return setMounted(false);},200);}return function(){return clearTimeout(timeoutId);};},[visible]);// Compute position, flipping if needed, when mounted
+useEffect(function(){if(!mounted||!wrapperRef.current)return;var wrapperRect=wrapperRef.current.getBoundingClientRect();var selector=".tooltip-box[data-tooltip-id=\"".concat(tooltipId.current,"\"]");var tooltipEl=document.querySelector(selector);if(!tooltipEl)return;var ttRect=tooltipEl.getBoundingClientRect();var margin=8;var vw=window.innerWidth;var vh=window.innerHeight;// 1) Try "top" placement
+var left=wrapperRect.left+wrapperRect.width/2-ttRect.width/2;var top=wrapperRect.top-ttRect.height-8;// Clamp horizontal even before deciding flip, to calculate arrow offset
+if(left<margin){left=margin;}else if(left+ttRect.width>vw-margin){left=vw-ttRect.width-margin;}// If top would be too high (tooltip clipped), switch to "bottom"
+var finalPosition='top';if(top<margin){// try bottom
+var bottomTop=wrapperRect.bottom+8;if(bottomTop+ttRect.height<=vh-margin){finalPosition='bottom';top=bottomTop;}else{// can't fit fully in bottom either; clamp top to margin
+top=margin;}}// If using "top", ensure vertical clamp if it goes off bottom
+if(finalPosition==='top'){if(top+ttRect.height>vh-margin){top=vh-ttRect.height-margin;}}// If using "bottom", clamp bottom if it would go off bottom
+if(finalPosition==='bottom'){if(top+ttRect.height>vh-margin){top=vh-ttRect.height-margin;}}// 2) Compute arrow offset so it points to wrapper’s center X
+var wrapperCenterX=wrapperRect.left+wrapperRect.width/2;var computedArrowLeft=wrapperCenterX-left;// Clamp arrow within [6px, ttRect.width - 6px]
+var minArrow=6;var maxArrow=ttRect.width-6;if(computedArrowLeft<minArrow){computedArrowLeft=minArrow;}else if(computedArrowLeft>maxArrow){computedArrowLeft=maxArrow;}setPositionState(finalPosition);setCoords({left:left,top:top});setArrowLeft(computedArrowLeft);},[mounted]);if(!text){return children;}var portalStyle=_extends({left:"".concat(coords.left,"px"),top:"".concat(coords.top,"px")},arrowLeft!==null?{'--arrow-left':"".concat(arrowLeft,"px")}:{});var arrowClass=positionState==='top'?classes.arrowTop:classes.arrowBottom;return React.createElement("span",{className:classes.wrapper,ref:wrapperRef,"data-tooltip-id":tooltipId.current,onMouseEnter:function onMouseEnter(){return setVisible(true);},onMouseLeave:function onMouseLeave(){return setVisible(false);}},children,mounted&&ReactDOM.createPortal(React.createElement("div",{className:cx(classes.tooltipBox,arrowClass,'tooltip-box'),style:portalStyle,"data-visible":animate?'true':'false',"data-tooltip-id":tooltipId.current,dangerouslySetInnerHTML:{__html:text}}),document.body));}Tooltip.defaultProps={text:null};export default Tooltip;

package/page/components/Widgets/Widget.js

@@ -0,0 +1,17 @@
+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'}};});/**
+ * @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.
+ * @param {WidgetDefinition} props.definition The widget definition data.
+ * @param {boolean} props.isPreview Whether the widget is in preview mode.
+ * @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);if(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;

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

@@ -0,0 +1,42 @@
+import { type Context } from 'react';
+import {
+  type WidgetDefinitionLayout,
+  type WidgetDefinitionVisibility,
+  type WidgetDefinition,
+} from './types'
+
+export { WidgetDefinition } from './types';
+
+export interface WidgetContextType<C = Record<string, any>> {
+  /**
+   * The unique code of the widget instance
+   */
+  code: string;
+  /**
+   * The name of the widget
+   */
+  name: string;
+  /**
+   * The widget configuration
+   */
+  config: C;
+  /**
+   * The widget layout settings
+   */
+  layout: WidgetDefinitionLayout;
+  /**
+   * The widget visibility settings
+   */
+  visibility: WidgetDefinitionVisibility;
+  /**
+   * Whether the widget is rendered in preview mode
+   */
+  isPreview: boolean;
+}
+
+/**
+ * React context for widgets.
+ */
+declare const WidgetContext: Context<WidgetContextType>;
+
+export default WidgetContext;

package/page/components/Widgets/WidgetContext.js

@@ -0,0 +1,9 @@
+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({});

package/page/components/Widgets/WidgetProvider.js

@@ -0,0 +1,8 @@
+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;

package/page/components/Widgets/Widgets.js

@@ -0,0 +1,11 @@
+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{usePreviewIframeCommunication}from"./hooks";/**
+ * @typedef {import('./types').WidgetDefinition} WidgetDefinition
+ */var PLACEHOLDER_COMPONENT='@shopgate/widgetsInternal/Placeholder';var 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];});},[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;

package/page/components/Widgets/WidgetsPreviewContext.js

@@ -0,0 +1,9 @@
+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});

package/page/components/Widgets/WidgetsPreviewProvider.js

@@ -0,0 +1,8 @@
+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";/**
+ * 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;

package/page/components/Widgets/constants.js

@@ -0,0 +1,4 @@
+/**
+ * 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;

package/page/components/Widgets/events.js

@@ -0,0 +1,23 @@
+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]);};/**
+ * 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);};

package/page/components/Widgets/helpers.js

@@ -0,0 +1,23 @@
+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(/^\/+/,'')));};/**
+ * @typedef {Object} ScheduledParams
+ * @param {string} [from] The start date of the scheduling in ISO format.
+ * @param {string} [to] The end date of the scheduling in ISO format.
+ * @param {number} [timezoneOffset] The timezone offset in minutes. If not provided, the local
+ * timezone offset will be used.
+ */ /**
+ * @typedef {Object} ScheduledStatus
+ * @param {boolean} isScheduled Indicates if the widget is scheduled.
+ * @param {boolean} isActive Indicates if the widget is currently active within the
+ * scheduled time frame.
+ * @param {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};}

package/page/components/Widgets/hooks.js

@@ -0,0 +1,69 @@
+import{useEffect,useCallback,useRef,useContext,useMemo}from'react';import{logger}from'@shopgate/engage/core/helpers';import{useDispatch}from'react-redux';import{useRoute}from'@shopgate/engage/core/hooks';import{receivePageConfigV2}from'@shopgate/engage/page/action-creators';import{PAGE_PREVIEW_SLUG}from'@shopgate/engage/page/constants';import{ALLOWED_PAGE_PREVIEW_ORIGINS,CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT}from"./constants";import{getScrollContainer}from"./helpers";import{WidgetsPreviewContext}from"./WidgetsPreviewContext";import{dispatchWidgetPreviewEvent,useWidgetPreviewEvent}from"./events";/**
+ * @typedef {Object} MessageData
+ * @property {string} type Identifier for the kind of message
+ * @property {any} [payload] Optional data payload for this message
+ */ /**
+ * @typedef {Object} IframeMessengerResult
+ * @property {function(MessageData, string=): void} sendToParent
+ *   - Send data up to window.parent. If targetOrigin is omitted, uses the
+ *     most recently seen origin (from an incoming message). If none seen yet,
+ *     falls back to parentOrigins[0] or "*".
+ */ /**
+ * Hook for postMessage communication when your component is inside an iframe.
+ *
+ * Listens on window for "message" events from any origin in parentOrigins,
+ * and only calls onMessage(data, rawEvent) if both origin and source match.
+ *
+ * @param {function(MessageData, any): void} onMessage
+ *   Callback invoked when a trusted message arrives. Receives data and the
+ *   raw event (so you can inspect origin, source, etc.).
+ * @param {string[]} parentOrigins
+ *   Array of allowed parent origin strings (e.g.
+ *   ['https://a.example.com','https://b.example.com']).
+ * @returns {IframeMessengerResult}
+ *   An object with a single method:
+ *   • sendToParent(data, [targetOrigin]): void
+ *     – Posts data up to window.parent. By default it uses the most recently
+ *       seen origin (from an incoming message). If none, uses parentOrigins[0].
+ */function useIframeMessenger(onMessage,parentOrigins){// Keep a ref to the latest onMessage callback so the listener always has it.
+var onMessageRef=useRef(onMessage);useEffect(function(){onMessageRef.current=onMessage;},[onMessage]);// Keep track of the last allowed origin we heard from
+var lastOriginRef=useRef(null);/**
+   * Send a message up to the parent window.
+   * @param {MessageData} data       - The data object to post.
+   * @param {string}      [targetOrigin]
+   *   Optional override for the origin to post to. Must be one of
+   *   parentOrigins. If omitted, uses the last seen origin (lastOriginRef),
+   *   or parentOrigins[0], or "*" if array is empty.
+   */var sendToParent=useCallback(function(data,targetOrigin){// Determine which origin to use: explicit, then last seen, then first, then "*".
+var originToUse=typeof targetOrigin==='string'?targetOrigin:lastOriginRef.current||new URL(document.referrer).origin||parentOrigins[0]||'*';if(!originToUse){logger.warn('useIframeMessenger: no targetOrigin available. '+'Provide parentOrigins or pass targetOrigin.');return;}window.parent.postMessage(data,originToUse);},[parentOrigins]);// Attach / detach the "message" listener.
+useEffect(function(){/**
+     * Handler for incoming postMessage events.
+     * @param {any} rawEvent  – The original MessageEvent object.
+     */function handler(rawEvent){// Only proceed if the origin is in our whitelist.
+if(!parentOrigins.includes(rawEvent.origin))return;// Ensure the message actually came from window.parent.
+if(rawEvent.source!==window.parent)return;// Record this origin as most recently seen.
+lastOriginRef.current=rawEvent.origin;// Forward the event.data and the raw event to the callback.
+onMessageRef.current(rawEvent.data,rawEvent);}window.addEventListener('message',handler);return function(){window.removeEventListener('message',handler);};},[parentOrigins,sendToParent]);return{sendToParent:sendToParent};}/**
+ * Hook to handle communication with the parent window in a page preview iframe.
+ * @param {boolean} isActive Whether the preview communication is active.
+ */export var usePreviewIframeCommunication=function usePreviewIframeCommunication(){var isActive=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;var dispatch=useDispatch();var _useRoute=useRoute(),considerContainerMarginsOnScroll=_useRoute.query.considerContainerMarginsOnScroll;// Detect if container margins should be considered at scroll to widget.
+var considerVerticalMargins=useMemo(function(){if(!considerContainerMarginsOnScroll){return CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT;}return considerContainerMarginsOnScroll==='true';},[considerContainerMarginsOnScroll]);var _useIframeMessenger=useIframeMessenger(function(data){var _data$payload;if(data.type==='receivePageConfig'){// Page preview config received from the parent window.
+dispatch(receivePageConfigV2({type:'cms',slug:PAGE_PREVIEW_SLUG,data:data.payload}));}else if(data.type==='scrollToWidget'&&((_data$payload=data.payload)===null||_data$payload===void 0?void 0:_data$payload.widgetCode)){// Parent window requested to scroll to a specific widget.
+var scrollContainer=getScrollContainer();var target=scrollContainer.querySelector("#widget-code-".concat(data.payload.widgetCode));if(scrollContainer&&target){var marginTop=0;if(considerVerticalMargins){var styles=window.getComputedStyle(target);marginTop=parseFloat(styles.marginTop);}var containerTop=scrollContainer.getBoundingClientRect().top;var targetTop=target.getBoundingClientRect().top;var scrollOffset=targetTop-containerTop+scrollContainer.scrollTop-marginTop;var maxScrollTop=scrollContainer.scrollHeight-scrollContainer.clientHeight;var actualScrollTop=Math.min(scrollOffset,maxScrollTop);// Register the target element as the active widget.
+dispatchWidgetPreviewEvent('set-active-widget-id',data.payload.widgetCode);/**
+         * Callback to highlight the widget after scrolling.
+         */var highlightWidget=function highlightWidget(){dispatchWidgetPreviewEvent('highlight-widget',data.payload.widgetCode);};// Add listener to onScrollEnd if available, otherwise use scroll event.
+if('onscrollend'in scrollContainer){/**
+           * Callback for the scrollend event.
+           */var onEnded=function onEnded(){scrollContainer.removeEventListener('scrollend',onEnded);highlightWidget();};scrollContainer.addEventListener('scrollend',onEnded,{once:true});scrollContainer.scrollTo({top:actualScrollTop,behavior:'smooth'});return;}// Fallback: listen for scroll events until scrollTop ≈ actualScrollTop
+/**
+         * Callback for the scroll event.
+         */var onScroll=function onScroll(){// Allow a 1 px leeway for subpixel rendering
+if(Math.abs(scrollContainer.scrollTop-actualScrollTop)<1){scrollContainer.removeEventListener('scroll',onScroll);highlightWidget();}};scrollContainer.addEventListener('scroll',onScroll);scrollContainer.scrollTo({top:actualScrollTop,behavior:'smooth'});}}},ALLOWED_PAGE_PREVIEW_ORIGINS),sendToParent=_useIframeMessenger.sendToParent;useWidgetPreviewEvent('widget-clicked',function(e){if(!isActive){return;}sendToParent({type:'widgetClicked',payload:{widgetCode:e.detail.widgetCode}});});};/**
+ * @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.
+ */export var useWidgetsPreview=function useWidgetsPreview(){return useContext(WidgetsPreviewContext);};

package/page/components/Widgets/index.js

@@ -0,0 +1 @@
+export{default}from"./Widgets";export{WidgetContext}from"./WidgetContext";

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

@@ -0,0 +1,132 @@
+/**
+ * Visibility settings for a widget.
+ */
+export interface WidgetDefinitionVisibility {
+  /**
+   * Whether the widget is hidden.
+   */
+  isHidden: boolean;
+  /**
+   * Start date for scheduled widgets.
+   */
+  scheduleStartDate: string;
+  /**
+   * End date for scheduled widgets.
+   */
+  scheduleEndDate: string
+}
+
+/**
+ * Layout settings for a widget.
+ */
+export interface WidgetDefinitionLayout {
+  /**
+   * Top margin for the widget.
+   */
+  marginTop: number;
+  /**
+   * Bottom margin for the widget.
+   */
+  marginBottom: number;
+  /**
+   * Left margin for the widget.
+   */
+  marginLeft: number;
+  /**
+   * Right margin for the widget.
+   */
+  marginRight: number;
+}
+
+/**
+ * Definition of a API widget
+ */
+export interface WidgetDefinition {
+  /**
+   * Unique code for the widget.
+   */
+  code: string;
+  /**
+   * Name of the widget
+   */
+  widgetConfigDefinitionCode: string;
+  /**
+   * Individual configuration for the widget.
+   */
+  widgetConfig: Record<string, any>;
+  /**
+   * Whether the widget is a legacy custom widget provided by an extension that's configured
+   * via an HTML comment inside a HTML widget.
+   */
+  isCustomLegacyWidget?: boolean;
+  /**
+   * Visibility settings for the widget.
+   */
+  visibility: WidgetDefinitionVisibility;
+  /**
+   * Layout settings for the widget.
+   */
+  layout: WidgetDefinitionLayout;
+  /**
+   * Optional metadata for the widget (only available in preview mode)
+   */
+  meta?: {
+    /**
+     * Hidden state related data
+     */
+    hidden: {
+      /**
+       * Whether the widget is hidden.
+       */
+      isHidden: boolean;
+      /**
+       * Tooltip text for hidden related UI elements.
+       */
+      tooltip: string;
+      /**
+       * Label text for hidden related UI elements.
+       */
+      label: string;
+    };
+    /**
+     * Scheduled state related data
+     */
+    scheduled: {
+      /**
+       * Indicates if the widget is scheduled.
+       */
+      isScheduled: boolean;
+      /**
+       * Indicates that the widget schedule time frame is currently active.
+       */
+      isActive: boolean;
+      /**
+       * Indicates if the scheduled time frame has expired
+       */
+      isExpired: boolean;
+      /**
+       * Tooltip text for schedule related UI elements.
+       */
+      tooltip: string;
+      /**
+       * Label text for schedule related UI elements.
+       */
+      label: string;
+    };
+  }
+}
+
+export interface ScheduledStatus {
+  /**
+   * Indicates if the widget is scheduled.
+   */
+  isScheduled: boolean;
+  /**
+   * Indicates if the widget is currently hidden based on the scheduling
+   */
+  isHidden: boolean;
+  /**
+   * Indicates if the scheduled time frame has expired.
+   */
+  isExpired: boolean;
+}

package/page/components/index.js

@@ -1 +1 @@
-export{default as NotFound}from"./NotFound";
+export{default as NotFound}from"./NotFound";export{default as Widgets}from"./Widgets";

package/page/constants/actionTypes.js

@@ -0,0 +1 @@
+export var REQUEST_PAGE_CONFIG_V2='REQUEST_PAGE_CONFIG_V2';export var RECEIVE_PAGE_CONFIG_V2='RECEIVE_PAGE_CONFIG_V2';export var ERROR_PAGE_CONFIG_V2='ERROR_PAGE_CONFIG_V2';

package/page/constants/index.js

@@ -1 +1,5 @@
-import{PAGE_PATH,PAGE_PATTERN}from'@shopgate/pwa-common/constants/RoutePaths';export*from'@shopgate/pwa-common/constants/PageIDs';export{PAGE_PATH,PAGE_PATTERN};export var IMPRINT_PATH="".concat(PAGE_PATH,"/imprint");export var PAYMENT_PATH="".concat(PAGE_PATH,"/payment");export var PRIVACY_PATH="".concat(PAGE_PATH,"/privacy");export var RETURN_POLICY_PATH="".concat(PAGE_PATH,"/return_policy");export var SHIPPING_PATH="".concat(PAGE_PATH,"/shipping");export var TERMS_PATH="".concat(PAGE_PATH,"/terms");
+import{PAGE_PATH,PAGE_PATTERN}from'@shopgate/pwa-common/constants/RoutePaths';export*from'@shopgate/pwa-common/constants/PageIDs';export{PAGE_PATH,PAGE_PATTERN};export*from"./actionTypes";export var IMPRINT_PATH="".concat(PAGE_PATH,"/imprint");export var PAYMENT_PATH="".concat(PAGE_PATH,"/payment");export var PRIVACY_PATH="".concat(PAGE_PATH,"/privacy");export var RETURN_POLICY_PATH="".concat(PAGE_PATH,"/return_policy");export var SHIPPING_PATH="".concat(PAGE_PATH,"/shipping");export var TERMS_PATH="".concat(PAGE_PATH,"/terms");export var PAGE_PREVIEW_PATTERN='/shopgate-internal-page-preview';export var PAGE_PREVIEW_SLUG='page_preview';/**
+ * Checks if the app is currently in page preview mode.
+ */export var IS_PAGE_PREVIEW_ACTIVE=window.location.pathname.startsWith(PAGE_PREVIEW_PATTERN);/**
+ * One hour in milliseconds
+ */export var PAGE_STATE_LIFETIME=3600000;

package/page/helpers/index.d.ts

@@ -0,0 +1,47 @@
+export type ProductsWidgetInputConfig = {
+  /**
+   * Source type for the product list
+   */
+  productSelectorType: 'searchTerm' | 'brand' | 'category' | 'manualItemNumbers' | 'productSelector';
+  /**
+   * A search term to filter products by
+   */
+  productsSearchTerm: string;
+  /**
+   * A brand to filter products by
+   */
+  productsBrand: string;
+  /**
+   * A category to filter products by
+   */
+  productsCategory: string;
+  /**
+   * Array of product item numbers (selected via manual input)
+   */
+  productsManualItemNumbers: string[];
+  /**
+   * Array of product item numbers (selected via product selector)
+   */
+  productsSelectorItemNumbers: string[];
+}
+
+export type GetProductSearchParamsFromProductsInputConfigReturnValue = {
+  /**
+   * The type of product search to perform.
+   */
+  productsSearchType: 'searchTerm' | 'brand' | 'category' | 'productIds';
+  /**
+   * The value to use for the product search. Can be a string or an array of strings (for product IDs).
+   */
+  productsSearchValue: string | string[];
+}
+
+/**
+ * Helper to extract relevant search parameters from the widget configuration of the "Products"
+ * input.
+ *
+ * The return value can be used to e.g. parametrize the useWidgetProducts hook.
+ */
+export declare function getProductSearchParamsFromProductsInputConfig(
+  products: ProductsWidgetInputConfig
+): GetProductSearchParamsFromProductsInputConfigReturnValue;

package/page/helpers/index.js

@@ -0,0 +1,12 @@
+/* eslint-disable max-len */ /**
+ * @typedef {import('./').ProductsWidgetInputConfig} ProductsWidgetInputConfig
+ */ /**
+ * @typedef {import('./').GetProductSearchParamsFromProductsInputConfigReturnValue} GetProductSearchParamsFromProductsInputConfigReturnValue
+ */ /* eslint-enable max-len */ /**
+ * Helper to extract relevant search parameters from the widget configuration of the "Products"
+ * input.
+ * The return value can be used to e.g. parametrize the useWidgetProducts hook.
+ * @param {ProductsWidgetInputConfig} products Config object of the "Products" input.
+ * @returns {GetProductSearchParamsFromProductsInputConfigReturnValue}
+ */export var getProductSearchParamsFromProductsInputConfig=function getProductSearchParamsFromProductsInputConfig(){var products=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var _ref=products||{},productSelectorType=_ref.productSelectorType,productsBrand=_ref.productsBrand,productsCategory=_ref.productsCategory,productsItemNumbers=_ref.productsItemNumbers,productsManualItemNumbers=_ref.productsManualItemNumbers,productsSelectorItemNumbers=_ref.productsSelectorItemNumbers,productsSearchTerm=_ref.productsSearchTerm;var productsSearchType=productSelectorType;/** @type {string|string[]} */var productsSearchValue='';switch(productSelectorType){case'brand':productsSearchValue=productsBrand;break;case'category':productsSearchValue=productsCategory;break;// Kept for backward compatibility - was replaces by 'manualItemNumbers' and 'productSelector'
+case'itemNumbers':productsSearchValue=productsItemNumbers.split(',').map(function(item){return item.trim();});break;case'manualItemNumbers':productsSearchValue=productsManualItemNumbers;break;case'productSelector':productsSearchValue=productsSelectorItemNumbers;break;case'searchTerm':default:productsSearchValue=productsSearchTerm;}if(['itemNumbers','manualItemNumbers','productSelector'].includes(productSelectorType)){productsSearchType='productIds';}return{productsSearchType:productsSearchType,productsSearchValue:productsSearchValue};};