@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.8

package/cart/components/CartHeaderWide/CartHeaderWide.js

@@ -1,3 +1,11 @@
-import React from'react';import{i18n}from'@shopgate/engage/core';import{header}from"./CartHeaderWide.style";/**
+import React from 'react';
+import { i18n } from '@shopgate/engage/core';
+import { header } from "./CartHeaderWide.style";
+
+/**
  * @return {JSX}
- */var CartHeaderWide=function CartHeaderWide(){return React.createElement("div",{className:header},i18n.text('navigation.cart'));};export default CartHeaderWide;
+ */
+const CartHeaderWide = () => /*#__PURE__*/React.createElement("div", {
+  className: header
+}, i18n.text('navigation.cart'));
+export default CartHeaderWide;

package/cart/components/CartHeaderWide/CartHeaderWide.style.js

@@ -1 +1,10 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var header=css({fontSize:'2.125rem',lineHeight:'2.25rem',padding:variables.gap.xbig});
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables
+} = themeConfig;
+export const header = css({
+  fontSize: '2.125rem',
+  lineHeight: '2.25rem',
+  padding: variables.gap.xbig
+});

package/cart/components/CartHeaderWide/index.js

@@ -1 +1 @@
-export{default as CartHeaderWide}from"./CartHeaderWide";
+export { default as CartHeaderWide } from "./CartHeaderWide";

package/cart/components/CartItem/CartItem.hooks.js

@@ -1,7 +1,14 @@
-import{useContext}from'react';import CartItemProductContext from"./CartItemProductProvider.context";import CartItemContext from"./CartItemProvider.context";/**
+import { useContext } from 'react';
+import CartItemProductContext from "./CartItemProductProvider.context";
+import CartItemContext from "./CartItemProvider.context";
+
+/**
  * Returns the value of the cart item product provider state.
  * @returns {Object}
- */export var useCartItemProduct=function useCartItemProduct(){return useContext(CartItemProductContext);};/**
+ */
+export const useCartItemProduct = () => useContext(CartItemProductContext);
+/**
  * Returns the value of the cart item provider state.
  * @returns {Object}
- */export var useCartItem=function useCartItem(){return useContext(CartItemContext);};
+ */
+export const useCartItem = () => useContext(CartItemContext);

package/cart/components/CartItem/CartItem.js

