@shopgate/engage 7.27.3-alpha.6 → 7.27.3-alpha.8

package/components/ResponsiveContainer/breakpoints.js

@@ -1,5 +1,5 @@
 // Ugly imports to avoid breaking tests due to circular dependencies
-import{isIOSTheme}from'@shopgate/engage/core/helpers/isIOSTheme';import{hasWebBridge}from'@shopgate/engage/core/helpers/bridge';import{IS_PAGE_PREVIEW_ACTIVE}from'@shopgate/engage/page/constants';var iosThemeActive=isIOSTheme();/* eslint-disable extra-rules/no-single-line-objects */var breakpoints=[{name:'xs',from:0,to:600},{name:'sm',from:600,to:960},{name:'md',from:960,to:1280},{name:'lg',from:1280,to:1920},{name:'xl',from:1920,to:Number.MAX_VALUE}];/* eslint-enable extra-rules/no-single-line-objects */ /**
+import{isIOSTheme}from'@shopgate/engage/core/helpers/isIOSTheme';import{hasWebBridge}from'@shopgate/engage/core/helpers/bridge';var iosThemeActive=isIOSTheme();/* eslint-disable extra-rules/no-single-line-objects */var breakpoints=[{name:'xs',from:0,to:600},{name:'sm',from:600,to:960},{name:'md',from:960,to:1280},{name:'lg',from:1280,to:1920},{name:'xl',from:1920,to:Number.MAX_VALUE}];/* eslint-enable extra-rules/no-single-line-objects */ /**
  * Generates a media query for different breakpoints and platform.
  * @param {Object} comparators Comparators.
  * @param {string} breakpoint Breakpoint rule.
@@ -9,6 +9,6 @@ import{isIOSTheme}from'@shopgate/engage/core/helpers/isIOSTheme';import{hasWebBr
 var breakpointStart=breakpoint.search(/[a-zA-Z]/);var comparatorString=breakpoint.substring(0,breakpointStart===-1?0:breakpointStart);var breakpointString=breakpoint.substring(breakpointStart===-1?0:breakpointStart);// Get configuration.
 var comparator=comparators[comparatorString];var config=breakpoints.find(function(b){return b.name===breakpointString;});// Web / App config.
 // Handle iOS theme as app for now so that media queries in shared components only work for app
-var isWeb=hasWebBridge()&&!iosThemeActive&&!IS_PAGE_PREVIEW_ACTIVE;// Always mode.
+var isWeb=hasWebBridge()&&!iosThemeActive;// Always mode.
 if(webAlways&&isWeb||appAlways&&!isWeb){return true;}// Return media query that never evaluates for now.
 if(appOnly&&isWeb||webOnly&&!isWeb){return false;}return comparator(config.from,config.to,window.innerWidth);};export default breakpoints;

package/components/View/components/Content/style.js

@@ -1 +1 @@
-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;}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{css}from'glamor';import{useScrollContainer}from'@shopgate/engage/core';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{IS_PAGE_PREVIEW_ACTIVE}from'@shopgate/engage/page/constants';export default css(_extends({display:'flex',flexDirection:'column',width:'100vw'},useScrollContainer()?_extends({bottom:0,top:0,overflowScrolling:'touch',position:'absolute',WebkitOverflowScrolling:'touch'},IS_PAGE_PREVIEW_ACTIVE&&{scrollbarWidth:'thin',backgroundColor:'var(--page-background-color)'}):{height:'100%',backgroundColor:'var(--page-background-color)'},_defineProperty({},responsiveMediaQuery('>xs',{webOnly:true}),{width:'var(--page-content-width)'})));
+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;}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{css}from'glamor';import{useScrollContainer}from'@shopgate/engage/core';import{responsiveMediaQuery}from'@shopgate/engage/styles';export default css(_extends({display:'flex',flexDirection:'column',width:'100vw'},useScrollContainer()?{bottom:0,top:0,overflowScrolling:'touch',position:'absolute',WebkitOverflowScrolling:'touch'}:{height:'100%',backgroundColor:'var(--page-background-color)'},_defineProperty({},responsiveMediaQuery('>xs',{webOnly:true}),{width:'var(--page-content-width)'})));

package/components/View/context.js

@@ -1 +1 @@
-import React from'react';import noop from'lodash/noop';export var ViewContext=React.createContext({top:null,bottom:null,ariaHidden:false,set:noop,setTop:noop,setBottom:noop,setContentRef:noop,getContentRef:function getContentRef(){return{current:null};},scrollTop:noop,setAriaHidden:noop});
+import React from'react';export var ViewContext=React.createContext();

package/core/constants/index.js

@@ -3,10 +3,4 @@ export*from'@shopgate/pwa-core/constants/ErrorManager';export*from'@shopgate/pwa
 export*from'@shopgate/pwa-common/constants/ActionTypes';export*from'@shopgate/pwa-common/constants/Configuration';export*from'@shopgate/pwa-common/constants/Device';export*from'@shopgate/pwa-common/constants/DisplayOptions';export*from'@shopgate/pwa-common/constants/Pipelines';export*from'@shopgate/pwa-common/constants/Portals';// CLIENT CONSTANTS
 export*from'@shopgate/pwa-common/constants/client';// MENU CONSTANTS
 export*from'@shopgate/pwa-common/constants/MenuIDs';// MODAL CONSTANTS
-export*from'@shopgate/pwa-common/constants/ModalTypes';export{INDEX_PATH,INDEX_PATH_DEEPLINK,LOGIN_PATH};/**
- * Helper constant that can be used as a return value in Redux selectors to prevent
- * unnecessary re-renders.
- */export var EMPTY_OBJECT=Object.freeze({});/**
- * Helper constant that can be used as a return value in Redux selectors to prevent
- * unnecessary re-renders.
- */export var EMPTY_ARRAY=Object.freeze([]);
+export*from'@shopgate/pwa-common/constants/ModalTypes';export{INDEX_PATH,INDEX_PATH_DEEPLINK,LOGIN_PATH};

