@shopgate/engage 7.31.3 → 7.32.0-beta.1

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
   });

package/cart/components/CartItem/CartItemProduct.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { CART_PATH } from '@shopgate/pwa-common-commerce/cart/constants';
 import CardListItem from '@shopgate/pwa-ui-shared/CardList/components/Item';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { MessageBar, ResponsiveContainer } from '@shopgate/engage/components';
 import { getPageSettings } from '@shopgate/engage/core/config';
 import { CartItemProductLayout } from "./CartItemProductLayout";
@@ -10,16 +9,13 @@ import { CartItemProductLayoutWide } from "./CartItemProductLayoutWide";
 import { useCartItemProduct } from "./CartItem.hooks";
 import CartItemSubstitution from "./CartItemSubstitution";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   noGap: {
     marginBottom: 0,
     background: 'none'
   },
   messagesContainerCard: {
-    background: colors.light,
+    background: theme.palette.background.surface,
     padding: theme.spacing(0, 0, 2, 0)
   },
   messagesCard: {
@@ -27,7 +23,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/CartItemProductLayout.js

@@ -1,6 +1,5 @@
 import React, { useMemo } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { Grid, Link, ProductProperties, SurroundPortals, ConditionalWrapper, I18n } from '@shopgate/engage/components';
 import { CART_ITEM_IMAGE, CART_ITEM_LINK, CART_ITEM_PROPERTIES, CART_ITEM_QUANTITY_PICKER } from '@shopgate/engage/cart';
 import { showTaxDisclaimer } from '@shopgate/engage/market';
@@ -15,9 +14,6 @@ import CartItemProductOrderDetails from "./CartItemProductOrderDetails";
 import CartItemProductPriceList from "./CartItemProductPriceList";
 import { useCartItem, useCartItemProduct } from "./CartItem.hooks";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const leftColumnWidth = 72;
 const useStyles = makeStyles()((theme, _params, classes) => ({
   item: {
@@ -29,7 +25,7 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
     width: leftColumnWidth
   },
   image: {
-    background: colors.placeholder,
+    background: theme.palette.background.emphasized,
     marginBottom: theme.spacing(1.25),
     height: leftColumnWidth,
     width: leftColumnWidth
@@ -40,7 +36,7 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
     paddingLeft: theme.spacing(2)
   },
   info: {
-    fontSize: '0.875rem',
+    fontSize: theme.typography.body2.fontSize,
     marginTop: theme.spacing(1.75),
     marginBottom: theme.spacing(0.25),
     flexGrow: 1,
@@ -69,8 +65,8 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
   properties: {
     wordBreak: 'break-word',
     alignSelf: 'flex-start',
-    fontSize: '0.875rem',
-    color: 'var(--color-text-medium-emphasis)',
+    fontSize: theme.typography.body2.fontSize,
+    color: theme.palette.text.secondary,
     lineHeight: 1.3,
     '&:not(:empty)': {
       [`+ .${classes.price}`]: {

package/cart/components/CartItem/CartItemProductLayoutWide.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
-import { TextLink, ProductProperties, QuantityLabel, ConditionalWrapper, MessageBar, SurroundPortals } from '@shopgate/engage/components';
+import { TextLink, ProductProperties, QuantityLabel, ConditionalWrapper, MessageBar, SurroundPortals, Typography } from '@shopgate/engage/components';
 import { ProductImage, CartUnitQuantityPicker, PriceInfo, ProductName, ITEM_PATH } from '@shopgate/engage/product';
 import { CART_ITEM_NAME, CART_ITEM_QUANTITY_PICKER } from '@shopgate/pwa-common-commerce/cart';
 import { bin2hex } from '@shopgate/engage/core';
@@ -64,16 +64,16 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
     }
   },
   productName: {
-    fontSize: '1.25rem',
+    fontSize: theme.typography.h3.fontSize,
     lineHeight: '1.5rem',
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     wordBreak: ['keep-all', 'break-word'],
     hyphens: 'auto'
   },
   productProperties: {
     paddingTop: theme.spacing(1),
     color: theme.palette.text.secondary,
-    fontSize: '1rem'
+    fontSize: theme.typography.body1.fontSize
   },
   quantityPicker: {
     width: 140
@@ -81,11 +81,13 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
   quantityPickerDisabled: {
     padding: theme.spacing(0, 1),
     textAlign: 'center',
-    fontSize: '1.25rem',
-    lineHeight: '1.625rem',
+    fontSize: theme.typography.h3.fontSize,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     height: 28,
     width: '100%',
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     color: theme.palette.text.primary,
     whiteSpace: 'nowrap'
   },
@@ -99,7 +101,7 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
     }
   },
   price: {
-    fontSize: '1.25rem !important',
+    fontSize: `${theme.typography.h3.fontSize} !important`,
     lineHeight: '1.625rem  !important'
   },
   priceListEntry: {
@@ -111,9 +113,7 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
   },
   priceInfo: {
     wordBreak: 'break-word',
-    fontSize: '0.75rem',
     lineHeight: '0.875rem',
-    color: theme.palette.text.secondary,
     padding: theme.spacing(0.5, 0)
   },
   contextMenu: {
@@ -195,10 +195,15 @@ const CartItemProductLayoutWide = () => {
             entry: classes.priceListEntry,
             promo: classes.priceListPromo
           }
-        }), /*#__PURE__*/_jsx(PriceInfo, {
-          product: product,
-          currency: currency,
-          className: classes.priceInfo
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          component: "div",
+          color: "textSecondary",
+          children: /*#__PURE__*/_jsx(PriceInfo, {
+            product: product,
+            currency: currency,
+            className: classes.priceInfo
+          })
         }), /*#__PURE__*/_jsx(CartItemProductPriceCaption, {})]
       }), isOrderDetails && /*#__PURE__*/_jsx(CartItemProductLayoutWideOrderDetails, {}), /*#__PURE__*/_jsxs("div", {
         className: classes.column,

package/cart/components/CartItem/CartItemProductLayoutWideFulfillmentLabel.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { BOPIS, ROPIS } from '@shopgate/engage/locations';
 import { i18n } from '@shopgate/engage/core/helpers';
@@ -6,8 +7,6 @@ import { useCartItemProduct } from "./CartItem.hooks";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   label: {
-    color: 'var(--color-secondary)',
-    fontSize: '0.875rem',
     marginTop: 'auto'
   }
 });
@@ -29,7 +28,10 @@ const CartItemProductLayoutWideFulfillmentLabel = () => {
   } else if (fulfillmentMethod === ROPIS) {
     suffix = 'ropis';
   }
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "body2",
+    component: "div",
+    color: "secondary",
     className: classes.label,
     children: i18n.text(`locations.method.${suffix}`)
   });

