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

package/category/components/CategoryList/index.js

@@ -23,6 +23,7 @@ import styles from "./style";
  * @param {boolean} props.showLeftSideImages Whether to show category images on the left side
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CategoryList = ({
   categories,
   parentCategory,
@@ -35,65 +36,67 @@ const CategoryList = ({
     if (prerender === 0) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(SheetList, {
-      className: classNames(styles.sheet, 'engage__category__category-list')
-    }, Array(Math.min(prerender, 8)).fill('').map((val, index) => {
-      const key = `placeholder-${index}`;
-      return /*#__PURE__*/React.createElement(Placeholder, {
-        height: 20,
-        key: key,
-        left: 0,
-        top: 18,
-        width: 220
-      });
-    }));
+    return /*#__PURE__*/_jsx(SheetList, {
+      className: classNames(styles.sheet, 'engage__category__category-list'),
+      children: Array(Math.min(prerender, 8)).fill('').map((val, index) => {
+        const key = `placeholder-${index}`;
+        return /*#__PURE__*/_jsx(Placeholder, {
+          height: 20,
+          left: 0,
+          top: 18,
+          width: 220
+        }, key);
+      })
+    });
   }
   const filters = getShowAllProductsFilters(parentCategory);
-  return /*#__PURE__*/React.createElement(SheetList, {
-    className: classNames(styles.sheet, 'engage__category__category-list')
-  }, showAllProducts ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.showAllProducts, 'engage__category__category-show-all-products')
-  }, /*#__PURE__*/React.createElement(Portal, {
-    key: parentCategory.id,
-    name: "category.show-all-products",
-    props: {
-      categoryId: parentCategory.id
-    }
-  }, /*#__PURE__*/React.createElement(SheetList.Item, {
-    link: `${CATEGORY_PATH}/${bin2hex(parentCategory.id)}/all`,
-    title: i18n.text('category.showAllProducts.label'),
-    linkState: {
-      categoryName: parentCategory.name,
-      categoryId: parentCategory.id,
-      filters
-    },
-    testId: "showAllProducts",
-    linkComponent: TextLink
-  }))) : null, categories.map(category => /*#__PURE__*/React.createElement(Portal, {
-    key: category.id,
-    name: CATEGORY_ITEM,
-    props: {
-      categoryId: category.id
-    }
-  }, /*#__PURE__*/React.createElement(SheetList.Item, {
-    link: `${CATEGORY_PATH}/${bin2hex(category.id)}`,
-    title: category.name,
-    description: category.description,
-    linkState: {
-      categoryId: category.id,
-      title: category.name
-    },
-    testId: category.name,
-    rightComponent: showImages ? /*#__PURE__*/React.createElement(CategoryImage, {
-      className: styles.image,
-      src: category.imageUrl
-    }) : null,
-    leftComponent: showLeftSideImages ? /*#__PURE__*/React.createElement(CategoryImage, {
-      className: styles.image,
-      src: category.imageUrl
-    }) : null,
-    linkComponent: TextLink
-  }))));
+  return /*#__PURE__*/_jsxs(SheetList, {
+    className: classNames(styles.sheet, 'engage__category__category-list'),
+    children: [showAllProducts ? /*#__PURE__*/_jsx("div", {
+      className: classNames(styles.showAllProducts, 'engage__category__category-show-all-products'),
+      children: /*#__PURE__*/_jsx(Portal, {
+        name: "category.show-all-products",
+        props: {
+          categoryId: parentCategory.id
+        },
+        children: /*#__PURE__*/_jsx(SheetList.Item, {
+          link: `${CATEGORY_PATH}/${bin2hex(parentCategory.id)}/all`,
+          title: i18n.text('category.showAllProducts.label'),
+          linkState: {
+            categoryName: parentCategory.name,
+            categoryId: parentCategory.id,
+            filters
+          },
+          testId: "showAllProducts",
+          linkComponent: TextLink
+        })
+      }, parentCategory.id)
+    }) : null, categories.map(category => /*#__PURE__*/_jsx(Portal, {
+      name: CATEGORY_ITEM,
+      props: {
+        categoryId: category.id
+      },
+      children: /*#__PURE__*/_jsx(SheetList.Item, {
+        link: `${CATEGORY_PATH}/${bin2hex(category.id)}`,
+        title: category.name,
+        description: category.description,
+        linkState: {
+          categoryId: category.id,
+          title: category.name
+        },
+        testId: category.name,
+        rightComponent: showImages ? /*#__PURE__*/_jsx(CategoryImage, {
+          className: styles.image,
+          src: category.imageUrl
+        }) : null,
+        leftComponent: showLeftSideImages ? /*#__PURE__*/_jsx(CategoryImage, {
+          className: styles.image,
+          src: category.imageUrl
+        }) : null,
+        linkComponent: TextLink
+      })
+    }, category.id))]
+  });
 };
 CategoryList.defaultProps = {
   categories: null,

package/checkout/components/AddressBook/AddressBook.js

@@ -8,5 +8,10 @@ import AddressList from "./AddressList";
  * @param {Object} props The component props
  * @returns {JSX}
  */
-const AddressBook = () => /*#__PURE__*/React.createElement(AddressBookProvider, null, /*#__PURE__*/React.createElement(ProfileProvider, null, /*#__PURE__*/React.createElement(AddressList, null)));
+import { jsx as _jsx } from "react/jsx-runtime";
+const AddressBook = () => /*#__PURE__*/_jsx(AddressBookProvider, {
+  children: /*#__PURE__*/_jsx(ProfileProvider, {
+    children: /*#__PURE__*/_jsx(AddressList, {})
+  })
+});
 export default AddressBook;

package/checkout/components/AddressBook/AddressList.js

@@ -17,6 +17,7 @@ import { ADDRESS_TYPE_SHIPPING, ADDRESS_TYPE_BILLING, CHECKOUT_ADDRESS_BOOK_CONT
  * @param {Object} state State.
  * @returns {Object}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const mapStateToProps = state => ({
   shippingAddress: getCheckoutShippingAddress(state),
   billingAddress: getCheckoutBillingAddress(state)
@@ -115,30 +116,36 @@ const AddressList = ({
     }
     return null;
   }, [billingAddress, shippingAddress, type]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    webOnly: true,
-    breakpoint: ">xs"
-  }, /*#__PURE__*/React.createElement(ResponsiveBackButton, null), /*#__PURE__*/React.createElement("h1", {
-    className: styles.headline
-  }, title)), /*#__PURE__*/React.createElement("div", {
-    className: styles.container
-  }, contacts && contacts.map(contact => /*#__PURE__*/React.createElement(AddressCard, {
-    key: contact.id,
-    contact: contact,
-    selected: contact.id === selectedContactId,
-    selectContact: () => updateOrderWithContact(contact.id),
-    deleteContact: () => deleteContact(contact.id),
-    editContact: () => editContact(contact)
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: styles.actions
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    className: styles.button,
-    rippleClassName: styles.ripple,
-    type: "primary",
-    onClick: () => push({
-      pathname: `${CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN}`.replace(':type', type)
-    })
-  }, i18n.text('account.profile.address_book.add'))));
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs(ResponsiveContainer, {
+      webOnly: true,
+      breakpoint: ">xs",
+      children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsx("h1", {
+        className: styles.headline,
+        children: title
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.container,
+      children: contacts && contacts.map(contact => /*#__PURE__*/_jsx(AddressCard, {
+        contact: contact,
+        selected: contact.id === selectedContactId,
+        selectContact: () => updateOrderWithContact(contact.id),
+        deleteContact: () => deleteContact(contact.id),
+        editContact: () => editContact(contact)
+      }, contact.id))
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.actions,
+      children: /*#__PURE__*/_jsx(RippleButton, {
+        className: styles.button,
+        rippleClassName: styles.ripple,
+        type: "primary",
+        onClick: () => push({
+          pathname: `${CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN}`.replace(':type', type)
+        }),
+        children: i18n.text('account.profile.address_book.add')
+      })
+    })]
+  });
 };
 AddressList.defaultProps = {
   shippingAddress: null,

package/checkout/components/AddressBookContact/AddressBookContact.js

@@ -6,6 +6,7 @@ import { ResponsiveBackButton } from "../ResponsiveBackButton";
 import ProfileContact from "../../../account/components/ProfileContact";
 import AddressBookProvider from "../../providers/AddressBookProvider";
 import { ADDRESS_TYPE_BILLING } from "../../constants";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const styles = {
   headline: css({
     padding: 16,
@@ -34,11 +35,17 @@ const AddressBookContact = () => {
     const mode = contact ? 'edit' : 'add';
     return i18n.text(`titles.checkout_addresses_${mode}_${type}`);
   }, [contact, type]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    webOnly: true,
-    breakpoint: ">xs"
-  }, /*#__PURE__*/React.createElement(ResponsiveBackButton, null), /*#__PURE__*/React.createElement("h1", {
-    className: styles.headline
-  }, title)), /*#__PURE__*/React.createElement(AddressBookProvider, null, /*#__PURE__*/React.createElement(ProfileContact, null)));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(ResponsiveContainer, {
+      webOnly: true,
+      breakpoint: ">xs",
+      children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsx("h1", {
+        className: styles.headline,
+        children: title
+      })]
+    }), /*#__PURE__*/_jsx(AddressBookProvider, {
+      children: /*#__PURE__*/_jsx(ProfileContact, {})
+    })]
+  });
 };
 export default AddressBookContact;

