@shopgate/engage 7.31.6 → 7.32.0-beta.10

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

@@ -0,0 +1,57 @@
+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 createButtonMock = () => function Button(props) {
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    className: props.className,
+    disabled: props.disabled,
+    "data-color": props.color,
+    "data-href": props.href,
+    children: props.children
+  });
+};
+module.exports = {
+  createSurroundPortalsMock,
+  createCartTotalLineMock,
+  createButtonMock
+};
+
+/* 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/CategoryImage/index.js

@@ -1,37 +1,44 @@
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Image } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import connect from "./connector";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  root: {
+    borderRadius: theme.shape.borderRadius,
+    overflow: 'hidden'
+  }
+}));
 
 /**
  * The CategoryImage component
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const CategoryImage = ({
   className,
   src,
   placeholderSrc
 }) => {
-  const [showPlaceholder, setShowPlaceholder] = useState(!src);
-  const onImageError = useCallback(() => {
-    setShowPlaceholder(true);
-  }, [setShowPlaceholder]);
-  if (!showPlaceholder) {
-    return /*#__PURE__*/_jsx(Image, {
-      className: className,
-      src: src,
-      onError: onImageError
-    });
-  }
-  if (!placeholderSrc) {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  if (!src && !placeholderSrc) {
     return null;
   }
   return /*#__PURE__*/_jsx(Image, {
-    className: className,
-    src: placeholderSrc
-  }, "placeholder");
+    className: cx(classes.root, className),
+    src: src
+    // Unwrapped, so the fallback renders into the container the outer Image already provides
+    // rather than nesting a second aspect ratio box inside it.
+    ,
+    placeholder: placeholderSrc ? /*#__PURE__*/_jsx(Image, {
+      unwrapped: true,
+      src: placeholderSrc
+    }) : null
+  });
 };
 CategoryImage.defaultProps = {
   src: null,

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,8 @@ 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 { ResponsiveContainer, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { ResponsiveBackButton } from "../ResponsiveBackButton";
 import AddressCard from "../../../account/components/Profile/ProfileAddressCard";
 import { useProfileContext } from "../../../account/components/Profile/Profile.provider";
@@ -30,41 +31,28 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
   push: props => dispatch(historyPush(props))
 });
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(() => ({
   container: {
     display: 'flex',
     flexDirection: 'row',
     flexWrap: 'wrap',
-    margin: -4,
     padding: 16
   },
   headline: {
     padding: 16,
-    fontSize: '2.125rem',
-    fontWeight: 'normal',
-    margin: 0,
-    lineHeight: '2.25rem'
+    margin: 0
   },
   button: {
-    '&&': {
-      marginTop: 8,
-      marginRight: 16,
-      backgroundColor: 'var(--color-primary)',
-      borderRadius: 5,
-      fontSize: 14,
-      textTransform: 'none',
-      padding: 0,
-      [responsiveMediaQuery('<md', {
-        webOnly: false
-      })]: {
-        width: '100%',
-        marginRight: 0
-      }
+    marginTop: 8,
+    marginRight: 16,
+    textTransform: 'none',
+    [responsiveMediaQuery('<md', {
+      webOnly: false
+    })]: {
+      width: '100%',
+      marginRight: 0
     }
   },
-  ripple: {
-    padding: '8px 16px'
-  },
   actions: {
     display: 'flex',
     justifyContent: 'flex-end',
@@ -76,7 +64,7 @@ const useStyles = makeStyles()({
       flex: 1
     }
   }
-});
+}));
 
 /**
  * @returns {JSX}
@@ -117,7 +105,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
       })]
@@ -132,10 +122,10 @@ const AddressList = ({
       }, contact.id))
     }), /*#__PURE__*/_jsx("div", {
       className: classes.actions,
-      children: /*#__PURE__*/_jsx(RippleButton, {
+      children: /*#__PURE__*/_jsx(Button, {
+        color: "primary",
+        size: "small",
         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,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
       })]

package/checkout/components/Checkout/CheckoutActions.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { RippleButton, SurroundPortals } from '@shopgate/engage/components';
+import { SurroundPortals } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useCheckoutContext } from "../../hooks/common";
 import { SupplementalContent } from "../SupplementalContent";
@@ -30,8 +31,8 @@ const Actions = () => {
     paymentButton: PaymentButton,
     isButtonLocked
   } = useCheckoutContext();
-  const originalButton = /*#__PURE__*/_jsx(RippleButton, {
-    type: "secondary",
+  const originalButton = /*#__PURE__*/_jsx(Button, {
+    color: "primary",
     onClick: handleSubmitOrder,
     disabled: isButtonLocked,
     children: i18n.text('checkout.submit_order')

package/checkout/components/Checkout/CheckoutAddress.js

@@ -2,7 +2,7 @@ import "core-js/modules/es.string.replace.js";
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { Link } from '@shopgate/engage/components';
+import { Link, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useProfileContext } from "../../../account/components/Profile/Profile.provider";
 import Section from "./CheckoutSection";
@@ -21,14 +21,10 @@ const useStyles = makeStyles()(theme => ({
   card: {
     display: 'flex',
     flexDirection: 'column',
-    fontSize: 15,
     margin: '8px 0'
   },
   link: {
-    fontSize: '0.875rem',
-    color: 'var(--color-primary)',
-    textTransform: 'uppercase',
-    textAlign: 'center'
+    textTransform: 'uppercase'
   }
 }));
 
@@ -97,23 +93,39 @@ const CheckoutAddress = ({
       editLink: editLink,
       editLabel: editLabel,
       children: address ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("span", {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          variant: "body2",
           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: [/*#__PURE__*/_jsx(Typography, {
+            component: "span",
+            variant: "body2",
             children: address.emailAddress
-          }), /*#__PURE__*/_jsx("span", {
+          }), /*#__PURE__*/_jsx(Typography, {
+            component: "span",
+            variant: "body2",
             children: address.mobile
           })]
-        }), /*#__PURE__*/_jsx("span", {
+        }), /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          variant: "body2",
           children: address.address1
-        }), address.address2?.length ? /*#__PURE__*/_jsx("span", {
+        }), address.address2?.length ? /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          variant: "body2",
           children: address.address2
-        }) : null, address.address3?.length ? /*#__PURE__*/_jsx("span", {
+        }) : null, address.address3?.length ? /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          variant: "body2",
           children: address.address3
-        }) : null, address.address4?.length ? /*#__PURE__*/_jsx("span", {
+        }) : null, address.address4?.length ? /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          variant: "body2",
           children: address.address4
-        }) : null, address.postalCode || address.region || address.city || address.country ? /*#__PURE__*/_jsx("span", {
+        }) : null, address.postalCode || address.region || address.city || address.country ? /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          variant: "body2",
           children: i18n.text(`checkout.${type}.address`, {
             postalCode: address.postalCode || '',
             region: iso3166?.[address.country]?.divisions?.[address.region] || address.region || '',
@@ -124,7 +136,13 @@ const CheckoutAddress = ({
       }) : /*#__PURE__*/_jsx(Link, {
         href: selectAddressLink,
         className: classes.link,
-        children: i18n.text(`checkout.${type}.select_address`)
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          color: "primary",
+          component: "div",
+          align: "center",
+          children: i18n.text(`checkout.${type}.select_address`)
+        })
       })
     })
   });

