@shopgate/engage 7.27.3-alpha.17 → 7.27.3-alpha.19

package/orders/constants/routes.js

@@ -0,0 +1 @@
+export var ORDER_DETAILS_PATTERN='/orders/:orderId';export var ORDER_DETAILS_PRIVATE_PATH='/order-details';export var ORDER_DETAILS_PRIVATE_PATTERN='/order-details/:orderNumber';

package/orders/constants/status.js

@@ -0,0 +1,12 @@
+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;}export var ORDER_STATUS_NEW='new';export var ORDER_STATUS_OPEN='open';export var ORDER_STATUS_REJECTED='rejected';export var ORDER_STATUS_CANCELED='canceled';export var ORDER_STATUS_READY='ready';export var ORDER_STATUS_FULFILLED='fulfilled';export var ORDER_STATUS_COMPLETED='completed';export var ORDER_STATUS_IN_PROGRESS='inProgress';// Does not come from the API
+export var ORDER_STATUS_SUBMITTED='submitted';var orderStatusMapping=_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},ORDER_STATUS_NEW,ORDER_STATUS_SUBMITTED),ORDER_STATUS_OPEN,ORDER_STATUS_SUBMITTED),ORDER_STATUS_IN_PROGRESS,ORDER_STATUS_IN_PROGRESS),ORDER_STATUS_READY,ORDER_STATUS_READY),ORDER_STATUS_FULFILLED,ORDER_STATUS_COMPLETED),ORDER_STATUS_COMPLETED,ORDER_STATUS_COMPLETED),ORDER_STATUS_CANCELED,ORDER_STATUS_CANCELED),ORDER_STATUS_REJECTED,ORDER_STATUS_CANCELED);/**
+ * Retrieves a final mapped order status of an original order status.
+ * @param {string} orderStatus The original order status
+ * @returns {string}
+ */export var getEngageOrderStatus=function getEngageOrderStatus(orderStatus){return orderStatusMapping[orderStatus]||orderStatus;};export var LINE_ITEM_STATUS_OPEN='open';export var LINE_ITEM_STATUS_IN_PROGRESS='inProgress';export var LINE_ITEM_STATUS_REJECTED='rejected';export var LINE_ITEM_STATUS_CANCELED='canceled';export var LINE_ITEM_STATUS_FULFILLED='fulfilled';// Does not come from the API
+export var LINE_ITEM_STATUS_PENDING='pending';export var LINE_ITEM_STATUS_UNAVAILABLE='unavailable';export var LINE_ITEM_SUB_STATUS_SUBSTITUTED='substituted';export var LINE_ITEM_SUB_STATUS_REPLACED='replaced';var lineItemInactiveStatuses=[{status:LINE_ITEM_STATUS_CANCELED,subStatus:null},{status:LINE_ITEM_STATUS_CANCELED,subStatus:LINE_ITEM_SUB_STATUS_SUBSTITUTED}];/**
+ * Retrieves a final mapped line item status of an original line item status.
+ * @param {string} lineItemStatus The original line item status
+ * @param {string} lineItemSubStatus The original line item sub status
+ * @returns {string}
+ */export var getEngageLineItemStatus=function getEngageLineItemStatus(lineItemStatus,lineItemSubStatus){var active=!lineItemInactiveStatuses.find(function(entry){return entry.status===lineItemStatus&&entry.subStatus===lineItemSubStatus;});return{status:lineItemStatus,active:active};};

package/orders/helpers/index.js

@@ -0,0 +1 @@
+export{getTranslatedOrderStatus,getTranslatedLineItemStatus,getLineItemActiveStatus}from"./orderStatus";

package/orders/helpers/orderDetails.js

@@ -0,0 +1,5 @@
+import{ORDER_DETAILS_PRIVATE_PATH}from"../constants/routes";/**
+ * Generate route to order details.
+ * @param {string} orderNumber The order number.
+ * @returns {string}
+ */export var getOrderDetailsRoute=function getOrderDetailsRoute(orderNumber){return"".concat(ORDER_DETAILS_PRIVATE_PATH,"/").concat(orderNumber);};

package/orders/helpers/orderStatus.js

