@shopgate/engage 7.29.0-alpha.2 → 7.29.0-alpha.3

package/core/actions/grantCameraPermissions.js

@@ -12,4 +12,4 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {string} options.modal.dismiss Label for the dismiss button.
  * @param {Object} options.modal.params Additional parameters for i18n strings.
  * @return { Function } A redux thunk.
- */var grantCameraPermissions=function grantCameraPermissions(){var options=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};return function(dispatch){var _options$useSettingsM=options.useSettingsModal,useSettingsModal=_options$useSettingsM===void 0?false:_options$useSettingsM,_options$modal=options.modal,modal=_options$modal===void 0?{}:_options$modal;return dispatch(grantPermissions({permissionId:PERMISSION_ID_CAMERA,useSettingsModal:useSettingsModal,modal:_extends({title:null,message:'permissions.access_denied.camera_message',confirm:'permissions.access_denied.settings_button'},modal)}));};};export default grantCameraPermissions;
+ */var grantCameraPermissions=function grantCameraPermissions(){var options=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};return function(dispatch){var _options$useSettingsM=options.useSettingsModal,useSettingsModal=_options$useSettingsM===void 0?false:_options$useSettingsM,_options$modal=options.modal,modal=_options$modal===void 0?{}:_options$modal;return dispatch(grantPermissions({permissionId:PERMISSION_ID_CAMERA,useSettingsModal:useSettingsModal,modal:_extends({title:null,message:'permissions.access_denied.camera_message',confirm:'permissions.access_denied.settings_button',dismiss:'common.close'},modal)}));};};export default grantCameraPermissions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.29.0-alpha.2",
+  "version": "7.29.0-alpha.3",
   "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.2",
-    "@shopgate/pwa-common-commerce": "7.29.0-alpha.2",
-    "@shopgate/pwa-core": "7.29.0-alpha.2",
-    "@shopgate/pwa-ui-ios": "7.29.0-alpha.2",
-    "@shopgate/pwa-ui-material": "7.29.0-alpha.2",
-    "@shopgate/pwa-ui-shared": "7.29.0-alpha.2",
+    "@shopgate/pwa-common": "7.29.0-alpha.3",
+    "@shopgate/pwa-common-commerce": "7.29.0-alpha.3",
+    "@shopgate/pwa-core": "7.29.0-alpha.3",
+    "@shopgate/pwa-ui-ios": "7.29.0-alpha.3",
+    "@shopgate/pwa-ui-material": "7.29.0-alpha.3",
+    "@shopgate/pwa-ui-shared": "7.29.0-alpha.3",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",

package/page/widgets/Image/Image.js

@@ -0,0 +1,4 @@
+import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{Link,ConditionalWrapper}from'@shopgate/engage/components';import{useImageWidget}from"./hooks";var useStyles=makeStyles()(function(){return{link:{},image:{width:'100%'}};});/**
+ * The ImageWidget is used to display a image.
+ * @returns {JSX.Element}
+ */var Image=function Image(){var _useStyles=useStyles(),cx=_useStyles.cx,classes=_useStyles.classes;var _useImageWidget=useImageWidget(),link=_useImageWidget.link,altText=_useImageWidget.altText,url=_useImageWidget.url;if(!url)return null;return React.createElement(ConditionalWrapper,{condition:!!link,wrapper:function wrapper(children){return React.createElement(Link,{href:link,className:cx(classes.link)},children);}},React.createElement("img",{loading:"lazy",src:url,alt:altText,className:cx(classes.image)}));};export default Image;

package/page/widgets/Image/hooks.js