@@ -1,7 +1,60 @@
-import*as React from'react';import{SurroundPortals}from'@shopgate/engage/components';import{CART_ITEM_TYPE_PRODUCT,CART_ITEM_TYPE_COUPON,CART_ITEM}from'@shopgate/pwa-common-commerce/cart';import{ProductListEntryProvider}from'@shopgate/engage/product';import CartItemProduct from"./CartItemProduct";import CartItemCoupon from"./CartItemCoupon";import CartItemProductProvider from"./CartItemProductProvider";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SurroundPortals } from '@shopgate/engage/components';
+import { CART_ITEM_TYPE_PRODUCT, CART_ITEM_TYPE_COUPON, CART_ITEM } from '@shopgate/pwa-common-commerce/cart';
+import { ProductListEntryProvider } from '@shopgate/engage/product';
+import CartItemProduct from "./CartItemProduct";
+import CartItemCoupon from "./CartItemCoupon";
+import CartItemProductProvider from "./CartItemProductProvider";
+
+/**
  * The cart item component.
  * @param {Object} props The component props.
  * @property {Object} props.item The cart item.
  * @property {Function} props.onFocus A function to indicate when the item has been focussed.
+ * @property {boolean} [props.editable] Whether the item is editable.
+ * @property {string|null} [props.currencyOverride] The currency to use instead of the default one.
  * @return {JSX.Element}
- */function CartItem(_ref){var item=_ref.item,onFocus=_ref.onFocus,editable=_ref.editable,currencyOverride=_ref.currencyOverride;if(item.type!==CART_ITEM_TYPE_PRODUCT&&item.type!==CART_ITEM_TYPE_COUPON){return null;}var props={item:item};var isProduct=item.type===CART_ITEM_TYPE_PRODUCT;if(isProduct){var _item$product;return React.createElement(ProductListEntryProvider,{productId:item===null||item===void 0?void 0:(_item$product=item.product)===null||_item$product===void 0?void 0:_item$product.id},React.createElement(SurroundPortals,{portalName:CART_ITEM,portalProps:props},React.createElement(CartItemProductProvider,{cartItem:item,onFocus:onFocus,isEditable:editable,currencyOverride:currencyOverride},React.createElement(CartItemProduct,null))));}return React.createElement(SurroundPortals,{portalName:CART_ITEM,portalProps:props},React.createElement(CartItemCoupon,{id:item.id,key:item.id,coupon:item.coupon,messages:item.messages,editable:editable}));}CartItem.defaultProps={editable:true,currencyOverride:null};export default React.memo(CartItem);
+ */
+function CartItem({
+  item,
+  onFocus,
+  editable,
+  currencyOverride
+}) {
+  if (item.type !== CART_ITEM_TYPE_PRODUCT && item.type !== CART_ITEM_TYPE_COUPON) {
+    return null;
+  }
+  const props = {
+    item
+  };
+  const isProduct = item.type === CART_ITEM_TYPE_PRODUCT;
+  if (isProduct) {
+    return /*#__PURE__*/React.createElement(ProductListEntryProvider, {
+      productId: item?.product?.id
+    }, /*#__PURE__*/React.createElement(SurroundPortals, {
+      portalName: CART_ITEM,
+      portalProps: props
+    }, /*#__PURE__*/React.createElement(CartItemProductProvider, {
+      cartItem: item,
+      onFocus: onFocus,
+      isEditable: editable,
+      currencyOverride: currencyOverride
+    }, /*#__PURE__*/React.createElement(CartItemProduct, null))));
+  }
+  return /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: CART_ITEM,
+    portalProps: props
+  }, /*#__PURE__*/React.createElement(CartItemCoupon, {
+    id: item.id,
+    key: item.id,
+    coupon: item.coupon,
+    messages: item.messages,
+    editable: editable
+  }));
+}
+CartItem.defaultProps = {
+  editable: true,
+  currencyOverride: null
+};
+export default /*#__PURE__*/React.memo(CartItem);

package/cart/components/CartItem/CartItem.style.js

@@ -1 +1,23 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;export var messagesContainerCard=css({background:colors.light,padding:"0 0 ".concat(variables.gap.big,"px 0")}).toString();export var messagesCard=css({borderRadius:'5px 5px 0 0',padding:"".concat(variables.gap.small,"px ").concat(variables.gap.big*0.875,"px")}).toString();export var messagesContainerLine=css({background:colors.light,padding:"".concat(variables.gap.big,"px ").concat(variables.gap.big,"px 0")}).toString();export var messagesLine=css({borderRadius:4,padding:"".concat(variables.gap.big/2,"px ").concat(variables.gap.big,"px"),lineHeight:1.125}).toString();
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors,
+  variables
+} = themeConfig;
+export const messagesContainerCard = css({
+  background: colors.light,
+  padding: `0 0 ${variables.gap.big}px 0`
+}).toString();
+export const messagesCard = css({
+  borderRadius: '5px 5px 0 0',
+  padding: `${variables.gap.small}px ${variables.gap.big * 0.875}px`
+}).toString();
+export const messagesContainerLine = css({
+  background: colors.light,
+  padding: `${variables.gap.big}px ${variables.gap.big}px 0`
+}).toString();
+export const messagesLine = css({
+  borderRadius: 4,
+  padding: `${variables.gap.big / 2}px ${variables.gap.big}px`,
+  lineHeight: 1.125
+}).toString();

package/cart/components/CartItem/CartItemCoupon.connector.js