@@ -0,0 +1,15 @@
+import{i18n}from'@shopgate/engage/core';import{getEngageOrderStatus,getEngageLineItemStatus}from"../constants";/**
+ * Generates a translated order status.
+ * @param {string} status The status from the API.
+ * @returns {string}
+ */export var getTranslatedOrderStatus=function getTranslatedOrderStatus(status){var path="order.status.order.".concat(getEngageOrderStatus(status));var translated=i18n.text(path);return translated!==path?translated:status;};/**
+ * Generates a translated line item status.
+ * @param {string} status The status from the API.
+ * @param {string} subStatus The sub status from the API.
+ * @returns {string}
+ */export var getTranslatedLineItemStatus=function getTranslatedLineItemStatus(status,subStatus){var _getEngageLineItemSta;var statusText=(_getEngageLineItemSta=getEngageLineItemStatus(status,subStatus))===null||_getEngageLineItemSta===void 0?void 0:_getEngageLineItemSta.status;var path="order.status.line_item.".concat(statusText);var translated=i18n.text(path);return translated!==path?translated:status;};/**
+ * Determines the active status of a line item.
+ * @param {string} status The status from the API.
+ * @param {string} subStatus The sub status from the API.
+ * @returns {boolean}
+ */export var getLineItemActiveStatus=function getLineItemActiveStatus(status,subStatus){var _getEngageLineItemSta2;return(_getEngageLineItemSta2=getEngageLineItemStatus(status,subStatus))===null||_getEngageLineItemSta2===void 0?void 0:_getEngageLineItemSta2.active;};

package/orders/hooks/index.js

@@ -0,0 +1,7 @@
+import React from'react';import OrderDetails from"../providers/OrderDetailsProvider.context";import OrderHistory from"../providers/OrderHistoryProvider.context";/**
+ * Returns the value of the order details provider state.
+ * @returns {Object}
+ */export var useOrderDetails=function useOrderDetails(){return React.useContext(OrderDetails);};/**
+ * Returns the value of the order details provider state.
+ * @returns {Object}
+ */export var useOrderHistory=function useOrderHistory(){return React.useContext(OrderHistory);};

package/orders/index.js

@@ -1,2 +1,2 @@
 /** @module orders */import{CHECKOUT_PATH}from'@shopgate/pwa-common/constants/RoutePaths';// CONSTANTS
-export*from'@shopgate/pwa-common-commerce/orders/constants';export{CHECKOUT_PATH};
+export*from'@shopgate/pwa-common-commerce/orders/constants';export{CHECKOUT_PATH};export{makeGetOrderById}from"./selectors";export{getTranslatedOrderStatus,getTranslatedLineItemStatus,getLineItemActiveStatus}from"./helpers";

package/orders/providers/OrderDetailsPrivateProvider.connector.js

@@ -0,0 +1,11 @@
+import{connect}from'react-redux';import{getShopSettings,getConfigFetching}from'@shopgate/engage/core/config';import{getPreferredLocationAddress}from'@shopgate/engage/locations/selectors';import{isUserLoggedIn}from'@shopgate/pwa-common/selectors/user';import{makeGetOrderByNumber}from"../selectors";import{fetchOrderDetails as _fetchOrderDetails,cancelOrder as _cancelOrder}from"../actions";/**
+ * @return {Function}
+ */var makeMapStateToProps=function makeMapStateToProps(){var getOrderByNumber=makeGetOrderByNumber();/**
+   * @param {Object} state The application state.
+   * @param {Object} props The component props.
+   * @returns {Object}
+   */return function(state,props){return{isDataReady:!getConfigFetching(state),isUserLoggedIn:isUserLoggedIn(state),shopSettings:getShopSettings(state),userLocation:getPreferredLocationAddress(state),order:getOrderByNumber(state,props)};};};/**
+ * Connects the dispatch function to a callable function in the props.
+ * @param {Function} dispatch The redux dispatch function.
+ * @return {Object} The extended component props.
+ */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{fetchOrderDetails:function fetchOrderDetails(orderNumber){return dispatch(_fetchOrderDetails({orderNumber:orderNumber}));},cancelOrder:function cancelOrder(orderNumber){return dispatch(_cancelOrder({orderNumber:orderNumber}));}};};export default connect(makeMapStateToProps,mapDispatchToProps);

package/orders/providers/OrderDetailsPrivateProvider.js

