@shopgate/engage 7.30.0-alpha.8 → 7.30.0-beta.1

package/cart/components/CartItem/CartItemProductOrderDetails.js

@@ -10,6 +10,7 @@ import { quantityLabel, label, container, labelValue, fulfillmentLabel } from ".
 /**
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CartItemProductOrderDetails = () => {
   const {
     location,
@@ -25,45 +26,58 @@ const CartItemProductOrderDetails = () => {
     const result = createCartItemPrices(cartItem).price;
     return result.slice(-1)[0].price;
   }, [cartItem]);
-  return /*#__PURE__*/React.createElement("ul", {
-    className: container
-  }, !cartIsDirectShipOnly && location?.name ? /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cart.location",
-    className: label
-  }), /*#__PURE__*/React.createElement("span", {
-    className: labelValue
-  }, location?.name), /*#__PURE__*/React.createElement(CartItemProductPriceCaption, {
-    className: fulfillmentLabel
-  })) : null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cart.status",
-    className: label
-  }), /*#__PURE__*/React.createElement("span", {
-    className: labelValue
-  }, getTranslatedLineItemStatus(cartItem?.status, cartItem?.subStatus))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cart.fulfilled_quantity",
-    className: label
-  }), /*#__PURE__*/React.createElement(QuantityLabel, {
-    className: classNames(quantityLabel, labelValue),
-    value: cartItem.quantity,
-    unit: hasUnitWithDecimals ? product.unit : null,
-    maxDecimals: hasUnitWithDecimals ? 2 : 0
-  })), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cart.ordered_quantity",
-    className: label
-  }), /*#__PURE__*/React.createElement(QuantityLabel, {
-    className: classNames(quantityLabel, labelValue),
-    value: cartItem.orderedQuantity,
-    unit: hasUnitWithDecimals ? product.unit : null,
-    maxDecimals: hasUnitWithDecimals ? 2 : 0
-  })), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cart.price",
-    className: label
-  }), /*#__PURE__*/React.createElement(Price, {
-    className: labelValue,
-    currency: currency,
-    taxDisclaimer: true,
-    unitPrice: unitPrice,
-    allowFree: true
-  })));
+  return /*#__PURE__*/_jsxs("ul", {
+    className: container,
+    children: [!cartIsDirectShipOnly && location?.name ? /*#__PURE__*/_jsxs("li", {
+      children: [/*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.location",
+        className: label
+      }), /*#__PURE__*/_jsx("span", {
+        className: labelValue,
+        children: location?.name
+      }), /*#__PURE__*/_jsx(CartItemProductPriceCaption, {
+        className: fulfillmentLabel
+      })]
+    }) : null, /*#__PURE__*/_jsxs("li", {
+      children: [/*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.status",
+        className: label
+      }), /*#__PURE__*/_jsx("span", {
+        className: labelValue,
+        children: getTranslatedLineItemStatus(cartItem?.status, cartItem?.subStatus)
+      })]
+    }), /*#__PURE__*/_jsxs("li", {
+      children: [/*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.fulfilled_quantity",
+        className: label
+      }), /*#__PURE__*/_jsx(QuantityLabel, {
+        className: classNames(quantityLabel, labelValue),
+        value: cartItem.quantity,
+        unit: hasUnitWithDecimals ? product.unit : null,
+        maxDecimals: hasUnitWithDecimals ? 2 : 0
+      })]
+    }), /*#__PURE__*/_jsxs("li", {
+      children: [/*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.ordered_quantity",
+        className: label
+      }), /*#__PURE__*/_jsx(QuantityLabel, {
+        className: classNames(quantityLabel, labelValue),
+        value: cartItem.orderedQuantity,
+        unit: hasUnitWithDecimals ? product.unit : null,
+        maxDecimals: hasUnitWithDecimals ? 2 : 0
+      })]
+    }), /*#__PURE__*/_jsxs("li", {
+      children: [/*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.price",
+        className: label
+      }), /*#__PURE__*/_jsx(Price, {
+        className: labelValue,
+        currency: currency,
+        taxDisclaimer: true,
+        unitPrice: unitPrice,
+        allowFree: true
+      })]
+    })]
+  });
 };
 export default CartItemProductOrderDetails;

