@shopgate/engage 7.29.0-alpha.1 → 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.1",
+  "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.1",
-    "@shopgate/pwa-common-commerce": "7.29.0-alpha.1",
-    "@shopgate/pwa-core": "7.29.0-alpha.1",
-    "@shopgate/pwa-ui-ios": "7.29.0-alpha.1",
-    "@shopgate/pwa-ui-material": "7.29.0-alpha.1",
-    "@shopgate/pwa-ui-shared": "7.29.0-alpha.1",
+    "@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/components/Widgets/Widget.js

@@ -8,8 +8,10 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {React.ComponentType} props.component The widget component to render.
  * @param {WidgetDefinition} props.definition The widget definition data.
  * @param {boolean} props.isPreview Whether the widget is in preview mode.
+ * @param {boolean} props.isCustomLegacyWidget Whether the widget is a legacy custom widget provided
+ * by an extension that's configured via an HTML comment inside a HTML widget.
  * @returns {JSX.Element}
- */var Widget=function Widget(_ref2){var _ref3,_definition$layout,_ref4,_definition$layout2,_ref5,_definition$layout3,_ref6,_definition$layout4,_definition$layout5,_definition$layout6,_definition$layout7,_definition$layout8,_definition$meta,_definition$meta$sche,_definition$meta2,_definition$meta2$sch,_definition$meta3,_definition$meta3$sch,_definition$meta4,_definition$meta4$hid,_definition$meta5,_definition$meta5$hid;var Component=_ref2.component,definition=_ref2.definition,isPreview=_ref2.isPreview;var _useStyles=useStyles({marginTop:(_ref3=definition===null||definition===void 0?void 0:(_definition$layout=definition.layout)===null||_definition$layout===void 0?void 0:_definition$layout.marginTop)!==null&&_ref3!==void 0?_ref3:0,marginBottom:(_ref4=definition===null||definition===void 0?void 0:(_definition$layout2=definition.layout)===null||_definition$layout2===void 0?void 0:_definition$layout2.marginBottom)!==null&&_ref4!==void 0?_ref4:0,marginLeft:(_ref5=definition===null||definition===void 0?void 0:(_definition$layout3=definition.layout)===null||_definition$layout3===void 0?void 0:_definition$layout3.marginLeft)!==null&&_ref5!==void 0?_ref5:0,marginRight:(_ref6=definition===null||definition===void 0?void 0:(_definition$layout4=definition.layout)===null||_definition$layout4===void 0?void 0:_definition$layout4.marginRight)!==null&&_ref6!==void 0?_ref6:0}),classes=_useStyles.classes,cx=_useStyles.cx;var _useWidgetsPreview=useWidgetsPreview(),setActiveWidget=_useWidgetsPreview.setActiveWidget,activeWidget=_useWidgetsPreview.activeWidget;// Handle clicks on the widget container in preview mode. Take care that highlighting only happens
+ */var Widget=function Widget(_ref2){var _ref3,_definition$layout,_ref4,_definition$layout2,_ref5,_definition$layout3,_ref6,_definition$layout4,_definition$layout5,_definition$layout6,_definition$layout7,_definition$layout8,_definition$meta,_definition$meta$sche,_definition$meta2,_definition$meta2$sch,_definition$meta3,_definition$meta3$sch,_definition$meta4,_definition$meta4$hid,_definition$meta5,_definition$meta5$hid;var Component=_ref2.component,definition=_ref2.definition,isPreview=_ref2.isPreview,isCustomLegacyWidget=_ref2.isCustomLegacyWidget;var _useStyles=useStyles({marginTop:(_ref3=definition===null||definition===void 0?void 0:(_definition$layout=definition.layout)===null||_definition$layout===void 0?void 0:_definition$layout.marginTop)!==null&&_ref3!==void 0?_ref3:0,marginBottom:(_ref4=definition===null||definition===void 0?void 0:(_definition$layout2=definition.layout)===null||_definition$layout2===void 0?void 0:_definition$layout2.marginBottom)!==null&&_ref4!==void 0?_ref4:0,marginLeft:(_ref5=definition===null||definition===void 0?void 0:(_definition$layout3=definition.layout)===null||_definition$layout3===void 0?void 0:_definition$layout3.marginLeft)!==null&&_ref5!==void 0?_ref5:0,marginRight:(_ref6=definition===null||definition===void 0?void 0:(_definition$layout4=definition.layout)===null||_definition$layout4===void 0?void 0:_definition$layout4.marginRight)!==null&&_ref6!==void 0?_ref6:0}),classes=_useStyles.classes,cx=_useStyles.cx;var _useWidgetsPreview=useWidgetsPreview(),setActiveWidget=_useWidgetsPreview.setActiveWidget,activeWidget=_useWidgetsPreview.activeWidget;// Handle clicks on the widget container in preview mode. Take care that highlighting only happens
 // when the widget is not already active, otherwise it would be confusing when users want to
 // interact with widget elements.
-var handleInteraction=useCallback(function(){setActiveWidget(definition.code,activeWidget!==definition.code);if(activeWidget!==definition.code){dispatchWidgetPreviewEvent('widget-clicked',definition.code);}},[activeWidget,definition.code,setActiveWidget]);var handlers=usePressHandler(handleInteraction);if(!Component){return null;}return React.createElement("section",_extends({id:"widget-code-".concat(definition.code),className:cx(classes.root,_defineProperty({},classes.preview,isPreview)),style:{marginTop:definition===null||definition===void 0?void 0:(_definition$layout5=definition.layout)===null||_definition$layout5===void 0?void 0:_definition$layout5.marginTop,marginBottom:definition===null||definition===void 0?void 0:(_definition$layout6=definition.layout)===null||_definition$layout6===void 0?void 0:_definition$layout6.marginBottom,marginLeft:definition===null||definition===void 0?void 0:(_definition$layout7=definition.layout)===null||_definition$layout7===void 0?void 0:_definition$layout7.marginLeft,marginRight:definition===null||definition===void 0?void 0:(_definition$layout8=definition.layout)===null||_definition$layout8===void 0?void 0:_definition$layout8.marginRight},"data-widget-name":definition.widgetConfigDefinitionCode},isPreview&&_extends({},handlers)),isPreview&&(definition===null||definition===void 0?void 0:definition.meta)&&React.createElement("div",{className:classes.widgetInfo},((_definition$meta=definition.meta)===null||_definition$meta===void 0?void 0:(_definition$meta$sche=_definition$meta.scheduled)===null||_definition$meta$sche===void 0?void 0:_definition$meta$sche.isScheduled)&&React.createElement(Tooltip,{text:(_definition$meta2=definition.meta)===null||_definition$meta2===void 0?void 0:(_definition$meta2$sch=_definition$meta2.scheduled)===null||_definition$meta2$sch===void 0?void 0:_definition$meta2$sch.tooltip},React.createElement(TimeIcon,{className:cx(classes.scheduledIcon,_defineProperty({},classes.scheduledIconExpired,(_definition$meta3=definition.meta)===null||_definition$meta3===void 0?void 0:(_definition$meta3$sch=_definition$meta3.scheduled)===null||_definition$meta3$sch===void 0?void 0:_definition$meta3$sch.isExpired))})),((_definition$meta4=definition.meta)===null||_definition$meta4===void 0?void 0:(_definition$meta4$hid=_definition$meta4.hidden)===null||_definition$meta4$hid===void 0?void 0:_definition$meta4$hid.isHidden)&&React.createElement(Tooltip,{text:(_definition$meta5=definition.meta)===null||_definition$meta5===void 0?void 0:(_definition$meta5$hid=_definition$meta5.hidden)===null||_definition$meta5$hid===void 0?void 0:_definition$meta5$hid.tooltip},React.createElement(VisibilityOffIcon,{className:classes.visibilityIcon}))),React.createElement(WidgetProvider,{definition:definition,isPreview:isPreview},React.createElement(Suspense,{fallback:React.createElement(Loading,null)},React.createElement(Component,null))));};export default Widget;
+var handleInteraction=useCallback(function(){setActiveWidget(definition.code,activeWidget!==definition.code);if(activeWidget!==definition.code){dispatchWidgetPreviewEvent('widget-clicked',definition.code);}},[activeWidget,definition.code,setActiveWidget]);var handlers=usePressHandler(handleInteraction);if(!Component){return null;}return React.createElement("section",_extends({id:"widget-code-".concat(definition.code),className:cx(classes.root,_defineProperty({},classes.preview,isPreview)),style:{marginTop:definition===null||definition===void 0?void 0:(_definition$layout5=definition.layout)===null||_definition$layout5===void 0?void 0:_definition$layout5.marginTop,marginBottom:definition===null||definition===void 0?void 0:(_definition$layout6=definition.layout)===null||_definition$layout6===void 0?void 0:_definition$layout6.marginBottom,marginLeft:definition===null||definition===void 0?void 0:(_definition$layout7=definition.layout)===null||_definition$layout7===void 0?void 0:_definition$layout7.marginLeft,marginRight:definition===null||definition===void 0?void 0:(_definition$layout8=definition.layout)===null||_definition$layout8===void 0?void 0:_definition$layout8.marginRight},"data-widget-name":definition.widgetConfigDefinitionCode},isPreview&&_extends({},handlers)),isPreview&&(definition===null||definition===void 0?void 0:definition.meta)&&React.createElement("div",{className:classes.widgetInfo},((_definition$meta=definition.meta)===null||_definition$meta===void 0?void 0:(_definition$meta$sche=_definition$meta.scheduled)===null||_definition$meta$sche===void 0?void 0:_definition$meta$sche.isScheduled)&&React.createElement(Tooltip,{text:(_definition$meta2=definition.meta)===null||_definition$meta2===void 0?void 0:(_definition$meta2$sch=_definition$meta2.scheduled)===null||_definition$meta2$sch===void 0?void 0:_definition$meta2$sch.tooltip},React.createElement(TimeIcon,{className:cx(classes.scheduledIcon,_defineProperty({},classes.scheduledIconExpired,(_definition$meta3=definition.meta)===null||_definition$meta3===void 0?void 0:(_definition$meta3$sch=_definition$meta3.scheduled)===null||_definition$meta3$sch===void 0?void 0:_definition$meta3$sch.isExpired))})),((_definition$meta4=definition.meta)===null||_definition$meta4===void 0?void 0:(_definition$meta4$hid=_definition$meta4.hidden)===null||_definition$meta4$hid===void 0?void 0:_definition$meta4$hid.isHidden)&&React.createElement(Tooltip,{text:(_definition$meta5=definition.meta)===null||_definition$meta5===void 0?void 0:(_definition$meta5$hid=_definition$meta5.hidden)===null||_definition$meta5$hid===void 0?void 0:_definition$meta5$hid.tooltip},React.createElement(VisibilityOffIcon,{className:classes.visibilityIcon}))),React.createElement(WidgetProvider,{definition:definition,isPreview:isPreview},React.createElement(Suspense,{fallback:React.createElement(Loading,null)},React.createElement(Component,isCustomLegacyWidget?{settings:definition.widgetConfig}:{}))));};Widget.defaultProps={isCustomLegacyWidget:false};export default Widget;

