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

package/admin-preview/detection.js

@@ -0,0 +1,166 @@
+import "core-js/modules/es.array.includes.js";
+// The logger is imported from @shopgate/pwa-core/helpers rather than @shopgate/engage/core/helpers
+// on purpose: that barrel pulls in scrollContainer, which imports this module back. Since detection
+// runs while the constants module is evaluated, the cycle would resolve to undefined at boot.
+import { logger } from '@shopgate/pwa-core/helpers';
+export const PAGE_PREVIEW_PATTERN = '/shopgate-internal-page-preview';
+export const FRONTEND_SETTINGS_PREVIEW_PARAM = 'frontendSettingsPreview=true';
+export const SESSION_STORAGE_KEY_PAGE_PREVIEW = 'sgPageAdminPreview';
+export const SESSION_STORAGE_KEY_FRONTEND_SETTINGS_PREVIEW = 'sgFrontendSettingsAdminPreview';
+const LOG_PREFIX = '[AdminPreview]';
+
+/**
+ * The url as it was when this module was first evaluated. Captured here because detection can run
+ * again later, when the url may already have been rewritten.
+ */
+const INITIAL_HREF = window.location.href;
+
+/**
+ * Remembers the last logged result per detector, so repeated calls only log on a real change.
+ * isAdminPreviewActive() is called from hot paths like breakpoints and scroll handling.
+ */
+const lastLoggedResults = {};
+
+/**
+ * Reads a sticky preview flag. Storage access throws in a sandboxed iframe without
+ * "allow-same-origin", and is blocked by some browsers in cross-origin iframes - the preview
+ * runs in exactly that context, so a throw here would break app boot for everyone.
+ * @param key The session storage key to read.
+ * @returns True when the flag was persisted before, false otherwise.
+ */
+const readStickyFlag = key => {
+  try {
+    return window.sessionStorage.getItem(key) === '1';
+  } catch (error) {
+    logger.warn(`${LOG_PREFIX} session storage is not readable`, {
+      key,
+      error
+    });
+    return false;
+  }
+};
+
+/**
+ * Persists a sticky preview flag, so preview mode survives a reload or a url rewrite that drops
+ * the query string. See readStickyFlag for why this can throw.
+ * @param key The session storage key to write.
+ */
+const writeStickyFlag = key => {
+  try {
+    window.sessionStorage.setItem(key, '1');
+  } catch (error) {
+    logger.warn(`${LOG_PREFIX} session storage is not writable`, {
+      key,
+      error
+    });
+  }
+};
+
+/**
+ * Logs how a detection result was reached, but only when it differs from the previous result for
+ * that detector. Kept verbose on purpose: it exists to investigate why preview mode is not picked
+ * up on deployed builds.
+ * @param name The detector that produced the result.
+ * @param result The detected result.
+ * @param matchedUrl Whether the current url carries the preview marker.
+ * @param matchedStickyFlag Whether the persisted sticky flag was set.
+ */
+const logDetection = (name, result, matchedUrl, matchedStickyFlag) => {
+  if (lastLoggedResults[name] === result) {
+    return;
+  }
+  lastLoggedResults[name] = result;
+  logger.log(`${LOG_PREFIX} ${name} -> ${result}`, {
+    result,
+    // True when the url still carries the marker.
+    matchedUrl,
+    // True when the result came from the persisted flag - i.e. the url lost the marker.
+    matchedStickyFlag,
+    // Compare these two to see whether the url changed since the app booted.
+    initialHref: INITIAL_HREF,
+    currentHref: window.location.href,
+    pathname: window.location.pathname,
+    search: window.location.search,
+    // A cross-origin parent means the app really is embedded in the admin.
+    isInIframe: window.parent !== window,
+    referrer: document.referrer
+  });
+};
+
+/**
+ * Detects whether the app is in page admin preview mode. Once detected, the result is remembered
+ * for the rest of the session, because the url is not guaranteed to keep the preview marker.
+ * @returns True if the app is in page admin preview mode, false otherwise.
+ */
+export const detectPageAdminPreview = () => {
+  const matchedUrl = window.location.pathname.startsWith(PAGE_PREVIEW_PATTERN);
+  if (matchedUrl) {
+    writeStickyFlag(SESSION_STORAGE_KEY_PAGE_PREVIEW);
+    logDetection('detectPageAdminPreview', true, true, false);
+    return true;
+  }
+  const matchedStickyFlag = readStickyFlag(SESSION_STORAGE_KEY_PAGE_PREVIEW);
+  logDetection('detectPageAdminPreview', matchedStickyFlag, false, matchedStickyFlag);
+  return matchedStickyFlag;
+};
+
+/**
+ * Detects whether the app is in frontend settings admin preview mode. Once detected, the result is
+ * remembered for the rest of the session, because the url is not guaranteed to keep the query
+ * param.
+ * @returns True if the app is in frontend settings admin preview mode, false otherwise.
+ */
+export const detectFrontendSettingsAdminPreview = () => {
+  const matchedUrl = window.location.search.includes(FRONTEND_SETTINGS_PREVIEW_PARAM);
+  if (matchedUrl) {
+    writeStickyFlag(SESSION_STORAGE_KEY_FRONTEND_SETTINGS_PREVIEW);
+    logDetection('detectFrontendSettingsAdminPreview', true, true, false);
+    return true;
+  }
+  const matchedStickyFlag = readStickyFlag(SESSION_STORAGE_KEY_FRONTEND_SETTINGS_PREVIEW);
+  logDetection('detectFrontendSettingsAdminPreview', matchedStickyFlag, false, matchedStickyFlag);
+  return matchedStickyFlag;
+};
+
+/**
+ * Detects whether the app is in admin preview mode (pages or frontend settings).
+ * @returns True if the app is in admin preview mode, false otherwise.
+ */
+export const detectAdminPreview = () => detectPageAdminPreview() || detectFrontendSettingsAdminPreview();
+
+/**
+ * Returns the current detection state. Exposed on window as SGAdminPreviewDebug so the values can
+ * be inspected on a deployed build, from the console of the preview iframe:
+ *
+ *   window.SGAdminPreviewDebug()
+ *
+ * @returns A snapshot of everything detection depends on.
+ */
+export const getAdminPreviewDebugInfo = () => ({
+  initialHref: INITIAL_HREF,
+  currentHref: window.location.href,
+  pathname: window.location.pathname,
+  search: window.location.search,
+  urlChangedSinceBoot: INITIAL_HREF !== window.location.href,
+  isInIframe: window.parent !== window,
+  referrer: document.referrer,
+  stickyFlags: {
+    page: readStickyFlag(SESSION_STORAGE_KEY_PAGE_PREVIEW),
+    frontendSettings: readStickyFlag(SESSION_STORAGE_KEY_FRONTEND_SETTINGS_PREVIEW)
+  },
+  detected: {
+    page: detectPageAdminPreview(),
+    frontendSettings: detectFrontendSettingsAdminPreview(),
+    any: detectAdminPreview()
+  }
+});
+logger.log(`${LOG_PREFIX} module evaluated`, {
+  href: INITIAL_HREF,
+  search: window.location.search,
+  hasParamAtBoot: window.location.search.includes(FRONTEND_SETTINGS_PREVIEW_PARAM),
+  isInIframe: window.parent !== window,
+  referrer: document.referrer
+});
+
+// @ts-expect-error - debug-only global, intentionally not on the Window type.
+window.SGAdminPreviewDebug = getAdminPreviewDebugInfo;

