@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/core/selectors/shopSettings.js

@@ -1,80 +1,3 @@
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.array.reduce.js";
-import { createSelector } from 'reselect';
-import { WISHLIST_MODE_PERSIST_ON_ADD, SHOP_SETTING_WISHLIST_MODE, SHOP_SETTING_IMAGES, SHOP_SETTING_IMAGES_PRODUCT_PLACEHOLDER, SHOP_SETTING_IMAGES_CATEGORY_PLACEHOLDER, SHOP_SETTING_IMAGES_FAVICON, SHOP_SETTING_NUMBER_OF_ADDRESS_LINES, SHOP_SETTING_GOOGLE_SITE_VERIFICATION_CODE, SHOP_SETTINGS_SHOW_CATEGORY_IMAGES, SHOP_SETTING_REGISTRATION_MODE, SHOP_SETTING_REGISTRATION_MODE_EXTENDED, SHOP_SETTING_LOAD_WISHLIST_ON_APP_START_ENABLED, SHOP_SETTING_WISHLIST_ITEM_QUANTITY_ENABLED, SHOP_SETTING_WISHLIST_ITEM_NOTES_ENABLED, SHOP_SETTING_SHOW_WISHLIST_ITEMS_COUNT_BADGE, SHOP_SETTING_ENABLE_CMS_2_FOR_ALL_SHOPPERS } from "../constants/shopSettings";
-
-/**
- * Retrieves the shopSettings state from the store.
- * @param {Object} state The current application state.
- * @return {Object} The locations state.
- */
-export const getState = state => state?.settings?.shopSettings || {};
-
-/**
- * Creates a selector to retrieve a single shop setting.
- * @param {string} key The key of the shop setting
- * @param {*} [fallback=null] The fallback value when no value can be determined.
- * @returns {Function}
- */
-export const makeGetShopSettingByKey = (key, fallback = null) => createSelector(getState, state => typeof state?.[key] !== 'undefined' ? state?.[key] : fallback);
-
-/**
- * Creates a selector to retrieve multiple shop setting.
- * @param {Array} [keys=[]] Optional keys to filter.
- * @returns {Function}
- */
-export const makeGetShopSettings = (keys = []) => createSelector(getState, state => {
-  const result = Object.keys(state).filter(key => {
-    if (Array.isArray(keys) && keys.length > 0) {
-      return keys.includes(key);
-    }
-    return true;
-  }).reduce((acc, key) => {
-    if (state?.[key]) {
-      acc[key] = state[key];
-    }
-    return acc;
-  }, {});
-  return result;
-});
-
-/** Selects the current wishlist mode */
-export const getWishlistMode = makeGetShopSettingByKey(SHOP_SETTING_WISHLIST_MODE, WISHLIST_MODE_PERSIST_ON_ADD);
-const getShopSettingImages = makeGetShopSettingByKey(SHOP_SETTING_IMAGES, {});
-
-/**
- * Selects the placeholder image for products
- */
-export const getProductImagePlaceholder = createSelector(getShopSettingImages, images => images?.[SHOP_SETTING_IMAGES_PRODUCT_PLACEHOLDER] || null);
-
-/**
- * Selects the placeholder image for products
- */
-export const getCategoryImagePlaceholder = createSelector(getShopSettingImages, images => images?.[SHOP_SETTING_IMAGES_CATEGORY_PLACEHOLDER] || null);
-/**
- * Selects the placeholder image for products
- */
-export const getFavicon = createSelector(getShopSettingImages, images => images?.[SHOP_SETTING_IMAGES_FAVICON] || null);
-
-/**
- * Selects the number of address lines for registration / address forms
- */
-export const getNumberOfAddressLines = makeGetShopSettingByKey(SHOP_SETTING_NUMBER_OF_ADDRESS_LINES, 2);
-export const getGoogleSiteVerificationCode = makeGetShopSettingByKey(SHOP_SETTING_GOOGLE_SITE_VERIFICATION_CODE, '');
-export const getShowCategoryImages = makeGetShopSettingByKey(SHOP_SETTINGS_SHOW_CATEGORY_IMAGES, true);
-
-/**
- * Creates a selector to retrieve the current active registration mode.
- * When the selector returns "simple" the form will not contain any address related fields.
- */
-export const getRegistrationMode = makeGetShopSettingByKey(SHOP_SETTING_REGISTRATION_MODE, SHOP_SETTING_REGISTRATION_MODE_EXTENDED);
-export const getWishlistItemQuantityEnabled = makeGetShopSettingByKey(SHOP_SETTING_WISHLIST_ITEM_QUANTITY_ENABLED, false);
-export const getWishlistItemNotesEnabled = makeGetShopSettingByKey(SHOP_SETTING_WISHLIST_ITEM_NOTES_ENABLED, false);
-export const getLoadWishlistOnAppStartEnabled = makeGetShopSettingByKey(SHOP_SETTING_LOAD_WISHLIST_ON_APP_START_ENABLED, true);
-export const getShowWishlistItemsCountBadge = createSelector(getLoadWishlistOnAppStartEnabled, makeGetShopSettingByKey(SHOP_SETTING_SHOW_WISHLIST_ITEMS_COUNT_BADGE, true), (loadWishlistOnAppStartEnabled, showWishlistItemsCountBadge) => loadWishlistOnAppStartEnabled ? showWishlistItemsCountBadge : false);
-
-/**
- * Selector that determines if CMS 2 is enabled for all shoppers.
- * @type {(state: RootState) => boolean}
- */
-export const getEnableCms2ForAllShoppers = makeGetShopSettingByKey(SHOP_SETTING_ENABLE_CMS_2_FOR_ALL_SHOPPERS, false);
+// Backwards-compatible shim. The shop settings selectors now live in the
+// dedicated `settings` package: @shopgate/engage/settings/selectors/shopSettings
+export * from "../../settings/selectors/shopSettings";

