@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/page/widgets/NestedCategoryFilter/NestedCategoryFilter.js

@@ -1,30 +1,24 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { I18n, ButtonLink } from '@shopgate/engage/components';
+import { I18n } 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 { Button } from '@shopgate/engage/components/v2';
 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)
   },
   buttonContainer: {
-    padding: theme.spacing(0, 2)
-  },
-  button: {
-    width: '100%'
+    padding: theme.spacing(0, 2),
+    margin: theme.spacing(1, 0)
   }
 }));
 
@@ -147,11 +141,12 @@ const NestedCategoryFilter = () => {
       className: "widget__nested-category-filter__headline"
     }) : null, categoryPickers, /*#__PURE__*/_jsx("div", {
       className: cx(classes.buttonContainer, 'widget__nested-category-filter__button-container'),
-      children: /*#__PURE__*/_jsx(ButtonLink, {
-        className: cx(classes.button, 'widget__nested-category-filter__CTA-button'),
+      children: /*#__PURE__*/_jsx(Button, {
         href: `${CATEGORY_PATH}/${bin2hex(state.buttonCategoryId)}`,
+        color: "primary",
+        fullWidth: true,
+        className: "widget__nested-category-filter__CTA-button",
         disabled: !state.buttonCategoryId,
-        flat: false,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "common.show_products",
           className: "widget__nested-category-filter__CTA-button__text"

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/page/widgets/ProductList/ProductList.js

@@ -1,23 +1,27 @@
 import "core-js/modules/es.regexp.flags.js";
 import React, { useCallback } from 'react';
-import { ActionButton, I18n } from '@shopgate/engage/components';
+import { I18n } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { ProductGrid } from '@shopgate/engage/product/components';
 import { useWidgetProducts } from '@shopgate/engage/page/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useProductListWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
-    // Prevent that the ActionButton margin messes with the layout of the sibling widgets
     overflow: 'hidden'
   },
+  loadMore: {
+    textAlign: 'center',
+    margin: theme.spacing(1, 0)
+  },
   grid: {
     '&&': {
       marginTop: 0
     }
   }
-});
+}));
 
 /**
  * The ProductListWidget is used to display product lists.
@@ -66,16 +70,16 @@ const ProductListWidget = () => {
       scope: "widgets",
       infiniteLoad: false,
       className: classes.grid
-    }), hasNext && showLoadMore && /*#__PURE__*/_jsx(ActionButton, {
-      loading: isFetching,
-      onClick: handleFetchNext
-      // Disable click delay in preview mode to enable stopping of propagation.
-      ,
-      ...(isPreview && {
-        disableClickDelay: true
-      }),
-      children: /*#__PURE__*/_jsx(I18n.Text, {
-        string: "common.load_more"
+    }), hasNext && showLoadMore && /*#__PURE__*/_jsx("div", {
+      className: classes.loadMore,
+      children: /*#__PURE__*/_jsx(Button, {
+        variant: "text",
+        color: "secondary",
+        loading: isFetching,
+        onClick: handleFetchNext,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "common.load_more"
+        })
       })
     })]
   });

package/page/widgets/ProductSlider/ProductSlider.js

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { ProductSlider } from '@shopgate/engage/product/components';
 import { useWidgetProducts } from '@shopgate/engage/page/hooks';
-import { useTheme } from '@shopgate/engage/styles';
 import { useProductSliderWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
 
@@ -30,7 +29,6 @@ const ProductSliderWidget = () => {
     limit: productCount,
     sort
   });
