@shopgate/engage 7.26.0 → 7.27.0-beta.1

package/cart/components/PaymentBar/PaymentBarContent.js

@@ -1,4 +1,4 @@
-import*as React from'react';import PropTypes from'prop-types';import Grid from'@shopgate/pwa-common/components/Grid';import{SurroundPortals}from'@shopgate/engage/components';import{CART_PAYMENT_BAR,CART_PAYMENT_BAR_TOTALS}from'@shopgate/pwa-common-commerce/cart/constants/Portals';import PaymentBarShippingCost from"./PaymentBarShippingCost";import PaymentBarDiscounts from"./PaymentBarDiscounts";import PaymentBarTax from"./PaymentBarTax";import PaymentBarSubTotal from"./PaymentBarSubTotal";import PaymentBarGrandTotal from"./PaymentBarGrandTotal";import PaymentBarCheckoutButton from"./PaymentBarCheckoutButton";import PaymentBarPromotionCoupons from"./PaymentBarPromotionCoupons";import PaymentBarAppliedPromotions from"./PaymentBarAppliedPromotions";import{wrapper,container,checkoutButtonContainer,checkoutButton}from"./PaymentBarContent.style";/**
+import*as React from'react';import PropTypes from'prop-types';import classNames from'classnames';import Grid from'@shopgate/pwa-common/components/Grid';import{SurroundPortals}from'@shopgate/engage/components';import{CART_PAYMENT_BAR,CART_PAYMENT_BAR_TOTALS}from'@shopgate/pwa-common-commerce/cart/constants/Portals';import PaymentBarShippingCost from"./PaymentBarShippingCost";import PaymentBarDiscounts from"./PaymentBarDiscounts";import PaymentBarTax from"./PaymentBarTax";import PaymentBarSubTotal from"./PaymentBarSubTotal";import PaymentBarGrandTotal from"./PaymentBarGrandTotal";import PaymentBarCheckoutButton from"./PaymentBarCheckoutButton";import PaymentBarPromotionCoupons from"./PaymentBarPromotionCoupons";import PaymentBarAppliedPromotions from"./PaymentBarAppliedPromotions";import{wrapper,container,checkoutButtonContainer,checkoutButton}from"./PaymentBarContent.style";/**
  * The PaymentBarContent component.
  * @returns {JSX}
- */function PaymentBarContent(_ref){var showSeparator=_ref.showSeparator;return React.createElement("div",{className:wrapper},React.createElement(SurroundPortals,{portalName:CART_PAYMENT_BAR},React.createElement(Grid,{className:container},React.createElement(SurroundPortals,{portalName:CART_PAYMENT_BAR_TOTALS},React.createElement(PaymentBarSubTotal,{showSeparator:showSeparator}),React.createElement(PaymentBarAppliedPromotions,{showSeparator:showSeparator}),React.createElement(PaymentBarPromotionCoupons,{showSeparator:showSeparator}),React.createElement(PaymentBarDiscounts,{showSeparator:showSeparator}),React.createElement(PaymentBarShippingCost,{showSeparator:showSeparator}),React.createElement(PaymentBarTax,{showSeparator:showSeparator}),React.createElement(PaymentBarGrandTotal,{showSeparator:showSeparator}))),React.createElement("div",{className:checkoutButtonContainer},React.createElement("div",{className:checkoutButton},React.createElement(PaymentBarCheckoutButton,null)))));}PaymentBarContent.defaultProps={showSeparator:true};export default PaymentBarContent;
+ */function PaymentBarContent(_ref){var showSeparator=_ref.showSeparator;return React.createElement("div",{className:classNames(wrapper,'theme__cart__payment-bar')},React.createElement(SurroundPortals,{portalName:CART_PAYMENT_BAR},React.createElement(Grid,{className:container},React.createElement(SurroundPortals,{portalName:CART_PAYMENT_BAR_TOTALS},React.createElement(PaymentBarSubTotal,{showSeparator:showSeparator}),React.createElement(PaymentBarAppliedPromotions,{showSeparator:showSeparator}),React.createElement(PaymentBarPromotionCoupons,{showSeparator:showSeparator}),React.createElement(PaymentBarDiscounts,{showSeparator:showSeparator}),React.createElement(PaymentBarShippingCost,{showSeparator:showSeparator}),React.createElement(PaymentBarTax,{showSeparator:showSeparator}),React.createElement(PaymentBarGrandTotal,{showSeparator:showSeparator}))),React.createElement("div",{className:checkoutButtonContainer},React.createElement("div",{className:checkoutButton},React.createElement(PaymentBarCheckoutButton,null)))));}PaymentBarContent.defaultProps={showSeparator:true};export default PaymentBarContent;

package/cart/components/PaymentBar/PaymentBarContent.style.js

@@ -1 +1 @@
-import{css}from'glamor';import{isIOSTheme}from'@shopgate/engage/core';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables,shadows=themeConfig.shadows;export var wrapper=css({background:colors.light,boxShadow:shadows.cart.paymentBar,position:'relative',zIndex:2});export var container=css({padding:isIOSTheme()?variables.gap.small:variables.gap.big,paddingBottom:0,lineHeight:1.45,flexWrap:'wrap',flexDirection:'column',minWidth:'auto'}).toString();export var checkoutButton=css({display:'flex',justifyContent:'flex-end',flexDirection:'column'});export var checkoutButtonContainer=css({background:colors.light,alignItems:'center',padding:isIOSTheme()?variables.gap.small:variables.gap.big,position:'relative',zIndex:2});export var spacer=css({width:isIOSTheme()?27:32,order:1,flexShrink:0}).toString();
+import{css}from'glamor';import{isIOSTheme}from'@shopgate/engage/core';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables,shadows=themeConfig.shadows;export var wrapper=css({background:colors.light,boxShadow:shadows.cart.paymentBar,position:'relative',zIndex:2,paddingBottom:'var(--safe-area-inset-bottom)'});export var container=css({padding:isIOSTheme()?variables.gap.small:variables.gap.big,paddingBottom:0,lineHeight:1.45,flexWrap:'wrap',flexDirection:'column',minWidth:'auto'}).toString();export var checkoutButton=css({display:'flex',justifyContent:'flex-end',flexDirection:'column'});export var checkoutButtonContainer=css({background:colors.light,alignItems:'center',padding:isIOSTheme()?variables.gap.small:variables.gap.big,position:'relative',zIndex:2});export var spacer=css({width:isIOSTheme()?27:32,order:1,flexShrink:0}).toString();

package/components/Footer/Footer.js