@@ -1,7 +1,28 @@
-import{connect}from'react-redux';import deleteCouponsFromCart from'@shopgate/pwa-common-commerce/cart/actions/deleteCouponsFromCart';import{getCurrency}from'@shopgate/pwa-common-commerce/cart/selectors';/**
+import { connect } from 'react-redux';
+import deleteCouponsFromCart from '@shopgate/pwa-common-commerce/cart/actions/deleteCouponsFromCart';
+import { getCurrency } from '@shopgate/pwa-common-commerce/cart/selectors';
+
+/**
+ * @typedef {import('./CartItemCoupon.types').OwnProps} OwnProps
+ * @typedef {import('./CartItemCoupon.types').StateProps} StateProps
+ * @typedef {import('./CartItemCoupon.types').DispatchProps} DispatchProps
+ */
+
+/**
+ * Maps state to props.
  * @param {Object} state The current application state.
- * @return {Object} The extended component props.
- */var mapStateToProps=function mapStateToProps(state){return{currency:getCurrency(state)};};/**
+ * @returns {StateProps} The extended component props.
+ */
+const mapStateToProps = state => ({
+  currency: getCurrency(state)
+});
+
+/**
+ * Maps dispatch to props.
  * @param {Function} dispatch The redux dispatch function.
- * @return {Object} The extended component props.
- */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{deleteCoupon:function deleteCoupon(couponCode){return dispatch(deleteCouponsFromCart([couponCode]));}};};export default connect(mapStateToProps,mapDispatchToProps);
+ * @returns {DispatchProps} The extended component props.
+ */
+const mapDispatchToProps = dispatch => ({
+  deleteCoupon: couponCode => dispatch(deleteCouponsFromCart([couponCode]))
+});
+export default connect(mapStateToProps, mapDispatchToProps);

package/cart/components/CartItem/CartItemCoupon.js