package/admin-preview/helpers/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Checks if the app is currently in admin preview mode (pages or frontend settings).
+ * @returns True if the app is in admin preview mode, false otherwise.
+ */
+export declare const isAdminPreviewActive: () => boolean;
+/**
+ * Checks if the app is currently in page admin preview mode.
+ * @returns True if the app is in page admin preview mode, false otherwise.
+ */
+export declare const isPageAdminPreviewActive: () => boolean;
+/**
+ * Checks if the app is currently in frontend settings admin preview mode.
+ * @returns True if the app is in frontend settings admin preview mode, false otherwise.
+ */
+export declare const isFrontendSettingsAdminPreviewActive: () => boolean;
+//# sourceMappingURL=index.d.ts.map

package/admin-preview/helpers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/helpers/index.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,QAAO,OAClB,CAAC;AAEvB;;;GAGG;AACH,eAAO,MAAM,wBAAwB,QAAO,OAClB,CAAC;AAE3B;;;GAGG;AACH,eAAO,MAAM,oCAAoC,QAAO,OAClB,CAAC"}

package/admin-preview/helpers/index.js

@@ -0,0 +1,19 @@
+import { detectAdminPreview, detectFrontendSettingsAdminPreview, detectPageAdminPreview } from "../detection";
+
+/**
+ * Checks if the app is currently in admin preview mode (pages or frontend settings).
+ * @returns True if the app is in admin preview mode, false otherwise.
+ */
+export const isAdminPreviewActive = () => detectAdminPreview();
+
+/**
+ * Checks if the app is currently in page admin preview mode.
+ * @returns True if the app is in page admin preview mode, false otherwise.
+ */
+export const isPageAdminPreviewActive = () => detectPageAdminPreview();
+
+/**
+ * Checks if the app is currently in frontend settings admin preview mode.
+ * @returns True if the app is in frontend settings admin preview mode, false otherwise.
+ */
+export const isFrontendSettingsAdminPreviewActive = () => detectFrontendSettingsAdminPreview();

