@shopgate/engage 7.12.0 → 7.12.1-beta.1

package/core/helpers/getFullImageSource.js

@@ -1,8 +1,25 @@
 import{getProductImageSettings}from"../../product/helpers";import{getImageFormat}from"./getImageFormat";/**
+ * Regex to detect the "fill" query parameter
+ */var fillParamRegex=/(fill|fillc)=(\w+)%2C(\d)($|&)/i;/**
+ * Appends image service parameters to an image service url
+ * @param {string} baseUrl The base url
+ * @param {Object} params Additional params for the url
+ * @returns {string}
+ */var buildUrl=function buildUrl(baseUrl){var params=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var parsedUrl=new URL(baseUrl);/**
+   * To improve caching of images, we need to create urls with a consistent order of query params.
+   * Otherwise it can happen that different urls create equal images, just because of different
+   * ordered query params.
+   * To reach this goal we utilize the "append" method of the URLSearchParams object and apply
+   * the params in the order given by the "params" object. Since "append" could create duplicate
+   * query params, each param needs to be removed from the URLSearchParams before it's added again.
+   */Object.keys(params).forEach(function(key){parsedUrl.searchParams["delete"](key);return parsedUrl.searchParams.append(key,params[key]);});/**
+   * The "fill" parameter contains a ",". Since this would be url encoded by toString(), and the
+   * service will not recognize it anymore, we need to replace the encoding with a ",".
+   */return parsedUrl.toString().replace(fillParamRegex,'$1=$2,$3$4');};/**
  * Returns the actual url to the image, by adding url parameters with the dimensions for img-cdn
  * @param {string} src Source to the image.
  * @param {Object} dimension Dimension of the requested image.
  * @param {number} dimension.width Width in pixels.
  * @param {number} dimension.height Height in pixels.
  * @returns {string}
- */export var getFullImageSource=function getFullImageSource(src,_ref){var width=_ref.width,height=_ref.height;if(src&&src.includes('images.shopgate.services/v2/images')){var _getProductImageSetti=getProductImageSettings(),fillColor=_getProductImageSetti.fillColor,quality=_getProductImageSetti.quality;var format=getImageFormat();return"".concat(src,"&format=").concat(format,"&width=").concat(width,"&height=").concat(height,"&quality=").concat(quality,"&fill=").concat(fillColor.replace('#',''));}if(src&&src.startsWith('https://img-cdn.shopgate.com')&&!src.includes('?')){return"".concat(src,"?w=").concat(width,"&h=").concat(height,"&q=70&zc=resize&fillc=FFFFFF");}return src;};
+ */export var getFullImageSource=function getFullImageSource(src){var _ref=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{},width=_ref.width,height=_ref.height;if(src&&src.includes('images.shopgate.services/v2/images')){var _getProductImageSetti=getProductImageSettings(),fillColor=_getProductImageSetti.fillColor,quality=_getProductImageSetti.quality;var format=getImageFormat();return buildUrl(src,{format:format,width:width,height:height,quality:quality,fill:fillColor.replace('#','')});}if(src&&src.startsWith('https://img-cdn.shopgate.com')&&!src.includes('?')){return buildUrl(src,{w:width,h:height,q:70,zd:'resize',fillc:'FFFFFF'});}return src;};

package/favorites/components/Item/Item.js

@@ -3,7 +3,7 @@ var _css;function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableTo
  */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:showModalAction,historyPush:historyPushAction,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((_css={flex:0.4,marginRight:18},_defineProperty(_css,responsiveMediaQuery('>=xs',{appAlways:true}),{maxWidth:120,minWidth:80}),_defineProperty(_css,responsiveMediaQuery('>=md',{webOnly:true}),{maxWidth:120,minWidth:80}),_defineProperty(_css,responsiveMediaQuery('>=md',{webOnly:true}),{width:120,flex:'none'}),_css)).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(),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'})};/**
+ */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((_css={flex:0.4,marginRight:18},_defineProperty(_css,responsiveMediaQuery('>=xs',{appAlways:true}),{maxWidth:120,minWidth:80}),_defineProperty(_css,responsiveMediaQuery('>=md',{webOnly:true}),{maxWidth:120,minWidth:80}),_defineProperty(_css,responsiveMediaQuery('>=md',{webOnly:true}),{width:120,flex:'none'}),_css)).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(),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;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 price=hasStrikePrice?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

package/package.json

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

package/product/components/Media/MediaImage.js