@@ -1,24 +1,5 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{PureComponent}from'react';import PropTypes from'prop-types';import Portal from'@shopgate/pwa-common/components/Portal';import UIEvents from'@shopgate/pwa-core/emitters/ui';import{APP_FOOTER_CONTENT_BEFORE,APP_FOOTER_CONTENT_AFTER}from'@shopgate/pwa-common/constants/Portals';import{getAbsoluteHeight,getStyle}from'@shopgate/pwa-common/helpers/dom';import{SHEET_EVENTS}from'@shopgate/pwa-ui-shared/Sheet';import{footer,updateInsetBackgroundColor,updateFooterHeight}from"./Footer.style";var APP_FOOTER_ID='AppFooter';var DATA_IGNORED='data-footer-inset-update-ignore';/**
+import React,{useRef,useEffect,useCallback}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{UIEvents}from'@shopgate/engage/core/events';import{getAbsoluteHeight}from'@shopgate/engage/core/helpers';import{SHEET_EVENTS}from'@shopgate/engage/components';import*as classes from"./Footer.style";import{handleSafeAreaInsets,updateFooterHeight}from"./helpers";import{APP_FOOTER_ID,DATA_IGNORED}from"./constants";/**
  * The footer component.
- */var Footer=/*#__PURE__*/function(_PureComponent){function Footer(){var _this2;_classCallCheck(this,Footer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,Footer,[].concat(args));_defineProperty(_this2,"ref",React.createRef());/** Perform hide action */_defineProperty(_this2,"hide",function(){if(_this2.ref.current){updateFooterHeight(0);}});/** Perform show action */_defineProperty(_this2,"show",function(){if(_this2.ref.current){updateFooterHeight(getAbsoluteHeight(_this2.ref.current));}});return _this2;}_inherits(Footer,_PureComponent);return _createClass(Footer,[{key:"componentDidMount",value:function componentDidMount(){var _this3=this;this.performFooterUpdate();var observer=new MutationObserver(function(mutations){var update=mutations.filter(function(mutation){return mutation.target.getAttribute(DATA_IGNORED)!=='true';}).length>0;if(update){_this3.performFooterUpdate();}});observer.observe(this.ref.current,{attributes:true,childList:true,subtree:true});UIEvents.addListener(SHEET_EVENTS.OPEN,this.hide);UIEvents.addListener(SHEET_EVENTS.CLOSE,this.show);}/** @inheritDoc */},{key:"componentWillUnmount",value:function componentWillUnmount(){UIEvents.removeListener(SHEET_EVENTS.OPEN,this.hide);UIEvents.removeListener(SHEET_EVENTS.CLOSE,this.show);}},{key:"getInsetBackgroundColor",value:/**
-   * Retrieves the background color for the footer inset.
-   * @param {NodeList} elements The DOM elements to inspect.
-   * @returns {string|null}
-   */function getInsetBackgroundColor(elements){var _this4=this;/**
-     * The background color of the bottom inset needs to identical to the last entry of the footer.
-     * So we loop backwards to the elements to find the first visible one.
-     */var color=Array.from(elements).reverse().reduce(function(result,element){var ignore=element.getAttribute(DATA_IGNORED)==='true';if(result||ignore){// Nothing to do, since the color was already determined or the element can be ignored.
-return result;}if(element.id===APP_FOOTER_ID){// Inspect core portal.
-return _this4.getInsetBackgroundColor(element.children);}if('clientHeight'in element){// Take the background color of the last visible element from the end of the footer.
-return getStyle(element,'backgroundColor');}// Nothing happened within this loop - proceed with the next one.
-return result;},null);if(color==='rgba(0, 0, 0, 0)'||color==='transparent'){return null;}return color||null;}},{key:"performFooterUpdate",value:/**
-   * Performs an update of the footer: background color, height.
-   */function performFooterUpdate(){if(this.ref.current){updateFooterHeight(getAbsoluteHeight(this.ref.current));updateInsetBackgroundColor(this.getInsetBackgroundColor(this.ref.current.children));}}/**
-   * Checks if the footer has visible content.
-   * @returns {boolean}
-   */},{key:"hasVisibleContent",value:function hasVisibleContent(){if(this.ref.current){var elements=this.ref.current.parentElement.querySelectorAll("div.".concat(footer.toString()," > *:not(#").concat(APP_FOOTER_ID,"), #").concat(APP_FOOTER_ID," > *"));return Array.from(elements).filter(function(element){return element.getAttribute(DATA_IGNORED)!=='true'&&element.clientHeight>0;}).length>0;}return false;}/**
-   * @returns {JSX}
-   */},{key:"render",value:function render(){return React.createElement("div",{className:"".concat(footer," engage__footer"),ref:this.ref},React.createElement(Portal,{name:APP_FOOTER_CONTENT_BEFORE}),React.createElement("div",{id:APP_FOOTER_ID},this.props.children),React.createElement(Portal,{name:APP_FOOTER_CONTENT_AFTER}));}}]);}(PureComponent);_defineProperty(Footer,"defaultProps",{children:null/**
-   * Sets up the DOM Mutation Observer to take care that the footer inset always has the correct
-   * background color, which matches the background color of the last element within the footer.
-   */});export default Footer;
+ * @param {Object} props The component props.
+ * @returns {JSX.Element}
+ */var Footer=function Footer(_ref){var children=_ref.children;var footerRef=useRef(null);var performFooterUpdate=useCallback(function(){handleSafeAreaInsets(footerRef.current);updateFooterHeight(getAbsoluteHeight(footerRef.current));},[]);var handleShow=useCallback(function(){updateFooterHeight(getAbsoluteHeight(footerRef.current));},[]);var handleHide=useCallback(function(){updateFooterHeight(0);},[]);useEffect(function(){UIEvents.addListener(SHEET_EVENTS.OPEN,handleHide);UIEvents.addListener(SHEET_EVENTS.CLOSE,handleShow);return function(){UIEvents.removeListener(SHEET_EVENTS.OPEN,handleHide);UIEvents.removeListener(SHEET_EVENTS.CLOSE,handleShow);};},[handleHide,handleShow]);useEffect(function(){performFooterUpdate();var observer=new MutationObserver(function(mutations){var update=mutations.filter(function(mutation){return mutation.target.getAttribute(DATA_IGNORED)!=='true';}).length>0;if(update){performFooterUpdate();}});observer.observe(footerRef.current,{childList:true,subtree:true,attributes:true,attributeFilter:['style','class']});return function(){observer.disconnect();};},[performFooterUpdate]);return React.createElement("div",{className:classNames(classes.footer,'engage__footer')},React.createElement("div",{id:APP_FOOTER_ID,ref:footerRef},children));};Footer.defaultProps={children:null};export default Footer;

package/components/Footer/Footer.style.js

