@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/favorites/components/List/ListContent.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { ProductListTypeProvider, ProductProvider } from '@shopgate/engage/product/providers';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { getUseGetFavoriteIdsPipeline } from '@shopgate/engage/favorites';
 import ListItemWrapper from "./ListItemWrapper";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -19,8 +19,7 @@ const useStyles = makeStyles()({
   },
   loadMoreButton: {
     width: 'calc(100% - 32px)',
-    margin: '16px 16px 0 16px',
-    borderRadius: 5
+    margin: '16px 16px 0 16px'
   }
 });
 
@@ -86,8 +85,8 @@ const ListContent = ({
         removeItem: removeItem,
         index: index
       }, product.id))]
-    }), showLoadMoreButton && /*#__PURE__*/_jsx(RippleButton, {
-      type: "primary",
+    }), showLoadMoreButton && /*#__PURE__*/_jsx(Button, {
+      color: "secondary",
       className: classes.loadMoreButton,
       onClick: onLoadMore,
       children: i18n.text('favorites.load_more_button')

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

@@ -1,7 +1,8 @@
 import React, { useState, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { RippleButton, SurroundPortals } from '@shopgate/engage/components';
+import { SurroundPortals } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { hasNewServices, i18n } from '@shopgate/engage/core/helpers';
 import { getFavoritesLists, isInitialLoading, getHasMultipleFavoritesListsSupport } from '@shopgate/pwa-common-commerce/favorites/selectors';
 import addFavoritesList from '@shopgate/pwa-common-commerce/favorites/actions/addFavoritesList';
@@ -9,10 +10,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';
@@ -64,7 +65,6 @@ const useStyles = makeStyles()({
   addButton: {
     width: 'calc(100% - 32px)',
     margin: 16,
-    borderRadius: 5,
     [responsiveMediaQuery('>=md', {
       webOnly: true
     })]: {
@@ -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([{
@@ -271,11 +283,10 @@ const FavoriteLists = ({
       onClose: handleMethodClose
     }), /*#__PURE__*/_jsx(SurroundPortals, {
       portalName: FAVORITES_LIST_ADD_BUTTON,
-      children: hasMultipleFavoritesListsSupport ? /*#__PURE__*/_jsx(RippleButton, {
-        type: "primary",
+      children: hasMultipleFavoritesListsSupport ? /*#__PURE__*/_jsx(Button, {
+        color: "secondary",
         className: classes.addButton,
         onClick: openAddModal,
-        disabled: false,
         children: i18n.text('favorites.add_list')
       }) : null
     })]

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/FilterPageContent/components/ApplyButton/index.js

@@ -1,18 +1,17 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { I18n, Button, SurroundPortals } from '@shopgate/engage/components';
+import { I18n, SurroundPortals } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { PORTAL_FILTER_APPLY_BUTTON } from '@shopgate/engage/filter/constants';
 import { withWidgetSettings } from '@shopgate/engage/core';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   wrapper: {
-    display: 'flex'
-  },
-  button: {
-    padding: '0 !important'
+    display: 'flex',
+    marginRight: theme.spacing(2)
   }
-});
+}));
 
 /**
  * The filter apply button component.
@@ -44,9 +43,8 @@ const FilterApplyButton = ({
     children: /*#__PURE__*/_jsx("div", {
       className: classes.wrapper,
       children: /*#__PURE__*/_jsx(Button, {
-        className: classes.button,
-        flat: true,
-        type: "primary",
+        variant: "link",
+        color: "secondary",
         onClick: onClick,
         disabled: disabled,
         testId: "applyFilterButton",

package/filter/components/FilterPageContent/components/ResetButton/index.js

@@ -1,16 +1,18 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { I18n, Button, SurroundPortals } from '@shopgate/engage/components';
+import { I18n, SurroundPortals } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { PORTAL_FILTER_RESET_BUTTON } from '@shopgate/engage/filter/constants';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   buttonContainer: {
-    marginTop: 4,
+    marginTop: theme.spacing(0.5),
+    marginRight: theme.spacing(2),
     marginBottom: 40,
     textAlign: 'right'
   }
-});
+}));
 
 /**
  * The filter reset button component.
@@ -35,8 +37,8 @@ const FilterResetButton = ({
     children: /*#__PURE__*/_jsx("div", {
       className: classes.buttonContainer,
       children: /*#__PURE__*/_jsx(Button, {
-        flat: true,
-        type: "primary",
+        variant: "link",
+        color: "secondary",
         onClick: onClick,
         disabled: disabled,
         testId: "clearAllButton",

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/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/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/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,25 @@ 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,
+    border: `1px solid ${theme.components.border.light}`,
+    boxShadow: theme.shadows[2],
+    ...theme.applyStyles('dark', {
+      boxShadow: 'none',
+      border: 'none'
+    }),
     borderRadius: '50%',
     width: theme.spacing(3),
     height: theme.spacing(3)

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

@@ -1,20 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n, SurroundPortals } from '@shopgate/engage/components';
+import { I18n, SurroundPortals } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 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',
-    letterSpacing: '0.05em',
-    padding: `${theme.spacing(0.375, 0)} !important`,
-    ' *': {
-      padding: '0 !important'
-    }
-  },
-  ripple: {
-    padding: 0
+    fontSize: theme.typography.caption.fontSize,
+    padding: 0,
+    letterSpacing: '0.05em'
   }
 }));
 
@@ -38,13 +33,14 @@ export const ChangeLocationButtonUnwrapped = ({
       onClick,
       disabled
     },
-    children: /*#__PURE__*/_jsx(RippleButton, {
+    children: /*#__PURE__*/_jsx(Button, {
+      variant: "link",
+      color: "primary",
+      size: "small",
+      dense: true,
       onClick: onClick,
       className: classes.button,
       disabled: disabled,
-      rippleClassName: classes.ripple,
-      type: "secondary",
-      flat: true,
       children: /*#__PURE__*/_jsx(I18n.Text, {
         string: "locations.change_location"
       })

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: {