package/page/components/Widgets/Widgets.js

@@ -8,4 +8,4 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  */var Widgets=function Widgets(_ref){var _ref$widgets=_ref.widgets,widgetsProp=_ref$widgets===void 0?[]:_ref$widgets;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var _useRoute=useRoute(),pattern=_useRoute.pattern;var widgetsRef=useRef(null);var isPreview=pattern===PAGE_PREVIEW_PATTERN;var widgetComponents=useThemeWidgets('v2');usePreviewIframeCommunication(isPreview);// Create sanitized widgets array that only includes widgets with valid components.
 var widgets=useMemo(function(){if(isPreview){// All widgets are allowed in preview mode.
 return widgetsProp;}// Remove widgets that do not have a valid component.
-return widgetsProp.filter(function(widget){return!!widgetComponents[widget.widgetConfigDefinitionCode];});},[isPreview,widgetComponents,widgetsProp]);if(!Array.isArray(widgets)||widgets.length===0){return null;}return React.createElement(ConditionalWrapper,{condition:isPreview,wrapper:function wrapper(children){return React.createElement(WidgetsPreviewProvider,null,children,React.createElement(Overlay,{containerRef:widgetsRef}));}},React.createElement("div",{className:cx('engage__widgets',_defineProperty({},classes.preview,isPreview)),ref:widgetsRef},widgets.map(function(widget){var component=widgetComponents[widget.widgetConfigDefinitionCode]||widgetComponents[PLACEHOLDER_COMPONENT];return React.createElement(Widget,{key:widget.code,definition:widget,isPreview:isPreview,component:component});})));};Widgets.defaultProps={widgets:null};export default Widgets;
+return widgetsProp.filter(function(widget){return!!widgetComponents[widget.widgetConfigDefinitionCode];});},[isPreview,widgetComponents,widgetsProp]);if(!Array.isArray(widgets)||widgets.length===0){return null;}return React.createElement(ConditionalWrapper,{condition:isPreview,wrapper:function wrapper(children){return React.createElement(WidgetsPreviewProvider,null,children,React.createElement(Overlay,{containerRef:widgetsRef}));}},React.createElement("div",{className:cx('engage__widgets',_defineProperty({},classes.preview,isPreview)),ref:widgetsRef},widgets.map(function(widget){var component=widgetComponents[widget.widgetConfigDefinitionCode]||widgetComponents[PLACEHOLDER_COMPONENT];return React.createElement(Widget,{key:widget.code,definition:widget,isPreview:isPreview,component:component,isCustomLegacyWidget:widget.isCustomLegacyWidget});})));};Widgets.defaultProps={widgets:null};export default Widgets;