@@ -1,7 +1 @@
-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/helpers/scrollContainer';var style=document.documentElement.style;/**
- * Updates the background color of the bottom inset.
- * @param {string} color The new background color
- */export var updateInsetBackgroundColor=function updateInsetBackgroundColor(color){if(style.getPropertyValue('--footer-inset-background-color')!==color){style.setProperty('--footer-inset-background-color',color);}};/**
- * Update the footer height
- * @param {number} height height
- */export var updateFooterHeight=function updateFooterHeight(height){var inset=Number(style.getPropertyValue('--safe-area-inset-bottom').replace(/\D/g,''));var footerHeight="".concat(inset+height,"px");if(style.getPropertyValue('--footer-height')!==footerHeight){style.setProperty('--footer-height',footerHeight);}};export var footer=css(_extends({bottom:0,flexShrink:1,position:'relative',zIndex:1},!useScrollContainer()?{position:'sticky'}:{},{':after':{backgroundColor:'var(--footer-inset-background-color, var(--page-background-color))',height:'var(--safe-area-inset-bottom)',content:' ',display:'inherit',position:'relative',zIndex: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);}import{css}from'glamor';import{useScrollContainer}from'@shopgate/engage/core/helpers';export var footer=css(_extends({bottom:0,flexShrink:1,position:'relative',zIndex:1},!useScrollContainer()?{position:'sticky'}:{}));

package/components/Footer/constants.js

@@ -0,0 +1 @@
+export var APP_FOOTER_ID='AppFooter';export var DATA_IGNORED='data-footer-inset-update-ignore';

package/components/Footer/helpers.js

@@ -0,0 +1,75 @@
+import{logger,isDev}from'@shopgate/engage/core/helpers';import{DATA_IGNORED}from"./constants";/**
+ * Determines if an element is visually present in the DOM.
+ * Checks for display, visibility, opacity, and transform-based hiding.
+ *
+ * @param {HTMLElement} el The element to evaluate.
+ * @returns {boolean} True if the element is visually visible; false otherwise.
+ */export var isElementVisible=function isElementVisible(el){if(!el||!(el instanceof HTMLElement))return false;var style=window.getComputedStyle(el);if(style.display==='none'||style.visibility==='hidden'||parseFloat(style.opacity)===0)return false;var transform=style.transform;if(transform&&transform!=='none'){var match=transform.match(/translateY\((-?\d+)(px)?\)/);if(match){var translateY=parseInt(match[1],10);if(translateY>window.innerHeight)return false;}}return true;};/**
+ * Finds the widest nested element inside a given container that has a background color
+ * explicitly set via CSS (ignores transparent, inherited, or unset values), and returns
+ * that background color.
+ *
+ * @param {HTMLElement} container The parent element to search within. Must be an actual DOM node.
+ * @returns {string|null} The detected background color (e.g., "rgb(255, 0, 0)")
+ */export var getElementBackgroundColor=function getElementBackgroundColor(container){if(!container){return null;}var widestElement=null;var maxWidth=-Infinity;/**
+   * Recursively traverses the DOM tree starting from the given node,
+   * tracking the widest element that has a background color explicitly set via CSS.
+   *
+   * @param {HTMLElement} node The DOM node to begin traversal from.
+   */function walk(node){if(!(node instanceof HTMLElement))return;var style=window.getComputedStyle(node);var bgColor=style.backgroundColor;var isStyledColor=bgColor&&!['transparent','rgba(0, 0, 0, 0)','inherit','initial','unset'].includes(bgColor);var rect=node.getBoundingClientRect();if(isElementVisible(node)&&isStyledColor&&rect.width>maxWidth){maxWidth=rect.width;widestElement=node;}Array.from(node.children).forEach(walk);}walk(container);if(widestElement){var result=window.getComputedStyle(widestElement).backgroundColor;return result;}return null;};/**
+ * Checks if any of the provided class names reference the custom property in any loaded stylesheet.
+ *
+ * @param {string[]} classList Array of class names to check.
+ * @param {string} customProp The custom property to search for in the stylesheets.
+ * @returns {boolean} True if any class rule uses the custom property.
+ */var classNamesUseCustomProp=function classNamesUseCustomProp(classList,customProp){var allRules=Array.from(document.styleSheets).filter(function(sheet){try{return sheet.cssRules;}catch(e){return false;// Skip cross-origin or restricted stylesheets
+}}).flatMap(function(sheet){return Array.from(sheet.cssRules||[]);});// eslint-disable-next-line no-restricted-syntax
+var _iteratorNormalCompletion=true;var _didIteratorError=false;var _iteratorError=undefined;try{for(var _iterator=allRules[Symbol.iterator](),_step;!(_iteratorNormalCompletion=(_step=_iterator.next()).done);_iteratorNormalCompletion=true){var rule=_step.value;// eslint-disable-next-line no-continue
+if(!rule.selectorText||!rule.cssText.includes("var(".concat(customProp,")")))continue;// eslint-disable-next-line no-restricted-syntax
+var _iteratorNormalCompletion2=true;var _didIteratorError2=false;var _iteratorError2=undefined;try{for(var _iterator2=classList[Symbol.iterator](),_step2;!(_iteratorNormalCompletion2=(_step2=_iterator2.next()).done);_iteratorNormalCompletion2=true){var className=_step2.value;if(rule.selectorText.includes(".".concat(className))){return true;}}}catch(err){_didIteratorError2=true;_iteratorError2=err;}finally{try{if(!_iteratorNormalCompletion2&&_iterator2["return"]!=null){_iterator2["return"]();}}finally{if(_didIteratorError2){throw _iteratorError2;}}}}}catch(err){_didIteratorError=true;_iteratorError=err;}finally{try{if(!_iteratorNormalCompletion&&_iterator["return"]!=null){_iterator["return"]();}}finally{if(_didIteratorError){throw _iteratorError;}}}return false;};/**
+ * Checks if a single element uses the custom property via inline styles or class-based rules.
+ *
+ * @param {HTMLElement} el The element to check.
+ * @param {string} customProp The CSS custom property to search for.
+ * @returns {boolean} True if the element uses the custom property.
+ */var elementUsesCustomProp=function elementUsesCustomProp(el,customProp){var _el$getAttribute;if(!(el instanceof Element))return false;var styleAttr=(_el$getAttribute=el.getAttribute)===null||_el$getAttribute===void 0?void 0:_el$getAttribute.call(el,'style');if(styleAttr&&styleAttr.includes("var(".concat(customProp,")"))){return true;}var classList=Array.from(el.classList||[]);return classList.length>0&&classNamesUseCustomProp(classList,customProp);};/**
+ * Checks if an element or any of its descendants use the custom property.
+ *
+ * @param {HTMLElement} el The root element to inspect.
+ * @param {string} customProp The CSS custom property to look for.
+ * @returns {boolean} True if the element or any descendant uses the custom property.
+ */var elementOrDescendantsUseCustomProp=function elementOrDescendantsUseCustomProp(el,customProp){// Check if the element itself uses the custom property
+if(elementUsesCustomProp(el,customProp))return true;var descendants=el.querySelectorAll('*');// eslint-disable-next-line no-restricted-syntax
+var _iteratorNormalCompletion3=true;var _didIteratorError3=false;var _iteratorError3=undefined;try{for(var _iterator3=descendants[Symbol.iterator](),_step3;!(_iteratorNormalCompletion3=(_step3=_iterator3.next()).done);_iteratorNormalCompletion3=true){var node=_step3.value;// eslint-disable-next-line no-continue
+if(!(node instanceof Element))continue;if(elementUsesCustomProp(node,customProp))return true;}}catch(err){_didIteratorError3=true;_iteratorError3=err;}finally{try{if(!_iteratorNormalCompletion3&&_iterator3["return"]!=null){_iterator3["return"]();}}finally{if(_didIteratorError3){throw _iteratorError3;}}}return false;};/**
+ * Returns footer entries that do NOT have safe area insets applied,
+ * either on themselves or in any of their descendants.
+ *
+ * @param {HTMLElement[]} footerElements The footer elements to check.
+ * @returns {HTMLElement[]} An array of direct children that do not use safe area insets.
+ */var getFooterEntriesWithoutSafeAreaInsets=function getFooterEntriesWithoutSafeAreaInsets(footerElements){return footerElements.filter(function(child){return!elementOrDescendantsUseCustomProp(child,'--safe-area-inset-bottom');});};/**
+ * Searches for footer elements that do not have safe area insets applied, and adds a fallback.
+ * @param {HTMLElement} footerEl The footer element whose children are to be checked.
+ */export var handleSafeAreaInsets=function handleSafeAreaInsets(footerEl){if(!footerEl||!(footerEl instanceof HTMLElement)){return;}var directChildren=Array.from(footerEl.children);// Filter out elements that where already handled before
+var childrenToInspect=directChildren.filter(function(child){return child.getAttribute('data-has-safe-area-inset')!=='true';}).filter(function(child){return child.getAttribute(DATA_IGNORED)!=='true';});// Detect footer elements without safe area insets
+var childrenWithoutInsets=getFooterEntriesWithoutSafeAreaInsets(childrenToInspect);// Apply fallback and mark the elements as handled
+childrenWithoutInsets.forEach(function(child){child.style.setProperty('padding-bottom','var(--safe-area-inset-bottom)');child.style.setProperty('background-color',getElementBackgroundColor(child));child.setAttribute('data-has-safe-area-inset','true');});if(isDev&&childrenWithoutInsets.length>0){logger.warn('Footer elements without safe area insets detected. Please use the "--safe-area-inset-bottom" CSS custom property for bottom insets.',childrenWithoutInsets);}// Mark all other elements which already had insets as handled
+directChildren.filter(function(child){return childrenWithoutInsets.indexOf(child)===-1;}).forEach(function(child){if(!child.hasAttribute('data-has-safe-area-inset')){child.setAttribute('data-has-safe-area-inset','true');}});};var style=document.documentElement.style;/**
+ * Update the footer height custom property
+ * @param {number} height height
+ */export var updateFooterHeight=function updateFooterHeight(height){// The TabBar is positioned with `position: fixed`, so it doesn’t contribute to the measured
+// height of the Footer. Additionally, it’s sometimes animated in/out, which makes dynamic
+// measurement via JavaScript more complex and error-prone.
+//
+// To simplify everything, we include the --tabbar-height CSS custom property to the calculation
+// of the --footer-height value.
+var footerHeight="max(".concat(height,"px, var(--tabbar-height, 0px))");if(style.getPropertyValue('--footer-height')!==footerHeight){style.setProperty('--footer-height',footerHeight);}// The View component wraps every app page and applies a bottom offset to centrally manage
+// safe area insets across screens.
+//
+// If the measured footer height is > 0px, it means the footer is rendering content that already
+// accounts for the safe area, so no additional offset is needed.
+//
+// If the measured footer height is 0px, the footer is either empty or only contains the tab bar
+// (which is measured via the CSS variable --footer-height). In that case, we still need to apply
+// an offset equal to the larger of the bottom safe area inset or the tab bar height.
+var pageContentOffset=height===0?'max(var(--footer-height), var(--safe-area-inset-bottom))':'0px';if(style.getPropertyValue('--page-content-offset-bottom')!==pageContentOffset){style.setProperty('--page-content-offset-bottom',pageContentOffset);}};

package/components/ScrollHeader/index.js

@@ -1,5 +1,5 @@
-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 _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,useCallback,useEffect}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{viewScroll$}from'@shopgate/engage/core/streams';import{root,scrolledIn,scrolledOut,transition}from"./style";/**
+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 _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}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{useScrollDirectionChange}from'@shopgate/engage/core/hooks';import{root,scrolledIn,scrolledOut,transition}from"./style";/**
  * Scroll Header component
  * @param {Object} props props
  * @returns {JSX}
- */function ScrollHeader(_ref){var className=_ref.className,children=_ref.children,hideOnScroll=_ref.hideOnScroll,scrollOffset=_ref.scrollOffset;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldHideHeader=_useState2[0],setShouldHideHeader=_useState2[1];var onScroll=useCallback(function(scrollEvent){var scrollTop=scrollEvent.scrollTop,scrolled=scrollEvent.scrolled,scrollOut=scrollEvent.scrollOut,scrollIn=scrollEvent.scrollIn;if(!scrolled){return;}if(!shouldHideHeader&&scrollOut&&scrollTop>=scrollOffset){setShouldHideHeader(true);}if(shouldHideHeader&&scrollIn){setShouldHideHeader(false);}},[scrollOffset,shouldHideHeader]);useEffect(function(){if(hideOnScroll){var subscription=viewScroll$.subscribe(onScroll);return function(){return subscription.unsubscribe();};}return undefined;});return React.createElement("div",{className:classNames(root,transition,className,_defineProperty(_defineProperty({},scrolledIn,!shouldHideHeader),scrolledOut,shouldHideHeader))},children);}ScrollHeader.defaultProps={className:null,hideOnScroll:true,scrollOffset:100};export default ScrollHeader;
+ */function ScrollHeader(_ref){var className=_ref.className,children=_ref.children,hideOnScroll=_ref.hideOnScroll,scrollOffset=_ref.scrollOffset;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldHideHeader=_useState2[0],setShouldHideHeader=_useState2[1];useScrollDirectionChange({enabled:hideOnScroll,offset:scrollOffset,onScrollDown:function onScrollDown(){setShouldHideHeader(true);},onScrollUp:function onScrollUp(){setShouldHideHeader(false);}});return React.createElement("div",{className:classNames(root,transition,className,_defineProperty(_defineProperty({},scrolledIn,!shouldHideHeader),scrolledOut,shouldHideHeader))},children);}ScrollHeader.defaultProps={className:null,hideOnScroll:true,scrollOffset:100};export default ScrollHeader;

package/components/View/components/Content/index.js

@@ -23,6 +23,6 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
    * Removes the keyboardWillChange listener.
    */},{key:"componentWillUnmount",value:function componentWillUnmount(){var scrollTop;if(this.ref.current===window){scrollTop=window.scrollY;}else{scrollTop=this.ref.current.scrollTop;}router.update(this.context.id,{scrollTop:scrollTop},false);event.removeCallback(EVENT_KEYBOARD_WILL_CHANGE,this.handleKeyboardChange);}/**
    * @returns {Object}
-   */},{key:"style",get:function get(){var noScrollOnKeyboard=this.props.noScrollOnKeyboard;var keyboardHeight=this.state.keyboardHeight;var overflow='inherit';if(this.scrollContainer){overflow=noScrollOnKeyboard&&keyboardHeight>0?'hidden':'auto';}return{overflow:overflow,paddingBottom:"calc(var(--tabbar-height) + ".concat(keyboardHeight,"px)")};}},{key:"render",value:/**
+   */},{key:"style",get:function get(){var noScrollOnKeyboard=this.props.noScrollOnKeyboard;var keyboardHeight=this.state.keyboardHeight;var overflow='inherit';if(this.scrollContainer){overflow=noScrollOnKeyboard&&keyboardHeight>0?'hidden':'auto';}return{overflow:overflow,paddingBottom:"calc(var(--page-content-offset-bottom) + ".concat(keyboardHeight,"px)")};}},{key:"render",value:/**
    * @return {JSX.Element}
    */function render(){return React.createElement(Swipeable,{onSwiped:this.handleSwipe,flickThreshold:0.6,delta:10},React.createElement("article",{className:"".concat(styles," engage__view__content ").concat(this.props.className),ref:this.scrollContainer?this.ref:null,style:this.style,role:"none"},React.createElement(Helmet,{title:appConfig.shopName}),React.createElement(Above,null),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},this.props.visible?React.createElement("div",{id:"PageHeaderBelow"}):null),React.createElement(ConditionalWrapper,{condition:!this.props.noContentPortal,wrapper:function wrapper(children){return React.createElement(SurroundPortals,{portalName:VIEW_CONTENT},children);}},this.props.children),React.createElement(Below,null)));}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(props,state){if(props.visible||state.keyboardHeight===0){return null;}return{keyboardHeight:0};}}]);}(Component);_defineProperty(ViewContent,"contextType",RouteContext);_defineProperty(ViewContent,"defaultProps",{className:'',children:null,noScrollOnKeyboard:false,noContentPortal:false,noKeyboardListener:false});export default(function(props){return React.createElement(RouteContext.Consumer,null,function(_ref2){var visible=_ref2.visible,_ref2$pattern=_ref2.pattern,pattern=_ref2$pattern===void 0?'':_ref2$pattern,_ref2$is=_ref2.is404,is404=_ref2$is===void 0?false:_ref2$is;return React.createElement(ViewContent,_extends({},props,{visible:visible,className:"route_".concat(is404?'404':pattern.replace(/[:/]/g,'_'))}));});});