package/checkout/components/Checkout/CheckoutHeader.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ResponsiveContainer } from '@shopgate/engage/components';
+import { ResponsiveContainer, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from "../../../core/helpers/i18n";
 import { ResponsiveBackButton } from "../ResponsiveBackButton";
@@ -13,18 +13,11 @@ const useStyles = makeStyles()({
     alignItems: 'flex-end'
   },
   headline: {
-    fontSize: '2.125rem',
-    fontWeight: 'normal',
-    margin: 0,
-    lineHeight: '2.25rem'
+    margin: 0
   },
   step: {
-    fontSize: '1rem',
-    lineHeight: 1,
-    color: 'var(--color-secondary)',
     paddingLeft: 16,
     margin: 0,
-    fontWeight: '400',
     paddingBottom: 2
   }
 });
@@ -46,10 +39,15 @@ const CheckoutTitle = ({
     breakpoint: ">xs",
     children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsxs("div", {
       className: classes.title,
-      children: [/*#__PURE__*/_jsx("h1", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h1",
+        component: "h1",
+        fontWeight: "regular",
         className: classes.headline,
         children: i18n.text(headline)
-      }), stepFrom !== null ? /*#__PURE__*/_jsx("h2", {
+      }), stepFrom !== null ? /*#__PURE__*/_jsx(Typography, {
+        component: "h2",
+        color: "secondary",
         className: classes.step,
         children: i18n.text('checkout.steps', {
           from: stepFrom,

package/checkout/components/Checkout/CheckoutPickupContactForm.js

@@ -24,13 +24,13 @@ const useStyles = makeStyles()(theme => ({
     },
     ' .pickupFormPickupPerson .label span': {
       color: theme.palette.text.primary,
-      fontWeight: 'bold'
+      fontWeight: theme.typography.fontWeightBold
     },
     ' .pickupFormPickupPerson .radioGroup': {
       marginTop: theme.spacing(1),
       flexDirection: 'row',
       ' .uncheckedIcon': {
-        color: 'var(--color-text-medium-emphasis)'
+        color: theme.palette.text.secondary
       }
     },
     ...StylePresets.getOutlinedFormFields(theme)

package/checkout/components/Checkout/CheckoutSection.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Card, Link } from '@shopgate/engage/components';
+import { Card, Link, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import CheckoutSectionInfo from "./CheckoutSectionInfo";
 import CheckoutSectionMessages from "./CheckoutSectionMessages";
@@ -8,27 +8,24 @@ import { i18n } from "../../../core/helpers/i18n";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   headline: {
-    fontSize: '1.25rem',
-    fontWeight: 'normal',
     margin: theme.spacing(0, 0, 1, 0),
-    color: theme.palette.text.primary,
     textTransform: 'none'
   },
   card: {
     display: 'flex',
     flexDirection: 'row',
-    fontSize: 15,
+    fontSize: theme.typography.body2.fontSize,
     width: '100%',
     overflow: 'inherit !important',
     marginBottom: theme.spacing(2),
     boxShadow: 'none',
-    background: 'var(--color-background-accent)',
+    background: theme.palette.background.emphasized,
     padding: theme.spacing(1, 2),
     margin: 0
   },
   cardWithForm: {
     background: 'inherit !important',
-    boxShadow: 'none  !important',
+    boxShadow: 'none !important',
     padding: '0px !important'
   },
   table: {
@@ -45,8 +42,10 @@ const useStyles = makeStyles()(theme => ({
     },
     ' tr:last-of-type td': {
       paddingTop: 8,
-      borderTop: '1px solid #979797',
-      fontWeight: '600'
+      borderTop: `1px solid ${theme.components.border.medium}`,
+      '& span': {
+        fontWeight: `${theme.typography.fontWeightBold} !important`
+      }
     }
   },
   actionsContainer: {
@@ -55,8 +54,6 @@ const useStyles = makeStyles()(theme => ({
     width: '100%'
   },
   link: {
-    fontSize: '0.875rem',
-    color: 'var(--color-primary)',
     textTransform: 'uppercase'
   },
   actions: {
@@ -86,7 +83,10 @@ const CheckoutSection = ({
     cx
   } = useStyles();
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [title && /*#__PURE__*/_jsx("h3", {
+    children: [title && /*#__PURE__*/_jsx(Typography, {
+      variant: "h3",
+      color: "textPrimary",
+      fontWeight: "regular",
       className: classes.headline,
       id: id,
       children: i18n.text(title)
@@ -116,7 +116,9 @@ const CheckoutSection = ({
               return /*#__PURE__*/_jsxs(Fragment, {
                 children: [/*#__PURE__*/_jsxs("tr", {
                   children: [/*#__PURE__*/_jsxs("td", {
-                    children: [/*#__PURE__*/_jsx("span", {
+                    children: [/*#__PURE__*/_jsx(Typography, {
+                      component: "span",
+                      variant: "body2",
                       className: cx({
                         [classes.labelWithInfoIcon]: !!info
                       }),
@@ -125,7 +127,11 @@ const CheckoutSection = ({
                       text: info
                     })]
                   }), /*#__PURE__*/_jsx("td", {
-                    children: text
+                    children: typeof text === 'string' ? /*#__PURE__*/_jsx(Typography, {
+                      component: "span",
+                      variant: "body2",
+                      children: text
+                    }) : text
                   })]
                 }), hasMessages && /*#__PURE__*/_jsx("tr", {
                   children: /*#__PURE__*/_jsxs("td", {
@@ -152,7 +158,12 @@ const CheckoutSection = ({
           tag: "a",
           className: classes.link,
           href: editLink,
-          children: i18n.text(editLabel)
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            component: "span",
+            color: "primary",
+            children: i18n.text(editLabel)
+          })
         })
       }) : null]
     })]