@shopgate/engage 7.30.4-beta.1 → 7.31.0-alpha.2

package/checkout/components/GuestCheckout/GuestCheckoutOptIn.js

@@ -1,39 +1,35 @@
 import React, { useMemo, useCallback, useEffect } from 'react';
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/engage';
 import { FormBuilder, SurroundPortals } from '@shopgate/engage/components';
 import { isIOSTheme } from '@shopgate/engage/core';
 import { StylePresets } from '@shopgate/engage/components/Form';
+import { makeStyles } from '@shopgate/engage/styles';
 import Section from "../Checkout/CheckoutSection";
 import { useCheckoutContext } from "../../hooks/common";
 import generateFormConfig from "./GuestCheckoutOptIn.config";
 import { CHECKOUT_MARKETING_OPTIN } from "../../constants";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
-const styles = {
-  root: css({
-    padding: `0 ${variables.gap.big}px`,
+const useStyles = makeStyles()(theme => ({
+  root: {
+    padding: theme.spacing(0, 2),
     ...(!isIOSTheme() ? {
-      paddingBottom: variables.gap.xbig
+      paddingBottom: theme.spacing(4)
     } : {})
-  }).toString(),
-  form: css({
+  },
+  form: {
     ' .guestCheckoutOptInMarketingOptIn .checkbox': {
       paddingBottom: 0
     },
-    ...StylePresets.OUTLINED_FORM_FIELDS
-  }).toString(),
-  section: css({
-    margin: variables.gap.big
-  }).toString()
-};
+    ...StylePresets.getOutlinedFormFields(theme)
+  }
+}));
 
 /**
  * @returns {JSX}
  */
 const GuestCheckoutOptIn = () => {
+  const {
+    classes
+  } = useStyles();
   const {
     defaultOptInFormState,
     optInFormSetValues,
@@ -52,11 +48,11 @@ const GuestCheckoutOptIn = () => {
   return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: CHECKOUT_MARKETING_OPTIN,
     children: /*#__PURE__*/_jsx("div", {
-      className: styles.root,
+      className: classes.root,
       children: /*#__PURE__*/_jsx(Section, {
         hasForm: true,
         children: /*#__PURE__*/_jsx(FormBuilder, {
-          className: styles.form,
+          className: classes.form,
           name: "GuestCheckoutOptIn",
           config: formConfig,
           defaults: defaultOptInFormState,

package/checkout/components/GuestCheckout/GuestCheckoutPickup.js

@@ -1,34 +1,33 @@
 import React, { useMemo } from 'react';
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/engage';
+import { makeStyles } from '@shopgate/engage/styles';
 import { GUEST_CHECKOUT_PATTERN } from "../../constants/routes";
 import Section from "../Checkout/CheckoutSection";
 import { useCheckoutContext } from "../../hooks/common";
 import { ADDRESS_TYPE_PICKUP } from "../../constants";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
-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 12px 0'
-  }).toString()
-};
+  }
+}));
 
 /**
  * GuestCheckoutPickup
  * @returns {JSX}
  */
 const GuestCheckoutPickup = () => {
+  const {
+    classes
+  } = useStyles();
   const {
     pickupAddress,
     orderReserveOnly
@@ -38,9 +37,9 @@ const GuestCheckoutPickup = () => {
     return null;
   }
   return /*#__PURE__*/_jsx("div", {
-    className: styles.root,
+    className: classes.root,
     children: /*#__PURE__*/_jsxs(Section, {
-      className: styles.card,
+      className: classes.card,
       title: headline,
       editLink: `${GUEST_CHECKOUT_PATTERN}?edit=${ADDRESS_TYPE_PICKUP}`,
       children: [/*#__PURE__*/_jsx("span", {

package/checkout/components/GuestCheckout/GuestCheckoutPickupNotes.config.js

@@ -1,4 +1,4 @@
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
 
 /**
  * Generates form configuration.

package/checkout/components/GuestCheckout/GuestCheckoutPickupNotes.js

@@ -1,32 +1,35 @@
 import React, { useMemo, useCallback } from 'react';
-import { css } from 'glamor';
 import { FormBuilder } from '@shopgate/engage/components';
 import { StylePresets } from '@shopgate/engage/components/Form';
+import { makeStyles } from '@shopgate/engage/styles';
 import generateFormConfig from "./GuestCheckoutPickupNotes.config";
 import Section from "../Checkout/CheckoutSection";
 import { useCheckoutContext } from "../../hooks/common";
 import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  root: css({
+const useStyles = makeStyles()(theme => ({
+  root: {
     padding: '16px 16px 0',
     paddingTop: 0,
     display: 'flex',
     flex: '0 0 auto',
     flexDirection: 'column'
-  }).toString(),
-  form: css({
+  },
+  form: {
     ' .textField': {
       marginBottom: '16px !important'
     },
-    ...StylePresets.OUTLINED_FORM_FIELDS
-  }).toString()
-};
+    ...StylePresets.getOutlinedFormFields(theme)
+  }
+}));
 
 /**
  * GuestCheckoutPickupNotes
  * @returns {JSX}
  */
 const GuestCheckoutPickupNotes = () => {
+  const {
+    classes
+  } = useStyles();
   const {
     defaultPickupPersonState,
     formValidationErrors,
@@ -41,12 +44,12 @@ const GuestCheckoutPickupNotes = () => {
     return null;
   }
   return /*#__PURE__*/_jsx("div", {
-    className: styles.root,
+    className: classes.root,
     children: /*#__PURE__*/_jsx(Section, {
       title: "",
       hasForm: true,
       children: /*#__PURE__*/_jsx(FormBuilder, {
-        className: styles.form,
+        className: classes.form,
         name: "PickupNotesForm",
         config: formConfig,
         defaults: defaultPickupPersonState,

package/checkout/components/PaymentMethodButton/PaymentMethodButton.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-import { css } from 'glamor';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { useCheckoutContext } from "../../hooks/common";
 import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  root: css({
+const useStyles = makeStyles()({
+  root: {
     outline: 'none',
     border: '1px solid rgba(0, 0, 0, 0.12)',
     borderRadius: 4,
@@ -19,11 +18,11 @@ const styles = {
     [responsiveMediaQuery('xs')]: {
       width: '50%'
     },
-    '&:not(:last-child)': {
+    '&:not(:last-child)/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */': {
       borderTopRightRadius: 0,
       borderBottomRightRadius: 0
     },
-    '&:not(:first-child)': {
+    '&:not(:first-child)/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */': {
       borderLeft: 'none',
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0
@@ -31,14 +30,14 @@ const styles = {
     '&:hover': {
       background: 'rgba(0, 0, 0, 0.05)'
     }
-  }).toString(),
-  active: css({
+  },
+  active: {
     background: 'rgba(0, 0, 0, 0.12)',
     '&:hover': {
       background: 'rgba(0, 0, 0, 0.12)'
     }
-  }).toString()
-};
+  }
+});
 
 /**
  * Payment Button
@@ -50,13 +49,19 @@ const PaymentMethodButton = ({
   active,
   onChange
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     isLocked
   } = useCheckoutContext();
   return /*#__PURE__*/_jsx("button", {
     type: "button",
     disabled: isLocked,
-    className: `${styles.root} ${active && styles.active}`,
+    className: cx(classes.root, {
+      [classes.active]: active
+    }),
     onClick: () => onChange(),
     children: children
   });

package/checkout/components/ResponsiveBackButton/ResponsiveBackButton.js

@@ -2,17 +2,42 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { RippleButton, I18n, ArrowIcon } from '@shopgate/engage/components';
 import { useNavigation } from '@shopgate/engage/core';
-import { container, button, buttonIcon } from "./ResponsiveBackButton.style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    display: 'flex',
+    padding: theme.spacing(4, 2, 2, 2)
+  },
+  button: {
+    fontSize: '0.875rem !important',
+    padding: '0 !important',
+    ' > div ': {
+      padding: 0,
+      display: 'flex'
+    }
+  },
+  buttonIcon: {
+    display: 'inline-block',
+    fontSize: '1.375rem !important',
+    alignSelf: 'center',
+    marginRight: theme.spacing(0.5),
+    marginLeft: -3,
+    marginTop: -2
+  }
+}));
 
 /**
  * A back button  for the desktop checkout pages.
  * @returns {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ResponsiveBackButton = ({
   label,
   onClick
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     pop
   } = useNavigation();
@@ -24,14 +49,14 @@ const ResponsiveBackButton = ({
     pop();
   }, [onClick, pop]);
   return /*#__PURE__*/_jsx("div", {
-    className: container,
+    className: classes.container,
     children: /*#__PURE__*/_jsxs(RippleButton, {
       flat: true,
-      className: button,
+      className: classes.button,
       type: "secondary",
       onClick: handleClick,
       children: [/*#__PURE__*/_jsx(ArrowIcon, {
-        className: buttonIcon
+        className: classes.buttonIcon
       }), /*#__PURE__*/_jsx(I18n.Text, {
         string: label
       })]

package/checkout/components/ShippingMethods/ShippingMethod.js

@@ -1,40 +1,36 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
-import classNames from 'classnames';
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
 import { Image } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import { useCheckoutContext } from '@shopgate/engage/checkout/hooks/common';
 import ShippingMethodIcon from '@shopgate/pwa-ui-shared/icons/ShippingMethodIcon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = {
-  root: css({
+const useStyles = makeStyles()({
+  root: {
     display: 'flex',
     alignItems: 'center',
     fontSize: 15
-  }).toString(),
-  rootDisabled: css({
-    opacity: 0.5
-  }).toString(),
-  imageContainer: css({
+  },
+  imageContainer: {
     width: 32,
     heigh: 32,
     marginRight: 8,
     flexShrink: 0
-  }).toString(),
-  image: css({
+  },
+  image: {
     width: '100%',
     height: '100%'
-  }).toString(),
-  label: css({
+  },
+  label: {
     display: 'flex',
     width: '100%',
     justifyContent: 'space-between'
-  }).toString(),
-  name: css({
+  },
+  name: {
     marginRight: 8
-  }).toString()
-};
+  }
+});
 
 /**
  * The shipping methods component.
@@ -44,6 +40,9 @@ const styles = {
 const ShippingMethod = ({
   shippingMethod
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     currencyCode
   } = useCheckoutContext();
@@ -52,20 +51,20 @@ const ShippingMethod = ({
   } = shippingMethod;
   const [useImage, setUseImage] = useState(!!serviceLevel?.iconUrl);
   return /*#__PURE__*/_jsxs("div", {
-    className: classNames(styles.root),
+    className: classes.root,
     children: [/*#__PURE__*/_jsx("div", {
-      className: styles.imageContainer,
+      className: classes.imageContainer,
       children: useImage ? /*#__PURE__*/_jsx(Image, {
-        className: styles.image,
+        className: classes.image,
         src: serviceLevel?.iconUrl,
         onError: () => setUseImage(false)
       }) : /*#__PURE__*/_jsx(ShippingMethodIcon, {
-        className: styles.image
+        className: classes.image
       })
     }), /*#__PURE__*/_jsxs("div", {
-      className: styles.label,
+      className: classes.label,
       children: [/*#__PURE__*/_jsx("span", {
-        className: styles.name,
+        className: classes.name,
         children: serviceLevel?.name
       }), /*#__PURE__*/_jsx("span", {
         children: serviceLevel?.cost ? i18n.price(serviceLevel?.cost, currencyCode, 2) : i18n.text('shipping.free_short')

package/checkout/components/ShippingMethods/ShippingMethods.js

@@ -1,54 +1,64 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
-import classNames from 'classnames';
 import CryptoJs from 'crypto-js';
 import sortBy from 'lodash/sortBy';
 import uniqBy from 'lodash/uniqBy';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { makeStyles } from '@shopgate/engage/styles';
 import { RadioGroupV2 as RadioGroup, RadioCard, MessageBar } from '@shopgate/engage/components';
 import { useCheckoutContext } from '@shopgate/engage/checkout/hooks/common';
 import ShippingMethod from "./ShippingMethod";
 import connect from "./connector";
+
+/**
+ * List item wrapper for shipping radio cards. Defined at module scope so RadioCard always receives
+ * a stable renderCard component type.
+ * @param {Object} props Props.
+ * @param {React.ReactNode} props.children Child content.
+ * @param {string} [props.className] Class from RadioCard (maps to classes.root).
+ * @returns {JSX.Element}
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
-const styles = {
-  root: css({
-    padding: `0 ${variables.gap.big}px ${variables.gap.xbig}px`
-  }).toString(),
-  headline: css({
+const ShippingMethodRadioListItem = ({
+  children,
+  className
+}) => /*#__PURE__*/_jsx("li", {
+  className: className,
+  children: children
+});
+ShippingMethodRadioListItem.defaultProps = {
+  children: null,
+  className: undefined
+};
+const useStyles = makeStyles()(theme => ({
+  root: {
+    padding: theme.spacing(0, 2, 4)
+  },
+  headline: {
     fontSize: '1.25rem',
     fontWeight: 'normal',
-    padding: `0 ${variables.gap.small}px 0 0`,
-    margin: `0 0 ${variables.gap.small}px 0`,
-    color: 'var(--color-text-high-emphasis)',
+    padding: theme.spacing(0, 1, 0, 0),
+    margin: theme.spacing(0, 0, 1, 0),
+    color: theme.palette.text.primary,
     textTransform: 'none'
-  }).toString(),
-  container: css({
+  },
+  container: {
     border: '1px solid #eaeaea',
-    ' li:nth-child(2n)': {
+    ' li:nth-of-type(2n)': {
       background: 'var(--color-background-accent)'
     }
-  }).toString(),
-  containerSingle: css({
-    padding: variables.gap.small
-  }).toString(),
-  card: css({
+  },
+  containerSingle: {
+    padding: theme.spacing(1)
+  },
+  card: {
     display: 'flex',
     alignItems: 'center'
-  }).toString(),
-  errorMessage: css({
+  },
+  errorMessage: {
     margin: 0
-  }).toString(),
-  iOSCard: css({
-    width: '100%',
-    overflow: 'hidden',
-    marginBottom: variables.gap.big
-  }).toString()
-};
+  }
+}));
 
 /**
  * Hashes a shipping method
@@ -71,21 +81,6 @@ const hashShippingMethod = method => {
   return CryptoJs.MD5(`${code} ${serviceLevelCode} ${carrierCode}`).toString();
 };
 
-/**
- * Custom replacement for the wrapper component of the RadioCard
- * @param {Object} props The component props
- * @returns {JSX}
- */
-const CardComponent = ({
-  children
-}) => /*#__PURE__*/_jsx("li", {
-  className: styles.card,
-  children: children
-});
-CardComponent.defaultProps = {
-  children: null
-};
-
 /**
  * The shipping methods component.
  * @returns {JSX}
@@ -93,6 +88,10 @@ CardComponent.defaultProps = {
 const ShippingMethods = ({
   orderHasDirectShipItems
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     shippingAddress,
     updateShippingMethod,
@@ -168,9 +167,9 @@ const ShippingMethods = ({
   }
   if (shippingMethods.length === 0) {
     return /*#__PURE__*/_jsxs("div", {
-      className: styles.root,
+      className: classes.root,
       children: [/*#__PURE__*/_jsx("h3", {
-        className: styles.headline,
+        className: classes.headline,
         children: i18n.text('checkout.shippingMethod.title')
       }), /*#__PURE__*/_jsx(MessageBar, {
         messages: [{
@@ -178,19 +177,19 @@ const ShippingMethods = ({
           message: i18n.text(`checkout.shippingMethod.errors.${!shippingAddress ? 'noShippingAddress' : 'invalidShippingAddress'}`)
         }],
         classNames: {
-          container: styles.errorMessage
+          container: classes.errorMessage
         },
         showIcons: true
       })]
     });
   }
   return /*#__PURE__*/_jsxs("div", {
-    className: styles.root,
+    className: classes.root,
     children: [/*#__PURE__*/_jsx("h3", {
-      className: styles.headline,
+      className: classes.headline,
       children: i18n.text('checkout.shippingMethod.title')
     }), shippingMethods.length === 1 ? /*#__PURE__*/_jsx("div", {
-      className: classNames(styles.container, styles.containerSingle),
+      className: cx(classes.container, classes.containerSingle),
       children: /*#__PURE__*/_jsx(ShippingMethod, {
         shippingMethod: shippingMethods[0]
       })
@@ -200,11 +199,14 @@ const ShippingMethods = ({
       onChange: onChange,
       component: "ul",
       classes: {
-        root: styles.container
+        root: classes.container
       },
       disabled: isLoading,
       children: shippingMethods.map(shippingMethod => /*#__PURE__*/_jsx(RadioCard, {
-        renderCard: CardComponent,
+        renderCard: ShippingMethodRadioListItem,
+        classes: {
+          root: classes.card
+        },
         value: shippingMethod.hash,
         children: /*#__PURE__*/_jsx(ShippingMethod, {
           shippingMethod: shippingMethod

package/checkout/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/checkout/helpers/index.js

@@ -1,4 +1,5 @@
-import { i18n } from '@shopgate/engage/core';
+import "core-js/modules/es.array.includes.js";
+import { i18n } from '@shopgate/engage/core/helpers';
 import { DIRECT_SHIP, ROPIS } from '@shopgate/engage/locations';
 
 /**