@shopgate/engage 7.5.2 → 7.6.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/View/components/Content/index.js +3 -3
- package/components/View/index.js +1 -1
- package/components/constants.js +1 -1
- package/package.json +7 -7
- package/product/components/ProductBadges/index.js +5 -0
- package/product/components/ProductCard/index.js +2 -2
- package/product/components/ProductCard/style.js +1 -1
- package/product/components/ProductDiscountBadge/connector.js +6 -0
- package/product/components/ProductDiscountBadge/index.js +4 -0
- package/product/components/ProductDiscountBadge/mock.js +7 -0
- package/product/components/ProductDiscountBadge/spec.js +5 -0
- package/product/components/ProductDiscountBadge/style.js +1 -0
- package/product/index.js +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
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 _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{Component}from'react';import PropTypes from'prop-types';import Swipeable from'react-swipeable';import Helmet from'react-helmet';import ResponsiveContainer from'@shopgate/engage/components/ResponsiveContainer';import appConfig from'@shopgate/pwa-common/helpers/config';import event from'@shopgate/pwa-core/classes/Event';import{router}from'@virtuous/conductor';import{RouteContext}from'@shopgate/pwa-common/context';import{EVENT_KEYBOARD_WILL_CHANGE}from'@shopgate/pwa-core/constants/AppEvents';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{VIEW_CONTENT}from'@shopgate/pwa-common/constants/Portals';import{useScrollContainer}from'@shopgate/engage/core';import Above from"../Above";import Below from"../Below";import styles from"./style";/**
|
|
1
|
+
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 _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{Component}from'react';import PropTypes from'prop-types';import Swipeable from'react-swipeable';import Helmet from'react-helmet';import ResponsiveContainer from'@shopgate/engage/components/ResponsiveContainer';import appConfig from'@shopgate/pwa-common/helpers/config';import event from'@shopgate/pwa-core/classes/Event';import{router}from'@virtuous/conductor';import{RouteContext}from'@shopgate/pwa-common/context';import{EVENT_KEYBOARD_WILL_CHANGE}from'@shopgate/pwa-core/constants/AppEvents';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{VIEW_CONTENT}from'@shopgate/pwa-common/constants/Portals';import{useScrollContainer}from'@shopgate/engage/core';import{ConditionalWrapper}from"../../../ConditionalWrapper";import Above from"../Above";import Below from"../Below";import styles from"./style";/**
|
|
2
2
|
* The ViewContent component.
|
|
3
3
|
*/var ViewContent=/*#__PURE__*/function(_Component){_inherits(ViewContent,_Component);/**
|
|
4
4
|
* @param {Object} props The component props.
|
|
@@ -14,8 +14,8 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
|
|
|
14
14
|
* @returns {Object}
|
|
15
15
|
*/},{key:"render",/**
|
|
16
16
|
* @return {JSX}
|
|
17
|
-
*/value:function render(){return React.createElement(Swipeable,{onSwiped:this.handleSwipe,flickThreshold:0.6,delta:10},React.createElement("article",{className:styles,ref:this.scrollContainer?this.ref:null,style:this.style},React.createElement(Helmet,{title:appConfig.shopName}),React.createElement(Above,null),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},this.props.visible?React.createElement("div",{id:"PageHeaderBelow"}):null),React.createElement(SurroundPortals,{portalName:VIEW_CONTENT},this.props.children),React.createElement(Below,null)));}},{key:"style",get:function get(){var noScrollOnKeyboard=this.props.noScrollOnKeyboard;var keyboardHeight=this.state.keyboardHeight;var overflow='inherit';if(this.scrollContainer){overflow=noScrollOnKeyboard&&keyboardHeight>0?'hidden':'auto';}return{overflow:overflow,paddingBottom:keyboardHeight};}/**
|
|
17
|
+
*/value:function render(){return React.createElement(Swipeable,{onSwiped:this.handleSwipe,flickThreshold:0.6,delta:10},React.createElement("article",{className:styles,ref:this.scrollContainer?this.ref:null,style:this.style},React.createElement(Helmet,{title:appConfig.shopName}),React.createElement(Above,null),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},this.props.visible?React.createElement("div",{id:"PageHeaderBelow"}):null),React.createElement(ConditionalWrapper,{condition:!this.props.noContentPortal,wrapper:function wrapper(children){return React.createElement(SurroundPortals,{portalName:VIEW_CONTENT},children);}},this.props.children),React.createElement(Below,null)));}},{key:"style",get:function get(){var noScrollOnKeyboard=this.props.noScrollOnKeyboard;var keyboardHeight=this.state.keyboardHeight;var overflow='inherit';if(this.scrollContainer){overflow=noScrollOnKeyboard&&keyboardHeight>0?'hidden':'auto';}return{overflow:overflow,paddingBottom:keyboardHeight};}/**
|
|
18
18
|
* Handles a keyboard change event.
|
|
19
19
|
* @param {boolean} open If the keyboard is now open.
|
|
20
20
|
* @param {boolean} overlap The height of the keyboard.
|
|
21
|
-
*/}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(props,state){if(props.visible||state.keyboardHeight===0){return null;}return{keyboardHeight:0};}}]);return ViewContent;}(Component);_defineProperty(ViewContent,"contextType",RouteContext);_defineProperty(ViewContent,"defaultProps",{children:null,noScrollOnKeyboard:false});export default(function(props){return React.createElement(RouteContext.Consumer,null,function(_ref2){var visible=_ref2.visible;return React.createElement(ViewContent,_extends({},props,{visible:visible}));});});
|
|
21
|
+
*/}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(props,state){if(props.visible||state.keyboardHeight===0){return null;}return{keyboardHeight:0};}}]);return ViewContent;}(Component);_defineProperty(ViewContent,"contextType",RouteContext);_defineProperty(ViewContent,"defaultProps",{children:null,noScrollOnKeyboard:false,noContentPortal:false});export default(function(props){return React.createElement(RouteContext.Consumer,null,function(_ref2){var visible=_ref2.visible;return React.createElement(ViewContent,_extends({},props,{visible:visible}));});});
|
package/components/View/index.js
CHANGED
|
@@ -3,7 +3,7 @@ export{ViewContext};/**
|
|
|
3
3
|
* The View container component.
|
|
4
4
|
* @param {Object} props The component props.
|
|
5
5
|
* @return {JSX}
|
|
6
|
-
*/function ViewContainer(_ref){var background=_ref.background,children=_ref.children,noScrollOnKeyboard=_ref.noScrollOnKeyboard,visible=_ref.visible,ariaHidden=_ref['aria-hidden'];if(visible){setPageBackgroundColor(background);}var style={display:visible?'block':'none'};return React.createElement(ViewProvider,null,React.createElement(ViewContext.Consumer,null,function(_ref2){var setContentRef=_ref2.setContentRef,ariaHiddenContext=_ref2.ariaHidden;return React.createElement("section",{className:styles,style:style,"aria-hidden":ariaHidden||ariaHiddenContext},React.createElement(Content,{noScrollOnKeyboard:noScrollOnKeyboard,setContentRef:setContentRef},children));}));}ViewContainer.defaultProps={'aria-hidden':false,background:colors.light,children:null,noScrollOnKeyboard:false};/**
|
|
6
|
+
*/function ViewContainer(_ref){var background=_ref.background,children=_ref.children,noScrollOnKeyboard=_ref.noScrollOnKeyboard,visible=_ref.visible,ariaHidden=_ref['aria-hidden'],noContentPortal=_ref.noContentPortal;if(visible){setPageBackgroundColor(background);}var style={display:visible?'block':'none'};return React.createElement(ViewProvider,null,React.createElement(ViewContext.Consumer,null,function(_ref2){var setContentRef=_ref2.setContentRef,ariaHiddenContext=_ref2.ariaHidden;return React.createElement("section",{className:styles,style:style,"aria-hidden":ariaHidden||ariaHiddenContext},React.createElement(Content,{noScrollOnKeyboard:noScrollOnKeyboard,setContentRef:setContentRef,noContentPortal:noContentPortal},children));}));}ViewContainer.defaultProps={'aria-hidden':false,background:colors.light,children:null,noScrollOnKeyboard:false,noContentPortal:false};/**
|
|
7
7
|
* @param {Object} props The component props.
|
|
8
8
|
* @returns {JSX}
|
|
9
9
|
*/export default function View(props){return React.createElement(RouteContext.Consumer,null,function(_ref3){var visible=_ref3.visible;return React.createElement(ViewContainer,_extends({},props,{visible:visible}));});}
|
package/components/constants.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export var PORTAL_PRODUCT_IMAGE='component.product-image';export var PORTAL_PRODUCT_MEDIA='component.product-media';export var PORTAL_PRODUCT_MEDIA_SECTION='component.product-media-section';
|
|
1
|
+
export var PORTAL_PRODUCT_IMAGE='component.product-image';export var PORTAL_PRODUCT_MEDIA='component.product-media';export var PORTAL_PRODUCT_MEDIA_SECTION='component.product-media-section';export var PORTAL_PRODUCT_BADGES='component.product-badges';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shopgate/engage",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.6.0-beta.3",
|
|
4
4
|
"description": "Shopgate's ENGAGE library.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Shopgate <support@shopgate.com>",
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
],
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@shopgate/native-modules": "1.0.0-beta.18",
|
|
19
|
-
"@shopgate/pwa-common": "7.
|
|
20
|
-
"@shopgate/pwa-common-commerce": "7.
|
|
21
|
-
"@shopgate/pwa-core": "7.
|
|
22
|
-
"@shopgate/pwa-ui-ios": "7.
|
|
23
|
-
"@shopgate/pwa-ui-material": "7.
|
|
24
|
-
"@shopgate/pwa-ui-shared": "7.
|
|
19
|
+
"@shopgate/pwa-common": "7.6.0-beta.3",
|
|
20
|
+
"@shopgate/pwa-common-commerce": "7.6.0-beta.3",
|
|
21
|
+
"@shopgate/pwa-core": "7.6.0-beta.3",
|
|
22
|
+
"@shopgate/pwa-ui-ios": "7.6.0-beta.3",
|
|
23
|
+
"@shopgate/pwa-ui-material": "7.6.0-beta.3",
|
|
24
|
+
"@shopgate/pwa-ui-shared": "7.6.0-beta.3",
|
|
25
25
|
"@stripe/react-stripe-js": "^1.1.2",
|
|
26
26
|
"@stripe/stripe-js": "^1.3.1",
|
|
27
27
|
"@virtuous/conductor": "~2.5.0",
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
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 PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import kebabCase from'lodash/kebabCase';import{SurroundPortals}from"../../../components";import{PORTAL_PRODUCT_BADGES}from"../../../components/constants";var styles={root:css({position:'absolute',left:10,top:10,zIndex:5,transform:'translate3d(0, 0, 0)',display:'flex',pointerEvents:'none',' > *:empty':{display:'none'}}).toString()};/**
|
|
2
|
+
* The ProductBadges component
|
|
3
|
+
* @param {Object} props The component props
|
|
4
|
+
* @returns {JSX}
|
|
5
|
+
*/var ProductBadges=function ProductBadges(_ref){var children=_ref.children,location=_ref.location,productId=_ref.productId,portalProps=_ref.portalProps,className=_ref.className;var props=useMemo(function(){return _extends({},portalProps,{location:location,productId:productId});},[location,portalProps,productId]);var locationClass=useMemo(function(){if(!location){return'';}return"product_badges__".concat(kebabCase(location));},[location]);return React.createElement("div",{className:classNames(styles.root,className,'product_badges',locationClass)},React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_BADGES,portalProps:props},children));};ProductBadges.defaultProps={portalProps:null,children:PropTypes.node,className:''};export default ProductBadges;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React,{Fragment}from'react';import PropTypes from'prop-types';import{isBeta}from'@shopgate/engage/core';import{Link,Portal,RatingStars,DiscountBadge}from'@shopgate/engage/components';import{getProductRoute,MapPriceHint,ProductImage,OrderQuantityHint,FeaturedMedia,Swatches,ProductName}from'@shopgate/engage/product';import*as portals from'@shopgate/pwa-common-commerce/category';import ProductGridPrice from"../ProductGridPrice";import{getProductImageSettings}from"../../helpers";import styles from"./style";var location='productCard';/**
|
|
1
|
+
import React,{Fragment}from'react';import PropTypes from'prop-types';import{isBeta}from'@shopgate/engage/core';import{Link,Portal,RatingStars,DiscountBadge}from'@shopgate/engage/components';import{getProductRoute,MapPriceHint,ProductImage,OrderQuantityHint,FeaturedMedia,Swatches,ProductName,ProductBadges}from'@shopgate/engage/product';import*as portals from'@shopgate/pwa-common-commerce/category';import ProductGridPrice from"../ProductGridPrice";import{getProductImageSettings}from"../../helpers";import styles from"./style";var location='productCard';/**
|
|
2
2
|
* The ProductCard component.
|
|
3
3
|
* @param {Object} props The component props.
|
|
4
4
|
* @param {Object} props.product The product data.
|
|
@@ -7,4 +7,4 @@ import React,{Fragment}from'react';import PropTypes from'prop-types';import{isBe
|
|
|
7
7
|
* @param {boolean} props.hideName Whether the name should be hidden.
|
|
8
8
|
* @param {number} props.titleRows The max number of rows for the product title.
|
|
9
9
|
* @return {JSX}
|
|
10
|
-
*/function ProductCard(props){var product=props.product,hidePrice=props.hidePrice,hideRating=props.hideRating,hideName=props.hideName,titleRows=props.titleRows;var _getProductImageSetti=getProductImageSettings(),gridResolutions=_getProductImageSetti.ListImage;return React.createElement(Link,{tagName:"a",href:getProductRoute(product.id),itemProp:"item",itemScope:true,itemType:"http://schema.org/Product"},isBeta()&&product.featuredMedia?React.createElement(FeaturedMedia,{type:product.featuredMedia.type,url:product.featuredMedia.url,altText:product.featuredMedia.altText}):React.createElement(ProductImage,{src:product.featuredImageBaseUrl,resolutions:gridResolutions,alt:product.name,itemProp:"image"}),!!(!hidePrice&&product.price.discount)&&React.createElement("div",{className:styles.badgeWrapper},React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT,props:{productId:product.id}},React.createElement(DiscountBadge,{text:"-".concat(product.price.discount,"%")})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_AFTER,props:{productId:product.id}})),!(hidePrice&&hideRating)&&React.createElement("div",{className:styles.details},!hideRating&&product.rating&&product.rating.average>0&&React.createElement(RatingStars,{value:product.rating.average}),React.createElement(Swatches,{productId:product.id}),!hideName&&React.createElement(ProductName,{name:product.name,className:styles.title,testId:"Productname: ".concat(product.name),itemProp:"name",rows:titleRows||3}),React.createElement(MapPriceHint,{productId:product.id}),React.createElement(OrderQuantityHint,{productId:product.id}),!hidePrice&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_BEFORE,props:{productId:product.id,location:location}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE,props:{productId:product.id,location:location}},React.createElement(ProductGridPrice,{product:product})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_AFTER,props:{productId:product.id,location:location}}))));}export default ProductCard;
|
|
10
|
+
*/function ProductCard(props){var product=props.product,hidePrice=props.hidePrice,hideRating=props.hideRating,hideName=props.hideName,titleRows=props.titleRows;var _getProductImageSetti=getProductImageSettings(),gridResolutions=_getProductImageSetti.ListImage;return React.createElement(Link,{tagName:"a",href:getProductRoute(product.id),itemProp:"item",itemScope:true,itemType:"http://schema.org/Product"},isBeta()&&product.featuredMedia?React.createElement(FeaturedMedia,{type:product.featuredMedia.type,url:product.featuredMedia.url,altText:product.featuredMedia.altText}):React.createElement(ProductImage,{src:product.featuredImageBaseUrl,resolutions:gridResolutions,alt:product.name,itemProp:"image"}),React.createElement(ProductBadges,{location:location,productId:product.id},!!(!hidePrice&&product.price.discount)&&React.createElement("div",{className:styles.badgeWrapper},React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT,props:{productId:product.id}},React.createElement(DiscountBadge,{text:"-".concat(product.price.discount,"%")})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_AFTER,props:{productId:product.id}}))),!(hidePrice&&hideRating)&&React.createElement("div",{className:styles.details},!hideRating&&product.rating&&product.rating.average>0&&React.createElement(RatingStars,{value:product.rating.average}),React.createElement(Swatches,{productId:product.id}),!hideName&&React.createElement(ProductName,{name:product.name,className:styles.title,testId:"Productname: ".concat(product.name),itemProp:"name",rows:titleRows||3}),React.createElement(MapPriceHint,{productId:product.id}),React.createElement(OrderQuantityHint,{productId:product.id}),!hidePrice&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_BEFORE,props:{productId:product.id,location:location}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE,props:{productId:product.id,location:location}},React.createElement(ProductGridPrice,{product:product})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_AFTER,props:{productId:product.id,location:location}}))));}export default ProductCard;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from'glamor';import{themeConfig,themeName}from'@shopgate/pwa-common/helpers/config';var isIOS=themeName.includes('ios');var colors=themeConfig.colors;var container=css(isIOS?{fontSize:14}:{position:'relative',display:'block',background:colors.light,fontSize:14,height:'100%'}).toString();var details=css({padding:'12px 16px',lineHeight:1.35}).toString();var title=css({fontWeight:'500',lineHeight:1.15,marginTop:1}).toString();var badgeWrapper=css({
|
|
1
|
+
import{css}from'glamor';import{themeConfig,themeName}from'@shopgate/pwa-common/helpers/config';var isIOS=themeName.includes('ios');var colors=themeConfig.colors;var container=css(isIOS?{fontSize:14}:{position:'relative',display:'block',background:colors.light,fontSize:14,height:'100%'}).toString();var details=css({padding:'12px 16px',lineHeight:1.35}).toString();var title=css({fontWeight:'500',lineHeight:1.15,marginTop:1}).toString();var badgeWrapper=css({minWidth:40}).toString();var wishlist=css({display:'none',position:'absolute',right:16,left:'auto',transform:'translate3d(0, -50%, 0)'}).toString();export default{badgeWrapper:badgeWrapper,container:container,details:details,title:title,wishlist:wishlist};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import{connect}from'react-redux';import{getProductDiscount}from'@shopgate/pwa-common-commerce/product/selectors/product';/**
|
|
2
|
+
* Maps the contents of the state to the component props.
|
|
3
|
+
* @param {Object} state The current application state.
|
|
4
|
+
* @param {Object} props The current component props.
|
|
5
|
+
* @return {Object} The extended component props.
|
|
6
|
+
*/var mapStateToProps=function mapStateToProps(state,props){return{discount:getProductDiscount(state,props)};};export default connect(mapStateToProps);
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
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 from'react';import PropTypes from'prop-types';import{css}from'glamor';import{SurroundPortals}from'@shopgate/engage/components';import DiscountBadge from'@shopgate/pwa-ui-shared/DiscountBadge';import{PRODUCT_DISCOUNT}from'@shopgate/pwa-common-commerce/product/constants/Portals';import{useWidgetSettings}from'@shopgate/engage/core';import ProductBadges from"../ProductBadges";import styles from"./style";import connect from"./connector";/**
|
|
2
|
+
* ProductDiscountBadge
|
|
3
|
+
* @return {JSX}
|
|
4
|
+
*/var ProductDiscountBadge=function ProductDiscountBadge(_ref){var productId=_ref.productId,discount=_ref.discount;var _ref2=useWidgetSettings('@shopgate/engage/product/components/ProductDiscountBadge')||{},_ref2$pdp=_ref2.pdp,pdp=_ref2$pdp===void 0?{show:false,style:{}}:_ref2$pdp;return React.createElement(ProductBadges,{className:styles.portal,location:"productDiscountBadge",productId:productId,portalProps:_extends({},pdp)},pdp.show&&discount?React.createElement("div",{className:"".concat(styles.container," ").concat(css(pdp.style)," theme__product__product-discount"),"aria-hidden":true},React.createElement(SurroundPortals,{portalName:PRODUCT_DISCOUNT,portalProps:{productId:productId,discount:discount}},React.createElement(DiscountBadge,{className:styles.badge,text:"-".concat(discount,"%")}))):null);};ProductDiscountBadge.defaultProps={discount:null};export default connect(ProductDiscountBadge);
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
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;}export var mockedProduct1={productId:'1234'};/**
|
|
2
|
+
* Mocked state with product only. Favorites not set.
|
|
3
|
+
* @type {Object}
|
|
4
|
+
*/export var mockedStateWithDiscount={product:{productsById:_defineProperty({},mockedProduct1.productId,{productData:{price:{discount:12}}})}};/**
|
|
5
|
+
* Mocked state with product only. Favorites not set.
|
|
6
|
+
* @type {Object}
|
|
7
|
+
*/export var mockedStateWithoutDiscount={product:{productsById:_defineProperty({},mockedProduct1.productId,{productData:{price:{discount:0}}})}};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from'react';import{mount}from'enzyme';import configureStore from'redux-mock-store';import{Provider}from'react-redux';import{useWidgetSettings}from'@shopgate/engage/core/hooks/useWidgetSettings';import{mockedProduct1,mockedStateWithDiscount,mockedStateWithoutDiscount}from"./mock";import ProductDiscountBadge from"./index";jest.mock('@shopgate/engage/core/hooks/useWidgetSettings',function(){return{useWidgetSettings:jest.fn()};});describe('<ProductDiscountBadge />',function(){var mockedStore=configureStore();beforeEach(function(){useWidgetSettings.mockReturnValue({pdp:{show:true,style:{color:'blue'}}});});/**
|
|
2
|
+
* createComponent
|
|
3
|
+
* @param {Object} mockedState mockedState
|
|
4
|
+
* @return {*}
|
|
5
|
+
*/var createComponent=function createComponent(mockedState){var store=mockedStore(mockedState);return mount(React.createElement(Provider,{store:store},React.createElement(ProductDiscountBadge,{productId:mockedProduct1.productId})));};it('should render without discount',function(){var wrapper=createComponent(mockedStateWithoutDiscount);expect(wrapper).toMatchSnapshot();});it('should render with discount',function(){var wrapper=createComponent(mockedStateWithDiscount);expect(wrapper).toMatchSnapshot();});it('should not render with discount if widgetSetting is false',function(){useWidgetSettings.mockReturnValue({pdp:{show:false,style:{}}});var wrapper=createComponent(mockedStateWithDiscount);expect(wrapper).toMatchSnapshot();});});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
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{css}from'glamor';import{responsiveMediaQuery}from'@shopgate/engage/styles';var styles={portal:css(_defineProperty({top:12},responsiveMediaQuery('>xs',{webOnly:true}),{top:25,left:25})).toString(),container:css(_defineProperty({minWidth:65,zIndex:10},responsiveMediaQuery('>xs',{webOnly:true}),{minWidth:50})),badge:css(_defineProperty({fontSize:'1.15rem'},responsiveMediaQuery('>xs',{webOnly:true}),{fontSize:14})).toString()};export default styles;
|
package/product/index.js
CHANGED
|
@@ -6,7 +6,7 @@ export*from'@shopgate/pwa-common-commerce/product/constants/index';export*from'@
|
|
|
6
6
|
export*from'@shopgate/pwa-common-commerce/product/helpers';export*from"./helpers/index";export*from"./helpers/redirects";export*from"./components/Media/helpers";// SELECTORS
|
|
7
7
|
export*from'@shopgate/pwa-common-commerce/product/selectors/options';export*from'@shopgate/pwa-common-commerce/product/selectors/page';export*from'@shopgate/pwa-common-commerce/product/selectors/price';export*from'@shopgate/pwa-common-commerce/product/selectors/product';export*from'@shopgate/pwa-common-commerce/product/selectors/relations';export*from'@shopgate/pwa-common-commerce/product/selectors/variants';export*from"./selectors/media";export{getProductIsFetching,makeGetProductProperties,makeGetProductEffectivityDates,makeGetProductCharacteristics,makeGetProductFeaturedMedia,makeIsProductActive,makeIsBaseProductActive}from"./selectors/product";export*from"./selectors/price";export*from"./selectors/variants";export*from"./selectors/relations";// STREAMS
|
|
8
8
|
export*from'@shopgate/pwa-common-commerce/product/streams';// COMPONENTS
|
|
9
|
-
export{default as ProductProperties}from"./components/ProductProperties/ProductProperties";export{default as MapPriceHint}from"./components/MapPriceHint";export{default as OrderQuantityHint}from"./components/OrderQuantityHint";export{default as ProductImage}from"./components/ProductImage";export{default as MediaSlider}from"./components/MediaSlider";export{default as QuantityPicker}from"./components/QuantityPicker";export{default as EffectivityDates}from"./components/EffectivityDates";export{Availability}from"./components/Availability";export{default as PriceDifference}from"./components/PriceDifference";export{FeaturedMedia,MediaImage}from"./components/Media";export{VariantSwatch}from"./components/Swatch";export{Swatches}from"./components/Swatches";export{RelationsSlider}from"./components/RelationsSlider";export{default as ProductCard}from"./components/ProductCard";export{default as ProductGridPrice}from"./components/ProductGridPrice";export{default as ProductCharacteristics}from"./components/ProductCharacteristics";export{default as Description}from"./components/Description";export{VariantAvailability}from"./components/ProductVariants";export{PriceInfo}from"./components/PriceInfo";export{ProductName}from"./components/ProductName";export{ProductUnitQuantityPicker,UnitQuantityPicker,CartUnitQuantityPicker}from"./components/UnitQuantityPicker";// HOCs
|
|
9
|
+
export{default as ProductProperties}from"./components/ProductProperties/ProductProperties";export{default as MapPriceHint}from"./components/MapPriceHint";export{default as OrderQuantityHint}from"./components/OrderQuantityHint";export{default as ProductImage}from"./components/ProductImage";export{default as MediaSlider}from"./components/MediaSlider";export{default as QuantityPicker}from"./components/QuantityPicker";export{default as EffectivityDates}from"./components/EffectivityDates";export{Availability}from"./components/Availability";export{default as PriceDifference}from"./components/PriceDifference";export{FeaturedMedia,MediaImage}from"./components/Media";export{VariantSwatch}from"./components/Swatch";export{Swatches}from"./components/Swatches";export{RelationsSlider}from"./components/RelationsSlider";export{default as ProductCard}from"./components/ProductCard";export{default as ProductGridPrice}from"./components/ProductGridPrice";export{default as ProductCharacteristics}from"./components/ProductCharacteristics";export{default as Description}from"./components/Description";export{VariantAvailability}from"./components/ProductVariants";export{PriceInfo}from"./components/PriceInfo";export{ProductName}from"./components/ProductName";export{default as ProductBadges}from"./components/ProductBadges";export{default as ProductDiscountBadge}from"./components/ProductDiscountBadge";export{ProductUnitQuantityPicker,UnitQuantityPicker,CartUnitQuantityPicker}from"./components/UnitQuantityPicker";// HOCs
|
|
10
10
|
export{default as withPriceCalculation}from"./hocs/withPriceCalculation";export{default as withProductStock}from"./hocs/withProductStock";export{default as withProduct}from"./hocs/withProduct";// HOOKs
|
|
11
11
|
export{useLoadProductImage}from"./hooks/useLoadProductImage";// CONTEXTS
|
|
12
12
|
export{ProductContext,VariantContext}from"./components/context";// TYPES
|