@shopgate/engage 7.31.4-beta.1 → 7.32.0-beta.1

package/cart/components/CartSummaryWide/CartSummaryWide.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { Typography } from '@shopgate/engage/components';
 import PaymentBarSubTotal from "../PaymentBar/PaymentBarSubTotal";
 import PaymentBarGrandTotal from "../PaymentBar/PaymentBarGrandTotal";
 import PaymentBarShippingCost from "../PaymentBar/PaymentBarShippingCost";
@@ -12,9 +12,6 @@ import PaymentBarPromotionCoupons from "../PaymentBar/PaymentBarPromotionCoupons
 import CartSummaryWideCheckoutButton from "./CartSummaryWideCheckoutButton";
 import CartSummaryWideFooter from "./CartSummaryWideFooter";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   container: {
     display: 'flex',
@@ -23,24 +20,19 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(2),
     width: 420
   },
-  headline: {
-    fontSize: '1.25rem',
-    fontWeight: 500,
-    lineHeight: '1.5rem'
-  },
   summary: {
-    background: 'var(--color-background-accent)',
+    background: theme.palette.background.emphasized,
     padding: theme.spacing(2)
   },
   total: {
-    fontSize: '1rem',
+    fontSize: theme.typography.body1.fontSize,
     padding: theme.spacing(1, 0),
     color: theme.palette.text.primary
   },
   grandTotal: {
-    fontSize: '1.25rem !important',
-    fontWeight: 500,
-    borderTop: `1px solid ${colors.shade4}`,
+    fontSize: `${theme.typography.h3.fontSize} !important`,
+    fontWeight: theme.typography.fontWeightMedium,
+    borderTop: `1px solid ${theme.components.border.medium}`,
     padding: theme.spacing(1, 0),
     color: theme.palette.text.primary,
     '&:last-child': {
@@ -59,8 +51,9 @@ const CartSummaryWide = () => {
   } = useStyles();
   return /*#__PURE__*/_jsxs("div", {
     className: classes.container,
-    children: [/*#__PURE__*/_jsx("h2", {
-      className: classes.headline,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h3",
+      component: "h2",
       children: i18n.text('checkout.summary.headline')
     }), /*#__PURE__*/_jsxs("div", {
       className: classes.summary,

package/cart/components/CartSummaryWide/CartSummaryWideCheckoutButton.js

@@ -1,7 +1,6 @@
 import React, { useContext, useMemo } from 'react';
 import { SurroundPortals, I18n, Link } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
 import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
 import { CHECKOUT_PATH } from '@shopgate/pwa-common/constants/RoutePaths';
@@ -9,9 +8,6 @@ import PropTypes from 'prop-types';
 import { CartContext } from "../../cart.context";
 import connect from "./CartSummaryWideCheckoutButton.connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   container: {
     display: 'flex',
@@ -19,14 +15,14 @@ const useStyles = makeStyles()(theme => ({
   },
   button: {
     width: '100%',
-    background: 'var(--color-button-cta)',
-    color: 'var(--color-button-cta-contrast)!important',
+    background: theme.components.ctaButton.background,
+    color: `${theme.contrastColor(theme.components.ctaButton.background)}!important`,
     borderRadius: 4,
     margin: theme.spacing(2, 0)
   },
   disabledButton: {
-    background: colors.shade7,
-    color: `${colors.shade4}!important`
+    background: theme.palette.action.disabledBackground,
+    color: `${theme.contrastColor(theme.palette.action.disabledBackground)}!important`
   }
 }));
 

package/cart/components/PaymentBar/PaymentBarCheckoutButton.js

@@ -1,7 +1,6 @@
 import React, { useContext, useMemo } from 'react';
 import { I18n, Link, SurroundPortals } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
 import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
 import { CHECKOUT_PATH } from '@shopgate/pwa-common/constants/RoutePaths';
@@ -9,21 +8,18 @@ import PropTypes from 'prop-types';
 import { CartContext } from "../../cart.context";
 import connect from "./PaymentBarCheckoutButton.connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   button: {
     width: '100%',
-    background: 'var(--color-button-cta)',
-    color: 'var(--color-button-cta-contrast)!important'
+    background: theme.components.ctaButton.background,
+    color: `${theme.contrastColor(theme.components.ctaButton.background)}!important`
   },
   disabledButton: {
     width: '100%',
-    background: colors.shade7,
-    color: `${colors.shade4}!important`
+    background: theme.palette.action.disabledBackground,
+    color: `${theme.contrastColor(theme.palette.action.disabledBackground)}!important`
   }
-});
+}));
 
 /**
  * Renders the cart payment bar checkout button.

package/cart/components/PaymentBar/PaymentBarContent.js

@@ -2,7 +2,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { isIOSTheme } from '@shopgate/engage/core';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import Grid from '@shopgate/pwa-common/components/Grid';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { CART_PAYMENT_BAR, CART_PAYMENT_BAR_TOTALS } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
@@ -15,14 +14,10 @@ import PaymentBarCheckoutButton from "./PaymentBarCheckoutButton";
 import PaymentBarPromotionCoupons from "./PaymentBarPromotionCoupons";
 import PaymentBarAppliedPromotions from "./PaymentBarAppliedPromotions";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors,
-  shadows
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   wrapper: {
-    background: colors.light,
-    boxShadow: shadows.cart.paymentBar,
+    background: theme.palette.background.surface,
+    boxShadow: '0 -4px 5px -2px rgba(0, 0, 0, 0.1)',
     position: 'relative',
     zIndex: 2,
     paddingBottom: 'var(--safe-area-inset-bottom)'
@@ -30,7 +25,6 @@ const useStyles = makeStyles()(theme => ({
   container: {
     padding: isIOSTheme() ? theme.spacing(1) : theme.spacing(2),
     paddingBottom: 0,
-    lineHeight: 1.45,
     flexWrap: 'wrap',
     flexDirection: 'column',
     minWidth: 'auto'
@@ -41,7 +35,7 @@ const useStyles = makeStyles()(theme => ({
     flexDirection: 'column'
   },
   checkoutButtonContainer: {
-    background: colors.light,
+    background: theme.palette.background.surface,
     alignItems: 'center',
     padding: isIOSTheme() ? theme.spacing(1) : theme.spacing(2),
     position: 'relative',

package/cart/components/PaymentBar/PaymentBarPromotionCouponMessages.js

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
 import { errorBehavior, isIOSTheme } from '@shopgate/engage/core';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { CartContext } from "../../cart.context";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -11,7 +12,6 @@ const useStyles = makeStyles()(theme => ({
     [responsiveMediaQuery('<=xs', {
       appAlways: true
     })]: {
-      fontSize: '0.75rem',
       paddingBottom: 3
     }
   },
@@ -70,7 +70,11 @@ const PaymentBarPromotionCouponMessages = ({
           [classes.warning]: type === 'warning',
           [classes.info]: type === 'info'
         }),
-        children: errorBehavior.getErrorMessage(message, additionalParams)
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          component: "span",
+          children: errorBehavior.getErrorMessage(message, additionalParams)
+        })
       })]
     })
   }, message));

package/cart/components/PaymentBar/PaymentBarPromotionCoupons.js

@@ -9,14 +9,14 @@ import { CartContext } from "../../cart.context";
 import PaymentBarPromotionalText from "./PaymentBarPromotionalText";
 import connect from "./PaymentBarPromotionCoupons.connector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   icon: {
-    backgroundColor: '#898989',
-    color: '#fff',
+    backgroundColor: theme.palette.grey.dark,
+    color: theme.contrastColor(theme.palette.grey.dark),
     borderRadius: 32,
     padding: 4,
     cursor: 'pointer',
-    fontSize: '0.75rem',
+    fontSize: theme.components.icon.xsmall,
     display: 'inline-flex',
     [responsiveMediaQuery('<=xs', {
       appAlways: true
@@ -32,7 +32,7 @@ const useStyles = makeStyles()({
     order: 1,
     flexShrink: 0
   }
-});
+}));
 
 /**
  * @returns {JSX}

package/cart/components/PaymentBar/PaymentBarPromotionalText.js

@@ -2,7 +2,7 @@ import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { nl2br, showModal as showModalAction, isIOSTheme } from '@shopgate/engage/core';
-import { InfoIcon } from '@shopgate/engage/components';
+import { InfoIcon, Typography } from '@shopgate/engage/components';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
 import { CartContext } from "../../cart.context";
@@ -13,7 +13,6 @@ const mapDispatchToProps = {
 const useStyles = makeStyles()(theme => ({
   textWrapper: {
     padding: theme.spacing(0.5, 0),
-    color: theme.palette.error.main,
     order: 3
   },
   line: {
@@ -21,22 +20,21 @@ const useStyles = makeStyles()(theme => ({
     [responsiveMediaQuery('<=xs', {
       appAlways: true
     })]: {
-      fontSize: '0.75rem',
       paddingBottom: 3,
       verticalAlign: 'text-bottom'
     }
   },
   iconWrapper: {
     cursor: 'pointer',
-    color: 'var(--color-primary)',
-    fontSize: '1.5rem',
+    color: theme.palette.primary.main,
+    fontSize: theme.components.icon.medium,
     display: 'inline-flex',
     verticalAlign: 'bottom',
     paddingBottom: 1,
     [responsiveMediaQuery('<=xs', {
       appAlways: true
     })]: {
-      fontSize: '1.375rem',
+      fontSize: theme.components.icon.medium,
       paddingBottom: 0
     }
   },
@@ -84,12 +82,13 @@ const PaymentBarPromotionalText = ({
     return /*#__PURE__*/_jsx(CartTotalLine, {
       className: classes.line,
       children: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("div", {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          component: "div",
+          color: "error",
           className: cx(classes.textWrapper, {
             [classes.loading]: isLoading
-          })
-          // eslint-disable-next-line react/no-danger
-          ,
+          }),
           dangerouslySetInnerHTML: {
             __html: nl2br(text)
           }

package/cart/components/PaymentBar/PaymentBarReserveButton.js

@@ -3,27 +3,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { I18n, SurroundPortals, RippleButton } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
 import { FulfillmentSheet, STAGE_RESERVE_FORM } from "../../../locations";
 import { CartContext } from "../../cart.context";
 import connect from "./PaymentBarReserveButton.connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   button: {
     width: '100%',
-    background: 'var(--color-button-cta)',
-    color: 'var(--color-button-cta-contrast)!important'
+    background: theme.components.ctaButton.background,
+    color: `${theme.contrastColor(theme.components.ctaButton.background)}!important`
   },
   disabledButton: {
     width: '100%',
-    background: colors.shade7,
-    color: `${colors.shade4}!important`
+    background: theme.palette.action.disabledBackground,
+    color: `${theme.contrastColor(theme.palette.action.disabledBackground)}!important`
   }
-});
+}));
 
 /**
  * The reserve button component.

package/cart/components/PaymentBar/testUtils/mockFactories.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react/prop-types, require-jsdoc */
+const React = require('react');
+const createSurroundPortalsMock = () => function SurroundPortals(props) {
+  return /*#__PURE__*/_jsx("div", {
+    "data-testid": "surround-portals",
+    children: props.children
+  });
+};
+const createCartTotalLineMock = () => {
+  function CartTotalLine(props) {
+    return /*#__PURE__*/_jsx("div", {
+      "data-testid": "cart-total-line",
+      className: props.className,
+      children: props.children
+    });
+  }
+  CartTotalLine.Label = function Label() {
+    return /*#__PURE__*/_jsx("div", {
+      "data-testid": "cart-total-line-label"
+    });
+  };
+  CartTotalLine.Amount = function Amount() {
+    return /*#__PURE__*/_jsx("div", {
+      "data-testid": "cart-total-line-amount"
+    });
+  };
+  CartTotalLine.Hint = function Hint() {
+    return /*#__PURE__*/_jsx("div", {
+      "data-testid": "cart-total-line-hint"
+    });
+  };
+  CartTotalLine.Spacer = function Spacer(props) {
+    return /*#__PURE__*/_jsx("div", {
+      "data-testid": "cart-total-line-spacer",
+      className: props.className
+    });
+  };
+  return CartTotalLine;
+};
+const createRippleButtonMock = () => function RippleButton(props) {
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    className: props.className,
+    disabled: props.disabled,
+    children: props.children
+  });
+};
+const createStylesMock = () => ({
+  makeStyles: () => () => () => ({
+    classes: {
+      button: 'button',
+      disabledButton: 'disabledButton'
+    }
+  })
+});
+module.exports = {
+  createSurroundPortalsMock,
+  createCartTotalLineMock,
+  createRippleButtonMock,
+  createStylesMock
+};
+
+/* eslint-enable react/prop-types, require-jsdoc */