@@ -1,20 +1,155 @@
-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 _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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*as React from'react';import PT from'prop-types';import Transition from'react-transition-group/Transition';import{getAbsoluteHeight}from'@shopgate/pwa-common/helpers/dom';import{CART_PATH}from'@shopgate/pwa-common-commerce/cart/constants';import{CART_ITEM_TYPE_COUPON}from'@shopgate/pwa-common-commerce/cart';import{getPageSettings}from'@shopgate/engage/core/config';import{MessageBar,CardList}from'@shopgate/engage/components';import{container,cartItemTransitionDuration as duration,getCartItemTransitionStyle as getTransitionStyle}from"./CartItemCoupon.style";import{messagesContainerCard,messagesCard,messagesContainerLine,messagesLine}from"./CartItem.style";import connect from"./CartItemCoupon.connector";import{CartItemCouponLayout}from"./CartItemCouponLayout";var messageStyles={card:{container:messagesContainerCard,message:messagesCard},line:{container:messagesContainerLine,message:messagesLine}};/**
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Transition from 'react-transition-group/Transition';
+import { getAbsoluteHeight } from '@shopgate/pwa-common/helpers/dom';
+import { CART_PATH } from '@shopgate/pwa-common-commerce/cart/constants';
+import { CART_ITEM_TYPE_COUPON } from '@shopgate/pwa-common-commerce/cart';
+import { getPageSettings } from '@shopgate/engage/core/config';
+import { MessageBar, CardList } from '@shopgate/engage/components';
+import { container, cartItemTransitionDuration as duration, getCartItemTransitionStyle as getTransitionStyle } from "./CartItemCoupon.style";
+import { messagesContainerCard, messagesCard, messagesContainerLine, messagesLine } from "./CartItem.style";
+import connect from "./CartItemCoupon.connector";
+import { CartItemCouponLayout } from "./CartItemCouponLayout";
+
+/**
+ * @typedef {import('./CartItemCoupon.types').OwnProps} OwnProps
+ * @typedef {import('./CartItemCoupon.types').StateProps} StateProps
+ * @typedef {import('./CartItemCoupon.types').DispatchProps} DispatchProps
+ * @typedef {OwnProps & StateProps & DispatchProps} Props
+ */
+
+/**
+ * @typedef {Object} State
+ * @property {boolean} visible Whether the coupon is visible.
+ */
+
+const messageStyles = {
+  card: {
+    container: messagesContainerCard,
+    message: messagesCard
+  },
+  line: {
+    container: messagesContainerLine,
+    message: messagesLine
+  }
+};
+
+/**
  * The Coupon component.
- */var CartItemCoupon=/*#__PURE__*/function(_React$Component){/**
-   * Constructor.
-   * @param {Object} props The component props.
-   */function CartItemCoupon(props){var _this2;_classCallCheck(this,CartItemCoupon);_this2=_callSuper(this,CartItemCoupon,[props]);/**
-   * Sets this coupon to be invisible via its state.
-   */_defineProperty(_this2,"transitionOut",function(){_this2.setState({visible:false});});/**
-   * Deletes the coupon from the cart.
-   */_defineProperty(_this2,"deleteCoupon",function(){_this2.props.deleteCoupon(_this2.props.id);});_this2.state={visible:true};return _this2;}/**
-   * Expose props to the descendant components to use them for the portals.
-   * @return {Object}
-   */_inherits(CartItemCoupon,_React$Component);return _createClass(CartItemCoupon,[{key:"getChildContext",value:function getChildContext(){return{cartItemId:this.props.id,type:CART_ITEM_TYPE_COUPON,editable:this.props.editable};}/**
+ */
+class CartItemCoupon extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    /**
+     * @type {State}
+     */
+    this.state = {
+      visible: true
+    };
+    /**
+     * Updates transition height on mount/update.
+     */
+    this.updateHeight = () => {
+      if (this.transitionElement && this.cardElement) {
+        this.transitionElement.style.height = `${getAbsoluteHeight(this.cardElement)}px`;
+      }
+    };
+    this.transitionElement = null;
+    this.cardElement = null;
+    /**
+     * Hides the coupon via transition.
+     * @returns {Function}
+     */
+    this.transitionOut = () => this.setState({
+      visible: false
+    });
+    /**
+     * Removes the coupon from the cart.
+     */
+    this.deleteCoupon = () => {
+      const {
+        deleteCoupon,
+        id
+      } = this.props;
+      deleteCoupon(id);
+    };
+  }
+  /**
+   * @returns {Object}
+   */
+  getChildContext() {
+    const {
+      id,
+      editable
+    } = this.props;
+    return {
+      cartItemId: id,
+      type: CART_ITEM_TYPE_COUPON,
+      editable
+    };
+  }
+
+  /**
+   * Updates transition height on mount/update.
+   */
+  componentDidMount() {
+    this.updateHeight();
+  }
+
+  /**
    * We need to set the element height explicitly so that we can animate it later.
-   */},{key:"componentDidMount",value:function componentDidMount(){this.transitionElement.style.height="".concat(getAbsoluteHeight(this.cardElement),"px");}/**
-   * We need to set the element height explicitly so that we can animate it later.
-   */},{key:"componentDidUpdate",value:function componentDidUpdate(){this.transitionElement.style.height="".concat(getAbsoluteHeight(this.cardElement),"px");}},{key:"render",value:/**
-   * Render Function.
-   * @returns {JSX}
-   */function render(){var _this3=this;var _getPageSettings=getPageSettings(CART_PATH),_getPageSettings$cart=_getPageSettings.cartItemsDisplay,cartItemsDisplay=_getPageSettings$cart===void 0?'line':_getPageSettings$cart;return React.createElement(Transition,{"in":this.state.visible,timeout:duration,onExited:this.deleteCoupon},function(state){return React.createElement("div",{ref:function ref(element){if(element)_this3.transitionElement=element;},key:_this3.props.id,style:getTransitionStyle(state)},React.createElement("div",{className:container,ref:function ref(element){if(element)_this3.cardElement=element;}},React.createElement(CardList.Item,null,_this3.props.messages.length>0&&React.createElement(MessageBar,{messages:_this3.props.messages,classNames:messageStyles[cartItemsDisplay]}),React.createElement(CartItemCouponLayout,{handleDelete:_this3.transitionOut,coupon:_this3.props.coupon,currency:_this3.props.currency}))));});}}]);}(React.Component);_defineProperty(CartItemCoupon,"childContextTypes",{cartItemId:PT.string,type:PT.string,editable:PT.bool});_defineProperty(CartItemCoupon,"defaultProps",{deleteCoupon:function deleteCoupon(){}});CartItemCoupon.defaultProps={editable:true};export default connect(CartItemCoupon);
+   */
+  componentDidUpdate() {
+    this.updateHeight();
+  }
+  /**
+   * @returns {JSX.Element}
+   */
+  render() {
+    const {
+      coupon,
+      currency,
+      messages
+    } = this.props;
+    const {
+      visible
+    } = this.state;
+    const {
+      cartItemsDisplay = 'line'
+    } = getPageSettings(CART_PATH);
+    const messageStyle = messageStyles[cartItemsDisplay];
+    return /*#__PURE__*/React.createElement(Transition, {
+      in: visible,
+      timeout: duration,
+      onExited: this.deleteCoupon
+    }, state => /*#__PURE__*/React.createElement("div", {
+      ref: element => {
+        this.transitionElement = element;
+      },
+      key: this.props.id,
+      style: getTransitionStyle(state)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: container,
+      ref: el => {
+        this.cardElement = el;
+      }
+    }, /*#__PURE__*/React.createElement(CardList.Item, null, !!messages.length && /*#__PURE__*/React.createElement(MessageBar, {
+      messages: messages,
+      classNames: messageStyle
+    }), /*#__PURE__*/React.createElement(CartItemCouponLayout, {
+      handleDelete: this.transitionOut,
+      coupon: coupon,
+      currency: currency
+    })))));
+  }
+}
+CartItemCoupon.childContextTypes = {
+  cartItemId: PropTypes.string,
+  type: PropTypes.string,
+  editable: PropTypes.bool
+};
+CartItemCoupon.defaultProps = {
+  editable: true,
+  deleteCoupon: () => {}
+};
+export default connect(CartItemCoupon);