package/admin-preview/hooks/index.d.ts

@@ -0,0 +1,36 @@
+export interface MessageData {
+    /**
+     * Identifier for the kind of message.
+     */
+    type: string;
+    /**
+     * Optional data payload for this message.
+     */
+    payload?: unknown;
+}
+export type OnIframeMessage<TMessage extends MessageData = MessageData> = (data: TMessage, rawEvent: MessageEvent<TMessage>) => void;
+export interface IframeMessengerResult<TMessage extends MessageData = MessageData> {
+    /**
+     * Send data up to window.parent.
+     * If targetOrigin is omitted, uses the most recently seen origin
+     * (from an incoming message). If none was seen yet, falls back to
+     * the origin derived from document.referrer, then parentOrigins[0], then "*".
+     */
+    sendToParent: (data: TMessage, targetOrigin?: string) => void;
+}
+/**
+ * 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 onMessage Callback invoked when a trusted message arrives.
+ * Receives data and the raw event so consumers can inspect origin, source,
+ * and other metadata when needed.
+ * @param parentOrigins Array of allowed parent origin strings, e.g.
+ * ['https://a.example.com', 'https://b.example.com'].
+ * @returns An object with a single method:
+ * sendToParent(data, [targetOrigin]) to post data to the parent window.
+ */
+export declare function useIframeMessenger<TMessage extends MessageData = MessageData>(onMessage: OnIframeMessage<TMessage>, parentOrigins: string[]): IframeMessengerResult<TMessage>;
+//# sourceMappingURL=index.d.ts.map

package/admin-preview/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/hooks/index.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,eAAe,CAAC,QAAQ,SAAS,WAAW,GAAG,WAAW,IAAI,CACxE,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,KAC7B,IAAI,CAAC;AAEV,MAAM,WAAW,qBAAqB,CAAC,QAAQ,SAAS,WAAW,GAAG,WAAW;IAC/E;;;;;OAKG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,SAAS,WAAW,GAAG,WAAW,EAC3E,SAAS,EAAE,eAAe,CAAC,QAAQ,CAAC,EACpC,aAAa,EAAE,MAAM,EAAE,GACtB,qBAAqB,CAAC,QAAQ,CAAC,CAmEjC"}