package/cart/components/Substitution/connector.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { getSubstitutionPreferencesEnabled } from '@shopgate/engage/core/selectors/merchantSettings';
+import { getSubstitutionPreferencesEnabled } from '@shopgate/engage/settings/selectors/merchantSettings';
 
 /**
  * Maps the current application state to the component props.

package/cart/components/SupplementalContent/SupplementalContent.connector.js

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
-import { makeGetShopSettingByKey, SHOP_SETTING_CART_SUPPLEMENTAL_CONTENT } from '@shopgate/engage/core';
+import { makeGetShopSettingByKey } from '@shopgate/engage/settings/selectors/shopSettings';
+import { SHOP_SETTING_CART_SUPPLEMENTAL_CONTENT } from '@shopgate/engage/settings/constants/shopSettings';
 
 /**
  * Creates the mapStateToProps connector function.

package/cart/components/SupplementalContent/SupplementalContent.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Typography } from '@shopgate/engage/components';
 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 */': {
@@ -25,7 +24,7 @@ const useStyles = makeStyles()(theme => ({
     },
     ' a': {
       textDecoration: 'underline',
-      color: 'var(--color-primary)'
+      color: theme.palette.primary.main
     }
   }
 }));
@@ -46,15 +45,15 @@ const SupplementalContent = ({
   if (!text) {
     return null;
   }
-
-  /* eslint-disable react/no-danger */
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "caption",
+    component: "div",
+    color: "textSecondary",
     className: cx(classes.wrapper, className),
     dangerouslySetInnerHTML: {
       __html: text
     }
   });