package/cart/components/CartItem/CartItemCoupon.style.js

@@ -1,5 +1,33 @@
-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{css}from'glamor';export var container=css({marginBottom:4});export var cartItemTransitionDuration=300;var defaultTransitionStyle={transition:"height ".concat(cartItemTransitionDuration,"ms cubic-bezier(0.25, 0.1, 0.25, 1)"),opacity:1};var transitionStyles={exited:{height:0,opacity:0},exiting:{height:0,opacity:0}};/**
+import { css } from 'glamor';
+export const container = css({
+  marginBottom: 4
+});
+export const cartItemTransitionDuration = 300;
+const defaultTransitionStyle = {
+  transition: `height ${cartItemTransitionDuration}ms cubic-bezier(0.25, 0.1, 0.25, 1)`,
+  opacity: 1
+};
+const transitionStyles = {
+  exited: {
+    height: 0,
+    opacity: 0
+  },
+  exiting: {
+    height: 0,
+    opacity: 0
+  }
+};
+
+/**
  * Creates an object with style attributes to enable a cart item transition.
  * @param {string} state A state of the react-transition-group/Transition component.
  * @return {Object}
- */export var getCartItemTransitionStyle=function getCartItemTransitionStyle(state){return _extends({},defaultTransitionStyle,{},transitionStyles[state]);};export default{cartItemTransitionDuration:cartItemTransitionDuration,getCartItemTransitionStyle:getCartItemTransitionStyle};
+ */
+export const getCartItemTransitionStyle = state => ({
+  ...defaultTransitionStyle,
+  ...transitionStyles[state]
+});
+export default {
+  cartItemTransitionDuration,
+  getCartItemTransitionStyle
+};

package/cart/components/CartItem/CartItemCoupon.types.js

@@ -0,0 +1,21 @@
+/**
+ * @typedef {import('../../../cart/cart.types').Coupon} Coupon
+ */
+
+/**
+ * @typedef {Object} OwnProps
+ * @property {Coupon} coupon The coupon object.
+ * @property {string} id The coupon ID.
+ * @property {Array<any>} messages The messages associated with the coupon.
+ * @property {boolean} [editable] Whether the coupon is editable.
+ */
+
+/**
+ * @typedef {Object} StateProps
+ * @property {string} currency The currency used in the cart.
+ */
+
+/**
+ * @typedef {Object} DispatchProps
+ * @property {(couponCode: string) => Promise<any>} deleteCoupon Function to delete a coupon.
+ */

package/cart/components/CartItem/CartItemCouponCode.js

