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

package/product/components/Header/Shipping/index.js

@@ -7,7 +7,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import Label from "./components/Label";
 import connect from "./connector";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   placeholder: {
     height: 16,
     width: '70%',
@@ -15,9 +15,9 @@ const useStyles = makeStyles()({
     marginBottom: 2
   },
   shipping: {
-    fontSize: '0.875rem'
+    fontSize: theme.typography.body2.fontSize
   }
-});
+}));
 
 /**
  * The Shipping Info component.

package/product/components/Header/Shipping/spec.js

@@ -1,9 +1,8 @@
-import "core-js/modules/es.array.includes.js";
 import React from 'react';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
 import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import Shipping from "./index";
 import { mockedStoreWithShippingPrice, mockedStoreWithFreeShipping, mockedStoreWithUnknownShipping } from "./mock";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,7 +13,7 @@ describe('Shipping label', () => {
    * @param {Object} state The mocked redux state
    * @return {ReactWrapper}
    */
-  const createComponent = state => mount(/*#__PURE__*/_jsx(Provider, {
+  const createComponent = state => render(/*#__PURE__*/_jsx(Provider, {
     store: mockedStore(state),
     children: /*#__PURE__*/_jsx(Shipping, {
       productId: "fakeId"
@@ -22,16 +21,16 @@ describe('Shipping label', () => {
   }), mockRenderOptions);
   it('should render shipping price', () => {
     const component = createComponent(mockedStoreWithShippingPrice);
-    expect(component).toMatchSnapshot();
-    expect(component.html().includes('shipping.cost')).toBe(true);
+    expect(component.container.firstChild).toMatchSnapshot();
+    expect(component.container.textContent).toContain('shipping.cost');
   });
   it('should render free shipping', () => {
     const component = createComponent(mockedStoreWithFreeShipping);
-    expect(component).toMatchSnapshot();
-    expect(component.html().includes('shipping.free')).toBe(true);
+    expect(component.container.firstChild).toMatchSnapshot();
+    expect(component.container.textContent).toContain('shipping.free');
   });
   it('should not render when shipping is unknown', () => {
     const component = createComponent(mockedStoreWithUnknownShipping);
-    expect(component.isEmptyRender()).toBe(true);
+    expect(component.container.firstChild).toBeNull();
   });
 });

package/product/components/Header/Tiers/components/Tier/index.js

@@ -3,15 +3,15 @@ import PropTypes from 'prop-types';
 import { I18n } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   tier: {
     display: 'block',
     lineHeight: 1.35
   },
   price: {
-    fontWeight: 500
+    fontWeight: theme.typography.fontWeightMedium
   }
-});
+}));
 
 /**
  * @param {Object} props The component props.

package/product/components/Header/Tiers/components/Tier/spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import Tier from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Tier />', () => {
@@ -26,11 +26,11 @@ describe('<Tier />', () => {
         to: 5,
         unitPrice: 77.5
       };
-      const wrapper = shallow(/*#__PURE__*/_jsx(Tier, {
+      const wrapper = render(/*#__PURE__*/_jsx(Tier, {
         price: price,
         tier: tier
       }));
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.asFragment()).toMatchSnapshot();
     });
   });
   describe('Rendering without data', () => {
@@ -38,7 +38,7 @@ describe('<Tier />', () => {
       const tier = {
         from: 1
       };
-      const wrapper = shallow(/*#__PURE__*/_jsx(Tier, {
+      const wrapper = render(/*#__PURE__*/_jsx(Tier, {
         tier: tier,
         price: {}
       }));

package/product/components/Header/Tiers/index.js

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import Portal from '@shopgate/pwa-common/components/Portal';
+import { Typography } from '@shopgate/engage/components';
 import { PRODUCT_TIERS, PRODUCT_TIERS_AFTER, PRODUCT_TIERS_BEFORE } from '@shopgate/pwa-common-commerce/product/constants/Portals';
 import { makeStyles } from '@shopgate/engage/styles';
 import Tier from "./components/Tier";
@@ -8,8 +9,7 @@ import connect from "./connector";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   wrapper: {
-    marginTop: 4,
-    fontSize: '0.875rem'
+    marginTop: 4
   }
 });
 
@@ -33,7 +33,9 @@ const Tiers = ({
       name: PRODUCT_TIERS_BEFORE
     }), /*#__PURE__*/_jsx(Portal, {
       name: PRODUCT_TIERS,
-      children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "div",
         className: cx(classes.wrapper, 'engage__product__header__tiers'),
         children: price.tiers.map(tier => /*#__PURE__*/_jsx(Tier, {
           tier: tier,

package/product/components/Header/Tiers/spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import Tiers from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock("./connector", () => cmp => cmp);
@@ -22,21 +22,21 @@ describe('<Tiers />', () => {
         }],
         currency: 'USD'
       };
-      const wrapper = shallow(/*#__PURE__*/_jsx(Tiers, {
+      const wrapper = render(/*#__PURE__*/_jsx(Tiers, {
         price: price
       }));
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.asFragment()).toMatchSnapshot();
     });
   });
   describe('Rendering without data', () => {
     it('should render nothing when price data are not available ({})', () => {
-      const wrapper = shallow(/*#__PURE__*/_jsx(Tiers, {
+      const wrapper = render(/*#__PURE__*/_jsx(Tiers, {
         price: {}
       }));
       expect(wrapper).toBeEmptyRender();
     });
     it('should render nothing when price data are not available (null)', () => {
-      const wrapper = shallow(/*#__PURE__*/_jsx(Tiers, {
+      const wrapper = render(/*#__PURE__*/_jsx(Tiers, {
         price: null
       }));
       expect(wrapper).toBeEmptyRender();
@@ -46,7 +46,7 @@ describe('<Tiers />', () => {
         tiers: [],
         currency: 'USD'
       };
-      const wrapper = shallow(/*#__PURE__*/_jsx(Tiers, {
+      const wrapper = render(/*#__PURE__*/_jsx(Tiers, {
         price: price
       }));
       expect(wrapper).toBeEmptyRender();
@@ -55,7 +55,7 @@ describe('<Tiers />', () => {
       const price = {
         currency: 'USD'
       };
-      const wrapper = shallow(/*#__PURE__*/_jsx(Tiers, {
+      const wrapper = render(/*#__PURE__*/_jsx(Tiers, {
         price: price
       }));
       expect(wrapper).toBeEmptyRender();

package/product/components/MapPriceHint/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { SurroundPortals, I18n, TimeBoundary } from '@shopgate/engage/components';
+import { SurroundPortals, I18n, TimeBoundary, Typography } from '@shopgate/engage/components';
 import { isBeta, useWidgetSettings, useWidgetStyles } from '@shopgate/engage/core';
 import { makeStyles } from '@shopgate/engage/styles';
 import { PRODUCT_MAP_PRICE } from '@shopgate/engage/product';
@@ -10,9 +10,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()((_, {
   hintStyle
 }) => ({
-  defaultStyle: {
-    fontSize: '0.75rem'
-  },
   hintStyle: hintStyle || {}
 }));
 
@@ -45,9 +42,13 @@ const MapPriceHint = ({
       end: new Date(mapPrice.endDate),
       children: ({
         between
-      }) => between && /*#__PURE__*/_jsx(I18n.Text, {
-        string: settings.hint,
-        className: cx('engage__product__map-price-hint', cx(classes.defaultStyle, classes.hintStyle))
+      }) => between && /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        component: "div",
+        className: cx('engage__product__map-price-hint', classes.hintStyle),
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: settings.hint
+        })
       })
     })
   });

package/product/components/Media/MediaImage.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Image from '@shopgate/pwa-common/components/Image';
-import appConfig, { themeShadows } from '@shopgate/pwa-common/helpers/config';
+import appConfig from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { SurroundPortals } from "../../../components";
 import { PORTAL_PRODUCT_IMAGE } from "../../../components/constants";
@@ -19,7 +19,7 @@ const useStyles = makeStyles()({
       right: 0,
       bottom: 0,
       left: 0,
-      boxShadow: themeShadows.productImage,
+      boxShadow: 'inset 0 0 20px rgba(0, 0, 0, .05)',
       pointerEvents: 'none'
     }
   }

package/product/components/Media/MediaPlaceholder.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import PlaceholderIcon from '@shopgate/pwa-ui-shared/icons/PlaceholderIcon';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { defaultProps, propTypes } from "./props";
 import { jsx as _jsx } from "react/jsx-runtime";
 const placeholderIconScale = 0.65;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   placeholderContainer: {
     position: 'relative',
     width: '100%',
@@ -29,9 +28,9 @@ const useStyles = makeStyles()({
     height: `${placeholderIconScale * 100}% !important`,
     top: `${(1.0 - placeholderIconScale) * 50}%`,
     left: `${(1.0 - placeholderIconScale) * 50}%`,
-    color: themeColors.placeholder
+    color: theme.palette.background.emphasized
   }
-});
+}));
 
 /**
  * The media placeholder component.

package/product/components/Options/components/TextOption/components/OptionInfo/index.js

@@ -1,7 +1,7 @@
 import "core-js/modules/es.string.replace.js";
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { Grid, I18n } from '@shopgate/engage/components';
+import { Grid, I18n, Typography } from '@shopgate/engage/components';
 import { ProductContext } from '@shopgate/engage/product/contexts';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -9,14 +9,6 @@ const useStyles = makeStyles()(theme => ({
   info: {
     marginTop: theme.spacing(0.5),
     padding: theme.spacing(0, 2)
-  },
-  required: {
-    color: 'var(--color-text-medium-emphasis)',
-    fontSize: '0.825rem'
-  },
-  price: {
-    textAlign: 'right',
-    fontSize: '0.825rem'
   }
 }));
 
@@ -57,19 +49,27 @@ const OptionInfo = ({
   return /*#__PURE__*/_jsxs(Grid, {
     className: classes.info,
     children: [required && /*#__PURE__*/_jsx(Grid.Item, {
-      className: classes.required,
       "aria-hidden": true,
-      children: /*#__PURE__*/_jsx(I18n.Text, {
-        string: "common.required"
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "span",
+        color: "textSecondary",
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "common.required"
+        })
       })
-    }), !!price && /*#__PURE__*/_jsxs(Grid.Item, {
+    }), !!price && /*#__PURE__*/_jsx(Grid.Item, {
       grow: 1,
-      className: classes.price,
       "aria-hidden": true,
-      children: [`${label}: `, /*#__PURE__*/_jsx(I18n.Price, {
-        currency: currency,
-        price: price
-      })]
+      children: /*#__PURE__*/_jsxs(Typography, {
+        variant: "body2",
+        component: "span",
+        align: "right",
+        children: [`${label}: `, /*#__PURE__*/_jsx(I18n.Price, {
+          currency: currency,
+          price: price
+        })]
+      })
     }), /*#__PURE__*/_jsxs("div", {
       hidden: true,
       id: optionInfoId,

package/product/components/Options/components/TextOption/components/OptionInfo/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
+import { I18n } from '@shopgate/engage/components';
 import { OptionInfo } from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 const optionInfoText = 'Some Text';
@@ -10,11 +11,14 @@ jest.mock('@shopgate/engage/components', () => {
     default: Grid
   } = jest.requireActual('@shopgate/pwa-common/components/Grid');
   const {
-    default: I18n
+    default: I18nComponent
   } = jest.requireActual('@shopgate/pwa-common/components/I18n');
   return {
+    Typography: ({
+      children
+    }) => children,
     Grid,
-    I18n
+    I18n: I18nComponent
   };
 });
 jest.mock('@shopgate/engage/product/contexts', () => ({
@@ -26,38 +30,43 @@ jest.mock('@shopgate/engage/product/contexts', () => ({
     })
   }
 }));
+const createComponent = props => render(/*#__PURE__*/_jsx(I18n.Provider, {
+  children: /*#__PURE__*/_jsx(OptionInfo, {
+    ...props
+  })
+}), mockRenderOptions);
 describe('<OptionInfo />', () => {
   it('should not render when not required and no price', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(OptionInfo, {
+    const wrapper = createComponent({
       required: false,
-      label: "",
+      label: '',
       price: 0,
-      currency: "EUR",
+      currency: 'EUR',
       info: optionInfoText,
-      optionInfoId: optionInfoId
-    }), mockRenderOptions);
-    expect(wrapper).toBeEmptyRender();
+      optionInfoId
+    });
+    expect(wrapper.container.firstChild).toBeNull();
   });
   it('should render required element', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(OptionInfo, {
+    const wrapper = createComponent({
       required: true,
-      label: "",
+      label: '',
       price: 0,
-      currency: "EUR",
+      currency: 'EUR',
       info: optionInfoText,
-      optionInfoId: optionInfoId
-    }), mockRenderOptions).dive();
-    expect(wrapper).toMatchSnapshot();
+      optionInfoId
+    });
+    expect(wrapper.container.firstChild).toMatchSnapshot();
   });
   it('should render price element', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(OptionInfo, {
+    const wrapper = createComponent({
       required: false,
-      label: "Label",
+      label: 'Label',
       price: 10,
-      currency: "EUR",
+      currency: 'EUR',
       info: optionInfoText,
-      optionInfoId: optionInfoId
-    }), mockRenderOptions).dive();
-    expect(wrapper).toMatchSnapshot();
+      optionInfoId
+    });
+    expect(wrapper.container.firstChild).toMatchSnapshot();
   });
 });

package/product/components/Options/components/TextOption/index.js

@@ -4,33 +4,29 @@ import Transition from 'react-transition-group/Transition';
 import debounce from 'lodash/debounce';
 import { TextField, InfoIcon } from '@shopgate/engage/components';
 import { withShowModal } from '@shopgate/engage/core/hocs';
-import { makeStyles } from '@shopgate/engage/styles';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import { broadcastLiveMessage } from '@shopgate/engage/a11y';
 import { ProductContext } from '@shopgate/engage/product/contexts';
 import transition from '@shopgate/engage/product/components/Characteristics/transition';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import OptionInformation from "./components/OptionInfo";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   row: {
     marginBottom: theme.spacing(1)
   },
   wrapper: {
-    backgroundColor: 'var(--color-background-accent)',
+    backgroundColor: theme.palette.background.emphasized,
     padding: theme.spacing(1, 2),
     minHeight: 56
   },
   element: {
     paddingBottom: 0,
     '& label': {
-      fontWeight: 400,
-      color: 'var(--color-text-high-emphasis, inherit)'
+      fontWeight: theme.typography.fontWeightRegular,
+      color: `${theme.palette.text.primary}, inherit`
     },
     '& input': {
-      fontWeight: 500,
+      fontWeight: theme.typography.fontWeightMedium,
       color: theme.palette.text.primary
     },
     '& .placeholder': {
@@ -38,7 +34,7 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   infoIcon: {
-    color: colors.shade9
+    color: theme.palette.grey.medium
   }
 }));
 
@@ -58,6 +54,7 @@ const TextOption = ({
   info,
   value
 }) => {
+  const theme = useTheme();
   const {
     classes
   } = useStyles();
@@ -128,7 +125,7 @@ const TextOption = ({
       children: state => /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx("div", {
           className: classes.wrapper,
-          style: transition[state],
+          style: transition(theme)[state],
           children: /*#__PURE__*/_jsx(TextField, {
             setRef: setRef,
             name: `text_${id}`,

package/product/components/OrderQuantityHint/index.js

@@ -1,33 +1,23 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { I18n, SurroundPortals } from '@shopgate/engage/components';
+import { I18n, SurroundPortals, Typography } from '@shopgate/engage/components';
 import { i18n, hasNewServices, isBeta } from '@shopgate/engage/core/helpers';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
 import { PRODUCT_ORDER_QUANTITY } from '@shopgate/engage/product';
-import { makeStyles } from '@shopgate/engage/styles';
 import { formatFloat } from '@shopgate/engage/components/QuantityInput/helper';
 import withProductStock from "../../hocs/withProductStock";
 import withProduct from "../../hocs/withProduct";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
-  hint: {
-    fontSize: '0.75rem',
-    color: 'var(--color-text-medium-emphasis)'
-  }
-});
 
 /**
  * The Product Order Quantity Hint component.
  * @return {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const OrderQuantityHint = ({
   stock,
   product,
   className
 }) => {
-  const {
-    classes
-  } = useStyles();
   const {
     hasCatchWeight,
     unit: productUnit
@@ -56,8 +46,10 @@ const OrderQuantityHint = ({
       portalProps: {
         stock
       },
-      children: [showContent && stock && !!stock.minOrderQuantity && /*#__PURE__*/_jsx("div", {
-        className: classes.hint,
+      children: [showContent && stock && !!stock.minOrderQuantity && /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        component: "div",
+        color: "textSecondary",
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "product.minOrderQuantity",
           params: {
@@ -65,8 +57,10 @@ const OrderQuantityHint = ({
             unit
           }
         })
-      }), showContent && stock && !!stock.maxOrderQuantity && /*#__PURE__*/_jsx("div", {
-        className: classes.hint,
+      }), showContent && stock && !!stock.maxOrderQuantity && /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        component: "div",
+        color: "textSecondary",
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "product.maxOrderQuantity",
           params: {

package/product/components/PriceDifference/index.js

@@ -1,23 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import Price from '@shopgate/pwa-ui-shared/Price';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   positive: {
-    color: colors.shade4,
+    color: theme.palette.grey.medium,
     ':before': {
       content: '"+"'
     }
   },
   negative: {
-    color: 'var(--color-primary)'
+    color: theme.palette.primary.main
   }
-});
+}));
 
 /**
  * The price difference component

package/product/components/PriceInfo/PriceInfo.connector.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
-import { makeGetShopSettingByKey } from "../../../core/selectors/shopSettings";
-import { SHOP_SETTING_DISPLAY_PRICE_PER_MEASURE_UNIT } from "../../../core/constants";
+import { makeGetShopSettingByKey } from '@shopgate/engage/settings/selectors/shopSettings';
+import { SHOP_SETTING_DISPLAY_PRICE_PER_MEASURE_UNIT } from '@shopgate/engage/settings/constants/shopSettings';
 
 /**
  * Creates the mapStateToProps connector function.

package/product/components/PriceInfo/PriceInfo.js

@@ -3,17 +3,16 @@ import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { ConditionalWrapper } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import connect from "./PriceInfo.connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
-    color: themeConfig.colors.shade3
+    color: theme.palette.grey.medium
   },
   noWrap: {
     whiteSpace: 'nowrap'
   }
-});
+}));
 
 /**
  * The price info component

package/product/components/ProductCard/index.js

@@ -11,20 +11,19 @@ import { PRODUCT_ITEM_DISCOUNT, PRODUCT_ITEM_PRICE } from '@shopgate/engage/cate
 import { makeStyles } from '@shopgate/engage/styles';
 import ProductGridPrice from "../ProductGridPrice";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   details: {
-    padding: '12px 16px',
-    lineHeight: 1.35
+    padding: '12px 16px'
   },
   title: {
-    fontWeight: '500',
+    fontWeight: theme.typography.fontWeightMedium,
     lineHeight: 1.15,
     marginTop: 1
   },
   badgeWrapper: {
     minWidth: 40
   }
-});
+}));
 const location = 'productCard';
 
 /**

package/product/components/ProductDiscountBadge/index.js

@@ -8,7 +8,7 @@ import { useWidgetSettings } from '@shopgate/engage/core';
 import ProductBadges from "../ProductBadges";
 import connect from "./connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   portal: {
     top: 12,
     [responsiveMediaQuery('>xs', {
@@ -28,11 +28,11 @@ const useStyles = makeStyles()(() => ({
     }
   },
   badge: {
-    fontSize: '1.15rem',
+    fontSize: theme.typography.h4.fontSize,
     [responsiveMediaQuery('>xs', {
       webOnly: true
     })]: {
-      fontSize: 14
+      fontSize: theme.typography.body2.fontSize
     }
   }
 }));