package/cart/components/CartItem/CartItemProductPriceCaption.js

@@ -9,8 +9,9 @@ import { useCartItemProduct } from "./CartItem.hooks";
 import { caption } from "./CartItemProductPriceCaption.style";
 
 /**
- * @returns {JSX}
+ * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CartItemProductPriceCaption = ({
   className
 }) => {
@@ -28,11 +29,12 @@ const CartItemProductPriceCaption = ({
   if (!label) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("span", {
-    className: classNames(caption, className)
-  }, "(", /*#__PURE__*/React.createElement(I18n.Text, {
-    string: label
-  }), ")");
+  return /*#__PURE__*/_jsxs("span", {
+    className: classNames(caption, className),
+    children: ["(", /*#__PURE__*/_jsx(I18n.Text, {
+      string: label
+    }), ")"]
+  });
 };
 CartItemProductPriceCaption.defaultProps = {
   className: null

package/cart/components/CartItem/CartItemProductPriceList.js

@@ -7,6 +7,7 @@ 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({
     fontSize: '1rem',
@@ -27,7 +28,10 @@ const styles = {
 
 /**
  * @param {Object} props The component props
- * @returns {JSX}
+ * @param {Object} [props.classes] CSS class names
+ * @param {boolean} [props.isSubtotal] Whether to show subtotal prices
+ * @param {boolean} [props.showLabels] Whether to show promotion labels
+ * @returns {JSX.Element}
  */
 const CartItemProductPriceList = ({
   classes,
@@ -51,33 +55,35 @@ const CartItemProductPriceList = ({
     }
     return result;
   }, [cartItem, isCheckoutConfirmation, isOrderDetails, isSubtotal]);
-  return /*#__PURE__*/React.createElement("ul", null, prices.map(({
-    price,
-    isCoupon,
-    isPromo
-  }, index) => {
-    const isLast = index === prices.length - 1;
-    return /*#__PURE__*/ /* eslint-disable react/no-array-index-key */React.createElement("li", {
-      key: `total_${index}`,
-      className: classNames(styles.priceListEntry, classes?.entry)
-    }, (showLabels || !isSubtotal) && /*#__PURE__*/React.createElement(CartItemProductPriceListPromotion, {
-      isCoupon: isCoupon,
-      isPromo: isPromo,
-      className: classes?.promo
-    }), !isLast ? /*#__PURE__*/React.createElement(PriceStriked, {
-      className: classNames(styles.priceStriked, classes?.priceStriked),
-      value: price,
-      currency: currency
-    }) : /*#__PURE__*/React.createElement(Price, {
-      className: classNames(styles.price, classes?.price),
-      unitPrice: price,
-      currency: currency,
-      discounted: prices.length > 1 || price === 0,
-      taxDisclaimer: true,
-      allowFree: true
-    }))
-    /* eslint-enable react/no-array-index-key */;
-  }));
+  return /*#__PURE__*/_jsx("ul", {
+    children: prices.map(({
+      price,
+      isCoupon,
+      isPromo
+    }, index) => {
+      const isLast = index === prices.length - 1;
+      return /*#__PURE__*/ /* eslint-disable react/no-array-index-key */_jsxs("li", {
+        className: classNames(styles.priceListEntry, classes?.entry),
+        children: [(showLabels || !isSubtotal) && /*#__PURE__*/_jsx(CartItemProductPriceListPromotion, {
+          isCoupon: isCoupon,
+          isPromo: isPromo,
+          className: classes?.promo
+        }), !isLast ? /*#__PURE__*/_jsx(PriceStriked, {
+          className: classNames(styles.priceStriked, classes?.priceStriked),
+          value: price,
+          currency: currency
+        }) : /*#__PURE__*/_jsx(Price, {
+          className: classNames(styles.price, classes?.price),
+          unitPrice: price,
+          currency: currency,
+          discounted: prices.length > 1 || price === 0,
+          taxDisclaimer: true,
+          allowFree: true
+        })]
+      }, `total_${index}`)
+      /* eslint-enable react/no-array-index-key */;
+    })
+  });
 };
 CartItemProductPriceList.defaultProps = {
   isSubtotal: false,

package/cart/components/CartItem/CartItemProductPriceListPromotion.js

@@ -10,6 +10,7 @@ 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;
@@ -73,7 +74,9 @@ const mapDispatchToProps = dispatch => ({
 
 /**
  * @param {Object} props The component props
- * @returns {JSX}
+ * @param {string} props.text The promotional text
+ * @param {Function} props.showText The function to show the promotional text
+ * @returns {JSX.Element}
  */
 const PromotionalTextInfoIcon = ({
   text,
@@ -85,17 +88,18 @@ const PromotionalTextInfoIcon = ({
   if (!text) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/_jsx("span", {
     onClick: () => showText(text),
     onKeyDown: () => showText(text),
     className: classNames(styles.infoIconWrapper, {
       [styles.loading]: isLoading
     }),
     role: "button",
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement(InfoIcon, {
-    className: styles.icon
-  }));
+    tabIndex: 0,
+    children: /*#__PURE__*/_jsx(InfoIcon, {
+      className: styles.icon
+    })
+  });
 };
 PromotionalTextInfoIcon.defaultProps = {
   text: null
@@ -134,37 +138,40 @@ const CartItemProductPriceListPromotion = ({
   if (isPromo && promo) {
     const promotionalText = promo?.promotionalText;
     const name = promo?.name;
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames(styles.container, className)
-    }, name, /*#__PURE__*/React.createElement(PromotionalTextInfoIcon, {
-      text: promotionalText,
-      showText: showText
-    }));
+    return /*#__PURE__*/_jsxs("div", {
+      className: classNames(styles.container, className),
+      children: [name, /*#__PURE__*/_jsx(PromotionalTextInfoIcon, {
+        text: promotionalText,
+        showText: showText
+      })]
+    });
   }
   if (isCoupon && coupon) {
     const promotionalText = coupon?.promotionalText;
     const code = coupon?.coupon?.code;
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames(styles.container, className)
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.deleteIcon,
-      onClick: () => {
-        deleteCoupon(code);
-      },
-      onKeyDown: () => {
-        deleteCoupon(code);
-      },
-      role: "button",
-      tabIndex: 0
-    }, /*#__PURE__*/React.createElement(CrossIcon, null)), /*#__PURE__*/React.createElement(I18n.Text, {
-      string: "cart.coupon_label",
-      params: {
-        label: code
-      }
-    }), /*#__PURE__*/React.createElement(PromotionalTextInfoIcon, {
-      text: promotionalText,
-      showText: showText
-    }));
+    return /*#__PURE__*/_jsxs("div", {
+      className: classNames(styles.container, className),
+      children: [/*#__PURE__*/_jsx("span", {
+        className: styles.deleteIcon,
+        onClick: () => {
+          deleteCoupon(code);
+        },
+        onKeyDown: () => {
+          deleteCoupon(code);
+        },
+        role: "button",
+        tabIndex: 0,
+        children: /*#__PURE__*/_jsx(CrossIcon, {})
+      }), /*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.coupon_label",
+        params: {
+          label: code
+        }
+      }), /*#__PURE__*/_jsx(PromotionalTextInfoIcon, {
+        text: promotionalText,
+        showText: showText
+      })]
+    });
   }
   return null;
 };

package/cart/components/CartItem/CartItemProductProvider.js

@@ -8,6 +8,7 @@ import { CART_INPUT_AUTO_SCROLL_DELAY } from "../../cart.constants";
 import Context from "./CartItemProductProvider.context";
 import connect from "./CartItemProductProvider.connector";
 import CartItemProductProviderLegacy from "./CartItemProductProviderLegacy";
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -127,9 +128,12 @@ const CartItemProductProvider = ({
       }
     };
   }, [currency, currencyOverride, editMode, fulfillment, handleRemove, handleUpdate, id, isEditable, flags, messages, product, status, subStatus, quantity, orderedQuantity, toggleEditMode, unitPromoAmount, unitDiscountAmount, price, promoAmount, discountAmount, extendedPrice, appliedPromotions]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: value
-  }, /*#__PURE__*/React.createElement(CartItemProductProviderLegacy, null, children));
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: /*#__PURE__*/_jsx(CartItemProductProviderLegacy, {
+      children: children
+    })
+  });
 };
 CartItemProductProvider.defaultProps = {
   children: null,

package/cart/components/CartItem/CartItemProductProviderLegacy.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { CART_ITEM_TYPE_PRODUCT } from '@shopgate/engage/cart';
@@ -11,16 +12,19 @@ import { useCartItemProduct } from "./CartItem.hooks";
  * Should be removed when PWA 7 is deployed to all of the shops and affected extensions can be
  * updated without the need to support older PWA versions.
  */
-class LegacyProvider extends React.Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let LegacyProvider = /*#__PURE__*/function (_React$Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
-    this.state = {
+  function LegacyProvider(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    _this.state = {
       cartItemId: props.cartItemId,
       product: props.product
     };
+    return _this;
   }
 
   /**
@@ -28,7 +32,8 @@ class LegacyProvider extends React.Component {
    * @param {*} prevState  Prev state
    * @returns {Object|null}
    */
-  static getDerivedStateFromProps(nextProps, prevState) {
+  _inheritsLoose(LegacyProvider, _React$Component);
+  LegacyProvider.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
     if (nextProps.cartItemId !== prevState.cartItemId || nextProps.product !== prevState.product) {
       return {
         cartItemId: nextProps.cartItemId,
@@ -40,8 +45,9 @@ class LegacyProvider extends React.Component {
 
   /**
    * @returns {Object}
-   */
-  getChildContext() {
+   */;
+  var _proto = LegacyProvider.prototype;
+  _proto.getChildContext = function getChildContext() {
     return {
       type: CART_ITEM_TYPE_PRODUCT,
       cartItemId: this.state.cartItemId,
@@ -51,11 +57,12 @@ class LegacyProvider extends React.Component {
 
   /**
    * @returns {JSX.Element}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     return this.props.children;
-  }
-}
+  };
+  return LegacyProvider;
+}(React.Component);
 LegacyProvider.childContextTypes = {
   type: PropTypes.string,
   cartItemId: PropTypes.string,
@@ -74,9 +81,10 @@ const CartItemProductProviderLegacy = ({
     cartItemId,
     product
   } = useCartItemProduct();
-  return /*#__PURE__*/React.createElement(LegacyProvider, {
+  return /*#__PURE__*/_jsx(LegacyProvider, {
     cartItemId: cartItemId,
-    product: product
-  }, children);
+    product: product,
+    children: children
+  });
 };
 export default CartItemProductProviderLegacy;

package/cart/components/CartItem/CartItemProductTitle.js

@@ -8,6 +8,7 @@ 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
@@ -49,49 +50,60 @@ export function CartItemProductTitle({
   const handleChangeFulfillmentClick = useCallback(() => {
     invokeFulfillmentAction('changeFulfillment');
   }, [invokeFulfillmentAction]);
-  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Item, {
-    grow: 1
-  }, /*#__PURE__*/React.createElement(ConditionalWrapper, {
-    condition: isEditable && isLinkable,
-    wrapper: children => /*#__PURE__*/React.createElement(TextLink, {
-      href: `${ITEM_PATH}/${bin2hex(productId)}`
-    }, children)
-  }, /*#__PURE__*/React.createElement(ProductName, {
-    name: value,
-    className: title,
-    portalName: CART_ITEM_NAME,
-    portalProps: context,
-    testId: value,
-    ellipsis: false
-  }))), isEditable && /*#__PURE__*/React.createElement(Grid.Item, {
-    className: menuContainer,
-    shrink: 0
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CART_ITEM_CONTEXT_MENU,
-    portalProps: {
-      context,
-      handleRemove,
-      toggleEditMode
-    }
-  }, /*#__PURE__*/React.createElement(ContextMenu, {
-    classes: contextMenuClasses
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CART_ITEM_CONTEXT_MENU_ITEM_REMOVE,
-    portalProps: {
-      context,
-      handleRemove
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "cartItemContextMenuItemRemove"
-  }, /*#__PURE__*/React.createElement(ContextMenu.Item, {
-    onClick: handleRemove
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cart.remove"
-  })))), /*#__PURE__*/React.createElement(CartContextMenuItemChangeLocation, {
-    cartItem: context.cartItem,
-    onClick: handleChangeLocationClick
-  }), /*#__PURE__*/React.createElement(CartContextMenuItemChangeFulfillment, {
-    cartItem: context.cartItem,
-    onClick: handleChangeFulfillmentClick
-  })))));
+  return /*#__PURE__*/_jsxs(Grid, {
+    children: [/*#__PURE__*/_jsx(Grid.Item, {
+      grow: 1,
+      children: /*#__PURE__*/_jsx(ConditionalWrapper, {
+        condition: isEditable && isLinkable,
+        wrapper: children => /*#__PURE__*/_jsx(TextLink, {
+          href: `${ITEM_PATH}/${bin2hex(productId)}`,
+          children: children
+        }),
+        children: /*#__PURE__*/_jsx(ProductName, {
+          name: value,
+          className: title,
+          portalName: CART_ITEM_NAME,
+          portalProps: context,
+          testId: value,
+          ellipsis: false
+        })
+      })
+    }), isEditable && /*#__PURE__*/_jsx(Grid.Item, {
+      className: menuContainer,
+      shrink: 0,
+      children: /*#__PURE__*/_jsx(SurroundPortals, {
+        portalName: CART_ITEM_CONTEXT_MENU,
+        portalProps: {
+          context,
+          handleRemove,
+          toggleEditMode
+        },
+        children: /*#__PURE__*/_jsxs(ContextMenu, {
+          classes: contextMenuClasses,
+          children: [/*#__PURE__*/_jsx(SurroundPortals, {
+            portalName: CART_ITEM_CONTEXT_MENU_ITEM_REMOVE,
+            portalProps: {
+              context,
+              handleRemove
+            },
+            children: /*#__PURE__*/_jsx("div", {
+              "data-test-id": "cartItemContextMenuItemRemove",
+              children: /*#__PURE__*/_jsx(ContextMenu.Item, {
+                onClick: handleRemove,
+                children: /*#__PURE__*/_jsx(I18n.Text, {
+                  string: "cart.remove"
+                })
+              })
+            })
+          }), /*#__PURE__*/_jsx(CartContextMenuItemChangeLocation, {
+            cartItem: context.cartItem,
+            onClick: handleChangeLocationClick
+          }), /*#__PURE__*/_jsx(CartContextMenuItemChangeFulfillment, {
+            cartItem: context.cartItem,
+            onClick: handleChangeFulfillmentClick
+          })]
+        })
+      })
+    })]
+  });
 }

package/cart/components/CartItem/CartItemProvider.js

@@ -17,6 +17,7 @@ import connect from "./CartItemProvider.connector";
  * @param {number} props.enabledFulfillmentMethodsCount The count of enabled fulfillment methods.
  * @returns {JSX.Element} The rendered component.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CartItemProvider = ({
   cartItem,
   location,
@@ -36,7 +37,7 @@ const CartItemProvider = ({
     if (!actions.has(action)) {
       return;
     }
-    actions.get(action)(...args);
+    actions.get(action).apply(void 0, args);
   }, [actions]);
   const value = useMemo(() => ({
     registerFulfillmentAction,
@@ -50,9 +51,10 @@ const CartItemProvider = ({
     cartHasLineItemPromotions,
     merchantFulfillmentMethodsCount: enabledFulfillmentMethodsCount
   }), [cartItem, location, enabledFulfillmentMethodsCount, invokeFulfillmentAction, isEditable, isOrderDetails, isCheckoutConfirmation, cartIsDirectShipOnly, cartHasLineItemPromotions, registerFulfillmentAction]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: children
+  });
 };
 CartItemProvider.defaultProps = {
   children: null,