@@ -0,0 +1,24 @@
+import{useWidget}from'@shopgate/engage/page/hooks';import{useResponsiveValue}from'@shopgate/engage/styles';/**
+ * 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.
+ * @returns {string} The parsed image URL.
+ */var parseImageUrl=function parseImageUrl(url,useHighRes){if(!url||!useHighRes){return url;}var match=url.match(/^(.*)\.([^./]+)$/);return!match?url:"".concat(match[1],"@2x.").concat(match[2]);};/**
+ * @typedef {Object} ImageWidgetConfig
+ * @property {Object} image The image object.
+ * @property {string} image.url The image URL.
+ * @property {string} [image.altText] The image alt text.
+ * @property {Object} imageWide The wide image object.
+ * @property {string} imageWide.url The wide image URL.
+ * @property {string} [imageWide.altText] The wide image alt text.
+ * @property {boolean} [useImageWide] Whether to use the wide image on
+ * medium and larger screens.
+ * @property {string} [link] The link URL.
+ */ /**
+ * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
+ *   .useWidget<ImageWidgetConfig> >} UseWidgetReturnType
+ */ // eslint-disable-next-line valid-jsdoc
+/**
+ * Hook to access the Image widget configuration and data.
+ * Handles responsive image URLs and alt texts.
+ */export var useImageWidget=function useImageWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},image=_ref.image,imageWide=_ref.imageWide,link=_ref.link,useImageWide=_ref.useImageWide;var url=useResponsiveValue({xs:image===null||image===void 0?void 0:image.url,md:useImageWide&&(imageWide===null||imageWide===void 0?void 0:imageWide.url)?parseImageUrl(imageWide.url,true):parseImageUrl(image===null||image===void 0?void 0:image.url,true)});var altText=useResponsiveValue({xs:image===null||image===void 0?void 0:image.altText,md:useImageWide&&(imageWide===null||imageWide===void 0?void 0:imageWide.altText)?imageWide.altText:image===null||image===void 0?void 0:image.altText});return{url:url,altText:altText,link:link};};

package/page/widgets/Image/index.js

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

package/page/widgets/index.js

@@ -1 +1 @@
-export{default as PlaceholderWidget}from"./Placeholder";export{default as ProductListWidget}from"./ProductList";export{default as CategoryListWidget}from"./CategoryList";export{default as HtmlWidget}from"./HTML";export{default as ProductSliderWidget}from"./ProductSlider";export{default as HeadlineWidget}from"./Headline";
+export{default as PlaceholderWidget}from"./Placeholder";export{default as ProductListWidget}from"./ProductList";export{default as CategoryListWidget}from"./CategoryList";export{default as HtmlWidget}from"./HTML";export{default as ProductSliderWidget}from"./ProductSlider";export{default as HeadlineWidget}from"./Headline";export{default as ImageWidget}from"./Image";

package/page/widgets/widgets.json

@@ -16,5 +16,8 @@
   },
   "@shopgate/widgets/headlineWidget": {
     "path": "@shopgate/engage/page/widgets/Headline"
+  },
+  "@shopgate/widgets/imageWidget": {
+    "path": "@shopgate/engage/page/widgets/Image"
   }
 }

package/product/components/PriceInfo/PriceInfo.connector.js

@@ -1,4 +1,4 @@
 import{connect}from'react-redux';import{makeGetShopSettingByKey}from"../../../core/selectors/shopSettings";import{SHOP_SETTING_DISPLAY_PRICE_PER_MEASURE_UNIT}from"../../../core/constants";/**
  * Creates the mapStateToProps connector function.
  * @returns {Function}
- */var makeMapStateToProps=function makeMapStateToProps(){var getShopSetting=makeGetShopSettingByKey(SHOP_SETTING_DISPLAY_PRICE_PER_MEASURE_UNIT,false);return function(state,props){return{displayPricePerMeasureUnit:getShopSetting(state,props)};};};export default connect(makeMapStateToProps);
+ */var makeMapStateToProps=function makeMapStateToProps(){var getShopSetting=makeGetShopSettingByKey(SHOP_SETTING_DISPLAY_PRICE_PER_MEASURE_UNIT,true);return function(state,props){return{displayPricePerMeasureUnit:getShopSetting(state,props)};};};export default connect(makeMapStateToProps);

package/product/components/PriceInfo/PriceInfo.js