package/development/components/ClientInformation/ClientInformation.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
+import { Typography } from '@shopgate/engage/components';
 import { useLongPress } from '@shopgate/engage/core/hooks';
 import { getClientInformation } from '@shopgate/engage/core/selectors';
 import { pckVersion } from '@shopgate/pwa-common/helpers/config';
@@ -10,8 +11,7 @@ const useStyles = makeStyles()(theme => ({
   root: {
     position: 'relative',
     textAlign: 'center',
-    color: theme.palette.grey[500],
-    fontSize: 12,
+    color: theme.palette.text.secondary,
     paddingBottom: 20
   },
   unselectable: {
@@ -57,7 +57,9 @@ const ClientInformation = () => {
   if (!codebaseVersion) {
     return null;
   }
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs(Typography, {
+    variant: "caption",
+    component: "div",
     className: cx('ui-shared__client-information', classes.root),
     ...longPressAttrs,
     "aria-hidden": true,

package/development/components/DevelopmentSettings/DevelopmentSettings.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
-import { SheetDrawer, RippleButton } from '@shopgate/engage/components';
+import { SheetDrawer } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
-import { getEnabledCMSVersion, getEnableCms2ForAllShoppers } from '@shopgate/engage/core/selectors';
+import { getEnabledCMSVersion } from '@shopgate/engage/settings/selectors/merchantSettings';
+import { getEnableCms2ForAllShoppers } from '@shopgate/engage/settings/selectors/shopSettings';
 import { getIsCMS2PreviewEnabled } from "../../selectors";
 import { toggleCms2Preview } from "../../action-creators";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,7 +16,7 @@ const useStyles = makeStyles()(theme => ({
     justifyContent: 'center'
   },
   button: {
-    fontWeight: 'normal'
+    fontWeight: theme.typography.fontWeightRegular
   }
 }));
 
@@ -48,9 +50,8 @@ const DevelopmentSettings = ({
     onClose: onClose,
     children: /*#__PURE__*/_jsx("div", {
       className: classes.container,
-      children: /*#__PURE__*/_jsx(RippleButton, {
+      children: /*#__PURE__*/_jsx(Button, {
         className: classes.button,
-        type: "simple",
         onClick: () => {
           onClose();
           setTimeout(() => {

package/development/components/SimulatedInsets/SimulatedInsetBottom.js

@@ -2,14 +2,14 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     position: 'fixed',
     bottom: 0,
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    height: 'var(--safe-area-inset-bottom)',
+    height: theme.layout.safeArea.bottom,
     width: '100%',
     zIndex: 10000000,
     pointerEvents: 'auto',
@@ -26,7 +26,7 @@ const useStyles = makeStyles()({
     border: '1px solid rgba(255, 255, 255, 0.5)',
     boxSizing: 'content-box'
   }
-});
+}));
 
 /**
  * Renders a simulated iOS bottom inset in development.

package/development/components/SimulatedInsets/SimulatedInsetTop.js

@@ -4,19 +4,19 @@ import { useSelector } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getStatusBarStyleStorage } from '@shopgate/engage/development/selectors';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     position: 'fixed',
     top: 0,
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    height: 'var(--safe-area-inset-top)',
+    height: theme.layout.safeArea.top,
     width: '100%',
     zIndex: 10000000,
     pointerEvents: 'auto',
     transition: 'background 0.2s ease',
-    fontSize: '16px'
+    fontSize: theme.typography.body1.fontSize
   },
   containerHighlight: {
     background: 'rgba(255, 0, 0, 0.7)'
@@ -33,17 +33,17 @@ const useStyles = makeStyles()({
   info: {
     flex: 1,
     textAlign: 'center',
-    fontWeight: 500
+    fontWeight: theme.typography.fontWeightMedium
   },
   notch: {
     flex: 1,
     background: 'black',
-    height: 'calc(var(--safe-area-inset-top) - 16px)',
+    height: `calc(${theme.layout.safeArea.top} - 16px)`,
     maxWidth: 150,
     borderRadius: 16,
     border: '1px solid rgba(255, 255, 255, 0.5)'
   }
-});
+}));
 
 /**
  * Creates a human readable time string to mimic the iOS clock.

package/favorites/components/CommentDialog/CommentDialog.js

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getCommentDialogSettings } from '@shopgate/pwa-common-commerce/favorites/selectors';
 import { i18n, usePrevious } from '@shopgate/engage/core';
-import { Dialog, TextField, I18n } from '@shopgate/engage/components';
+import { Dialog, TextField, I18n, Typography } from '@shopgate/engage/components';
 import { broadcastLiveMessage } from '@shopgate/engage/a11y';
 import { closeFavoritesCommentDialog } from '@shopgate/pwa-common-commerce/favorites/action-creators';
 import { themeName } from '@shopgate/pwa-common/helpers/config';
@@ -31,22 +31,19 @@ const mapDispatchToProps = dispatch => ({
     dispatch(updateFavorite(productId, listId, quantity, notes));
   }
 });
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     display: 'flex',
     flexDirection: 'column'
   },
   input: {
     textAlign: 'left',
-    fontSize: '1rem'
+    fontSize: theme.typography.body1.fontSize
   },
   characterCount: {
-    textAlign: 'right',
-    marginTop: -16,
-    fontSize: '0.875rem',
-    color: 'var(--color-text-medium-emphasis)'
+    marginTop: -16
   }
-});
+}));
 const MAX_CHARACTER_COUNT = 250;
 
 /**
@@ -138,14 +135,19 @@ const CommentDialog = ({
         attributes: attributes,
         multiLine: true,
         tabIndex: 0
-      }), /*#__PURE__*/_jsx(I18n.Text, {
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        color: "textSecondary",
+        align: "right",
         className: classes.characterCount,
-        string: "favorites.comment_modal.characterCount",
-        "aria-hidden": true,
-        params: {
-          maxCount: MAX_CHARACTER_COUNT,
-          count: value?.length || 0
-        }
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "favorites.comment_modal.characterCount",
+          "aria-hidden": true,
+          params: {
+            maxCount: MAX_CHARACTER_COUNT,
+            count: value?.length || 0
+          }
+        })
       })]
     })
   });

package/favorites/components/FavoriteButtonWide/FavoriteButtonWide.js

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { toggleFavoriteWithListChooser } from '@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';
 import { makeIsProductOnFavoriteList, hasMultipleFavoritesList } from '@shopgate/pwa-common-commerce/favorites/selectors';
-import { getWishlistItemQuantityEnabled } from '@shopgate/engage/core/selectors/shopSettings';
+import { getWishlistItemQuantityEnabled } from '@shopgate/engage/settings/selectors/shopSettings';
 import appConfig from '@shopgate/pwa-common/helpers/config';
 
 /**
@@ -29,23 +29,12 @@ const makeMapStateToProps = () => {
 const mapDispatchToProps = dispatch => ({
   toggle: productId => dispatch(toggleFavoriteWithListChooser(productId))
 });
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(() => ({
   root: {
-    '&&': {
-      margin: '0 0px 16px 16px',
-      backgroundColor: '#fff',
-      border: '1px solid var(--color-primary)',
-      color: 'var(--color-high-emphasis)',
-      borderRadius: 5,
-      fontSize: 14,
-      textTransform: 'none',
-      padding: 0
-    }
-  },
-  ripple: {
-    padding: '8px 16px'
+    margin: '0 0 16px 16px',
+    textTransform: 'none'
   }
-});
+}));
 
 /** @returns {JSX} */
 const FavoriteButtonWide = ({
@@ -71,10 +60,10 @@ const FavoriteButtonWide = ({
   if (!appConfig.hasFavorites) {
     return null;
   }
-  return /*#__PURE__*/_jsx(RippleButton, {
+  return /*#__PURE__*/_jsx(Button, {
+    variant: "outlined",
+    color: "primary",
     className: classes.root,
-    rippleClassName: classes.ripple,
-    type: "primary",
     onClick: () => toggle(productId),
     children: i18n.text(label)
   });

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

@@ -40,11 +40,11 @@ declare const _default: import("react-redux").ConnectedComponent<{
         quantity: number;
     };
 }, {
+    product: NonNullable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
     historyPush: (...args: any[]) => any;
     quantity?: number | null | undefined;
     notes?: string | null | undefined;
     listId: string;
-    product: NonNullable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
     remove: (...args: any[]) => any;
     addToCart: (...args: any[]) => any;
     isBaseProduct?: boolean | null | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Item/Item.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;QAiLY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAzKD,YAAY"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Item/Item.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;QA0KY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAlKD,YAAY"}

package/favorites/components/Item/Item.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 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 { bin2hex, showModal as showModalAction, historyPush as historyPushAction, 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,
@@ -159,9 +153,6 @@ const FavoriteItem = ({
     classes,
     cx
   } = useStyles();
-  const {
-    ListImage: gridResolutions
-  } = getThemeSettings('AppImages') || {};
   const [isDisabled, setIsDisabled] = useState(!isOrderable && !hasVariants);
   const currency = product.price?.currency || 'EUR';
   const defaultPrice = product.price?.unitPrice || 0;
@@ -199,8 +190,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
       });
@@ -270,7 +264,7 @@ const FavoriteItem = ({
           children: /*#__PURE__*/_jsx(ProductImage, {
             className: cx('engage__favorites__item__image'),
             src: product.featuredImageBaseUrl,
-            resolutions: gridResolutions
+            context: "list"
           })
         }), /*#__PURE__*/_jsxs("div", {
           className: cx(classes.infoContainer, 'engage__favorites__item__info-container'),
@@ -285,10 +279,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 +334,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

@@ -26,8 +26,8 @@ declare const _default: import("react-redux").ConnectedComponent<{
         useGetFavoriteIdsPipeline: boolean;
     };
 }, {
-    id: string;
     name: string;
+    id: string;
     remove: (...args: any[]) => any;
     addToCart: (...args: any[]) => any;
     removeItem: (...args: any[]) => any;

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":";;;;;;;;;;;QAuEY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBApED,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,11 @@ 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,
     flexGrow: 1,
     paddingBottom: theme.spacing(1),
     paddingLeft: '16px',