@@ -0,0 +1,5 @@
+import _regeneratorRuntime from"@babel/runtime/regenerator";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);});};}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,useMemo,useCallback,useEffect}from'react';import PropTypes from'prop-types';import{useRoute,LoadingProvider}from'@shopgate/engage/core';import connect from"./OrderDetailsPrivateProvider.connector";import Context from"./OrderDetailsProvider.context";/**
+ * @param {Object} props The component props.
+ * @returns {JSX}
+ */var OrderDetailsProvider=function OrderDetailsProvider(_ref){var order=_ref.order,orderNumber=_ref.orderNumber,shopSettings=_ref.shopSettings,userLocation=_ref.userLocation,fetchOrderDetails=_ref.fetchOrderDetails,cancelOrder=_ref.cancelOrder,children=_ref.children;var _useRoute=useRoute(),pathname=_useRoute.pathname;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isLoading=_useState2[0],setIsLoading=_useState2[1];var handleRequest=useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:setIsLoading(true);_context.next=3;return fetchOrderDetails(orderNumber);case 3:setIsLoading(false);case 4:case"end":return _context.stop();}},_callee);})),[fetchOrderDetails,orderNumber]);var handleCancel=useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(){return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:setIsLoading(true);_context2.next=3;return cancelOrder(orderNumber);case 3:setIsLoading(false);case 4:case"end":return _context2.stop();}},_callee2);})),[cancelOrder,orderNumber]);// Loading state
+useEffect(function(){if(isLoading){LoadingProvider.setLoading(pathname);return;}LoadingProvider.unsetLoading(pathname);},[isLoading,pathname]);useEffect(function(){handleRequest();},[handleRequest]);var value=useMemo(function(){return{order:order,isLoading:isLoading,supportedCountries:shopSettings.supportedCountries,countrySortOrder:shopSettings.countrySortOrder,userLocation:userLocation,fetchOrderDetails:fetchOrderDetails,cancelOrder:handleCancel};},[order,isLoading,shopSettings.supportedCountries,shopSettings.countrySortOrder,userLocation,fetchOrderDetails,handleCancel]);return React.createElement(Context.Provider,{value:value},children);};OrderDetailsProvider.defaultProps={children:null,shopSettings:null,userLocation:null,order:null};export default connect(OrderDetailsProvider);

package/orders/providers/OrderDetailsProvider.connector.js

@@ -0,0 +1,11 @@
+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{connect}from'react-redux';import{getShopSettings,getConfigFetching}from'@shopgate/engage/core/config';import{getPreferredLocationAddress}from'@shopgate/engage/locations/selectors';import{isUserLoggedIn}from'@shopgate/pwa-common/selectors/user';import{makeGetOrderById}from"../selectors";import{fetchOrderDetails as _fetchOrderDetails,cancelOrder as _cancelOrder}from"../actions";/**
+ * @return {Function}
+ */var makeMapStateToProps=function makeMapStateToProps(){var getOrderById=makeGetOrderById();/**
+   * @param {Object} state The application state.
+   * @param {Object} props The component props.
+   * @returns {Object}
+   */return function(state,props){return{isDataReady:!getConfigFetching(state),isUserLoggedIn:isUserLoggedIn(state),shopSettings:getShopSettings(state),userLocation:getPreferredLocationAddress(state),order:getOrderById(state,props)};};};/**
+ * Connects the dispatch function to a callable function in the props.
+ * @param {Function} dispatch The redux dispatch function.
+ * @return {Object} The extended component props.
+ */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{fetchOrderDetails:function fetchOrderDetails(orderId,params){return dispatch(_fetchOrderDetails(_extends({orderId:orderId},params)));},cancelOrder:function cancelOrder(orderId,token){return dispatch(_cancelOrder({orderId:orderId,token:token}));}};};export default connect(makeMapStateToProps,mapDispatchToProps);

package/orders/providers/OrderDetailsProvider.constraints.js

@@ -0,0 +1 @@
+export var authenticateConstraints={email:{presence:{message:'validation.required',allowEmpty:false},email:{message:'validation.email'}},phone:{presence:{message:'validation.required',allowEmpty:false},format:{pattern:'^[+0-9]+',message:'validation.mobileNumber'}}};

package/orders/providers/OrderDetailsProvider.context.js

@@ -0,0 +1 @@
+import React from'react';var initialContext={};export default React.createContext(initialContext);

package/orders/providers/OrderDetailsProvider.js

