@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

package/cart/components/CartItem/CartItemCoupon.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Transition from 'react-transition-group/Transition';
@@ -22,7 +23,7 @@ import { CartItemCouponLayout } from "./CartItemCouponLayout";
  * @typedef {Object} State
  * @property {boolean} visible Whether the coupon is visible.
  */
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const messageStyles = {
   card: {
     container: messagesContainerCard,
@@ -37,47 +38,55 @@ const messageStyles = {
 /**
  * The Coupon component.
  */
-class CartItemCoupon extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+let CartItemCoupon = /*#__PURE__*/function (_React$PureComponent) {
+  /**
+   * @param {Props} props The component props
+   */
+  function CartItemCoupon(props) {
+    var _this;
+    _this = _React$PureComponent.call(this, props) || this;
     /**
      * @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.updateHeight = () => {
+      if (_this.transitionElement && _this.cardElement) {
+        _this.transitionElement.style.height = `${getAbsoluteHeight(_this.cardElement)}px`;
       }
     };
-    this.transitionElement = null;
-    this.cardElement = null;
+    _this.transitionElement = null;
+    _this.cardElement = null;
     /**
      * Hides the coupon via transition.
      * @returns {Function}
      */
-    this.transitionOut = () => this.setState({
+    _this.transitionOut = () => _this.setState({
       visible: false
     });
     /**
      * Removes the coupon from the cart.
      */
-    this.deleteCoupon = () => {
+    _this.deleteCoupon = () => {
       const {
         deleteCoupon,
         id
-      } = this.props;
+      } = _this.props;
       deleteCoupon(id);
     };
+    _this.state = {
+      visible: true
+    };
+    return _this;
   }
+
   /**
    * @returns {Object}
    */
-  getChildContext() {
+  _inheritsLoose(CartItemCoupon, _React$PureComponent);
+  var _proto = CartItemCoupon.prototype;
+  _proto.getChildContext = function getChildContext() {
     const {
       id,
       editable
@@ -91,21 +100,21 @@ class CartItemCoupon extends React.PureComponent {
 
   /**
    * Updates transition height on mount/update.
-   */
-  componentDidMount() {
+   */;
+  _proto.componentDidMount = function componentDidMount() {
     this.updateHeight();
   }
 
   /**
    * We need to set the element height explicitly so that we can animate it later.
-   */
-  componentDidUpdate() {
+   */;
+  _proto.componentDidUpdate = function componentDidUpdate() {
     this.updateHeight();
-  }
+  };
   /**
    * @returns {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       coupon,
       currency,
@@ -118,31 +127,36 @@ class CartItemCoupon extends React.PureComponent {
       cartItemsDisplay = 'line'
     } = getPageSettings(CART_PATH);
     const messageStyle = messageStyles[cartItemsDisplay];
-    return /*#__PURE__*/React.createElement(Transition, {
+    return /*#__PURE__*/_jsx(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
-    })))));
-  }
-}
+      onExited: this.deleteCoupon,
+      children: state => /*#__PURE__*/_jsx("div", {
+        ref: element => {
+          this.transitionElement = element;
+        },
+        style: getTransitionStyle(state),
+        children: /*#__PURE__*/_jsx("div", {
+          className: container,
+          ref: el => {
+            this.cardElement = el;
+          },
+          children: /*#__PURE__*/_jsxs(CardList.Item, {
+            children: [!!messages.length && /*#__PURE__*/_jsx(MessageBar, {
+              messages: messages,
+              classNames: messageStyle
+            }), /*#__PURE__*/_jsx(CartItemCouponLayout, {
+              handleDelete: this.transitionOut,
+              coupon: coupon,
+              currency: currency
+            })]
+          })
+        })
+      }, this.props.id)
+    });
+  };
+  return CartItemCoupon;
+}(React.PureComponent);
 CartItemCoupon.childContextTypes = {
   cartItemId: PropTypes.string,
   type: PropTypes.string,

package/cart/components/CartItem/CartItemCouponCode.js

@@ -8,11 +8,13 @@ import { Ellipsis } from '@shopgate/engage/components';
 * @param {Object} props The component props.
 * @returns {JSX}
 */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const CartItemCouponCode = ({
   value
-}) => /*#__PURE__*/React.createElement(Ellipsis, {
-  rows: 2
-}, `${i18n.text('cart.coupon_code')}: ${value}`);
+}) => /*#__PURE__*/_jsx(Ellipsis, {
+  rows: 2,
+  children: `${i18n.text('cart.coupon_code')}: ${value}`
+});
 CartItemCouponCode.defaultProps = {
   value: ''
 };

package/cart/components/CartItem/CartItemCouponDelete.js

@@ -8,15 +8,17 @@ import styles from "./CartItemCouponDelete.style";
  * @param {Object} props The component properties.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const CartItemCouponDelete = ({
   handleDelete
-}) => /*#__PURE__*/React.createElement("button", {
+}) => /*#__PURE__*/_jsx("button", {
   className: styles,
   onClick: handleDelete,
   "data-test-id": "deleteCoupon",
   type: "button",
-  "aria-label": i18n.text('cart.delete_coupon')
-}, /*#__PURE__*/React.createElement(CrossIcon, null));
+  "aria-label": i18n.text('cart.delete_coupon'),
+  children: /*#__PURE__*/_jsx(CrossIcon, {})
+});
 CartItemCouponDelete.defaultProps = {
   handleDelete: () => {}
 };

