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

package/orders/components/OrderHistory/OrderHistoryTable.js

@@ -9,7 +9,7 @@ const useStyles = makeStyles()(theme => ({
   tableHeader: {
     '& > th': {
       padding: theme.spacing(2),
-      fontWeight: 500,
+      fontWeight: theme.typography.fontWeightMedium,
       textOverflow: 'ellipsis',
       overflow: 'hidden'
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.31.4-beta.1",
+  "version": "7.32.0-beta.2",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,19 +17,19 @@
   "scripts": {},
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@shopgate/native-modules": "1.0.0-beta.32",
-    "@shopgate/pwa-common": "7.31.4-beta.1",
-    "@shopgate/pwa-common-commerce": "7.31.4-beta.1",
-    "@shopgate/pwa-core": "7.31.4-beta.1",
-    "@shopgate/pwa-ui-ios": "7.31.4-beta.1",
-    "@shopgate/pwa-ui-material": "7.31.4-beta.1",
-    "@shopgate/pwa-ui-shared": "7.31.4-beta.1",
+    "@shopgate/native-modules": "1.0.0-beta.25",
+    "@shopgate/pwa-common": "7.32.0-beta.2",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.2",
+    "@shopgate/pwa-core": "7.32.0-beta.2",
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.2",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.2",
+    "@shopgate/pwa-ui-shared": "7.32.0-beta.2",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",
     "color": "^4.2.3",
     "focus-trap-react": "^10.3.1",
-    "immer": "^11.1.3",
+    "immer": "^11.1.11",
     "intersection-observer": "^0.6.0",
     "leaflet": "^1.8.0",
     "leaflet-gesture-handling": "^1.2.2",
@@ -37,15 +37,16 @@
     "moment": "^2.30.1",
     "react-helmet": "^6.1.0",
     "react-leaflet": "^3.2.5",
-    "react-phone-number-input": "^3.4.14",
+    "react-phone-number-input": "^3.4.17",
     "react-player": "1.11.0",
     "react-portal": "^3.1.0",
     "react-scroll-parallax": "^3.5.0",
     "react-transition-group": "^4.4.5",
-    "tss-react": "4.9.20",
+    "tss-react": "4.9.21",
     "validate.js": "^0.13.1"
   },
   "devDependencies": {
+    "@shopgate/pwa-unit-test": "7.32.0-beta.2",
     "@types/color": "^4.2.0",
     "@types/lodash": "^4.17.24",
     "@types/react-dom": "^17.0.2",

package/page/components/NotFound.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
-import { I18n } from '@shopgate/engage/components';
+import { I18n, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { historyPop, historyResetTo } from '@shopgate/pwa-common/actions/router';
 import { i18n, INDEX_PATH } from "../../core";
@@ -15,9 +15,6 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(2),
     paddingTop: theme.spacing(8)
   },
-  text: {
-    fontSize: '1.5rem'
-  },
   button: {
     width: '100%',
     maxWidth: 250
@@ -50,9 +47,13 @@ const NotFound = () => {
   }, [dispatch]);
   return /*#__PURE__*/_jsxs("div", {
     className: classes.wrapper,
-    children: [/*#__PURE__*/_jsx(I18n.Text, {
-      className: classes.text,
-      string: "page.not_found"
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h2",
+      component: "div",
+      fontWeight: "regular",
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "page.not_found"
+      })
     }), /*#__PURE__*/_jsxs("div", {
       className: classes.buttonContainer,
       children: [/*#__PURE__*/_jsx(RippleButton, {

package/page/components/WidgetHeadline/WidgetHeadline.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { makeStyles } from '@shopgate/engage/styles';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import { Typography } from '@shopgate/engage/components';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -38,6 +38,7 @@ const WidgetHeadline = ({
     cx,
     css
   } = useStyles();
+  const theme = useTheme();
   const {
     typography = 'h3',
     text,
@@ -48,7 +49,7 @@ const WidgetHeadline = ({
   } = headline || {};
   const styles = useMemo(() => ({
     ...(bold && {
-      fontWeight: 'bold'
+      fontWeight: theme.typography.fontWeightBold
     }),
     ...(italic && {
       fontStyle: 'italic'
@@ -56,7 +57,7 @@ const WidgetHeadline = ({
     ...(underline && {
       textDecoration: 'underline'
     })
-  }), [bold, italic, underline]);
+  }), [bold, italic, underline, theme]);
   if (!text) return null;
   return /*#__PURE__*/_jsx(Typography, {
     variant: typography,

package/page/components/WidgetRichText/WidgetRichText.js

@@ -52,7 +52,7 @@ const useStyles = makeStyles()(theme => ({
       margin: '0px 0px 1rem 0px'
     },
     a: {
-      color: 'var(--color-primary)'
+      color: theme.palette.primary.main
     }
   }
 }));

package/page/components/Widgets/Tooltip.js

@@ -1,9 +1,10 @@
 import React, { useState, useRef, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   wrapper: {
     display: 'inline-block',
     position: 'relative',
@@ -13,9 +14,7 @@ const useStyles = makeStyles()(() => ({
     position: 'absolute',
     padding: '6px 10px',
     backgroundColor: 'rgba(0, 0, 0, 0.87)',
-    color: '#fff',
-    fontSize: '0.875rem',
-    fontWeight: 400,
+    color: theme.palette.common.white,
     borderRadius: '4px',
     whiteSpace: 'normal',
     // allow multiline
@@ -184,13 +183,13 @@ function Tooltip({
     "data-tooltip-id": tooltipId.current,
     onMouseEnter: () => setVisible(true),
     onMouseLeave: () => setVisible(false),
-    children: [children, mounted && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsx("div", {
+    children: [children, mounted && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      component: "div",
       className: cx(classes.tooltipBox, arrowClass, 'tooltip-box'),
       style: portalStyle,
       "data-visible": animate ? 'true' : 'false',
-      "data-tooltip-id": tooltipId.current
-      // eslint-disable-next-line react/no-danger
-      ,
+      "data-tooltip-id": tooltipId.current,
       dangerouslySetInnerHTML: {
         __html: text
       }

package/page/components/Widgets/Widget.js

@@ -20,11 +20,11 @@ const useStyles = makeStyles()((theme, {
     position: 'absolute',
     top: -marginTop + (theme.spacing(0.5) + 1),
     left: -marginLeft + theme.spacing(0.5),
-    fontSize: 24,
+    fontSize: theme.components.icon.medium,
     padding: theme.spacing(0.5),
     display: 'flex',
     gap: theme.spacing(1),
-    background: '#fff',
+    background: theme.palette.background.surface,
     borderRadius: 4,
     border: '1px solid rgba(0, 0, 0, 0.23)',
     ':empty': {
@@ -35,13 +35,13 @@ const useStyles = makeStyles()((theme, {
     cursor: 'pointer'
   },
   visibilityIcon: {
-    color: '#f44336'
+    color: theme.palette.error.main
   },
   scheduledIcon: {
     color: '#347DD3'
   },
   scheduledIconExpired: {
-    color: '#f44336'
+    color: theme.palette.error.main
   }
 }));
 

package/page/components/Widgets/constants.js

@@ -1,7 +1,2 @@
-/**
- * List of allowed origins for cms page preview iFrame communication.
- */
-export const ALLOWED_PAGE_PREVIEW_ORIGINS = ['https://next.admin.shopgatedev.com', 'https://next.admin.shopgatepg.com', 'https://next.admin.shopgate.com', 'https://next.us.admin.shopgate.com', 'http://localhost:1337'];
-
 // Whether to consider vertical margins when calculating the overlay position.
 export const CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT = false;

package/page/components/Widgets/hooks.js

@@ -1,106 +1,15 @@
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/web.url.js";
-import "core-js/modules/web.url.to-json.js";
-import "core-js/modules/web.url-search-params.js";
-import { useEffect, useCallback, useRef, useContext, useMemo } from 'react';
-import { logger } from '@shopgate/engage/core/helpers';
+import { useContext, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useRoute } from '@shopgate/engage/core/hooks';
 import { receivePageConfigV2 } from '@shopgate/engage/page/action-creators';
 import { PAGE_PREVIEW_SLUG } from '@shopgate/engage/page/constants';
-import { ALLOWED_PAGE_PREVIEW_ORIGINS, CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT } from "./constants";
+import { useIframeMessenger } from '@shopgate/engage/admin-preview/hooks';
+import { ALLOWED_ADMIN_PREVIEW_ORIGINS } from '@shopgate/engage/admin-preview/constants';
+import { CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT } from "./constants";
 import { getScrollContainer } from "./helpers";
 import { WidgetsPreviewContext } from "./WidgetsPreviewContext";
 import { dispatchWidgetPreviewEvent, useWidgetPreviewEvent } from "./events";
 
-/**
- * @typedef {Object} MessageData
- * @property {string} type Identifier for the kind of message
- * @property {any} [payload] Optional data payload for this message
- */
-
-/**
- * @typedef {Object} IframeMessengerResult
- * @property {function(MessageData, string=): void} sendToParent
- *   - Send data up to window.parent. If targetOrigin is omitted, uses the
- *     most recently seen origin (from an incoming message). If none seen yet,
- *     falls back to parentOrigins[0] or "*".
- */
-
-/**
- * Hook for postMessage communication when your component is inside an iframe.
- *
- * Listens on window for "message" events from any origin in parentOrigins,
- * and only calls onMessage(data, rawEvent) if both origin and source match.
- *
- * @param {function(MessageData, any): void} onMessage
- *   Callback invoked when a trusted message arrives. Receives data and the
- *   raw event (so you can inspect origin, source, etc.).
- * @param {string[]} parentOrigins
- *   Array of allowed parent origin strings (e.g.
- *   ['https://a.example.com','https://b.example.com']).
- * @returns {IframeMessengerResult}
- *   An object with a single method:
- *   • sendToParent(data, [targetOrigin]): void
- *     – Posts data up to window.parent. By default it uses the most recently
- *       seen origin (from an incoming message). If none, uses parentOrigins[0].
- */
-function useIframeMessenger(onMessage, parentOrigins) {
-  // Keep a ref to the latest onMessage callback so the listener always has it.
-  const onMessageRef = useRef(onMessage);
-  useEffect(() => {
-    onMessageRef.current = onMessage;
-  }, [onMessage]);
-
-  // Keep track of the last allowed origin we heard from
-  const lastOriginRef = useRef(null);
-
-  /**
-   * Send a message up to the parent window.
-   * @param {MessageData} data       - The data object to post.
-   * @param {string}      [targetOrigin]
-   *   Optional override for the origin to post to. Must be one of
-   *   parentOrigins. If omitted, uses the last seen origin (lastOriginRef),
-   *   or parentOrigins[0], or "*" if array is empty.
-   */
-  const sendToParent = useCallback((data, targetOrigin) => {
-    // Determine which origin to use: explicit, then last seen, then first, then "*".
-    const originToUse = typeof targetOrigin === 'string' ? targetOrigin : lastOriginRef.current || new URL(document.referrer).origin || parentOrigins[0] || '*';
-    if (!originToUse) {
-      logger.warn('useIframeMessenger: no targetOrigin available. ' + 'Provide parentOrigins or pass targetOrigin.');
-      return;
-    }
-    window.parent.postMessage(data, originToUse);
-  }, [parentOrigins]);
-
-  // Attach / detach the "message" listener.
-  useEffect(() => {
-    /**
-     * Handler for incoming postMessage events.
-     * @param {any} rawEvent  – The original MessageEvent object.
-     */
-    function handler(rawEvent) {
-      // Only proceed if the origin is in our whitelist.
-      if (!parentOrigins.includes(rawEvent.origin)) return;
-      // Ensure the message actually came from window.parent.
-      if (rawEvent.source !== window.parent) return;
-
-      // Record this origin as most recently seen.
-      lastOriginRef.current = rawEvent.origin;
-
-      // Forward the event.data and the raw event to the callback.
-      onMessageRef.current(rawEvent.data, rawEvent);
-    }
-    window.addEventListener('message', handler);
-    return () => {
-      window.removeEventListener('message', handler);
-    };
-  }, [parentOrigins, sendToParent]);
-  return {
-    sendToParent
-  };
-}
-
 /**
  * Hook to handle communication with the parent window in a page preview iframe.
  * @param {boolean} isActive Whether the preview communication is active.
@@ -194,7 +103,7 @@ export const usePreviewIframeCommunication = (isActive = false) => {
         });
       }
     }
-  }, ALLOWED_PAGE_PREVIEW_ORIGINS);
+  }, ALLOWED_ADMIN_PREVIEW_ORIGINS);
   useWidgetPreviewEvent('widget-clicked', e => {
     if (!isActive) {
       return;

package/page/constants/index.js

@@ -1,4 +1,6 @@
+import { IS_ADMIN_PREVIEW_ACTIVE } from '@shopgate/engage/admin-preview/constants';
 import { PAGE_PATH, PAGE_PATTERN } from '@shopgate/pwa-common/constants/RoutePaths';
+export { PAGE_PREVIEW_PATTERN } from '@shopgate/engage/admin-preview/constants';
 export * from '@shopgate/pwa-common/constants/PageIDs';
 export { PAGE_PATH, PAGE_PATTERN };
 export * from "./actionTypes";
@@ -8,13 +10,14 @@ export const PRIVACY_PATH = `${PAGE_PATH}/privacy`;
 export const RETURN_POLICY_PATH = `${PAGE_PATH}/return_policy`;
 export const SHIPPING_PATH = `${PAGE_PATH}/shipping`;
 export const TERMS_PATH = `${PAGE_PATH}/terms`;
-export const PAGE_PREVIEW_PATTERN = '/shopgate-internal-page-preview';
 export const PAGE_PREVIEW_SLUG = 'page_preview';
 
 /**
  * Checks if the app is currently in page preview mode.
+ * @todo For backwards compatibility, this constant is still exported from the page package and
+ * mapped to the IS_ADMIN_PREVIEW_ACTIVE constant. It should be removed in the future.
  */
-export const IS_PAGE_PREVIEW_ACTIVE = window.location.pathname.startsWith(PAGE_PREVIEW_PATTERN);
+export const IS_PAGE_PREVIEW_ACTIVE = IS_ADMIN_PREVIEW_ACTIVE;
 
 /**
  * One hour in milliseconds

package/page/selectors/index.js

@@ -1,6 +1,7 @@
 import "core-js/modules/es.array.includes.js";
 import { createSelector } from 'reselect';
-import { makeGetMenu, makeGetIsFetchingMenu, getEnableCms2ForAllShoppers } from '@shopgate/engage/core/selectors';
+import { makeGetMenu, makeGetIsFetchingMenu } from '@shopgate/engage/core/selectors';
+import { getEnableCms2ForAllShoppers } from '@shopgate/engage/settings/selectors/shopSettings';
 import { getFulfillmentParams, getPopulatedProductsResult, SHOPGATE_CATALOG_GET_HIGHLIGHT_PRODUCTS } from '@shopgate/engage/product';
 import { getProductState } from '@shopgate/engage/product/selectors/product';
 import { LEGAL_MENU } from '@shopgate/engage/core/constants';

package/page/widgets/HTML/HTML.js

@@ -1,19 +1,15 @@
 import React from 'react';
 import { HtmlSanitizer } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/engage';
 import { useHtmlWidget } from "./hooks";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     ' h1, h2, h3, h4, h5, h6, p, ul, ol': {
       margin: '1rem 0'
     },
     ' h1, h2, h3, h4, h5, h6': {
-      fontWeight: 600
+      fontWeight: theme.typography.fontWeightBold
     },
     ' h1': {
       fontSize: '1.5rem'
@@ -51,7 +47,7 @@ const useStyles = makeStyles()({
     ' blockquote, q': {
       paddingLeft: '1rem',
       margin: '2rem 0',
-      borderLeft: `.25rem solid ${colors.shade6}`,
+      borderLeft: `.25rem solid ${theme.components.border.dark}`,
       fontStyle: 'italic'
     },
     ' > :first-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */': {
@@ -66,10 +62,10 @@ const useStyles = makeStyles()({
       height: 0
     },
     a: {
-      color: 'var(--color-primary)'
+      color: theme.palette.primary.main
     }
   }
-});
+}));
 
 /**
  * The HtmlWidget component is used to display html code.

package/page/widgets/NestedCategoryFilter/NestedCategoryFilter.js

@@ -3,19 +3,14 @@ import { I18n, ButtonLink } from '@shopgate/engage/components';
 import { bin2hex } from '@shopgate/engage/core/helpers';
 import { CATEGORY_PATH } from '@shopgate/engage/category';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/engage';
 import { useRoute, usePrevious, useLocalStorage } from '@shopgate/engage/core/hooks';
 import { router } from '@virtuous/conductor';
 import CategoryPicker from "./components/Picker";
 import { useNestedCategoryFilterWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   container: {
-    background: colors.light,
     display: 'flex',
     flexDirection: 'column',
     paddingBottom: theme.spacing(2)

package/page/widgets/NestedCategoryFilter/components/Picker/components/SheetItem/index.js

@@ -11,8 +11,8 @@ const useStyles = makeStyles()(theme => ({
     color: theme.palette.text.primary
   },
   buttonSelected: {
-    background: 'var(--color-background-accent)',
-    boxShadow: `${theme.spacing(-2.5)}px 0px 0px var(--color-background-accent), ${theme.spacing(2.5)}px 0px 0px var(--color-background-accent)`,
+    background: theme.palette.background.emphasized,
+    boxShadow: `${theme.spacing(-2.5)}px 0px 0px ${theme.palette.background.emphasized}, ${theme.spacing(2.5)}px 0px 0px ${theme.palette.background.emphasized}`,
     margin: '-1px 0',
     paddingTop: 17,
     paddingBottom: 17

package/page/widgets/NestedCategoryFilter/components/Picker/index.js

@@ -2,18 +2,15 @@ import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
 import { fetchCategoryOrRootCategories } from '@shopgate/engage/category';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/engage';
 import { i18n } from '@shopgate/engage/core/helpers';
 import Sheet from "./components/Sheet";
 import { getCategoriesById } from "../../../CategoryList/selectors";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   button: {
-    background: 'var(--color-background-accent)',
+    background: theme.palette.background.emphasized,
     color: theme.palette.text.primary,
     display: 'flex',
     flexDirection: 'column',
@@ -26,16 +23,15 @@ const useStyles = makeStyles()(theme => ({
     cursor: 'pointer'
   },
   buttonDisabled: {
-    color: colors.shade4,
+    color: theme.palette.grey.medium,
     cursor: 'not-allowed'
   },
   label: {
-    fontSize: 12,
     marginTop: -2,
     marginBottom: 4
   },
   selection: {
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     lineHeight: 1.125
   }
 }));
@@ -99,7 +95,9 @@ const CategoryPicker = ({
       className: cx(classes.button, {
         [classes.buttonDisabled]: disabled
       }, 'widget__nested-category-filter__category-picker'),
-      children: [label && /*#__PURE__*/_jsx("div", {
+      children: [label && /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        component: "div",
         className: classes.label,
         children: label
       }), /*#__PURE__*/_jsx("div", {

package/page/widgets/Placeholder/Placeholder.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
+import { Typography } from '@shopgate/engage/components';
 import { usePlaceholderWidget } from "./hooks";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -7,14 +8,11 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(2),
     minHeight: 200
   },
-  name: {
-    fontSize: 14
-  },
   pre: {
-    background: '#f7f9fc',
-    border: '1px solid #dbdde2',
+    background: theme.palette.background.emphasized,
+    border: `1px solid ${theme.components.border.light}`,
     borderRadius: 8,
-    color: '#000',
+    color: theme.contrastColor(theme.palette.background.emphasized),
     fontSize: 10,
     overflowY: 'auto',
     padding: theme.spacing(1)
@@ -39,8 +37,9 @@ const PlaceholderWidget = () => {
   } = usePlaceholderWidget();
   return /*#__PURE__*/_jsxs("div", {
     className: classes.root,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: classes.name,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      component: "div",
       children: name
     }), /*#__PURE__*/_jsx("pre", {
       className: classes.pre,

package/product/components/Availability/Availability.js

@@ -13,9 +13,6 @@ const useStyles = makeStyles()({
     width: '70%',
     marginTop: 5,
     marginBottom: 2
-  },
-  availability: {
-    fontSize: '0.875rem'
   }
 });
 
@@ -48,7 +45,6 @@ function Availability({
       className: placeholderClasses,
       ready: availability !== null,
       children: availability && /*#__PURE__*/_jsx(AvailableText, {
-        className: classes.availability,
         showWhenAvailable: true,
         text: availability.text || '',
         state: availability.state

package/product/components/Characteristics/Characteristic/components/SheetItem/index.js

@@ -2,12 +2,8 @@ import React, { useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
 import { withForwardedRef } from '@shopgate/engage/core/hocs';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { CharacteristicsButton } from '@shopgate/engage/back-in-stock/components';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => {
   const buttonBase = {
     outline: 0,
@@ -26,7 +22,7 @@ const useStyles = makeStyles()(theme => {
     },
     buttonDisabled: {
       ...buttonBase,
-      color: colors.shade4
+      color: theme.palette.action.disabled
     },
     root: {
       padding: '16px 0',
@@ -38,12 +34,12 @@ const useStyles = makeStyles()(theme => {
     },
     rootSelected: {
       ...buttonBase,
-      background: 'var(--color-background-accent)',
-      boxShadow: '-16px 0 0 var(--color-background-accent), 16px 0 0 var(--color-background-accent)',
+      background: theme.palette.background.emphasized,
+      boxShadow: `-16px 0 0 ${theme.palette.background.emphasized}, 16px 0 0 ${theme.palette.background.emphasized}`,
       margin: '-1px 0',
       paddingTop: 17,
       paddingBottom: 17,
-      fontWeight: 500,
+      fontWeight: theme.typography.fontWeightMedium,
       [responsiveMediaQuery('>xs', {
         webOnly: true
       })]: {