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

package/product/components/UnitQuantityPicker/UnitQuantityPicker.js

@@ -3,14 +3,10 @@ import PropTypes from 'prop-types';
 import { i18n, hasNewServices } from '@shopgate/engage/core/helpers';
 import { UIEvents } from '@shopgate/engage/core';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
-import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/engage';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import { RippleButton, QuantityInput } from '@shopgate/engage/components';
 import { broadcastLiveMessage } from '@shopgate/engage/a11y/helpers';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()((theme, {
   inputColor,
   inputBgColor,
@@ -40,8 +36,8 @@ const useStyles = makeStyles()((theme, {
       display: 'flex',
       alignItems: 'center',
       width: '100%',
-      fontSize: 16,
-      backgroundColor: 'var(--color-background-accent)',
+      fontSize: theme.typography.body1.fontSize,
+      backgroundColor: theme.components.input.background,
       ...(inputColor && {
         color: `${inputColor}`
       }),
@@ -140,6 +136,7 @@ const UnitQuantityPicker = ({
   toggleTabBarOnFocus,
   quantityLabel
 }) => {
+  const theme = useTheme();
   const widgetDefaults = useMemo(() => {
     if (hasNewServices()) {
       // The widget configuration was introduced with CCP-2449 in PWA6. It's inactive for now
@@ -148,13 +145,13 @@ const UnitQuantityPicker = ({
       return {};
     }
     return {
-      buttonColor: colors.shade8,
-      buttonBgColor: colors.primary,
-      inputColor: colors.dark,
-      inputBgColor: colors.shade8,
+      buttonColor: theme.palette.primary.contrastText,
+      buttonBgColor: theme.palette.primary.main,
+      inputColor: theme.palette.text.primary,
+      inputBgColor: theme.palette.grey.light,
       showLabel: true
     };
-  }, []);
+  }, [theme]);
   const {
     buttonColor = widgetDefaults.buttonColor,
     buttonBgColor = widgetDefaults.buttonBgColor,

package/push-opt-in/components/PushOptInModal/index.js

@@ -2,24 +2,21 @@ import React, { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Grid, I18n, Button, Modal } from '@shopgate/engage/components';
-import { appConfig, themeConfig } from '@shopgate/engage';
+import { Grid, I18n, Button, Modal, Typography } from '@shopgate/engage/components';
+import { appConfig } from '@shopgate/engage';
 import pushImage from "./push-opt-in.svg";
 import connect from "./connector";
 import { svgToDataUrl } from "../../../core";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   modalContent: {
     width: '100%'
   },
   modalLayout: {
-    backgroundColor: colors.lightOverlay
+    backgroundColor: theme.palette.background.surface
   },
   container: {
-    backgroundColor: colors.lightOverlay,
+    backgroundColor: theme.palette.background.surface,
     textAlign: 'center',
     padding: '30px',
     justifyContent: 'center',
@@ -27,8 +24,6 @@ const useStyles = makeStyles()(() => ({
     flexDirection: 'column'
   },
   title: {
-    fontWeight: 'bold',
-    fontSize: '1.35rem',
     paddingTop: '30px',
     paddingBottom: '30px'
   },
@@ -45,7 +40,7 @@ const useStyles = makeStyles()(() => ({
     marginTop: '30px'
   },
   buttonText: {
-    color: colors.gray
+    color: theme.palette.text.secondary
   }
 }));
 
@@ -117,10 +112,15 @@ const PushOptInModal = ({
           className: cx(classes.image, 'push-opt-in-modal__image'),
           alt: "",
           "aria-hidden": "true"
-        }), /*#__PURE__*/_jsx(I18n.Text, {
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "h3",
+          component: "div",
+          fontWeight: "bold",
           className: cx(classes.title, 'push-opt-in-modal__title'),
-          string: modalTitle || 'pushOptInModal.title',
-          id: "pushOptInDialogTitle"
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: modalTitle || 'pushOptInModal.title',
+            id: "pushOptInDialogTitle"
+          })
         }), /*#__PURE__*/_jsx(I18n.Text, {
           className: cx('push-opt-in-modal__message'),
           string: modalMessage || 'pushOptInModal.message',

package/registration/components/GuestRegistration/GuestRegistrationFormPickup.js

@@ -22,13 +22,13 @@ const useStyles = makeStyles()(theme => ({
     },
     ' .guestFormPickupPerson .label span': {
       color: theme.palette.text.primary,
-      fontWeight: 'bold'
+      fontWeight: theme.typography.fontWeightBold
     },
     ' .guestFormPickupPerson .radioGroup': {
       marginTop: theme.spacing(1),
       flexDirection: 'row',
       ' .uncheckedIcon': {
-        color: 'var(--color-text-medium-emphasis)'
+        color: theme.palette.text.secondary
       }
     },
     ...StylePresets.getOutlinedFormFields(theme)

package/registration/components/Registration/RegistrationContent.js

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
-import { isIOSTheme, SHOP_SETTING_REGISTRATION_MODE_SIMPLE } from '@shopgate/engage/core';
+import { isIOSTheme } from '@shopgate/engage/core';
+import { SHOP_SETTING_REGISTRATION_MODE_SIMPLE } from '@shopgate/engage/settings/constants/shopSettings';
 import RegistrationFormBase from "./RegistrationFormBase";
 import RegistrationFormBilling from "./RegistrationFormBilling";
 import RegistrationFormShipping from "./RegistrationFormShipping";

package/registration/components/Registration/RegistrationFormBase.config.js

@@ -1,4 +1,5 @@
-import { i18n, SHOP_SETTING_REGISTRATION_MODE_SIMPLE, SHOP_SETTING_REGISTRATION_MODE_EXTENDED } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core';
+import { SHOP_SETTING_REGISTRATION_MODE_SIMPLE, SHOP_SETTING_REGISTRATION_MODE_EXTENDED } from '@shopgate/engage/settings/constants/shopSettings';
 
 /**
  * Generates form configuration.

package/registration/providers/GuestRegistrationProvider.actions.js

@@ -1,7 +1,7 @@
 import { EVALIDATION } from '@shopgate/engage/core';
 import { updateCheckoutOrder } from '@shopgate/engage/checkout/actions';
 import { extractAttributes, convertPipelineValidationErrors } from '@shopgate/engage/account/helper/form';
-import { getMerchantCustomerAttributes } from '@shopgate/engage/core/selectors/merchantSettings';
+import { getMerchantCustomerAttributes } from '@shopgate/engage/settings/selectors/merchantSettings';
 
 /**
  * Submits guest registration form data.

package/registration/providers/GuestRegistrationProvider.connector.js

@@ -2,11 +2,12 @@ import { connect } from 'react-redux';
 import { getShopSettings, getConfigFetching } from '@shopgate/engage/core/config';
 import { hasDirectShipItems } from '@shopgate/engage/cart';
 import { getPreferredLocationAddress } from '@shopgate/engage/locations/selectors';
-import { getMerchantCustomerAttributes } from '@shopgate/engage/core/selectors/merchantSettings';
+import { getMerchantCustomerAttributes } from '@shopgate/engage/settings/selectors/merchantSettings';
 import { getCheckoutBillingAddress, getCheckoutShippingAddress, getCheckoutPickupAddress, getCheckoutOrderCustomer, getIsReserveOnly, isPickupAndBillingEquals, isShippingBillingEquals, getIsShippingAddressSelectionEnabled, getIsPickupContactSelectionEnabled } from '@shopgate/engage/checkout/selectors/order';
 import { getNeedsPaymentForOrder } from '@shopgate/engage/checkout/selectors/payment';
 import { prepareCheckout } from '@shopgate/engage/checkout/actions';
-import { historyPush, historyPop, makeIsLastStackEntry, getNumberOfAddressLines } from '@shopgate/engage/core';
+import { historyPush, historyPop, makeIsLastStackEntry } from '@shopgate/engage/core';
+import { getNumberOfAddressLines } from '@shopgate/engage/settings/selectors/shopSettings';
 import { submitGuestRegistration } from "./GuestRegistrationProvider.actions";
 
 /**

package/registration/providers/GuestRegistrationProvider.js

@@ -5,7 +5,8 @@ import identity from 'lodash/identity';
 import appConfig from '@shopgate/pwa-common/helpers/config';
 import { useFormState } from '@shopgate/engage/core/hooks/useFormState';
 import { useScrollTo } from '@shopgate/engage/core/hooks/useScrollTo';
-import { LoadingProvider, i18n, useAsyncMemo, useRoute, SHOP_SETTING_REGISTRATION_MODE_EXTENDED } from '@shopgate/engage/core';
+import { LoadingProvider, i18n, useAsyncMemo, useRoute } from '@shopgate/engage/core';
+import { SHOP_SETTING_REGISTRATION_MODE_EXTENDED } from '@shopgate/engage/settings/constants/shopSettings';
 import { ADDRESS_TYPE_SHIPPING, ADDRESS_TYPE_PICKUP } from '@shopgate/engage/checkout';
 import { extractDefaultValues } from "../../account/helper/form";
 import { GUEST_CHECKOUT_PATTERN, GUEST_CHECKOUT_PAYMENT_PATTERN } from "../../checkout/constants/routes";

package/registration/providers/RegistrationProvider.actions.js

@@ -1,6 +1,8 @@
-import { EVALIDATION, getRegistrationMode, SHOP_SETTING_REGISTRATION_MODE_SIMPLE } from '@shopgate/engage/core';
+import { EVALIDATION } from '@shopgate/engage/core';
+import { getRegistrationMode } from '@shopgate/engage/settings/selectors/shopSettings';
+import { SHOP_SETTING_REGISTRATION_MODE_SIMPLE } from '@shopgate/engage/settings/constants/shopSettings';
 import { extractAttributes, convertPipelineValidationErrors } from '@shopgate/engage/account/helper/form';
-import { getMerchantCustomerAttributes } from '@shopgate/engage/core/selectors/merchantSettings';
+import { getMerchantCustomerAttributes } from '@shopgate/engage/settings/selectors/merchantSettings';
 import { submitRegistration as submit } from "../actions";
 
 /**

package/registration/providers/RegistrationProvider.connector.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
 import { getShopSettings, getConfigFetching } from '@shopgate/engage/core/config';
-import { getNumberOfAddressLines, getRegistrationMode } from '@shopgate/engage/core';
+import { getNumberOfAddressLines, getRegistrationMode } from '@shopgate/engage/settings/selectors/shopSettings';
 import { hasDirectShipItems } from '@shopgate/engage/cart';
 import { getPreferredLocationAddress } from '@shopgate/engage/locations/selectors';
-import { getMerchantCustomerAttributes } from '@shopgate/engage/core/selectors/merchantSettings';
+import { getMerchantCustomerAttributes } from '@shopgate/engage/settings/selectors/merchantSettings';
 import { submitRegistration } from "./RegistrationProvider.actions";
 
 /**

package/registration/providers/RegistrationProvider.constraints.js

@@ -1,4 +1,4 @@
-import { SHOP_SETTING_REGISTRATION_MODE_EXTENDED, SHOP_SETTING_REGISTRATION_MODE_SIMPLE } from '@shopgate/engage/core';
+import { SHOP_SETTING_REGISTRATION_MODE_EXTENDED, SHOP_SETTING_REGISTRATION_MODE_SIMPLE } from '@shopgate/engage/settings/constants/shopSettings';
 import { generateFormConstraints } from '@shopgate/engage/account/helper/form';
 
 /**

package/registration/providers/RegistrationProvider.js

@@ -1,6 +1,7 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import { REGISTER_PATH } from '@shopgate/pwa-common/constants/RoutePaths';
-import { LoadingProvider, i18n, useRoute, SHOP_SETTING_REGISTRATION_MODE_SIMPLE } from '@shopgate/engage/core';
+import { LoadingProvider, i18n, useRoute } from '@shopgate/engage/core';
+import { SHOP_SETTING_REGISTRATION_MODE_SIMPLE } from '@shopgate/engage/settings/constants/shopSettings';
 import { useFormState } from '@shopgate/engage/core/hooks/useFormState';
 import appConfig from '@shopgate/pwa-common/helpers/config';
 import PropTypes from 'prop-types';

package/reviews/components/Reviews/components/Header/components/NoReviews/index.js

@@ -8,7 +8,7 @@ import WriteReviewLink from "../WriteReviewLink";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     margin: 0
   },
   noReviews: {

package/reviews/components/Reviews/components/Header/components/ReviewsExcerpt/index.js

@@ -8,11 +8,11 @@ import WriteReviewLink from "../WriteReviewLink";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     margin: 0
   },
   withTopGapContainer: {
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     margin: 0,
     marginTop: theme.spacing(4)
   },
@@ -24,7 +24,7 @@ const useStyles = makeStyles()(theme => ({
     marginBottom: -2
   },
   averageRatingNumber: {
-    color: 'var(--color-primary)',
+    color: theme.palette.primary.main,
     marginLeft: theme.spacing(1)
   },
   averageRatingText: {

package/reviews/components/Reviews/components/Header/components/WriteReviewLink/spec.js

@@ -1,35 +1,52 @@
 import React from 'react';
-import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
-import { mount } from 'enzyme';
-import { mockedStateWithAll } from '@shopgate/pwa-common-commerce/reviews/mock';
+import { render, screen } from '@testing-library/react';
 import WriteReviewLink from "./index";
+
+/* eslint-disable react/prop-types */
 import { jsx as _jsx } from "react/jsx-runtime";
-const mockedStore = configureStore();
-jest.mock('@shopgate/engage/components');
+jest.mock('@shopgate/engage/components', () => ({
+  I18n: {
+    Text: ({
+      string
+    }) => /*#__PURE__*/_jsx("span", {
+      children: string
+    })
+  }
+}));
+jest.mock('@shopgate/pwa-ui-shared/ButtonLink', () => {
+  function ButtonLink(props) {
+    const {
+      children,
+      href,
+      noGap,
+      ...rest
+    } = props;
+    return /*#__PURE__*/_jsx("a", {
+      href: href,
+      ...rest,
+      "data-no-gap": String(noGap),
+      children: children
+    });
+  }
+  return ButtonLink;
+});
 
 /**
- * Creates component with provided store state.
- * @param {Object} mockedState Mocked stage.
- * @return {ReactWrapper}
+ * Creates component.
+ * @return {void}
  */
-const createComponent = mockedState => {
-  const Component = /*#__PURE__*/_jsx(Provider, {
-    store: mockedStore(mockedState),
-    children: /*#__PURE__*/_jsx(WriteReviewLink, {
-      productId: "foo"
-    })
-  });
-  return mount(Component);
-};
+const createComponent = () => render(/*#__PURE__*/_jsx(WriteReviewLink, {
+  productId: "foo"
+}));
 describe('<WriteReviewLink>', () => {
-  let component = null;
-  beforeEach(() => {
-    jest.resetModules();
-  });
   it('should render when current product is set', () => {
-    component = createComponent(mockedStateWithAll);
-    expect(component).toMatchSnapshot();
-    expect(component.find('Text[string="reviews.button_add"]').exists()).toBe(true);
+    createComponent();
+    const link = screen.getByRole('link', {
+      name: 'reviews.button_add'
+    });
+    expect(link).toHaveAttribute('href', '/item/666f6f/write_review');
+    expect(screen.getByText('reviews.button_add')).toBeTruthy();
   });
-});
+});
+
+/* eslint-enable react/prop-types */

package/reviews/components/Reviews/components/Header/spec.js

@@ -1,60 +1,78 @@
 import React from 'react';
-import { Provider } from 'react-redux';
-import { mount } from 'enzyme';
-import configureStore from 'redux-mock-store';
-import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
+import { render, screen } from '@testing-library/react';
 import { mockProductId, mockedStateWithoutReview, mockedStateWithAll } from '@shopgate/pwa-common-commerce/reviews/mock';
 import Header from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
-const mockedStore = configureStore();
-jest.mock('@shopgate/engage/components');
+const mockNoReviews = jest.fn(props => /*#__PURE__*/_jsx("div", {
+  "data-testid": "no-reviews",
+  "data-product-id": props.productId
+}));
+const mockReviewsExcerpt = jest.fn(props => /*#__PURE__*/_jsx("div", {
+  "data-testid": "reviews-excerpt",
+  "data-product-id": props.productId,
+  "data-average": String(props.average),
+  "data-count": String(props.count),
+  "data-with-top-gap": String(props.withTopGap)
+}));
+jest.mock("./connector", () => component => component);
+jest.mock("./components/NoReviews", () => props => mockNoReviews(props));
+jest.mock("./components/ReviewsExcerpt", () => props => mockReviewsExcerpt(props));
 
 /**
- * Creates component with provided store state.
- * @param {Object} mockedState Mocked stage.
- * @param {Object|null} props Rating prop.
- * @return {ReactWrapper}
+ * Creates component with provided props.
+ * @param {Object} props Header props.
+ * @returns {object} Render result.
  */
-const createComponent = (mockedState, props = {}) => mount(/*#__PURE__*/_jsx(Provider, {
-  store: mockedStore(mockedState),
-  children: /*#__PURE__*/_jsx(Header, {
-    ...props
-  })
-}), mockRenderOptions);
+const createComponent = (props = {}) => render(/*#__PURE__*/_jsx(Header, {
+  ...props
+}));
 describe('<Header />', () => {
-  let header = null;
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   it('should render empty', () => {
     const productId = mockProductId;
     const {
       rating
     } = mockedStateWithoutReview.product.productsById[productId].productData;
-    header = createComponent(mockedStateWithoutReview, {
+    createComponent({
       productId,
       rating
     });
-    expect(header.find('Header').exists()).toBe(true);
-    expect(header).toMatchSnapshot();
-    expect(header.find('RatingStars').prop('value')).toEqual(0);
-    expect(header.find('RatingCount').isEmptyRender()).toBe(true);
+    expect(screen.getByTestId('no-reviews')).toHaveAttribute('data-product-id', productId);
+    expect(mockNoReviews).toHaveBeenCalledWith(expect.objectContaining({
+      productId
+    }));
+    expect(screen.queryByTestId('reviews-excerpt')).toBeNull();
   });
   it('should render rating summary', () => {
     const productId = mockProductId;
     const {
       rating
     } = mockedStateWithAll.product.productsById[productId].productData;
-    header = createComponent(mockedStateWithAll, {
+    createComponent({
       productId,
       rating
     });
-    expect(header.find('Header').exists()).toBe(true);
-    expect(header).toMatchSnapshot();
-    expect(header.find('RatingStars').prop('value')).toEqual(rating.average);
-    expect(header.find('RatingCount').prop('count')).toEqual(rating.count);
+    expect(screen.getByTestId('reviews-excerpt')).toHaveAttribute('data-product-id', productId);
+    expect(screen.getByTestId('reviews-excerpt')).toHaveAttribute('data-average', String(rating.average));
+    expect(screen.getByTestId('reviews-excerpt')).toHaveAttribute('data-count', String(rating.count));
+    expect(mockReviewsExcerpt).toHaveBeenCalledWith(expect.objectContaining({
+      productId,
+      average: rating.average,
+      count: rating.count,
+      withTopGap: false
+    }));
+    expect(screen.queryByTestId('no-reviews')).toBeNull();
   });
   it('should render null when no review is provided', () => {
-    header = createComponent(mockedStateWithAll, {
+    const {
+      container
+    } = createComponent({
       productId: 'some-id'
     });
-    expect(header.isEmptyRender()).toBe(true);
+    expect(container.firstChild).toBeNull();
+    expect(screen.queryByTestId('no-reviews')).toBeNull();
+    expect(screen.queryByTestId('reviews-excerpt')).toBeNull();
   });
 });

package/reviews/components/Reviews/components/List/components/Info/index.js

@@ -1,41 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@shopgate/engage/styles';
+import { Typography } from '@shopgate/engage/components';
 import ReviewDate from "./components/ReviewDate";
 import Author from "./components/Author";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
-  root: {
-    color: 'var(--color-text-medium-emphasis)',
-    fontSize: 14
-  }
-});
 
 /**
  * Review Info Component.
  * @param {Object} props The props.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Info = ({
   review
-}) => {
-  const {
-    classes
-  } = useStyles();
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/aria-role
-    _jsxs("div", {
-      className: classes.root,
-      role: "text",
-      children: [/*#__PURE__*/_jsx(ReviewDate, {
-        date: review.date
-      }), ' ', /*#__PURE__*/_jsx(Author, {
-        author: review.author
-      })]
-    })
-  );
-};
+}) =>
+/*#__PURE__*/
+// eslint-disable-next-line jsx-a11y/aria-role
+_jsxs(Typography, {
+  variant: "body2",
+  component: "div",
+  color: "textSecondary",
+  role: "text",
+  children: [/*#__PURE__*/_jsx(ReviewDate, {
+    date: review.date
+  }), ' ', /*#__PURE__*/_jsx(Author, {
+    author: review.author
+  })]
+});
 Info.defaultProps = {
   review: null
 };

package/reviews/components/Reviews/components/List/components/Text/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
-    fontSize: 14,
     fontStyle: 'italic',
     whiteSpace: 'pre-line'
   }
@@ -24,7 +24,9 @@ const Text = ({
   if (!review) {
     return null;
   }
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "body2",
+    component: "div",
     className: classes.root,
     children: `"${review}"`
   });

package/reviews/components/Reviews/components/List/components/Title/index.js

@@ -2,12 +2,12 @@ import React 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 => ({
   root: {
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     lineHeight: '20px'
   }
-});
+}));
 
 /**
  * Review Title Component.

package/reviews/components/Reviews/components/List/index.js

@@ -3,20 +3,16 @@ import PropTypes from 'prop-types';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { PRODUCT_REVIEWS_ENTRY } from '@shopgate/engage/product';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import Title from "./components/Title";
 import Rating from "./components/Rating";
 import Text from "./components/Text";
 import Info from "./components/Info";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   item: {
     marginLeft: theme.spacing(2),
     padding: theme.spacing(2, 2, 2, 0),
-    borderTop: `1px solid ${colors.shade7}`
+    borderTop: `1px solid ${theme.components.border.light}`
   }
 }));