package/checkout/components/Checkout/Checkout.js

@@ -14,6 +14,7 @@ import Address from "./CheckoutAddress";
 import Summary from "./CheckoutSummary";
 import Actions from "./CheckoutActions";
 import Header from "./CheckoutHeader";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: css({
     display: 'flex',
@@ -46,27 +47,34 @@ const Checkout = () => {
   const {
     id
   } = useRoute();
-  return /*#__PURE__*/React.createElement(CheckoutProvider, {
+  return /*#__PURE__*/_jsxs(CheckoutProvider, {
     pathPattern: CHECKOUT_PATTERN,
-    routeId: id
-  }, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.main
-  }, /*#__PURE__*/React.createElement(ProfileProvider, {
-    isCheckout: true
-  }, /*#__PURE__*/React.createElement(Address, {
-    type: ADDRESS_TYPE_BILLING
-  }), /*#__PURE__*/React.createElement(Address, {
-    type: ADDRESS_TYPE_SHIPPING
-  })), /*#__PURE__*/React.createElement(PickupContactForm, null), /*#__PURE__*/React.createElement(ShippingMethods, null), /*#__PURE__*/React.createElement(PaymentMethodProvider, null), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: "<md",
-    appAlways: true
-  }, /*#__PURE__*/React.createElement(Summary, null)), /*#__PURE__*/React.createElement(Actions, null)), /*#__PURE__*/React.createElement("div", {
-    className: styles.side
-  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: ">=md",
-    webOnly: true
-  }, /*#__PURE__*/React.createElement(Summary, null)))));
+    routeId: id,
+    children: [/*#__PURE__*/_jsx(Header, {}), /*#__PURE__*/_jsxs("div", {
+      className: styles.root,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: styles.main,
+        children: [/*#__PURE__*/_jsxs(ProfileProvider, {
+          isCheckout: true,
+          children: [/*#__PURE__*/_jsx(Address, {
+            type: ADDRESS_TYPE_BILLING
+          }), /*#__PURE__*/_jsx(Address, {
+            type: ADDRESS_TYPE_SHIPPING
+          })]
+        }), /*#__PURE__*/_jsx(PickupContactForm, {}), /*#__PURE__*/_jsx(ShippingMethods, {}), /*#__PURE__*/_jsx(PaymentMethodProvider, {}), /*#__PURE__*/_jsx(ResponsiveContainer, {
+          breakpoint: "<md",
+          appAlways: true,
+          children: /*#__PURE__*/_jsx(Summary, {})
+        }), /*#__PURE__*/_jsx(Actions, {})]
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.side,
+        children: /*#__PURE__*/_jsx(ResponsiveContainer, {
+          breakpoint: ">=md",
+          webOnly: true,
+          children: /*#__PURE__*/_jsx(Summary, {})
+        })
+      })]
+    })]
+  });
 };
 export default Checkout;