-  const theme = useTheme();
   const productIds = useMemo(() => results?.map(result => result.id), [results]);
   if (!productIds || !productIds.length) {
     return null;
@@ -41,24 +39,12 @@ const ProductSliderWidget = () => {
     }) : null, /*#__PURE__*/_jsx(ProductSlider, {
       productIds: productIds,
       scope: "widgets",
-      productItemProps: productItemProps,
-      slidesPerView: 2.3
+      productItemProps: productItemProps
       // Improves interaction with the slider in the CMS preview iframe
       ,
       ...(isPreview ? {
         touchStartPreventDefault: true
       } : {}),
-      breakpoints: {
-        [theme.breakpoints.values.sm]: {
-          slidesPerView: 3.3
-        },
-        [theme.breakpoints.values.md]: {
-          slidesPerView: 4.3
-        },
-        [theme.breakpoints.values.lg]: {
-          slidesPerView: 5.3
-        }
-      },
       ...swiperProps
     })]
   });

package/page/widgets/Video/Video.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The VideoWidget is used to display a video.
+ */
+declare const Video: () => import("react").JSX.Element;
+export default Video;
+//# sourceMappingURL=Video.d.ts.map

package/page/widgets/Video/Video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.d.ts","sourceRoot":"","sources":["../../../../page/widgets/Video/Video.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,QAAA,MAAM,KAAK,mCAgBV,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/page/widgets/Video/Video.js

@@ -1,10 +1,8 @@
-import React from 'react';
 import { useVideoWidget } from "./hooks";
 import WidgetVideo from "../../components/WidgetVideo";
 
 /**
  * The VideoWidget is used to display a video.
- * @returns {JSX.Element}
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const Video = () => {

package/page/widgets/Video/hooks.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Configuration of the Video widget.
+ */
+export interface VideoWidgetConfig {
+    /**
+     * The video URL.
+     */
+    url: string;
+    /**
+     * Whether the video should be muted.
+     */
+    muted?: boolean;
+    /**
+     * Whether the video should loop.
+     */
+    loop?: boolean;
+    /**
+     * Whether the video should display controls.
+     */
+    controls?: boolean;
+    /**
+     * Whether the video should autoplay.
+     */
+    autoplay?: boolean;
+    /**
+     * The border radius option.
+     */
+    borderRadius: 'default' | 'none' | 'rounded' | 'custom';
+    /**
+     * The custom border radius value.
+     */
+    borderRadiusCustom?: number;
+    /**
+     * The link URL.
+     */
+    link?: string;
+}
+/**
+ * Resolved data returned by {@link useVideoWidget}. Reuses the field docs from
+ * {@link VideoWidgetConfig} for the pass-through fields via `Pick`.
+ */
+export interface UseVideoWidgetResult extends Pick<VideoWidgetConfig, 'url' | 'muted' | 'loop' | 'controls' | 'autoplay' | 'link'> {
+    /**
+     * The resolved border radius as a CSS length.
+     */
+    borderRadius: string;
+}
+/**
+ * Hook to access the Video widget configuration and data.
+ * @returns The resolved Video widget data.
+ */
+export declare const useVideoWidget: () => UseVideoWidgetResult;
+//# sourceMappingURL=hooks.d.ts.map

package/page/widgets/Video/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../page/widgets/Video/hooks.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IACxD;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,iBAAiB,EACjB,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAC5D;IACC;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,QAAO,oBAoBjC,CAAC"}

package/page/widgets/Video/hooks.js

@@ -2,27 +2,19 @@ import { useWidget } from '@shopgate/engage/page/hooks';
 import { resolveBorderRadiusFromWidgetConfig } from "../../helpers";
 
 /**
- * @typedef {Object} VideoWidgetConfig
- * @property {string} url The video URL.
- * @property {boolean} [muted] Whether the video should be muted.
- * @property {boolean} [loop] Whether the video should loop.
- * @property {boolean} [controls] Whether the video should display controls.
- * @property {boolean} [autoplay] Whether the video should autoplay.
- * @property {number} [borderRadius] The border radius preset.
- * @property {string} [link] The link URL.
+ * Configuration of the Video widget.
  */
 
 /**
- * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
- *   .useWidget<VideoWidgetConfig> >} UseWidgetReturnType
+ * Resolved data returned by {@link useVideoWidget}. Reuses the field docs from
+ * {@link VideoWidgetConfig} for the pass-through fields via `Pick`.
  */
 
-// eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the Video widget configuration and data.
+ * @returns The resolved Video widget data.
  */
 export const useVideoWidget = () => {
-  /** @type {UseWidgetReturnType}  */
   const {
     config
   } = useWidget();

package/page/widgets/Video/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Video';
+//# sourceMappingURL=index.d.ts.map

package/page/widgets/Video/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../page/widgets/Video/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

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
       })]: {

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

@@ -2,19 +2,15 @@ import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import Transition from 'react-transition-group/Transition';
-import { ResponsiveContainer, ArrowDropIcon } from '@shopgate/engage/components';
+import { ResponsiveContainer, ArrowDropIcon, Typography } from '@shopgate/engage/components';
 import { withStyles, cx } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/engage';
 import Sheet from "./components/Sheet";
 import transition from "../transition";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const {
-  colors: themeColors
-} = themeConfig;
 
 /**
  * A single characteristic.
  */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 let Characteristic = /*#__PURE__*/function (_PureComponent) {
   /**
    * @param {Object} props The component props
@@ -103,7 +99,9 @@ let Characteristic = /*#__PURE__*/function (_PureComponent) {
         ref: charRef,
         style: transition[state],
         "data-test-id": label,
-        children: [selected && /*#__PURE__*/_jsx("div", {
+        children: [selected && /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          component: "div",
           className: `${classes.label} theme__product__characteristic__label`,
           children: label
         }), /*#__PURE__*/_jsx("div", {
@@ -183,7 +181,7 @@ Characteristic.defaultProps = {
 };
 export default withStyles(Characteristic, theme => ({
   button: {
-    background: 'var(--color-background-accent)',
+    background: theme.palette.background.emphasized,
     color: theme.palette.text.primary,
     position: 'relative',
     cursor: 'pointer',
@@ -197,20 +195,19 @@ export default withStyles(Characteristic, theme => ({
     transition: 'background 250ms ease-in, color 250ms ease-in'
   },
   buttonDisabled: {
-    color: `${themeColors.shade4} !important`
+    color: `${theme.palette.grey.medium} !important`
   },
   label: {
-    fontSize: 12,
     marginTop: -2,
     marginBottom: 4
   },
   selection: {
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     lineHeight: 1.125
   },
   arrow: {
     position: 'absolute',
     right: 32,
-    fontSize: 20
+    fontSize: theme.components.icon.small
   }
 }));

package/product/components/Characteristics/Swatch/index.js

@@ -3,13 +3,9 @@ import PropTypes from 'prop-types';
 import Transition from 'react-transition-group/Transition';
 import { VariantSwatch } from '@shopgate/engage/product/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import transition from "../transition";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   label: {
     display: 'flex',
     flexDirection: 'column',
@@ -18,11 +14,11 @@ const useStyles = makeStyles()(() => ({
     outline: 0,
     padding: '12px 16px',
     transition: 'background 250ms ease-in, color 250ms ease-in',
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     lineHeight: 1.125
   },
   labelDisabled: {
-    color: colors.shade4
+    color: theme.palette.action.disabled
   },
   items: {
     padding: '0 16px',

package/product/components/Characteristics/transition.js

@@ -1,10 +1,10 @@
 export default {
   entering: {
-    background: 'var(--color-primary)',
-    color: 'var(--color-primary-contrast)'
+    background: 'var(--sg-palette-primary-main)',
+    color: 'var(--sg-palette-primary-contrastText)'
   },
   entered: {
-    background: 'var(--color-primary)',
-    color: 'var(--color-primary-contrast)'
+    background: 'var(--sg-palette-primary-main)',
+    color: 'var(--sg-palette-primary-contrastText)'
   }
 };

package/product/components/Description/index.js

@@ -1,26 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { SurroundPortals, PlaceholderParagraph, HtmlSanitizer, I18n } from '@shopgate/engage/components';
+import { SurroundPortals, PlaceholderParagraph, HtmlSanitizer, I18n, Typography } from '@shopgate/engage/components';
 import { PRODUCT_DESCRIPTION } from '@shopgate/engage/product';
 import { makeStyles } from '@shopgate/engage/styles';
 import connect from "./connector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
-    fontSize: '0.875rem',
     padding: '0.8125rem 1rem 1rem'
   },
   title: {
-    fontSize: '1rem',
-    fontWeight: 500,
-    marginBottom: '0.5rem',
-    color: theme.palette.text.primary
+    marginBottom: '0.5rem'
   },
   content: {
     lineHeight: 1.7,
     overflow: 'hidden',
     wordBreak: ['break-all', 'break-word'],
-    color: theme.palette.text.primary,
     hyphens: 'auto',
     ' ul': {
       listStyle: 'disc'
@@ -69,7 +64,9 @@ function Description({
     },
     children: html !== '' && /*#__PURE__*/_jsxs("div", {
       className: cx(classes.container, 'engage__product__description'),
-      children: [/*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h5",
+        component: "div",
         className: cx(classes.title, 'theme__description_heading'),
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "product.description_heading"

package/product/components/EffectivityDates/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isBeta, useWidgetSettings, useWidgetStyles } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { I18n, TimeBoundary, SurroundPortals } from '@shopgate/engage/components';
+import { TimeBoundary, SurroundPortals, Typography } from '@shopgate/engage/components';
 import { PRODUCT_EFFECTIVITY_DATES } from '@shopgate/pwa-common-commerce/product/constants/Portals';
 import { showExpiringLabel, showScheduledLabel } from "./helpers";
 import connect from "./connector";
@@ -12,12 +13,10 @@ const useStyles = makeStyles()((theme, {
 }) => ({
   hint: {
     color: theme.palette.success.main,
-    fontSize: '0.75rem',
     ...(hintStyle || {})
   },
   notAvailable: {
-    color: theme.palette.error.main,
-    fontSize: '0.75rem'
+    color: theme.palette.error.main
   }
 }));
 
@@ -60,30 +59,37 @@ const EffectivityDates = ({
         after
       }) => {
         if (before) {
-          return showScheduledLabel(startDate, settings) ? /*#__PURE__*/_jsx(I18n.Text, {
-            string: "product.available.at",
-            params: {
+          return showScheduledLabel(startDate, settings) ? /*#__PURE__*/_jsx(Typography, {
+            variant: "caption",
+            component: "span",
+            color: "success",
+            className: classes.hint,
+            children: i18n.text('product.available.at', {
               startDate
-            },
-            className: classes.hint
+            })
           }) : children;
         }
         if (between) {
           return /*#__PURE__*/_jsxs(_Fragment, {
-            children: [children, showExpiringLabel(endDate, settings) && /*#__PURE__*/_jsx(I18n.Text, {
-              string: "product.available.until",
-              params: {
+            children: [children, showExpiringLabel(endDate, settings) && /*#__PURE__*/_jsx(Typography, {
+              variant: "caption",
+              component: "span",
+              color: "success",
+              className: classes.hint,
+              children: i18n.text('product.available.until', {
                 endDate
-              },
-              className: classes.hint
+              })
             })]
           });
         }
         if (after) {
           productNotAvailable();
-          return showExpiringLabel(endDate, settings) ? /*#__PURE__*/_jsx(I18n.Text, {
-            string: "product.available.not",
-            className: cx(classes.hint, classes.notAvailable)
+          return showExpiringLabel(endDate, settings) ? /*#__PURE__*/_jsx(Typography, {
+            variant: "caption",
+            component: "span",
+            color: "error",
+            className: cx(classes.hint, classes.notAvailable),
+            children: i18n.text('product.available.not')
           }) : children;
         }
         return children;