package/cart/components/CartItem/CartItemProductLayoutWideOrderDetails.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { QuantityLabel } from '@shopgate/engage/components';
+import { QuantityLabel, Typography } from '@shopgate/engage/components';
 import { getTranslatedLineItemStatus } from '@shopgate/engage/orders';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useCartItem, useCartItemProduct } from "./CartItem.hooks";
@@ -28,9 +28,7 @@ const useStyles = makeStyles()(theme => ({
     ':last-child': {
       paddingRight: 0
     },
-    fontSize: '1.25rem',
-    lineHeight: '1.625rem',
-    fontWeight: 500
+    fontWeight: theme.typography.fontWeightMedium
   },
   statusColumn: {
     display: 'flex',
@@ -42,18 +40,18 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(0, 1),
     ':last-child': {
       paddingRight: 0
-    },
-    fontSize: '1.25rem',
-    lineHeight: '1.625rem'
+    }
   },
   quantityPickerDisabled: {
     padding: theme.spacing(0, 1),
     textAlign: 'center',
-    fontSize: '1.25rem',
-    lineHeight: '1.625rem',
+    fontSize: theme.typography.h3.fontSize,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     height: 28,
     width: '100%',
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     color: theme.palette.text.primary,
     whiteSpace: 'nowrap'
   }
@@ -78,10 +76,18 @@ const CartItemProductLayoutWideOrderDetails = () => {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [!cartIsDirectShipOnly ? /*#__PURE__*/_jsx("div", {
       className: classes.locationColumn,
-      children: location?.name
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "h3",
+        component: "span",
+        children: location?.name
+      })
     }) : null, /*#__PURE__*/_jsx("div", {
       className: classes.statusColumn,
-      children: getTranslatedLineItemStatus(cartItem?.status, cartItem?.subStatus)
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "h3",
+        component: "span",
+        children: getTranslatedLineItemStatus(cartItem?.status, cartItem?.subStatus)
+      })
     }), /*#__PURE__*/_jsx("div", {
       className: classes.column,
       children: /*#__PURE__*/_jsx(QuantityLabel, {