@@ -0,0 +1,11 @@
+import _regeneratorRuntime from"@babel/runtime/regenerator";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);});};}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,useMemo,useCallback,useEffect}from'react';import PropTypes from'prop-types';import{useCookies}from'react-cookie';import{useRoute,i18n,LoadingProvider,EUNAUTHORIZED,EAUTHENTICATION,ENOTFOUND}from'@shopgate/engage/core';import{useFormState}from'@shopgate/engage/core/hooks/useFormState';import{authenticateConstraints}from"./OrderDetailsProvider.constraints";import connect from"./OrderDetailsProvider.connector";import Context from"./OrderDetailsProvider.context";var defaultFormState={email:'',phone:''};/**
+ * Converts validation errors into errors for form builder.
+ * @param {Object} validationErrors The validation errors.
+ * @returns {Array}
+ */var convertValidationErrors=function convertValidationErrors(validationErrors){return Object.keys(validationErrors).map(function(key){return{path:key,message:i18n.text(validationErrors[key])};});};/**
+ * @param {Object} props The component props.
+ * @returns {JSX}
+ */var OrderDetailsProvider=function OrderDetailsProvider(_ref){var isUserLoggedIn=_ref.isUserLoggedIn,order=_ref.order,orderId=_ref.orderId,shopSettings=_ref.shopSettings,userLocation=_ref.userLocation,fetchOrderDetails=_ref.fetchOrderDetails,cancelOrder=_ref.cancelOrder,children=_ref.children;var _useRoute=useRoute(),pathname=_useRoute.pathname;var _useState=useState(!isUserLoggedIn),_useState2=_slicedToArray(_useState,2),showForm=_useState2[0],setShowForm=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isLoading=_useState4[0],setIsLoading=_useState4[1];var _useState5=useState(''),_useState6=_slicedToArray(_useState5,2),errorMessage=_useState6[0],setErrorMessage=_useState6[1];var orderTokenCookie=["shopgate_order_token_".concat(orderId)];var _useCookies=useCookies([orderTokenCookie]),_useCookies2=_slicedToArray(_useCookies,2),cookies=_useCookies2[0],setCookie=_useCookies2[1];var orderToken=cookies[orderTokenCookie];// Form visibility
+useEffect(function(){if(isUserLoggedIn){setShowForm(errorMessage);}else{setShowForm(!order&&!orderToken||errorMessage);}},[errorMessage,isUserLoggedIn,order,orderToken]);var handleRequest=useCallback(/*#__PURE__*/function(){var _ref2=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(email,phone,token){var message,response,code;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:setIsLoading(true);_context.prev=1;_context.next=4;return fetchOrderDetails(orderId,{email:email,phone:phone,token:token});case 4:response=_context.sent;if(response.token&&response.tokenExpires){setCookie(orderTokenCookie,response.token,{expires:new Date(response.tokenExpires)});}setErrorMessage('');_context.next=13;break;case 9:_context.prev=9;_context.t0=_context["catch"](1);code=_context.t0.code;if(code===EUNAUTHORIZED){message='order_details.errors.authorize';}else if(code===EAUTHENTICATION){message='order_details.errors.authenticate';}else if(code===ENOTFOUND){message='order_details.errors.not_found';}case 13:if(message){setErrorMessage(i18n.text(message));}setIsLoading(false);case 15:case"end":return _context.stop();}},_callee,null,[[1,9]]);}));return function(_x,_x2,_x3){return _ref2.apply(this,arguments);};}(),[fetchOrderDetails,orderTokenCookie,orderId,setCookie]);var handleCancel=useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(){var message,code;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:setIsLoading(true);_context2.prev=1;_context2.next=4;return cancelOrder(orderId,orderToken);case 4:setErrorMessage('');_context2.next=11;break;case 7:_context2.prev=7;_context2.t0=_context2["catch"](1);code=_context2.t0.code;if(code===EAUTHENTICATION){message='order_details.errors.expired';}else if(code===ENOTFOUND){message='order_details.errors.not_found';}case 11:if(message){setErrorMessage(i18n.text(message));}setIsLoading(false);case 13:case"end":return _context2.stop();}},_callee2,null,[[1,7]]);})),[cancelOrder,orderId,orderToken]);// Loading state
+useEffect(function(){if(isLoading){LoadingProvider.setLoading(pathname);return;}LoadingProvider.unsetLoading(pathname);},[isLoading,pathname]);useEffect(function(){if(!isUserLoggedIn&&!orderToken){return;}_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(){return _regeneratorRuntime.wrap(function _callee3$(_context3){while(1)switch(_context3.prev=_context3.next){case 0:_context3.next=2;return handleRequest(undefined,undefined,!isUserLoggedIn?orderToken:undefined);case 2:case"end":return _context3.stop();}},_callee3);}))();/* eslint-disable react-hooks/exhaustive-deps */},[]);/* eslint-enable react-hooks/exhaustive-deps */var authenticateFormState={valid:false,values:[]};// Authentication form
+var handleAuthenticateFormSubmit=useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(){var _authenticateFormStat,email,phone;return _regeneratorRuntime.wrap(function _callee4$(_context4){while(1)switch(_context4.prev=_context4.next){case 0:if(authenticateFormState.valid){_context4.next=2;break;}return _context4.abrupt("return");case 2:_authenticateFormStat=authenticateFormState.values,email=_authenticateFormStat.email,phone=_authenticateFormStat.phone;_context4.next=5;return handleRequest(email,phone);case 5:case"end":return _context4.stop();}},_callee4);})),[authenticateFormState.valid,authenticateFormState.values,handleRequest]);authenticateFormState=useFormState(defaultFormState,handleAuthenticateFormSubmit,authenticateConstraints);var handleSubmit=useCallback(function(){authenticateFormState.handleSubmit(new Event('submit'));},[authenticateFormState]);var value=useMemo(function(){return{isUserLoggedIn:isUserLoggedIn,order:order,handleSubmit:handleSubmit,isLoading:isLoading,showForm:showForm,supportedCountries:shopSettings.supportedCountries,countrySortOrder:shopSettings.countrySortOrder,validationErrors:convertValidationErrors(authenticateFormState.validationErrors||{}),updateForm:authenticateFormState.setValues,defaultFormState:defaultFormState,userLocation:userLocation,fetchOrderDetails:fetchOrderDetails,cancelOrder:handleCancel,errorMessage:errorMessage};},[authenticateFormState.setValues,authenticateFormState.validationErrors,fetchOrderDetails,handleCancel,handleSubmit,isUserLoggedIn,showForm,isLoading,order,shopSettings.supportedCountries,shopSettings.countrySortOrder,userLocation,errorMessage]);return React.createElement(Context.Provider,{value:value},children);};OrderDetailsProvider.defaultProps={children:null,shopSettings:null,userLocation:null,order:null,orderId:null};export default connect(OrderDetailsProvider);

