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

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',
@@ -54,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;
@@ -87,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
@@ -136,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,

package/cart/components/CartItem/CartItemQuantityPicker.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core';
@@ -18,40 +19,40 @@ import { inputStyle } from "./CartItemQuantityPicker.style";
 /**
  * The Quantity Picker component.
  */
-export class CartItemQuantityPicker extends React.Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+export let CartItemQuantityPicker = /*#__PURE__*/function (_React$Component) {
   /**
    * Constructor.
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
-    this.regex = void 0;
-    this.input = void 0;
-    this.defaultQuantity = 1;
+  function CartItemQuantityPicker(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    _this.input = void 0;
     /**
      * Handles the input click event.
      * @param {Event} event The click event.
      */
-    this.handleInputClick = event => {
+    _this.handleInputClick = event => {
       event.stopPropagation();
       event.preventDefault();
-      if (this.props.onToggleEditMode) {
-        this.props.onToggleEditMode(true);
+      if (_this.props.onToggleEditMode) {
+        _this.props.onToggleEditMode(true);
       }
     };
-    this.handleInputFocus = () => {
-      if (this.props.onToggleEditMode) {
-        this.props.onToggleEditMode(true);
+    _this.handleInputFocus = () => {
+      if (_this.props.onToggleEditMode) {
+        _this.props.onToggleEditMode(true);
       }
     };
     /**
      * Handles the form submission event.
      * @param {Event} event The submit event.
      */
-    this.handleSubmitForm = event => {
+    _this.handleSubmitForm = event => {
       event.preventDefault();
-      if (this.input.current) {
-        this.input.current.blur();
+      if (_this.input.current) {
+        _this.input.current.blur();
       }
     };
     /**
@@ -59,27 +60,29 @@ export class CartItemQuantityPicker extends React.Component {
      * @param {Event} event The blur event.
      * @param {number} newQuantity The new quantity value.
      */
-    this.handleInputBlur = (event, newQuantity) => {
+    _this.handleInputBlur = (event, newQuantity) => {
       const {
         onChange
-      } = this.props;
-      if (this.props.onToggleEditMode) {
-        this.props.onToggleEditMode(false);
+      } = _this.props;
+      if (_this.props.onToggleEditMode) {
+        _this.props.onToggleEditMode(false);
       }
-      if (this.props.quantity !== newQuantity) {
+      if (_this.props.quantity !== newQuantity) {
         if (onChange) {
           onChange(newQuantity);
         }
       }
     };
-    this.regex = /^([0-9.,]+)$/;
-    this.input = /*#__PURE__*/React.createRef();
+    _this.input = /*#__PURE__*/React.createRef();
+    return _this;
   }
 
   /**
    * Called after mount. Focuses the input if the edit mode is active.
    */
-  componentDidMount() {
+  _inheritsLoose(CartItemQuantityPicker, _React$Component);
+  var _proto = CartItemQuantityPicker.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     if (this.props.editMode && this.input.current) {
       this.input.current.focus();
     }
@@ -95,8 +98,8 @@ export class CartItemQuantityPicker extends React.Component {
   /**
    * The componentWillReceiveProps lifecycle hook. I will bring the input into the correct state.
    * @param {Object} nextProps The next set of props.
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+   */;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.input.current) {
       if (nextProps.editMode) {
         this.input.current.focus();
@@ -104,46 +107,37 @@ export class CartItemQuantityPicker extends React.Component {
         this.input.current.blur();
       }
     }
-  }
-  /**
-   * Returns the initial quantity based on the props.
-   * If the props are set to 0 or lower, it will fall back to 1.
-   * @return {number}
-   */
-  get initialQuantity() {
-    if (this.props.quantity && (this.props.quantity === 0 || this.props.quantity < this.defaultQuantity)) {
-      return this.defaultQuantity;
-    }
-    return this.props.quantity || this.defaultQuantity;
-  }
+  };
   /**
    * Renders the component.
    * @return {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       unit,
       hasCatchWeight
     } = this.props;
     const hasCustomUnit = unit && hasCatchWeight || false;
-    return /*#__PURE__*/React.createElement("form", {
+    return /*#__PURE__*/_jsx("form", {
       onSubmit: this.handleSubmitForm,
-      className: "theme__cart__product__quantity-picker"
-    }, /*#__PURE__*/React.createElement(QuantityInput, {
-      ref: this.input,
-      className: inputStyle.toString(),
-      value: this.props.quantity,
-      onClick: this.handleInputClick,
-      onFocus: this.handleInputFocus,
-      onBlur: this.handleInputBlur,
-      unit: hasCustomUnit ? unit : null,
-      maxDecimals: hasCustomUnit ? 2 : 0,
-      "data-test-id": "quantityPicker",
-      disabled: this.props.disabled,
-      "aria-label": i18n.text('product.quantity')
-    }));
-  }
-}
+      className: "theme__cart__product__quantity-picker",
+      children: /*#__PURE__*/_jsx(QuantityInput, {
+        ref: this.input,
+        className: inputStyle.toString(),
+        value: this.props.quantity,
+        onClick: this.handleInputClick,
+        onFocus: this.handleInputFocus,
+        onBlur: this.handleInputBlur,
+        unit: hasCustomUnit ? unit : null,
+        maxDecimals: hasCustomUnit ? 2 : 0,
+        "data-test-id": "quantityPicker",
+        disabled: this.props.disabled,
+        "aria-label": i18n.text('product.quantity')
+      })
+    });
+  };
+  return CartItemQuantityPicker;
+}(React.Component);
 /**
  * @type {Props}
  */

package/cart/components/CartItem/CartItemSubstitution.js

@@ -14,6 +14,7 @@ import { root } from "./CartItemSubstitution.style";
  * @param {boolean} props.editable Whether the substitution option is editable.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CartItemSubstitution = ({
   setSubstitutionAllowed,
   editable
@@ -28,14 +29,16 @@ const CartItemSubstitution = ({
   if (![ROPIS, BOPIS].includes(fulfillment?.method || [])) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(SubstitutionWrapper, null, /*#__PURE__*/React.createElement(Substitution, {
-    className: root,
-    id: `substitution-${id}`,
-    label: i18n.text('cart.allow_substitution'),
-    checked: substitutionAllowed,
-    onChange: () => setSubstitutionAllowed(id, !substitutionAllowed),
-    disabled: !editable
-  }));
+  return /*#__PURE__*/_jsx(SubstitutionWrapper, {
+    children: /*#__PURE__*/_jsx(Substitution, {
+      className: root,
+      id: `substitution-${id}`,
+      label: i18n.text('cart.allow_substitution'),
+      checked: substitutionAllowed,
+      onChange: () => setSubstitutionAllowed(id, !substitutionAllowed),
+      disabled: !editable
+    })
+  });
 };
 CartItemSubstitution.defaultProps = {
   editable: false