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

package/favorites/components/Item/Item.js

@@ -5,7 +5,7 @@ import { MODAL_VARIANT_SELECT } from '@shopgate/pwa-ui-shared/Dialog/constants';
 import { ProductImage, ITEM_PATH, PriceInfo, isBaseProduct as isBaseProductSelector, isProductOrderable, hasProductVariants, ProductListEntryProvider } from '@shopgate/engage/product';
 import { bin2hex, showModal as showModalAction, historyPush as historyPushAction, getThemeSettings, i18n } from '@shopgate/engage/core';
 import { hasNewServices } from '@shopgate/engage/core/helpers';
-import { Link, TextLink, SurroundPortals } from '@shopgate/engage/components';
+import { Link, TextLink, SurroundPortals, Typography } from '@shopgate/engage/components';
 import { makeIsRopeProductOrderable, getPreferredLocation, StockInfoLists } from '@shopgate/engage/locations';
 import { FAVORITES_PRODUCT_NAME, FAVORITES_PRODUCT_PRICE, FAVORITES_ADD_TO_CART, FAVORITES_AVAILABILITY_TEXT } from '@shopgate/engage/favorites';
 import { broadcastLiveMessage } from '@shopgate/engage/a11y';
@@ -110,9 +110,7 @@ const useStyles = makeStyles()(theme => ({
   },
   priceInfo: {
     wordBreak: 'break-word',
-    fontSize: '0.875rem',
     lineHeight: '0.875rem',
-    color: theme.palette.text.secondary,
     padding: theme.spacing(0.5, 0)
   },
   titleWrapper: {
@@ -124,10 +122,6 @@ const useStyles = makeStyles()(theme => ({
     marginRight: 10,
     flex: 1
   },
-  title: {
-    fontSize: 17,
-    fontWeight: 600
-  },
   removeContainer: {
     display: 'flex',
     flexShrink: 0,
@@ -199,8 +193,11 @@ const FavoriteItem = ({
       });
       return false;
     }
-    if (hasNewServices() && !isRopeProductOrderable) {
-      // Product is not orderable for ROPE. So users need to do some corrections. Just redirect.
+    if (hasNewServices() && isRopeProductOrderable === false) {
+      // Product is explicitly not orderable for ROPE (a fulfillment method other than direct ship
+      // that isn't available for the current product/location). Users need to correct the
+      // selection on the PDP, so redirect. `null` means ROPE doesn't apply (direct ship) and must
+      // fall through to the regular add-to-cart below.
       historyPush({
         pathname: productLink
       });
@@ -285,10 +282,9 @@ const FavoriteItem = ({
                   href: productLink,
                   tag: "span",
                   className: cx(classes.titleContainer, 'engage__favorites__item__title-container'),
-                  children: /*#__PURE__*/_jsx("span", {
-                    className: classes.title
-                    // eslint-disable-next-line react/no-danger
-                    ,
+                  children: /*#__PURE__*/_jsx(Typography, {
+                    component: "span",
+                    fontWeight: "bold",
                     dangerouslySetInnerHTML: {
                       __html: `${product.name}`
                     }
@@ -341,10 +337,16 @@ const FavoriteItem = ({
                       unitPrice: defaultPrice,
                       className: classes.price
                     })]
-                  }), /*#__PURE__*/_jsx(PriceInfo, {
-                    product: product,
-                    currency: currency,
-                    className: classes.priceInfo
+                  }), /*#__PURE__*/_jsx(Typography, {
+                    variant: "body2",
+                    component: "div",
+                    color: "textSecondary",
+                    className: classes.priceInfo,
+                    children: /*#__PURE__*/_jsx(PriceInfo, {
+                      product: product,
+                      currency: currency,
+                      className: classes.priceInfo
+                    })
                   })]
                 })
               })]

package/favorites/components/Item/ItemCharacteristics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemCharacteristics.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Item/ItemCharacteristics.jsx"],"names":[],"mappings":";AAYA;;;GAGG;AACH,0DAHW,MAAM,GACJ,GAAG,CAmBf;;;;;;;;;;sBAhCqB,YAAY"}
+{"version":3,"file":"ItemCharacteristics.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Item/ItemCharacteristics.jsx"],"names":[],"mappings":";AAIA;;;GAGG;AACH,0DAHW,MAAM,GACJ,GAAG,CAkBf;;;;;;;;;;sBAvBqB,YAAY"}

package/favorites/components/Item/ItemCharacteristics.js

@@ -1,25 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@shopgate/engage/styles';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
-  property: {
-    fontSize: 14,
-    color: 'var(--color-text-medium-emphasis)',
-    fontWeight: 400
-  }
-});
+import { Typography } from '@shopgate/engage/components';
 
 /**
  * @param {Object} props The component props
  * @returns {JSX}
  */
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const ItemCharacteristics = ({
   characteristics
 }) => {
-  const {
-    classes
-  } = useStyles();
   if (!characteristics || characteristics.length === 0) {
     return null;
   }
@@ -27,8 +17,10 @@ const ItemCharacteristics = ({
     children: characteristics.map(({
       label,
       value
-    }) => /*#__PURE__*/_jsxs("li", {
-      className: classes.property,
+    }) => /*#__PURE__*/_jsxs(Typography, {
+      variant: "body2",
+      component: "li",
+      color: "textSecondary",
       children: [label, ': ', value]
     }, `${label}-${value}`))
   });

package/favorites/components/Item/ItemNotes.js

@@ -3,18 +3,16 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { i18n } from '@shopgate/engage/core';
 import { makeStyles } from '@shopgate/engage/styles';
-import { getWishlistItemNotesEnabled } from "../../../core/selectors/shopSettings";
+import { Typography } from '@shopgate/engage/components';
+import { getWishlistItemNotesEnabled } from '@shopgate/engage/settings/selectors/shopSettings';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexWrap: 'wrap',
     alignItems: 'center'
   },
   addCommentButton: {
-    fontSize: 17,
-    color: 'var(--color-secondary)',
-    fontWeight: 500,
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -22,14 +20,6 @@ const useStyles = makeStyles()(theme => ({
     paddingRight: 0,
     textAlign: 'left'
   },
-  comment: {
-    fontSize: 17,
-    color: theme.palette.text.primary,
-    fontWeight: 500,
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  },
   notes: {
     paddingRight: 4,
     fontStyle: 'italic'
@@ -64,13 +54,15 @@ const ItemNotes = ({
   if (!wishlistItemNotesEnabled) {
     return null;
   }
-  /* eslint-disable jsx-a11y/aria-role */
   return /*#__PURE__*/_jsxs("div", {
     className: classes.root,
     children: [notes && /*#__PURE__*/_jsxs("span", {
-      role: "text",
-      children: [/*#__PURE__*/_jsx("span", {
-        className: classes.comment,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        component: "span",
+        color: "textPrimary",
+        fontWeight: "medium",
+        noWrap: true,
         children: `${i18n.text('favorites.comments.notes')}: `
       }), /*#__PURE__*/_jsx("span", {
         className: classes.notes,
@@ -83,7 +75,13 @@ const ItemNotes = ({
         onClick: onClickOpenComment,
         className: classes.addCommentButton,
         ref: notesButtonRef,
-        children: notes ? i18n.text('favorites.comments.edit') : i18n.text('favorites.comments.add')
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          component: "span",
+          color: "secondary",
+          fontWeight: "medium",
+          children: notes ? i18n.text('favorites.comments.edit') : i18n.text('favorites.comments.add')
+        })
       }), notes && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx("span", {
           "aria-hidden": true,
@@ -92,12 +90,17 @@ const ItemNotes = ({
           type: "button",
           onClick: onClickDeleteComment,
           className: classes.addCommentButton,
-          children: i18n.text('favorites.comments.delete')
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            component: "span",
+            color: "secondary",
+            fontWeight: "medium",
+            children: i18n.text('favorites.comments.delete')
+          })
         })]
       })]
     })]
   });
-  /* eslint-enable jsx-a11y/aria-role */
 };
 ItemNotes.defaultProps = {
   notes: null,

package/favorites/components/Item/ItemQuantity.js

@@ -2,7 +2,7 @@ import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
-import { getWishlistItemQuantityEnabled } from "../../../core/selectors/shopSettings";
+import { getWishlistItemQuantityEnabled } from '@shopgate/engage/settings/selectors/shopSettings';
 import UnitQuantityPicker from "../../../product/components/UnitQuantityPicker/UnitQuantityPicker";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({

package/favorites/components/List/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../favorites/components/List/List.jsx"],"names":[],"mappings":";;;;;;;;;;;QA2EY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAxED,YAAY"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../favorites/components/List/List.jsx"],"names":[],"mappings":";;;;;;;;;;;QAwEY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBArED,YAAY"}

package/favorites/components/List/List.js

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { showModal } from '@shopgate/engage/core/actions';
 import { Accordion, Card, ConditionalWrapper } from '@shopgate/engage/components';
 import { makeGetFavorites, getUseGetFavoriteIdsPipeline } from '@shopgate/pwa-common-commerce/favorites/selectors';
@@ -11,15 +10,12 @@ import ListAccordionLabel from "./ListAccordionLabel";
 import ListContent from "./ListContent";
 import ListAccordionHeader from "./ListAccordionHeader";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   root: {
     margin: '8px 8px 10px'
   },
   rootNoFavoritesLists: {
-    background: colors.light,
+    background: theme.palette.background.surface,
     flexGrow: 1,
     paddingBottom: theme.spacing(1),
     paddingLeft: '16px',

package/favorites/components/ListChooser/ListChooserItem.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { makeIsProductOnSpecificFavoriteList } from '@shopgate/pwa-common-commerce/favorites/selectors';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { getWishlistItemQuantityEnabled } from "../../../core/selectors/shopSettings";
+import { getWishlistItemQuantityEnabled } from '@shopgate/engage/settings/selectors/shopSettings';
 
 /**
  * @returns {Object}

package/favorites/components/Lists/Lists.js

@@ -9,10 +9,10 @@ import updateFavoritesList from '@shopgate/pwa-common-commerce/favorites/actions
 import removeFavoritesList from '@shopgate/pwa-common-commerce/favorites/actions/removeFavoritesList';
 import { removeFavorites } from '@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';
 import addProductsToCart from '@shopgate/pwa-common-commerce/cart/actions/addProductsToCart';
-import { FulfillmentSheet, MULTI_LINE_RESERVE, STAGE_SELECT_STORE } from '@shopgate/engage/locations';
+import { FulfillmentSheet, MULTI_LINE_RESERVE, STAGE_SELECT_STORE, DIRECT_SHIP } from '@shopgate/engage/locations';
 import { openSheet } from '@shopgate/engage/locations/providers/FulfillmentProvider';
-import { getWishlistMode } from '@shopgate/engage/core/selectors/shopSettings';
-import { WISHLIST_MODE_PERSIST_ON_ADD } from '@shopgate/engage/core/constants/shopSettings';
+import { getWishlistMode } from '@shopgate/engage/settings/selectors/shopSettings';
+import { WISHLIST_MODE_PERSIST_ON_ADD } from '@shopgate/engage/settings/constants/shopSettings';
 import { getPreferredLocation, getPreferredFulfillmentMethod, getUserSearch } from '@shopgate/engage/locations/selectors';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { makeGetEnabledFulfillmentMethods } from '@shopgate/engage/core/config';
@@ -174,6 +174,18 @@ const FavoriteLists = ({
       [activeFulfillmentMethod] = availableFulfillmentMethods;
     }
 
+    // Direct ship needs neither a location nor an explicit method selection. When it's the only
+    // available fulfillment method for the product, add straight to the cart without prompting
+    // the user with the fulfillment method chooser.
+    if (!activeFulfillmentMethod && availableFulfillmentMethods.length === 1 && availableFulfillmentMethods[0] === DIRECT_SHIP) {
+      addToCart([{
+        productId: product.id,
+        quantity
+      }]);
+      promiseRef.current.resolve();
+      return promise;
+    }
+
     // If all options are already configured immediately add it to the cart.
     if (activeFulfillmentMethod && activeLocation) {
       addToCart([{

package/favorites/components/Lists/ListsModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListsModal.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Lists/ListsModal.jsx"],"names":[],"mappings":";AAoBA;;;;;;GAMG;AACH,4DALG;IAAyC,IAAI;IACrB,SAAS;IACT,SAAS;CACjC,GAAU,GAAG,CAAC,OAAO,CAkDvB;;;;;;;;;;;;sBA1EqB,YAAY"}
+{"version":3,"file":"ListsModal.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Lists/ListsModal.jsx"],"names":[],"mappings":";AAiBA;;;;;;GAMG;AACH,4DALG;IAAyC,IAAI;IACrB,SAAS;IACT,SAAS;CACjC,GAAU,GAAG,CAAC,OAAO,CAgDvB;;;;;;;;;;;;sBArEqB,YAAY"}

package/favorites/components/Lists/ListsModal.js

@@ -1,22 +1,19 @@
-import "core-js/modules/es.array.includes.js";
 import React, { useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { hasNewServices, i18n } from '@shopgate/engage/core/helpers';
 import { Dialog, TextField } from '@shopgate/engage/components';
-import { themeName } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const isIos = themeName.includes('ios');
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     display: 'flex',
     flexDirection: 'column'
   },
   input: {
     textAlign: 'left',
-    fontSize: '1rem'
+    fontSize: theme.typography.body1.fontSize
   }
-});
+}));
 
 /**
  * @param {Object} props Props
@@ -62,11 +59,7 @@ const ListsModal = ({
         children: i18n.text(`favorites.${type}_modal.message`)
       }), /*#__PURE__*/_jsx(TextField, {
         name: "name",
-        ...(isIos ? {
-          placeholder: i18n.text(`favorites.${type}_modal.label`)
-        } : {
-          label: i18n.text(`favorites.${type}_modal.label`)
-        }),
+        placeholder: i18n.text(`favorites.${type}_modal.label`),
         maxLength: textFieldMaxLength,
         onChange: onChange,
         value: input,

package/favorites/components/RemoveButton/RemoveButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RemoveButton.d.ts","sourceRoot":"","sources":["../../../../favorites/components/RemoveButton/RemoveButton.jsx"],"names":[],"mappings":";AAyBA;;;GAGG;AACH;;IAFa,GAAG,CAiBf;;;;;;sBA3CqB,YAAY"}
+{"version":3,"file":"RemoveButton.d.ts","sourceRoot":"","sources":["../../../../favorites/components/RemoveButton/RemoveButton.jsx"],"names":[],"mappings":";AAwBA;;;GAGG;AACH;;IAFa,GAAG,CAiBf;;;;;;sBA1CqB,YAAY"}

package/favorites/components/RemoveButton/RemoveButton.js

@@ -10,9 +10,8 @@ const useStyles = makeStyles()(theme => ({
     display: 'flex',
     borderRadius: '50%',
     color: theme.palette.text.primary,
-    fontSize: '1.5rem',
+    fontSize: theme.components.icon.medium,
     padding: '0 8px 8px 8px',
-    lineHeight: 1,
     outline: 0,
     justifyContent: 'center',
     alignItems: 'center',

package/filter/components/FilterItem/index.js

@@ -1,17 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   item: {
-    background: colors.light,
-    marginTop: 4
+    background: theme.palette.background.surface,
+    marginTop: 4,
+    borderTop: `1px solid ${theme.components.separatorLine.borderColor}`
   }
-});
+}));
 
 /**
  * Wraps a single filter page item.

package/filter/components/FilterItem/spec.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import Item from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 describe('Filter: <Item />', () => {
   it('should render', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Item, {
+    const wrapper = render(/*#__PURE__*/_jsx(Item, {
       children: /*#__PURE__*/_jsx("div", {
         children: "Some"
       })
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
 });

package/filter/components/FilterPageContent/components/Selector/components/Selected/spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import Selected from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 const values = [{
@@ -11,16 +11,16 @@ const values = [{
 }];
 describe('Filter: <Selected />', () => {
   it('should not render without selected', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Selected, {
+    const wrapper = render(/*#__PURE__*/_jsx(Selected, {
       values: values
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
   it('should render with selected', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Selected, {
+    const wrapper = render(/*#__PURE__*/_jsx(Selected, {
       values: values,
       selected: ['foo']
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
 });

package/filter/components/FilterPageContent/components/Selector/components/Toggle/index.js

@@ -2,7 +2,7 @@ import React, { memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   toggle: {
     display: 'flex',
     flexFlow: 'row no-wrap',
@@ -27,10 +27,10 @@ const useStyles = makeStyles()(() => ({
     maxWidth: '65%'
   },
   closed: {
-    fontWeight: 'normal'
+    fontWeight: theme.typography.fontWeightRegular
   },
   open: {
-    fontWeight: 'bold'
+    fontWeight: theme.typography.fontWeightBold
   }
 }));
 

package/filter/components/FilterPageContent/components/Selector/components/Toggle/spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'enzyme';
+import { render } from '@testing-library/react';
 import Toggle from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Toggle />', () => {
@@ -7,21 +7,21 @@ describe('<Toggle />', () => {
     const wrapper = render(/*#__PURE__*/_jsx(Toggle, {
       label: "somelabel"
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
   it('should render without selected as open', () => {
     const wrapper = render(/*#__PURE__*/_jsx(Toggle, {
       label: "somelabel",
       open: true
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
   it('should render with selected', () => {
     const wrapper = render(/*#__PURE__*/_jsx(Toggle, {
       label: "somelabel",
       selected: "Some, Thing, Selected"
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
   it('should render with selected as open', () => {
     const wrapper = render(/*#__PURE__*/_jsx(Toggle, {
@@ -29,6 +29,6 @@ describe('<Toggle />', () => {
       selected: "Some, Thing, Selected",
       open: true
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
 });

package/filter/components/FilterPageContent/components/Selector/components/ValueButton/index.js

@@ -1,11 +1,10 @@
 import React, { memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => {
+const useStyles = makeStyles()(theme => {
   const inactive = {
-    border: `1px solid ${themeColors.darkGray}`,
+    border: `1px solid ${theme.components.border.medium}`,
     borderRadius: 2,
     color: 'inherit',
     height: 42,
@@ -25,8 +24,8 @@ const useStyles = makeStyles()(() => {
     inactive,
     active: {
       ...inactive,
-      borderColor: 'var(--color-secondary)',
-      color: 'var(--color-secondary)'
+      borderColor: theme.palette.secondary.main,
+      color: theme.palette.secondary.main
     }
   };
 });

package/filter/components/FilterPageContent/components/Selector/spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import Selector from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/core', () => ({
@@ -23,11 +23,11 @@ const values = [{
 }];
 describe('Filter: <Selector />', () => {
   it('should render with minimum props', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Selector, {
+    const wrapper = render(/*#__PURE__*/_jsx(Selector, {
       id: "foo",
       label: "bar",
       values: values
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
 });

package/filter/components/PriceSlider/components/Label/index.js

@@ -1,7 +1,7 @@
 import "core-js/modules/es.string.replace.js";
 import React, { memo, useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import appConfig, { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import appConfig from '@shopgate/pwa-common/helpers/config';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { I18n } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
@@ -9,14 +9,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   currency
 } = appConfig;
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   price: {
-    color: 'var(--color-secondary)',
+    color: theme.palette.secondary.main,
     display: 'inline-block',
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     textAlign: 'center'
   },
   editableContainer: {
@@ -35,20 +32,19 @@ const useStyles = makeStyles()({
     margin: 0,
     border: '1px solid transparent',
     borderRadius: 3,
-    lineHeight: 1,
     ':focus': {
-      background: colors.light,
+      background: theme.components.input.background,
       textIndent: 0,
-      borderColor: colors.shade5
+      borderColor: theme.components.border.medium
     },
     [responsiveMediaQuery('>=xs', {
       webOnly: true
     })]: {
-      borderColor: 'var(--color-primary)',
+      borderColor: theme.palette.primary.main,
       padding: '4px 0',
       top: -4,
       ':focus': {
-        borderColor: 'var(--color-primary)'
+        borderColor: theme.palette.primary.main
       }
     }
   },
@@ -63,7 +59,7 @@ const useStyles = makeStyles()({
     whiteSpace: 'nowrap',
     border: 0
   }
-});
+}));
 
 /**
  * The filter price range slider label component.

package/filter/components/PriceSlider/components/Label/spec.js

@@ -1,17 +1,26 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+import { I18n } from '@shopgate/engage/components';
 import Label from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components');
 jest.mock('@shopgate/engage/core');
+beforeEach(() => {
+  I18n.Text = ({
+    children
+  }) => children;
+  I18n.Placeholder = ({
+    children
+  }) => children;
+});
 describe('PriceSlider: <Label />', () => {
   it('should render', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Label, {
+    const wrapper = render(/*#__PURE__*/_jsx(Label, {
       onChange: () => {},
       priceLength: "5",
       priceMax: 999,
       priceMin: 25
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.container.firstChild).toMatchSnapshot();
   });
 });