@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/cart/components/CartItems/CartItemGroupReservationLabel.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { LocationIcon } from '@shopgate/engage/components';
+import { LocationIcon, Typography } from '@shopgate/engage/components';
 import { BOPIS } from '@shopgate/engage/locations';
 import { makeStyles } from '@shopgate/engage/styles';
 /** @typedef {import('@shopgate/engage/locations/locations.types').LocationAware} LocationAware */
@@ -9,16 +9,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   address: {
     display: 'flex',
-    flexFlow: 'row nowrap',
-    fontSize: '0.875rem'
+    flexFlow: 'row nowrap'
   },
   addressIcon: {
-    fontSize: '1.25rem',
+    fontSize: theme.components.icon.small,
     padding: theme.spacing(1, 1, 0, 0),
     flexShrink: 0
-  },
-  title: {
-    fontWeight: 600
   }
 }));
 
@@ -44,10 +40,16 @@ export function CartItemGroupReservationLabel({
       className: classes.addressIcon,
       children: /*#__PURE__*/_jsx(LocationIcon, {})
     }), /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("div", {
-        className: classes.title,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "div",
+        fontWeight: "bold",
         children: i18n.text(`locations.method.${suffix}`)
-      }), location.name]
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "div",
+        children: location.name
+      })]
     })]
   });
 }

package/cart/components/CartItems/CartItemGroupShipping.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import CardListItem from '@shopgate/pwa-ui-shared/CardList/components/Item';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { LocalShippingIcon } from "../../../components";
 import { i18n } from "../../../core";
@@ -7,16 +8,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   address: {
     display: 'flex',
-    flexFlow: 'row nowrap',
-    fontSize: '0.875rem'
+    flexFlow: 'row nowrap'
   },
   shippingIcon: {
-    fontSize: '1.25rem',
+    fontSize: theme.components.icon.small,
     padding: theme.spacing(1, 2, 1, 0),
     transform: 'rotateY(180deg)'
   },
   shippingTitle: {
-    fontWeight: 600,
     padding: theme.spacing(1)
   }
 }));
@@ -36,7 +35,10 @@ export const CartItemGroupShipping = () => {
         className: classes.shippingIcon,
         children: /*#__PURE__*/_jsx(LocalShippingIcon, {})
       }), /*#__PURE__*/_jsx("div", {
-        children: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          component: "div",
+          fontWeight: "bold",
           className: classes.shippingTitle,
           children: i18n.text('locations.method.direct_ship')
         })

package/cart/components/CartItems/CartItems.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { CardList, ResponsiveContainer } from '@shopgate/engage/components';
+import { ResponsiveContainer, Card } from '@shopgate/engage/components';
 import { FulfillmentSlotSwitcher } from '@shopgate/engage/locations';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import PropTypes from 'prop-types';
 import CartItemsHeaderWide from "./CartItemsHeaderWide";
 import { CartItemProvider, CartItem } from "../CartItem";
@@ -11,20 +10,15 @@ import CartItemsSubstitution from "./CartItemsSubstitution";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   items: {
-    background: 'var(--color-background-accent)',
     padding: theme.spacing(1.5, 1.5, 2),
     marginBottom: theme.spacing(-1.5)
   },
   card: {
-    background: themeColors.light,
     marginBottom: theme.spacing(1.5),
     ':last-of-type': {
       marginBottom: 0
     },
-    border: `1px solid ${themeColors.shade7}`,
-    boxSizing: 'border-box',
-    boxShadow: '0px 4px 2px rgba(0, 0, 0, 0.05)',
-    borderRadius: 5
+    boxSizing: 'border-box'
   }
 }));
 