package/core/actions/updateStatusBarBackground.js

@@ -1,6 +1,6 @@
-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{isIos}from'@shopgate/pwa-common/selectors/client';import{updateLegacyNavigationBar}from"../helpers/updateLegacyNavigationBar";/**
- * Updates the status bar background on iOS devices.
+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{isIos}from'@shopgate/pwa-common/selectors/client';import{appSupportsAndroidEdgeToEdge}from'@shopgate/engage/core/helpers';import{updateLegacyNavigationBar}from"../helpers/updateLegacyNavigationBar";/**
+ * Updates the status bar background on iOS and Android devices that support edge-to-edge screens.
  * @param {string} color The background color.
  * @param {boolean} isDefault When set, the status bar will init with the color on next app start.
  * @return {Function} A redux thunk.
- */export default function updateStatusBarBackground(color){var isDefault=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;return function(dispatch,getState){if(!isIos(getState())){return;}updateLegacyNavigationBar(_extends({},color&&{statusBarBackground:color},{isDefault:isDefault}));};}
+ */export default function updateStatusBarBackground(color){var isDefault=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;return function(dispatch,getState){if(!isIos(getState())&&!appSupportsAndroidEdgeToEdge()){return;}updateLegacyNavigationBar(_extends({},color&&{statusBarBackground:color},{isDefault:isDefault}));};}

package/core/constants/appFeatures.js

@@ -1 +1 @@
-export var APP_FEATURE_PUSH_OPT_IN='optIn';export var APP_FEATURE_COOKIE_CONSENT='cookieConsent';
+export var APP_FEATURE_PUSH_OPT_IN='optIn';export var APP_FEATURE_COOKIE_CONSENT='cookieConsent';export var APP_FEATURE_ANDROID_EDGE_TO_EDGE='androidEdgeToEdge';

package/core/helpers/appFeatures.js

