@shopgate/engage 7.30.3 → 7.31.0-alpha.1

package/cart/components/PaymentBar/PaymentBarTax.js

@@ -1,11 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { SurroundPortals } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { isIOSTheme } from '@shopgate/engage/core';
 import { CART_PAYMENT_BAR_TOTALS_TAX, getTaxLine } from '@shopgate/pwa-common-commerce/cart';
 import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
 import { CartContext } from "../../cart.context";
-import { spacer } from "./PaymentBarContent.style";
 import connect from "./PaymentBarTax.connector";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  spacer: {
+    width: isIOSTheme() ? 27 : 32,
+    order: 1,
+    flexShrink: 0
+  }
+});
 
 /**
  * The Tax component.
@@ -15,12 +24,14 @@ import connect from "./PaymentBarTax.connector";
  * @param {string|null} [props.className=null] The class name for styling.
  * @returns {JSX.Element|null} The rendered component or null.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PaymentBarTax = ({
   taxData,
   showSeparator,
   className
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     currency,
     isLoading,
@@ -49,7 +60,7 @@ const PaymentBarTax = ({
       }), /*#__PURE__*/_jsx(CartTotalLine.Hint, {
         hint: taxLine.hint
       }), hasPromotionCoupons && /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
-        className: spacer
+        className: classes.spacer
       })]
     })
   });

package/cart/components/Substitution/index.js

