@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/admin-preview/initialization/awaitInitialFrontendSettings.js

@@ -0,0 +1,84 @@
+import "core-js/modules/es.array.includes.js";
+import { withScope, captureMessage, Severity as SentrySeverity } from '@sentry/browser';
+import { receiveAppSettings } from '@shopgate/engage/settings/action-creators/appSettings';
+import { isFrontendSettingsAdminPreviewActive } from "../helpers";
+import { ALLOWED_ADMIN_PREVIEW_ORIGINS } from "../constants";
+import { getOrCreateStyleTag, serializeStyling } from "../components/FrontendSettingsPreviewBridge/helpers";
+import { setInitialFrontendSettings } from "./_internal/initialFrontendSettings";
+const REQUEST_TIMEOUT = 3000;
+/**
+ * Waits for the first settings message from the admin and applies it before the app renders.
+ *
+ * Without this the app paints with the theme defaults first: the bridge that owns the message
+ * listener only mounts once React committed, so everything the admin sent before that is dropped
+ * and the styling arrives as a visible restyle.
+ *
+ * The handshake goes to every allowed origin rather than to a single guessed one. Nothing has been
+ * received at this point, so there is no known parent origin, and the referrer is not guaranteed to
+ * survive the admin's referrer policy. The browser drops the copies whose target does not match.
+ *
+ * Resolves when the payload arrived or when REQUEST_TIMEOUT elapsed, and never rejects - an admin
+ * that stays silent has to fall back to the unstyled app, never to an iframe that never renders.
+ * @param store Reference to the store.
+ * @returns A promise that resolves once the first payload settled.
+ */
+export const awaitInitialFrontendSettings = store => new Promise(resolve => {
+  if (!isFrontendSettingsAdminPreviewActive()) {
+    resolve();
+    return;
+  }
+  let settled = false;
+  let timeout;
+
+  /**
+   * Resolves the promise once, whichever of payload / timeout comes first, and stops listening.
+   * The bridge attaches its own listener when it mounts and re-sends the handshake, so the admin
+   * resyncs from there.
+   */
+  const settle = () => {
+    if (settled) {
+      return;
+    }
+    settled = true;
+    clearTimeout(timeout);
+    window.removeEventListener('message', handleMessage);
+    resolve();
+  };
+
+  /**
+   * Handles the first trusted message. A function declaration, so `settle` can detach it again
+   * without a forward reference.
+   * @param event The message event.
+   */
+  function handleMessage(event) {
+    if (!ALLOWED_ADMIN_PREVIEW_ORIGINS.includes(event.origin)) return;
+    if (event.source !== window.parent) return;
+    const {
+      data
+    } = event;
+    if (data?.type !== 'receiveFrontendSettings') return;
+    const styling = data.payload?.styling ?? null;
+    if (styling) {
+      getOrCreateStyleTag().textContent = serializeStyling(styling);
+    }
+    if (data.payload?.appSettings) {
+      store.dispatch(receiveAppSettings(data.payload.appSettings));
+    }
+    setInitialFrontendSettings(styling);
+    settle();
+  }
+  window.addEventListener('message', handleMessage);
+  timeout = setTimeout(() => {
+    withScope(scope => {
+      scope.setLevel(SentrySeverity.Warning);
+      scope.setExtra('timeout', REQUEST_TIMEOUT);
+      captureMessage('Waiting for the initial frontend settings took too long');
+    });
+    settle();
+  }, REQUEST_TIMEOUT);
+  ALLOWED_ADMIN_PREVIEW_ORIGINS.forEach(origin => {
+    window.parent.postMessage({
+      type: 'frontendSettingsPreviewReady'
+    }, origin);
+  });
+});

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, NotificationIcon, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 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,
-    width: '100%'
+    color: theme.palette.warning.main
   },
   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')
       })]
@@ -117,10 +114,10 @@ const BackInStockButton = ({
   }
   if (showAsButton) {
     return /*#__PURE__*/_jsx(Button, {
-      type: "primary",
+      color: "secondary",
+      fullWidth: true,
       tabIndex: 0,
       onClick: handleClick,
-      className: classes.button,
       children: /*#__PURE__*/_jsx("span", {
         className: classes.buttonText,
         children: i18n.text('back_in_stock.get_notified')
@@ -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,10 +1,10 @@
 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';
 import { BackInStockButton } from '@shopgate/engage/back-in-stock/components';
-import { getThemeSettings, i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core';
 import { useBackInStockSubscriptions } from '@shopgate/engage/back-in-stock/hooks';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -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'
   }
@@ -87,9 +77,6 @@ const Subscription = ({
   const {
     removeBackInStockSubscription
   } = useBackInStockSubscriptions();
-  const {
-    ListImage: gridResolutions
-  } = getThemeSettings('AppImages') || {};
   const currency = product.price?.currency || 'EUR';
   const defaultPrice = product.price?.unitPrice || 0;
   const specialPrice = product.price?.unitPriceStriked;
@@ -104,7 +91,7 @@ const Subscription = ({
       "aria-hidden": true,
       children: /*#__PURE__*/_jsx(ProductImage, {
         src: product.featuredImageBaseUrl,
-        resolutions: gridResolutions
+        context: "list"
       })
     }), /*#__PURE__*/_jsxs("div", {
       className: classes.infoContainer,
@@ -113,11 +100,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 +128,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 +151,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,9 +25,9 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
     width: leftColumnWidth
   },
   image: {
-    background: colors.placeholder,
+    background: theme.palette.background.emphasized,
+    borderRadius: theme.shape.borderRadius,
     marginBottom: theme.spacing(1.25),
-    height: leftColumnWidth,
     width: leftColumnWidth
   },
   content: {
@@ -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}`]: {
@@ -222,6 +218,7 @@ export function CartItemProductLayout() {
               portalName: CART_ITEM_IMAGE,
               portalProps: portalProps,
               children: /*#__PURE__*/_jsx(ProductImage, {
+                context: "list",
                 src: product.featuredImageBaseUrl || product.featuredImageUrl
               })
             })

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';
@@ -22,7 +22,6 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
   },
   imageColumn: {
     width: 120,
-    height: 120,
     marginRight: theme.spacing(1),
     flexShrink: 0,
     flexGrow: 0
@@ -64,16 +63,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 +80,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 +100,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 +112,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: {
@@ -163,7 +162,8 @@ const CartItemProductLayoutWide = () => {
       children: [/*#__PURE__*/_jsx("div", {
         className: classes.imageColumn,
         children: /*#__PURE__*/_jsx(ProductImage, {
-          src: product.featuredImageBaseUrl || product.featuredImageUrl
+          src: product.featuredImageBaseUrl || product.featuredImageUrl,
+          context: "list"
         })
       }), /*#__PURE__*/_jsxs("div", {
         className: classes.detailsColumn,
@@ -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,