@@ -1,15 +1,24 @@
-import{APP_FEATURE_PUSH_OPT_IN,APP_FEATURE_COOKIE_CONSENT}from'@shopgate/engage/core/constants';import{hasSGJavaScriptBridge,hasWebBridge,hasNewServices}from'@shopgate/engage/core/helpers';/**
+import{APP_FEATURE_PUSH_OPT_IN,APP_FEATURE_COOKIE_CONSENT,APP_FEATURE_ANDROID_EDGE_TO_EDGE}from'@shopgate/engage/core/constants';import{hasSGJavaScriptBridge,hasWebBridge,hasNewServices}from'@shopgate/engage/core/helpers';/**
+ * Checks if a specific feature flag is enabled.
+ *
+ * @param {string} category The top-level category of the featureFlags object
+ * (e.g., 'Push', 'Analytics', 'StatusBar').
+ * @param {string} flag  The feature flag constant to look for.
+ * @returns {boolean}
+ */function isFeatureFlagEnabled(category,flag){var _window,_window$SGAppInfo,_window$SGAppInfo$fea,_window$SGAppInfo$fea2,_window$SGAppInfo$fea3;// Check if app provides the feature flags of the requested category
+var flags=(_window=window)===null||_window===void 0?void 0:(_window$SGAppInfo=_window.SGAppInfo)===null||_window$SGAppInfo===void 0?void 0:(_window$SGAppInfo$fea=_window$SGAppInfo.featureFlags)===null||_window$SGAppInfo$fea===void 0?void 0:(_window$SGAppInfo$fea2=_window$SGAppInfo$fea[category])===null||_window$SGAppInfo$fea2===void 0?void 0:(_window$SGAppInfo$fea3=_window$SGAppInfo$fea2['1'])===null||_window$SGAppInfo$fea3===void 0?void 0:_window$SGAppInfo$fea3.flags;// CHeck if the feature flag is provided
+return Array.isArray(flags)&&flags.includes(flag);}/**
  * Determines if the app supports the push opt-in feature
  * @returns {boolean}
- */export var appSupportsPushOptIn=function appSupportsPushOptIn(){var _window,_window$SGAppInfo,_window$SGAppInfo$fea,_window$SGAppInfo$fea2,_window$SGAppInfo$fea3;if(hasWebBridge()||hasNewServices()){// Not push notifications in browser mode. Deactivated for new system for now
+ */export var appSupportsPushOptIn=function appSupportsPushOptIn(){if(hasWebBridge()||hasNewServices()){// Not push notifications in browser mode. Deactivated for new system for now
 return false;}if(!hasSGJavaScriptBridge()){// Always supported in development
-return true;}if(!Array.isArray((_window=window)===null||_window===void 0?void 0:(_window$SGAppInfo=_window.SGAppInfo)===null||_window$SGAppInfo===void 0?void 0:(_window$SGAppInfo$fea=_window$SGAppInfo.featureFlags)===null||_window$SGAppInfo$fea===void 0?void 0:(_window$SGAppInfo$fea2=_window$SGAppInfo$fea.Push)===null||_window$SGAppInfo$fea2===void 0?void 0:(_window$SGAppInfo$fea3=_window$SGAppInfo$fea2['1'])===null||_window$SGAppInfo$fea3===void 0?void 0:_window$SGAppInfo$fea3.flags)){// Not supported on app versions that don't provide the featureFlags object
-return false;}// Supported when the feature flags contain the push opt-in flag
-return window.SGAppInfo.featureFlags.Push['1'].flags.includes(APP_FEATURE_PUSH_OPT_IN);};/**
+return true;}return isFeatureFlagEnabled('Push',APP_FEATURE_PUSH_OPT_IN);};/**
  * Determines if the app supports the cookie consent feature
  * @returns {boolean}
- */export var appSupportsCookieConsent=function appSupportsCookieConsent(){var _window2,_window2$SGAppInfo,_window2$SGAppInfo$fe,_window2$SGAppInfo$fe2,_window2$SGAppInfo$fe3;if(hasWebBridge()){// Deactivated in browser mode for now
+ */export var appSupportsCookieConsent=function appSupportsCookieConsent(){if(hasWebBridge()){// Deactivated in browser mode for now
 return false;}if(!hasSGJavaScriptBridge()){// Always supported in development
-return true;}if(!Array.isArray((_window2=window)===null||_window2===void 0?void 0:(_window2$SGAppInfo=_window2.SGAppInfo)===null||_window2$SGAppInfo===void 0?void 0:(_window2$SGAppInfo$fe=_window2$SGAppInfo.featureFlags)===null||_window2$SGAppInfo$fe===void 0?void 0:(_window2$SGAppInfo$fe2=_window2$SGAppInfo$fe.Analytics)===null||_window2$SGAppInfo$fe2===void 0?void 0:(_window2$SGAppInfo$fe3=_window2$SGAppInfo$fe2['1'])===null||_window2$SGAppInfo$fe3===void 0?void 0:_window2$SGAppInfo$fe3.flags)){// Not supported on app versions that don't provide the featureFlags object
-return false;}// Supported when the feature flags contain the cookie consent flag
-return window.SGAppInfo.featureFlags.Analytics['1'].flags.includes(APP_FEATURE_COOKIE_CONSENT);};
+return true;}return isFeatureFlagEnabled('Analytics',APP_FEATURE_COOKIE_CONSENT);};/**
+ * Determines if the app supports Android with edge-to-edge screens
+ * @returns {boolean}
+ */export var appSupportsAndroidEdgeToEdge=function appSupportsAndroidEdgeToEdge(){if(hasWebBridge()||!hasSGJavaScriptBridge()){// Deactivated in browser mode and development for now
+return false;}return isFeatureFlagEnabled('StatusBar',APP_FEATURE_ANDROID_EDGE_TO_EDGE);};

package/core/helpers/updateLegacyNavigationBar.js

@@ -1,6 +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 Color from'color';import{isAvailable,StatusBar}from'@shopgate/native-modules';import broadcastEvent from'@shopgate/pwa-core/commands/broadcastEvent';/**
+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 Color from'color';import{isAvailable,StatusBar}from'@shopgate/native-modules';import{broadcastEvent}from'@shopgate/engage/core/commands';import{isDev}from'@shopgate/engage/core/helpers';import{UIEvents}from'@shopgate/engage/core/events';/**
  * Updates the styles of the navigation bar of iOS devices.
  * @param {Object} options Options for the status bar.
- */export var updateLegacyNavigationBar=function updateLegacyNavigationBar(){var options=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var targetTab=options.targetTab||'main';var isDefault=options.isDefault;var styles=_extends({},options.color&&{color:options.color},{},options.background&&{background:options.background},{},options.buttonColor&&{buttonColor:options.buttonColor},{},options.buttonColorDisabled&&{buttonColorDisabled:options.buttonColorDisabled},{},options.statusBarBackground&&{statusBarBackground:options.statusBarBackground});if(!styles.statusBarBackground&&styles.background){styles.statusBarBackground=styles.background;}var statusBarStyle;if(options.statusBarStyle){statusBarStyle=options.statusBarStyle;}else if(styles.statusBarBackground){statusBarStyle=Color(styles.statusBarBackground).isDark()?'light':'dark';}// Status bar update via native-modules deactivated for now since it doesn't work
+ */export var updateLegacyNavigationBar=function updateLegacyNavigationBar(){var options=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var targetTab=options.targetTab||'main';var isDefault=options.isDefault;var styles=_extends({},options.color&&{color:options.color},{},options.background&&{background:options.background},{},options.buttonColor&&{buttonColor:options.buttonColor},{},options.buttonColorDisabled&&{buttonColorDisabled:options.buttonColorDisabled},{},options.statusBarBackground&&{statusBarBackground:options.statusBarBackground});if(!styles.statusBarBackground&&styles.background){styles.statusBarBackground=styles.background;}var statusBarStyle;if(options.statusBarStyle){statusBarStyle=options.statusBarStyle;}else if(styles.statusBarBackground){if(styles.statusBarBackground==='transparent'){statusBarStyle='none';}else{statusBarStyle=Color(styles.statusBarBackground).isDark()?'light':'dark';}}// Status bar update via native-modules deactivated for now since it doesn't work
 // reliable when opening a page inside the In-App-Browser.
-if(false&&isAvailable()){var style=statusBarStyle==='dark'?'dark-content':'light-content';StatusBar.setBarStyle({style:style});if(styles.statusBarBackground){StatusBar.setBackgroundColor({color:styles.statusBarBackground});}return;}broadcastEvent({event:'updateNavigationBarStyle',parameters:[_extends({},statusBarStyle&&{statusBarStyle:statusBarStyle},{},isDefault&&{isDefault:isDefault},{targetTab:targetTab,styles:styles})]});};
+if(false&&isAvailable()){var style=statusBarStyle==='dark'?'dark-content':'light-content';StatusBar.setBarStyle({style:style});if(styles.statusBarBackground){StatusBar.setBackgroundColor({color:styles.statusBarBackground});}return;}var payload=_extends({},statusBarStyle&&{statusBarStyle:statusBarStyle},{},isDefault&&{isDefault:isDefault},{targetTab:targetTab,styles:styles});broadcastEvent({event:'updateNavigationBarStyle',parameters:[payload]});if(isDev){// Dispatch the payload in dev as regular event, so that simulated top inset can adopt the color
+UIEvents.emit('devInternalUpdateStatusBarStyle',payload);}};

package/core/hooks/events/index.js

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

package/core/hooks/events/useLongPress.js

@@ -0,0 +1,25 @@
+import{useRef,useCallback}from'react';/**
+ * @typedef {Object} LongPressHandlers
+ * @property {Function} onMouseDown - Attach to `onMouseDown` event.
+ * @property {Function} onTouchStart - Attach to `onTouchStart` event.
+ * @property {Function} onMouseUp - Attach to `onMouseUp` event.
+ * @property {Function} onMouseLeave - Attach to `onMouseLeave` event.
+ * @property {Function} onTouchEnd - Attach to `onTouchEnd` event.
+ * @property {Function} onContextMenu - Attach to `onContextMenu` event to prevent the native
+ * context menu.
+ */ /**
+ * Prevents the default context menu from appearing on long press.
+ * @param {MouseEvent} e The event object.
+ */var preventContextMenu=function preventContextMenu(e){e.preventDefault();};/**
+ * Custom hook to handle long press interactions.
+ *
+ * @param {Function} callback - Function to call on long press.
+ * @param {Object} [options={}] - Configuration and lifecycle callbacks.
+ * @param {number} [options.threshold=1000] - Duration in milliseconds to trigger long press.
+ * @param {Function} [options.onStart] - Called when the press starts.
+ * @param {Function} [options.onFinish] - Called when the long press completes.
+ * @param {Function} [options.onCancel] - Called when the press is cancelled before the threshold.
+ *
+ * @returns {LongPressHandlers} An object containing event handlers for mouse and touch events.
+ */export default function useLongPress(callback){var _ref=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{},_ref$threshold=_ref.threshold,threshold=_ref$threshold===void 0?1000:_ref$threshold,onStart=_ref.onStart,onFinish=_ref.onFinish,onCancel=_ref.onCancel;var timerRef=useRef(null);var triggeredRef=useRef(false);var start=useCallback(function(e){if(onStart)onStart(e);triggeredRef.current=false;timerRef.current=setTimeout(function(){callback(e);triggeredRef.current=true;if(onFinish)onFinish(e);},threshold);},[onStart,threshold,callback,onFinish]);var cancel=useCallback(function(e){clearTimeout(timerRef.current);if(!triggeredRef.current&&onCancel){onCancel(e);}},[onCancel]);return{onMouseDown:start,onTouchStart:start,onMouseUp:cancel,onMouseLeave:cancel,onTouchEnd:cancel,// prevents right-click or long-press menu
+onContextMenu:preventContextMenu};}

package/core/hooks/events/useScrollDirectionChange.js

@@ -0,0 +1,33 @@
+var _excluded=["scrollIn","scrollOut","scrolled"],_excluded2=["scrollIn","scrollOut","scrolled"];function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import{useEffect,useRef,useCallback}from'react';import{viewScroll$}from'@shopgate/engage/core/streams';/**
+ * @typedef {Object} ViewScrollEvent
+ * @property {Event} event The original scroll event object
+ * @property {number} scrollTop Current vertical scroll position
+ * @property {number} previousScrollTop Previous scrollTop value
+ * @property {boolean} scrollDown True if scrolling down
+ * @property {boolean} scrollUp True if scrolling up
+ * @property {'up' | 'down' | null} direction Scroll direction
+ */ /**
+ * @callback ScrollCallback
+ * @param {ViewScrollEvent} event
+ * @returns {void}
+ */ /**
+ * A scroll hook that detects scroll direction changes (up/down) and
+ * triggers the appropriate callbacks. Commonly used to show/hide
+ * UI elements based on scroll behavior.
+ *
+ * @param {Object} params The hook parameters
+ * @param {boolean} params.enabled Whether the hook is active
+ * @param {number} [params.offset=100] ScrollTop threshold for down scroll triggers. When set,
+ * onScrollDown will first be triggered when the scroll position is greater than this value.
+ * @param {boolean} [params.onlyFireOnDirectionChange=true]
+ *   If true, callbacks fire only once per direction change
+ * @param {ScrollCallback} [params.onScrollUp] Triggered on scroll up
+ * @param {ScrollCallback} [params.onScrollDown] Triggered on scroll down past offset
+ */export default function useScrollDirectionChange(_ref){var enabled=_ref.enabled,_ref$offset=_ref.offset,offset=_ref$offset===void 0?100:_ref$offset,_ref$onlyFireOnDirect=_ref.onlyFireOnDirectionChange,onlyFireOnDirectionChange=_ref$onlyFireOnDirect===void 0?true:_ref$onlyFireOnDirect,onScrollUp=_ref.onScrollUp,onScrollDown=_ref.onScrollDown;var lastDirectionRef=useRef(null);var downTriggeredRef=useRef(false);var upTriggeredRef=useRef(false);/**
+   * Scroll event handler.
+   * Uses `event.direction` and triggers callbacks accordingly.
+   */var handleScroll=useCallback(/** @param {ViewScrollEvent} event The event */function(event){if(!enabled||!event.scrolled||!event.direction)return;var scrollTop=event.scrollTop,direction=event.direction;var prevDirection=lastDirectionRef.current;var directionChanged=direction!==prevDirection;// Store current direction and reset flags if direction changed
+if(directionChanged){lastDirectionRef.current=direction;if(direction==='down')downTriggeredRef.current=false;if(direction==='up')upTriggeredRef.current=false;}// 🔽 Handle downward scroll
+if(direction==='down'){var shouldFire=(!onlyFireOnDirectionChange||directionChanged||!downTriggeredRef.current)&&scrollTop>=offset;if(shouldFire&&typeof onScrollDown==='function'){downTriggeredRef.current=true;// Strip internal/legacy properties
+var scrollIn=event.scrollIn,scrollOut=event.scrollOut,scrolled=event.scrolled,publicEvent=_objectWithoutProperties(event,_excluded);onScrollDown(publicEvent);}}// 🔼 Handle upward scroll
+if(direction==='up'){var _shouldFire=!onlyFireOnDirectionChange||directionChanged||!upTriggeredRef.current;if(_shouldFire&&typeof onScrollUp==='function'){upTriggeredRef.current=true;var _scrollIn=event.scrollIn,_scrollOut=event.scrollOut,_scrolled=event.scrolled,_publicEvent=_objectWithoutProperties(event,_excluded2);onScrollUp(_publicEvent);}}},[enabled,offset,onlyFireOnDirectionChange,onScrollUp,onScrollDown]);useEffect(function(){if(!enabled)return undefined;var subscription=viewScroll$.subscribe(handleScroll);return function(){return subscription.unsubscribe();};},[enabled,handleScroll]);}

package/core/hooks/index.js

@@ -1 +1 @@
-export{useAsyncMemo}from"./useAsyncMemo";export{useRoute}from"./useRoute";export{useTheme}from"./useTheme";export{useApp}from"./useApp";export{useCurrentProduct}from"./useCurrentProduct";export{useNavigation}from"./useNavigation";export{usePageConfig}from"./usePageConfig";export{usePageSettings}from"./usePageSettings";export{useWidgetConfig}from"./useWidgetConfig";export{useWidgetSettings}from"./useWidgetSettings";export{useWidgetStyles}from"./useWidgetStyles";export*from"./html";export{useScroll}from"./useScroll";export{usePrevious}from"./usePrevious";export{useResponsiveValue}from'@shopgate/engage/components/ResponsiveContainer/hooks';
+export*from"./layout";export*from"./events";export{useAsyncMemo}from"./useAsyncMemo";export{useRoute}from"./useRoute";export{useTheme}from"./useTheme";export{useApp}from"./useApp";export{useCurrentProduct}from"./useCurrentProduct";export{useNavigation}from"./useNavigation";export{usePageConfig}from"./usePageConfig";export{usePageSettings}from"./usePageSettings";export{useWidgetConfig}from"./useWidgetConfig";export{useWidgetSettings}from"./useWidgetSettings";export{useWidgetStyles}from"./useWidgetStyles";export*from"./html";export{usePrevious}from"./usePrevious";export{useResponsiveValue}from'@shopgate/engage/components/ResponsiveContainer/hooks';

package/core/hooks/layout/index.js

@@ -0,0 +1 @@
+export{default as useElementSize}from"./useElementSize";

package/core/hooks/layout/useElementSize.js

@@ -0,0 +1,26 @@
+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{useState,useEffect,useRef}from'react';import throttle from'lodash/throttle';/**
+ * @typedef {Object} ElementSize
+ * @property {number} height - The element's height in pixels.
+ * @property {number} [width] - The element's width in pixels (optional).
+ */ /**
+ * @typedef {Object} UseElementSizeOptions
+ * @property {number} [throttleMs=100] - Throttle delay in milliseconds.
+ * @property {boolean} [includeWidth=false] - Whether to measure the element's width.
+ */ /**
+ * Tracks the height (and optionally width) of a DOM element using ResizeObserver,
+ * with a fallback to window resize and MutationObserver in older browsers.
+ *
+ * @param {React.RefObject<HTMLElement>} ref - A ref to the element being measured.
+ * @param {UseElementSizeOptions} [options={}] - Optional settings.
+ * @returns {ElementSize} The current height (and optionally width) of the element.
+ */export default function useElementSize(ref){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var _options$throttleMs=options.throttleMs,throttleMs=_options$throttleMs===void 0?100:_options$throttleMs,_options$includeWidth=options.includeWidth,includeWidth=_options$includeWidth===void 0?false:_options$includeWidth;/**
+   * Holds the current element size in state.
+   */var _useState=useState(_extends({height:0},includeWidth&&{width:0})),_useState2=_slicedToArray(_useState,2),size=_useState2[0],setSize=_useState2[1];/**
+   * Tracks the most recent measured size to prevent unnecessary state updates.
+   */var sizeRef=useRef(size);useEffect(function(){var element=ref.current;if(!element)return undefined;/**
+     * Measures the current size of the element and updates state if it changed.
+     */var updateSize=function updateSize(){var newHeight=element.offsetHeight;var newWidth=includeWidth?element.offsetWidth:undefined;var hasChanged=newHeight!==sizeRef.current.height||includeWidth&&newWidth!==sizeRef.current.width;if(hasChanged){var newSize=_extends({height:newHeight},includeWidth?{width:newWidth}:{});sizeRef.current=newSize;setSize(newSize);}};/**
+     * Throttles the update function to limit how often measurements occur.
+     */var throttledUpdate=throttle(updateSize,throttleMs);/**
+     * Sets up ResizeObserver or fallback observers to trigger measurement.
+     */var cleanup=function cleanup(){};if('ResizeObserver'in window){var resizeObserver=new ResizeObserver(throttledUpdate);resizeObserver.observe(element);updateSize();cleanup=function cleanup(){resizeObserver.disconnect();throttledUpdate.cancel();};}else{window.addEventListener('resize',throttledUpdate);var mutationObserver=new MutationObserver(throttledUpdate);mutationObserver.observe(element,{childList:true,subtree:true,characterData:true});updateSize();cleanup=function cleanup(){window.removeEventListener('resize',throttledUpdate);mutationObserver.disconnect();throttledUpdate.cancel();};}return cleanup;},[ref,throttleMs,includeWidth]);return size;}

package/development/action-creators/index.js

@@ -0,0 +1 @@
+export*from"./settings";export*from"./storage";

package/development/action-creators/settings.js

@@ -0,0 +1,9 @@
+import{DEVELOPMENT_TOOLS_TOGGLE_INSETS,DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT}from"../constants";/**
+ * Toggles the simulation of iOS safe area insets.
+ * @param {boolean} visible Whether the insets should be visible or not.
+ * @returns {Object} The action object.
+ */export var toggleInsets=function toggleInsets(){var visible=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;return{type:DEVELOPMENT_TOOLS_TOGGLE_INSETS,visible:visible};};/**
+ * Toggles the highlighting of the simulated iOS safe area insets.
+ * @param {boolean} visible Whether the insets should be visible or not.
+ * @returns {Object} The action object.
+ */export var toggleInsetHighlight=function toggleInsetHighlight(){var visible=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;return{type:DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT,visible:visible};};

package/development/action-creators/storage.js

@@ -0,0 +1,6 @@
+import{DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE}from"../constants";/**
+ * Updates the status bar style storage where latest payload from the updateNavigationBarStyle
+ * app event is stored.
+ * @param {boolean} style The event payload
+ * @returns {Object} The action object.
+ */export var updateStatusBarStyleStorage=function updateStatusBarStyleStorage(){var style=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};return{type:DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE,style:style};};

package/development/components/DevelopmentTools/DevelopmentTools.js

@@ -0,0 +1,6 @@
+import React,{memo}from'react';import PropTypes from'prop-types';import{isDev}from'@shopgate/engage/core/helpers';import Shortcuts from"./Shortcuts";import SimulatedInsets from"../SimulatedInsets";/**
+ * Provides development tools for the app.
+ * @param {Object} props The component props.
+ * @param {React.ReactNode} props.children The child components.
+ * @returns {JSX.Element}
+ */var DevelopmentTools=function DevelopmentTools(_ref){var children=_ref.children;if(!isDev){return children;}return React.createElement(React.Fragment,null,React.createElement(Shortcuts,null),React.createElement(SimulatedInsets,null,children));};export default memo(DevelopmentTools);

package/development/components/DevelopmentTools/Shortcuts.js

@@ -0,0 +1,4 @@
+import{useSelector,useDispatch}from'react-redux';import{toggleInsets}from'@shopgate/engage/development/action-creators';import{getAreSimulatedInsetsInjected}from'@shopgate/engage/development/selectors';import{useShortcut}from"./hooks";/**
+ * The Shortcuts component maps shortcuts to actions in development mode.
+ * @returns {JSX.Element}
+ */var Shortcuts=function Shortcuts(){var dispatch=useDispatch();var areInsetsInjected=useSelector(getAreSimulatedInsetsInjected);useShortcut('ctrl+i',function(){dispatch(toggleInsets(!areInsetsInjected));});return null;};export default Shortcuts;

package/development/components/DevelopmentTools/hooks.js

@@ -0,0 +1,8 @@
+import{useEffect,useCallback}from'react';/**
+ * Hook to handle a single keyboard shortcut.
+ * Supports both 'cmd' (meta) and 'ctrl' keys explicitly.
+ *
+ * @param {string} shortcut - Shortcut string using mac-style notation, e.g. 'cmd+i'.
+ * @param {Function} callback - Function to call when the shortcut is triggered.
+ */export function useShortcut(shortcut,callback){var normalizeShortcut=useCallback(function(){return shortcut.toLowerCase().split('+').map(function(k){return k.trim();}).sort().join('+');},[shortcut]);var handleKeyDown=useCallback(function(event){var keys=[];if(event.ctrlKey)keys.push('ctrl');if(event.metaKey)keys.push('cmd');// Treat meta as cmd
+if(event.altKey)keys.push('alt');if(event.shiftKey)keys.push('shift');var key=event.key.toLowerCase();if(!['control','meta','alt','shift'].includes(key)){keys.push(key);}var pressed=keys.sort().join('+');if(pressed===normalizeShortcut()){event.preventDefault();callback(event);}},[callback,normalizeShortcut]);useEffect(function(){window.addEventListener('keydown',handleKeyDown);return function(){return window.removeEventListener('keydown',handleKeyDown);};},[handleKeyDown]);}

package/development/components/DevelopmentTools/index.js

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

package/development/components/SimulatedInsets/SimulatedInsetBottom.js

@@ -0,0 +1,7 @@
+var _excluded=["highlightInset","onClick"];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;}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React,{useMemo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{css}from'glamor';var classes={container:css({position:'fixed',bottom:0,display:'flex',justifyContent:'center',alignItems:'center',height:'var(--safe-area-inset-bottom)',width:'100%',zIndex:10000000,pointerEvents:'auto',transition:'background 0.2s ease'}),containerHighlight:css({background:'rgba(255, 0, 0, 0.7)'}),handle:css({width:120,height:3,borderRadius:3,background:'rgba(0, 0, 0, 0.4)',border:'1px solid rgba(255, 255, 255, 0.5)',boxSizing:'content-box'})};/**
+ * Renders a simulated iOS bottom inset in development.
+ * @param {Object} props The component props.
+ * @param {boolean} props.highlightInset Whether the inset is highlighted.
+ * @param {Function} props.onClick The function to call when the inset is clicked.
+ * @returns {JSX.Element}
+ */var SimulatedInsetBottom=function SimulatedInsetBottom(_ref){var highlightInset=_ref.highlightInset,onClick=_ref.onClick,props=_objectWithoutProperties(_ref,_excluded);var containerClasses=useMemo(function(){return classNames(classes.container,_defineProperty({},classes.containerHighlight,highlightInset));},[highlightInset]);return React.createElement("div",_extends({"aria-hidden":true,role:"presentation",className:containerClasses},props,{onClick:onClick}),React.createElement("div",{className:classes.handle}));};export default SimulatedInsetBottom;

package/development/components/SimulatedInsets/SimulatedInsetTop.js

@@ -0,0 +1,12 @@
+var _excluded=["highlightInset","onClick"];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;}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 _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React,{useState,useEffect,useMemo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{useSelector}from'react-redux';import{css}from'glamor';import{getStatusBarStyleStorage}from'@shopgate/engage/development/selectors';var classes={container:css({position:'fixed',top:0,display:'flex',justifyContent:'space-between',alignItems:'center',height:'var(--safe-area-inset-top)',width:'100%',zIndex:10000000,pointerEvents:'auto',transition:'background 0.2s ease',fontSize:'16px'}),containerHighlight:css({background:'rgba(255, 0, 0, 0.7)'}),styleLight:css({color:'white'}),styleDark:css({color:'black'}),styleNone:css({color:'transparent'}),info:css({flex:1,textAlign:'center',fontWeight:500}),notch:css({flex:1,background:'black',height:'calc(var(--safe-area-inset-top) - 16px)',maxWidth:150,borderRadius:16,border:'1px solid rgba(255, 255, 255, 0.5)'})};/**
+ * Creates a human readable time string to mimic the iOS clock.
+ * @returns {string} The current time in a human readable format.
+ */var getTime=function getTime(){var now=new Date();return now.toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'});};/**
+ * Renders a simulated iOS top inset in development.
+ * @param {Object} props The component props.
+ * @param {boolean} props.highlightInset Whether the inset is highlighted.
+ * @param {Function} props.onClick The function to call when the inset is clicked.
+ * @returns {JSX.Element}
+ */var SimulatedInsetTop=function SimulatedInsetTop(_ref){var highlightInset=_ref.highlightInset,onClick=_ref.onClick,props=_objectWithoutProperties(_ref,_excluded);// State to hold the current time string for the status bar
+var _useState=useState(getTime()),_useState2=_slicedToArray(_useState,2),time=_useState2[0],setTime=_useState2[1];// Effect to update the time on regular intervals
+useEffect(function(){var interval=setInterval(function(){setTime(getTime());},10*1000);return function(){return clearInterval(interval);};},[]);var _useSelector=useSelector(getStatusBarStyleStorage),statusBarStyle=_useSelector.statusBarStyle;var containerClasses=useMemo(function(){return classNames(classes.container,_defineProperty(_defineProperty(_defineProperty(_defineProperty({},classes.containerHighlight,highlightInset),classes.styleDark,statusBarStyle==='dark'),classes.styleLight,statusBarStyle==='light'),classes.styleNone,statusBarStyle==='none'));},[highlightInset,statusBarStyle]);return React.createElement("div",_extends({"aria-hidden":true,role:"presentation",className:classNames(containerClasses)},props,{onClick:onClick}),React.createElement("div",{className:classes.info},time),React.createElement("div",{className:classes.notch}),React.createElement("div",{className:classes.info},"5G"));};export default SimulatedInsetTop;

package/development/components/SimulatedInsets/SimulatedInsets.js

@@ -0,0 +1,6 @@
+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,{useCallback}from'react';import{useSelector,useDispatch}from'react-redux';import PropTypes from'prop-types';import{useLongPress}from'@shopgate/engage/core/hooks';import{getAreSimulatedInsetsInjected,getIsInsetHighlightVisible}from'@shopgate/engage/development/selectors';import{toggleInsetHighlight,toggleInsets}from'@shopgate/engage/development/action-creators';import SimulatedInsetTop from"./SimulatedInsetTop";import SimulatedInsetBottom from"./SimulatedInsetBottom";/**
+ * Simulates iOS insets in development mode.
+ * @param {Object} props The component props.
+ * @param {React.ReactNode} props.children The child components.
+ * @returns {JSX.Element}
+ */var SimulatedInsets=function SimulatedInsets(_ref){var children=_ref.children;var hasSimulatedSafeAreaInsets=useSelector(getAreSimulatedInsetsInjected);var dispatch=useDispatch();var highlightInset=useSelector(getIsInsetHighlightVisible);var handleClick=useCallback(function(){dispatch(toggleInsetHighlight(!highlightInset));},[dispatch,highlightInset]);var attrs=useLongPress(function(){dispatch(toggleInsets(!hasSimulatedSafeAreaInsets));});return React.createElement(React.Fragment,null,hasSimulatedSafeAreaInsets&&React.createElement(SimulatedInsetTop,_extends({onClick:handleClick,highlightInset:highlightInset},attrs)),children,hasSimulatedSafeAreaInsets&&React.createElement(SimulatedInsetBottom,_extends({onClick:handleClick,highlightInset:highlightInset},attrs)));};export default SimulatedInsets;

package/development/components/SimulatedInsets/index.js

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

package/development/components/index.js

@@ -0,0 +1 @@
+export{default as DevelopmentTools}from"./DevelopmentTools";

package/development/constants/actionTypes.js

@@ -0,0 +1 @@
+export var DEVELOPMENT_TOOLS_TOGGLE_INSETS='DEVELOPMENT_TOOLS_TOGGLE_INSETS';export var DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT='DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT';export var DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE='DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE';

package/development/constants/index.js

@@ -0,0 +1 @@
+export*from"./actionTypes";

package/development/reducers/index.js

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

package/development/reducers/settings.js

@@ -0,0 +1,10 @@
+import{produce}from'immer';import{isDev}from'@shopgate/engage/core/helpers';import{DEVELOPMENT_TOOLS_TOGGLE_INSETS,DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT}from"../constants";/**
+ * @typedef {Object} DevToolsSettingsState
+ * @property {boolean} showInsets
+ * @property {boolean} showInsetHighlight
+ */ /** @type DevToolsSettingsState */var initialState={showInsets:null,showInsetHighlight:false};/**
+ * The reducer for all development tools settings related states.
+ * @param {Object} state The application state.
+ * @param {Object} action The redux action.
+ * @returns {Object}
+ */export default function settingsReducer(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:initialState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(/** @param {DevToolsSettingsState} draft The draft */function(draft){if(!isDev){return;}switch(action.type){case DEVELOPMENT_TOOLS_TOGGLE_INSETS:{draft.showInsets=action.visible;break;}case DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT:{draft.showInsetHighlight=action.visible;break;}default:break;}});/* eslint-enable no-param-reassign */return producer(state);}

package/development/reducers/storage.js

@@ -0,0 +1,9 @@
+import{produce}from'immer';import{isDev}from'@shopgate/engage/core/helpers';import{DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE}from"../constants";/**
+ * @typedef {Object} DevToolsStorageState
+ * @property {Object} statusBarStyle
+ */ /** @type DevToolsStorageState */var initialState={statusBarStyle:{styles:{}}};/**
+ * The reducer for all developer tools storage related states.
+ * @param {Object} state The application state.
+ * @param {Object} action The redux action.
+ * @returns {Object}
+ */export default function storageReducer(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:initialState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(/** @param {DevToolsStorageState} draft The draft */function(draft){if(!isDev){return;}switch(action.type){case DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE:{draft.statusBarStyle=action.style;break;}default:break;}});/* eslint-enable no-param-reassign */return producer(state);}

package/development/selectors/index.js

@@ -0,0 +1 @@
+export*from"./settings";export*from"./storage";

package/development/selectors/settings.js

@@ -0,0 +1,21 @@
+import{createSelector}from'reselect';import MobileDetect from'mobile-detect';import{isDev as isDevelopment,hasSGJavaScriptBridge}from'@shopgate/engage/core/helpers';var md=new MobileDetect(navigator.userAgent);/**
+ * Retrieves the development settings state from the store.
+ * @param {Object} state The current application state.
+ * @return {Object} The development settings state.
+ */var getState=function getState(state){return state.development.settings;};/**
+ * Creates a selector to determine if development mode is enabled.
+ * @type {(state: any) => boolean}
+ */export var getIsDev=createSelector(function(){return isDevelopment;});/**
+ * Creates a selector to determine if the simulated iOS insets are supposed to be shown.
+ * @type {(state: any) => boolean}
+ */export var getAreInsetsVisible=createSelector(getIsDev,getState,function(isDev,settings){if(!isDev){return false;}return settings.showInsets;});/**
+ * Creates a selector to determine if the inset highlight is visible.
+ * @type {(state: any) => boolean}
+ */export var getIsInsetHighlightVisible=createSelector(getIsDev,getState,function(isDev,settings){if(!isDev){return false;}return settings.showInsetHighlight;});/**
+ * Creates a selector to check if simulated safe area insets are supposed to be injected.
+ * @type {(state: any) => boolean}
+ */export var getAreSimulatedInsetsInjected=createSelector(getIsDev,getAreInsetsVisible,function(isDev,insetsVisible){// No insets injected if the app is not in development mode.
+if(!isDev){return false;}// No insets injected if PWA is running inside the app
+if(hasSGJavaScriptBridge()){return false;}// If the state contains a bool value, respect is.
+if(typeof insetsVisible==='boolean'){return insetsVisible;}// Show insets on simulated iOS devices by default if insets decision is not set.
+return insetsVisible===null&&md.os()==='iOS';});

package/development/selectors/storage.js

@@ -0,0 +1,16 @@
+import{createSelector}from'reselect';/**
+ * Retrieves the development storage state from the store.
+ * @param {Object} state The current application state.
+ * @return {Object} The development storage state.
+ */var getState=function getState(state){return state.development.storage;};/**
+ * @typedef {Object} StatusBarStyleStyles
+ * @property {string} statusBarBackground Current background color of the app bar
+ */ /**
+ * @typedef {Object} StatusBarStyle
+ * @property {boolean} isDefault Whether the style is the default one which was initially applied
+ * @property {"light"|"dark"} statusBarStyle The status style for the iOS status bar
+ * @property {StatusBarStyleStyles} styles Additional styles for the status bar
+ */ /**
+ * Creates a selector that returns the current status bar style object from the storage.
+ * @type {(state: any) => StatusBarStyle}
+ */export var getStatusBarStyleStorage=createSelector(getState,function(state){return state.statusBarStyle;});

package/development/streams/index.js

@@ -0,0 +1 @@
+export*from"./insets";

package/development/streams/insets.js

@@ -0,0 +1,4 @@
+import{main$}from'@shopgate/engage/core/streams';import{DEVELOPMENT_TOOLS_TOGGLE_INSETS}from"../constants";/**
+ * Gets triggered after the simulated page insets were updated
+ * @type {Observable}
+ */export var simulatedPageInsetsDidUpdate$=main$.filter(function(_ref){var action=_ref.action;return action.type===DEVELOPMENT_TOOLS_TOGGLE_INSETS;});

package/development/subscriptions/index.js

@@ -0,0 +1,6 @@
+import{appWillStart$}from'@shopgate/engage/core/streams';import{UIEvents}from'@shopgate/engage/core/events';import{updateStatusBarStyleStorage}from'@shopgate/engage/development/action-creators';/**
+ * Development subscriptions
+ * @param {Function} subscribe The subscribe function
+ */export default function development(subscribe){subscribe(appWillStart$,function(_ref){var dispatch=_ref.dispatch;// Listen for the app event which updates the status bar style and store it into the
+// development storage redux store.
+UIEvents.addListener('devInternalUpdateStatusBarStyle',function(event){dispatch(updateStatusBarStyleStorage(event));});});}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.26.0",
+  "version": "7.27.0-beta.1",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -16,12 +16,12 @@
   ],
   "dependencies": {
     "@shopgate/native-modules": "^1.0.0-beta.22",
-    "@shopgate/pwa-common": "7.26.0",
-    "@shopgate/pwa-common-commerce": "7.26.0",
-    "@shopgate/pwa-core": "7.26.0",
-    "@shopgate/pwa-ui-ios": "7.26.0",
-    "@shopgate/pwa-ui-material": "7.26.0",
-    "@shopgate/pwa-ui-shared": "7.26.0",
+    "@shopgate/pwa-common": "7.27.0-beta.1",
+    "@shopgate/pwa-common-commerce": "7.27.0-beta.1",
+    "@shopgate/pwa-core": "7.27.0-beta.1",
+    "@shopgate/pwa-ui-ios": "7.27.0-beta.1",
+    "@shopgate/pwa-ui-material": "7.27.0-beta.1",
+    "@shopgate/pwa-ui-shared": "7.27.0-beta.1",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",

package/core/hooks/useScroll.js

@@ -1,7 +0,0 @@
-import _throttle from"lodash/throttle";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{useEffect,useState,useCallback}from'react';/**
- *
- * @param {Function} callback callback
- * @param {Object} [element] element
- */export function useScroll(callback,element){var _useState=useState(0),_useState2=_slicedToArray(_useState,2),setScrollPosition=_useState2[1];var previousScrollTop=0;/**
-   * Scroll handler
-   */var handleDocumentScroll=useCallback(_throttle(function(){var container=element||document.documentElement||document.body;var currentScrollTop=container.scrollY===undefined?container.scrollTop:container.scrollY;setScrollPosition(function(previousPosition){previousScrollTop=previousPosition;return currentScrollTop;});callback({previousScrollTop:previousScrollTop,currentScrollTop:currentScrollTop});},250),[setScrollPosition,element,callback]);useEffect(function(){(element||window).addEventListener('scroll',handleDocumentScroll);return function(){return(element||window).removeEventListener('scroll',handleDocumentScroll);};},[handleDocumentScroll,element]);}