@shopgate/engage 7.30.3 → 7.31.0-alpha.1

package/cart/components/CartItem/CartItemCoupon.js

@@ -1,16 +1,66 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import * as React from 'react';
+import React, { useState, useRef, useLayoutEffect, useCallback, useMemo, memo } 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 { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/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";
+import { CartItemCouponLayout, CartItemCouponLayoutContext } from "./CartItemCouponLayout";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const duration = 300;
+const defaultTransitionStyle = {
+  transition: `height ${duration}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}
+ */
+const getTransitionStyle = state => ({
+  ...defaultTransitionStyle,
+  ...transitionStyles[state]
+});
+const useStyles = makeStyles()(theme => ({
+  container: {
+    marginBottom: 4
+  },
+  messagesContainerCard: {
+    background: colors.light,
+    padding: theme.spacing(0, 0, 2, 0)
+  },
+  messagesCard: {
+    borderRadius: '5px 5px 0 0',
+    padding: theme.spacing(1, 1.75)
+  },
+  messagesContainerLine: {
+    background: colors.light,
+    padding: theme.spacing(2, 2, 0)
+  },
+  messagesLine: {
+    borderRadius: 4,
+    padding: theme.spacing(1, 2),
+    lineHeight: 1.125
+  }
+}));
 
 /**
  * @typedef {import('./CartItemCoupon.types').OwnProps} OwnProps
@@ -19,151 +69,88 @@ import { CartItemCouponLayout } from "./CartItemCouponLayout";
  * @typedef {OwnProps & StateProps & DispatchProps} Props
  */
 
-/**
- * @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,
-    message: messagesCard
-  },
-  line: {
-    container: messagesContainerLine,
-    message: messagesLine
-  }
-};
-
 /**
  * The Coupon component.
+ * @param {Props} props Props.
+ * @returns {JSX.Element}
  */
-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}
-     */
-    /**
-     * 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);
-    };
-    _this.state = {
-      visible: true
-    };
-    return _this;
-  }
-
-  /**
-   * @returns {Object}
-   */
-  _inheritsLoose(CartItemCoupon, _React$PureComponent);
-  var _proto = CartItemCoupon.prototype;
-  _proto.getChildContext = function getChildContext() {
-    const {
-      id,
-      editable
-    } = this.props;
-    return {
-      cartItemId: id,
-      type: CART_ITEM_TYPE_COUPON,
-      editable
-    };
-  }
-
-  /**
-   * Updates transition height on mount/update.
-   */;
-  _proto.componentDidMount = function componentDidMount() {
-    this.updateHeight();
-  }
-
-  /**
-   * We need to set the element height explicitly so that we can animate it later.
-   */;
-  _proto.componentDidUpdate = function componentDidUpdate() {
-    this.updateHeight();
-  };
-  /**
-   * @returns {JSX.Element}
-   */
-  _proto.render = function render() {
-    const {
-      coupon,
-      currency,
-      messages
-    } = this.props;
-    const {
-      visible
-    } = this.state;
-    const {
-      cartItemsDisplay = 'line'
-    } = getPageSettings(CART_PATH);
-    const messageStyle = messageStyles[cartItemsDisplay];
-    return /*#__PURE__*/_jsx(Transition, {
-      in: visible,
-      timeout: duration,
-      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;
-          },
+const CartItemCoupon = ({
+  coupon,
+  currency,
+  id,
+  messages,
+  deleteCoupon,
+  editable
+}) => {
+  const {
+    classes
+  } = useStyles();
+  const [visible, setVisible] = useState(true);
+  const transitionElementRef = useRef(null);
+  const cardElementRef = useRef(null);
+  const updateHeight = useCallback(() => {
+    const transitionEl = transitionElementRef.current;
+    const cardEl = cardElementRef.current;
+    if (transitionEl && cardEl) {
+      transitionEl.style.height = `${getAbsoluteHeight(cardEl)}px`;
+    }
+  }, []);
+  useLayoutEffect(() => {
+    updateHeight();
+  });
+  const transitionOut = useCallback(() => {
+    setVisible(false);
+  }, []);
+  const handleExited = useCallback(() => {
+    deleteCoupon(id);
+  }, [deleteCoupon, id]);
+  const {
+    cartItemsDisplay = 'line'
+  } = getPageSettings(CART_PATH);
+  const messageStyle = {
+    card: {
+      container: classes.messagesContainerCard,
+      message: classes.messagesCard
+    },
+    line: {
+      container: classes.messagesContainerLine,
+      message: classes.messagesLine
+    }
+  }[cartItemsDisplay];
+  const layoutContextValue = useMemo(() => ({
+    cartItemId: id,
+    type: CART_ITEM_TYPE_COUPON,
+    editable
+  }), [editable, id]);
+  return /*#__PURE__*/_jsx(Transition, {
+    in: visible,
+    timeout: duration,
+    onExited: handleExited,
+    children: state => /*#__PURE__*/_jsx("div", {
+      ref: transitionElementRef,
+      style: getTransitionStyle(state),
+      children: /*#__PURE__*/_jsx("div", {
+        className: classes.container,
+        ref: cardElementRef,
+        children: /*#__PURE__*/_jsx(CartItemCouponLayoutContext.Provider, {
+          value: layoutContextValue,
           children: /*#__PURE__*/_jsxs(CardList.Item, {
             children: [!!messages.length && /*#__PURE__*/_jsx(MessageBar, {
               messages: messages,
               classNames: messageStyle
             }), /*#__PURE__*/_jsx(CartItemCouponLayout, {
-              handleDelete: this.transitionOut,
+              handleDelete: transitionOut,
               coupon: coupon,
               currency: currency
             })]
           })
         })
-      }, this.props.id)
-    });
-  };
-  return CartItemCoupon;
-}(React.PureComponent);
-CartItemCoupon.childContextTypes = {
-  cartItemId: PropTypes.string,
-  type: PropTypes.string,
-  editable: PropTypes.bool
+      })
+    }, id)
+  });
 };
 CartItemCoupon.defaultProps = {
   editable: true,
   deleteCoupon: () => {}
 };
-export default connect(CartItemCoupon);
+export default connect(/*#__PURE__*/memo(CartItemCoupon));

package/cart/components/CartItem/CartItemCouponDelete.js

@@ -1,24 +1,37 @@
 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 { i18n } from '@shopgate/engage/core/helpers';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  button: {
+    padding: 0,
+    fontSize: '1.5rem',
+    marginTop: -2,
+    marginRight: -5
+  }
+});
 /**
  * The Coupon Delete component.
  * @param {Object} props The component properties.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export const CartItemCouponDelete = ({
   handleDelete
-}) => /*#__PURE__*/_jsx("button", {
-  className: styles,
-  onClick: handleDelete,
-  "data-test-id": "deleteCoupon",
-  type: "button",
-  "aria-label": i18n.text('cart.delete_coupon'),
-  children: /*#__PURE__*/_jsx(CrossIcon, {})
-});
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx("button", {
+    className: classes.button,
+    onClick: handleDelete,
+    "data-test-id": "deleteCoupon",
+    type: "button",
+    "aria-label": i18n.text('cart.delete_coupon'),
+    children: /*#__PURE__*/_jsx(CrossIcon, {})
+  });
+};
 CartItemCouponDelete.defaultProps = {
   handleDelete: () => {}
 };

package/cart/components/CartItem/CartItemCouponFreeShipping.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
 
 /**
  * The Coupon Free Shipping component.

package/cart/components/CartItem/CartItemCouponLayout.js

@@ -1,7 +1,8 @@
 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 { makeStyles } from '@shopgate/engage/styles';
+import { CART_ITEM_IMAGE, CART_ITEM_NAME, CART_ITEM_COUPON_CODE, CART_ITEM_PRICE, CART_ITEM_TYPE_COUPON } from '@shopgate/pwa-common-commerce/cart';
 import Grid from '@shopgate/pwa-common/components/Grid';
 import { CartItemCouponIcon } from "./CartItemCouponIcon";
 import { CartItemCouponPrice } from "./CartItemCouponPrice";
@@ -9,38 +10,68 @@ import { CartItemCouponFreeShipping } from "./CartItemCouponFreeShipping";
 import { CartItemCouponTitle } from "./CartItemCouponTitle";
 import { CartItemCouponCode } from "./CartItemCouponCode";
 import { CartItemCouponDelete } from "./CartItemCouponDelete";
-import { item, icon, content, contentLast } from "./CartItemCouponLayout.style";
+
+/** @type {React.Context<{ cartItemId: string, type: string, editable?: boolean }>} */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CartItemCouponLayoutContext = /*#__PURE__*/React.createContext({
+  cartItemId: '',
+  type: CART_ITEM_TYPE_COUPON,
+  editable: true
+});
+const useStyles = makeStyles()(theme => ({
+  item: {
+    fontSize: '0.875rem',
+    padding: theme.spacing(0.5, 2)
+  },
+  icon: {
+    fontSize: '3rem',
+    flexShrink: 0,
+    margin: '5px 12px 0 12px'
+  },
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    paddingLeft: theme.spacing(2),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    // Ensure long coupon codes do not break layout.
+    minWidth: 0
+  },
+  contentLast: {
+    alignItems: 'flex-end'
+  }
+}));
 
 /**
- * The CouponLayout component.
+ * The CartItemCouponLayout 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.
- * @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}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function CartItemCouponLayout(props, context) {
+export function CartItemCouponLayout(props) {
+  const context = React.useContext(CartItemCouponLayoutContext);
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     coupon,
     currency,
     handleDelete
   } = props;
   return /*#__PURE__*/_jsxs(Grid, {
-    className: item,
+    className: classes.item,
     children: [/*#__PURE__*/_jsx(Grid.Item, {
-      className: icon,
+      className: classes.icon,
       children: /*#__PURE__*/_jsx(SurroundPortals, {
         portalName: CART_ITEM_IMAGE,
         portalProps: context,
         children: /*#__PURE__*/_jsx(CartItemCouponIcon, {})
       })
     }), /*#__PURE__*/_jsxs(Grid.Item, {
-      className: content,
+      className: classes.content,
       grow: 1,
       children: [/*#__PURE__*/_jsx(SurroundPortals, {
         portalName: CART_ITEM_NAME,
@@ -56,7 +87,7 @@ export function CartItemCouponLayout(props, context) {
         })
       })]
     }), /*#__PURE__*/_jsxs(Grid.Item, {
-      className: `${content} ${contentLast}`,
+      className: cx(classes.content, classes.contentLast),
       grow: 1,
       shrink: 0,
       children: [context.editable && /*#__PURE__*/_jsx(CartItemCouponDelete, {
@@ -76,9 +107,4 @@ export function CartItemCouponLayout(props, context) {
 }
 CartItemCouponLayout.defaultProps = {
   handleDelete: () => {}
-};
-CartItemCouponLayout.contextTypes = {
-  cartItemId: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  editable: PropTypes.bool
 };

package/cart/components/CartItem/CartItemCouponPrice.js

@@ -1,8 +1,16 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
 import { COUPON_TYPE_FIXED, COUPON_TYPE_PERCENTAGE } from '@shopgate/pwa-common-commerce/cart';
 import Price from '@shopgate/pwa-ui-shared/Price';
-import styles from "./CartItemCouponPrice.style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  price: {
+    fontSize: '1rem',
+    fontWeight: 500,
+    color: 'var(--color-primary)'
+  }
+});
 /**
  * @typedef {import('../../cart.types').SavedPrice} SavedPrice
  */
@@ -16,14 +24,16 @@ 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
 }) => {
+  const {
+    classes
+  } = useStyles();
   if (savedPrice.type === COUPON_TYPE_FIXED) {
     return /*#__PURE__*/_jsx(Price, {
-      className: styles,
+      className: classes.price,
       currency: currency,
       discounted: true,
       unitPrice: -savedPrice.value
@@ -31,7 +41,7 @@ export const CartItemCouponPrice = /*#__PURE__*/React.memo(({
   }
   if (savedPrice.type === COUPON_TYPE_PERCENTAGE) {
     return /*#__PURE__*/_jsx("span", {
-      className: styles,
+      className: classes.price,
       children: `-${savedPrice.value}%`
     });
   }

package/cart/components/CartItem/CartItemCouponTitle.js

@@ -1,20 +1,31 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { i18n } from '@shopgate/engage/core';
-import styles from "./CartItemCouponTitle.style";
+import { i18n } from '@shopgate/engage/core/helpers';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  title: {
+    fontSize: '1rem',
+    fontWeight: 500,
+    lineHeight: 1.125,
+    marginBottom: 4
+  }
+});
 
 /**
  * The CouponTitle component.
  * @param {Object} props The component properties.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function CartItemCouponTitle({
   value
 }) {
+  const {
+    classes
+  } = useStyles();
   const title = useMemo(() => value || i18n.text('cart.default_coupon_label'), [value]);
   return /*#__PURE__*/_jsx("div", {
-    className: styles,
+    className: classes.title,
     children: title
   });
 }

package/cart/components/CartItem/CartItemProduct.js

@@ -1,31 +1,50 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { CART_PATH } from '@shopgate/pwa-common-commerce/cart/constants';
 import CardListItem from '@shopgate/pwa-ui-shared/CardList/components/Item';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { MessageBar, ResponsiveContainer } from '@shopgate/engage/components';
 import { getPageSettings } from '@shopgate/engage/core/config';
-import { messagesContainerCard, messagesCard, messagesContainerLine, messagesLine } from "./CartItem.style";
 import { CartItemProductLayout } from "./CartItemProductLayout";
 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,
-    message: messagesCard
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()(theme => ({
+  noGap: {
+    marginBottom: 0,
+    background: 'none'
   },
-  line: {
-    container: messagesContainerLine,
-    message: messagesLine
+  messagesContainerCard: {
+    background: colors.light,
+    padding: theme.spacing(0, 0, 2, 0)
+  },
+  messagesCard: {
+    borderRadius: '5px 5px 0 0',
+    padding: theme.spacing(1, 1.75)
+  },
+  messagesContainerLine: {
+    background: colors.light,
+    padding: theme.spacing(2, 2, 0)
+  },
+  messagesLine: {
+    borderRadius: 4,
+    padding: theme.spacing(1, 2),
+    lineHeight: 1.125
   }
-};
+}));
 
 /**
  * The CartProduct component.
  * @returns {JSX}
  */
 const CartItemProduct = () => {
+  const {
+    classes
+  } = useStyles();
   const {
     messages,
     cartItemRef,
@@ -34,8 +53,18 @@ const CartItemProduct = () => {
   const {
     cartItemsDisplay = 'line'
   } = getPageSettings(CART_PATH);
+  const messageStyles = {
+    card: {
+      container: classes.messagesContainerCard,
+      message: classes.messagesCard
+    },
+    line: {
+      container: classes.messagesContainerLine,
+      message: classes.messagesLine
+    }
+  };
   return /*#__PURE__*/_jsx(CardListItem, {
-    className: cartItemsDisplay === 'card' ? noGap : null,
+    className: cartItemsDisplay === 'card' ? classes.noGap : null,
     children: /*#__PURE__*/_jsxs("div", {
       ref: cartItemRef,
       "data-test-id": "cartItem",