-  /* eslint-enable react/no-danger */
 };
 SupplementalContent.defaultProps = {
   text: null,

package/category/components/CategoryImage/connector.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { getCategoryImagePlaceholder } from '@shopgate/engage/core';
+import { getCategoryImagePlaceholder } from '@shopgate/engage/settings/selectors/shopSettings';
 
 /**
  * Maps the current application state to the component props.

package/category/components/CategoryList/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 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';
@@ -12,21 +11,18 @@ import { getShowAllProductsFilters } from '@shopgate/engage/category';
 import { SheetList, TextLink } from '@shopgate/engage/components';
 import CategoryImage from "../CategoryImage";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   sheet: {
-    background: colors.light
+    background: theme.palette.background.surface
   },
   showAllProducts: {
-    fontWeight: 700
+    fontWeight: theme.typography.fontWeightBold
   },
   image: {
     width: '30px',
     marginRight: 8
   }
-});
+}));
 
 /**
  * The CategoryList component.

package/checkout/components/AddressBook/AddressList.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { getCheckoutBillingAddress, getCheckoutShippingAddress } from '@shopgate/engage/checkout/selectors/order';
 import { i18n, historyPush } from '@shopgate/engage/core';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { RippleButton, ResponsiveContainer } from '@shopgate/engage/components';
+import { RippleButton, ResponsiveContainer, Typography } from '@shopgate/engage/components';
 import { ResponsiveBackButton } from "../ResponsiveBackButton";
 import AddressCard from "../../../account/components/Profile/ProfileAddressCard";
 import { useProfileContext } from "../../../account/components/Profile/Profile.provider";
@@ -30,7 +30,7 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
   push: props => dispatch(historyPush(props))
 });
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     display: 'flex',
     flexDirection: 'row',
@@ -40,18 +40,15 @@ const useStyles = makeStyles()({
   },
   headline: {
     padding: 16,
-    fontSize: '2.125rem',
-    fontWeight: 'normal',
-    margin: 0,
-    lineHeight: '2.25rem'
+    margin: 0
   },
   button: {
     '&&': {
       marginTop: 8,
       marginRight: 16,
-      backgroundColor: 'var(--color-primary)',
+      backgroundColor: theme.palette.primary.main,
       borderRadius: 5,
-      fontSize: 14,
+      fontSize: theme.typography.body2.fontSize,
       textTransform: 'none',
       padding: 0,
       [responsiveMediaQuery('<md', {
@@ -76,7 +73,7 @@ const useStyles = makeStyles()({
       flex: 1
     }
   }
-});
+}));
 
 /**
  * @returns {JSX}
@@ -117,7 +114,9 @@ const AddressList = ({
     children: [/*#__PURE__*/_jsxs(ResponsiveContainer, {
       webOnly: true,
       breakpoint: ">xs",
-      children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsx("h1", {
+      children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsx(Typography, {
+        variant: "h1",
+        component: "h1",
         className: classes.headline,
         children: title
       })]

package/checkout/components/AddressBookContact/AddressBookContact.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { i18n, useRoute } from '@shopgate/engage/core';
-import { ResponsiveContainer } from '@shopgate/engage/components';
+import { ResponsiveContainer, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { ResponsiveBackButton } from "../ResponsiveBackButton";
 import ProfileContact from "../../../account/components/ProfileContact";
@@ -10,10 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 const useStyles = makeStyles()({
   headline: {
     padding: 16,
-    fontSize: '2.125rem',
-    fontWeight: 'normal',
-    margin: 0,
-    lineHeight: '2.25rem'
+    margin: 0
   }
 });
 
@@ -41,7 +38,10 @@ const AddressBookContact = () => {
     children: [/*#__PURE__*/_jsxs(ResponsiveContainer, {
       webOnly: true,
       breakpoint: ">xs",
-      children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsx("h1", {
+      children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsx(Typography, {
+        variant: "h1",
+        component: "h1",
+        fontWeight: "regular",
         className: classes.headline,
         children: title
       })]