package/core/contexts/ThemeResourcesContext.d.ts

@@ -43,16 +43,7 @@ export interface ThemeResourcesContextType {
    * Mapping object that contains all available widgets.
    * Key is the widget code, value is the widget component.
    */
-  widgets: {
-    /**
-     * All available widgets for Widget API v1
-     */
-    v1: ThemeWidgetMap;
-    /**
-     * All available widgets for Widget API v2
-     */
-    v2: ThemeWidgetMap;
-  };
+  widgets: ThemeWidgetMap;
 
   /**
    * Mapping object that contains multiple components provided by the theme.

package/core/contexts/ThemeResourcesContext.js

@@ -1,3 +1,3 @@
 import{createContext}from'react';/**
  * @typedef  {import('./ThemeResourcesContext').ThemeResourcesContextType ThemeResourcesContextType}
- */ /** @type {import('react').Context<ThemeResourcesContextType>} */export default createContext({widgets:{v1:{},v2:{}},components:{}});
+ */ /** @type {import('react').Context<ThemeResourcesContextType>} */export default createContext({widgets:{},components:{}});

package/core/helpers/scrollContainer.js

@@ -1,4 +1,4 @@
-import{IS_PAGE_PREVIEW_ACTIVE}from'@shopgate/engage/page/constants';import{hasWebBridge}from"./bridge";/**
+import{hasWebBridge}from"./bridge";/**
  * Checks whether the app shall use a scroll container
  * @returns {boolean}
- */export var useScrollContainer=function useScrollContainer(){return IS_PAGE_PREVIEW_ACTIVE||!hasWebBridge();};
+ */export var useScrollContainer=function useScrollContainer(){return!hasWebBridge();};

package/core/hocs/withThemeResources.js

@@ -12,8 +12,5 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * HOC that injects the `widgets` value of the ThemeResources context as a prop called
  * `themeWidgets`.
  * @param {React.ComponentType<any>} WrappedComponent The wrapped component
- * @param {Object} [options={}] Options for the HOC.
- * @param {"v1"|"v2"} [options.version='v1'] The API version of the widgets to return. Can be 'v1'
- * or 'v2'.
  * @returns {React.FC<any>}
- */export var withThemeWidgets=function withThemeWidgets(WrappedComponent){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};return function ThemeResourcesWrapper(props){var _options$version=options.version,version=_options$version===void 0?'v1':_options$version;var themeWidgets=useThemeWidgets(version);return React.createElement(WrappedComponent,_extends({},props,{themeWidgets:themeWidgets}));};};
+ */export var withThemeWidgets=function withThemeWidgets(WrappedComponent){return function ThemeResourcesWrapper(props){var themeWidgets=useThemeWidgets();return React.createElement(WrappedComponent,_extends({},props,{themeWidgets:themeWidgets}));};};

package/core/hooks/events/index.js

@@ -1 +1 @@
-export{default as usePressHandler}from"./usePressHandler";export{default as useLongPress}from"./useLongPress";export{default as useScrollDirectionChange}from"./useScrollDirectionChange";
+export{default as useLongPress}from"./useLongPress";export{default as useScrollDirectionChange}from"./useScrollDirectionChange";

package/core/hooks/useThemeResources.js

@@ -2,21 +2,20 @@ import{useContext}from'react';import ThemeResourcesContext from"../contexts/Them
  * @typedef  {import('../contexts/ThemeResourcesContext').ThemeResourcesContextType
  * ThemeResourcesContextType}
  */ /**
- * @typedef {import('../contexts/ThemeResourcesContext').ThemeComponentMap ThemeComponentMap}
+ * @typedef {ThemeResourcesContextType['components']} ThemeComponentsType
  */ /**
- * @typedef {import('../contexts/ThemeResourcesContext').ThemeWidgetMap ThemeWidgetMap}
+ * @typedef {ThemeResourcesContextType['widgets']} ThemeWidgetsType
  */ /**
  * Hook to access to the ThemeResourceContext. The context provides access to different groups
  * of React components provided by the active theme.
  * @returns {ThemeResourcesContextType} Value of the ThemeResourceContext
  */export function useThemeResources(){return useContext(ThemeResourcesContext);}/**
  * Hook to access the components provided by the ThemeResourceContext
- * @returns {ThemeComponentMap} Mapping object that contains multiple components provided by the
+ * @returns {ThemeComponentsType} Mapping object that contains multiple components provided by the
  * theme.
  * Key is the component name, value is the component
  */export function useThemeComponents(){var _useThemeResources=useThemeResources(),components=_useThemeResources.components;return components;}/**
  * Hook to access the widgets provided by the ThemeResourceContext
- * @param {string} [version='v1'] The version of the widget API to use. Defaults to 'v1'.
- * @returns {ThemeWidgetMap} Mapping object that contains all available widgets.
+ * @returns {ThemeWidgetsType} Mapping object that contains all available widgets.
  * Key is the widget code, value is the widget component.
- */export function useThemeWidgets(){var version=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'v1';var _useThemeResources2=useThemeResources(),widgets=_useThemeResources2.widgets;return widgets[version]?widgets[version]:widgets.v1;}
+ */export function useThemeWidgets(){var _useThemeResources2=useThemeResources(),widgets=_useThemeResources2.widgets;return widgets;}

package/core/providers/ThemeResourcesProvider.js