package/page/components/Widgets/types.d.ts

@@ -54,6 +54,11 @@ export interface WidgetDefinition {
    * Individual configuration for the widget.
    */
   widgetConfig: Record<string, any>;
+  /**
+   * Whether the widget is a legacy custom widget provided by an extension that's configured
+   * via an HTML comment inside a HTML widget.
+   */
+  isCustomLegacyWidget?: boolean;
   /**
    * Visibility settings for the widget.
    */

package/page/reducers/index.js

@@ -1,6 +1,15 @@
-import{produce}from'immer';import{REQUEST_PAGE_CONFIG_V2,RECEIVE_PAGE_CONFIG_V2,ERROR_PAGE_CONFIG_V2,PAGE_STATE_LIFETIME}from"../constants";var defaultState={};/**
+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{produce}from'immer';import{REQUEST_PAGE_CONFIG_V2,RECEIVE_PAGE_CONFIG_V2,ERROR_PAGE_CONFIG_V2,PAGE_STATE_LIFETIME}from"../constants";var customWidgetRegex=/<!\x2D\x2DWidget((?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])*)\x2D\x2D>/gm;/**
+ * Decodes entities from a HTML string
+ * @param {string} html HTML string to decode
+ * @returns {string}
+ */var decodeHTMLEntities=function decodeHTMLEntities(){var html=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'';var textarea=document.createElement('textarea');textarea.innerHTML=html;return textarea.value;};/**
+ * @param {Object} data The page data object
+ * @returns {Object} The sanitized page data
+ */var transformCustomLegacyWidgets=function transformCustomLegacyWidgets(data){var _data$dropzones;if(!Array.isArray(data===null||data===void 0?void 0:(_data$dropzones=data.dropzones)===null||_data$dropzones===void 0?void 0:_data$dropzones.cmsWidgetList)){return data;}var cmsWidgetList=data.dropzones.cmsWidgetList;var transformedWidgets=cmsWidgetList.map(function(widget){var _widget$widgetConfig;if(widget.widgetConfigDefinitionCode!=='@shopgate/widgets/htmlWidget'||!(widget===null||widget===void 0?void 0:(_widget$widgetConfig=widget.widgetConfig)===null||_widget$widgetConfig===void 0?void 0:_widget$widgetConfig.html)){return widget;}var content=decodeHTMLEntities(widget.widgetConfig.html.trim());if(content.startsWith('<!--Widget')){try{var settings=customWidgetRegex.exec(content);customWidgetRegex.lastIndex=0;if(settings[0]===content){var customLegacyWidget=JSON.parse(settings[1]);// Convert legacy widget data to the new format
+return _extends({},widget,{widgetConfig:customLegacyWidget.settings||{},widgetConfigDefinitionCode:customLegacyWidget.type||'',isCustomLegacyWidget:true});}}catch(err){// Nothing to do here
+}}return widget;});return _extends({},data,{dropzones:_extends({},data.dropzones,{cmsWidgetList:transformedWidgets})});};var defaultState={};/**
  * Stores state of the v2 implementation of pages.
  * @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: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;}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){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;}default:break;}});/* eslint-enable no-param-reassign */return producer(state);}

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);