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

package/core/selectors/shopSettings.js

@@ -0,0 +1,25 @@
+import{createSelector}from'reselect';import{WISHLIST_MODE_PERSIST_ON_ADD,SHOP_SETTING_WISHLIST_MODE,SHOP_SETTING_IMAGES,SHOP_SETTING_IMAGES_PRODUCT_PLACEHOLDER,SHOP_SETTING_IMAGES_CATEGORY_PLACEHOLDER,SHOP_SETTING_IMAGES_FAVICON,SHOP_SETTING_NUMBER_OF_ADDRESS_LINES,SHOP_SETTING_GOOGLE_SITE_VERIFICATION_CODE,SHOP_SETTINGS_SHOW_CATEGORY_IMAGES,SHOP_SETTING_REGISTRATION_MODE,SHOP_SETTING_REGISTRATION_MODE_EXTENDED,SHOP_SETTING_LOAD_WISHLIST_ON_APP_START_ENABLED,SHOP_SETTING_WISHLIST_ITEM_QUANTITY_ENABLED,SHOP_SETTING_WISHLIST_ITEM_NOTES_ENABLED,SHOP_SETTING_SHOW_WISHLIST_ITEMS_COUNT_BADGE}from"../constants/shopSettings";/**
+ * Retrieves the shopSettings state from the store.
+ * @param {Object} state The current application state.
+ * @return {Object} The locations state.
+ */export var getState=function getState(state){var _state$settings;return(state===null||state===void 0?void 0:(_state$settings=state.settings)===null||_state$settings===void 0?void 0:_state$settings.shopSettings)||{};};/**
+ * Creates a selector to retrieve a single shop setting.
+ * @param {string} key The key of the shop setting
+ * @param {*} [fallback=null] The fallback value when no value can be determined.
+ * @returns {Function}
+ */export var makeGetShopSettingByKey=function makeGetShopSettingByKey(key){var fallback=arguments.length>1&&arguments[1]!==undefined?arguments[1]:null;return createSelector(getState,function(state){return typeof(state===null||state===void 0?void 0:state[key])!=='undefined'?state===null||state===void 0?void 0:state[key]:fallback;});};/**
+ * Creates a selector to retrieve multiple shop setting.
+ * @param {Array} [keys=[]] Optional keys to filter.
+ * @returns {Function}
+ */export var makeGetShopSettings=function makeGetShopSettings(){var keys=arguments.length>0&&arguments[0]!==undefined?arguments[0]:[];return createSelector(getState,function(state){var result=Object.keys(state).filter(function(key){if(Array.isArray(keys)&&keys.length>0){return keys.includes(key);}return true;}).reduce(function(acc,key){if(state===null||state===void 0?void 0:state[key]){acc[key]=state[key];}return acc;},{});return result;});};/** Selects the current wishlist mode */export var getWishlistMode=makeGetShopSettingByKey(SHOP_SETTING_WISHLIST_MODE,WISHLIST_MODE_PERSIST_ON_ADD);var getShopSettingImages=makeGetShopSettingByKey(SHOP_SETTING_IMAGES,{});/**
+ * Selects the placeholder image for products
+ */export var getProductImagePlaceholder=createSelector(getShopSettingImages,function(images){return(images===null||images===void 0?void 0:images[SHOP_SETTING_IMAGES_PRODUCT_PLACEHOLDER])||null;});/**
+ * Selects the placeholder image for products
+ */export var getCategoryImagePlaceholder=createSelector(getShopSettingImages,function(images){return(images===null||images===void 0?void 0:images[SHOP_SETTING_IMAGES_CATEGORY_PLACEHOLDER])||null;});/**
+ * Selects the placeholder image for products
+ */export var getFavicon=createSelector(getShopSettingImages,function(images){return(images===null||images===void 0?void 0:images[SHOP_SETTING_IMAGES_FAVICON])||null;});/**
+ * Selects the number of address lines for registration / address forms
+ */export var getNumberOfAddressLines=makeGetShopSettingByKey(SHOP_SETTING_NUMBER_OF_ADDRESS_LINES,2);export var getGoogleSiteVerificationCode=makeGetShopSettingByKey(SHOP_SETTING_GOOGLE_SITE_VERIFICATION_CODE,'');export var getShowCategoryImages=makeGetShopSettingByKey(SHOP_SETTINGS_SHOW_CATEGORY_IMAGES,true);/**
+ * Creates a selector to retrieve the current active registration mode.
+ * When the selector returns "simple" the form will not contain any address related fields.
+ */export var getRegistrationMode=makeGetShopSettingByKey(SHOP_SETTING_REGISTRATION_MODE,SHOP_SETTING_REGISTRATION_MODE_EXTENDED);export var getWishlistItemQuantityEnabled=makeGetShopSettingByKey(SHOP_SETTING_WISHLIST_ITEM_QUANTITY_ENABLED,false);export var getWishlistItemNotesEnabled=makeGetShopSettingByKey(SHOP_SETTING_WISHLIST_ITEM_NOTES_ENABLED,false);export var getLoadWishlistOnAppStartEnabled=makeGetShopSettingByKey(SHOP_SETTING_LOAD_WISHLIST_ON_APP_START_ENABLED,true);export var getShowWishlistItemsCountBadge=createSelector(getLoadWishlistOnAppStartEnabled,makeGetShopSettingByKey(SHOP_SETTING_SHOW_WISHLIST_ITEMS_COUNT_BADGE,true),function(loadWishlistOnAppStartEnabled,showWishlistItemsCountBadge){return loadWishlistOnAppStartEnabled?showWishlistItemsCountBadge:false;});

package/core/streams/app.js