package/admin-preview/hooks/index.js

@@ -0,0 +1,74 @@
+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 { useCallback, useEffect, useRef } from 'react';
+import { logger } from '@shopgate/engage/core/helpers';
+/**
+ * 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 onMessage Callback invoked when a trusted message arrives.
+ * Receives data and the raw event so consumers can inspect origin, source,
+ * and other metadata when needed.
+ * @param parentOrigins Array of allowed parent origin strings, e.g.
+ * ['https://a.example.com', 'https://b.example.com'].
+ * @returns An object with a single method:
+ * sendToParent(data, [targetOrigin]) to post data to the parent window.
+ */
+export 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 data - The data object to post.
+   * @param targetOrigin Optional override for the origin to post to.
+   * If omitted, uses the last seen origin, then referrer origin,
+   * then parentOrigins[0], then "*".
+   */
+  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 ?? (document.referrer ? new URL(document.referrer).origin : undefined) ?? 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 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
+  };
+}

package/back-in-stock/components/BackInStockButton/index.js

@@ -1,37 +1,31 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { themeConfig } from '@shopgate/engage';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Link, CheckedIcon, Button, NotificationIcon } from '@shopgate/engage/components';
+import { Link, CheckedIcon, Button, NotificationIcon, Typography } from '@shopgate/engage/components';
 import { BACK_IN_STOCK_PATTERN } from '@shopgate/engage/back-in-stock/constants';
 import { i18n } from '@shopgate/engage/core/helpers';
 import connect from "./connector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   button: {
-    lineHeight: '16.5px',
-    color: themeConfig.colors.warning,
+    color: theme.palette.warning.main,
     width: '100%'
   },
   backInStockMessageContainer: {
-    lineHeight: '16.5px',
     display: 'flex',
     alignItems: 'center',
-    width: 'auto'
+    width: 'auto',
+    lineHeight: '16.5px'
   },
   rightAligned: {
     display: 'inline-block',
     textAlign: 'right'
   },
   backInStockMessage: {
-    verticalAlign: 'middle',
-    fontSize: '0.875rem'
+    verticalAlign: 'middle'
   },
   buttonText: {
-    fontSize: '0.875rem'
+    fontSize: theme.typography.body2.fontSize
   },
   icon: {
     marginRight: 4,
@@ -46,7 +40,7 @@ const useStyles = makeStyles()({
     marginLeft: '-2px',
     marginRight: '8px'
   }
-});
+}));
 /**
  * This component renders a button to subscribe a product or a hint
  * that the product is already subscribed
@@ -72,7 +66,8 @@ const BackInStockButton = ({
 }) => {
   const {
     classes,
-    cx
+    cx,
+    theme
   } = useStyles();
   const handleClick = useCallback(async event => {
     if (stopPropagation) {
@@ -107,9 +102,11 @@ const BackInStockButton = ({
       }),
       tag: "span",
       children: [/*#__PURE__*/_jsx(CheckedIcon, {
-        color: colors.success,
-        className: alignRight ? classes.icon : cx(classes.iconCentered, classes.icon)
-      }), /*#__PURE__*/_jsx("span", {
+        color: theme.palette.success.main,
+        className: alignRight ? classes.icon : cx(classes.icon, classes.iconCentered)
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "span",
         className: classes.backInStockMessage,
         children: i18n.text('back_in_stock.we_will_remind_you')
       })]