package/orders/providers/OrderHistoryProvider.connector.js

@@ -0,0 +1,9 @@
+import{connect}from'react-redux';import{historyPush}from'@shopgate/engage/core';import{fetchOrderHistory}from"../actions";import{getOrders,getTotalOrderCount}from"../selectors";/**
+   * @param {Object} state The application state.
+   * @param {Object} props The component props.
+   * @returns {Object}
+   */var mapStateToProps=function mapStateToProps(state){return{orders:getOrders(state),totalOrderCount:getTotalOrderCount(state)};};/**
+ * Connects the dispatch function to a callable function in the props.
+ * @param {Function} dispatch The redux dispatch function.
+ * @return {Object} The extended component props.
+ */var mapDispatchToProps={fetchOrderHistory:fetchOrderHistory,historyPush:historyPush};export default connect(mapStateToProps,mapDispatchToProps);

package/orders/providers/OrderHistoryProvider.context.js

@@ -0,0 +1 @@
+import React from'react';var initialContext={};export default React.createContext(initialContext);

package/orders/providers/OrderHistoryProvider.js

@@ -0,0 +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 React,{useMemo}from'react';import PropTypes from'prop-types';import connect from"./OrderHistoryProvider.connector";import Context from"./OrderHistoryProvider.context";import{getOrderDetailsRoute}from"../helpers/orderDetails";/**
+ * @param {Object} props The component props.
+ * @returns {JSX}
+ */var OrderHistoryProvider=function OrderHistoryProvider(_ref){var orders=_ref.orders,fetchOrderHistory=_ref.fetchOrderHistory,children=_ref.children,historyPush=_ref.historyPush,totalOrderCount=_ref.totalOrderCount;var value=useMemo(function(){return{orders:orders.map(function(order){return _extends({},order,{openDetails:function openDetails(){return historyPush({pathname:getOrderDetailsRoute(order.orderNumber)});}});}),totalOrderCount:totalOrderCount,fetchOrderHistory:fetchOrderHistory};},[fetchOrderHistory,historyPush,orders,totalOrderCount]);return React.createElement(Context.Provider,{value:value},children);};OrderHistoryProvider.defaultProps={children:null,totalOrderCount:null};export default connect(OrderHistoryProvider);

