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

package/account/components/ProfileContact/ProfileContact.js

@@ -22,6 +22,7 @@ import { updateCustomerContact } from "../../actions/updateContact";
  * @param {Object} state State
  * @returns {Object}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const mapStateToProps = state => ({
   shopSettings: getShopSettings(state),
   userLocation: getPreferredLocationAddress(state),
@@ -174,24 +175,27 @@ const ProfileContact = ({
   }, [formState.setValues]);
   /* eslint-enable react-hooks/exhaustive-deps */
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: styles.root,
-    ref: formContainerRef
-  }, /*#__PURE__*/React.createElement(FormBuilder, {
-    name: "ProfileAddressForm",
-    className: styles.form,
-    config: formConfig,
-    defaults: contact,
-    validationErrors: validationErrors,
-    handleUpdate: handleUpdate
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.actions
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    className: styles.button,
-    rippleClassName: styles.ripple,
-    type: "primary",
-    onClick: formState.handleSubmit
-  }, i18n.text('account.profile.form.save'))));
+    ref: formContainerRef,
+    children: [/*#__PURE__*/_jsx(FormBuilder, {
+      name: "ProfileAddressForm",
+      className: styles.form,
+      config: formConfig,
+      defaults: contact,
+      validationErrors: validationErrors,
+      handleUpdate: handleUpdate
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.actions,
+      children: /*#__PURE__*/_jsx(RippleButton, {
+        className: styles.button,
+        rippleClassName: styles.ripple,
+        type: "primary",
+        onClick: formState.handleSubmit,
+        children: i18n.text('account.profile.form.save')
+      })
+    })]
+  });
 };
 ProfileContact.defaultProps = {
   customer: null,

package/account/helper/form.js

@@ -46,7 +46,7 @@ export const generateCustomerAttributesFields = ({
   userLocation,
   allowPleaseChoose = true
 }) => ({
-  ...Object.assign({}, ...sortBy(customerAttributes, ['sequenceId']).map(attribute => ({
+  ...Object.assign.apply(Object, [{}].concat(sortBy(customerAttributes, ['sequenceId']).map(attribute => ({
     [`attribute_${attribute.code}`]: {
       type: mapCustomerAttributeType(attribute),
       label: `${attribute.name} ${attribute.isRequired ? '*' : ''}`,
@@ -60,9 +60,9 @@ export const generateCustomerAttributesFields = ({
             '': i18n.text('common.please_choose')
           } : {}),
           // Create regular options.
-          ...Object.assign({}, ...sortBy(attribute.values, ['sequenceId']).map(option => ({
+          ...Object.assign.apply(Object, [{}].concat(sortBy(attribute.values, ['sequenceId']).map(option => ({
             [option.code]: option.name
-          })))
+          }))))
         }
       } : {}),
       ...(attribute.type === 'callingNumber' ? {
@@ -73,7 +73,7 @@ export const generateCustomerAttributesFields = ({
         }
       } : null)
     }
-  })))
+  }))))
 });
 
 /**
@@ -82,7 +82,7 @@ export const generateCustomerAttributesFields = ({
  * @returns {Object}
  */
 export const generateFormConstraints = customerAttributes => ({
-  ...Object.assign({}, ...customerAttributes.map(attribute => {
+  ...Object.assign.apply(Object, [{}].concat(customerAttributes.map(attribute => {
     const constraint = {};
     if (attribute.isRequired || attribute.type === 'date') {
       constraint[`attribute_${attribute.code}`] = {};
@@ -100,7 +100,7 @@ export const generateFormConstraints = customerAttributes => ({
       };
     }
     return constraint;
-  }))
+  })))
 });
 
 /**
@@ -166,14 +166,14 @@ attribute.value?.[0]?.code?.length);
  * @param {Object} customerAttributes Customer attributes.
  * @returns {Object}
  */
-export const extractDefaultValues = customerAttributes => Object.assign({}, ...customerAttributes.map(attribute => {
+export const extractDefaultValues = customerAttributes => Object.assign.apply(Object, [{}].concat(customerAttributes.map(attribute => {
   let {
     value
   } = attribute;
   if (value) {
     if (Array.isArray(value) && value[0] && typeof value[0] === 'object') {
       // Multi select L:95
-      value = value.reduce((acc, val) => [...acc, val.code], []);
+      value = value.reduce((acc, val) => [].concat(acc, [val.code]), []);
     } else if (typeof value === 'object') {
       // Single select L:100
       value = value.code;
@@ -184,7 +184,7 @@ export const extractDefaultValues = customerAttributes => Object.assign({}, ...c
   return {
     [`attribute_${attribute.code}`]: value
   };
-}));
+})));
 
 /**
  * Converts pipeline validation errors

package/back-in-stock/components/BackInStockButton/index.js

@@ -7,6 +7,7 @@ import { BACK_IN_STOCK_PATTERN } from '@shopgate/engage/back-in-stock/constants'
 import { i18n } from '@shopgate/engage/core';
 import styles from "./style";
 import connect from "./connector";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   colors
 } = themeConfig;
@@ -58,46 +59,52 @@ const BackInStockButton = ({
     }
   }, [addBackInStockSubscription, grantPushPermissions, productId, stopPropagation]);
   if (subscription?.status === 'active') {
-    return /*#__PURE__*/React.createElement(Link, {
+    return /*#__PURE__*/_jsxs(Link, {
       href: BACK_IN_STOCK_PATTERN,
       disabled: !isLinkToBackInStockEnabled,
       className: classNames(styles.backInStockMessageContainer, {
         [styles.rightAligned]: alignRight
       }),
-      tag: "span"
-    }, /*#__PURE__*/React.createElement(CheckedIcon, {
-      color: colors.success,
-      className: alignRight ? styles.icon : classNames(styles.iconCentered, styles.icon)
-    }), /*#__PURE__*/React.createElement("span", {
-      className: styles.backInStockMessage
-    }, i18n.text('back_in_stock.we_will_remind_you')));
+      tag: "span",
+      children: [/*#__PURE__*/_jsx(CheckedIcon, {
+        color: colors.success,
+        className: alignRight ? styles.icon : classNames(styles.iconCentered, styles.icon)
+      }), /*#__PURE__*/_jsx("span", {
+        className: styles.backInStockMessage,
+        children: i18n.text('back_in_stock.we_will_remind_you')
+      })]
+    });
   }
   if (showAsButton) {
-    return /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/_jsx(Button, {
       type: "primary",
       tabIndex: 0,
       onClick: handleClick,
-      className: styles.button
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.buttonText
-    }, i18n.text('back_in_stock.get_notified')));
+      className: styles.button,
+      children: /*#__PURE__*/_jsx("span", {
+        className: styles.buttonText,
+        children: i18n.text('back_in_stock.get_notified')
+      })
+    });
   }
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events
-    React.createElement("a", {
+    _jsxs("a", {
       role: "button",
       tabIndex: 0,
       onClick: handleClick,
       className: classNames(styles.button, {
         [styles.rightAligned]: alignRight
-      })
-    }, /*#__PURE__*/React.createElement(NotificationIcon, {
-      color: colors.primary,
-      className: styles.icon
-    }), /*#__PURE__*/React.createElement("span", {
-      className: styles.buttonText
-    }, i18n.text('back_in_stock.get_notified')))
+      }),
+      children: [/*#__PURE__*/_jsx(NotificationIcon, {
+        color: colors.primary,
+        className: styles.icon
+      }), /*#__PURE__*/_jsx("span", {
+        className: styles.buttonText,
+        children: i18n.text('back_in_stock.get_notified')
+      })]
+    })
   );
 };
 BackInStockButton.defaultProps = {

package/back-in-stock/components/CharacteristicsButton/index.js

@@ -12,6 +12,7 @@ import connect from "./connector";
  * @param {Object} props.subscription The subscription
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CharacteristicsButton = ({
   isBackInStockEnabled,
   subscription,
@@ -21,7 +22,7 @@ const CharacteristicsButton = ({
   const featureIsNotEnabled = !isBackInStockEnabled;
   const productIsNotAvailable = variant?.stock?.quantity === 0 && variant?.stock?.ignoreQuantity === false;
   if (productIsNotAVariant || featureIsNotEnabled || !productIsNotAvailable) return null;
-  return /*#__PURE__*/React.createElement(BackInStockButton, {
+  return /*#__PURE__*/_jsx(BackInStockButton, {
     subscription: subscription,
     stopPropagation: true,
     productId: variant.id,

package/back-in-stock/components/ProductInfoBackInStockButton/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { PRODUCT_BACK_IN_STOCK } from '@shopgate/engage/back-in-stock/constants';
@@ -16,6 +16,7 @@ import connect from "./connector";
  * @param {Object} props.subscription The subscription
  * @return {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ProductInfoBackInStockButton = ({
   productId,
   variantId,
@@ -26,17 +27,18 @@ const ProductInfoBackInStockButton = ({
   const productIsAVariant = product?.type !== 'parent' && product?.type !== null;
   const productIsNotAvailable = product?.stock?.quantity === 0 && product?.stock?.ignoreQuantity === false;
   const showBackInStockButton = productIsAVariant && productIsNotAvailable && isBackInStockEnabled;
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_BACK_IN_STOCK,
     portalProps: {
       showBackInStockButton
-    }
-  }, showBackInStockButton && /*#__PURE__*/React.createElement(BackInStockButton, {
-    showAsButton: true,
-    subscription: subscription,
-    isLinkToBackInStockEnabled: true,
-    productId: variantId ?? productId
-  })));
+    },
+    children: showBackInStockButton && /*#__PURE__*/_jsx(BackInStockButton, {
+      showAsButton: true,
+      subscription: subscription,
+      isLinkToBackInStockEnabled: true,
+      productId: variantId ?? productId
+    })
+  });
 };
 ProductInfoBackInStockButton.defaultProps = {
   subscription: null,

package/back-in-stock/components/Subscriptions/components/List/index.js

@@ -4,6 +4,7 @@ import { LoadingIndicator, Accordion, Card } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core';
 import { useBackInStockSubscriptions } from '@shopgate/engage/back-in-stock/hooks';
 import Subscription from "../Subscription";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: css({
     margin: '8px 8px 10px'
@@ -30,29 +31,34 @@ const List = () => {
     isInitial,
     groupedSubscriptions
   } = useBackInStockSubscriptions();
-  const renderLabel = useCallback(groupKey => /*#__PURE__*/React.createElement("div", null, i18n.text(`back_in_stock.list_states.${groupKey}`)), []);
-  return /*#__PURE__*/React.createElement("div", null, Object.entries(groupedSubscriptions).map(([groupKey, filteredSubscriptions]) => /*#__PURE__*/React.createElement(Card, {
-    className: styles.root,
-    key: groupKey
-  }, /*#__PURE__*/React.createElement(Accordion, {
-    className: "",
-    openWithChevron: true,
-    renderLabel: () => renderLabel(groupKey),
-    chevronPosition: "left",
-    startOpened: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.divider
-  }), isInitial ? /*#__PURE__*/React.createElement(LoadingIndicator, null) : null, !isInitial && filteredSubscriptions.length === 0 ? /*#__PURE__*/React.createElement("div", {
-    className: styles.emptyText
-  }, i18n.text('back_in_stock.empty_list_reminder')) : null, !isInitial && filteredSubscriptions.map((subscription, index) => /*#__PURE__*/React.createElement("div", {
-    key: subscription.subscriptionCode
-  }, /*#__PURE__*/React.createElement(Subscription, {
-    subscription: subscription,
-    productId: subscription.productCode,
-    key: subscription.subscriptionCode,
-    group: groupKey
-  }), index === filteredSubscriptions.length - 1 ? null : /*#__PURE__*/React.createElement("div", {
-    className: styles.divider
-  })))))));
+  const renderLabel = useCallback(groupKey => /*#__PURE__*/_jsx("div", {
+    children: i18n.text(`back_in_stock.list_states.${groupKey}`)
+  }), []);
+  return /*#__PURE__*/_jsx("div", {
+    children: Object.entries(groupedSubscriptions).map(([groupKey, filteredSubscriptions]) => /*#__PURE__*/_jsx(Card, {
+      className: styles.root,
+      children: /*#__PURE__*/_jsxs(Accordion, {
+        className: "",
+        openWithChevron: true,
+        renderLabel: () => renderLabel(groupKey),
+        chevronPosition: "left",
+        startOpened: true,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: styles.divider
+        }), isInitial ? /*#__PURE__*/_jsx(LoadingIndicator, {}) : null, !isInitial && filteredSubscriptions.length === 0 ? /*#__PURE__*/_jsx("div", {
+          className: styles.emptyText,
+          children: i18n.text('back_in_stock.empty_list_reminder')
+        }) : null, !isInitial && filteredSubscriptions.map((subscription, index) => /*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx(Subscription, {
+            subscription: subscription,
+            productId: subscription.productCode,
+            group: groupKey
+          }, subscription.subscriptionCode), index === filteredSubscriptions.length - 1 ? null : /*#__PURE__*/_jsx("div", {
+            className: styles.divider
+          })]
+        }, subscription.subscriptionCode))]
+      })
+    }, groupKey))
+  });
 };
 export default List;

package/back-in-stock/components/Subscriptions/components/Subscription/index.js

@@ -8,6 +8,7 @@ import { themeConfig } from '@shopgate/engage';
 import { BackInStockButton } from '@shopgate/engage/back-in-stock/components';
 import { getThemeSettings, i18n } from '@shopgate/engage/core';
 import { useBackInStockSubscriptions } from '@shopgate/engage/back-in-stock/hooks';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -99,69 +100,79 @@ const Subscription = ({
   const specialPrice = product.price?.unitPriceStriked;
   const hasStrikePrice = product.price?.discount > 0;
   const productLink = getProductRoute(product.id);
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement(Link, {
-    className: styles.imageContainer,
-    component: "div",
-    href: productLink,
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(ProductImage, {
-    src: product.featuredImageBaseUrl,
-    resolutions: gridResolutions
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles.infoContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.infoContainerRow
-  }, /*#__PURE__*/React.createElement(Link, {
-    href: productLink,
-    tag: "span",
-    className: styles.titleContainer
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles.title
-    // eslint-disable-next-line react/no-danger
-    ,
-    dangerouslySetInnerHTML: {
-      __html: `${product.name}`
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles.removeContainer
-  }, /*#__PURE__*/React.createElement("button", {
-    onClick: () => removeBackInStockSubscription({
-      subscriptionCode
-    }),
-    type: "button",
-    "aria-label": i18n.text('favorites.remove')
-  }, /*#__PURE__*/React.createElement(Ripple, {
-    className: styles.ripple
-  }, /*#__PURE__*/React.createElement(CrossIcon, null))))), /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.baseContainerRow)
-  }, product?.characteristics?.map(({
-    label,
-    value
-  }) => /*#__PURE__*/React.createElement("div", {
-    key: label + value,
-    className: styles.characteristicText
-  }, label, ': ', value)), /*#__PURE__*/React.createElement(Availability, {
-    text: product?.availability?.text,
-    state: product?.availability?.state,
-    showWhenAvailable: false,
-    className: styles.availabilityText
-  }), subscription?.status === 'active' && /*#__PURE__*/React.createElement(BackInStockButton, {
-    subscription: subscription,
-    productId: productCode
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles.priceContainerRow
-  }, hasStrikePrice ? /*#__PURE__*/React.createElement(PriceStriked, {
-    value: specialPrice,
-    currency: currency
-  }) : null, /*#__PURE__*/React.createElement(Price, {
-    currency: currency,
-    discounted: hasStrikePrice,
-    unitPrice: defaultPrice
-  }), !!product.price.info && /*#__PURE__*/React.createElement(PriceInfo, {
-    text: product.price.info,
-    className: styles.priceInfo
-  }))));
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.root,
+    children: [/*#__PURE__*/_jsx(Link, {
+      className: styles.imageContainer,
+      component: "div",
+      href: productLink,
+      "aria-hidden": true,
+      children: /*#__PURE__*/_jsx(ProductImage, {
+        src: product.featuredImageBaseUrl,
+        resolutions: gridResolutions
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.infoContainer,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: styles.infoContainerRow,
+        children: [/*#__PURE__*/_jsx(Link, {
+          href: productLink,
+          tag: "span",
+          className: styles.titleContainer,
+          children: /*#__PURE__*/_jsx("span", {
+            className: styles.title
+            // eslint-disable-next-line react/no-danger
+            ,
+            dangerouslySetInnerHTML: {
+              __html: `${product.name}`
+            }
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: styles.removeContainer,
+          children: /*#__PURE__*/_jsx("button", {
+            onClick: () => removeBackInStockSubscription({
+              subscriptionCode
+            }),
+            type: "button",
+            "aria-label": i18n.text('favorites.remove'),
+            children: /*#__PURE__*/_jsx(Ripple, {
+              className: styles.ripple,
+              children: /*#__PURE__*/_jsx(CrossIcon, {})
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: classNames(styles.baseContainerRow),
+        children: [product?.characteristics?.map(({
+          label,
+          value
+        }) => /*#__PURE__*/_jsxs("div", {
+          className: styles.characteristicText,
+          children: [label, ': ', value]
+        }, label + value)), /*#__PURE__*/_jsx(Availability, {
+          text: product?.availability?.text,
+          state: product?.availability?.state,
+          showWhenAvailable: false,
+          className: styles.availabilityText
+        }), subscription?.status === 'active' && /*#__PURE__*/_jsx(BackInStockButton, {
+          subscription: subscription,
+          productId: productCode
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: styles.priceContainerRow,
+        children: [hasStrikePrice ? /*#__PURE__*/_jsx(PriceStriked, {
+          value: specialPrice,
+          currency: currency
+        }) : null, /*#__PURE__*/_jsx(Price, {
+          currency: currency,
+          discounted: hasStrikePrice,
+          unitPrice: defaultPrice
+        }), !!product.price.info && /*#__PURE__*/_jsx(PriceInfo, {
+          text: product.price.info,
+          className: styles.priceInfo
+        })]
+      })]
+    })]
+  });
 };
 export default Subscription;

package/back-in-stock/components/Subscriptions/index.js

@@ -6,5 +6,8 @@ import List from "./components/List";
  * The Back in Stock Subscriptions component.
  * @returns {JSX}
  */
-const Subscriptions = () => /*#__PURE__*/React.createElement(BackInStockSubscriptionsProvider, null, /*#__PURE__*/React.createElement(List, null));
+import { jsx as _jsx } from "react/jsx-runtime";
+const Subscriptions = () => /*#__PURE__*/_jsx(BackInStockSubscriptionsProvider, {
+  children: /*#__PURE__*/_jsx(List, {})
+});
 export default Subscriptions;

package/back-in-stock/providers/BackInStockSubscriptionsProvider.js

@@ -8,6 +8,7 @@ import connect from "./BackInStockSubscriptionsProvider.connector";
  * Back in Stock Provider
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const BackInStockSubscriptionsProvider = ({
   subscriptions,
   children,
@@ -38,9 +39,10 @@ const BackInStockSubscriptionsProvider = ({
     isFetching,
     isInitial: isInitial && requestsPossible
   }), [addBackInStockSubscription, groupedSubscriptions, isFetching, isInitial, removeBackInStockSubscription, subscriptions, requestsPossible]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: children
+  });
 };
 BackInStockSubscriptionsProvider.defaultProps = {
   children: null,

package/cart/cart.helpers.js

@@ -9,14 +9,14 @@ import { ROPIS, BOPIS } from "../locations";
  */
 export function sortCartItems(cartItems) {
   const grouped = groupBy(cartItems, 'type');
-  const sorted = Object.keys(grouped).reduce((acc, key) => [...acc, ...grouped[key].sort((a, b) => Math.sign(!!b.fulfillment - !!a.fulfillment))], []);
+  const sorted = Object.keys(grouped).reduce((acc, key) => [].concat(acc, grouped[key].sort((a, b) => Math.sign(!!b.fulfillment - !!a.fulfillment))), []);
   const ropeItem = sorted.filter(item => item.fulfillment && [ROPIS, BOPIS].includes(item.fulfillment.method)).sort((a, b) => {
     if (a.fulfillment.location.code < b.fulfillment.location.code) return 1;
     if (a.fulfillment.location.code > b.fulfillment.location.code) return -1;
     return 0;
   });
   const directItem = sorted.filter(item => !item.fulfillment || ![ROPIS, BOPIS].includes(item.fulfillment.method));
-  let merged = [...ropeItem, ...directItem];
+  let merged = [].concat(ropeItem, directItem);
 
   // Group splitted line items - try to keep the original order intact as much as possible
   const groupedByBaseLineItemId = groupBy(merged, e => e.baseLineItemId || e.id);
@@ -25,7 +25,7 @@ export function sortCartItems(cartItems) {
   }) => {
     const group = groupedByBaseLineItemId?.[id];
     if (group) {
-      return [...acc, ...group];
+      return [].concat(acc, group);
     }
     return acc;
   }, []);

package/cart/components/CartHeaderWide/CartHeaderWide.js

@@ -5,7 +5,9 @@ import { header } from "./CartHeaderWide.style";
 /**
  * @return {JSX}
  */
-const CartHeaderWide = () => /*#__PURE__*/React.createElement("div", {
-  className: header
-}, i18n.text('navigation.cart'));
+import { jsx as _jsx } from "react/jsx-runtime";
+const CartHeaderWide = () => /*#__PURE__*/_jsx("div", {
+  className: header,
+  children: i18n.text('navigation.cart')
+});
 export default CartHeaderWide;

package/cart/components/CartItem/CartItem.js

@@ -16,6 +16,7 @@ import CartItemProductProvider from "./CartItemProductProvider";
  * @property {string|null} [props.currencyOverride] The currency to use instead of the default one.
  * @return {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function CartItem({
   item,
   onFocus,
@@ -30,28 +31,31 @@ function CartItem({
   };
   const isProduct = item.type === CART_ITEM_TYPE_PRODUCT;
   if (isProduct) {
-    return /*#__PURE__*/React.createElement(ProductListEntryProvider, {
-      productId: item?.product?.id
-    }, /*#__PURE__*/React.createElement(SurroundPortals, {
-      portalName: CART_ITEM,
-      portalProps: props
-    }, /*#__PURE__*/React.createElement(CartItemProductProvider, {
-      cartItem: item,
-      onFocus: onFocus,
-      isEditable: editable,
-      currencyOverride: currencyOverride
-    }, /*#__PURE__*/React.createElement(CartItemProduct, null))));
+    return /*#__PURE__*/_jsx(ProductListEntryProvider, {
+      productId: item?.product?.id,
+      children: /*#__PURE__*/_jsx(SurroundPortals, {
+        portalName: CART_ITEM,
+        portalProps: props,
+        children: /*#__PURE__*/_jsx(CartItemProductProvider, {
+          cartItem: item,
+          onFocus: onFocus,
+          isEditable: editable,
+          currencyOverride: currencyOverride,
+          children: /*#__PURE__*/_jsx(CartItemProduct, {})
+        })
+      })
+    });
   }
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: CART_ITEM,
-    portalProps: props
-  }, /*#__PURE__*/React.createElement(CartItemCoupon, {
-    id: item.id,
-    key: item.id,
-    coupon: item.coupon,
-    messages: item.messages,
-    editable: editable
-  }));
+    portalProps: props,
+    children: /*#__PURE__*/_jsx(CartItemCoupon, {
+      id: item.id,
+      coupon: item.coupon,
+      messages: item.messages,
+      editable: editable
+    }, item.id)
+  });
 }
 CartItem.defaultProps = {
   editable: true,