@@ -1,4 +1,5 @@
 function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{useMemo}from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import{i18n}from'@shopgate/engage/core';import{ConditionalWrapper}from'@shopgate/engage/components';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import connect from"./PriceInfo.connector";var styles={container:css({color:themeConfig.colors.shade3}).toString(),noWrap:css({whiteSpace:'nowrap'}).toString()};/**
  * The price info component
  * @returns {JSX}
- */var PriceInfo=function PriceInfo(_ref){var product=_ref.product,className=_ref.className,wrapper=_ref.wrapper,displayPricePerMeasureUnit=_ref.displayPricePerMeasureUnit,externalCurrency=_ref.currency;var _ref2=product||{},_ref2$price=_ref2.price,price=_ref2$price===void 0?{}:_ref2$price,unitPriceRefValue=_ref2.unitPriceRefValue,unitPriceRefUom=_ref2.unitPriceRefUom;var pricePerMeasureUnit=price.pricePerMeasureUnit,info=price.info,currency=price.currency;var content=useMemo(function(){if(!displayPricePerMeasureUnit){return info;}if(!pricePerMeasureUnit){return null;}var unitKey="formats.unitOfMeasurement.".concat(unitPriceRefUom);var unit=i18n.text(unitKey);if(unit===unitKey){unit=unitPriceRefUom;}return i18n.text('price.pricePerMeasurementFormat',{price:i18n.price(pricePerMeasureUnit,currency||externalCurrency,2),refValue:unitPriceRefValue||'',refUom:unit});},[currency,displayPricePerMeasureUnit,externalCurrency,info,pricePerMeasureUnit,unitPriceRefUom,unitPriceRefValue]);if(!content){return null;}return React.createElement(ConditionalWrapper,{condition:!!wrapper,wrapper:wrapper},React.createElement("div",{className:classNames(styles.container,className,_defineProperty({},styles.noWrap,displayPricePerMeasureUnit)),dangerouslySetInnerHTML:{__html:content},"data-test-id":"priceInfo: ".concat(content)}));};PriceInfo.defaultProps={product:null,className:null,currency:null,wrapper:null,displayPricePerMeasureUnit:false};export default connect(PriceInfo);
+ */var PriceInfo=function PriceInfo(_ref){var product=_ref.product,className=_ref.className,wrapper=_ref.wrapper,displayPricePerMeasureUnit=_ref.displayPricePerMeasureUnit,externalCurrency=_ref.currency;var _ref2=product||{},_ref2$price=_ref2.price,price=_ref2$price===void 0?{}:_ref2$price,unitPriceRefValue=_ref2.unitPriceRefValue,unitPriceRefUom=_ref2.unitPriceRefUom;var pricePerMeasureUnit=price.pricePerMeasureUnit,info=price.info,currency=price.currency;var content=useMemo(function(){if(!displayPricePerMeasureUnit||!pricePerMeasureUnit){return info;}if(!pricePerMeasureUnit){return null;}var unitKey="formats.unitOfMeasurement.".concat(unitPriceRefUom);var unit=i18n.text(unitKey);if(unit===unitKey){unit=unitPriceRefUom;}return i18n.text('price.pricePerMeasurementFormat',{price:i18n.price(pricePerMeasureUnit,currency||externalCurrency,2),// Don't show base prices like 1.99€/1kg, but show 1.99€/kg instead
+refValue:!!unitPriceRefValue&&unitPriceRefValue!==1?unitPriceRefValue:'',refUom:unit});},[currency,displayPricePerMeasureUnit,externalCurrency,info,pricePerMeasureUnit,unitPriceRefUom,unitPriceRefValue]);if(!content){return null;}return React.createElement(ConditionalWrapper,{condition:!!wrapper,wrapper:wrapper},React.createElement("div",{className:classNames(styles.container,className,'engage__product__price-info',_defineProperty({},styles.noWrap,content!==info)),dangerouslySetInnerHTML:{__html:content},"data-test-id":"priceInfo: ".concat(content)}));};PriceInfo.defaultProps={product:null,className:null,currency:null,wrapper:null,displayPricePerMeasureUnit:false};export default connect(PriceInfo);