@@ -1,5 +1,18 @@
-import React from'react';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core/helpers';import{Ellipsis}from'@shopgate/engage/components';/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { Ellipsis } from '@shopgate/engage/components';
+
+/**
 * The Coupon Code component.
 * @param {Object} props The component props.
 * @returns {JSX}
-*/export var CartItemCouponCode=function CartItemCouponCode(_ref){var value=_ref.value;return React.createElement(Ellipsis,{rows:2},"".concat(i18n.text('cart.coupon_code'),": ").concat(value));};CartItemCouponCode.defaultProps={value:''};
+*/
+export const CartItemCouponCode = ({
+  value
+}) => /*#__PURE__*/React.createElement(Ellipsis, {
+  rows: 2
+}, `${i18n.text('cart.coupon_code')}: ${value}`);
+CartItemCouponCode.defaultProps = {
+  value: ''
+};

package/cart/components/CartItem/CartItemCouponDelete.js

@@ -1,5 +1,22 @@
-import React from'react';import PropTypes from'prop-types';import{CrossIcon}from'@shopgate/engage/components';import{i18n}from'@shopgate/engage/core';import styles from"./CartItemCouponDelete.style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CrossIcon } from '@shopgate/engage/components';
+import { i18n } from '@shopgate/engage/core';
+import styles from "./CartItemCouponDelete.style";
+/**
  * The Coupon Delete component.
  * @param {Object} props The component properties.
  * @returns {JSX}
- */export var CartItemCouponDelete=function CartItemCouponDelete(_ref){var handleDelete=_ref.handleDelete;return React.createElement("button",{className:styles,onClick:handleDelete,"data-test-id":"deleteCoupon",type:"button","aria-label":i18n.text('cart.delete_coupon')},React.createElement(CrossIcon,null));};CartItemCouponDelete.defaultProps={handleDelete:function handleDelete(){}};
+ */
+export const CartItemCouponDelete = ({
+  handleDelete
+}) => /*#__PURE__*/React.createElement("button", {
+  className: styles,
+  onClick: handleDelete,
+  "data-test-id": "deleteCoupon",
+  type: "button",
+  "aria-label": i18n.text('cart.delete_coupon')
+}, /*#__PURE__*/React.createElement(CrossIcon, null));
+CartItemCouponDelete.defaultProps = {
+  handleDelete: () => {}
+};

package/cart/components/CartItem/CartItemCouponDelete.style.js

@@ -1 +1,7 @@
-import{css}from'glamor';export default css({padding:0,fontSize:'1.5rem',marginTop:-2,marginRight:-5});
+import { css } from 'glamor';
+export default css({
+  padding: 0,
+  fontSize: '1.5rem',
+  marginTop: -2,
+  marginRight: -5
+});

package/cart/components/CartItem/CartItemCouponFreeShipping.js

@@ -1,5 +1,20 @@
-import React from'react';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core';/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { i18n } from '@shopgate/engage/core';
+
+/**
  * The Coupon Free Shipping component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */export function CartItemCouponFreeShipping(_ref){var freeShipping=_ref.freeShipping;if(!freeShipping){return null;}return React.createElement("div",null,i18n.text('cart.free_shipping'));}CartItemCouponFreeShipping.defaultProps={freeShipping:false};
+ */
+export function CartItemCouponFreeShipping({
+  freeShipping
+}) {
+  if (!freeShipping) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", null, i18n.text('cart.free_shipping'));
+}
+CartItemCouponFreeShipping.defaultProps = {
+  freeShipping: false
+};

package/cart/components/CartItem/CartItemCouponIcon.js

