@shopgate/engage 7.29.0 → 7.29.1-beta.1

package/components/Typography/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Typography } from './Typography';
+export type { TypographyProps } from './Typography';

package/package.json

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

package/page/components/WidgetHeadline/WidgetHeadline.js

@@ -1,7 +1,14 @@
-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,{useMemo}from'react';import{makeStyles}from'@shopgate/engage/styles';import{Typography}from'@shopgate/engage/components';import PropTypes from'prop-types';var useStyles=makeStyles()(function(theme){return{root:{padding:theme.spacing(2)}};});/**
+var _excluded=["headline","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 _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{makeStyles}from'@shopgate/engage/styles';import{Typography}from'@shopgate/engage/components';import PropTypes from'prop-types';var useStyles=makeStyles()(function(theme){return{root:{padding:theme.spacing(2)}};});/** @typedef {import('@shopgate/engage/components/Typography').TypographyProps} TypographyProps */ /**
+ * @typedef {Object} HeadlineProps
+ * @property {string} text The headline text.
+ * @property {TypographyProps['align]} [textAlign] The text alignment.
+ * @property {TypographyProps['variant']} [typography] The typography variant to use.
+ * @property {boolean} [bold] Whether the text should be bold.
+ * @property {boolean} [italic] Whether the text should be italic.
+ * @property {boolean} [underline] Whether the text should be underlined.
+ */ /** @typedef {{headline: HeadlineProps} & TypographyProps} WidgetHeadlineProps */ /**
  * The WidgetHeadline is used to display a headline for the widget.
- * @param {Object} props The component props.
- * @param {Object} props.headline The headline props.
+ * @param {WidgetHeadlineProps} props The component props.
  * @returns {JSX.Element}
- */var WidgetHeadline=function WidgetHeadline(_ref){var headline=_ref.headline,className=_ref.className;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx,css=_useStyles.css;var _ref2=headline||{},_ref2$typography=_ref2.typography,typography=_ref2$typography===void 0?'h3':_ref2$typography,text=_ref2.text,textAlign=_ref2.textAlign,bold=_ref2.bold,italic=_ref2.italic,underline=_ref2.underline;var styles=useMemo(function(){return _extends({},bold&&{fontWeight:'bold'},{},italic&&{fontStyle:'italic'},{},underline&&{textDecoration:'underline'});},[bold,italic,underline]);if(!text)return null;return React.createElement(Typography,{variant:typography,align:textAlign// && increases the specificity of the styles which guarantees that defaults are overridden
-,className:cx(css({'&&':_extends({},styles)}),classes.root,className)},text);};WidgetHeadline.defaultProps={className:null};export default WidgetHeadline;
+ */var WidgetHeadline=function WidgetHeadline(_ref){var headline=_ref.headline,className=_ref.className,rest=_objectWithoutProperties(_ref,_excluded);var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx,css=_useStyles.css;var _ref2=headline||{},_ref2$typography=_ref2.typography,typography=_ref2$typography===void 0?'h3':_ref2$typography,text=_ref2.text,textAlign=_ref2.textAlign,bold=_ref2.bold,italic=_ref2.italic,underline=_ref2.underline;var styles=useMemo(function(){return _extends({},bold&&{fontWeight:'bold'},{},italic&&{fontStyle:'italic'},{},underline&&{textDecoration:'underline'});},[bold,italic,underline]);if(!text)return null;return React.createElement(Typography,_extends({variant:typography,align:textAlign// && increases the specificity of the styles which guarantees that defaults are overridden
+,className:cx(css({'&&':_extends({},styles)}),classes.root,className)},rest),text);};WidgetHeadline.defaultProps={className:null};export default WidgetHeadline;