@@ -1,18 +1,14 @@
 import React,{useMemo}from'react';import PropTypes from'prop-types';import{ThemeContext as LegacyThemeContext}from'@shopgate/pwa-common/context';import{ThemeResourcesContext}from"../contexts";/**
- * @typedef {import('../contexts/ThemeResourcesContext').ThemeComponentMap} ThemeComponentMap
- */ /**
- * @typedef {Object} Widgets
- * @property {ThemeComponentMap} v1 All available widgets for Widget API v1
- * @property {ThemeComponentMap} v2 All available widgets for Widget API v2
+ * @typedef {Object<string, React.ComponentType<any>>} ComponentMap
  */ /**
  * ThemeResourcesProvider component.
  * @param {Object} props The component props.
- * @param {Widgets} props.widgets Mapping object with all available widget components for the
+ * @param {ComponentMap} props.widgets Mapping object with all available widget components for the
  * theme. Key is the widget code, value is the widget component.
- * @param {ThemeComponentMap} props.components Object with shared theme components. Can be used by
+ * @param {ComponentMap} props.components Object with shared theme components. Can be used by
+ * extensions the get unified visual presentation.
+ * @param {ComponentMap} [props.legacyThemeAPI] Object with shared theme components. Can be used by
  * extensions the get unified visual presentation.
- * @param {ThemeComponentMap} [props.legacyThemeAPI] Object with shared theme components. Can be
- * used by extensions the get unified visual presentation.
  * Kept for backward compatibility with existing extensions which use the deprecated `ThemeContext`.
  * @param {React.ReactNode} props.children The component children.
  * @returns {JSX.Element}

package/locations/subscriptions.js

@@ -1,4 +1,4 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";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 asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import{getProductsResult,productIsReady$,productsReceived$,productsReceivedCached$,RECEIVE_PRODUCTS_CACHED,variantDidChange$}from'@shopgate/engage/product';import{ToastProvider,appDidStart$,routeWillEnter$,UIEvents,getCurrentRoute,hex2bin,getThemeSettings,getCurrentSearchQuery,i18n,appWillInit$,appInitialization}from'@shopgate/engage/core';import{cartReceived$,fetchCart,cartDidEnter$,getCartItems}from'@shopgate/engage/cart';import{userDidLogin$}from'@shopgate/engage/user';import{receiveFavoritesWhileVisible$}from'@shopgate/pwa-common-commerce/favorites/streams';import{getFavoritesProductsIds,isFetching}from'@shopgate/pwa-common-commerce/favorites/selectors';import{categoryDidBackEnter$}from'@shopgate/pwa-common-commerce/category/streams';import{searchDidBackEntered$}from'@shopgate/pwa-common-commerce/search/streams';import{hasNewServices}from'@shopgate/engage/core/helpers';import{cookieConsentInitialized$}from'@shopgate/engage/tracking/streams';import{IS_PAGE_PREVIEW_ACTIVE}from'@shopgate/engage/page/constants';import{getUserSearch,getStoreFinderSearch,getPreferredLocation,getIsPending,getProductAlternativeLocationParams,getProductAlternativeLocations,makeGetLocation}from"./selectors";import{fetchDefaultLocation,fetchLocations,fetchProductLocations,sendDefaultLocationCode,setPending,setUserGeolocation}from"./actions";import{setShowInventoryInLists,showInventoryInLists}from"./helpers";import fetchInventories from"./actions/fetchInventories";import{EVENT_SET_OPEN}from"./providers/FulfillmentProvider";import fetchProductInventories from"./actions/fetchProductInventories";import{submitReservationSuccess$,userSearchChanged$,storeFinderWillEnter$,preferredLocationDidUpdate$,preferredLocationDidUpdateOnPDP$,provideAlternativeLocation$,preferredLocationDidUpdateGlobalOnWishlist$,storeDetailPageWillEnter$}from"./locations.streams";import selectLocation from"./action-creators/selectLocation";import{NEARBY_LOCATIONS_RADIUS,SET_STORE_FINDER_SEARCH_RADIUS,NEARBY_LOCATIONS_LIMIT}from"./constants";import selectGlobalLocation from"./action-creators/selectGlobalLocation";var initialLocationsResolve;var initialLocationsReject;var initialLocationsPromise=new Promise(function(resolve,reject){initialLocationsResolve=resolve;initialLocationsReject=reject;});/**
+import _regeneratorRuntime from"@babel/runtime/regenerator";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 asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import{getProductsResult,productIsReady$,productsReceived$,productsReceivedCached$,RECEIVE_PRODUCTS_CACHED,variantDidChange$}from'@shopgate/engage/product';import{ToastProvider,appDidStart$,routeWillEnter$,UIEvents,getCurrentRoute,hex2bin,getThemeSettings,getCurrentSearchQuery,i18n,appWillInit$,appInitialization}from'@shopgate/engage/core';import{cartReceived$,fetchCart,cartDidEnter$,getCartItems}from'@shopgate/engage/cart';import{userDidLogin$}from'@shopgate/engage/user';import{receiveFavoritesWhileVisible$}from'@shopgate/pwa-common-commerce/favorites/streams';import{getFavoritesProductsIds,isFetching}from'@shopgate/pwa-common-commerce/favorites/selectors';import{categoryDidBackEnter$}from'@shopgate/pwa-common-commerce/category/streams';import{searchDidBackEntered$}from'@shopgate/pwa-common-commerce/search/streams';import{hasNewServices}from'@shopgate/engage/core/helpers';import{cookieConsentInitialized$}from'@shopgate/engage/tracking/streams';import{getUserSearch,getStoreFinderSearch,getPreferredLocation,getIsPending,getProductAlternativeLocationParams,getProductAlternativeLocations,makeGetLocation}from"./selectors";import{fetchDefaultLocation,fetchLocations,fetchProductLocations,sendDefaultLocationCode,setPending,setUserGeolocation}from"./actions";import{setShowInventoryInLists,showInventoryInLists}from"./helpers";import fetchInventories from"./actions/fetchInventories";import{EVENT_SET_OPEN}from"./providers/FulfillmentProvider";import fetchProductInventories from"./actions/fetchProductInventories";import{submitReservationSuccess$,userSearchChanged$,storeFinderWillEnter$,preferredLocationDidUpdate$,preferredLocationDidUpdateOnPDP$,provideAlternativeLocation$,preferredLocationDidUpdateGlobalOnWishlist$,storeDetailPageWillEnter$}from"./locations.streams";import selectLocation from"./action-creators/selectLocation";import{NEARBY_LOCATIONS_RADIUS,SET_STORE_FINDER_SEARCH_RADIUS,NEARBY_LOCATIONS_LIMIT}from"./constants";import selectGlobalLocation from"./action-creators/selectGlobalLocation";var initialLocationsResolve;var initialLocationsReject;var initialLocationsPromise=new Promise(function(resolve,reject){initialLocationsResolve=resolve;initialLocationsReject=reject;});/**
  * Sets a location once the location has been validated.
  * @param {string} locationCode Location code
  * @param {Function} dispatch Redux dispatch function
@@ -6,7 +6,7 @@ import _regeneratorRuntime from"@babel/runtime/regenerator";function _extends(){
  */var setLocationOnceAvailable=/*#__PURE__*/function(){var _ref=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(locationCode,dispatch){var _ref3,initialLocations;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.prev=0;_context.next=3;return initialLocationsPromise;case 3:_ref3=_context.sent;initialLocations=_ref3.locations;if(initialLocations.some(function(l){return l.code===locationCode;})){_context.next=7;break;}return _context.abrupt("return");case 7:dispatch(selectLocation({code:locationCode}));requestAnimationFrame(function(){dispatch(setPending(false));});_context.next=13;break;case 11:_context.prev=11;_context.t0=_context["catch"](0);case 13:case"end":return _context.stop();}},_callee,null,[[0,11]]);}));return function setLocationOnceAvailable(_x,_x2){return _ref.apply(this,arguments);};}();/**
  * Locations subscriptions.
  * @param {Function} subscribe The subscribe function.
- */function locationsSubscriber(subscribe){subscribe(appWillInit$,function(){appInitialization.set('location',/*#__PURE__*/function(){var _ref5=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref4){var dispatch;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:dispatch=_ref4.dispatch;if(!(hasNewServices()&&!IS_PAGE_PREVIEW_ACTIVE)){_context2.next=4;break;}_context2.next=4;return dispatch(fetchDefaultLocation());case 4:case"end":return _context2.stop();}},_callee2);}));return function(_x3){return _ref5.apply(this,arguments);};}());});subscribe(preferredLocationDidUpdate$,function(_ref6){var dispatch=_ref6.dispatch,getState=_ref6.getState,action=_ref6.action,events=_ref6.events;var preferredLocation=getPreferredLocation(getState());if(preferredLocation){dispatch(sendDefaultLocationCode(preferredLocation.code));}var _action$location=action.location,location=_action$location===void 0?{}:_action$location,showToast=action.showToast;if(showToast){events.emit(ToastProvider.ADD,{id:'location.changed',message:i18n.text('location.preferredLocationChanged',{storeName:location===null||location===void 0?void 0:location.name})});}});subscribe(cookieConsentInitialized$,/*#__PURE__*/function(){var _ref8=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(_ref7){var dispatch,getState,userSearch,_ref10,locations,preferredLocation,code,hasLocation,_ref12,preferredLocationDefault,locationToPreselect;return _regeneratorRuntime.wrap(function _callee3$(_context3){while(1)switch(_context3.prev=_context3.next){case 0:dispatch=_ref7.dispatch,getState=_ref7.getState;if(hasNewServices()){_context3.next=3;break;}return _context3.abrupt("return");case 3:// Fetch merchants locations.
+ */function locationsSubscriber(subscribe){subscribe(appWillInit$,function(){appInitialization.set('location',/*#__PURE__*/function(){var _ref5=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref4){var dispatch;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:dispatch=_ref4.dispatch;if(!hasNewServices()){_context2.next=4;break;}_context2.next=4;return dispatch(fetchDefaultLocation());case 4:case"end":return _context2.stop();}},_callee2);}));return function(_x3){return _ref5.apply(this,arguments);};}());});subscribe(preferredLocationDidUpdate$,function(_ref6){var dispatch=_ref6.dispatch,getState=_ref6.getState,action=_ref6.action,events=_ref6.events;var preferredLocation=getPreferredLocation(getState());if(preferredLocation){dispatch(sendDefaultLocationCode(preferredLocation.code));}var _action$location=action.location,location=_action$location===void 0?{}:_action$location,showToast=action.showToast;if(showToast){events.emit(ToastProvider.ADD,{id:'location.changed',message:i18n.text('location.preferredLocationChanged',{storeName:location===null||location===void 0?void 0:location.name})});}});subscribe(cookieConsentInitialized$,/*#__PURE__*/function(){var _ref8=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(_ref7){var dispatch,getState,userSearch,_ref10,locations,preferredLocation,code,hasLocation,_ref12,preferredLocationDefault,locationToPreselect;return _regeneratorRuntime.wrap(function _callee3$(_context3){while(1)switch(_context3.prev=_context3.next){case 0:dispatch=_ref7.dispatch,getState=_ref7.getState;if(hasNewServices()){_context3.next=3;break;}return _context3.abrupt("return");case 3:// Fetch merchants locations.
 userSearch=getUserSearch(getState());_context3.prev=4;_context3.next=7;return dispatch(fetchLocations(userSearch));case 7:_ref10=_context3.sent;locations=_ref10.locations;preferredLocation=getPreferredLocation(getState());if(!preferredLocation){_context3.next=16;break;}code=preferredLocation.code;// Check if the preferred location is included within the fetched locations
 hasLocation=!!locations.find(function(location){return location.code===code;});if(hasLocation){_context3.next=16;break;}_context3.next=16;return dispatch(fetchLocations({codes:[code]}));case 16:// Preset preferredLocation if configured
 _ref12=getThemeSettings('@shopgate/engage/locations')||{},preferredLocationDefault=_ref12.preferredLocationDefault;if(preferredLocationDefault){// check if there is already a preferredLocation for the user, if not set one

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.27.3-alpha.6",
+  "version": "7.27.3-alpha.8",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -15,14 +15,13 @@
     "connect"
   ],
   "dependencies": {
-    "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.27.3-alpha.6",
-    "@shopgate/pwa-common-commerce": "7.27.3-alpha.6",
-    "@shopgate/pwa-core": "7.27.3-alpha.6",
-    "@shopgate/pwa-ui-ios": "7.27.3-alpha.6",
-    "@shopgate/pwa-ui-material": "7.27.3-alpha.6",
-    "@shopgate/pwa-ui-shared": "7.27.3-alpha.6",
+    "@shopgate/pwa-common": "7.27.3-alpha.8",
+    "@shopgate/pwa-common-commerce": "7.27.3-alpha.8",
+    "@shopgate/pwa-core": "7.27.3-alpha.8",
+    "@shopgate/pwa-ui-ios": "7.27.3-alpha.8",
+    "@shopgate/pwa-ui-material": "7.27.3-alpha.8",
+    "@shopgate/pwa-ui-shared": "7.27.3-alpha.8",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",
@@ -41,7 +40,6 @@
     "react-phone-number-input": "^3.2.16",
     "react-player": "1.11.0",
     "react-portal": "^3.1.0",
-    "tss-react": "^4.9.18",
     "validate.js": "^0.13.1"
   },
   "devDependencies": {

package/page/components/index.js

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

package/page/constants/index.js

@@ -1,5 +1 @@
-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;
+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");

package/page/index.js

@@ -1 +1,2 @@
-/** @module page */export*from"./actions";export*from"./components";export*from"./constants";export*from"./selectors";
+/** @module page */export*from"./actions";export*from"./components";export*from"./constants";// eslint-disable-next-line import/export
+export*from"./selectors";

package/page/selectors/index.js

@@ -1,53 +1,7 @@
-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{createSelector}from'reselect';import{makeGetMenu,makeGetIsFetchingMenu}from'@shopgate/engage/core/selectors';import{getFulfillmentParams,getPopulatedProductsResult,SHOPGATE_CATALOG_GET_HIGHLIGHT_PRODUCTS}from'@shopgate/engage/product';import{getProductState}from'@shopgate/engage/product/selectors/product';import{LEGAL_MENU,SORT_PRICE_ASC,SORT_PRICE_DESC}from'@shopgate/engage/core/constants';import{hasNewServices,transformDisplayOptions,generateResultHash}from'@shopgate/engage/core/helpers';import{PRIVACY_PATH}from"../constants";export*from'@shopgate/pwa-common/selectors/page';/**
+import{createSelector}from'reselect';import{makeGetMenu,makeGetIsFetchingMenu}from'@shopgate/engage/core/selectors';import{LEGAL_MENU}from'@shopgate/engage/core/constants';import{hasNewServices}from'@shopgate/engage/core';import{PRIVACY_PATH}from"../constants";export*from'@shopgate/pwa-common/selectors/page';/**
  * Creates a selector that retrieves the privacy policy link.
  *
  * When the new services are active, the link is extracted from the "shopgate.cms.getMenu" response.
  * Otherwise it's a static link to the legacy privacy page.
  * @returns {string|null}
- */export var makeGetPrivacyPolicyLink=function makeGetPrivacyPolicyLink(){var getMenu=makeGetMenu(LEGAL_MENU);var getIsFetchingMenu=makeGetIsFetchingMenu(LEGAL_MENU);return createSelector(getMenu,getIsFetchingMenu,function(menu,fetching){if(!hasNewServices()){return PRIVACY_PATH;}if(fetching||!menu){return null;}var entry=menu.find(function(item){return item.url.includes('privacy');})||{};return(entry===null||entry===void 0?void 0:entry.url)||null;});};/**
- * @param {Object} state The current application state.
- * @return {Function} A selector function that retrieves the pageV2 state.
- */var getPageV2State=function getPageV2State(state){return state.pageV2;};/**
- * List of available page types.
- * @typedef {'cms' | 'category'} PageType
- */ /**
- * List of available dropzone types.
- * @typedef {'cmsWidgetList'} DropzoneType
- */ /**
- * Creates a selector that retrieves page data based on the type and slug.
- * @param {Object} params The selector params
- * @param {PageType} [params.type] The type of the page.
- * @param {string|null} [params.slug=null] The slug of the page (optional).
- * @returns {Function} A selector function that retrieves the page data.
- */export var makeGetPage=function makeGetPage(_ref){var _ref$type=_ref.type,type=_ref$type===void 0?'cms':_ref$type,_ref$slug=_ref.slug,slug=_ref$slug===void 0?null:_ref$slug;return createSelector(getPageV2State,function(pageState){if(type&&slug){var _pageState$type;return((_pageState$type=pageState[type])===null||_pageState$type===void 0?void 0:_pageState$type[slug])||null;}return pageState[type]||null;});};/**
- * Creates a selector that retrieves the widget list from a page based on the type, slug and
- * and dropzone name.
- * @param {Object} params The selector params
- * @param {PageType} [params.type='cms'] The type of the page.
- * @param {DropzoneType} [params.dropzone='cmsWidgetList'] The dropzone name to retrieve the widget
- * list from.
- * @param {string|null} [params.slug=null] The slug of the page (optional).
- * @returns {Function} A selector function that retrieves the widget list.
- */export var makeGetWidgetsFromPage=function makeGetWidgetsFromPage(_ref2){var _ref2$type=_ref2.type,type=_ref2$type===void 0?'cms':_ref2$type,_ref2$slug=_ref2.slug,slug=_ref2$slug===void 0?null:_ref2$slug,_ref2$dropzone=_ref2.dropzone,dropzone=_ref2$dropzone===void 0?'cmsWidgetList':_ref2$dropzone;var getPage=makeGetPage({type:type,slug:slug});return createSelector(getPage,function(page){var _ref3,_page$data,_page$data$dropzones;if(!page){return undefined;}return(_ref3=(_page$data=page.data)===null||_page$data===void 0?void 0:(_page$data$dropzones=_page$data.dropzones)===null||_page$data$dropzones===void 0?void 0:_page$data$dropzones[dropzone])!==null&&_ref3!==void 0?_ref3:[];});};/**
- * Creates a selector that generates a hash to select results for widget products.
- * @param {'searchTerm' | 'itemNumbers' | 'brand' | 'category' |'highlights'} type Type of the
- * request to make.
- * @param {Object} options Request options
- * @param {string} id Unique identifier to find the result in the state.
- * @returns {Function} A selector function that generates a hash for the widget products result.
- */var makeGetWidgetProductsResultHash=function makeGetWidgetProductsResultHash(type,options,id){var value=options.value,sort=options.sort,useDefaultRequestForProductIds=options.useDefaultRequestForProductIds,productIdType=options.productIdType;var transformedSort=transformDisplayOptions(sort);return createSelector(getFulfillmentParams,function(fulfillmentParams){var _hashParams;var hashParams={};switch(type){case'highlights':hashParams={id:id,pipeline:SHOPGATE_CATALOG_GET_HIGHLIGHT_PRODUCTS,sort:transformedSort};break;case'searchTerm':case'brand':hashParams=_extends({id:id,searchPhrase:value,sort:transformedSort},fulfillmentParams);break;case'itemNumbers':hashParams=_extends({id:id,productIds:value,productIdType:productIdType},!useDefaultRequestForProductIds&&{sort:transformedSort},{},fulfillmentParams);break;case'category':hashParams=_extends({id:id,categoryId:value,sort:transformedSort},fulfillmentParams);break;default:}return generateResultHash(hashParams,!!((_hashParams=hashParams)===null||_hashParams===void 0?void 0:_hashParams.sort),false);});};/**
- * @param {'searchTerm' | 'itemNumbers' | 'brand' | 'category' |'highlights'} type Type of the
- * request to make.
- * @param {Object} options Request options
- * @param {string} id Unique identifier to find the result in the state.
- * @returns {Function} A selector function that retrieves the widget products result by hash.
- */var makeGetWidgetProductResultsByHash=function makeGetWidgetProductResultsByHash(type,options,id){var getWidgetProductResultsHash=makeGetWidgetProductsResultHash(type,options,id);return createSelector(getProductState,getWidgetProductResultsHash,function(productState,hash){return productState.resultsByHash[hash];});};/**
- * Creates a selector that collects products for a widget.
- * @param {'searchTerm' | 'itemNumbers' | 'brand' | 'category' |'highlights'} type Type of the
- * request to make.
- * @param {Object} options Request options
- * @param {string} id Unique identifier to find the result in the state.
- * @returns {Function} A selector function that collects products for a widget.
- */export var makeGetWidgetProducts=function makeGetWidgetProducts(type,options,id){var getWidgetProductResultsHash=makeGetWidgetProductsResultHash(type,options,id);var getWidgetProductResultsByHash=makeGetWidgetProductResultsByHash(type,options,id);return createSelector(function(state){return state;},function(state,props){return props!==null&&props!==void 0?props:{};},getWidgetProductResultsHash,getWidgetProductResultsByHash,function(state,props,resultsHash,resultsByHash){var result=_extends({isFetching:(resultsByHash===null||resultsByHash===void 0?void 0:resultsByHash.isFetching)||false},getPopulatedProductsResult(state,props,resultsHash,resultsByHash));// Since the getProducts pipeline does not support sorting when a product ID list is
-// provided, we need to sort the products manually here.
-if(type==='itemNumbers'){if(options.sort===SORT_PRICE_ASC){result.products=result.products.sort(function(p1,p2){return p1.price.unitPrice-p2.price.unitPrice;});}if(options.sort===SORT_PRICE_DESC){result.products=result.products.sort(function(p1,p2){return p2.price.unitPrice-p1.price.unitPrice;});}}return result;});};
+ */export var makeGetPrivacyPolicyLink=function makeGetPrivacyPolicyLink(){var getMenu=makeGetMenu(LEGAL_MENU);var getIsFetchingMenu=makeGetIsFetchingMenu(LEGAL_MENU);return createSelector(getMenu,getIsFetchingMenu,function(menu,fetching){if(!hasNewServices()){return PRIVACY_PATH;}if(fetching||!menu){return null;}var entry=menu.find(function(item){return item.url.includes('privacy');})||{};return(entry===null||entry===void 0?void 0:entry.url)||null;});};

package/product/components/index.js

@@ -1 +1 @@
-export*from"./Availability";export{default as Characteristics}from"./Characteristics";export{default as Description}from"./Description";export{default as EffectivityDates}from"./EffectivityDates";export{default as MapPriceHint}from"./MapPriceHint";export*from"./Media";export{default as MediaSlider}from"./MediaSlider";export{default as Options}from"./Options";export{SelectOption,TextOption}from"./Options";export{default as OrderQuantityHint}from"./OrderQuantityHint";export{default as PriceDifference}from"./PriceDifference";export*from"./PriceInfo";export{default as ProductBadges}from"./ProductBadges";export{default as ProductCard}from"./ProductCard";export{default as ProductCharacteristics}from"./ProductCharacteristics";export{default as ProductDiscountBadge}from"./ProductDiscountBadge";export{default as ProductGrid}from"./ProductGrid";export{default as ProductGridPrice}from"./ProductGridPrice";export{default as ProductImage}from"./ProductImage";export{default as ProductList}from"./ProductList";export*from"./ProductName";export{default as ProductProperties}from"./ProductProperties/ProductProperties";export{default as ProductSlider}from"./ProductSlider";export*from"./ProductVariants";export{default as QuantityPicker}from"./QuantityPicker";export{default as Rating}from"./Rating";export*from"./RelationsSlider";export*from"./Swatch";export*from"./Swatches";export*from"./UnitQuantityPicker";
+export*from"./Availability";export{default as Characteristics}from"./Characteristics";export{default as Description}from"./Description";export{default as EffectivityDates}from"./EffectivityDates";export{default as MapPriceHint}from"./MapPriceHint";export*from"./Media";export{default as MediaSlider}from"./MediaSlider";export{default as Options}from"./Options";export{SelectOption,TextOption}from"./Options";export{default as OrderQuantityHint}from"./OrderQuantityHint";export{default as PriceDifference}from"./PriceDifference";export*from"./PriceInfo";export{default as ProductBadges}from"./ProductBadges";export{default as ProductCard}from"./ProductCard";export{default as ProductCharacteristics}from"./ProductCharacteristics";export{default as ProductDiscountBadge}from"./ProductDiscountBadge";export{default as ProductGridPrice}from"./ProductGridPrice";export{default as ProductImage}from"./ProductImage";export{default as ProductList}from"./ProductList";export*from"./ProductName";export{default as ProductProperties}from"./ProductProperties/ProductProperties";export{default as ProductSlider}from"./ProductSlider";export*from"./ProductVariants";export{default as QuantityPicker}from"./QuantityPicker";export{default as Rating}from"./Rating";export*from"./RelationsSlider";export*from"./Swatch";export*from"./Swatches";export*from"./UnitQuantityPicker";

package/styles/helpers/index.js

@@ -1 +1 @@
-export{getCSSCustomProp,setCSSCustomProp}from"./cssCustomProperties";export{updatePageInsets}from"./updatePageInsets";export{setPageBackgroundColor}from"./setPageBackgroundColor";export{setPageContentWidth}from"./setPageContentWidth";export{setViewportHeight}from"./setViewportHeight";export{toggleBodyScroll}from"./toggleBodyScroll";export{initCSSCustomProps,initCSSCustomPropsFallback}from"./initCSSCustomProperties";export{loadCustomStyles}from"./loadCustomStyles";export*from"./color";export{responsiveMediaQuery}from"../../components/ResponsiveContainer/mediaQuery";export{responsiveCondition}from"../../components/ResponsiveContainer/condition";
+export{getCSSCustomProp,setCSSCustomProp}from"./cssCustomProperties";export{updatePageInsets}from"./updatePageInsets";export{setPageBackgroundColor}from"./setPageBackgroundColor";export{setPageContentWidth}from"./setPageContentWidth";export{setViewportHeight}from"./setViewportHeight";export{toggleBodyScroll}from"./toggleBodyScroll";export{initCSSCustomProps,initCSSCustomPropsFallback}from"./initCSSCustomProperties";export{loadCustomStyles}from"./loadCustomStyles";export{responsiveMediaQuery}from"../../components/ResponsiveContainer/mediaQuery";export{responsiveCondition}from"../../components/ResponsiveContainer/condition";

package/styles/helpers/setPageBackgroundColor.js

@@ -1,5 +1,5 @@
-import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{hasWebBridge}from'@shopgate/engage/core/helpers';import{IS_PAGE_PREVIEW_ACTIVE}from'@shopgate/engage/page/constants';import{setCSSCustomProp}from"./cssCustomProperties";var defaultBackgroundColor=themeConfig.colors.light;/**
+import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{hasWebBridge}from'@shopgate/engage/core/helpers';import{setCSSCustomProp}from"./cssCustomProperties";var defaultBackgroundColor=themeConfig.colors.light;/**
  * Updates the page background color.
  * @param {string} color The new background color.
  */export var setPageBackgroundColor=function setPageBackgroundColor(){var color=arguments.length>0&&arguments[0]!==undefined?arguments[0]:defaultBackgroundColor;// Curbside website changes never its background color
-if(!hasWebBridge()||IS_PAGE_PREVIEW_ACTIVE){setCSSCustomProp('--page-background-color',color);}};
+if(!hasWebBridge()){setCSSCustomProp('--page-background-color',color);}};

package/styles/index.js

@@ -1 +1 @@
-export*from"./helpers";export{ThemeProvider,createTheme,useActiveBreakpoint,useMediaQuery,useResponsiveValue,useTheme}from"./theme";export{makeStyles,withStyles,tss,GlobalStyles,keyframes}from"./tss";
+export*from"./helpers";

package/tracking/selectors/cookieConsent.js

@@ -1,4 +1,4 @@
-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{createSelector}from'reselect';import{appConfig}from'@shopgate/engage';import{IS_PAGE_PREVIEW_ACTIVE}from'@shopgate/engage/page/constants';import{appSupportsCookieConsent}from'@shopgate/engage/core/helpers';var _appConfig$cookieCons=appConfig.cookieConsent,_appConfig$cookieCons2=_appConfig$cookieCons===void 0?{}:_appConfig$cookieCons,isCookieConsentActivated=_appConfig$cookieCons2.isCookieConsentActivated,showComfortCookiesToggle=_appConfig$cookieCons2.showComfortCookiesToggle;/**
+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{createSelector}from'reselect';import{appConfig}from'@shopgate/engage';import{appSupportsCookieConsent}from'@shopgate/engage/core/helpers';var _appConfig$cookieCons=appConfig.cookieConsent,_appConfig$cookieCons2=_appConfig$cookieCons===void 0?{}:_appConfig$cookieCons,isCookieConsentActivated=_appConfig$cookieCons2.isCookieConsentActivated,showComfortCookiesToggle=_appConfig$cookieCons2.showComfortCookiesToggle;/**
  * Selects the cookie consent modal state.
  * @param {Object} state The current state of the cookie consent modal.
  * @returns {Object} whether cookie consent modal is shown.
@@ -11,7 +11,7 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * inactive, app doesn't support the feature).
  * @returns {boolean} Whether the cookie consent process is handled either by user
  * or by app/feature settings
- */export var getIsCookieConsentHandled=createSelector(getCookieSettingsState,function(settingsState){if(!isCookieConsentActivated||!appSupportsCookieConsent()||IS_PAGE_PREVIEW_ACTIVE){return true;}return(settingsState===null||settingsState===void 0?void 0:settingsState.comfortCookiesAccepted)!==null||(settingsState===null||settingsState===void 0?void 0:settingsState.statisticsCookiesAccepted)!==null;});/**
+ */export var getIsCookieConsentHandled=createSelector(getCookieSettingsState,function(settingsState){if(!isCookieConsentActivated||!appSupportsCookieConsent()){return true;}return(settingsState===null||settingsState===void 0?void 0:settingsState.comfortCookiesAccepted)!==null||(settingsState===null||settingsState===void 0?void 0:settingsState.statisticsCookiesAccepted)!==null;});/**
  * Selects the property of the comfort cookie settings.
  * @private This selector is intended to be used internally. When a cookie consent status needs
  * to be checked for a feature, please use `getAreComfortCookiesAccepted` instead.

package/core/hooks/events/usePressHandler.js

@@ -1,38 +0,0 @@
-import{useCallback}from'react';/**
- * @typedef {Object} PressHandlers
- * @property {Function} onClick - Click event handler.
- * @property {Function} onKeyDown - Keydown handler for Enter/Space.
- */ /**
- * Improves development for accessibility by simplifying registration of multiple
- * listeners (click, Enter, Space) to invoke the a callback when an element is
- * interacted with.
- *
- * @param {Function} onPress Callback to run when the element is interacted with
- * @param {Object} [options] Optional configuration
- * @param {boolean} [options.triggerOnSpace=true] Whether Space triggers onActivate
- * @param {boolean} [options.triggerOnEnter=false] Whether Enter triggers onActivate
- * @returns {PressHandlers} handlers - Event handlers to spread onto an element
- *
- * @example
- * ```js
- * function MyPressableButton({ onActivate }) {
- *   // Only Enter will trigger activation; Space is disabled
- *   const handlers = usePressHandler(onActivate, {
- *     triggerOnEnter: true,
- *     triggerOnSpace: false,
- *   })
- * //
- *   return (
- *     <div
- *       {...handlers}
- *       role="button"
- *       tabIndex={0}
- *     >
- *       Press Me (Enter only)
- *     </div>
- *   )
- * }
- * ```
- */function usePressHandler(onPress){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var _options$triggerOnSpa=options.triggerOnSpace,triggerOnSpace=_options$triggerOnSpa===void 0?true:_options$triggerOnSpa,_options$triggerOnEnt=options.triggerOnEnter,triggerOnEnter=_options$triggerOnEnt===void 0?false:_options$triggerOnEnt;var handleKeyDown=useCallback(function(e){// Check for Enter
-if(triggerOnEnter&&e.key==='Enter'){e.preventDefault();onPress(e);}// Check for Space (may be ' ' or 'Spacebar')
-if(triggerOnSpace&&(e.key===' '||e.key==='Spacebar')){e.preventDefault();onPress(e);}},[onPress,triggerOnEnter,triggerOnSpace]);var handleClick=useCallback(function(e){onPress(e);},[onPress]);return{onClick:handleClick,onKeyDown:handleKeyDown};}export default usePressHandler;

package/page/action-creators/index.js

@@ -1,22 +0,0 @@
-import{REQUEST_PAGE_CONFIG_V2,RECEIVE_PAGE_CONFIG_V2,ERROR_PAGE_CONFIG_V2}from"../constants";/**
- * @typedef {'cms' | 'category'} PageType
- */ /**
- * Creates the dispatched REQUEST_PAGE_CONFIG_V2 action object.
- * @param {Object} params The action params
- * @param {PageType} params.type The type of the page.
- * @param {string} [params.slug=null] The slug of the page (optional).
- * @returns {Object} The dispatched action object.
- */export var requestPageConfigV2=function requestPageConfigV2(_ref){var type=_ref.type,_ref$slug=_ref.slug,slug=_ref$slug===void 0?null:_ref$slug;return{type:REQUEST_PAGE_CONFIG_V2,pageType:type,pageSlug:slug};};/**
- * Creates the dispatched RECEIVE_PAGE_CONFIG_V2 action object.
- * @param {Object} params The action params
- * @param {PageType} params.type The type of the page.
- * @param {Object} params.data The page data
- * @param {string} [params.slug=null] The slug of the page (optional).
- * @returns {Object} The dispatched action object.
- */export var receivePageConfigV2=function receivePageConfigV2(_ref2){var type=_ref2.type,data=_ref2.data,_ref2$slug=_ref2.slug,slug=_ref2$slug===void 0?null:_ref2$slug;return{type:RECEIVE_PAGE_CONFIG_V2,pageType:type,pageSlug:slug,data:data};};/**
- * Creates the dispatched ERROR_PAGE_CONFIG_V2 action object.
- * @param {Object} params The action params
- * @param {PageType} params.type The type of the page.
- * @param {string} [params.slug=null] The slug of the page (optional).
- * @returns {Object} The dispatched action object.
- */export var errorPageConfigV2=function errorPageConfigV2(_ref3){var type=_ref3.type,_ref3$slug=_ref3.slug,slug=_ref3$slug===void 0?null:_ref3$slug;return{type:ERROR_PAGE_CONFIG_V2,pageType:type,pageSlug:slug};};

package/page/components/Widgets/Overlay.js

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

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

@@ -1,15 +0,0 @@
-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.
- * @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;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,null))));};export default Widget;