@@ -1,4 +1,25 @@
-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{themeConfig}from'@shopgate/engage';import{useWidgetSettings}from'@shopgate/engage/core/hooks';import{Icon,CartCouponIcon}from'@shopgate/engage/components';/**
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { themeConfig } from '@shopgate/engage';
+import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import { Icon, CartCouponIcon } from '@shopgate/engage/components';
+
+/**
  * Renders the cart item coupon icon.
  * @returns {JSX}
- */export var CartItemCouponIcon=function CartItemCouponIcon(){var _useWidgetSettings=useWidgetSettings('@shopgate/engage/components/CartCouponIcon'),viewBox=_useWidgetSettings.viewBox,color=_useWidgetSettings.color;if(!themeConfig.icons.cartCoupon){return React.createElement(CartCouponIcon,null);}return React.createElement(Icon,_extends({},viewBox&&{viewBox:viewBox},{content:themeConfig.icons.cartCoupon,color:color}));};
+ */
+export const CartItemCouponIcon = () => {
+  const {
+    viewBox,
+    color
+  } = useWidgetSettings('@shopgate/engage/components/CartCouponIcon');
+  if (!themeConfig.icons.cartCoupon) {
+    return /*#__PURE__*/React.createElement(CartCouponIcon, null);
+  }
+  return /*#__PURE__*/React.createElement(Icon, _extends({}, viewBox && {
+    viewBox
+  }, {
+    content: themeConfig.icons.cartCoupon,
+    color: color
+  }));
+};

package/cart/components/CartItem/CartItemCouponLayout.js

@@ -1,6 +1,75 @@
-import*as React from'react';import PT from'prop-types';import{SurroundPortals}from'@shopgate/engage/components';import{CART_ITEM_IMAGE,CART_ITEM_NAME,CART_ITEM_COUPON_CODE,CART_ITEM_PRICE}from'@shopgate/pwa-common-commerce/cart';import Grid from'@shopgate/pwa-common/components/Grid';import{CartItemCouponIcon}from"./CartItemCouponIcon";import{CartItemCouponPrice}from"./CartItemCouponPrice";import{CartItemCouponFreeShipping}from"./CartItemCouponFreeShipping";import{CartItemCouponTitle}from"./CartItemCouponTitle";import{CartItemCouponCode}from"./CartItemCouponCode";import{CartItemCouponDelete}from"./CartItemCouponDelete";import{item,icon,content,contentLast}from"./CartItemCouponLayout.style";/**
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { SurroundPortals } from '@shopgate/engage/components';
+import { CART_ITEM_IMAGE, CART_ITEM_NAME, CART_ITEM_COUPON_CODE, CART_ITEM_PRICE } from '@shopgate/pwa-common-commerce/cart';
+import Grid from '@shopgate/pwa-common/components/Grid';
+import { CartItemCouponIcon } from "./CartItemCouponIcon";
+import { CartItemCouponPrice } from "./CartItemCouponPrice";
+import { CartItemCouponFreeShipping } from "./CartItemCouponFreeShipping";
+import { CartItemCouponTitle } from "./CartItemCouponTitle";
+import { CartItemCouponCode } from "./CartItemCouponCode";
+import { CartItemCouponDelete } from "./CartItemCouponDelete";
+import { item, icon, content, contentLast } from "./CartItemCouponLayout.style";
+
+/**
  * The CouponLayout component.
  * @param {Object} props The component properties.
+ * @param {Object} props.coupon The coupon details.
+ * @param {string} props.currency The currency to display.
+ * @param {Function} [props.handleDelete] The delete handler function.
  * @param {Object} context The component context.
- * @returns {JSX}
- */export function CartItemCouponLayout(props,context){var coupon=props.coupon,currency=props.currency,handleDelete=props.handleDelete;return React.createElement(Grid,{className:item},React.createElement(Grid.Item,{className:icon},React.createElement(SurroundPortals,{portalName:CART_ITEM_IMAGE,portalProps:context},React.createElement(CartItemCouponIcon,null))),React.createElement(Grid.Item,{className:content,grow:1},React.createElement(SurroundPortals,{portalName:CART_ITEM_NAME,portalProps:context},React.createElement(CartItemCouponTitle,{value:coupon.label})),React.createElement(SurroundPortals,{portalName:CART_ITEM_COUPON_CODE,portalProps:context},React.createElement(CartItemCouponCode,{value:coupon.code}))),React.createElement(Grid.Item,{className:"".concat(content," ").concat(contentLast),grow:1,shrink:0},context.editable&&React.createElement(CartItemCouponDelete,{handleDelete:handleDelete}),React.createElement(CartItemCouponFreeShipping,{freeShipping:!!coupon.freeShipping}),coupon.savedPrice&&coupon.savedPrice.value>0&&React.createElement(SurroundPortals,{portalName:CART_ITEM_PRICE,portalProps:context},React.createElement(CartItemCouponPrice,{currency:currency,savedPrice:coupon.savedPrice}))));}CartItemCouponLayout.defaultProps={handleDelete:function handleDelete(){}};CartItemCouponLayout.contextTypes={cartItemId:PT.string,type:PT.string,editable:PT.bool};
+ * @param {string} context.cartItemId The cart item ID.
+ * @param {string} context.type The type of the cart item.
+ * @param {boolean} [context.editable] Whether the item is editable.
+ * @returns {JSX.Element}
+ */
+export function CartItemCouponLayout(props, context) {
+  const {
+    coupon,
+    currency,
+    handleDelete
+  } = props;
+  return /*#__PURE__*/React.createElement(Grid, {
+    className: item
+  }, /*#__PURE__*/React.createElement(Grid.Item, {
+    className: icon
+  }, /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: CART_ITEM_IMAGE,
+    portalProps: context
+  }, /*#__PURE__*/React.createElement(CartItemCouponIcon, null))), /*#__PURE__*/React.createElement(Grid.Item, {
+    className: content,
+    grow: 1
+  }, /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: CART_ITEM_NAME,
+    portalProps: context
+  }, /*#__PURE__*/React.createElement(CartItemCouponTitle, {
+    value: coupon.label
+  })), /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: CART_ITEM_COUPON_CODE,
+    portalProps: context
+  }, /*#__PURE__*/React.createElement(CartItemCouponCode, {
+    value: coupon.code
+  }))), /*#__PURE__*/React.createElement(Grid.Item, {
+    className: `${content} ${contentLast}`,
+    grow: 1,
+    shrink: 0
+  }, context.editable && /*#__PURE__*/React.createElement(CartItemCouponDelete, {
+    handleDelete: handleDelete
+  }), /*#__PURE__*/React.createElement(CartItemCouponFreeShipping, {
+    freeShipping: !!coupon.freeShipping
+  }), coupon.savedPrice && coupon.savedPrice.value > 0 && /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: CART_ITEM_PRICE,
+    portalProps: context
+  }, /*#__PURE__*/React.createElement(CartItemCouponPrice, {
+    currency: currency,
+    savedPrice: coupon.savedPrice
+  }))));
+}
+CartItemCouponLayout.defaultProps = {
+  handleDelete: () => {}
+};
+CartItemCouponLayout.contextTypes = {
+  cartItemId: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  editable: PropTypes.bool
+};