package/orders/reducers/index.js

@@ -0,0 +1 @@
+import{combineReducers}from'redux';import ordersById from"./ordersById";import ordersByNumber from"./ordersByNumber";import orders from"./orders";export default combineReducers({ordersById:ordersById,ordersByNumber:ordersByNumber,orders:orders});

package/orders/reducers/orders.js

@@ -0,0 +1,7 @@
+import{produce}from'immer';import{REQUEST_ORDER_HISTORY,RECEIVE_ORDER_HISTORY,ERROR_ORDER_HISTORY,CLEAR_ORDERS}from"../constants";export var CACHE_TIME=60*60*1000;// 1 hr in milliseconds
+var defaultState={orders:[]};/**
+ * Stores orders by the order number.
+ * @param {Object} [state={}] The current state.
+ * @param {Object} action The action object.
+ * @returns {Object} The new state.
+ */var orders=function orders(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:defaultState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(function(draft){switch(action.type){case REQUEST_ORDER_HISTORY:{draft.isFetching=true;break;}case RECEIVE_ORDER_HISTORY:{draft.isFetching=false;draft.orders=[].concat(draft.orders.slice(0,action.offset),action.orders.map(function(order){return order.orderNumber;}));draft.totalOrderCount=action.totalOrderCount;break;}case ERROR_ORDER_HISTORY:{draft.isFetching=false;break;}case CLEAR_ORDERS:{return defaultState;}default:break;}return undefined;});/* eslint-enable no-param-reassign */return producer(state);};export default orders;

package/orders/reducers/ordersById.js

@@ -0,0 +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{produce}from'immer';import{REQUEST_ORDER_DETAILS,RECEIVE_ORDER_DETAILS,ERROR_ORDER_DETAILS,CLEAR_ORDERS}from"../constants";export var CACHE_TIME=60*60*1000;// 1 hr in milliseconds
+var defaultState={};/**
+ * Stores orders by the order number.
+ * @param {Object} [state={}] The current state.
+ * @param {Object} action The action object.
+ * @returns {Object} The new state.
+ */var ordersById=function ordersById(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:defaultState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(function(draft){switch(action.type){case REQUEST_ORDER_DETAILS:{if(action.orderId){draft[action.orderId]=_extends({},draft[action.orderId],{isFetching:true,expires:0});}break;}case RECEIVE_ORDER_DETAILS:{if(action.orderId){draft[action.orderId]=_extends({},draft[action.orderId],{order:action.order,isFetching:false,expires:Date.now()+CACHE_TIME});}break;}case ERROR_ORDER_DETAILS:{if(action.orderId){draft[action.orderId]={isFetching:false,expires:0};}break;}case CLEAR_ORDERS:{return defaultState;}default:break;}return undefined;});/* eslint-enable no-param-reassign */return producer(state);};export default ordersById;

package/orders/reducers/ordersByNumber.js

@@ -0,0 +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{produce}from'immer';import{REQUEST_ORDER_DETAILS,RECEIVE_ORDER_DETAILS,RECEIVE_ORDER_HISTORY,ERROR_ORDER_DETAILS,CLEAR_ORDERS}from"../constants";export var CACHE_TIME=60*60*1000;// 1 hr in milliseconds
+var defaultState={};/**
+ * Stores orders by the order number.
+ * @param {Object} [state={}] The current state.
+ * @param {Object} action The action object.
+ * @returns {Object} The new state.
+ */var ordersByNumber=function ordersByNumber(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:defaultState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(function(draft){switch(action.type){case REQUEST_ORDER_DETAILS:{if(!action.orderNumber)break;draft[action.orderNumber]=_extends({},draft[action.orderNumber],{isFetching:true,expires:0});break;}case RECEIVE_ORDER_DETAILS:{draft[action.order.orderNumber]=_extends({},draft[action.order.orderNumber],{order:_extends({},action.order,{lineItemCount:action.order.lineItems.length}),isFetching:false,expires:Date.now()+CACHE_TIME});break;}case RECEIVE_ORDER_HISTORY:{action.orders.forEach(function(order){var _draft$order$orderNum;draft[order.orderNumber]=_extends({},draft[order.orderNumber],{order:_extends({},(_draft$order$orderNum=draft[order.orderNumber])===null||_draft$order$orderNum===void 0?void 0:_draft$order$orderNum.order,{},order)});});break;}case ERROR_ORDER_DETAILS:{if(!action.orderNumber)break;draft[action.orderNumber]={isFetching:false,expires:0};break;}case CLEAR_ORDERS:{return defaultState;}default:break;}return undefined;});/* eslint-enable no-param-reassign */return producer(state);};export default ordersByNumber;