package/page/widgets/ImageSlider/hooks.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 _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{useMemo}from'react';import{useWidget}from'@shopgate/engage/page/hooks';import{useTheme}from'@shopgate/engage/styles';import{resolveBorderRadiusFromWidgetConfig}from"../../helpers";/**
+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{useMemo}from'react';import{useWidget}from'@shopgate/engage/page/hooks';import{useTheme}from'@shopgate/engage/styles';import{resolveBorderRadiusFromWidgetConfig}from"../../helpers";/**
  * @typedef {import('swiper/react').SwiperProps} SwiperCmpProps
  */ /**
  * @typedef {Object} ImageSliderImageData
@@ -24,13 +24,19 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @property {number} [borderRadiusCustom] The custom border radius value.
  * the pagination type for the slider.
  */ /**
- * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
+ * @typedef {ReturnType<typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<ImageSliderWidgetConfig> >} UseWidgetReturnType
  */ // eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the ImageSlider widget configuration and data.
- */export var useImageSliderWidget=function useImageSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview;var theme=useTheme();var images=config.images,slideAutomatic=config.slideAutomatic,endlessSlider=config.endlessSlider,sliderSpeed=config.sliderSpeed,slidesPerView=config.slidesPerView,slidesPerViewCustomSmall=config.slidesPerViewCustomSmall,slidesPerViewCustomMedium=config.slidesPerViewCustomMedium,slidesPerViewCustomLarge=config.slidesPerViewCustomLarge,imageSpacing=config.imageSpacing,_config$paginationSty=config.paginationStyle,paginationStyle=_config$paginationSty===void 0?'bullets':_config$paginationSty,borderRadius=config.borderRadius,borderRadiusCustom=config.borderRadiusCustom;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});var paginationType=useMemo(function(){return paginationStyle==='default'?'bullets':paginationStyle.toLowerCase();},[paginationStyle]);var imagesWithUrls=useMemo(function(){return images.filter(function(img){var _img$image;return img===null||img===void 0?void 0:(_img$image=img.image)===null||_img$image===void 0?void 0:_img$image.url;});},[images]);/**
+ */export var useImageSliderWidget=function useImageSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview,layout=_useWidget.layout;var theme=useTheme();var images=config.images,slideAutomatic=config.slideAutomatic,endlessSlider=config.endlessSlider,sliderSpeed=config.sliderSpeed,slidesPerView=config.slidesPerView,slidesPerViewCustomSmall=config.slidesPerViewCustomSmall,slidesPerViewCustomMedium=config.slidesPerViewCustomMedium,slidesPerViewCustomLarge=config.slidesPerViewCustomLarge,imageSpacing=config.imageSpacing,_config$paginationSty=config.paginationStyle,paginationStyle=_config$paginationSty===void 0?'bullets':_config$paginationSty,borderRadius=config.borderRadius,borderRadiusCustom=config.borderRadiusCustom;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});var paginationType=useMemo(function(){return paginationStyle==='default'?'bullets':paginationStyle.toLowerCase();},[paginationStyle]);var imagesWithUrls=useMemo(function(){return images.filter(function(img){var _img$image;return img===null||img===void 0?void 0:(_img$image=img.image)===null||_img$image===void 0?void 0:_img$image.url;});},[images]);/**
    * @type {SwiperCmpProps}
-   */var swiperProps=useMemo(function(){var slidesPerViewSmall=1.0;var slidesPerViewMedium=1.3;var slidesPerViewLarge=1.6;if(slidesPerView==='dense'){slidesPerViewSmall=1.3;slidesPerViewMedium=1.8;slidesPerViewLarge=2.3;}else if(slidesPerView==='custom'){slidesPerViewSmall=slidesPerViewCustomSmall;slidesPerViewMedium=slidesPerViewCustomMedium;slidesPerViewLarge=slidesPerViewCustomLarge;}var breakpoints=_defineProperty(_defineProperty({},theme.breakpoints.values.sm,{slidesPerView:slidesPerViewMedium}),theme.breakpoints.values.md,{slidesPerView:slidesPerViewLarge});var showPagination=paginationType!=='off'&&imagesWithUrls.length>1;// Create a key that changes when relevant config changes, to force remount of Swiper
-var componentKey=isPreview?JSON.stringify(_extends({slidesPerView:slidesPerView,spaceBetween:imageSpacing,paginationType:paginationType,showPagination:showPagination},breakpoints)):null;return _extends({autoplay:slideAutomatic?{delay:sliderSpeed}:false,loop:endlessSlider,slidesPerView:slidesPerViewSmall,breakpoints:breakpoints,spaceBetween:imageSpacing,pagination:showPagination?{type:paginationType,clickable:true,dynamicBullets:true}:false},isPreview?{key:componentKey,// Improves interaction with the slider in the CMS preview iframe
-touchStartPreventDefault:true}:{});},[slidesPerView,theme.breakpoints.values.sm,theme.breakpoints.values.md,paginationType,imagesWithUrls.length,imageSpacing,slideAutomatic,sliderSpeed,endlessSlider,isPreview,slidesPerViewCustomSmall,slidesPerViewCustomMedium,slidesPerViewCustomLarge]);return{slides:imagesWithUrls,swiperProps:swiperProps,borderRadius:borderRadiusResolved};};
+   */var swiperProps=useMemo(function(){var _ref,_ref2;var slidesPerViewSmall=1.0;var slidesPerViewMedium=1.3;var slidesPerViewLarge=1.6;if(slidesPerView==='dense'){slidesPerViewSmall=1.3;slidesPerViewMedium=1.8;slidesPerViewLarge=2.3;}else if(slidesPerView==='custom'){slidesPerViewSmall=slidesPerViewCustomSmall;slidesPerViewMedium=slidesPerViewCustomMedium;slidesPerViewLarge=slidesPerViewCustomLarge;}/**
+     * Special image spacing for slides with a SINGLE slide per view.
+     *
+     * Needs to be at least as large as the highest horizontal layout margin (when set) to avoid
+     * showing of more than one slide.
+     * @type {number}
+     */var imageSpacingForSingleSlide=Math.max((_ref=layout===null||layout===void 0?void 0:layout.marginLeft)!==null&&_ref!==void 0?_ref:0,(_ref2=layout===null||layout===void 0?void 0:layout.marginRight)!==null&&_ref2!==void 0?_ref2:0,imageSpacing);var breakpoints=_defineProperty(_defineProperty({},theme.breakpoints.values.sm,_extends({slidesPerView:slidesPerViewMedium},slidesPerViewMedium===1&&imageSpacingForSingleSlide?{spaceBetween:imageSpacingForSingleSlide}:{spaceBetween:imageSpacing})),theme.breakpoints.values.md,_extends({slidesPerView:slidesPerViewLarge},slidesPerViewLarge===1&&imageSpacingForSingleSlide?{spaceBetween:imageSpacingForSingleSlide}:{spaceBetween:imageSpacing}));var showPagination=paginationType!=='off'&&imagesWithUrls.length>1;// Create a key that changes when relevant config changes, to force remount of Swiper
+var componentKey=isPreview?JSON.stringify(_extends({slidesPerView:slidesPerView,spaceBetween:imageSpacing,paginationType:paginationType,showPagination:showPagination},breakpoints)):null;return _extends({autoplay:slideAutomatic?{delay:sliderSpeed}:false,loop:endlessSlider,slidesPerView:slidesPerViewSmall,breakpoints:breakpoints,pagination:showPagination?{type:paginationType,clickable:true,dynamicBullets:true}:false},layout.marginLeft||layout.marginRight?{style:_extends({},layout.marginLeft?{marginLeft:layout.marginLeft*-1,paddingLeft:layout.marginLeft}:{},{},layout.marginRight?{marginRight:layout.marginRight*-1,paddingRight:layout.marginRight}:{})}:null,{},slidesPerViewSmall===1&&imageSpacingForSingleSlide?{spaceBetween:imageSpacingForSingleSlide}:{spaceBetween:imageSpacing},{},isPreview?{key:componentKey,// Improves interaction with the slider in the CMS preview iframe
+touchStartPreventDefault:true}:{});},[slidesPerView,theme.breakpoints.values.sm,theme.breakpoints.values.md,paginationType,imagesWithUrls.length,imageSpacing,slideAutomatic,sliderSpeed,endlessSlider,isPreview,slidesPerViewCustomSmall,slidesPerViewCustomMedium,slidesPerViewCustomLarge,layout]);return{slides:imagesWithUrls,swiperProps:swiperProps,borderRadius:borderRadiusResolved};};

