@shopgate/engage 7.29.0-alpha.11 → 7.29.0-alpha.13

package/package.json

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

package/page/components/NotFound.js

@@ -1,3 +1,5 @@
-import React,{useCallback}from'react';import PropTypes from'prop-types';import{css}from'glamor';import{connect}from'react-redux';import RippleButton from'@shopgate/pwa-ui-shared/RippleButton';import{I18n}from'@shopgate/engage/components';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{historyPop}from'@shopgate/pwa-common/actions/router';var mapDispatchToProps={onClick:historyPop};var variables=themeConfig.variables;var styles={wrapper:css({display:'flex',justifyContent:'center',flexDirection:'column',textAlign:'center',padding:variables.gap.big,paddingTop:variables.gap.xxbig}).toString(),text:css({fontSize:'1.5rem'}).toString(),button:css({width:'100%',maxWidth:250}).toString(),buttonContainer:css({flexGrow:'0',padding:"".concat(variables.emptyPage.buttonVerticalGap,"px ").concat(variables.gap.big,"px")}).toString()};/**
- * @returns {JSX}
- */var NotFound=function NotFound(_ref){var onClick=_ref.onClick;var handleClick=useCallback(function(){onClick();},[onClick]);return React.createElement("div",{className:styles.wrapper},React.createElement(I18n.Text,{className:styles.text,string:"page.not_found"}),React.createElement("div",{className:styles.buttonContainer},React.createElement(RippleButton,{onClick:handleClick,className:styles.button,type:"secondary"},React.createElement(I18n.Text,{string:"page.continue"}))));};export default connect(null,mapDispatchToProps)(NotFound);
+import React,{useCallback}from'react';import{css}from'glamor';import{useDispatch}from'react-redux';import RippleButton from'@shopgate/pwa-ui-shared/RippleButton';import{I18n}from'@shopgate/engage/components';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{historyPop,historyResetTo}from'@shopgate/pwa-common/actions/router';import{i18n,INDEX_PATH}from"../../core";var variables=themeConfig.variables;var styles={wrapper:css({display:'flex',justifyContent:'center',flexDirection:'column',textAlign:'center',padding:variables.gap.big,paddingTop:variables.gap.xxbig}).toString(),text:css({fontSize:'1.5rem'}).toString(),button:css({width:'100%',maxWidth:250}).toString(),buttonContainer:css({flexGrow:'0',padding:"".concat(variables.emptyPage.buttonVerticalGap,"px ").concat(variables.gap.big,"px"),display:'flex',flexDirection:'column',gap:variables.gap.big,alignItems:'center'}).toString()};/**
+ * The NotFoundPage component renders a "Page Not Found" view
+ * with options to navigate back or to the home page.
+ * @returns {JSX.Element}
+ */var NotFound=function NotFound(){var dispatch=useDispatch();var handleBack=useCallback(function(){dispatch(historyPop());},[dispatch]);var handleHome=useCallback(function(){dispatch(historyResetTo(INDEX_PATH));},[dispatch]);return React.createElement("div",{className:styles.wrapper},React.createElement(I18n.Text,{className:styles.text,string:"page.not_found"}),React.createElement("div",{className:styles.buttonContainer},React.createElement(RippleButton,{onClick:handleBack,className:styles.button,type:"secondary"},React.createElement(I18n.Text,{string:"common.back"})),React.createElement(RippleButton,{onClick:handleHome,className:styles.button,type:"secondary"},React.createElement(I18n.Text,{string:"navigation.back",params:{title:i18n.text('navigation.home')}}))));};export default NotFound;

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.js