@@ -1,4 +1,4 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,useEffect}from'react';import PropTypes from'prop-types';import classnames from'classnames';import Image from'@shopgate/pwa-common/components/Image';import appConfig from'@shopgate/pwa-common/helpers/config';import{SurroundPortals}from"../../../components";import{PORTAL_PRODUCT_IMAGE}from"../../../components/constants";import{buildMediaImageUrl}from"./helpers";import{useWidgetSettings}from"../../../core";import{defaultProps,propTypes}from"./props";import MediaPlaceholder from"./MediaPlaceholder";import{innerShadow}from"./style";/**
+function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,useEffect}from'react';import PropTypes from'prop-types';import classnames from'classnames';import Image from'@shopgate/pwa-common/components/Image';import appConfig from'@shopgate/pwa-common/helpers/config';import{SurroundPortals}from"../../../components";import{PORTAL_PRODUCT_IMAGE}from"../../../components/constants";import{useWidgetSettings}from"../../../core";import{defaultProps,propTypes}from"./props";import MediaPlaceholder from"./MediaPlaceholder";import{innerShadow}from"./style";/**
  * The featured image component.
  * @returns {JSX}
- */var MediaImage=function MediaImage(_ref){var url=_ref.url,altText=_ref.altText,className=_ref.className,params=_ref.params;var _useState=useState(!url),_useState2=_slicedToArray(_useState,2),placeholder=_useState2[0],setPlaceholderEnabled=_useState2[1];var _useWidgetSettings=useWidgetSettings('@shopgate/engage/product/MediaImage'),_useWidgetSettings$sh=_useWidgetSettings.showInnerShadow,showInnerShadow=_useWidgetSettings$sh===void 0?!appConfig.hideProductImageShadow:_useWidgetSettings$sh;useEffect(function(){return setPlaceholderEnabled(!url);},[url]);var classes=classnames(className,_defineProperty({},innerShadow,showInnerShadow));if(placeholder){return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE},React.createElement(MediaPlaceholder,{className:classes}));}return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE},React.createElement(Image,{src:buildMediaImageUrl(url,params),alt:altText,className:classes,backgroundColor:"transparent",onError:function onError(){return setPlaceholderEnabled(true);}}));};MediaImage.defaultProps={url:defaultProps.url,altText:defaultProps.altText,className:defaultProps.className,params:null};export default MediaImage;
+ */var MediaImage=function MediaImage(_ref){var url=_ref.url,altText=_ref.altText,className=_ref.className,resolutions=_ref.resolutions;var _useState=useState(!url),_useState2=_slicedToArray(_useState,2),placeholder=_useState2[0],setPlaceholderEnabled=_useState2[1];var _useWidgetSettings=useWidgetSettings('@shopgate/engage/product/MediaImage'),_useWidgetSettings$sh=_useWidgetSettings.showInnerShadow,showInnerShadow=_useWidgetSettings$sh===void 0?!appConfig.hideProductImageShadow:_useWidgetSettings$sh;useEffect(function(){return setPlaceholderEnabled(!url);},[url]);var classes=classnames(className,_defineProperty({},innerShadow,showInnerShadow));if(placeholder){return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE},React.createElement(MediaPlaceholder,{className:classes}));}return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE},React.createElement(Image,{src:url,resolutions:resolutions||undefined,alt:altText,className:classes,backgroundColor:"transparent",onError:function onError(){return setPlaceholderEnabled(true);}}));};MediaImage.defaultProps={url:defaultProps.url,altText:defaultProps.altText,className:defaultProps.className,resolutions:null};export default MediaImage;

package/product/components/MediaSlider/components/MediaImage/index.js

@@ -1,4 +1,4 @@
 import React from'react';import PropTypes from'prop-types';import{MediaImage as Image}from"../../../Media";import{full}from"../../style";import{PRODUCT_SLIDER_IMAGE_FORMATS}from"../../constants";/**
  * The product media video slide component.
  * @returns {JSX}
- */var MediaImage=function MediaImage(_ref){var media=_ref.media,onClick=_ref.onClick;return React.createElement("div",{onClick:onClick,onKeyDown:onClick,role:"button",tabIndex:"0",className:full},React.createElement(Image,{url:media.url,altText:media.altText,params:PRODUCT_SLIDER_IMAGE_FORMATS[1]}));};MediaImage.displayName='MediaSliderImage';export default MediaImage;
+ */var MediaImage=function MediaImage(_ref){var media=_ref.media,onClick=_ref.onClick;return React.createElement("div",{onClick:onClick,onKeyDown:onClick,role:"button",tabIndex:"0",className:full},React.createElement(Image,{url:media.url,altText:media.altText,resolutions:PRODUCT_SLIDER_IMAGE_FORMATS}));};MediaImage.displayName='MediaSliderImage';export default MediaImage;