@shopgate/engage 7.30.3 → 7.31.0-alpha.1

package/checkout/components/CheckoutConfirmation/CheckoutConfirmation.js

@@ -1,10 +1,8 @@
 import React, { useMemo, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
 import { ResponsiveContainer, RippleButton } from '@shopgate/engage/components';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { CartItems } from '@shopgate/engage/cart';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { useRoute } from '@shopgate/engage/core';
 import { i18n } from "../../../core/helpers/i18n";
 import { convertLineItemsToCartItems, isReserveOnlyOrder, isDirectShipOnlyOrder } from "../../helpers";
@@ -18,92 +16,84 @@ import CheckoutConfirmationOrderSummary from "./CheckoutConfirmationOrderSummary
 import { SupplementalContent } from "../SupplementalContent";
 import connect from "./CheckoutConfirmation.connector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
-const style = {
-  root: css({
+const useStyles = makeStyles()(theme => ({
+  root: {
     display: 'flex',
     flexDirection: 'row'
-  }),
-  main: css({
+  },
+  main: {
     flex: 1,
     [responsiveMediaQuery('>=md', {
       webOnly: true
     })]: {
       paddingRight: 16
     }
-  }),
-  side: css({
+  },
+  side: {
     [responsiveMediaQuery('>=md', {
       webOnly: true
     })]: {
       marginTop: 134,
-      marginLeft: variables.gap.big * -1,
+      marginLeft: theme.spacing(-2),
       flex: 0.45
     }
-  }),
-  cartItems: css({
+  },
+  cartItems: {
     marginBottom: 32
-  }),
-  container: css({
-    padding: `${variables.gap.big}px ${variables.gap.small * 1.5}px 0 ${variables.gap.xbig}px`,
+  },
+  container: {
+    padding: theme.spacing(2, 1.5, 0, 4),
     [responsiveMediaQuery('<sm')]: {
-      paddingLeft: variables.gap.big
+      paddingLeft: theme.spacing(2)
     }
-  }),
-  backButtonContainer: css({
-    paddingLeft: variables.gap.big,
+  },
+  backButtonContainer: {
+    paddingLeft: theme.spacing(2),
     display: 'none',
     [responsiveMediaQuery('>=sm', {
       webOnly: true
     })]: {
       display: 'block'
     }
-  }),
-  heading: css({
+  },
+  heading: {
     fontSize: '2.125rem',
     fontWeight: 'normal',
     margin: 0,
     lineHeight: '2.25rem',
-    paddingBottom: variables.gap.xbig
-  }),
-  yourItemsHeading: css({
-    fontSize: '1.25rem',
-    fontWeight: 'bold',
-    margin: `${variables.gap.bigger}px 0 0`
-  }),
-  instructions: css({
-    marginBottom: variables.gap.xbig
-  }),
-  body: css({
+    paddingBottom: theme.spacing(4)
+  },
+  instructions: {
+    marginBottom: theme.spacing(4)
+  },
+  body: {
     border: 0,
     fontSize: '0.875rem',
     lineHeight: '1.25rem'
-  }),
-  orderNum: css({
+  },
+  orderNum: {
     padding: 0,
     fontSize: '1.25rem',
     fontWeight: 500,
     lineHeight: '1.5rem',
-    margin: `0 0 ${variables.gap.big}px`,
+    margin: theme.spacing(0, 0, 2),
     border: 0
-  }),
-  button: css({
+  },
+  button: {
     flex: '0 0 auto !important',
     borderRadius: '2px !important',
     minWidth: '50% !important',
     [responsiveMediaQuery('<md')]: {
       width: '100%'
     }
-  }),
-  buttonWrapper: css({
-    padding: variables.gap.big
-  }),
-  supplementalWrapper: css({
-    padding: `${variables.gap.xbig}px ${variables.gap.big}px`
-  }).toString()
-};
+  },
+  buttonWrapper: {
+    padding: theme.spacing(2)
+  },
+  supplementalWrapper: {
+    padding: theme.spacing(4, 2)
+  }
+}));
 
 /**
  * CheckoutConfirmation component
@@ -114,6 +104,9 @@ const CheckoutConfirmation = ({
   isUserLoggedIn,
   fetchCheckoutOrder
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     state: {
       order
@@ -162,39 +155,39 @@ const CheckoutConfirmation = ({
     return null;
   }
   return /*#__PURE__*/_jsxs("div", {
-    className: style.root,
+    className: classes.root,
     children: [/*#__PURE__*/_jsxs("div", {
-      className: style.main,
+      className: classes.main,
       children: [/*#__PURE__*/_jsx("div", {
-        className: style.backButtonContainer,
+        className: classes.backButtonContainer,
         children: /*#__PURE__*/_jsx(ResponsiveBackButton, {
           label: "checkout.success.continue",
           onClick: onContinueShopping
         })
       }), /*#__PURE__*/_jsxs("div", {
-        className: style.container,
+        className: classes.container,
         children: [/*#__PURE__*/_jsx("h2", {
-          className: style.heading,
+          className: classes.heading,
           children: i18n.text('checkout.success.title')
         }), /*#__PURE__*/_jsxs("p", {
-          className: style.orderNum,
+          className: classes.orderNum,
           children: [i18n.text('checkout.success.order_date', {
             date: i18n.date(new Date(date).getTime(), 'short')
           }), ' | ', i18n.text('checkout.success.order_number', {
             orderNumber
           })]
         }), /*#__PURE__*/_jsxs("div", {
-          className: style.instructions,
+          className: classes.instructions,
           children: [/*#__PURE__*/_jsx("p", {
-            className: style.body,
+            className: classes.body,
             children: i18n.text('checkout.success.instructions_1')
           }), /*#__PURE__*/_jsx("p", {
-            className: style.body,
+            className: classes.body,
             children: i18n.text('checkout.success.instructions_2')
           })]
         })]
       }), /*#__PURE__*/_jsx("div", {
-        className: style.cartItems,
+        className: classes.cartItems,
         children: /*#__PURE__*/_jsx(CartItems, {
           cartItems: cartItems,
           onFocus: () => {},
@@ -220,20 +213,20 @@ const CheckoutConfirmation = ({
         }), /*#__PURE__*/_jsx(CheckoutConfirmationOrderSummary, {
           order: orderData
         }), /*#__PURE__*/_jsx(SupplementalContent, {
-          className: style.supplementalWrapper
+          className: classes.supplementalWrapper
         })]
       }), /*#__PURE__*/_jsx("div", {
-        className: style.buttonWrapper,
+        className: classes.buttonWrapper,
         children: /*#__PURE__*/_jsx(RippleButton, {
           type: "secondary",
           disabled: false,
-          className: style.button.toString(),
+          className: classes.button,
           onClick: onContinueShopping,
           children: i18n.text('checkout.success.continue')
         })
       })]
     }), /*#__PURE__*/_jsx("div", {
-      className: style.side,
+      className: classes.side,
       children: /*#__PURE__*/_jsxs(ResponsiveContainer, {
         breakpoint: ">=md",
         webOnly: true,
@@ -250,7 +243,7 @@ const CheckoutConfirmation = ({
         }), /*#__PURE__*/_jsx(CheckoutConfirmationOrderSummary, {
           order: orderData
         }), /*#__PURE__*/_jsx(SupplementalContent, {
-          className: style.supplementalWrapper
+          className: classes.supplementalWrapper
         })]
       })
     })]

package/checkout/components/CheckoutConfirmation/CheckoutConfirmationOrderSummary.js

@@ -1,23 +1,23 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
+import { makeStyles } from '@shopgate/engage/styles';
 import TimeIcon from '@shopgate/pwa-ui-shared/icons/TimeIcon';
 import moment from 'moment';
 import { i18n } from "../../../core/helpers/i18n";
 import CheckoutConfirmationSection from "./CheckoutConfirmationSection";
 import { getCheckoutTaxLinesFromOrder } from "../../helpers";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = {
-  time: css({
+const useStyles = makeStyles()({
+  time: {
     marginBottom: 4,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center'
-  }).toString(),
-  timeText: css({
+  },
+  timeText: {
     marginLeft: 8
-  })
-};
+  }
+});
 
 /**
  * CheckoutConfirmationOrderSummary component
@@ -27,6 +27,9 @@ const CheckoutConfirmationOrderSummary = ({
   order,
   className
 }) => {
+  const {
+    classes
+  } = useStyles();
   const content = useMemo(() => getCheckoutTaxLinesFromOrder(order).filter(t => t.visible).map(t => {
     let text = null;
     if (t.value !== null) {
@@ -48,11 +51,11 @@ const CheckoutConfirmationOrderSummary = ({
     isSummary: true,
     className: className,
     children: fulfillmentSlot ? /*#__PURE__*/_jsxs("div", {
-      className: styles.time,
+      className: classes.time,
       children: [/*#__PURE__*/_jsx(TimeIcon, {
         size: 20
       }), /*#__PURE__*/_jsxs("span", {
-        className: styles.timeText,
+        className: classes.timeText,
         children: [moment(fulfillmentSlot?.date, 'YYYY-MM-DD').format('ll'), ' ', moment(fulfillmentSlot?.from, 'HH:mm').format('LT'), ' - ', moment(fulfillmentSlot?.to, 'HH:mm').format('LT')]
       })]
     }) : null

package/checkout/components/CheckoutConfirmation/CheckoutConfirmationSection.js

@@ -1,100 +1,98 @@
 import React, { Fragment } from 'react';
-import { css } from 'glamor';
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { Card, TextLink } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { isIOSTheme } from '@shopgate/engage/core';
 import { i18n } from "../../../core/helpers/i18n";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
-  colors,
-  variables
+  colors
 } = themeConfig;
-const styles = {
-  wrapper: css({
-    padding: `${variables.gap.bigger}px ${variables.gap.big}px 0 ${variables.gap.big}px`
-  }).toString(),
-  headline: css({
+const useStyles = makeStyles()(theme => ({
+  wrapper: {
+    padding: theme.spacing(2.5, 2, 0, 2)
+  },
+  headline: {
     color: colors.shade3,
     fontSize: '1rem',
     fontWeight: 'normal',
     textTransform: 'uppercase',
-    paddingBottom: variables.gap.small,
+    paddingBottom: theme.spacing(1),
     margin: 0,
     ...(!isIOSTheme() ? {
       fontSize: '1.25rem',
       lineHeight: '1.5rem',
       fontWeight: 500,
-      color: 'var(--color-text-high-emphasis)',
+      color: theme.palette.text.primary,
       textTransform: 'none'
     } : {})
-  }),
-  link: css({
-    color: `var(--color-primary, ${colors.primary}) !important`
-  }).toString(),
-  card: css({
+  },
+  link: {
+    color: 'var(--color-primary) !important'
+  },
+  card: {
     fontSize: '0.875rem',
     lineHeight: '1.25rem',
     margin: 0,
-    padding: variables.gap.big,
+    padding: theme.spacing(2),
     color: 'var(--color-text-medium-emphasis)',
     flex: '1 0 auto',
     ...(!isIOSTheme() ? {
       background: 'var(--color-background-accent)',
       boxShadow: 'none'
     } : {})
-  }).toString(),
-  cardWithForm: css({
+  },
+  cardWithForm: {
     ...(!isIOSTheme() ? {
       background: 'inherit',
       boxShadow: 'none',
       padding: 0
     } : {})
-  }).toString(),
-  list: css({
+  },
+  list: {
     margin: 0
-  }),
-  listTitle: css({
+  },
+  listTitle: {
     fontSize: '0.625rem',
     lineHeight: '1rem',
     fontWeight: 'bold',
     letterSpacing: '1.5px',
     textTransform: 'uppercase',
-    color: 'var(--color-text-high-emphasis)',
-    ':not(:first-child)': {
-      paddingTop: variables.gap.xsmall * 3
+    color: theme.palette.text.primary,
+    ':not(:first-of-type)': {
+      paddingTop: theme.spacing(1.5)
     }
-  }),
-  listEntry: css({
+  },
+  listEntry: {
     fontSize: '0.875rem',
     lineHeight: '1.5rem',
     marginLeft: 0,
     whiteSpace: 'pre-line',
     wordBreak: 'break-all',
     color: 'var(--color-text-medium-emphasis)'
-  }),
-  table: css({
-    color: 'var(--color-text-high-emphasis)',
+  },
+  table: {
+    color: theme.palette.text.primary,
     ' td': {
-      padding: `${variables.gap.xsmall}px 0`
+      padding: theme.spacing(0.5, 0)
     },
-    ' td:last-child': {
+    ' td:last-of-type': {
       textAlign: 'right',
       whiteSpace: 'pre-wrap',
-      paddingLeft: variables.gap.xsmall
+      paddingLeft: theme.spacing(0.5)
     },
-    ' tr:nth-last-child(2) td': {
+    ' tr:nth-last-of-type(2) td': {
       paddingBottom: 8
     },
-    ' tr:last-child td': {
+    ' tr:last-of-type td': {
       fontSize: '1rem',
       paddingTop: 8,
       borderTop: '1px solid #979797',
       fontWeight: 'bold'
     }
-  })
-};
+  }
+}));
 
 /**
  * CheckoutConfirmationSegment component
@@ -108,36 +106,42 @@ const CheckoutConfirmationSegment = ({
   isSummary,
   className
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   if (!content) {
     return null;
   }
   const isString = typeof content === 'string';
+
+  /* eslint-disable react/no-danger */
   return /*#__PURE__*/_jsxs("div", {
-    className: classNames(styles.wrapper, className),
+    className: cx(classes.wrapper, className),
     children: [/*#__PURE__*/_jsx("h3", {
-      className: styles.headline,
+      className: classes.headline,
       children: i18n.text(title)
     }), /*#__PURE__*/_jsxs(Card, {
-      className: classNames(styles.card, {
-        [styles.cardWithForm]: hasForm
+      className: cx(classes.card, {
+        [classes.cardWithForm]: hasForm
       }),
       children: [isString && /*#__PURE__*/_jsx("span", {
         children: content
       }), !isString && !isSummary && /*#__PURE__*/_jsx("dl", {
-        className: styles.list,
+        className: classes.list,
         children: content.map(({
           label,
           text,
           link
         }) => /*#__PURE__*/_jsxs(Fragment, {
           children: [label && /*#__PURE__*/_jsx("dt", {
-            className: styles.listTitle,
+            className: classes.listTitle,
             children: i18n.text(label)
           }), link ? /*#__PURE__*/_jsx("dd", {
-            className: styles.listEntry,
+            className: classes.listEntry,
             children: /*#__PURE__*/_jsx(TextLink, {
               href: link,
-              className: styles.link,
+              className: classes.link,
               children: /*#__PURE__*/_jsx("span", {
                 dangerouslySetInnerHTML: {
                   __html: text
@@ -145,14 +149,14 @@ const CheckoutConfirmationSegment = ({
               })
             })
           }) : /*#__PURE__*/_jsx("dd", {
-            className: styles.listEntry,
+            className: classes.listEntry,
             dangerouslySetInnerHTML: {
               __html: text
             }
           })]
         }, label || text))
       }), children, isSummary && /*#__PURE__*/_jsx("table", {
-        className: styles.table,
+        className: classes.table,
         children: /*#__PURE__*/_jsx("tbody", {
           children: content.map(({
             label,
@@ -171,6 +175,9 @@ const CheckoutConfirmationSegment = ({
     })]
   });
 };
+
+/* eslint-enable react/no-danger */
+
 CheckoutConfirmationSegment.defaultProps = {
   children: null,
   content: null,

package/checkout/components/GuestCheckout/GuestCheckout.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { css } from 'glamor';
 import { ResponsiveContainer } from '@shopgate/engage/components';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import Header from "../Checkout/CheckoutHeader";
 import { GUEST_CHECKOUT_PAYMENT_PATTERN } from "../../constants/routes";
 import CheckoutProvider from "../../providers/CheckoutProvider";
@@ -15,12 +14,12 @@ import PickupNotes from "./GuestCheckoutPickupNotes";
 import GuestCheckoutOptIn from "./GuestCheckoutOptIn";
 import { ShippingMethods } from "../ShippingMethods";
 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', {
@@ -29,49 +28,54 @@ const styles = {
       paddingRight: 16,
       paddingTop: 0
     }
-  }),
-  side: css({
+  },
+  side: {
     [responsiveMediaQuery('>=md', {
       webOnly: true
     })]: {
       flex: 0.6
     }
-  })
-};
+  }
+});
 
 /**
  * The Cart component.
  * @returns {JSX}
  */
-const GuestCheckout = () => /*#__PURE__*/_jsxs(CheckoutProvider, {
-  pathPattern: GUEST_CHECKOUT_PAYMENT_PATTERN,
-  orderInitialized: true,
-  orderReadOnly: true,
-  isGuestCheckout: true,
-  children: [/*#__PURE__*/_jsx(Header, {
-    stepFrom: 2,
-    stepTo: 2
-  }), /*#__PURE__*/_jsxs("div", {
-    className: styles.root,
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: styles.main,
-      children: [/*#__PURE__*/_jsx(Pickup, {}), /*#__PURE__*/_jsx(PickupNotes, {}), /*#__PURE__*/_jsx(Address, {
-        type: ADDRESS_TYPE_BILLING
-      }), /*#__PURE__*/_jsx(Address, {
-        type: ADDRESS_TYPE_SHIPPING
-      }), /*#__PURE__*/_jsx(GuestCheckoutOptIn, {}), /*#__PURE__*/_jsx(ShippingMethods, {}), /*#__PURE__*/_jsx(PaymentProvider, {}), /*#__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, {})
-      })
+const GuestCheckout = () => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsxs(CheckoutProvider, {
+    pathPattern: GUEST_CHECKOUT_PAYMENT_PATTERN,
+    orderInitialized: true,
+    orderReadOnly: true,
+    isGuestCheckout: true,
+    children: [/*#__PURE__*/_jsx(Header, {
+      stepFrom: 2,
+      stepTo: 2
+    }), /*#__PURE__*/_jsxs("div", {
+      className: classes.root,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: classes.main,
+        children: [/*#__PURE__*/_jsx(Pickup, {}), /*#__PURE__*/_jsx(PickupNotes, {}), /*#__PURE__*/_jsx(Address, {
+          type: ADDRESS_TYPE_BILLING
+        }), /*#__PURE__*/_jsx(Address, {
+          type: ADDRESS_TYPE_SHIPPING
+        }), /*#__PURE__*/_jsx(GuestCheckoutOptIn, {}), /*#__PURE__*/_jsx(ShippingMethods, {}), /*#__PURE__*/_jsx(PaymentProvider, {}), /*#__PURE__*/_jsx(ResponsiveContainer, {
+          breakpoint: "<md",
+          appAlways: true,
+          children: /*#__PURE__*/_jsx(Summary, {})
+        }), /*#__PURE__*/_jsx(Actions, {})]
+      }), /*#__PURE__*/_jsx("div", {
+        className: classes.side,
+        children: /*#__PURE__*/_jsx(ResponsiveContainer, {
+          breakpoint: ">=md",
+          webOnly: true,
+          children: /*#__PURE__*/_jsx(Summary, {})
+        })
+      })]
     })]
-  })]
-});
+  });
+};
 export default GuestCheckout;

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

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