@@ -1,4 +1,4 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _toArray(arr){return _arrayWithHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter);}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import{Observable}from'rxjs/Observable';import{ACTION_RESET}from'@virtuous/conductor';import{main$}from'@shopgate/pwa-common/streams/main';import{routeDidEnter$}from'@shopgate/pwa-common/streams';import{routeDidEnter}from'@shopgate/pwa-common/action-creators';import{getRouterStack}from'@shopgate/engage/core/selectors';import{RELOAD_APP}from"../constants";import{historyReset}from"../actions";/**
+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 _toArray(arr){return _arrayWithHoles(arr)||_iterableToArray(arr)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArray(iter){if(Symbol.iterator in Object(iter)||Object.prototype.toString.call(iter)==="[object Arguments]")return Array.from(iter);}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import{Observable}from'rxjs/Observable';import{ACTION_RESET}from'@virtuous/conductor';import{main$}from'@shopgate/pwa-common/streams/main';import{routeDidEnter$}from'@shopgate/pwa-common/streams';import{routeDidEnter}from'@shopgate/pwa-common/action-creators';import{getRouterStack}from'@shopgate/engage/core/selectors';import{RELOAD_APP}from"../constants";import{historyReset}from"../actions";/**
  * Gets triggered when the app is supposed to be reloaded
  * @type {Observable}
  */export var reloadApp$=main$.filter(function(_ref){var action=_ref.action;return action.type===RELOAD_APP;}).switchMap(function(params){var dispatch=params.dispatch,getState=params.getState;var _getRouterStack=getRouterStack(getState()),_getRouterStack2=_toArray(_getRouterStack),initialRoute=_getRouterStack2[0],otherRoutes=_getRouterStack2.slice(1);if(!otherRoutes.length){// When the initial route is the only route inside the router stack, routeDidEnter$ will

package/core/streams/index.js

@@ -1,4 +1,4 @@
-export*from"./app";export*from"./appPermissions";export*from'@shopgate/pwa-common/streams/main';export*from'@shopgate/pwa-common/streams/error';// --------------- APP --------------- //
+export*from"./app";export*from"./appPermissions";export*from"./optIns";export*from'@shopgate/pwa-common/streams/main';export*from'@shopgate/pwa-common/streams/error';export*from'@shopgate/pwa-common/streams/view';// --------------- APP --------------- //
 export*from'@shopgate/pwa-common/streams/app';// --------------- CLIENT --------------- //
 export*from'@shopgate/pwa-common/streams/client';// --------------- ROUTER --------------- //
 export*from'@shopgate/pwa-common/streams/router';

package/core/streams/optIns.js

@@ -0,0 +1,13 @@
+import{main$}from'@shopgate/pwa-common/streams/main';import{SOFT_OPT_IN_SHOWN,SOFT_OPT_IN_SELECTED,HARD_OPT_IN_SHOWN,HARD_OPT_IN_SELECTED}from"../constants";/**
+ * Gets triggered when a SOFT_OPT_IN_SHOWN action was dispatched
+ * @type {Observable}
+ */export var softOptInShown$=main$.filter(function(_ref){var action=_ref.action;return action.type===SOFT_OPT_IN_SHOWN;});/**
+ * Gets triggered when a SOFT_OPT_IN_SELECTED action was dispatched
+ * @type {Observable}
+ */export var softOptInSelected$=main$.filter(function(_ref2){var action=_ref2.action;return action.type===SOFT_OPT_IN_SELECTED;});/**
+ * Gets triggered when a HARD_OPT_IN_SHOWN action was dispatched
+ * @type {Observable}
+ */export var hardOptInShown$=main$.filter(function(_ref3){var action=_ref3.action;return action.type===HARD_OPT_IN_SHOWN;});/**
+ * Gets triggered when a HARD_OPT_IN_SELECTED action was dispatched
+ * @type {Observable}
+ */export var hardOptInSelected$=main$.filter(function(_ref4){var action=_ref4.action;return action.type===HARD_OPT_IN_SELECTED;});

package/core/subscriptions/app.js

@@ -1,7 +1,8 @@
-import{appWillStart$}from'@shopgate/pwa-common/streams';import{configuration}from'@shopgate/engage/core/collections';import{CONFIGURATION_COLLECTION_KEY_BASE_URL}from'@shopgate/engage/core/constants';import{reloadApp$}from"../streams";import{reloadApp}from"../action-creators";/**
+import{appWillStart$}from'@shopgate/engage/core/streams';import{configuration}from'@shopgate/engage/core/collections';import{hasNewServices,appSupportsAndroidEdgeToEdge,updateAndroidNavigationBarColor}from'@shopgate/engage/core/helpers';import{CONFIGURATION_COLLECTION_KEY_BASE_URL}from'@shopgate/engage/core/constants';import{appConfig}from'@shopgate/engage';import{reloadApp$}from"../streams";import{reloadApp}from"../action-creators";var androidNavigationBarDefaultColor=appConfig.androidNavigationBarDefaultColor;/**
  * App subscriptions
  * @param {Function} subscribe The subscribe function
- */export default function app(subscribe){subscribe(appWillStart$,function(_ref){var dispatch=_ref.dispatch;// Add global function to enable PWA reload from the console
-window.reloadSGApp=function(){dispatch(reloadApp());};});subscribe(reloadApp$,function(){// A deployed app can only be reloaded on the base url. So we first set this as current route
+ */export default function app(subscribe){subscribe(appWillStart$,function(_ref){var dispatch=_ref.dispatch;console.log("%c\u2139\uFE0F PWA uses ".concat(hasNewServices()?'NEW':'OLD'," services"),'color: blue');// Add global function to enable PWA reload from the console
+window.reloadSGApp=function(){dispatch(reloadApp());};if(appSupportsAndroidEdgeToEdge()&&androidNavigationBarDefaultColor){// Set the navigation bar color for android devices with edge-to-edge screens
+updateAndroidNavigationBarColor({color:androidNavigationBarDefaultColor});}});subscribe(reloadApp$,function(){// A deployed app can only be reloaded on the base url. So we first set this as current route
 // before the reload happens.
 window.history.replaceState({},null,configuration.get(CONFIGURATION_COLLECTION_KEY_BASE_URL));window.location.reload();});}

package/core/validation/index.js

@@ -0,0 +1 @@
+export{validate}from"./validation";export{useValidation}from"./validation.hooks";

package/core/validation/validation.hooks.js

@@ -0,0 +1,4 @@
+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,useCallback}from'react';import{validate as validator}from"./validation";/**
+ * @param {Object} constraints The rules.
+ * @returns {{ valid: ?boolean, validationErrors: ?Object, validate: Function }}
+ */export function useValidation(constraints){var _useState=useState(null),_useState2=_slicedToArray(_useState,2),valid=_useState2[0],setValid=_useState2[1];var _useState3=useState(undefined),_useState4=_slicedToArray(_useState3,2),validationErrors=_useState4[0],setValidationErrors=_useState4[1];useEffect(function(){setValid(null);setValidationErrors(undefined);},[constraints]);var validate=useCallback(function(values){var _validator=validator(values,constraints),isValid=_validator.valid,errors=_validator.validationErrors;setValid(isValid);setValidationErrors(errors);return isValid;},[constraints]);var reset=useCallback(function(){setValidationErrors();},[]);return{valid:valid,validationErrors:validationErrors,validate:validate,reset:reset};}

package/core/validation/validation.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;}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 moment from'moment';import validateJs from'validate.js';validateJs.options={format:'detailed',fullMessages:false};validateJs.extend(validateJs.validators.datetime,{// The value is guaranteed not to be null or undefined but otherwise it
+// could be anything.
+parse:function parse(value){return+moment.utc(value);},// Input is a unix timestamp
+format:function format(value,options){var format=options.dateOnly?'YYYY-MM-DD':'YYYY-MM-DD hh:mm:ss';return moment.utc(value).format(format);}});/**
+ * @param {Object} values The values to validate.
+ * @param {Object} constraints The constraints.
+ * @returns {{ valid: boolean, validationErrors: Object }}
+ */export function validate(values,constraints){var sanitizedValues=_extends({},values);/**
+   * When the presence constrain is not set, empty strings are considered as not empty and those
+   * values will be passed through other validators like datetime, where they can cause false
+   * negatives. So we'll just convert them to null for the validator.
+   */Object.keys(sanitizedValues).forEach(function(key){var value=sanitizedValues[key];if(value===''){sanitizedValues[key]=null;}});var errors=validateJs(sanitizedValues,constraints);if(errors&&Object.keys(errors).length>0){errors=errors.reduce(function(obj,item){var _item$options;if(obj[item.attribute]){return obj;}return _extends({},obj,_defineProperty({},item.attribute,(item===null||item===void 0?void 0:(_item$options=item.options)===null||_item$options===void 0?void 0:_item$options.message)||(item===null||item===void 0?void 0:item.error)));},{});}return{valid:!errors,validationErrors:errors};}

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/favorites/components/CommentDialog/CommentDialog.js

@@ -0,0 +1,12 @@
+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,{useEffect,useState,useMemo,useCallback,useRef}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{css}from'glamor';import{getCommentDialogSettings}from'@shopgate/pwa-common-commerce/favorites/selectors';import{i18n,usePrevious}from'@shopgate/engage/core';import{Dialog,TextField}from'@shopgate/engage/components';import{broadcastLiveMessage}from'@shopgate/engage/a11y';import{closeFavoritesCommentDialog}from'@shopgate/pwa-common-commerce/favorites/action-creators';import{themeName}from'@shopgate/pwa-common/helpers/config';import{updateFavorite}from'@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';import I18n from'@shopgate/pwa-common/components/I18n';var isIos=themeName.includes('ios');/**
+ * @param {Object} state State.
+ * @returns {Object}
+ */var mapStateToProps=function mapStateToProps(state){return{settings:getCommentDialogSettings(state)};};/**
+ * @param {Object} dispatch Dispatch.
+ * @returns {Object}
+ */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{close:function close(){return dispatch(closeFavoritesCommentDialog());},updateFavoriteItem:function updateFavoriteItem(productId,listId,quantity,notes){dispatch(updateFavorite(productId,listId,quantity,notes));}};};var styles={root:css({display:'flex',flexDirection:'column'}),input:css({textAlign:'left',fontSize:'1rem'}).toString(),characterCount:css({textAlign:'right',marginTop:-16,fontSize:'0.875rem',color:'var(--color-text-medium-emphasis)'}).toString()};var MAX_CHARACTER_COUNT=250;/**
+ * @param {Object} props Props.
+ * @returns {JSX}
+ */var CommentDialog=function CommentDialog(_ref){var settings=_ref.settings,close=_ref.close,updateFavoriteItem=_ref.updateFavoriteItem;var isVisible=!!settings;var _ref2=settings||{},productId=_ref2.productId,listId=_ref2.listId,item=_ref2.item;var prevProdId=usePrevious(productId);var _useState=useState(item===null||item===void 0?void 0:item.notes),_useState2=_slicedToArray(_useState,2),value=_useState2[0],setValue=_useState2[1];// Reference to the element that triggered the dialog
+var triggerRef=useRef(null);useEffect(function(){if(prevProdId!==productId){setValue(item===null||item===void 0?void 0:item.notes);}},[item,prevProdId,productId]);useEffect(function(){if(isVisible){triggerRef.current=document.activeElement;}},[isVisible]);var handleClose=useCallback(function(){setTimeout(function(){if(triggerRef===null||triggerRef===void 0?void 0:triggerRef.current){// Focus the element that triggered the dialog after dialog (a11y improvement)
+triggerRef.current.focus();}if(!(item===null||item===void 0?void 0:item.notes)&&!!value){broadcastLiveMessage('favorites.comments.added');}if((item===null||item===void 0?void 0:item.notes)&&value!==item.notes){broadcastLiveMessage('favorites.comments.updated');}},300);close();},[close,item,value]);var handleSubmit=useCallback(function(){if((item===null||item===void 0?void 0:item.notes)!==value){updateFavoriteItem(productId,listId,undefined,value);}handleClose();},[handleClose,item,listId,productId,updateFavoriteItem,value]);var handleChange=useCallback(function(newValue){setValue(newValue);},[]);var attributes=useMemo(function(){return{style:{maxHeight:150,placeholder:i18n.text('favorites.comment_modal.label')},maxLength:MAX_CHARACTER_COUNT};},[]);if(!isVisible){return null;}return React.createElement(Dialog,{onConfirm:handleSubmit,onDismiss:handleClose,modal:{title:i18n.text("favorites.comment_modal.".concat(((item===null||item===void 0?void 0:item.notes)||'').length===0?'titleAdd':'titleEdit')),dismiss:i18n.text('favorites.comment_modal.dismiss'),confirm:i18n.text('favorites.comment_modal.confirm')}},React.createElement("div",{className:styles.root},React.createElement(TextField,_extends({name:"name"},isIos?{placeholder:i18n.text('favorites.comment_modal.label')}:{label:i18n.text('favorites.comment_modal.label')},{onChange:handleChange,value:value,className:styles.input,attributes:attributes,multiLine:true,tabIndex:0})),React.createElement(I18n.Text,{className:styles.characterCount,string:"favorites.comment_modal.characterCount","aria-hidden":true,params:{maxCount:MAX_CHARACTER_COUNT,count:(value===null||value===void 0?void 0:value.length)||0}})));};CommentDialog.defaultProps={settings:null};export default connect(mapStateToProps,mapDispatchToProps)(CommentDialog);

package/favorites/components/CommentDialog/index.js

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

package/favorites/components/FavoriteButtonWide/FavoriteButtonWide.js

@@ -0,0 +1,8 @@
+import React,{useMemo}from'react';import PropTypes from'prop-types';import{css}from'glamor';import{connect}from'react-redux';import{RippleButton}from'@shopgate/engage/components';import{i18n}from'@shopgate/engage/core';import{toggleFavoriteWithListChooser}from'@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';import{makeIsProductOnFavoriteList,hasMultipleFavoritesList}from'@shopgate/pwa-common-commerce/favorites/selectors';import{getWishlistItemQuantityEnabled}from'@shopgate/engage/core/selectors/shopSettings';import appConfig from'@shopgate/pwa-common/helpers/config';/**
+ * @param {Object} state State.
+ * @returns {Object}
+ */var makeMapStateToProps=function makeMapStateToProps(){var getIsOnList=makeIsProductOnFavoriteList(function(_,props){return props.productId;});return function(state,props){return{isOnList:getIsOnList(state,props),hasMultipleLists:hasMultipleFavoritesList(state),wishlistItemQuantityEnabled:getWishlistItemQuantityEnabled(state)};};};/**
+ * @param {Function} dispatch Dispatch
+ * @returns {Object}
+ * */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{toggle:function toggle(productId){return dispatch(toggleFavoriteWithListChooser(productId));}};};var styles={root:css({'&&':{margin:'0 0px 16px 16px',backgroundColor:'#fff',border:'1px solid var(--color-primary)',color:'var(--color-high-emphasis)',borderRadius:5,fontSize:14,textTransform:'none',padding:0}}).toString(),ripple:css({padding:'8px 16px'}).toString()};/** @returns {JSX} */var FavoriteButtonWide=function FavoriteButtonWide(_ref){var productId=_ref.productId,toggle=_ref.toggle,isOnList=_ref.isOnList,hasMultipleLists=_ref.hasMultipleLists,wishlistItemQuantityEnabled=_ref.wishlistItemQuantityEnabled;var label=useMemo(function(){// When wishlist item quantity is active, items cannot be removed via the button
+if(!isOnList||wishlistItemQuantityEnabled){return'favorites.add_to_list';}if(hasMultipleLists){return'favorites.edit_lists';}return'favorites.remove_from_list';},[hasMultipleLists,isOnList,wishlistItemQuantityEnabled]);if(!appConfig.hasFavorites){return null;}return React.createElement(RippleButton,{className:styles.root,rippleClassName:styles.ripple,type:"primary",onClick:function onClick(){return toggle(productId);}},i18n.text(label));};export default connect(makeMapStateToProps,mapDispatchToProps)(FavoriteButtonWide);

package/favorites/components/FavoriteButtonWide/index.js

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

package/favorites/components/Item/Item.js

@@ -1,10 +1,14 @@
-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)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}function _iterableToArrayLimit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_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,{useCallback,useMemo,useLayoutEffect,useState}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{css}from'glamor';import classNames from'classnames';import{MODAL_VARIANT_SELECT}from'@shopgate/pwa-ui-shared/Dialog/constants';import{ProductImage,ITEM_PATH,isBaseProduct as isBaseProductSelector,isProductOrderable,hasProductVariants,ProductListEntryProvider}from'@shopgate/engage/product';import{bin2hex,showModal as showModalAction,historyPush as historyPushAction,getThemeSettings,i18n}from'@shopgate/engage/core';import{Link,SurroundPortals}from'@shopgate/engage/components';import{FAVORITES_PRODUCT_NAME,FAVORITES_PRODUCT_PRICE,FAVORITES_ADD_TO_CART}from'@shopgate/engage/favorites';import AvailableText from'@shopgate/pwa-ui-shared/Availability';import Price from'@shopgate/pwa-ui-shared/Price';import PriceInfo from'@shopgate/pwa-ui-shared/PriceInfo';import PriceStriked from'@shopgate/pwa-ui-shared/PriceStriked';import AddToCart from'@shopgate/pwa-ui-shared/AddToCartButton';import Remove from"../RemoveButton";import ItemCharacteristics from"./ItemCharacteristics";import{FAVORITES_LIST_ITEM,FAVORITES_LIST_ITEM_ACTIONS,FAVORITES_AVAILABILITY_TEXT}from"../../constants/Portals";/**
- * The extended component props.
- * @param {Object} state The current application state.
- * @param {Object} props The current component props.
- * @return {Object} The populated component props.
- */var mapStateToProps=function mapStateToProps(state,props){return{isBaseProduct:isBaseProductSelector(state,props),hasVariants:hasProductVariants(state,props),isOrderable:isProductOrderable(state,props)};};var mapDispatchToProps={showModal:showModalAction,historyPush:historyPushAction};var styles={root:css({display:'flex',position:'relative','&:not(:last-child)':{marginBottom:48},'&:last-child':{marginBottom:16}}).toString(),imageContainer:css({flex:0.4,marginRight:18,maxWidth:170,minWidth:126}).toString(),infoContainer:css({flex:1,display:'flex',flexDirection:'column',minWidth:0}).toString(),innerInfoContainer:css({flex:1,display:'flex',flexDirection:'row',minWidth:0}),infoContainerLeft:css({flex:1,display:'flex',flexDirection:'column',minWidth:0}),infoContainerRight:css({display:'flex',flexDirection:'column',minWidth:0,marginLeft:8,alignItems:'flex-end'}),infoContainerRightTaxDisclaimer:css({marginRight:8}),title:css({fontSize:17,color:'var(--color-text-high-emphasis)',fontWeight:600,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',marginBottom:10}),actions:css({position:'absolute',bottom:-24,display:'flex',flexDirection:'row',justifyContent:'space-between',alignItems:'center',width:90}).toString(),basePrice:css({fontSize:'0.6875rem',textAlign:'right'}).toString(),availability:css({fontSize:14,fontWeight:400}).toString()};/**
+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 _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,{useCallback,useMemo,useLayoutEffect,useState,useEffect,useRef}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{css}from'glamor';import{MODAL_VARIANT_SELECT}from'@shopgate/pwa-ui-shared/Dialog/constants';import{ProductImage,ITEM_PATH,PriceInfo,isBaseProduct as isBaseProductSelector,isProductOrderable,hasProductVariants,ProductListEntryProvider}from'@shopgate/engage/product';import{bin2hex,showModal as showModalAction,historyPush as historyPushAction,getThemeSettings,i18n}from'@shopgate/engage/core';import{hasNewServices}from'@shopgate/engage/core/helpers';import{Link,TextLink,SurroundPortals}from'@shopgate/engage/components';import{makeIsRopeProductOrderable,getPreferredLocation,StockInfoLists}from'@shopgate/engage/locations';import{FAVORITES_PRODUCT_NAME,FAVORITES_PRODUCT_PRICE,FAVORITES_ADD_TO_CART,FAVORITES_AVAILABILITY_TEXT}from'@shopgate/engage/favorites';import{broadcastLiveMessage}from'@shopgate/engage/a11y';import{responsiveMediaQuery}from'@shopgate/engage/styles';import Price from'@shopgate/pwa-ui-shared/Price';import PriceStriked from'@shopgate/pwa-ui-shared/PriceStriked';import AddToCart from'@shopgate/pwa-ui-shared/AddToCartButton';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{updateFavorite}from'@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';import{openFavoritesCommentDialog}from'@shopgate/pwa-common-commerce/favorites/action-creators';import AvailableText from'@shopgate/pwa-ui-shared/Availability';import classNames from'classnames';import Remove from"../RemoveButton";import ItemCharacteristics from"./ItemCharacteristics";import ItemQuantity from"./ItemQuantity";import ItemNotes from"./ItemNotes";import{FAVORITES_LIST_ITEM,FAVORITES_NOTES,FAVORITES_QUANTITY}from"../../constants/Portals";var variables=themeConfig.variables;/**
+ * @return {Function} The extended component props.
+ */var makeMapStateToProps=function makeMapStateToProps(){var isRopeProductOrderable=makeIsRopeProductOrderable(function(state,props){var _getPreferredLocation;return(_getPreferredLocation=getPreferredLocation(state,props))===null||_getPreferredLocation===void 0?void 0:_getPreferredLocation.code;},function(state,props){return props.variantId||props.productId||null;});return function(state,props){return{isBaseProduct:isBaseProductSelector(state,props),hasVariants:hasProductVariants(state,props),isOrderable:isProductOrderable(state,props),isRopeProductOrderable:isRopeProductOrderable(state,props)};};};/**
+ * @param {Function} dispatch Dispatch.
+ * @returns {Object}
+ */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{showModal:function showModal(){return dispatch(showModalAction.apply(void 0,arguments));},historyPush:function historyPush(){return dispatch(historyPushAction.apply(void 0,arguments));},updateFavoriteItem:function updateFavoriteItem(productId,listId,quantity,notes){dispatch(updateFavorite(productId,listId,quantity,notes));},openCommentDialog:function openCommentDialog(productId,listId){return dispatch(openFavoritesCommentDialog(productId,listId));}};};var styles={root:css({display:'flex',position:'relative','&:not(:last-child)':{marginBottom:16}}).toString(),imageContainer:css(_defineProperty(_defineProperty(_defineProperty({flex:0.4,marginRight:18},responsiveMediaQuery('>=xs',{appAlways:true}),{maxWidth:120,minWidth:80}),responsiveMediaQuery('>=md',{webOnly:true}),{maxWidth:120,minWidth:80}),responsiveMediaQuery('>=md',{webOnly:true}),{width:120,flex:'none'})).toString(),infoContainer:css({flex:1,display:'flex',flexDirection:'column',flexWrap:'wrap',gap:8}).toString(),infoContainerRow:css({flexDirection:'row',display:'flex',justifyContent:'space-between'}).toString(),quantityContainer:css({flexDirection:'row',display:'flex',alignItems:'center',flexWrap:'wrap',gap:16}).toString(),priceContainer:css({minWidth:100}).toString(),priceContainerInner:css({display:'inline-block',textAlign:'right'}),price:css({justifyContent:'flex-end'}).toString(),priceInfo:css({wordBreak:'break-word',fontSize:'0.875rem',lineHeight:'0.875rem',color:'var(--color-text-low-emphasis)',padding:"".concat(variables.gap.xsmall,"px 0")}).toString(),titleWrapper:css({display:'flex',flexDirection:'column',gap:8}).toString(),titleContainer:css({marginRight:10,flex:1}).toString(),title:css({fontSize:17,fontWeight:600}).toString(),removeContainer:css({display:'flex',flexShrink:0,alignItems:'flex-start'})};/**
  * Favorite Item component
- * @return {JSX}
- */var FavoriteItem=function FavoriteItem(_ref){var _product$price,_product$price2,_product$price3,_product$price4;var listId=_ref.listId,product=_ref.product,remove=_ref.remove,addToCart=_ref.addToCart,isBaseProduct=_ref.isBaseProduct,isOrderable=_ref.isOrderable,hasVariants=_ref.hasVariants,showModal=_ref.showModal;var _ref2=getThemeSettings('AppImages')||{},gridResolutions=_ref2.ListImage;var _useState=useState(!isOrderable&&!hasVariants),_useState2=_slicedToArray(_useState,2),isDisabled=_useState2[0],setIsDisabled=_useState2[1];var currency=((_product$price=product.price)===null||_product$price===void 0?void 0:_product$price.currency)||'EUR';var defaultPrice=((_product$price2=product.price)===null||_product$price2===void 0?void 0:_product$price2.unitPrice)||0;var specialPrice=(_product$price3=product.price)===null||_product$price3===void 0?void 0:_product$price3.unitPriceStriked;var hasStrikePrice=((_product$price4=product.price)===null||_product$price4===void 0?void 0:_product$price4.discount)>0;var characteristics=(product===null||product===void 0?void 0:product.characteristics)||[];var productLink="".concat(ITEM_PATH,"/").concat(bin2hex(product.id));useLayoutEffect(function(){setIsDisabled(!isOrderable&&!hasVariants);},[hasVariants,isOrderable]);var handleAddToCart=useCallback(function(e){e.preventDefault();e.stopPropagation();if(isBaseProduct&&hasVariants){// Called for a parent product. Users needs to confirm the navigation to the PDP
-showModal({title:null,type:MODAL_VARIANT_SELECT,message:'favorites.modal.message',confirm:'favorites.modal.confirm',dismiss:'common.cancel',params:{productId:product.id}});return false;}return addToCart(e);},[addToCart,hasVariants,isBaseProduct,product.id,showModal]);var commonPortalProps=useMemo(function(){var availability=product.availability,id=product.id,name=product.name;return{availability:availability,characteristics:characteristics,id:id,name:name,listId:listId};},[characteristics,listId,product]);var ctaPortalProps=useMemo(function(){return{isLoading:false,noShadow:false,listId:listId,isBaseProduct:isBaseProduct,isDisabled:isDisabled,productId:product.id,handleRemoveFromCart:remove,handleAddToCart:handleAddToCart};},[handleAddToCart,isBaseProduct,isDisabled,listId,product.id,remove]);var taxDisclaimer=false;var priceClassNames=classNames(styles.infoContainerRight,_defineProperty({},styles.infoContainerRightTaxDisclaimer,taxDisclaimer));return/*#__PURE__*/React.createElement(ProductListEntryProvider,{productId:product.id},/*#__PURE__*/React.createElement(SurroundPortals,{portalName:FAVORITES_LIST_ITEM,portalProps:product},/*#__PURE__*/React.createElement("div",{className:styles.root},/*#__PURE__*/React.createElement(Link,{className:styles.imageContainer,component:"div",href:productLink},/*#__PURE__*/React.createElement(ProductImage,{src:product.featuredImageBaseUrl,resolutions:gridResolutions})),/*#__PURE__*/React.createElement(Link,{className:styles.infoContainer,component:"div",href:productLink},/*#__PURE__*/React.createElement(SurroundPortals,{portalName:FAVORITES_PRODUCT_NAME,portalProps:commonPortalProps},/*#__PURE__*/React.createElement("span",{className:styles.title},product.name)),/*#__PURE__*/React.createElement("div",{className:styles.innerInfoContainer},/*#__PURE__*/React.createElement("div",{className:styles.infoContainerLeft},/*#__PURE__*/React.createElement(ItemCharacteristics,{characteristics:characteristics}),/*#__PURE__*/React.createElement(SurroundPortals,{portalName:FAVORITES_AVAILABILITY_TEXT,portalProps:commonPortalProps},/*#__PURE__*/React.createElement(AvailableText,{text:commonPortalProps.availability.text,state:commonPortalProps.availability.state,showWhenAvailable:true,className:styles.availability}))),/*#__PURE__*/React.createElement("div",{className:priceClassNames},/*#__PURE__*/React.createElement(SurroundPortals,{portalName:FAVORITES_PRODUCT_PRICE,portalProps:commonPortalProps},hasStrikePrice?/*#__PURE__*/React.createElement(PriceStriked,{value:specialPrice,currency:currency}):null,/*#__PURE__*/React.createElement(Price,{currency:currency,discounted:hasStrikePrice,taxDisclaimer:taxDisclaimer,unitPrice:defaultPrice}),!!product.price.info&&/*#__PURE__*/React.createElement(PriceInfo,{text:product.price.info,className:styles.basePrice}))))),/*#__PURE__*/React.createElement("div",{className:styles.actions},/*#__PURE__*/React.createElement(SurroundPortals,{portalName:FAVORITES_LIST_ITEM_ACTIONS,portalProps:ctaPortalProps},/*#__PURE__*/React.createElement(Remove,{onClick:remove}),/*#__PURE__*/React.createElement(SurroundPortals,{portalName:FAVORITES_ADD_TO_CART,portalProps:ctaPortalProps},/*#__PURE__*/React.createElement(AddToCart,{onClick:handleAddToCart,isLoading:false,isDisabled:isDisabled,"aria-label":i18n.text('product.add_to_cart')})))))));};FavoriteItem.defaultProps={isBaseProduct:true,isOrderable:true,hasVariants:false};export default connect(mapStateToProps,mapDispatchToProps)(FavoriteItem);
+ * @return {JSX.Element}
+ */var FavoriteItem=function FavoriteItem(_ref){var _product$price,_product$price2,_product$price3;var listId=_ref.listId,product=_ref.product,notes=_ref.notes,quantity=_ref.quantity,remove=_ref.remove,addToCart=_ref.addToCart,isBaseProduct=_ref.isBaseProduct,isOrderable=_ref.isOrderable,isRopeProductOrderable=_ref.isRopeProductOrderable,hasVariants=_ref.hasVariants,showModal=_ref.showModal,historyPush=_ref.historyPush,updateFavoriteItem=_ref.updateFavoriteItem,openCommentDialog=_ref.openCommentDialog;var _ref2=getThemeSettings('AppImages')||{},gridResolutions=_ref2.ListImage;var _useState=useState(!isOrderable&&!hasVariants),_useState2=_slicedToArray(_useState,2),isDisabled=_useState2[0],setIsDisabled=_useState2[1];var currency=((_product$price=product.price)===null||_product$price===void 0?void 0:_product$price.currency)||'EUR';var defaultPrice=((_product$price2=product.price)===null||_product$price2===void 0?void 0:_product$price2.unitPrice)||0;var specialPrice=(_product$price3=product.price)===null||_product$price3===void 0?void 0:_product$price3.unitPriceStriked;var hasStrikePrice=typeof specialPrice==='number'&&specialPrice>defaultPrice;var characteristics=(product===null||product===void 0?void 0:product.characteristics)||[];var productLink="".concat(ITEM_PATH,"/").concat(bin2hex(product.id));var notesButtonRef=useRef();var _useState3=useState(quantity),_useState4=_slicedToArray(_useState3,2),internalQuantity=_useState4[0],setInternalQuantity=_useState4[1];useEffect(function(){setInternalQuantity(quantity);},[quantity]);useLayoutEffect(function(){setIsDisabled(!isOrderable&&!hasVariants);},[hasVariants,isOrderable]);var handleOpenComment=useCallback(function(e){e.preventDefault();e.stopPropagation();openCommentDialog(product.id,listId);},[listId,openCommentDialog,product.id]);var handleAddToCart=useCallback(function(e){e.preventDefault();e.stopPropagation();if(isBaseProduct&&hasVariants){// Called for a parent product. User needs to confirm the navigation to the PDP
+showModal({title:null,type:MODAL_VARIANT_SELECT,message:'favorites.modal.message',confirm:'favorites.modal.confirm',dismiss:'common.cancel',params:{productId:product.id}});return false;}if(hasNewServices()&&!isRopeProductOrderable){// Product is not orderable for ROPE. So users need to do some corrections. Just redirect.
+historyPush({pathname:productLink});return false;}broadcastLiveMessage('product.adding_item',{params:{count:1}});return addToCart(e);},[addToCart,hasVariants,historyPush,isBaseProduct,isRopeProductOrderable,product.id,productLink,showModal]);var commonPortalProps=useMemo(function(){var availability=product.availability,id=product.id,name=product.name;return{availability:availability,characteristics:characteristics,id:id,name:name,price:defaultPrice,listId:listId};},[characteristics,defaultPrice,listId,product]);var ctaPortalProps=useMemo(function(){return{isLoading:false,noShadow:false,listId:listId,isBaseProduct:isBaseProduct,isDisabled:isDisabled,productId:product.id,handleRemoveFromCart:remove,handleAddToCart:handleAddToCart};},[handleAddToCart,isBaseProduct,isDisabled,listId,product.id,remove]);var handleChangeQuantity=useCallback(function(newQuantity){// Do nothing when quantity didn't change
+if(newQuantity===quantity)return;updateFavoriteItem(product.id,listId,newQuantity,notes);},[listId,notes,product.id,quantity,updateFavoriteItem]);var handleDeleteComment=useCallback(function(event){event.preventDefault();event.stopPropagation();updateFavoriteItem(product.id,listId,quantity,'');setTimeout(function(){if(notesButtonRef===null||notesButtonRef===void 0?void 0:notesButtonRef.current){// Focus the add button after item deletion to improve a11y
+notesButtonRef.current.focus();}broadcastLiveMessage('favorites.comments.removed');},300);},[listId,product.id,quantity,updateFavoriteItem]);return React.createElement(ProductListEntryProvider,{productId:product.id},React.createElement(SurroundPortals,{portalName:FAVORITES_LIST_ITEM,portalProps:product},React.createElement("div",{className:classNames(styles.root,'engage__favorites__item')},React.createElement(Link,{className:classNames(styles.imageContainer,'engage__favorites__item__image-container'),component:"div",href:productLink,"aria-hidden":true},React.createElement(ProductImage,{className:classNames('engage__favorites__item__image'),src:product.featuredImageBaseUrl,resolutions:gridResolutions})),React.createElement("div",{className:classNames(styles.infoContainer,'engage__favorites__item__info-container')},React.createElement("div",{className:classNames(styles.infoContainerRow)},React.createElement("div",{className:styles.titleWrapper},React.createElement(SurroundPortals,{portalName:FAVORITES_PRODUCT_NAME,portalProps:commonPortalProps},React.createElement(TextLink,{href:productLink,tag:"span",className:classNames(styles.titleContainer,'engage__favorites__item__title-container')},React.createElement("span",{className:styles.title// eslint-disable-next-line react/no-danger
+,dangerouslySetInnerHTML:{__html:"".concat(product.name)}})))),React.createElement("div",{className:styles.removeContainer},React.createElement(Remove,{onClick:remove}))),React.createElement(ItemCharacteristics,{characteristics:characteristics}),!hasNewServices()?React.createElement(SurroundPortals,{portalName:FAVORITES_AVAILABILITY_TEXT,portalProps:commonPortalProps},React.createElement(AvailableText,{text:commonPortalProps.availability.text,state:commonPortalProps.availability.state,showWhenAvailable:true,className:styles.availability})):React.createElement(StockInfoLists,{product:product}),React.createElement("div",{className:styles.infoContainerRow},React.createElement("div",{className:styles.quantityContainer},React.createElement(SurroundPortals,{portalName:FAVORITES_QUANTITY,portalProps:commonPortalProps},React.createElement(ItemQuantity,{quantity:internalQuantity,onChange:handleChangeQuantity})),React.createElement(SurroundPortals,{portalName:FAVORITES_PRODUCT_PRICE,portalProps:commonPortalProps},React.createElement("div",{className:styles.priceContainer},React.createElement("div",{className:styles.priceContainerInner},hasStrikePrice?React.createElement(PriceStriked,{value:specialPrice,currency:currency}):null,React.createElement(Price,{currency:currency,discounted:hasStrikePrice,unitPrice:defaultPrice,className:styles.price})),React.createElement(PriceInfo,{product:product,currency:currency,className:styles.priceInfo})))),React.createElement(SurroundPortals,{portalName:FAVORITES_ADD_TO_CART,portalProps:ctaPortalProps},React.createElement(AddToCart,{onClick:handleAddToCart,isLoading:false,isDisabled:isDisabled,"aria-label":i18n.text('product.add_to_cart')}))),React.createElement(SurroundPortals,{portalName:FAVORITES_NOTES,portalProps:commonPortalProps},React.createElement(ItemNotes,{notes:notes,onClickDeleteComment:handleDeleteComment,onClickOpenComment:handleOpenComment,notesButtonRef:notesButtonRef}))))));};FavoriteItem.defaultProps={isBaseProduct:true,isOrderable:true,isRopeProductOrderable:true,hasVariants:false,notes:undefined,quantity:1};export default connect(makeMapStateToProps,mapDispatchToProps)(FavoriteItem);

package/favorites/components/Item/ItemCharacteristics.js

@@ -1,4 +1,4 @@
-import React from'react';import PropTypes from'prop-types';import{css}from'glamor';var styles={property:css({fontSize:14,color:'var(--color-text-low-emphasis)',fontWeight:400,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'})};/**
+import React from'react';import PropTypes from'prop-types';import{css}from'glamor';var styles={property:css({fontSize:14,color:'var(--color-text-medium-emphasis)',fontWeight:400})};/**
  * @param {Object} props The component props
  * @returns {JSX}
- */var ItemCharacteristics=function ItemCharacteristics(_ref){var characteristics=_ref.characteristics;if(!characteristics||characteristics.length===0){return null;}return/*#__PURE__*/React.createElement("ul",null,characteristics.map(function(_ref2){var label=_ref2.label,value=_ref2.value;return/*#__PURE__*/React.createElement("li",{key:"".concat(label,"-").concat(value),className:styles.property},label,': ',value);}));};ItemCharacteristics.defaultProps={characteristics:null};export default ItemCharacteristics;
+ */var ItemCharacteristics=function ItemCharacteristics(_ref){var characteristics=_ref.characteristics;if(!characteristics||characteristics.length===0){return null;}return React.createElement("ul",null,characteristics.map(function(_ref2){var label=_ref2.label,value=_ref2.value;return React.createElement("li",{key:"".concat(label,"-").concat(value),className:styles.property},label,': ',value);}));};ItemCharacteristics.defaultProps={characteristics:null};export default ItemCharacteristics;

package/favorites/components/Item/ItemNotes.js

@@ -0,0 +1,7 @@
+import React from'react';import PropTypes from'prop-types';import{css}from'glamor';import{connect}from'react-redux';import{i18n}from'@shopgate/engage/core';import{getWishlistItemNotesEnabled}from"../../../core/selectors/shopSettings";var styles={root:css({display:'flex',flexWrap:'wrap',alignItems:'center'}),addCommentButton:css({fontSize:17,color:'var(--color-secondary)',fontWeight:500,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',paddingLeft:0,paddingRight:0,textAlign:'left'}),comment:css({fontSize:17,color:'var(--color-text-high-emphasis)',fontWeight:500,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}),notes:css({paddingRight:4,fontStyle:'italic'}),buttons:css({whiteSpace:'nowrap'})};/**
+ * @return {Function} The extended component props.
+ */var makeMapStateToProps=function makeMapStateToProps(){return function(state){return{wishlistItemNotesEnabled:getWishlistItemNotesEnabled(state)};};};/**
+ *
+ * @param {Object} props The component props
+ * @returns {JSX}
+ */var ItemNotes=function ItemNotes(_ref){var wishlistItemNotesEnabled=_ref.wishlistItemNotesEnabled,notes=_ref.notes,onClickOpenComment=_ref.onClickOpenComment,onClickDeleteComment=_ref.onClickDeleteComment,notesButtonRef=_ref.notesButtonRef;if(!wishlistItemNotesEnabled){return null;}/* eslint-disable jsx-a11y/aria-role */return React.createElement("div",{className:styles.root},notes&&React.createElement("span",{role:"text"},React.createElement("span",{className:styles.comment},"".concat(i18n.text('favorites.comments.notes'),": ")),React.createElement("span",{className:styles.notes},"\"".concat(notes,"\""))),React.createElement("span",{className:styles.buttons},React.createElement("button",{type:"button",onClick:onClickOpenComment,className:styles.addCommentButton,ref:notesButtonRef},notes?i18n.text('favorites.comments.edit'):i18n.text('favorites.comments.add')),notes&&React.createElement(React.Fragment,null,React.createElement("span",{"aria-hidden":true}," | "),React.createElement("button",{type:"button",onClick:onClickDeleteComment,className:styles.addCommentButton},i18n.text('favorites.comments.delete')))));/* eslint-enable jsx-a11y/aria-role */};ItemNotes.defaultProps={notes:null,notesButtonRef:null};export default connect(makeMapStateToProps)(ItemNotes);

package/favorites/components/Item/ItemQuantity.js

@@ -0,0 +1,7 @@
+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{css}from'glamor';import{connect}from'react-redux';import{getWishlistItemQuantityEnabled}from"../../../core/selectors/shopSettings";import UnitQuantityPicker from"../../../product/components/UnitQuantityPicker/UnitQuantityPicker";var styles={root:css({width:120})};/**
+ * @return {Function} The extended component props.
+ */var makeMapStateToProps=function makeMapStateToProps(){return function(state){return{wishlistItemQuantityEnabled:getWishlistItemQuantityEnabled(state)};};};/**
+ *
+ * @param {Object} props The component props
+ * @returns {JSX}
+ */var ItemQuantity=function ItemQuantity(_ref){var wishlistItemQuantityEnabled=_ref.wishlistItemQuantityEnabled,quantity=_ref.quantity,onChange=_ref.onChange;var _useState=useState(quantity),_useState2=_slicedToArray(_useState,2),internalQuantity=_useState2[0],setInternalQuantity=_useState2[1];var handleChange=useCallback(function(newQuantity){setInternalQuantity(newQuantity);onChange(newQuantity);},[onChange]);useEffect(function(){setInternalQuantity(quantity);},[quantity]);if(!wishlistItemQuantityEnabled){return null;}return React.createElement("div",{className:styles.root},React.createElement(UnitQuantityPicker,{maxValue:99,minValue:1,maxDecimals:0,incrementStep:1,decrementStep:1,onChange:handleChange,value:internalQuantity,toggleTabBarOnFocus:true}));};export default connect(makeMapStateToProps)(ItemQuantity);

package/favorites/components/ItemFulfillmentMethod/ItemFulfillmentMethod.js

@@ -0,0 +1,4 @@
+import React from'react';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core';import{SheetList,SheetDrawer}from'@shopgate/engage/components';/**
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
+ */var ItemFulfillmentMethod=function ItemFulfillmentMethod(_ref){var isOpen=_ref.isOpen,methods=_ref.methods,onClose=_ref.onClose,onSelect=_ref.onSelect;return React.createElement(SheetDrawer,{isOpen:isOpen,title:i18n.text('favorites.fo_method_chooser.title'),onDidClose:function onDidClose(){return onClose(null);}},React.createElement(SheetList,null,methods.includes('ROPIS')?React.createElement(SheetList.Item,{title:i18n.text('locations.method.ropis'),onClick:function onClick(){return onSelect('ROPIS');}}):null,methods.includes('BOPIS')?React.createElement(SheetList.Item,{title:i18n.text('locations.method.bopis'),onClick:function onClick(){return onSelect('BOPIS');}}):null,methods.includes('directShip')?React.createElement(SheetList.Item,{title:i18n.text('locations.method.direct_ship'),onClick:function onClick(){return onSelect('directShip');}}):null));};export default ItemFulfillmentMethod;

package/favorites/components/ItemFulfillmentMethod/index.js

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

package/favorites/components/List/List.js

@@ -1,22 +1,26 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}function _iterableToArrayLimit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_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 _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);});};}import React,{Fragment,useCallback,useEffect,useState}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{css}from'glamor';import{i18n,showModal}from'@shopgate/engage/core';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{Accordion,Card,ContextMenu,SurroundPortals,RippleButton}from'@shopgate/engage/components';import{getFavoritesCount,makeGetFavoritesIdsByList,getHasMultipleFavoritesListsSupport}from'@shopgate/engage/favorites';import{ProductListTypeProvider}from'@shopgate/engage/product';import{FAVORITES_LIST_CONTEXT_MENU}from"../../constants/Portals";import Item from"../Item";import{ProductProvider}from"../../../product";import{FAVORITES_SHOW_LIMIT}from"../../constants/constants";var colors=themeConfig.colors,variables=themeConfig.variables;var styles={root:css({margin:'8px 8px 10px'}).toString(),rootNoFavoritesLists:css({background:colors.light,flexGrow:1,paddingTop:variables.gap.xsmall,paddingLeft:'16px',paddingRight:'16px'}).toString(),title:css({flex:1,textOverflow:'ellipsis',overflow:'hidden',whiteSpace:'nowrap'}).toString(),divider:css({height:1,width:'calc(100% + 32px)',backgroundColor:'rgb(234, 234, 234)',marginLeft:-16,marginRight:-16,marginBottom:16}).toString(),spacer:css({height:1,width:'calc(100% + 32px)',marginLeft:-16,marginRight:-16,marginBottom:16}).toString(),loadMoreButton:css({width:'calc(100% - 32px)',margin:'16px 16px 0 16px',borderRadius:5}).toString()};/**
- * Favorite List Label component
- * @return {JSX}
- */var FavoriteListLabel=function FavoriteListLabel(_ref){var id=_ref.id,title=_ref.title,rename=_ref.rename,remove=_ref.remove,disableRemoveList=_ref.disableRemoveList;return/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement("span",{className:styles.title},title),/*#__PURE__*/React.createElement(SurroundPortals,{portalName:FAVORITES_LIST_CONTEXT_MENU,portalProps:{id:id}},/*#__PURE__*/React.createElement(ContextMenu,null,/*#__PURE__*/React.createElement(ContextMenu.Item,{onClick:rename},i18n.text('favorites.rename_list')),/*#__PURE__*/React.createElement(ContextMenu.Item,{onClick:remove,disabled:disableRemoveList},i18n.text('favorites.remove_list')))));};/**
- * The content of a favorites list
- * @returns {JSX}
- */var FavoritesListContent=function FavoritesListContent(_ref2){var id=_ref2.id,productIds=_ref2.productIds,_addToCart=_ref2.addToCart,removeItem=_ref2.removeItem,shouldShowLoadMoreButton=_ref2.shouldShowLoadMoreButton,loadMore=_ref2.loadMore,hasMultipleFavoritesListsSupport=_ref2.hasMultipleFavoritesListsSupport;return/*#__PURE__*/ (/**
-   * TODO find a way to indicate loading of the list. products are fetched via the ProductProvider,
-   * so there is not a reliable way to determine if product fetching is done, since we might not
-   * receive a product for every list item.
-   */React.createElement(React.Fragment,null,hasMultipleFavoritesListsSupport?/*#__PURE__*/React.createElement("div",{className:styles.divider}):/*#__PURE__*/React.createElement("div",{className:styles.spacer}),productIds.length===0?/*#__PURE__*/React.createElement("span",null,i18n.text('favorites.empty')):null,/*#__PURE__*/React.createElement(ProductListTypeProvider,{type:"favoritesList"},productIds.map(function(_ref3){var productId=_ref3.productId;return/*#__PURE__*/React.createElement(ProductProvider,{productId:productId,key:productId},function(_ref4){var product=_ref4.product;return product?/*#__PURE__*/React.createElement(Item,{key:product.id,product:product,listId:id,productId:product.id,addToCart:function addToCart(e){e.preventDefault();e.stopPropagation();return _addToCart(product);},remove:function remove(e){e.preventDefault();e.stopPropagation();removeItem(product.id);}}):null;});})),shouldShowLoadMoreButton&&/*#__PURE__*/React.createElement(RippleButton,{type:"primary",className:styles.loadMoreButton,onClick:loadMore},i18n.text('favorites.load_more_button')),/*#__PURE__*/React.createElement("div",{className:styles.spacer})));};FavoritesListContent.defaultProps={hasMultipleFavoritesListsSupport:false};/**
+import _regeneratorRuntime from"@babel/runtime/regenerator";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 asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import React,{useState,useEffect,useCallback,useMemo}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{showModal}from'@shopgate/engage/core/actions';import{Accordion,Card,ConditionalWrapper}from'@shopgate/engage/components';import{makeGetFavorites,getUseGetFavoriteIdsPipeline}from'@shopgate/pwa-common-commerce/favorites/selectors';import{FAVORITES_SHOW_LIMIT}from'@shopgate/engage/favorites/constants';import ListAccordionLabel from"./ListAccordionLabel";import ListContent from"./ListContent";import styles from"./styles";import ListAccordionHeader from"./ListAccordionHeader";/**
  * @param {Object} _ State
  * @param {Object} props Props
  * @returns {Object}
- */var makeMapStateToProps=function makeMapStateToProps(_,_ref5){var id=_ref5.id;var getFavoritesIds=makeGetFavoritesIdsByList(function(){return id;});return function(state){return{favoriteIds:getFavoritesIds(state),favoritesCount:getFavoritesCount(state),hasMultipleFavoritesListsSupport:getHasMultipleFavoritesListsSupport(state)};};};/**
+ */var makeMapStateToProps=function makeMapStateToProps(_,_ref){var id=_ref.id;var getFavorites=makeGetFavorites(function(){return id;});return function(state){return{items:getFavorites(state),useGetFavoriteIdsPipeline:getUseGetFavoriteIdsPipeline(state)};};};/**
  * @param {Object} dispatch Dispatch
  * @param {Object} props The component props
  * @returns {Object}
- */var mapDispatchToProps=function mapDispatchToProps(dispatch,props){return{remove:function(){var _remove=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(id){var confirmed;return _regeneratorRuntime.wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:_context.next=2;return dispatch(showModal({message:'favorites.delete_list_modal.message',title:'favorites.delete_list_modal.title',params:{name:props.name}}));case 2:confirmed=_context.sent;if(confirmed){props.remove(id);}case 4:case"end":return _context.stop();}}},_callee);}));function remove(_x){return _remove.apply(this,arguments);}return remove;}()};};/**
+ */var mapDispatchToProps=function mapDispatchToProps(dispatch,props){return{remove:function(){var _remove=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(id){var confirmed;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.next=2;return dispatch(showModal({message:'favorites.delete_list_modal.message',title:'favorites.delete_list_modal.title',params:{name:props.name}}));case 2:confirmed=_context.sent;if(confirmed){props.remove(id);}case 4:case"end":return _context.stop();}},_callee);}));function remove(_x){return _remove.apply(this,arguments);}return remove;}()};};/**
  * Favorite List component
- * @return {JSX}
- */var FavoriteList=function FavoriteList(_ref6){var id=_ref6.id,name=_ref6.name,favoriteIds=_ref6.favoriteIds,_rename=_ref6.rename,remove=_ref6.remove,removeItem=_ref6.removeItem,addToCart=_ref6.addToCart,disableRemoveList=_ref6.disableRemoveList,hasMultipleFavoritesListsSupport=_ref6.hasMultipleFavoritesListsSupport;var _useState=useState(FAVORITES_SHOW_LIMIT),_useState2=_slicedToArray(_useState,2),offset=_useState2[0],setOffset=_useState2[1];var productIds=favoriteIds.slice(0,offset).map(function(productId){return{productId:productId};});var allFavoritesLoaded=favoriteIds.length-productIds.length>0;var _useState3=useState(allFavoritesLoaded),_useState4=_slicedToArray(_useState3,2),shouldShowLoadMoreButton=_useState4[0],setShouldShowLoadMoreButton=_useState4[1];var loadMore=useCallback(function(){setOffset(offset+FAVORITES_SHOW_LIMIT);},[offset]);useEffect(function(){setShouldShowLoadMoreButton(allFavoritesLoaded);},[offset,allFavoritesLoaded]);return hasMultipleFavoritesListsSupport?/*#__PURE__*/React.createElement(Card,{className:styles.root},/*#__PURE__*/React.createElement(Accordion,{className:"",openWithChevron:true,renderLabel:function renderLabel(){return/*#__PURE__*/React.createElement(FavoriteListLabel,{id:id,title:name,rename:function rename(newName){return _rename(id,newName);},remove:remove,disableRemoveList:disableRemoveList});},chevronPosition:"left",startOpened:true,testId:id},/*#__PURE__*/React.createElement(FavoritesListContent,{addToCart:addToCart,id:id,loadMore:loadMore,productIds:productIds,removeItem:removeItem,shouldShowLoadMoreButton:shouldShowLoadMoreButton,hasMultipleFavoritesListsSupport:hasMultipleFavoritesListsSupport}))):/*#__PURE__*/React.createElement("div",{className:styles.rootNoFavoritesLists},/*#__PURE__*/React.createElement(FavoritesListContent,{addToCart:addToCart,id:id,loadMore:loadMore,productIds:productIds,removeItem:removeItem,shouldShowLoadMoreButton:shouldShowLoadMoreButton}));};FavoriteList.defaultProps={hasMultipleFavoritesListsSupport:false};export default connect(makeMapStateToProps,mapDispatchToProps)(FavoriteList);
+ * @return {JSX.Element}
+ */var FavoriteList=function FavoriteList(_ref2){var id=_ref2.id,name=_ref2.name,items=_ref2.items,_rename=_ref2.rename,remove=_ref2.remove,removeItem=_ref2.removeItem,addToCart=_ref2.addToCart,hasMultipleFavoritesListsSupport=_ref2.hasMultipleFavoritesListsSupport,useGetFavoriteIdsPipeline=_ref2.useGetFavoriteIdsPipeline;var _useState=useState(FAVORITES_SHOW_LIMIT),_useState2=_slicedToArray(_useState,2),offset=_useState2[0],setOffset=_useState2[1];var filteredItems=useMemo(function(){/**
+     * The getFavoriteIds pipeline doesn't return full products, but only product ids. Product data
+     * is selected inside the ListContent component via the ProductProvider. To avoid requests with
+     * huge response data, the favlist items are splitted into chunks, so that the ProductProvider
+     * only has to request fresh data for each chunk.
+     *
+     * As long as not all products from the list are shown, a "Load More" button is presented to the
+     * user, which will add an additional chunk of product ids to the ListContent component.
+     */if(useGetFavoriteIdsPipeline){return items.slice(0,offset);}// When the getFavorites pipeline is used, no special handling is necessary. "items" can passed
+// the the ListContent component as they are.
+return items;},[items,offset,useGetFavoriteIdsPipeline]);var allFavoritesLoaded=useMemo(function(){if(useGetFavoriteIdsPipeline){return items.length-filteredItems.length>0;}/**
+     * In case of getFavorites pipeline is used, and all favorites are always loaded, "false" as
+     * return value might seem a bit weird, but the value is actually used to determine if the
+     * load more button is supposed to be shown (not needed if all favorites are already present).
+     */return false;},[filteredItems.length,items.length,useGetFavoriteIdsPipeline]);var _useState3=useState(allFavoritesLoaded),_useState4=_slicedToArray(_useState3,2),showLoadMoreButton=_useState4[0],setShowLoadMoreButton=_useState4[1];var handleLoadMore=useCallback(function(){setOffset(offset+FAVORITES_SHOW_LIMIT);},[offset]);useEffect(function(){setShowLoadMoreButton(allFavoritesLoaded);},[offset,allFavoritesLoaded]);return React.createElement(ConditionalWrapper,{condition:hasMultipleFavoritesListsSupport,wrapperFalsy:function wrapperFalsy(children){return React.createElement("div",{className:styles.rootNoFavoritesLists},children);},wrapper:function wrapper(children){return React.createElement(Card,{className:styles.root},React.createElement(Accordion,{className:"",renderAdditionalHeaderContent:function renderAdditionalHeaderContent(){return React.createElement(ListAccordionHeader,{rename:function rename(newName){return _rename(id,newName);},remove:remove,id:id});},renderLabel:function renderLabel(){return React.createElement(ListAccordionLabel,{title:name});},chevronPosition:"left",startOpened:true},children));}},React.createElement(ListContent,{listId:id,items:filteredItems,removeItem:removeItem,addToCart:addToCart,onLoadMore:handleLoadMore,showLoadMoreButton:showLoadMoreButton}));};FavoriteList.defaultProps={hasMultipleFavoritesListsSupport:false,useGetFavoriteIdsPipeline:false};export default connect(makeMapStateToProps,mapDispatchToProps)(FavoriteList);

package/favorites/components/List/ListAccordionHeader.js

@@ -0,0 +1,8 @@
+import React from'react';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core/helpers';import{ContextMenu,SurroundPortals}from'@shopgate/engage/components';import{FAVORITES_LIST_CONTEXT_MENU}from"../../constants";/**
+ * Favorite List Accordion header component
+ * @param {Object} props The component props
+ * @param {Function} props.rename The rename function
+ * @param {Function} props.remove The remove function
+ * @param {string} props.id The label name
+ * @return {JSX.Element}
+ */var ListAccordionHeader=function ListAccordionHeader(_ref){var rename=_ref.rename,remove=_ref.remove,id=_ref.id;return React.createElement(SurroundPortals,{portalName:FAVORITES_LIST_CONTEXT_MENU,portalProps:{id:id}},React.createElement(ContextMenu,null,React.createElement(ContextMenu.Item,{onClick:rename},i18n.text('favorites.rename_list')),React.createElement(ContextMenu.Item,{onClick:remove,disabled:id==='DEFAULT'},i18n.text('favorites.remove_list'))));};export default ListAccordionHeader;