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

package/filter/components/PriceSlider/index.js

@@ -2,15 +2,10 @@ import React, { useState, useEffect, useCallback, useRef, memo } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { RangeSlider } from '@shopgate/engage/components';
 import { FilterItem } from '@shopgate/engage/filter';
 import Label from "./components/Label";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  shadows,
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   wrapper: {
     padding: theme.spacing(1.5, 2)
@@ -20,20 +15,20 @@ const useStyles = makeStyles()(theme => ({
     paddingBottom: theme.spacing(2)
   },
   rangeSliderOuterRange: {
-    background: colors.darkGray,
+    background: theme.palette.grey.light,
     height: 8,
     position: 'relative'
   },
   rangeSliderRange: {
-    background: 'var(--color-secondary)',
+    background: theme.palette.secondary.main,
     position: 'absolute',
     height: '100%',
     marginLeft: theme.spacing(1),
     marginRight: theme.spacing(1)
   },
   rangeSliderHandleInner: {
-    background: colors.light,
-    boxShadow: shadows.filter.priceSlider,
+    background: theme.palette.common.white,
+    boxShadow: '0 0 8px rgba(0, 0, 0, .16)',
     borderRadius: '50%',
     width: theme.spacing(3),
     height: theme.spacing(3)

package/filter/components/PriceSlider/spec.js

@@ -1,8 +1,13 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import PriceSlider from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components');
+jest.mock("./components/Label", () => function MockLabel() {
+  return /*#__PURE__*/_jsx("div", {
+    "data-testid": "price-slider-label"
+  });
+});
 jest.mock('@shopgate/engage/filter', () => ({
   FilterItem: ({
     children
@@ -10,16 +15,16 @@ jest.mock('@shopgate/engage/filter', () => ({
 }));
 describe('Filter: <PriceSlider />', () => {
   it('should render with default props', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(PriceSlider, {
+    const wrapper = render(/*#__PURE__*/_jsx(PriceSlider, {
       id: "foo"
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.container.firstChild).toMatchSnapshot();
   });
   it('should render with custom props', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(PriceSlider, {
+    const wrapper = render(/*#__PURE__*/_jsx(PriceSlider, {
       id: "foo",
       values: [5, 50]
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.container.firstChild).toMatchSnapshot();
   });
 });

package/filter/selectors/index.js

@@ -1,8 +1,8 @@
 import { createSelector } from 'reselect';
 import { SORT_RELEVANCE } from '@shopgate/pwa-common/constants/DisplayOptions';
-import { SHOP_SETTING_PRODUCTS_SORT_ORDER } from "../../core/constants";
+import { SHOP_SETTING_PRODUCTS_SORT_ORDER } from '@shopgate/engage/settings/constants/shopSettings';
+import { makeGetShopSettingByKey } from '@shopgate/engage/settings/selectors/shopSettings';
 import { SORT_ORDER_RANK_DESC, SORT_SCOPE_CATEGORY, SORT_SCOPE_SEARCH, SORT_ORDER_NAME_ASC, isSortOrderSupported, mapSortOrderFromShopSettings } from "../constants/sort";
-import { makeGetShopSettingByKey } from "../../core/selectors/shopSettings";
 export * from '@shopgate/pwa-common-commerce/filter/selectors';
 
 /**

package/locations/components/Cart/CartContextMenuChangeFulfillmentContent.js

@@ -17,7 +17,7 @@ const useStyles = makeStyles()(theme => ({
   menuToggleButton: {
     height: theme.spacing(4),
     width: theme.spacing(4),
-    fontSize: theme.spacing(3),
+    fontSize: theme.components.icon.medium,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end'

package/locations/components/ChangeLocationButton/ChangeLocationButton.js

@@ -6,7 +6,7 @@ import { PRODUCT_FULFILLMENT_CHANGE_LOCATION } from "../../constants/Portals";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   button: {
-    fontSize: '0.625rem !important',
+    fontSize: `${theme.typography.caption.fontSize} !important`,
     letterSpacing: '0.05em',
     padding: `${theme.spacing(0.375, 0)} !important`,
     ' *': {

package/locations/components/FulfillmentPath/FulfillmentPathItem.js

@@ -1,19 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { i18n } from "../../../core";
 import { RadioGroupItem } from "../../../components";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   radioItem: {
     display: 'flex',
     alignItems: 'center',
     padding: theme.spacing(2, 0),
-    boxShadow: `0 1px 0 ${colors.darkGray}`
+    boxShadow: `0 1px 0 ${theme.components.border.light}`
   },
   itemLabel: {
     display: 'flex',
@@ -24,8 +20,6 @@ const useStyles = makeStyles()(theme => ({
   },
   radioGroupLabel: {
     flex: 1,
-    fontSize: '1rem',
-    lineHeight: 1.5,
     marginLeft: theme.spacing(1),
     marginBottom: theme.spacing(1)
   }

package/locations/components/FulfillmentSelector/FulfillmentSelector.connector.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
 import { hasProductVariants, isProductOrderable, makeIsBaseProductActive } from '@shopgate/engage/product';
+import { getProductShowAlternativeLocation } from '@shopgate/engage/settings/selectors/merchantSettings';
+import { MERCHANT_SETTINGS_PRODUCT_SHOW_ALTERNATIVE_LOCATION } from '@shopgate/engage/settings/constants/merchantSettings';
 import { DIRECT_SHIP, ROPIS, BOPIS } from "../../constants";
 import { makeGetEnabledFulfillmentMethods, makeGetFulfillmentPaths, makeUseLocationFulfillmentMethods } from "../../../core/config";
-import { getProductShowAlternativeLocation } from "../../../core/selectors";
-import { MERCHANT_SETTINGS_PRODUCT_SHOW_ALTERNATIVE_LOCATION } from "../../../core/constants";
 import { makeIsFulfillmentSelectorMethodEnabled, getPreferredLocation, makeGetLocationInventory, makeGetLocationFulfillmentMethods, getPreferredFulfillmentMethod, getProductFulfillmentMethods, getUserSearch } from "../../selectors";
 import { storeFulfillmentMethod } from "../../action-creators";
 

package/locations/components/FulfillmentSelector/FulfillmentSelectorAlternativeLocation.js

@@ -3,8 +3,8 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { withWidgetSettings } from '@shopgate/engage/core';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Grid, ResponsiveContainer, SurroundPortals } from '@shopgate/engage/components';
-import { MERCHANT_SETTINGS_PRODUCT_SHOW_ALTERNATIVE_LOCATION } from "../../../core/constants";
+import { Grid, ResponsiveContainer, SurroundPortals, Typography } from '@shopgate/engage/components';
+import { MERCHANT_SETTINGS_PRODUCT_SHOW_ALTERNATIVE_LOCATION } from '@shopgate/engage/settings/constants/merchantSettings';
 import { provideProductAlternativeLocation } from "../../action-creators";
 import { StockInfo } from "../StockInfo";
 import { useFulfillmentSelectorState } from "./FulfillmentSelector.hooks";
@@ -13,11 +13,7 @@ import { getProductAlternativeLocations } from "../../selectors";
 import { SORT_CLOSEST_LOCATION_WITH_INVENTORY } from "../../constants";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
-  locationName: {
-    color: 'var(--color-text-medium-emphasis)'
-  },
   gridClassName: {
-    fontSize: '0.825rem',
     padding: theme.spacing(0, 2, 1, 6)
   },
   itemColumn: {
@@ -91,8 +87,10 @@ function FulfillmentSelectorAlternativeLocation({
           grow: 1,
           shrink: 0,
           component: "div",
-          children: /*#__PURE__*/_jsx("div", {
-            className: classes.locationName,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            component: "div",
+            color: "textSecondary",
             children: alternativeLocation.name
           })
         }), /*#__PURE__*/_jsx(Grid.Item, {
@@ -109,8 +107,12 @@ function FulfillmentSelectorAlternativeLocation({
         webOnly: true,
         breakpoint: ">xs",
         children: /*#__PURE__*/_jsxs("div", {
-          className: classes.locationName,
-          children: [alternativeLocation.name, /*#__PURE__*/_jsx("span", {
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            component: "span",
+            color: "textSecondary",
+            children: alternativeLocation.name
+          }), /*#__PURE__*/_jsx("span", {
             className: classes.itemSpacer,
             children: /*#__PURE__*/_jsx(StockInfo, {
               productId: productId,

package/locations/components/FulfillmentSelector/FulfillmentSelectorHeader.js

@@ -4,7 +4,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     marginBottom: theme.spacing(0.5)
   }
 }));

package/locations/components/FulfillmentSelector/FulfillmentSelectorImpossibleError.js

@@ -7,11 +7,11 @@ import { AVAILABILITY_STATE_ALERT } from '@shopgate/engage/product';
 import { DIRECT_SHIP, ROPIS, BOPIS } from "../../constants";
 import { useFulfillmentSelectorState } from "./FulfillmentSelector.hooks";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
-    fontSize: '0.625rem'
+    fontSize: theme.typography.caption.fontSize
   }
-});
+}));
 
 /**
  * Renders the "not possible" error for each item.

package/locations/components/FulfillmentSelector/FulfillmentSelectorItem.js

@@ -23,7 +23,7 @@ const useStyles = makeStyles()(theme => ({
     flexShrink: 0,
     marginTop: '-1px',
     marginRight: theme.spacing(1),
-    color: 'var(--color-text-medium-emphasis)'
+    color: theme.palette.text.secondary
   },
   inactiveIconDisabled: {
     width: 24,
@@ -31,7 +31,7 @@ const useStyles = makeStyles()(theme => ({
     flexShrink: 0,
     marginTop: '-1px',
     marginRight: theme.spacing(1),
-    color: 'var(--color-text-medium-emphasis)',
+    color: theme.palette.text.secondary,
     opacity: 0.3
   },
   activeIcon: {
@@ -40,7 +40,7 @@ const useStyles = makeStyles()(theme => ({
     flexShrink: 0,
     marginTop: '-1px',
     marginRight: theme.spacing(1),
-    color: 'var(--color-primary)'
+    color: theme.palette.primary.main
   },
   activeIconDisabled: {
     width: 24,
@@ -48,7 +48,7 @@ const useStyles = makeStyles()(theme => ({
     flexShrink: 0,
     marginTop: '-1px',
     marginRight: theme.spacing(1),
-    color: 'var(--color-primary)',
+    color: theme.palette.primary.main,
     opacity: 0.3
   },
   radio: {

package/locations/components/FulfillmentSelector/FulfillmentSelectorLocation.js

@@ -1,9 +1,8 @@
 import "core-js/modules/es.array.includes.js";
 import React, { useCallback, useMemo } from 'react';
 import intersection from 'lodash/intersection';
-import { Grid, ResponsiveContainer, SurroundPortals } from '@shopgate/engage/components';
+import { Grid, ResponsiveContainer, SurroundPortals, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { ROPIS, BOPIS, DIRECT_SHIP } from "../../constants";
 import { i18n } from "../../../core";
 import { isProductAvailable } from "../../helpers";
@@ -17,21 +16,17 @@ import FulfillmentSelectorAlternativeLocation from "./FulfillmentSelectorAlterna
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
-    fontSize: '0.75rem',
+    fontSize: theme.typography.caption.fontSize,
     padding: theme.spacing(0, 2, 1, 6),
     marginTop: theme.spacing(-1),
     flexDirection: 'column'
   },
   unavailable: {
-    color: themeColors.dark,
-    fontSize: '0.625rem',
+    color: theme.palette.common.black,
     textTransform: 'uppercase',
     letterSpacing: '0.05em',
     opacity: 0.5
   },
-  locationName: {
-    color: 'var(--color-text-medium-emphasis)'
-  },
   itemRow: {
     alignContent: 'stretch',
     alignItems: 'baseline'
@@ -116,8 +111,10 @@ export function FulfillmentSelectorLocation() {
               grow: 1,
               shrink: 0,
               component: "div",
-              children: /*#__PURE__*/_jsx("div", {
-                className: classes.locationName,
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "caption",
+                component: "div",
+                color: "textSecondary",
                 children: usedLocation.name
               })
             }), /*#__PURE__*/_jsx(Grid.Item, {
@@ -134,8 +131,10 @@ export function FulfillmentSelectorLocation() {
             webOnly: true,
             breakpoint: ">xs",
             children: [/*#__PURE__*/_jsx("div", {
-              children: /*#__PURE__*/_jsx("div", {
-                className: classes.locationName,
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "caption",
+                component: "div",
+                color: "textSecondary",
                 children: usedLocation.name
               })
             }), /*#__PURE__*/_jsx("div", {
@@ -154,13 +153,17 @@ export function FulfillmentSelectorLocation() {
         })]
       }), isRopeMethodEnabled && selected && !isOrderable && /*#__PURE__*/_jsxs("div", {
         className: classes.container,
-        children: [/*#__PURE__*/_jsx("div", {
-          className: classes.locationName,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          component: "div",
+          color: "textSecondary",
           children: usedLocation?.name || ''
         }), /*#__PURE__*/_jsx(FulfillmentSelectorImpossibleError, {}), /*#__PURE__*/_jsx(ChangeLocationButton, {
           onClick: handleChangeLocation
         })]
-      }), false && !isRopeMethodEnabled ? /*#__PURE__*/_jsx("div", {
+      }), false && !isRopeMethodEnabled ? /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        component: "div",
         className: cx(classes.unavailable, classes.container),
         children: i18n.text('locations.no_available')
       }) : null]

package/locations/components/FulfillmentSelector/FulfillmentSelectorLocationMethodNotAvailable.js

@@ -6,11 +6,11 @@ import { i18n } from '@shopgate/engage/core/helpers';
 import { AVAILABILITY_STATE_ALERT } from '@shopgate/engage/product';
 import { ROPIS, BOPIS } from "../../constants";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
-    fontSize: '0.625rem'
+    fontSize: theme.typography.caption.fontSize
   }
-});
+}));
 
 /**
  * @returns {JSX}

package/locations/components/FulfillmentSheet/FulfillmentSheetContent.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { FulfillmentContext } from "../../locations.context";
 import { STAGE_SELECT_STORE, STAGE_RESERVE_FORM, STAGE_RESPONSE_SUCCESS, STAGE_RESPONSE_ERROR, STAGE_FULFILLMENT_METHOD } from "../../constants";
 import SheetDrawer from "../../../components/SheetDrawer";
@@ -10,19 +9,16 @@ import { ReserveForm } from "../ReserveForm";
 import { ReservationSuccess, ReservationError } from "../ReservationResponses";
 import { FulfillmentPath } from "../FulfillmentPath";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   sheet: {
-    maxHeight: `calc(var(--vh-100, 100vh) - ${variables.navigator.height}px)`,
+    maxHeight: `calc(var(--vh-100, 100vh) - ${theme.components.navigator.height})`,
     [responsiveMediaQuery('>sm', {
       webOnly: true
     })]: {
-      maxHeight: `calc(var(--vh-80, 80vh) - ${variables.navigator.height}px)`
+      maxHeight: `calc(var(--vh-80, 80vh) - ${theme.components.navigator.height})`
     }
   }
-});
+}));
 
 /**
  * Renders the content of the fulfillment sheet.

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotDialog.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import groupBy from 'lodash/groupBy';
-import { SheetDrawer, Button } from '@shopgate/engage/components';
+import { SheetDrawer, Button, Typography } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { getActiveFulfillmentSlot } from '@shopgate/engage/cart/cart.selectors';
 import { makeGetFulfillmentSlotsForLocation, getPreferredLocation } from "../../selectors";
@@ -33,7 +33,7 @@ const makeMapStateToProps = () => {
 const mapDispatchToProps = dispatch => ({
   fetch: locationCode => dispatch(fetchFulfillmentSlots(locationCode))
 });
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     position: 'relative',
     display: 'flex',
@@ -42,13 +42,9 @@ const useStyles = makeStyles()({
     paddingBottom: 0
   },
   title: {
-    fontSize: 24,
-    fontWeight: '500',
     marginBottom: 8
   },
   subtitle: {
-    fontSize: 20,
-    fontWeight: '500',
     marginBottom: 8,
     marginTop: 16
   },
@@ -66,15 +62,15 @@ const useStyles = makeStyles()({
     margin: 8,
     justifyContent: 'center',
     alignItems: 'center',
-    border: '1px solid var(--color-secondary)',
+    border: `1px solid ${theme.palette.secondary.main}`,
     borderRadius: 4,
-    background: '#fff',
+    background: theme.palette.common.white,
     transition: 'background, color 500ms',
     outline: 'none'
   },
   buttonActive: {
-    color: '#fff',
-    background: 'var(--color-secondary)'
+    color: theme.palette.common.white,
+    background: theme.palette.secondary.main
   },
   buttonDate: {
     width: 124,
@@ -82,22 +78,20 @@ const useStyles = makeStyles()({
     lineHeight: 1.3
   },
   buttonLabel: {
-    fontSize: 20,
     textAlign: 'center'
   },
   buttonLabelSlot: {
     padding: 2,
-    fontSize: 16,
     textAlign: 'center'
   },
   buttonDisabled: {
     cursor: 'blocked',
     pointerEvents: 'none',
-    border: '1px solid #444'
+    border: `1px solid ${theme.palette.action.disabled}`
   },
   buttonStrikethrough: {
     position: 'absolute',
-    background: '#444',
+    background: theme.palette.action.disabled,
     left: 0,
     right: 0,
     height: 2,
@@ -108,7 +102,7 @@ const useStyles = makeStyles()({
     bottom: 'calc(-1 * env(safe-area-inset-bottom))',
     margin: -16,
     marginTop: 8,
-    background: '#fff',
+    background: theme.palette.background.surface,
     padding: 16,
     paddingBottom: 24
   },
@@ -117,7 +111,7 @@ const useStyles = makeStyles()({
       width: '100%'
     }
   }
-});
+}));
 
 /**
  * Get Month day time.
@@ -161,7 +155,7 @@ const RANGES = {
 
 /**
  * @param {Object} props Props.
- * @returns {JSX}
+ * @returns {JSX.Element}
  */
 const FulfillmentSlotSheet = ({
   isOpen,
@@ -260,7 +254,9 @@ const FulfillmentSlotSheet = ({
     allowClose: allowClose,
     children: /*#__PURE__*/_jsxs("div", {
       className: classes.root,
-      children: [/*#__PURE__*/_jsx("span", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h3",
+        component: "span",
         className: classes.title,
         children: i18n.text('locations.your_current_timeslot.dialog.date')
       }), /*#__PURE__*/_jsx("div", {
@@ -271,13 +267,17 @@ const FulfillmentSlotSheet = ({
             [classes.buttonActive]: selectedDate === date
           }),
           onClick: () => setSelectedDate(date),
-          children: /*#__PURE__*/_jsxs("span", {
+          children: /*#__PURE__*/_jsxs(Typography, {
+            variant: "h3",
+            component: "span",
             className: classes.buttonLabel,
             children: [moment(date, 'YYYY-MM-DD').format('dddd'), ' ', getMonthDay(date)]
           })
         }, date))
       }), slotGroups && slotGroups.map(group => /*#__PURE__*/_jsxs(Fragment, {
-        children: [/*#__PURE__*/_jsx("span", {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "h3",
+          component: "span",
           className: classes.subtitle,
           children: i18n.text(`locations.your_current_timeslot.dialog.${group.name}`)
         }), /*#__PURE__*/_jsx("div", {
@@ -289,7 +289,8 @@ const FulfillmentSlotSheet = ({
               [classes.buttonDisabled]: slot.status !== 'active',
               [classes.buttonActive]: slot.id === selectedSlot
             }),
-            children: [/*#__PURE__*/_jsx("span", {
+            children: [/*#__PURE__*/_jsx(Typography, {
+              component: "span",
               className: classes.buttonLabelSlot,
               children: getRange(slot.from, slot.to)
             }), slot.status !== 'active' ? /*#__PURE__*/_jsx("div", {

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotProvider.connector.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { getFulfillmentSchedulingEnabled } from '@shopgate/engage/core';
+import { getFulfillmentSchedulingEnabled } from '@shopgate/engage/settings/selectors/merchantSettings';
 import setFulfillmentSlot from '@shopgate/pwa-common-commerce/cart/action-creators/setFulfillmentSlot';
 
 /**

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcher.connector.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { getFulfillmentSchedulingEnabled } from '@shopgate/engage/core';
+import { getFulfillmentSchedulingEnabled } from '@shopgate/engage/settings/selectors/merchantSettings';
 import { getActiveFulfillmentSlot, checkActiveFulfillmentSlotBelongsToPreferredLocation } from '@shopgate/engage/cart/cart.selectors';
 import { getIsCartStateConfigurable } from "../../selectors";
 

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcher.js

@@ -6,7 +6,7 @@ import FulfillmentSlotSwitcherBar from "./FulfillmentSlotSwitcherBar";
 import connect from "./FulfillmentSlotSwitcher.connector";
 import { forceOpenFulfillmentSlotDialog } from "./FulfillmentSlotProvider";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   card: {
     boxShadow: '0px 4px 2px rgba(0, 0, 0, 0.05)',
     marginBottom: 16,
@@ -16,11 +16,11 @@ const useStyles = makeStyles()({
     ' > div': {
       borderRadius: 5,
       margin: -1,
-      background: '#fff',
-      border: '1px solid #eaeaea'
+      background: theme.palette.background.surface,
+      border: `1px solid ${theme.components.border.light}`
     }
   }
-});
+}));
 
 /**
  * @returns {JSX}

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcherBar.js

@@ -1,27 +1,22 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n } from '@shopgate/engage/components';
+import { RippleButton, I18n, Typography } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { getTimeSlotDisplayText } from "./time";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   wrapper: {
-    fontSize: '0.875rem',
     color: theme.palette.text.primary,
-    background: 'var(--color-background-accent)'
+    background: theme.palette.background.emphasized
   },
   inner: {
     display: 'flex',
     flexShrink: 0,
     margin: theme.spacing(0, 2),
-    borderBottom: '1px solid #eaeaea',
+    borderBottom: `1px solid ${theme.components.border.light}`,
     alignItems: 'center',
-    height: variables.filterbar.height
+    height: theme.components.filterBar.height
   },
   innerStandalone: {
     borderBottom: 'none'
@@ -32,25 +27,22 @@ const useStyles = makeStyles()(theme => ({
       content: '":"'
     }
   },
-  name: {
-    fontWeight: 500
-  },
   button: {
     marginLeft: 'auto',
     letterSpacing: '0.05em',
     padding: `${theme.spacing(0.375, 0)} !important`,
     ' *': {
-      fontSize: '0.875rem',
+      fontSize: theme.typography.body2.fontSize,
       textTransform: 'initial',
       padding: '0 !important',
       color: theme.palette.text.primary,
-      fontWeight: 500
+      fontWeight: theme.typography.fontWeightMedium
     }
   }
 }));
 
 /**
- * @returns {JSX}
+ * @returns {JSX.Element}
  */
 const FulfillmentSlotSwitcherBar = ({
   fulfillmentSlot,
@@ -69,11 +61,15 @@ const FulfillmentSlotSwitcherBar = ({
       className: cx(classes.inner, {
         [classes.innerStandalone]: standalone
       }),
-      children: [/*#__PURE__*/_jsx("span", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "span",
         className: classes.heading,
         children: i18n.text('locations.your_current_timeslot.heading')
-      }), /*#__PURE__*/_jsx("span", {
-        className: classes.name,
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "span",
+        fontWeight: "medium",
         children: displayTime
       }), editable && /*#__PURE__*/_jsx(RippleButton, {
         onClick: handleChange,