package/orders/selectors/index.js

@@ -0,0 +1,27 @@
+import{createSelector}from'reselect';/**
+ * Retrieves the orders state from the store.
+ * @param {Object} state The current application state.
+ * @return {Object} The orders state.
+ */var getOrdersState=function getOrdersState(state){return state.orders||{};};/**
+ * Retrieves the ordersById state from the store.
+ * @param {Object} state The current application state.
+ * @return {Object} The orders state.
+ */var getOrdersByIdState=function getOrdersByIdState(state){return getOrdersState(state).ordersById||{};};/**
+ * Retrieves the ordersByNumber state from the store.
+ * @param {Object} state The current application state.
+ * @return {Object} The orders state.
+ */var getOrdersByNumberState=function getOrdersByNumberState(state){return getOrdersState(state).ordersByNumber||{};};/**
+ * Retrieves the orders from the store.
+ * @param {Object} state The current application state.
+ * @return {Object} The orders state.
+ */export var getOrders=createSelector(getOrdersState,getOrdersByNumberState,function(orders,ordersByNumber){return orders.orders.orders.map(function(orderNumber){var _ordersByNumber$order;return(_ordersByNumber$order=ordersByNumber[orderNumber])===null||_ordersByNumber$order===void 0?void 0:_ordersByNumber$order.order;});});/**
+ * Retrieves total count of orders from the store.
+ * @param {Object} state The current application state.
+ * @return {Object} The orders state.
+ */export var getTotalOrderCount=function getTotalOrderCount(state){return getOrdersState(state).orders.totalOrderCount;};/**
+ * Creates the selector that retrieves an order by its number.
+ * @returns {Function}
+ */export var makeGetOrderById=function makeGetOrderById(){return createSelector(function(state,props){return props.orderId;},getOrdersByIdState,function(orderId,orders){var _orders$orderId;return(orders===null||orders===void 0?void 0:(_orders$orderId=orders[orderId])===null||_orders$orderId===void 0?void 0:_orders$orderId.order)||null;});};/**
+ * Creates the selector that retrieves an order by its number.
+ * @returns {Function}
+ */export var makeGetOrderByNumber=function makeGetOrderByNumber(){return createSelector(function(state,props){return props.orderNumber;},getOrdersByNumberState,function(orderNumber,orders){var _orders$orderNumber;return(orders===null||orders===void 0?void 0:(_orders$orderNumber=orders[orderNumber])===null||_orders$orderNumber===void 0?void 0:_orders$orderNumber.order)||null;});};

package/orders/subscriptions/index.js