@@ -56,7 +50,8 @@ const CartItems = ({
   isDirectShipOnly
 }) => {
   const {
-    classes
+    classes,
+    cx
   } = useStyles();
   if (!cartItems || cartItems.length === 0) {
     return null;
@@ -71,8 +66,8 @@ const CartItems = ({
         isDirectShipOnly: isDirectShipOnly,
         isCheckoutConfirmation: isCheckoutConfirmation
       })
-    }), /*#__PURE__*/_jsxs(CardList, {
-      className: classes.items,
+    }), /*#__PURE__*/_jsxs("ul", {
+      className: cx('ui-shared__card-list', classes.items),
       children: [!isOrderDetails ? /*#__PURE__*/_jsx(ResponsiveContainer, {
         appAlways: true,
         breakpoint: "<=xs",
@@ -89,8 +84,9 @@ const CartItems = ({
           wrapCard: true,
           className: classes.card
         })
-      }), cartItems.map(item => /*#__PURE__*/_jsx(CardList.Item, {
+      }), cartItems.map(item => /*#__PURE__*/_jsx(Card, {
         className: classes.card,
+        component: "li",
         children: /*#__PURE__*/_jsx(CartItemProvider, {
           cartItem: item,
           isEditable: editable,

package/cart/components/CartItems/CartItemsHeaderWide.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { I18n } from '@shopgate/engage/components';
+import { I18n, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import connect from "./CartItemsHeaderWide.connector";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -9,9 +9,6 @@ const useStyles = makeStyles()(theme => ({
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    fontWeight: 500,
-    fontSize: '1rem',
-    lineHeight: '1.5rem',
     padding: theme.spacing(0, 2, 1, 2)
   },
   column: {
@@ -123,8 +120,12 @@ const CartItemsHeaderWide = ({
     className: classes.header,
     children: [/*#__PURE__*/_jsx("div", {
       className: classes.imageColumn,
-      children: /*#__PURE__*/_jsx(I18n.Text, {
-        string: "cart.items"
+      children: /*#__PURE__*/_jsx(Typography, {
+        component: "span",
+        fontWeight: "medium",
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "cart.items"
+        })
       })
     }), /*#__PURE__*/_jsx("div", {
       className: classes.detailsColumn
@@ -132,35 +133,59 @@ const CartItemsHeaderWide = ({
       className: cx(classes.column, {
         [classes.priceColumnWide]: hasLineItemPromotions
       }),
-      children: /*#__PURE__*/_jsx(I18n.Text, {
-        string: "cart.price"
+      children: /*#__PURE__*/_jsx(Typography, {
+        component: "span",
+        fontWeight: "medium",
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "cart.price"
+        })
       })
     }), isOrderDetails && /*#__PURE__*/_jsxs(_Fragment, {
       children: [!isDirectShipOnly ? /*#__PURE__*/_jsx("div", {
         className: classes.locationColumn,
-        children: /*#__PURE__*/_jsx(I18n.Text, {
-          string: "cart.location"
+        children: /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          fontWeight: "medium",
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: "cart.location"
+          })
         })
       }) : null, /*#__PURE__*/_jsx("div", {
         className: classes.column,
-        children: /*#__PURE__*/_jsx(I18n.Text, {
-          string: "cart.status"
+        children: /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          fontWeight: "medium",
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: "cart.status"
+          })
         })
       }), /*#__PURE__*/_jsx("div", {
         className: classes.column,
-        children: /*#__PURE__*/_jsx(I18n.Text, {
-          string: "cart.fulfilled_quantity"
+        children: /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          fontWeight: "medium",
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: "cart.fulfilled_quantity"
+          })
         })
       })]
     }), /*#__PURE__*/_jsx("div", {
       className: editable ? classes.quantityPickerColumn : classes.quantityPickerColumnNotEditable,
-      children: /*#__PURE__*/_jsx(I18n.Text, {
-        string: isOrderDetails ? 'cart.ordered_quantity' : 'cart.quantity'
+      children: /*#__PURE__*/_jsx(Typography, {
+        component: "span",
+        fontWeight: "medium",
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: isOrderDetails ? 'cart.ordered_quantity' : 'cart.quantity'
+        })
       })
     }), /*#__PURE__*/_jsx("div", {
       className: classes.column,
-      children: /*#__PURE__*/_jsx(I18n.Text, {
-        string: "cart.subtotal"
+      children: /*#__PURE__*/_jsx(Typography, {
+        component: "span",
+        fontWeight: "medium",
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "cart.subtotal"
+        })
       })
     }), editable && enabledFulfillmentMethodsCount > 1 && /*#__PURE__*/_jsx("div", {
       className: classes.contextMenuColumn

package/cart/components/CartItems/CartItemsSubstitution.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { CardList } from '@shopgate/engage/components';
+import { Card } from '@shopgate/engage/components';
 import Substitution, { SubstitutionWrapper } from "../Substitution";
 import connect from "./CartItemsSubscription.connector";
 
@@ -24,8 +24,9 @@ const CartItemsSubstitution = ({
   }))), [allAllowed, cartItems, updateProductsInCart]);
   if (wrapCard) {
     return /*#__PURE__*/_jsx(SubstitutionWrapper, {
-      children: /*#__PURE__*/_jsx(CardList.Item, {
+      children: /*#__PURE__*/_jsx(Card, {
         className: className,
+        component: "li",
         children: /*#__PURE__*/_jsx(Substitution, {
           id: "substitution-all",
           label: i18n.text('cart.allow_substitution_all'),

package/cart/components/CartSummaryWide/CartSummaryWide.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { Typography } from '@shopgate/engage/components';
 import PaymentBarSubTotal from "../PaymentBar/PaymentBarSubTotal";
 import PaymentBarGrandTotal from "../PaymentBar/PaymentBarGrandTotal";
 import PaymentBarShippingCost from "../PaymentBar/PaymentBarShippingCost";
@@ -12,9 +12,6 @@ import PaymentBarPromotionCoupons from "../PaymentBar/PaymentBarPromotionCoupons
 import CartSummaryWideCheckoutButton from "./CartSummaryWideCheckoutButton";
 import CartSummaryWideFooter from "./CartSummaryWideFooter";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   container: {
     display: 'flex',
@@ -23,24 +20,19 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(2),
     width: 420
   },
-  headline: {
-    fontSize: '1.25rem',
-    fontWeight: 500,
-    lineHeight: '1.5rem'
-  },
   summary: {
-    background: 'var(--color-background-accent)',
+    background: theme.palette.background.emphasized,
     padding: theme.spacing(2)
   },
   total: {
-    fontSize: '1rem',
+    fontSize: theme.typography.body2.fontSize,
     padding: theme.spacing(1, 0),
     color: theme.palette.text.primary
   },
   grandTotal: {
-    fontSize: '1.25rem !important',
-    fontWeight: 500,
-    borderTop: `1px solid ${colors.shade4}`,
+    fontSize: theme.typography.h4.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+    borderTop: `1px solid ${theme.components.border.medium}`,
     padding: theme.spacing(1, 0),
     color: theme.palette.text.primary,
     '&:last-child': {
@@ -59,8 +51,9 @@ const CartSummaryWide = () => {
   } = useStyles();
   return /*#__PURE__*/_jsxs("div", {
     className: classes.container,
-    children: [/*#__PURE__*/_jsx("h2", {
-      className: classes.headline,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h3",
+      component: "h2",
       children: i18n.text('checkout.summary.headline')
     }), /*#__PURE__*/_jsxs("div", {
       className: classes.summary,

package/cart/components/CartSummaryWide/CartSummaryWideCheckoutButton.js

@@ -1,32 +1,20 @@
 import React, { useContext, useMemo } from 'react';
-import { SurroundPortals, I18n, Link } from '@shopgate/engage/components';
+import { SurroundPortals, I18n } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
-import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
+import { Button } from '@shopgate/engage/components/v2';
 import { CHECKOUT_PATH } from '@shopgate/pwa-common/constants/RoutePaths';
 import PropTypes from 'prop-types';
 import { CartContext } from "../../cart.context";
 import connect from "./CartSummaryWideCheckoutButton.connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   container: {
     display: 'flex',
     flexDirection: 'column'
   },
   button: {
-    width: '100%',
-    background: 'var(--color-button-cta)',
-    color: 'var(--color-button-cta-contrast)!important',
-    borderRadius: 4,
     margin: theme.spacing(2, 0)
-  },
-  disabledButton: {
-    background: colors.shade7,
-    color: `${colors.shade4}!important`
   }
 }));
 
@@ -39,16 +27,12 @@ const CartSummaryWideCheckoutButton = ({
   isOrderable
 }) => {
   const {
-    classes,
-    cx
+    classes
   } = useStyles();
   const {
     isLoading
   } = useContext(CartContext);
   const isActive = useMemo(() => isOrderable && !isLoading, [isLoading, isOrderable]);
-  const buttonClassName = cx(classes.button, {
-    [classes.disabledButton]: !isActive
-  });
   return /*#__PURE__*/_jsx("div", {
     className: classes.container,
     children: /*#__PURE__*/_jsx(SurroundPortals, {
@@ -56,16 +40,14 @@ const CartSummaryWideCheckoutButton = ({
       portalProps: {
         isActive
       },
-      children: /*#__PURE__*/_jsx(Link, {
+      children: /*#__PURE__*/_jsx(Button, {
         href: CHECKOUT_PATH,
+        color: "cta",
+        fullWidth: true,
         disabled: !isActive,
-        children: /*#__PURE__*/_jsx(RippleButton, {
-          disabled: !isActive,
-          type: "regular",
-          className: buttonClassName,
-          children: /*#__PURE__*/_jsx(I18n.Text, {
-            string: "cart.checkout"
-          })
+        className: classes.button,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "cart.checkout"
         })
       })
     })

package/cart/components/PaymentBar/PaymentBarCheckoutButton.js

@@ -1,41 +1,21 @@
 import React, { useContext, useMemo } from 'react';
-import { I18n, Link, SurroundPortals } from '@shopgate/engage/components';
-import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { I18n, SurroundPortals } from '@shopgate/engage/components';
 import { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
-import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
+import { Button } from '@shopgate/engage/components/v2';
 import { CHECKOUT_PATH } from '@shopgate/pwa-common/constants/RoutePaths';
 import PropTypes from 'prop-types';
 import { CartContext } from "../../cart.context";
 import connect from "./PaymentBarCheckoutButton.connector";
-import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()({
-  button: {
-    width: '100%',
-    background: 'var(--color-button-cta)',
-    color: 'var(--color-button-cta-contrast)!important'
-  },
-  disabledButton: {
-    width: '100%',
-    background: colors.shade7,
-    color: `${colors.shade4}!important`
-  }
-});
 
 /**
  * Renders the cart payment bar checkout button.
  * @param {boolean} isOrderable Whether the cart is orderable.
  * @return {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const PaymentBarCheckoutButton = ({
   isOrderable
 }) => {
-  const {
-    classes
-  } = useStyles();
   const {
     isLoading
   } = useContext(CartContext);
@@ -45,19 +25,13 @@ const PaymentBarCheckoutButton = ({
     portalProps: {
       isActive
     },
-    children: /*#__PURE__*/_jsx(Link, {
+    children: /*#__PURE__*/_jsx(Button, {
       href: CHECKOUT_PATH,
+      color: "cta",
+      fullWidth: true,
       disabled: !isActive,
-      tabIndex: 0,
-      role: "button",
-      "aria-disabled": !isActive,
-      children: /*#__PURE__*/_jsx(RippleButton, {
-        disabled: !isActive,
-        type: "regular",
-        className: isActive ? classes.button : classes.disabledButton,
-        children: /*#__PURE__*/_jsx(I18n.Text, {
-          string: "cart.checkout"
-        })
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.checkout"
       })
     })
   });

package/cart/components/PaymentBar/PaymentBarContent.js

@@ -2,7 +2,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { isIOSTheme } from '@shopgate/engage/core';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import Grid from '@shopgate/pwa-common/components/Grid';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { CART_PAYMENT_BAR, CART_PAYMENT_BAR_TOTALS } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
@@ -15,22 +14,17 @@ import PaymentBarCheckoutButton from "./PaymentBarCheckoutButton";
 import PaymentBarPromotionCoupons from "./PaymentBarPromotionCoupons";
 import PaymentBarAppliedPromotions from "./PaymentBarAppliedPromotions";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors,
-  shadows
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   wrapper: {
-    background: colors.light,
-    boxShadow: shadows.cart.paymentBar,
+    background: theme.palette.background.surface,
+    boxShadow: '0 -4px 5px -2px rgba(0, 0, 0, 0.1)',
     position: 'relative',
     zIndex: 2,
-    paddingBottom: 'var(--safe-area-inset-bottom)'
+    paddingBottom: theme.layout.safeArea.bottom
   },
   container: {
     padding: isIOSTheme() ? theme.spacing(1) : theme.spacing(2),
     paddingBottom: 0,
-    lineHeight: 1.45,
     flexWrap: 'wrap',
     flexDirection: 'column',
     minWidth: 'auto'
@@ -41,7 +35,7 @@ const useStyles = makeStyles()(theme => ({
     flexDirection: 'column'
   },
   checkoutButtonContainer: {
-    background: colors.light,
+    background: theme.palette.background.surface,
     alignItems: 'center',
     padding: isIOSTheme() ? theme.spacing(1) : theme.spacing(2),
     position: 'relative',

package/cart/components/PaymentBar/PaymentBarPromotionCouponMessages.js

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
 import { errorBehavior, isIOSTheme } from '@shopgate/engage/core';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { CartContext } from "../../cart.context";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -11,7 +12,6 @@ const useStyles = makeStyles()(theme => ({
     [responsiveMediaQuery('<=xs', {
       appAlways: true
     })]: {
-      fontSize: '0.75rem',
       paddingBottom: 3
     }
   },
@@ -70,7 +70,11 @@ const PaymentBarPromotionCouponMessages = ({
           [classes.warning]: type === 'warning',
           [classes.info]: type === 'info'
         }),
-        children: errorBehavior.getErrorMessage(message, additionalParams)
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          component: "span",
+          children: errorBehavior.getErrorMessage(message, additionalParams)
+        })
       })]
     })
   }, message));

package/cart/components/PaymentBar/PaymentBarPromotionCoupons.js

@@ -9,14 +9,14 @@ import { CartContext } from "../../cart.context";
 import PaymentBarPromotionalText from "./PaymentBarPromotionalText";
 import connect from "./PaymentBarPromotionCoupons.connector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   icon: {
-    backgroundColor: '#898989',
-    color: '#fff',
+    backgroundColor: theme.palette.grey.dark,
+    color: theme.contrastColor(theme.palette.grey.dark),
     borderRadius: 32,
     padding: 4,
     cursor: 'pointer',
-    fontSize: '0.75rem',
+    fontSize: theme.components.icon.xsmall,
     display: 'inline-flex',
     [responsiveMediaQuery('<=xs', {
       appAlways: true
@@ -32,7 +32,7 @@ const useStyles = makeStyles()({
     order: 1,
     flexShrink: 0
   }
-});
+}));
 
 /**
  * @returns {JSX}

package/cart/components/PaymentBar/PaymentBarPromotionalText.js

@@ -2,7 +2,7 @@ import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { nl2br, showModal as showModalAction, isIOSTheme } from '@shopgate/engage/core';
-import { InfoIcon } from '@shopgate/engage/components';
+import { InfoIcon, Typography } from '@shopgate/engage/components';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
 import { CartContext } from "../../cart.context";
@@ -13,7 +13,6 @@ const mapDispatchToProps = {
 const useStyles = makeStyles()(theme => ({
   textWrapper: {
     padding: theme.spacing(0.5, 0),
-    color: theme.palette.error.main,
     order: 3
   },
   line: {
@@ -21,22 +20,21 @@ const useStyles = makeStyles()(theme => ({
     [responsiveMediaQuery('<=xs', {
       appAlways: true
     })]: {
-      fontSize: '0.75rem',
       paddingBottom: 3,
       verticalAlign: 'text-bottom'
     }
   },
   iconWrapper: {
     cursor: 'pointer',
-    color: 'var(--color-primary)',
-    fontSize: '1.5rem',
+    color: theme.palette.primary.main,
+    fontSize: theme.components.icon.medium,
     display: 'inline-flex',
     verticalAlign: 'bottom',
     paddingBottom: 1,
     [responsiveMediaQuery('<=xs', {
       appAlways: true
     })]: {
-      fontSize: '1.375rem',
+      fontSize: theme.components.icon.medium,
       paddingBottom: 0
     }
   },
@@ -84,12 +82,13 @@ const PaymentBarPromotionalText = ({
     return /*#__PURE__*/_jsx(CartTotalLine, {
       className: classes.line,
       children: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("div", {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          component: "div",
+          color: "error",
           className: cx(classes.textWrapper, {
             [classes.loading]: isLoading
-          })
-          // eslint-disable-next-line react/no-danger
-          ,
+          }),
           dangerouslySetInnerHTML: {
             __html: nl2br(text)
           }