@@ -1,7 +1,7 @@
-var _excluded=["src","alt","breakpoint"];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 _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{useTheme,makeStyles}from'@shopgate/engage/styles';import{parseImageUrl}from"../../helpers";/** @typedef {import('@shopgate/engage/styles').Theme} Theme */ /** @typedef {Theme['breakpoints']['keys'][0]} Breakpoint */ /** @typedef {React.ImgHTMLAttributes<HTMLImageElement>} ImgProps */ /** @typedef {{breakpoint: Breakpoint} & ImgProps} ResponsiveImageProps */var useStyles=makeStyles()({preventSave:{userSelect:'none',' img':{userSelect:'none',pointerEvents:'none'}}});/**
+var _excluded=["src","alt","breakpoint","className"];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{makeStyles,useResponsiveValue}from'@shopgate/engage/styles';import{parseImageUrl}from"../../helpers";/** @typedef {import('@shopgate/engage/styles').Theme} Theme */ /** @typedef {Theme['breakpoints']['keys'][0]} Breakpoint */ /** @typedef {React.ImgHTMLAttributes<HTMLImageElement>} ImgProps */ /** @typedef {{breakpoint: Breakpoint} & ImgProps} ResponsiveImageProps */var useStyles=makeStyles()({preventSave:{userSelect:'none',pointerEvents:'none'}});/**
  * The ResponsiveWidgetImage component renders an image that adapts to different screen sizes.
  * It uses the <picture> element to provide a higher resolution image for medium and larger screens.
  *
  * @param {ResponsiveImageProps} props The component props.
  * @returns {JSX.Element}
- */var ResponsiveWidgetImage=function ResponsiveWidgetImage(_ref){var src=_ref.src,alt=_ref.alt,breakpoint=_ref.breakpoint,imgProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),breakpoints=_useTheme.breakpoints;var _useStyles=useStyles(),classes=_useStyles.classes;var src2x=useMemo(function(){return parseImageUrl(src,true);},[src]);if(!src){return null;}return React.createElement("picture",{onContextMenu:function onContextMenu(e){return e.preventDefault();},className:classes.preventSave},React.createElement("source",{media:"(width >= ".concat(breakpoints.values[breakpoint],"px)"),srcSet:src2x}),React.createElement("img",_extends({src:src,alt:alt,loading:"lazy"},imgProps)));};ResponsiveWidgetImage.defaultProps={src:null,alt:null,breakpoint:'md'};export default ResponsiveWidgetImage;
+ */var ResponsiveWidgetImage=function ResponsiveWidgetImage(_ref){var src=_ref.src,alt=_ref.alt,breakpoint=_ref.breakpoint,className=_ref.className,imgProps=_objectWithoutProperties(_ref,_excluded);var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var src2x=useMemo(function(){return parseImageUrl(src,true);},[src]);var imgSrc=useResponsiveValue(_defineProperty({xs:src},breakpoint,src2x));if(!src){return null;}return React.createElement("img",_extends({src:imgSrc,alt:alt,loading:"lazy",className:cx(classes.preventSave,className)},imgProps));};ResponsiveWidgetImage.defaultProps={src:null,alt:null,breakpoint:'md',className:null};export default ResponsiveWidgetImage;

package/page/helpers/index.d.ts