package/cart/components/CartItem/CartItemCouponFreeShipping.js

@@ -7,13 +7,16 @@ import { i18n } from '@shopgate/engage/core';
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export function CartItemCouponFreeShipping({
   freeShipping
 }) {
   if (!freeShipping) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", null, i18n.text('cart.free_shipping'));
+  return /*#__PURE__*/_jsx("div", {
+    children: i18n.text('cart.free_shipping')
+  });
 }
 CartItemCouponFreeShipping.defaultProps = {
   freeShipping: false

package/cart/components/CartItem/CartItemCouponIcon.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { themeConfig } from '@shopgate/engage';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
@@ -8,18 +7,20 @@ import { Icon, CartCouponIcon } from '@shopgate/engage/components';
  * Renders the cart item coupon icon.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const CartItemCouponIcon = () => {
   const {
     viewBox,
     color
   } = useWidgetSettings('@shopgate/engage/components/CartCouponIcon');
   if (!themeConfig.icons.cartCoupon) {
-    return /*#__PURE__*/React.createElement(CartCouponIcon, null);
+    return /*#__PURE__*/_jsx(CartCouponIcon, {});
   }
-  return /*#__PURE__*/React.createElement(Icon, _extends({}, viewBox && {
-    viewBox
-  }, {
+  return /*#__PURE__*/_jsx(Icon, {
+    ...(viewBox && {
+      viewBox
+    }),
     content: themeConfig.icons.cartCoupon,
     color: color
-  }));
+  });
 };

package/cart/components/CartItem/CartItemCouponLayout.js

@@ -23,47 +23,56 @@ import { item, icon, content, contentLast } from "./CartItemCouponLayout.style";
  * @param {boolean} [context.editable] Whether the item is editable.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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
-  }))));
+  return /*#__PURE__*/_jsxs(Grid, {
+    className: item,
+    children: [/*#__PURE__*/_jsx(Grid.Item, {
+      className: icon,
+      children: /*#__PURE__*/_jsx(SurroundPortals, {
+        portalName: CART_ITEM_IMAGE,
+        portalProps: context,
+        children: /*#__PURE__*/_jsx(CartItemCouponIcon, {})
+      })
+    }), /*#__PURE__*/_jsxs(Grid.Item, {
+      className: content,
+      grow: 1,
+      children: [/*#__PURE__*/_jsx(SurroundPortals, {
+        portalName: CART_ITEM_NAME,
+        portalProps: context,
+        children: /*#__PURE__*/_jsx(CartItemCouponTitle, {
+          value: coupon.label
+        })
+      }), /*#__PURE__*/_jsx(SurroundPortals, {
+        portalName: CART_ITEM_COUPON_CODE,
+        portalProps: context,
+        children: /*#__PURE__*/_jsx(CartItemCouponCode, {
+          value: coupon.code
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Grid.Item, {
+      className: `${content} ${contentLast}`,
+      grow: 1,
+      shrink: 0,
+      children: [context.editable && /*#__PURE__*/_jsx(CartItemCouponDelete, {
+        handleDelete: handleDelete
+      }), /*#__PURE__*/_jsx(CartItemCouponFreeShipping, {
+        freeShipping: !!coupon.freeShipping
+      }), coupon.savedPrice && coupon.savedPrice.value > 0 && /*#__PURE__*/_jsx(SurroundPortals, {
+        portalName: CART_ITEM_PRICE,
+        portalProps: context,
+        children: /*#__PURE__*/_jsx(CartItemCouponPrice, {
+          currency: currency,
+          savedPrice: coupon.savedPrice
+        })
+      })]
+    })]
+  });
 }
 CartItemCouponLayout.defaultProps = {
   handleDelete: () => {}

package/cart/components/CartItem/CartItemCouponPrice.js

@@ -16,12 +16,13 @@ import styles from "./CartItemCouponPrice.style";
  * @param {number} props.savedPrice.value The value of the saved price.
  * @returns {JSX.Element|null}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const CartItemCouponPrice = /*#__PURE__*/React.memo(({
   currency,
   savedPrice
 }) => {
   if (savedPrice.type === COUPON_TYPE_FIXED) {
-    return /*#__PURE__*/React.createElement(Price, {
+    return /*#__PURE__*/_jsx(Price, {
       className: styles,
       currency: currency,
       discounted: true,
@@ -29,9 +30,10 @@ export const CartItemCouponPrice = /*#__PURE__*/React.memo(({
     });
   }
   if (savedPrice.type === COUPON_TYPE_PERCENTAGE) {
-    return /*#__PURE__*/React.createElement("span", {
-      className: styles
-    }, `-${savedPrice.value}%`);
+    return /*#__PURE__*/_jsx("span", {
+      className: styles,
+      children: `-${savedPrice.value}%`
+    });
   }
   return null;
 });

package/cart/components/CartItem/CartItemCouponTitle.js

@@ -8,13 +8,15 @@ import styles from "./CartItemCouponTitle.style";
  * @param {Object} props The component properties.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export function CartItemCouponTitle({
   value
 }) {
   const title = useMemo(() => value || i18n.text('cart.default_coupon_label'), [value]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles
-  }, title);
+  return /*#__PURE__*/_jsx("div", {
+    className: styles,
+    children: title
+  });
 }
 CartItemCouponTitle.defaultProps = {
   value: null

package/cart/components/CartItem/CartItemProduct.js

@@ -9,6 +9,7 @@ import { CartItemProductLayoutWide } from "./CartItemProductLayoutWide";
 import { noGap } from "./CartItemProduct.style";
 import { useCartItemProduct } from "./CartItem.hooks";
 import CartItemSubstitution from "./CartItemSubstitution";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const messageStyles = {
   card: {
     container: messagesContainerCard,
@@ -33,22 +34,28 @@ const CartItemProduct = () => {
   const {
     cartItemsDisplay = 'line'
   } = getPageSettings(CART_PATH);
-  return /*#__PURE__*/React.createElement(CardListItem, {
-    className: cartItemsDisplay === 'card' ? noGap : null
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: cartItemRef,
-    "data-test-id": "cartItem"
-  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    appAlways: true,
-    breakpoint: "<=xs"
-  }, /*#__PURE__*/React.createElement(Fragment, null, messages.length > 0 && /*#__PURE__*/React.createElement(MessageBar, {
-    messages: messages,
-    classNames: messageStyles[cartItemsDisplay]
-  }), /*#__PURE__*/React.createElement(CartItemProductLayout, null))), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    webOnly: true,
-    breakpoint: ">xs"
-  }, /*#__PURE__*/React.createElement(CartItemProductLayoutWide, null)), /*#__PURE__*/React.createElement(CartItemSubstitution, {
-    editable: isEditable
-  })));
+  return /*#__PURE__*/_jsx(CardListItem, {
+    className: cartItemsDisplay === 'card' ? noGap : null,
+    children: /*#__PURE__*/_jsxs("div", {
+      ref: cartItemRef,
+      "data-test-id": "cartItem",
+      children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
+        appAlways: true,
+        breakpoint: "<=xs",
+        children: /*#__PURE__*/_jsxs(_Fragment, {
+          children: [messages.length > 0 && /*#__PURE__*/_jsx(MessageBar, {
+            messages: messages,
+            classNames: messageStyles[cartItemsDisplay]
+          }), /*#__PURE__*/_jsx(CartItemProductLayout, {})]
+        })
+      }), /*#__PURE__*/_jsx(ResponsiveContainer, {
+        webOnly: true,
+        breakpoint: ">xs",
+        children: /*#__PURE__*/_jsx(CartItemProductLayoutWide, {})
+      }), /*#__PURE__*/_jsx(CartItemSubstitution, {
+        editable: isEditable
+      })]
+    })
+  });
 };
 export default CartItemProduct;