@@ -138,7 +135,7 @@ const BackInStockButton = ({
         [classes.rightAligned]: alignRight
       }),
       children: [/*#__PURE__*/_jsx(NotificationIcon, {
-        color: colors.primary,
+        color: theme.palette.primary.main,
         className: classes.icon
       }), /*#__PURE__*/_jsx("span", {
         className: classes.buttonText,

package/back-in-stock/components/Subscriptions/components/Subscription/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, Ripple, PriceInfo, CrossIcon, PriceStriked, Price, Availability } from '@shopgate/engage/components';
+import { Link, Ripple, PriceInfo, CrossIcon, PriceStriked, Price, Availability, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getProductRoute, ProductImage } from '@shopgate/engage/product';
 import PropTypes from 'prop-types';
@@ -39,16 +39,10 @@ const useStyles = makeStyles()(theme => ({
   },
   priceInfo: {
     wordBreak: 'break-word',
-    fontSize: '0.875rem',
     lineHeight: '0.875rem',
-    color: theme.palette.text.secondary,
-    padding: theme.spacing(0.5, 0),
-    textAlign: 'right'
+    padding: theme.spacing(0.5, 0)
   },
-  titleContainer: {},
   title: {
-    fontSize: 17,
-    fontWeight: 600,
     flexWrap: 'wrap',
     overflowWrap: 'anywhere'
   },
@@ -56,12 +50,8 @@ const useStyles = makeStyles()(theme => ({
     minWidth: '30px'
   },
   availabilityText: {
-    fontSize: '0.875rem',
     marginBottom: '4px'
   },
-  characteristicText: {
-    fontSize: '0.875rem'
-  },
   ripple: {
     minWidth: '17px'
   }
@@ -113,11 +103,11 @@ const Subscription = ({
         children: [/*#__PURE__*/_jsx(Link, {
           href: productLink,
           tag: "span",
-          className: classes.titleContainer,
-          children: /*#__PURE__*/_jsx("span", {
-            className: classes.title
-            // eslint-disable-next-line react/no-danger
-            ,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "h4",
+            component: "span",
+            fontWeight: "bold",
+            className: classes.title,
             dangerouslySetInnerHTML: {
               __html: `${product.name}`
             }
@@ -141,7 +131,9 @@ const Subscription = ({
         children: [product?.characteristics?.map(({
           label,
           value
-        }) => /*#__PURE__*/_jsxs("div", {
+        }) => /*#__PURE__*/_jsxs(Typography, {
+          variant: "body2",
+          component: "div",
           className: classes.characteristicText,
           children: [label, ': ', value]
         }, label + value)), /*#__PURE__*/_jsx(Availability, {
@@ -162,9 +154,16 @@ const Subscription = ({
           currency: currency,
           discounted: hasStrikePrice,
           unitPrice: defaultPrice
-        }), !!product.price.info && /*#__PURE__*/_jsx(PriceInfo, {
-          text: product.price.info,
-          className: classes.priceInfo
+        }), !!product.price.info && /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          component: "div",
+          color: "textSecondary",
+          align: "right",
+          className: classes.priceInfo,
+          children: /*#__PURE__*/_jsx(PriceInfo, {
+            text: product.price.info,
+            className: classes.priceInfo
+          })
         })]
       })]
     })]

package/cart/components/CartHeaderWide/CartHeaderWide.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { i18n } from '@shopgate/engage/core/helpers';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   header: {
-    fontSize: '2.125rem',
-    lineHeight: '2.25rem',
     padding: theme.spacing(4)
   }
 }));
@@ -17,7 +16,9 @@ const CartHeaderWide = () => {
   const {
     classes
   } = useStyles();
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "h1",
+    component: "div",
     className: classes.header,
     children: i18n.text('navigation.cart')
   });

package/cart/components/CartItem/CartItemCoupon.js

@@ -6,14 +6,10 @@ import { CART_PATH } from '@shopgate/pwa-common-commerce/cart/constants';
 import { CART_ITEM_TYPE_COUPON } from '@shopgate/pwa-common-commerce/cart';
 import { getPageSettings } from '@shopgate/engage/core/config';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { MessageBar, CardList } from '@shopgate/engage/components';
 import connect from "./CartItemCoupon.connector";
 import { CartItemCouponLayout, CartItemCouponLayoutContext } from "./CartItemCouponLayout";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const duration = 300;
 const defaultTransitionStyle = {
   transition: `height ${duration}ms cubic-bezier(0.25, 0.1, 0.25, 1)`,
@@ -44,7 +40,7 @@ const useStyles = makeStyles()(theme => ({
     marginBottom: 4
   },
   messagesContainerCard: {
-    background: colors.light,
+    background: theme.palette.background.surface,
     padding: theme.spacing(0, 0, 2, 0)
   },
   messagesCard: {
@@ -52,7 +48,7 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(1, 1.75)
   },
   messagesContainerLine: {
-    background: colors.light,
+    background: theme.palette.background.surface,
     padding: theme.spacing(2, 2, 0)
   },
   messagesLine: {

package/cart/components/CartItem/CartItemCouponDelete.js

@@ -4,14 +4,14 @@ import { CrossIcon } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   button: {
     padding: 0,
-    fontSize: '1.5rem',
+    fontSize: theme.components.icon.medium,
     marginTop: -2,
     marginRight: -5
   }
-});
+}));
 /**
  * The Coupon Delete component.
  * @param {Object} props The component properties.

package/cart/components/CartItem/CartItemCouponLayout.js

@@ -20,7 +20,7 @@ export const CartItemCouponLayoutContext = /*#__PURE__*/React.createContext({
 });
 const useStyles = makeStyles()(theme => ({
   item: {
-    fontSize: '0.875rem',
+    fontSize: theme.typography.body2.fontSize,
     padding: theme.spacing(0.5, 2)
   },
   icon: {

package/cart/components/CartItem/CartItemCouponPrice.js

@@ -1,16 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@shopgate/engage/styles';
+import { Typography } from '@shopgate/engage/components';
 import { COUPON_TYPE_FIXED, COUPON_TYPE_PERCENTAGE } from '@shopgate/pwa-common-commerce/cart';
 import Price from '@shopgate/pwa-ui-shared/Price';
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
-  price: {
-    fontSize: '1rem',
-    fontWeight: 500,
-    color: 'var(--color-primary)'
-  }
-});
+
 /**
  * @typedef {import('../../cart.types').SavedPrice} SavedPrice
  */
@@ -24,24 +17,28 @@ const useStyles = makeStyles()({
  * @param {number} props.savedPrice.value The value of the saved price.
  * @returns {JSX.Element|null}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const CartItemCouponPrice = /*#__PURE__*/React.memo(({
   currency,
   savedPrice
 }) => {
-  const {
-    classes
-  } = useStyles();
   if (savedPrice.type === COUPON_TYPE_FIXED) {
-    return /*#__PURE__*/_jsx(Price, {
-      className: classes.price,
-      currency: currency,
-      discounted: true,
-      unitPrice: -savedPrice.value
+    return /*#__PURE__*/_jsx(Typography, {
+      fontWeight: "medium",
+      component: "span",
+      color: "primary",
+      children: /*#__PURE__*/_jsx(Price, {
+        currency: currency,
+        discounted: true,
+        unitPrice: -savedPrice.value
+      })
     });
   }
   if (savedPrice.type === COUPON_TYPE_PERCENTAGE) {
-    return /*#__PURE__*/_jsx("span", {
-      className: classes.price,
+    return /*#__PURE__*/_jsx(Typography, {
+      fontWeight: "medium",
+      component: "span",
+      color: "primary",
       children: `-${savedPrice.value}%`
     });
   }

package/cart/components/CartItem/CartItemCouponTitle.js

@@ -2,12 +2,10 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
+import { Typography } from '@shopgate/engage/components';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   title: {
-    fontSize: '1rem',
-    fontWeight: 500,
-    lineHeight: 1.125,
     marginBottom: 4
   }
 });
@@ -24,7 +22,9 @@ export function CartItemCouponTitle({
     classes
   } = useStyles();
   const title = useMemo(() => value || i18n.text('cart.default_coupon_label'), [value]);
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "h5",
+    component: "div",
     className: classes.title,
     children: title
   });