@@ -1,28 +1,24 @@
 export type ProductsWidgetInputConfig = {
-  /**
-   * Source type for the product list
-   */
-  productSelectorType: 'searchTerm' | 'brand' | 'category' | 'manualItemNumbers' | 'productSelector';
   /**
    * A search term to filter products by
    */
-  productsSearchTerm: string;
+  searchTerm: string;
   /**
    * A brand to filter products by
    */
-  productsBrand: string;
+  brand: string;
   /**
    * A category to filter products by
    */
-  productsCategory: string;
+  category: string;
   /**
    * Array of product item numbers (selected via manual input)
    */
-  productsManualItemNumbers: string[];
+  manualItemNumbers: string[];
   /**
    * Array of product item numbers (selected via product selector)
    */
-  productsSelectorItemNumbers: string[];
+  selectorItemNumbers: string[];
 }
 
 export type GetProductSearchParamsFromProductsInputConfigReturnValue = {

package/page/helpers/index.js

@@ -1,4 +1,4 @@
-/* eslint-disable max-len */ /**
+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;}/* eslint-disable max-len */ /**
  * @typedef {import('./').ProductsWidgetInputConfig} ProductsWidgetInputConfig
  */ /**
  * @typedef {import('./').GetProductSearchParamsFromProductsInputConfigReturnValue} GetProductSearchParamsFromProductsInputConfigReturnValue
@@ -8,8 +8,9 @@
  * The return value can be used to e.g. parametrize the useWidgetProducts hook.
  * @param {ProductsWidgetInputConfig} products Config object of the "Products" input.
  * @returns {GetProductSearchParamsFromProductsInputConfigReturnValue}
- */export var getProductSearchParamsFromProductsInputConfig=function getProductSearchParamsFromProductsInputConfig(){var products=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var _ref=products||{},productSelectorType=_ref.productSelectorType,productsBrand=_ref.productsBrand,productsCategory=_ref.productsCategory,productsItemNumbers=_ref.productsItemNumbers,productsManualItemNumbers=_ref.productsManualItemNumbers,productsSelectorItemNumbers=_ref.productsSelectorItemNumbers,productsSearchTerm=_ref.productsSearchTerm;var productsSearchType=productSelectorType;/** @type {string|string[]} */var productsSearchValue='';switch(productSelectorType){case'brand':productsSearchValue=productsBrand;break;case'category':productsSearchValue=productsCategory;break;// Kept for backward compatibility - was replaces by 'manualItemNumbers' and 'productSelector'
-case'itemNumbers':productsSearchValue=productsItemNumbers.split(',').map(function(item){return item.trim();});break;case'manualItemNumbers':productsSearchValue=productsManualItemNumbers;break;case'productSelector':productsSearchValue=productsSelectorItemNumbers;break;case'searchTerm':default:productsSearchValue=productsSearchTerm;}if(['itemNumbers','manualItemNumbers','productSelector'].includes(productSelectorType)){productsSearchType='productIds';}return{productsSearchType:productsSearchType,productsSearchValue:productsSearchValue};};/**
+ */export var getProductSearchParamsFromProductsInputConfig=function getProductSearchParamsFromProductsInputConfig(){var products=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var _ref=products||{},brand=_ref.brand,category=_ref.category,manualItemNumbers=_ref.manualItemNumbers,selectorItemNumbers=_ref.selectorItemNumbers,searchTerm=_ref.searchTerm;var mapping=[['brand',brand],['category',category],['searchTerm',searchTerm],['productIds',manualItemNumbers],['productIds',selectorItemNumbers]];// Pick the first non-undefined value
+// eslint-disable-next-line prefer-const
+var _ref2=mapping.find(function(_ref4){var _ref5=_slicedToArray(_ref4,2),value=_ref5[1];return value!==undefined;})||['searchTerm',searchTerm],_ref3=_slicedToArray(_ref2,2),productsSearchType=_ref3[0],productsSearchValue=_ref3[1];return{productsSearchType:productsSearchType,productsSearchValue:productsSearchValue};};/**
  * Parses the image URL to return a high resolution version if required.
  * @param {string} url The original image URL.
  * @param {boolean} useHighRes Whether to return a high resolution version.

package/page/reducers/index.js

@@ -12,4 +12,6 @@ return _extends({},widget,{widgetConfig:customLegacyWidget.settings||{},widgetCo
  * @param {Object} [state={}] The current state.
  * @param {Object} action The action object.
  * @returns {Object} The new state.
- */export function pageV2(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:defaultState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(function(draft){switch(action.type){case REQUEST_PAGE_CONFIG_V2:{var pageType=action.pageType,pageSlug=action.pageSlug;draft[pageType]=draft[pageType]||{};draft[pageType][pageSlug]={data:null,isFetching:true,expires:0};break;}case RECEIVE_PAGE_CONFIG_V2:{var _pageType=action.pageType,_pageSlug=action.pageSlug,data=action.data;draft[_pageType]=draft[_pageType]||{};draft[_pageType][_pageSlug]={data:transformCustomLegacyWidgets(data),isFetching:false,expires:Date.now()+PAGE_STATE_LIFETIME};break;}case ERROR_PAGE_CONFIG_V2:{var _pageType2=action.pageType,_pageSlug2=action.pageSlug;draft[_pageType2]=draft[_pageType2]||{};draft[_pageType2][_pageSlug2]={data:null,isFetching:false};break;}case APP_WILL_START:{Object.keys(draft).forEach(function(pageType){Object.keys(draft[pageType]).forEach(function(pageCode){draft[pageType][pageCode].expires=0;});});break;}default:break;}});/* eslint-enable no-param-reassign */return producer(state);}
+ */export function pageV2(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:defaultState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(function(draft){var _ref=action||{},pageType=_ref.pageType,pageSlug=_ref.pageSlug,data=_ref.data;/**
+     * Helper to initialize pageType and pageSlug if not present
+     */var initializePage=function initializePage(){if(!draft[pageType]){draft[pageType]={};}if(!draft[pageType][pageSlug]){draft[pageType][pageSlug]={data:null,isFetching:false,expires:0,hasError:false};}};switch(action.type){case REQUEST_PAGE_CONFIG_V2:{initializePage();draft[pageType][pageSlug].isFetching=true;draft[pageType][pageSlug].hasError=false;break;}case RECEIVE_PAGE_CONFIG_V2:{initializePage();draft[pageType][pageSlug].data=transformCustomLegacyWidgets(data);draft[pageType][pageSlug].isFetching=false;draft[pageType][pageSlug].expires=Date.now()+PAGE_STATE_LIFETIME;draft[pageType][pageSlug].hasError=false;break;}case ERROR_PAGE_CONFIG_V2:{initializePage();draft[pageType][pageSlug].isFetching=false;draft[pageType][pageSlug].hasError=true;break;}case APP_WILL_START:{Object.keys(draft).forEach(function(page){Object.keys(draft[page]).forEach(function(pageCode){draft[page][pageCode].expires=0;});});break;}default:break;}});/* eslint-enable no-param-reassign */return producer(state);}

package/page/selectors/index.js

@@ -36,7 +36,7 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {Object} params The selector parameters.
  * @param {string} params.slug The slug of the page.
  * @returns {Function} A selector function that retrieves the unified CMS page data.
- */export var makeGetUnifiedCMSPageData=function makeGetUnifiedCMSPageData(_ref4){var slug=_ref4.slug;var getPageV2=makeGetPage({type:'cms',slug:slug});var getPageV1=makeGetPageConfigById({pageId:slug});return createSelector(getIsCms2Enabled,getPageV1,getPageV2,function(isCms2Enabled,pageV1,pageV2){var _ref8,_ref9;if(isCms2Enabled){var _ref5,_ref6,_pageV2$data,_pageV2$data2,_ref7,_pageV2$data3,_pageV2$data3$dropzon;if(!pageV2)return undefined;return{isFetching:(_ref5=pageV2===null||pageV2===void 0?void 0:pageV2.isFetching)!==null&&_ref5!==void 0?_ref5:false,expires:(_ref6=pageV2===null||pageV2===void 0?void 0:pageV2.expires)!==null&&_ref6!==void 0?_ref6:null,title:(pageV2===null||pageV2===void 0?void 0:(_pageV2$data=pageV2.data)===null||_pageV2$data===void 0?void 0:_pageV2$data.pageTitle)||(pageV2===null||pageV2===void 0?void 0:(_pageV2$data2=pageV2.data)===null||_pageV2$data2===void 0?void 0:_pageV2$data2.name)||'',widgets:(_ref7=pageV2===null||pageV2===void 0?void 0:(_pageV2$data3=pageV2.data)===null||_pageV2$data3===void 0?void 0:(_pageV2$data3$dropzon=_pageV2$data3.dropzones)===null||_pageV2$data3$dropzon===void 0?void 0:_pageV2$data3$dropzon['cmsWidgetList'])!==null&&_ref7!==void 0?_ref7:[],cmsVersion:2};}if(!pageV1)return undefined;return{isFetching:(_ref8=pageV1===null||pageV1===void 0?void 0:pageV1.isFetching)!==null&&_ref8!==void 0?_ref8:false,expires:(_ref9=pageV1===null||pageV1===void 0?void 0:pageV1.expires)!==null&&_ref9!==void 0?_ref9:null,title:(pageV1===null||pageV1===void 0?void 0:pageV1.title)||'',widgets:(pageV1===null||pageV1===void 0?void 0:pageV1.widgets)||[],cmsVersion:1};});};/**
+ */export var makeGetUnifiedCMSPageData=function makeGetUnifiedCMSPageData(_ref4){var slug=_ref4.slug;var getPageV2=makeGetPage({type:'cms',slug:slug});var getPageV1=makeGetPageConfigById({pageId:slug});return createSelector(getIsCms2Enabled,getPageV1,getPageV2,function(isCms2Enabled,pageV1,pageV2){var _ref9,_ref10;if(isCms2Enabled){var _ref5,_ref6,_pageV2$data,_pageV2$data2,_ref7,_pageV2$data3,_pageV2$data3$dropzon,_ref8;if(!pageV2)return undefined;return{isFetching:(_ref5=pageV2===null||pageV2===void 0?void 0:pageV2.isFetching)!==null&&_ref5!==void 0?_ref5:false,expires:(_ref6=pageV2===null||pageV2===void 0?void 0:pageV2.expires)!==null&&_ref6!==void 0?_ref6:null,title:(pageV2===null||pageV2===void 0?void 0:(_pageV2$data=pageV2.data)===null||_pageV2$data===void 0?void 0:_pageV2$data.pageTitle)||(pageV2===null||pageV2===void 0?void 0:(_pageV2$data2=pageV2.data)===null||_pageV2$data2===void 0?void 0:_pageV2$data2.name)||'',widgets:(_ref7=pageV2===null||pageV2===void 0?void 0:(_pageV2$data3=pageV2.data)===null||_pageV2$data3===void 0?void 0:(_pageV2$data3$dropzon=_pageV2$data3.dropzones)===null||_pageV2$data3$dropzon===void 0?void 0:_pageV2$data3$dropzon['cmsWidgetList'])!==null&&_ref7!==void 0?_ref7:[],cmsVersion:2,hasError:(_ref8=pageV2===null||pageV2===void 0?void 0:pageV2.hasError)!==null&&_ref8!==void 0?_ref8:false};}if(!pageV1)return undefined;return{isFetching:(_ref9=pageV1===null||pageV1===void 0?void 0:pageV1.isFetching)!==null&&_ref9!==void 0?_ref9:false,expires:(_ref10=pageV1===null||pageV1===void 0?void 0:pageV1.expires)!==null&&_ref10!==void 0?_ref10:null,title:(pageV1===null||pageV1===void 0?void 0:pageV1.title)||'',widgets:(pageV1===null||pageV1===void 0?void 0:pageV1.widgets)||[],cmsVersion:1,hasError:false};});};/**
  * Creates a selector that generates a hash to select results for widget products.
  * @param {'searchTerm' | 'productIds' | 'brand' | 'category' |'highlights'} type Type of the
  * request to make.