package/cart/components/CartItem/CartItemCouponLayout.style.js

@@ -1,5 +1,29 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var item=css({fontSize:'0.875rem',padding:"".concat(variables.gap.small/2,"px ").concat(variables.gap.big,"px")}).toString();export var icon=css({fontSize:'3rem',flexShrink:0,margin:'5px 12px 0 12px'}).toString();export var content=css({display:'flex',flexDirection:'column',paddingLeft:variables.gap.big,paddingTop:variables.gap.small,paddingBottom:variables.gap.small,// took from https://stackoverflow.com/a/36247448
-// in order to prevent the long coupon codes from
-// breaking the ui, we need to reset the default
-// flexbox settings (taken from CCP-2475)
-minWidth:0}).toString();export var contentLast=css({alignItems:'flex-end'}).toString();
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables
+} = themeConfig;
+export const item = css({
+  fontSize: '0.875rem',
+  padding: `${variables.gap.small / 2}px ${variables.gap.big}px`
+}).toString();
+export const icon = css({
+  fontSize: '3rem',
+  flexShrink: 0,
+  margin: '5px 12px 0 12px'
+}).toString();
+export const content = css({
+  display: 'flex',
+  flexDirection: 'column',
+  paddingLeft: variables.gap.big,
+  paddingTop: variables.gap.small,
+  paddingBottom: variables.gap.small,
+  // took from https://stackoverflow.com/a/36247448
+  // in order to prevent the long coupon codes from
+  // breaking the ui, we need to reset the default
+  // flexbox settings (taken from CCP-2475)
+  minWidth: 0
+}).toString();
+export const contentLast = css({
+  alignItems: 'flex-end'
+}).toString();