@shopgate/engage 7.30.3 → 7.31.0-alpha.1

package/cart/components/CartItem/CartItemProductOrderDetails.js

@@ -1,17 +1,45 @@
 import React, { useMemo } from 'react';
-import classNames from 'classnames';
 import { QuantityLabel, I18n, Price } from '@shopgate/engage/components';
 import { getTranslatedLineItemStatus } from '@shopgate/engage/orders';
+import { makeStyles } from '@shopgate/engage/styles';
 import { CartItemProductPriceCaption } from "./CartItemProductPriceCaption";
 import { createCartItemPrices } from "../../cart.helpers";
 import { useCartItem, useCartItemProduct } from "./CartItem.hooks";
-import { quantityLabel, label, container, labelValue, fulfillmentLabel } from "./CartItemProductOrderDetails.style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    paddingTop: theme.spacing(1)
+  },
+  quantityLabel: {
+    textAlign: 'center',
+    whiteSpace: 'nowrap'
+  },
+  label: {
+    ':after': {
+      content: '": "'
+    }
+  },
+  labelValue: {
+    fontWeight: 500,
+    display: 'inline',
+    color: 'var(--color-text-medium-emphasis)'
+  },
+  fulfillmentLabel: {
+    fontSize: 'inherit',
+    ':before': {
+      content: '" "'
+    }
+  }
+}));
 
 /**
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CartItemProductOrderDetails = () => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     location,
     cartItem,
@@ -27,31 +55,31 @@ const CartItemProductOrderDetails = () => {
     return result.slice(-1)[0].price;
   }, [cartItem]);
   return /*#__PURE__*/_jsxs("ul", {
-    className: container,
+    className: classes.container,
     children: [!cartIsDirectShipOnly && location?.name ? /*#__PURE__*/_jsxs("li", {
       children: [/*#__PURE__*/_jsx(I18n.Text, {
         string: "cart.location",
-        className: label
+        className: classes.label
       }), /*#__PURE__*/_jsx("span", {
-        className: labelValue,
+        className: classes.labelValue,
         children: location?.name
       }), /*#__PURE__*/_jsx(CartItemProductPriceCaption, {
-        className: fulfillmentLabel
+        className: classes.fulfillmentLabel
       })]
     }) : null, /*#__PURE__*/_jsxs("li", {
       children: [/*#__PURE__*/_jsx(I18n.Text, {
         string: "cart.status",
-        className: label
+        className: classes.label
       }), /*#__PURE__*/_jsx("span", {
-        className: labelValue,
+        className: classes.labelValue,
         children: getTranslatedLineItemStatus(cartItem?.status, cartItem?.subStatus)
       })]
     }), /*#__PURE__*/_jsxs("li", {
       children: [/*#__PURE__*/_jsx(I18n.Text, {
         string: "cart.fulfilled_quantity",
-        className: label
+        className: classes.label
       }), /*#__PURE__*/_jsx(QuantityLabel, {
-        className: classNames(quantityLabel, labelValue),
+        className: cx(classes.quantityLabel, classes.labelValue),
         value: cartItem.quantity,
         unit: hasUnitWithDecimals ? product.unit : null,
         maxDecimals: hasUnitWithDecimals ? 2 : 0
@@ -59,9 +87,9 @@ const CartItemProductOrderDetails = () => {
     }), /*#__PURE__*/_jsxs("li", {
       children: [/*#__PURE__*/_jsx(I18n.Text, {
         string: "cart.ordered_quantity",
-        className: label
+        className: classes.label
       }), /*#__PURE__*/_jsx(QuantityLabel, {
-        className: classNames(quantityLabel, labelValue),
+        className: cx(classes.quantityLabel, classes.labelValue),
         value: cartItem.orderedQuantity,
         unit: hasUnitWithDecimals ? product.unit : null,
         maxDecimals: hasUnitWithDecimals ? 2 : 0
@@ -69,9 +97,9 @@ const CartItemProductOrderDetails = () => {
     }), /*#__PURE__*/_jsxs("li", {
       children: [/*#__PURE__*/_jsx(I18n.Text, {
         string: "cart.price",
-        className: label
+        className: classes.label
       }), /*#__PURE__*/_jsx(Price, {
-        className: labelValue,
+        className: classes.labelValue,
         currency: currency,
         taxDisclaimer: true,
         unitPrice: unitPrice,

package/cart/components/CartItem/CartItemProductPriceCaption.js

@@ -1,20 +1,31 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { makeStyles } from '@shopgate/engage/styles';
 import { ROPIS
 //  BOPIS,
 } from '@shopgate/engage/locations';
 import { I18n } from '@shopgate/engage/components';
 import { useCartItemProduct } from "./CartItem.hooks";
-import { caption } from "./CartItemProductPriceCaption.style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  caption: {
+    fontSize: '0.75rem',
+    lineHeight: '0.875rem',
+    color: theme.palette.text.secondary,
+    paddingTop: theme.spacing(0.5)
+  }
+}));
 
 /**
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CartItemProductPriceCaption = ({
   className
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     cartItem
   } = useCartItemProduct();
@@ -30,7 +41,7 @@ const CartItemProductPriceCaption = ({
     return null;
   }
   return /*#__PURE__*/_jsxs("span", {
-    className: classNames(caption, className),
+    className: cx(classes.caption, className),
     children: ["(", /*#__PURE__*/_jsx(I18n.Text, {
       string: label
     }), ")"]

package/cart/components/CartItem/CartItemProductPriceList.js

@@ -1,30 +1,29 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { css } from 'glamor';
+import { makeStyles } from '@shopgate/engage/styles';
 import Price from '@shopgate/pwa-ui-shared/Price';
 import PriceStriked from '@shopgate/pwa-ui-shared/PriceStriked';
 import { useCartItemProduct, useCartItem } from "./CartItem.hooks";
 import { createCartItemPrices } from "../../cart.helpers";
 import CartItemProductPriceListPromotion from "./CartItemProductPriceListPromotion";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = {
-  price: css({
+const useStyles = makeStyles()({
+  price: {
     fontSize: '1rem',
     fontWeight: 500,
     marginLeft: 'auto'
-  }).toString(),
-  priceStriked: css({
+  },
+  priceStriked: {
     fontSize: '.875rem',
     marginLeft: 'auto'
-  }).toString(),
-  priceListEntry: css({
+  },
+  priceListEntry: {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'flex-end',
     alignItems: 'center'
-  }).toString()
-};
+  }
+});
 
 /**
  * @param {Object} props The component props
@@ -34,10 +33,14 @@ const styles = {
  * @returns {JSX.Element}
  */
 const CartItemProductPriceList = ({
-  classes,
+  classes: customClasses,
   isSubtotal,
   showLabels
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     isOrderDetails,
     isCheckoutConfirmation
@@ -63,17 +66,17 @@ const CartItemProductPriceList = ({
     }, index) => {
       const isLast = index === prices.length - 1;
       return /*#__PURE__*/ /* eslint-disable react/no-array-index-key */_jsxs("li", {
-        className: classNames(styles.priceListEntry, classes?.entry),
+        className: cx(classes.priceListEntry, customClasses?.entry),
         children: [(showLabels || !isSubtotal) && /*#__PURE__*/_jsx(CartItemProductPriceListPromotion, {
           isCoupon: isCoupon,
           isPromo: isPromo,
-          className: classes?.promo
+          className: customClasses?.promo
         }), !isLast ? /*#__PURE__*/_jsx(PriceStriked, {
-          className: classNames(styles.priceStriked, classes?.priceStriked),
+          className: cx(classes.priceStriked, customClasses?.priceStriked),
           value: price,
           currency: currency
         }) : /*#__PURE__*/_jsx(Price, {
-          className: classNames(styles.price, classes?.price),
+          className: cx(classes.price, customClasses?.price),
           unitPrice: price,
           currency: currency,
           discounted: prices.length > 1 || price === 0,

package/cart/components/CartItem/CartItemProductPriceListPromotion.js

@@ -1,31 +1,25 @@
 import React, { useMemo, useContext, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { css } from 'glamor';
-import classNames from 'classnames';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { showModal } from '@shopgate/engage/core';
 import { deleteCouponsFromCart } from '@shopgate/engage/cart';
 import { I18n, CrossIcon, InfoIcon } from '@shopgate/engage/components';
 import { CartContext } from "../../cart.context";
 import { useCartItem } from "./CartItem.hooks";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
-const styles = {
-  container: css({
+const useStyles = makeStyles()(theme => ({
+  container: {
     flex: '0 1 auto',
     color: 'var(--color-secondary)',
     paddingRight: 8
-  }).toString(),
-  deleteIcon: css({
+  },
+  deleteIcon: {
     backgroundColor: '#898989',
     color: '#fff',
     borderRadius: 32,
     padding: 4,
-    marginRight: variables.gap.small,
+    marginRight: theme.spacing(1),
     cursor: 'pointer',
     fontSize: '0.75rem',
     display: 'inline-flex',
@@ -34,29 +28,29 @@ const styles = {
     })]: {
       padding: 3
     }
-  }).toString(),
-  infoIconWrapper: css({
+  },
+  infoIconWrapper: {
     cursor: 'pointer',
     color: 'var(--color-primary)',
     fontSize: '1.5rem',
     display: 'inline-flex',
     verticalAlign: 'bottom',
     paddingBottom: 1,
-    marginLeft: variables.gap.small,
+    marginLeft: theme.spacing(1),
     [responsiveMediaQuery('<=xs', {
       appAlways: true
     })]: {
       fontSize: '1.375rem',
       paddingBottom: 0
     }
-  }).toString(),
-  icon: css({
+  },
+  icon: {
     display: 'inline'
-  }).toString(),
-  loading: css({
+  },
+  loading: {
     opacity: 0.5
-  }).toString()
-};
+  }
+}));
 
 /**
  * @param {Function} dispatch The redux dispatch function.
@@ -82,6 +76,10 @@ const PromotionalTextInfoIcon = ({
   text,
   showText
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     isLoading
   } = useContext(CartContext);
@@ -91,13 +89,13 @@ const PromotionalTextInfoIcon = ({
   return /*#__PURE__*/_jsx("span", {
     onClick: () => showText(text),
     onKeyDown: () => showText(text),
-    className: classNames(styles.infoIconWrapper, {
-      [styles.loading]: isLoading
+    className: cx(classes.infoIconWrapper, {
+      [classes.loading]: isLoading
     }),
     role: "button",
     tabIndex: 0,
     children: /*#__PURE__*/_jsx(InfoIcon, {
-      className: styles.icon
+      className: classes.icon
     })
   });
 };
@@ -116,6 +114,10 @@ const CartItemProductPriceListPromotion = ({
   showTextModal,
   className
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     cartItem = {}
   } = useCartItem();
@@ -139,7 +141,7 @@ const CartItemProductPriceListPromotion = ({
     const promotionalText = promo?.promotionalText;
     const name = promo?.name;
     return /*#__PURE__*/_jsxs("div", {
-      className: classNames(styles.container, className),
+      className: cx(classes.container, className),
       children: [name, /*#__PURE__*/_jsx(PromotionalTextInfoIcon, {
         text: promotionalText,
         showText: showText
@@ -150,9 +152,9 @@ const CartItemProductPriceListPromotion = ({
     const promotionalText = coupon?.promotionalText;
     const code = coupon?.coupon?.code;
     return /*#__PURE__*/_jsxs("div", {
-      className: classNames(styles.container, className),
+      className: cx(classes.container, className),
       children: [/*#__PURE__*/_jsx("span", {
-        className: styles.deleteIcon,
+        className: classes.deleteIcon,
         onClick: () => {
           deleteCoupon(code);
         },

package/cart/components/CartItem/CartItemProductTitle.js

@@ -1,18 +1,37 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
 import { Grid, I18n, ContextMenu, SurroundPortals, TextLink } from '@shopgate/engage/components';
 import { CART_ITEM_CONTEXT_MENU, CART_ITEM_CONTEXT_MENU_ITEM_REMOVE, CART_ITEM_NAME } from '@shopgate/engage/cart';
 import { CartContextMenuItemChangeLocation, CartContextMenuItemChangeFulfillment } from '@shopgate/engage/locations';
 import { ITEM_PATH, ProductName } from '@shopgate/engage/product';
 import { bin2hex } from '@shopgate/pwa-common/helpers/data';
 import { useCartItem, useCartItemProduct } from "./CartItem.hooks";
-import { menuToggleButton, menuToggleContainer, title, menuContainer } from "./CartItemProductTitle.style";
 import { ConditionalWrapper } from "../../../components";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const contextMenuClasses = {
-  button: menuToggleButton,
-  container: menuToggleContainer
-};
+const useStyles = makeStyles()(theme => ({
+  title: {
+    fontWeight: 500,
+    lineHeight: 1.125,
+    wordBreak: ['keep-all', 'break-word'],
+    hyphens: 'auto'
+  },
+  menuContainer: {
+    marginTop: theme.spacing(-2),
+    marginRight: theme.spacing(-2)
+  },
+  menuToggleContainer: {
+    margin: theme.spacing(1)
+  },
+  menuToggleButton: {
+    height: theme.spacing(4),
+    width: theme.spacing(4),
+    fontSize: theme.spacing(3),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  }
+}));
 
 /**
  * The Cart Product Title component.
@@ -25,6 +44,9 @@ export function CartItemProductTitle({
   value,
   productId
 }) {
+  const {
+    classes
+  } = useStyles();
   const {
     invokeFulfillmentAction
   } = useCartItem();
@@ -50,6 +72,10 @@ export function CartItemProductTitle({
   const handleChangeFulfillmentClick = useCallback(() => {
     invokeFulfillmentAction('changeFulfillment');
   }, [invokeFulfillmentAction]);
+  const contextMenuClasses = useMemo(() => ({
+    button: classes.menuToggleButton,
+    container: classes.menuToggleContainer
+  }), [classes.menuToggleButton, classes.menuToggleContainer]);
   return /*#__PURE__*/_jsxs(Grid, {
     children: [/*#__PURE__*/_jsx(Grid.Item, {
       grow: 1,
@@ -61,7 +87,7 @@ export function CartItemProductTitle({
         }),
         children: /*#__PURE__*/_jsx(ProductName, {
           name: value,
-          className: title,
+          className: classes.title,
           portalName: CART_ITEM_NAME,
           portalProps: context,
           testId: value,
@@ -69,7 +95,7 @@ export function CartItemProductTitle({
         })
       })
     }), isEditable && /*#__PURE__*/_jsx(Grid.Item, {
-      className: menuContainer,
+      className: classes.menuContainer,
       shrink: 0,
       children: /*#__PURE__*/_jsx(SurroundPortals, {
         portalName: CART_ITEM_CONTEXT_MENU,