@@ -1,16 +1,43 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { Toggle } from '@shopgate/engage/components';
-import { root, checkbox, rightSpace, text } from "./style";
 import connect from "./connector";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  root: {
+    padding: theme.spacing(2),
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'baseline',
+    flex: 1
+  },
+  checkbox: {
+    marginLeft: 8
+  },
+  text: {
+    flexGrow: 0
+  },
+  rightSpace: {
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'baseline',
+    flexGrow: 0,
+    [responsiveMediaQuery('>xs', {
+      webOnly: true
+    })]: {
+      flex: 0
+    }
+  }
+}));
 
 /**
  * Renders the cart reservation card label.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Substitution = ({
   id,
   onChange,
@@ -18,25 +45,31 @@ const Substitution = ({
   className,
   label,
   disabled
-}) => /*#__PURE__*/_jsxs("div", {
-  className: classNames(root, className),
-  children: [/*#__PURE__*/_jsx("label", {
-    "aria-hidden": true,
-    className: text,
-    htmlFor: id,
-    id: `${id}-label`,
-    children: label
-  }), /*#__PURE__*/_jsx("div", {
-    className: rightSpace,
-    children: /*#__PURE__*/_jsx(Toggle, {
-      className: checkbox,
-      checked: checked,
-      id: id,
-      onChange: onChange,
-      disabled: disabled
-    })
-  })]
-});
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(classes.root, className),
+    children: [/*#__PURE__*/_jsx("label", {
+      "aria-hidden": true,
+      className: classes.text,
+      htmlFor: id,
+      id: `${id}-label`,
+      children: label
+    }), /*#__PURE__*/_jsx("div", {
+      className: classes.rightSpace,
+      children: /*#__PURE__*/_jsx(Toggle, {
+        className: classes.checkbox,
+        checked: checked,
+        id: id,
+        onChange: onChange,
+        disabled: disabled
+      })
+    })]
+  });
+};
 Substitution.defaultProps = {
   className: undefined,
   disabled: false,

package/cart/components/SupplementalContent/SupplementalContent.js

@@ -1,26 +1,55 @@
 import React from 'react';
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { wrapper } from "./SupplementalContent.styles";
+import { makeStyles } from '@shopgate/engage/styles';
 import connect from "./SupplementalContent.connector";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  wrapper: {
+    display: 'block',
+    color: theme.palette.text.secondary,
+    fontSize: 12,
+    lineHeight: 'unset',
+    padding: theme.spacing(2, 0),
+    '> *:first-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */': {
+      marginTop: 0
+    },
+    ' ol, ul': {
+      margin: theme.spacing(1, 0),
+      paddingLeft: theme.spacing(4)
+    },
+    ' ol': {
+      listStyle: 'decimal'
+    },
+    ' ul': {
+      listStyle: 'disc'
+    },
+    ' a': {
+      textDecoration: 'underline',
+      color: 'var(--color-primary)'
+    }
+  }
+}));
 
 /**
  * The SupplementalContent component
  * @param {Object} props The component props
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const SupplementalContent = ({
   text,
   className
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   if (!text) {
     return null;
   }
 
   /* eslint-disable react/no-danger */
   return /*#__PURE__*/_jsx("div", {
-    className: classNames(wrapper, className),
+    className: cx(classes.wrapper, className),
     dangerouslySetInnerHTML: {
       __html: text
     }

package/category/components/CategoryList/index.js

@@ -1,16 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { bin2hex } from '@shopgate/pwa-common/helpers/data';
 import { CATEGORY_PATH } from '@shopgate/pwa-common-commerce/category/constants';
 import Portal from '@shopgate/pwa-common/components/Portal';
 import { Placeholder } from '@shopgate/pwa-ui-shared';
 import { CATEGORY_ITEM } from '@shopgate/pwa-common-commerce/category/constants/Portals';
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
 import { getShowAllProductsFilters } from '@shopgate/engage/category';
 import { SheetList, TextLink } from '@shopgate/engage/components';
 import CategoryImage from "../CategoryImage";
-import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()({
+  sheet: {
+    background: colors.light
+  },
+  showAllProducts: {
+    fontWeight: 700
+  },
+  image: {
+    width: '30px',
+    marginRight: 8
+  }
+});
 
 /**
  * The CategoryList component.
@@ -23,7 +39,6 @@ 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,
@@ -32,12 +47,16 @@ const CategoryList = ({
   showImages,
   showLeftSideImages
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   if (!categories || !categories.length) {
     if (prerender === 0) {
       return null;
     }
     return /*#__PURE__*/_jsx(SheetList, {
-      className: classNames(styles.sheet, 'engage__category__category-list'),
+      className: cx(classes.sheet, 'engage__category__category-list'),
       children: Array(Math.min(prerender, 8)).fill('').map((val, index) => {
         const key = `placeholder-${index}`;
         return /*#__PURE__*/_jsx(Placeholder, {
@@ -51,9 +70,9 @@ const CategoryList = ({
   }
   const filters = getShowAllProductsFilters(parentCategory);
   return /*#__PURE__*/_jsxs(SheetList, {
-    className: classNames(styles.sheet, 'engage__category__category-list'),
+    className: cx(classes.sheet, 'engage__category__category-list'),
     children: [showAllProducts ? /*#__PURE__*/_jsx("div", {
-      className: classNames(styles.showAllProducts, 'engage__category__category-show-all-products'),
+      className: cx(classes.showAllProducts, 'engage__category__category-show-all-products'),
       children: /*#__PURE__*/_jsx(Portal, {
         name: "category.show-all-products",
         props: {
@@ -86,11 +105,11 @@ const CategoryList = ({
         },
         testId: category.name,
         rightComponent: showImages ? /*#__PURE__*/_jsx(CategoryImage, {
-          className: styles.image,
+          className: classes.image,
           src: category.imageUrl
         }) : null,
         leftComponent: showLeftSideImages ? /*#__PURE__*/_jsx(CategoryImage, {
-          className: styles.image,
+          className: classes.image,
           src: category.imageUrl
         }) : null,
         linkComponent: TextLink

package/checkout/actions/errorCheckout.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import { showModal, historyResetTo, historyPop, INDEX_PATH } from '@shopgate/engage/core';
 import { CART_PATH } from '@shopgate/engage/cart';
 import { MODAL_PIPELINE_ERROR } from '@shopgate/pwa-common/constants/ModalTypes';

package/checkout/components/AddressBook/AddressList.js

@@ -1,11 +1,11 @@
+import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.replace.js";
 import React, { useMemo } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
 import { getCheckoutBillingAddress, getCheckoutShippingAddress } from '@shopgate/engage/checkout/selectors/order';
 import { i18n, historyPush } from '@shopgate/engage/core';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { RippleButton, ResponsiveContainer } from '@shopgate/engage/components';
 import { ResponsiveBackButton } from "../ResponsiveBackButton";
 import AddressCard from "../../../account/components/Profile/ProfileAddressCard";
@@ -30,28 +30,22 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
   push: props => dispatch(historyPush(props))
 });
-const styles = {
-  title: css({
-    color: 'var(--color-text-high-emphasis)',
-    lineHeight: 2.5,
-    fontSize: 17,
-    fontWeight: '600'
-  }).toString(),
-  container: css({
+const useStyles = makeStyles()({
+  container: {
     display: 'flex',
     flexDirection: 'row',
     flexWrap: 'wrap',
     margin: -4,
     padding: 16
-  }).toString(),
-  headline: css({
+  },
+  headline: {
     padding: 16,
     fontSize: '2.125rem',
     fontWeight: 'normal',
     margin: 0,
     lineHeight: '2.25rem'
-  }).toString(),
-  button: css({
+  },
+  button: {
     '&&': {
       marginTop: 8,
       marginRight: 16,
@@ -67,11 +61,11 @@ const styles = {
         marginRight: 0
       }
     }
-  }).toString(),
-  ripple: css({
+  },
+  ripple: {
     padding: '8px 16px'
-  }).toString(),
-  actions: css({
+  },
+  actions: {
     display: 'flex',
     justifyContent: 'flex-end',
     flexDirection: 'row',
@@ -81,8 +75,8 @@ const styles = {
     })]: {
       flex: 1
     }
-  }).toString()
-};
+  }
+});
 
 /**
  * @returns {JSX}
@@ -92,6 +86,9 @@ const AddressList = ({
   shippingAddress,
   billingAddress
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     contacts,
     deleteContact,
@@ -121,11 +118,11 @@ const AddressList = ({
       webOnly: true,
       breakpoint: ">xs",
       children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsx("h1", {
-        className: styles.headline,
+        className: classes.headline,
         children: title
       })]
     }), /*#__PURE__*/_jsx("div", {
-      className: styles.container,
+      className: classes.container,
       children: contacts && contacts.map(contact => /*#__PURE__*/_jsx(AddressCard, {
         contact: contact,
         selected: contact.id === selectedContactId,
@@ -134,10 +131,10 @@ const AddressList = ({
         editContact: () => editContact(contact)
       }, contact.id))
     }), /*#__PURE__*/_jsx("div", {
-      className: styles.actions,
+      className: classes.actions,
       children: /*#__PURE__*/_jsx(RippleButton, {
-        className: styles.button,
-        rippleClassName: styles.ripple,
+        className: classes.button,
+        rippleClassName: classes.ripple,
         type: "primary",
         onClick: () => push({
           pathname: `${CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN}`.replace(':type', type)

package/checkout/components/AddressBookContact/AddressBookContact.js

@@ -1,28 +1,30 @@
-import React, { Fragment, useMemo } from 'react';
-import { css } from 'glamor';
+import React, { useMemo } from 'react';
 import { i18n, useRoute } from '@shopgate/engage/core';
 import { ResponsiveContainer } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 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({
+const useStyles = makeStyles()({
+  headline: {
     padding: 16,
     fontSize: '2.125rem',
     fontWeight: 'normal',
     margin: 0,
     lineHeight: '2.25rem'
-  }).toString()
-};
+  }
+});
 
 /**
  * AddressBookContact
- * @param {Object} props The component props
  * @returns {JSX}
  */
 const AddressBookContact = () => {
+  const {
+    classes
+  } = useStyles();
   const {
     state: {
       contact
@@ -40,7 +42,7 @@ const AddressBookContact = () => {
       webOnly: true,
       breakpoint: ">xs",
       children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsx("h1", {
-        className: styles.headline,
+        className: classes.headline,
         children: title
       })]
     }), /*#__PURE__*/_jsx(AddressBookProvider, {

package/checkout/components/Checkout/Checkout.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { css } from 'glamor';
 import { useRoute } from '@shopgate/engage/core';
 import { ResponsiveContainer } from '@shopgate/engage/components';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { CHECKOUT_PATTERN } from "../../constants/routes";
 import ProfileProvider from "../../../account/components/Profile/Profile.provider";
 import CheckoutProvider from "../../providers/CheckoutProvider";
@@ -15,12 +14,12 @@ 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({
+const useStyles = makeStyles()({
+  root: {
     display: 'flex',
     flexDirection: 'row'
-  }),
-  main: css({
+  },
+  main: {
     flex: 1,
     paddingTop: 16,
     [responsiveMediaQuery('>=md', {
@@ -28,22 +27,25 @@ const styles = {
     })]: {
       paddingRight: 16
     }
-  }),
-  side: css({
+  },
+  side: {
     [responsiveMediaQuery('>=md', {
       webOnly: true
     })]: {
       marginTop: 16,
       flex: 0.6
     }
-  })
-};
+  }
+});
 
 /**
  * The Cart component.
  * @returns {JSX}
  */
 const Checkout = () => {
+  const {
+    classes
+  } = useStyles();
   const {
     id
   } = useRoute();
@@ -51,9 +53,9 @@ const Checkout = () => {
     pathPattern: CHECKOUT_PATTERN,
     routeId: id,
     children: [/*#__PURE__*/_jsx(Header, {}), /*#__PURE__*/_jsxs("div", {
-      className: styles.root,
+      className: classes.root,
       children: [/*#__PURE__*/_jsxs("div", {
-        className: styles.main,
+        className: classes.main,
         children: [/*#__PURE__*/_jsxs(ProfileProvider, {
           isCheckout: true,
           children: [/*#__PURE__*/_jsx(Address, {
@@ -67,7 +69,7 @@ const Checkout = () => {
           children: /*#__PURE__*/_jsx(Summary, {})
         }), /*#__PURE__*/_jsx(Actions, {})]
       }), /*#__PURE__*/_jsx("div", {
-        className: styles.side,
+        className: classes.side,
         children: /*#__PURE__*/_jsx(ResponsiveContainer, {
           breakpoint: ">=md",
           webOnly: true,

package/checkout/components/Checkout/CheckoutActions.js

@@ -1,26 +1,29 @@
 import React from 'react';
-import { css } from 'glamor';
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
 import { RippleButton, SurroundPortals } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 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({
+const useStyles = makeStyles()({
+  root: {
     padding: 16,
     paddingTop: 0,
     display: 'flex',
     flexDirection: 'column',
     flex: '0 0 auto'
-  }).toString()
-};
+  }
+});
 
 /**
  * PickupContactForm
  * @returns {JSX}
  */
 const Actions = () => {
+  const {
+    classes
+  } = useStyles();
   const {
     handleSubmitOrder,
     handleValidation,
@@ -36,7 +39,7 @@ const Actions = () => {
   return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: CHECKOUT_ACTIONS,
     children: /*#__PURE__*/_jsxs("div", {
-      className: styles.root,
+      className: classes.root,
       children: [PaymentButton ? /*#__PURE__*/_jsx(PaymentButton, {
         onSubmit: handleSubmitOrder,
         onValidate: handleValidation,

package/checkout/components/Checkout/CheckoutAddress.js

@@ -1,10 +1,9 @@
 import "core-js/modules/es.string.replace.js";
-import React, { Fragment, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
-import { i18n } from '@shopgate/engage/core';
-import { themeConfig } from '@shopgate/engage';
+import { i18n } from '@shopgate/engage/core/helpers';
 import { Link } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import { useProfileContext } from "../../../account/components/Profile/Profile.provider";
 import Section from "./CheckoutSection";
 import { useCheckoutContext } from "../../hooks/common";
@@ -12,29 +11,26 @@ import { GUEST_CHECKOUT_PATTERN, CHECKOUT_ADDRESS_BOOK_PATH, CHECKOUT_ADDRESS_BO
 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;
-export const styles = {
-  root: css({
-    padding: `0 ${variables.gap.big}px ${variables.gap.big}px`,
+const useStyles = makeStyles()(theme => ({
+  root: {
+    padding: theme.spacing(0, 2, 2),
     display: 'flex',
     flexDirection: 'column',
     flex: '0 0 auto'
-  }).toString(),
-  card: css({
+  },
+  card: {
     display: 'flex',
     flexDirection: 'column',
     fontSize: 15,
     margin: '8px 0'
-  }).toString(),
-  link: css({
+  },
+  link: {
     fontSize: '0.875rem',
     color: 'var(--color-primary)',
     textTransform: 'uppercase',
     textAlign: 'center'
-  }).toString()
-};
+  }
+}));
 
 /**
  * CheckoutAddress
@@ -44,6 +40,9 @@ export const styles = {
 const CheckoutAddress = ({
   type
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     billingAddress,
     shippingAddress,
@@ -91,9 +90,9 @@ const CheckoutAddress = ({
     return null;
   }
   return /*#__PURE__*/_jsx("div", {
-    className: styles.root,
+    className: classes.root,
     children: /*#__PURE__*/_jsx(Section, {
-      className: styles.card,
+      className: classes.card,
       title: headline,
       editLink: editLink,
       editLabel: editLabel,
@@ -124,7 +123,7 @@ const CheckoutAddress = ({
         }) : null]
       }) : /*#__PURE__*/_jsx(Link, {
         href: selectAddressLink,
-        className: styles.link,
+        className: classes.link,
         children: i18n.text(`checkout.${type}.select_address`)
       })
     })