@@ -0,0 +1,4 @@
+import{main$}from'@shopgate/pwa-common/streams/main';import{clearOrders}from"../action-creators";import{SUBMIT_CHECKOUT_ORDER_SUCCESS}from"../../checkout/constants/actionTypes";/**
+ * Orders subscriptions.
+ * @param {Function} subscribe The subscribe function.
+ */var orders=function orders(subscribe){var checkoutSuccess$=main$.filter(function(_ref){var action=_ref.action;return action.type===SUBMIT_CHECKOUT_ORDER_SUCCESS;});subscribe(checkoutSuccess$,function(_ref2){var dispatch=_ref2.dispatch;dispatch(clearOrders());});};export default orders;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.27.3-alpha.17",
+  "version": "7.27.3-alpha.19",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -15,34 +15,44 @@
     "connect"
   ],
   "dependencies": {
-    "@shopgate/pwa-common": "7.27.3-alpha.17",
-    "@shopgate/pwa-common-commerce": "7.27.3-alpha.17",
-    "@shopgate/pwa-core": "7.27.3-alpha.17",
-    "@shopgate/pwa-ui-ios": "7.27.3-alpha.17",
-    "@shopgate/pwa-ui-material": "7.27.3-alpha.17",
-    "@shopgate/pwa-ui-shared": "7.27.3-alpha.17",
-    "@virtuous/conductor": "~2.4.0",
+    "@emotion/react": "^11.14.0",
+    "@shopgate/native-modules": "1.0.0-beta.25",
+    "@shopgate/pwa-common": "7.27.3-alpha.19",
+    "@shopgate/pwa-common-commerce": "7.27.3-alpha.19",
+    "@shopgate/pwa-core": "7.27.3-alpha.19",
+    "@shopgate/pwa-ui-ios": "7.27.3-alpha.19",
+    "@shopgate/pwa-ui-material": "7.27.3-alpha.19",
+    "@shopgate/pwa-ui-shared": "7.27.3-alpha.19",
+    "@stripe/react-stripe-js": "^1.16.5",
+    "@stripe/stripe-js": "^1.3.1",
+    "@virtuous/conductor": "~2.5.0",
     "babel-plugin-transform-es3-member-expression-literals": "^6.8.0",
     "babel-plugin-transform-es3-property-literals": "^6.8.0",
     "color": "^3.1.2",
-    "immer": "^10.0.1",
+    "focus-trap-react": "^11.0.3",
+    "immer": "^8.0.1",
     "intersection-observer": "^0.6.0",
+    "leaflet": "^1.8.0",
+    "leaflet-gesture-handling": "^1.2.2",
     "lodash": "^4.17.11",
+    "moment": "^2.27.0",
     "react-helmet": "^5.1.3",
+    "react-leaflet": "^3.2.5",
+    "react-phone-number-input": "^3.2.16",
     "react-player": "1.11.0",
     "react-portal": "^3.1.0",
-    "react-swipeable": "^4.0.1",
-    "rxjs": "~5.5.12"
+    "tss-react": "^4.9.18",
+    "validate.js": "^0.13.1"
   },
   "devDependencies": {
-    "classnames": "^2.2.6",
+    "classnames": "2.5.1",
     "jest-mock-console": "^0.4.2",
     "lodash": "^4.17.11",
-    "prop-types": "~15.7.2",
-    "react": "~16.12.0",
-    "react-redux": "^5.1.2",
-    "redux": "^4.0.1",
-    "redux-mock-store": "^1.5.3",
-    "reselect": "^3.0.1"
+    "prop-types": "~15.8.1",
+    "react": "~16.14.0",
+    "react-redux": "^8.1.3",
+    "redux": "^4.2.1",
+    "redux-mock-store": "^1.5.4",
+    "reselect": "^4.1.8"
   }
 }

package/page/action-creators/index.js

@@ -0,0 +1,22 @@
+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/actions/index.js

@@ -0,0 +1 @@
+export{default as fetchPageConfig}from'@shopgate/pwa-common/actions/page/fetchPageConfig';

package/page/components/NotFound.js

@@ -0,0 +1,3 @@
+import React,{useCallback}from'react';import PropTypes from'prop-types';import{css}from'glamor';import{connect}from'react-redux';import RippleButton from'@shopgate/pwa-ui-shared/RippleButton';import{I18n}from'@shopgate/engage/components';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{historyPop}from'@shopgate/pwa-common/actions/router';var mapDispatchToProps={onClick:historyPop};var variables=themeConfig.variables;var styles={wrapper:css({display:'flex',justifyContent:'center',flexDirection:'column',textAlign:'center',padding:variables.gap.big,paddingTop:variables.gap.xxbig}).toString(),text:css({fontSize:'1.5rem'}).toString(),button:css({width:'100%',maxWidth:250}).toString(),buttonContainer:css({flexGrow:'0',padding:"".concat(variables.emptyPage.buttonVerticalGap,"px ").concat(variables.gap.big,"px")}).toString()};/**
+ * @returns {JSX}
+ */var NotFound=function NotFound(_ref){var onClick=_ref.onClick;var handleClick=useCallback(function(){onClick();},[onClick]);return React.createElement("div",{className:styles.wrapper},React.createElement(I18n.Text,{className:styles.text,string:"page.not_found"}),React.createElement("div",{className:styles.buttonContainer},React.createElement(RippleButton,{onClick:handleClick,className:styles.button,type:"secondary"},React.createElement(I18n.Text,{string:"page.continue"}))));};export default connect(null,mapDispatchToProps)(NotFound);

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,15 @@
+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;

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});})));};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;