package/page/widgets/ProductSlider/hooks.js

@@ -21,4 +21,4 @@ import _camelCase from"lodash/camelCase";function _extends(){_extends=Object.ass
  */ // eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the Product Slider widget configuration.
- */export var useProductSliderWidget=function useProductSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview;var products=config.products,productCount=config.productCount,sort=config.sort,_config$showName=config.showName,showName=_config$showName===void 0?false:_config$showName,_config$showPrice=config.showPrice,showPrice=_config$showPrice===void 0?false:_config$showPrice,_config$showRating=config.showRating,showRating=_config$showRating===void 0?false:_config$showRating,_config$slideAutomati=config.slideAutomatic,slideAutomatic=_config$slideAutomati===void 0?true:_config$slideAutomati,_config$endlessSlider=config.endlessSlider,endlessSlider=_config$endlessSlider===void 0?true:_config$endlessSlider,_config$sliderSpeed=config.sliderSpeed,sliderSpeed=_config$sliderSpeed===void 0?7000:_config$sliderSpeed,_config$showHeadline=config.showHeadline,showHeadline=_config$showHeadline===void 0?false:_config$showHeadline,headline=config.headline;var productSearchParams=useMemo(function(){return getProductSearchParamsFromProductsInputConfig(products);},[products]);var swiperProps=useMemo(function(){return{autoplay:slideAutomatic,delay:sliderSpeed,loop:endlessSlider};},[slideAutomatic,sliderSpeed,endlessSlider]);var productItemProps=useMemo(function(){return{hideName:!showName,hidePrice:!showPrice,hideRating:!showRating};},[showName,showPrice,showRating]);return _extends({},productSearchParams,{sort:_camelCase(sort),productCount:productCount,swiperProps:swiperProps,productItemProps:productItemProps,isPreview:isPreview,showHeadline:showHeadline,headline:headline});};
+ */export var useProductSliderWidget=function useProductSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview,layout=_useWidget.layout;var products=config.products,productCount=config.productCount,sort=config.sort,_config$showName=config.showName,showName=_config$showName===void 0?false:_config$showName,_config$showPrice=config.showPrice,showPrice=_config$showPrice===void 0?false:_config$showPrice,_config$showRating=config.showRating,showRating=_config$showRating===void 0?false:_config$showRating,_config$slideAutomati=config.slideAutomatic,slideAutomatic=_config$slideAutomati===void 0?true:_config$slideAutomati,_config$endlessSlider=config.endlessSlider,endlessSlider=_config$endlessSlider===void 0?true:_config$endlessSlider,_config$sliderSpeed=config.sliderSpeed,sliderSpeed=_config$sliderSpeed===void 0?7000:_config$sliderSpeed,_config$showHeadline=config.showHeadline,showHeadline=_config$showHeadline===void 0?false:_config$showHeadline,headline=config.headline;var productSearchParams=useMemo(function(){return getProductSearchParamsFromProductsInputConfig(products);},[products]);var swiperProps=useMemo(function(){return _extends({autoplay:slideAutomatic,delay:sliderSpeed,loop:endlessSlider},layout.marginLeft||layout.marginRight?{style:_extends({},layout.marginLeft?{marginLeft:layout.marginLeft*-1,paddingLeft:layout.marginLeft}:{},{},layout.marginRight?{marginRight:layout.marginRight*-1,paddingRight:layout.marginRight}:{})}:null);},[slideAutomatic,sliderSpeed,endlessSlider,layout]);var productItemProps=useMemo(function(){return{hideName:!showName,hidePrice:!showPrice,hideRating:!showRating};},[showName,showPrice,showRating]);return _extends({},productSearchParams,{sort:_camelCase(sort),productCount:productCount,swiperProps:swiperProps,productItemProps:productItemProps,isPreview:isPreview,showHeadline:showHeadline,headline:headline});};