package/checkout/components/Checkout/CheckoutActions.js

@@ -5,6 +5,7 @@ import { RippleButton, SurroundPortals } from '@shopgate/engage/components';
 import { useCheckoutContext } from "../../hooks/common";
 import { SupplementalContent } from "../SupplementalContent";
 import { CHECKOUT_ACTIONS } from "../../constants";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: css({
     padding: 16,
@@ -26,19 +27,23 @@ const Actions = () => {
     paymentButton: PaymentButton,
     isButtonLocked
   } = useCheckoutContext();
-  const originalButton = /*#__PURE__*/React.createElement(RippleButton, {
+  const originalButton = /*#__PURE__*/_jsx(RippleButton, {
     type: "secondary",
     onClick: handleSubmitOrder,
-    disabled: isButtonLocked
-  }, i18n.text('checkout.submit_order'));
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CHECKOUT_ACTIONS
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, PaymentButton ? /*#__PURE__*/React.createElement(PaymentButton, {
-    onSubmit: handleSubmitOrder,
-    onValidate: handleValidation,
-    disabled: isButtonLocked
-  }, originalButton) : originalButton, /*#__PURE__*/React.createElement(SupplementalContent, null)));
+    disabled: isButtonLocked,
+    children: i18n.text('checkout.submit_order')
+  });
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: CHECKOUT_ACTIONS,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: styles.root,
+      children: [PaymentButton ? /*#__PURE__*/_jsx(PaymentButton, {
+        onSubmit: handleSubmitOrder,
+        onValidate: handleValidation,
+        disabled: isButtonLocked,
+        children: originalButton
+      }) : originalButton, /*#__PURE__*/_jsx(SupplementalContent, {})]
+    })
+  });
 };
 export default Actions;

package/checkout/components/Checkout/CheckoutAddress.js

@@ -11,6 +11,7 @@ import { useCheckoutContext } from "../../hooks/common";
 import { GUEST_CHECKOUT_PATTERN, CHECKOUT_ADDRESS_BOOK_PATH, CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN } from "../../constants/routes";
 import { ADDRESS_TYPE_BILLING, ADDRESS_TYPE_SHIPPING } from "../../constants";
 import iso3166 from "../../../components/Form/Builder/helpers/iso-3166-2";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -89,22 +90,45 @@ const CheckoutAddress = ({
   if (type === ADDRESS_TYPE_SHIPPING && !isShippingAddressSelectionEnabled) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement(Section, {
-    className: styles.card,
-    title: headline,
-    editLink: editLink,
-    editLabel: editLabel
-  }, address ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", null, address.middleName?.length ? `${address.firstName} ${address.middleName} ${address.lastName}` : `${address.firstName} ${address.lastName}`), type === ADDRESS_TYPE_BILLING && isGuestCheckout && orderReserveOnly && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", null, address.emailAddress), /*#__PURE__*/React.createElement("span", null, address.mobile)), /*#__PURE__*/React.createElement("span", null, address.address1), address.address2?.length ? /*#__PURE__*/React.createElement("span", null, address.address2) : null, address.address3?.length ? /*#__PURE__*/React.createElement("span", null, address.address3) : null, address.address4?.length ? /*#__PURE__*/React.createElement("span", null, address.address4) : null, address.postalCode || address.region || address.city || address.country ? /*#__PURE__*/React.createElement("span", null, i18n.text(`checkout.${type}.address`, {
-    postalCode: address.postalCode || '',
-    region: iso3166?.[address.country]?.divisions?.[address.region] || address.region || '',
-    city: address.city || '',
-    country: address.country || ''
-  })) : null) : /*#__PURE__*/React.createElement(Link, {
-    href: selectAddressLink,
-    className: styles.link
-  }, i18n.text(`checkout.${type}.select_address`))));
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.root,
+    children: /*#__PURE__*/_jsx(Section, {
+      className: styles.card,
+      title: headline,
+      editLink: editLink,
+      editLabel: editLabel,
+      children: address ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("span", {
+          children: address.middleName?.length ? `${address.firstName} ${address.middleName} ${address.lastName}` : `${address.firstName} ${address.lastName}`
+        }), type === ADDRESS_TYPE_BILLING && isGuestCheckout && orderReserveOnly && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("span", {
+            children: address.emailAddress
+          }), /*#__PURE__*/_jsx("span", {
+            children: address.mobile
+          })]
+        }), /*#__PURE__*/_jsx("span", {
+          children: address.address1
+        }), address.address2?.length ? /*#__PURE__*/_jsx("span", {
+          children: address.address2
+        }) : null, address.address3?.length ? /*#__PURE__*/_jsx("span", {
+          children: address.address3
+        }) : null, address.address4?.length ? /*#__PURE__*/_jsx("span", {
+          children: address.address4
+        }) : null, address.postalCode || address.region || address.city || address.country ? /*#__PURE__*/_jsx("span", {
+          children: i18n.text(`checkout.${type}.address`, {
+            postalCode: address.postalCode || '',
+            region: iso3166?.[address.country]?.divisions?.[address.region] || address.region || '',
+            city: address.city || '',
+            country: address.country || ''
+          })
+        }) : null]
+      }) : /*#__PURE__*/_jsx(Link, {
+        href: selectAddressLink,
+        className: styles.link,
+        children: i18n.text(`checkout.${type}.select_address`)
+      })
+    })
+  });
 };
 CheckoutAddress.defaultProps = {
   type: ADDRESS_TYPE_BILLING

package/checkout/components/Checkout/CheckoutHeader.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { ResponsiveContainer } from '@shopgate/engage/components';
 import { i18n } from "../../../core/helpers/i18n";
 import { ResponsiveBackButton } from "../ResponsiveBackButton";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   title: css({
     padding: 16,
@@ -36,19 +37,23 @@ const CheckoutTitle = ({
   stepFrom,
   stepTo,
   headline
-}) => /*#__PURE__*/React.createElement(ResponsiveContainer, {
+}) => /*#__PURE__*/_jsxs(ResponsiveContainer, {
   webOnly: true,
-  breakpoint: ">xs"
-}, /*#__PURE__*/React.createElement(ResponsiveBackButton, null), /*#__PURE__*/React.createElement("div", {
-  className: styles.title
-}, /*#__PURE__*/React.createElement("h1", {
-  className: styles.headline
-}, i18n.text(headline)), stepFrom !== null ? /*#__PURE__*/React.createElement("h2", {
-  className: styles.step
-}, i18n.text('checkout.steps', {
-  from: stepFrom,
-  to: stepTo
-})) : null));
+  breakpoint: ">xs",
+  children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsxs("div", {
+    className: styles.title,
+    children: [/*#__PURE__*/_jsx("h1", {
+      className: styles.headline,
+      children: i18n.text(headline)
+    }), stepFrom !== null ? /*#__PURE__*/_jsx("h2", {
+      className: styles.step,
+      children: i18n.text('checkout.steps', {
+        from: stepFrom,
+        to: stepTo
+      })
+    }) : null]
+  })]
+});
 CheckoutTitle.defaultProps = {
   stepFrom: null,
   stepTo: null,

package/checkout/components/Checkout/CheckoutPickupContactForm.js

@@ -7,6 +7,7 @@ import generateFormConfig from "./CheckoutPickupContactForm.config";
 import Section from "./CheckoutSection";
 import { useCheckoutContext } from "../../hooks/common";
 import { CHECKOUT_PICKUP_CONTACT_FORM } from "../../constants";
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -73,20 +74,23 @@ const PickupContactForm = () => {
   if (!isPickupContactSelectionEnabled) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CHECKOUT_PICKUP_CONTACT_FORM
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement(Section, {
-    title: "checkout.pickup_contact.headline",
-    hasForm: true
-  }, /*#__PURE__*/React.createElement(FormBuilder, {
-    className: styles.form,
-    name: "PickupForm",
-    config: formConfig,
-    defaults: defaultPickupPersonState,
-    validationErrors: formValidationErrors,
-    handleUpdate: handleUpdate
-  }))));
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: CHECKOUT_PICKUP_CONTACT_FORM,
+    children: /*#__PURE__*/_jsx("div", {
+      className: styles.root,
+      children: /*#__PURE__*/_jsx(Section, {
+        title: "checkout.pickup_contact.headline",
+        hasForm: true,
+        children: /*#__PURE__*/_jsx(FormBuilder, {
+          className: styles.form,
+          name: "PickupForm",
+          config: formConfig,
+          defaults: defaultPickupPersonState,
+          validationErrors: formValidationErrors,
+          handleUpdate: handleUpdate
+        })
+      })
+    })
+  });
 };
 export default PickupContactForm;