@shopgate/engage 7.30.4-beta.1 → 7.31.0-alpha.1

package/cart/components/PaymentBar/PaymentBarCheckoutButton.js

@@ -1,22 +1,41 @@
 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 { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
 import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
 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 { button, disabledButton } from "./PaymentBarCheckoutButton.style";
+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);
@@ -35,7 +54,7 @@ const PaymentBarCheckoutButton = ({
       children: /*#__PURE__*/_jsx(RippleButton, {
         disabled: !isActive,
         type: "regular",
-        className: isActive ? button : disabledButton,
+        className: isActive ? classes.button : classes.disabledButton,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "cart.checkout"
         })

package/cart/components/PaymentBar/PaymentBarContent.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+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';
@@ -12,22 +14,58 @@ import PaymentBarGrandTotal from "./PaymentBarGrandTotal";
 import PaymentBarCheckoutButton from "./PaymentBarCheckoutButton";
 import PaymentBarPromotionCoupons from "./PaymentBarPromotionCoupons";
 import PaymentBarAppliedPromotions from "./PaymentBarAppliedPromotions";
-import { wrapper, container, checkoutButtonContainer, checkoutButton } from "./PaymentBarContent.style";
+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,
+    position: 'relative',
+    zIndex: 2,
+    paddingBottom: 'var(--safe-area-inset-bottom)'
+  },
+  container: {
+    padding: isIOSTheme() ? theme.spacing(1) : theme.spacing(2),
+    paddingBottom: 0,
+    lineHeight: 1.45,
+    flexWrap: 'wrap',
+    flexDirection: 'column',
+    minWidth: 'auto'
+  },
+  checkoutButton: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    flexDirection: 'column'
+  },
+  checkoutButtonContainer: {
+    background: colors.light,
+    alignItems: 'center',
+    padding: isIOSTheme() ? theme.spacing(1) : theme.spacing(2),
+    position: 'relative',
+    zIndex: 2
+  }
+}));
 
 /**
  * The PaymentBarContent component.
  * @returns {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function PaymentBarContent({
   showSeparator
 }) {
+  const {
+    classes,
+    cx
+  } = useStyles();
   return /*#__PURE__*/_jsx("div", {
-    className: classNames(wrapper, 'theme__cart__payment-bar'),
+    className: cx(classes.wrapper, 'theme__cart__payment-bar'),
     children: /*#__PURE__*/_jsxs(SurroundPortals, {
       portalName: CART_PAYMENT_BAR,
       children: [/*#__PURE__*/_jsx(Grid, {
-        className: container,
+        className: classes.container,
         children: /*#__PURE__*/_jsxs(SurroundPortals, {
           portalName: CART_PAYMENT_BAR_TOTALS,
           children: [/*#__PURE__*/_jsx(PaymentBarSubTotal, {
@@ -47,9 +85,9 @@ function PaymentBarContent({
           })]
         })
       }), /*#__PURE__*/_jsx("div", {
-        className: checkoutButtonContainer,
+        className: classes.checkoutButtonContainer,
         children: /*#__PURE__*/_jsx("div", {
-          className: checkoutButton,
+          className: classes.checkoutButton,
           children: /*#__PURE__*/_jsx(PaymentBarCheckoutButton, {})
         })
       })]

package/cart/components/PaymentBar/PaymentBarDiscounts.js

@@ -1,11 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { SurroundPortals } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { isIOSTheme } from '@shopgate/engage/core';
 import { CART_PAYMENT_BAR_TOTALS_DISCOUNTS } from '@shopgate/pwa-common-commerce/cart';
 import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
 import { CartContext } from "../../cart.context";
-import { spacer } from "./PaymentBarContent.style";
 import connect from "./PaymentBarDiscounts.connector";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  spacer: {
+    width: isIOSTheme() ? 27 : 32,
+    order: 1,
+    flexShrink: 0
+  }
+});
 
 /**
  * The Discounts component.
@@ -15,12 +24,14 @@ import connect from "./PaymentBarDiscounts.connector";
  * @param {string|null} [props.className=null] The class name for styling.
  * @returns {JSX.Element|null} The rendered component or null.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function PaymentBarDiscounts({
   discounts,
   showSeparator,
   className
 }) {
+  const {
+    classes
+  } = useStyles();
   const {
     currency,
     isLoading,
@@ -48,7 +59,7 @@ function PaymentBarDiscounts({
         amount: -amount,
         currency: currency
       }), hasPromotionCoupons && /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
-        className: spacer
+        className: classes.spacer
       })]
     }, `discount-${label}-${amount}`))
   });

package/cart/components/PaymentBar/PaymentBarGrandTotal.js

@@ -1,11 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { SurroundPortals } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { isIOSTheme } from '@shopgate/engage/core';
 import { CART_PAYMENT_BAR_TOTALS_GRAND_TOTAL } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
 import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
 import { CartContext } from "../../cart.context";
-import { spacer } from "./PaymentBarContent.style";
 import connect from "./PaymentBarGrandTotal.connector";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  spacer: {
+    width: isIOSTheme() ? 27 : 32,
+    order: 1,
+    flexShrink: 0
+  }
+});
 
 /**
  * The GrandTotal component.
@@ -16,13 +25,15 @@ import connect from "./PaymentBarGrandTotal.connector";
  * @param {string|null} [props.className=null] The class name for styling.
  * @returns {JSX.Element|null} The rendered component or null.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PaymentBarGrandTotal = ({
   amount,
   label,
   showSeparator,
   className
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     config: {
       hideTotal
@@ -47,7 +58,7 @@ const PaymentBarGrandTotal = ({
         amount: amount,
         currency: currency
       }), hasPromotionCoupons && /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
-        className: spacer
+        className: classes.spacer
       })]
     })
   });

package/cart/components/PaymentBar/PaymentBarPromotionCouponMessages.js

@@ -1,15 +1,12 @@
-import React, { Fragment, useContext } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { css } from 'glamor';
 import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
-import { errorBehavior } from '@shopgate/engage/core';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { errorBehavior, isIOSTheme } from '@shopgate/engage/core';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { CartContext } from "../../cart.context";
-import { spacer } from "./PaymentBarContent.style";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = {
-  line: css({
+const useStyles = makeStyles()(theme => ({
+  line: {
     justifyContent: 'start',
     [responsiveMediaQuery('<=xs', {
       appAlways: true
@@ -17,23 +14,28 @@ const styles = {
       fontSize: '0.75rem',
       paddingBottom: 3
     }
-  }).toString(),
-  message: css({
+  },
+  message: {
     order: 2
-  }).toString(),
-  error: css({
-    color: 'var(--color-state-alert)'
-  }).toString(),
-  warning: css({
-    color: 'var(--color-state-warning)'
-  }).toString(),
-  info: css({
-    color: 'var(--color-state-ok)'
-  }).toString(),
-  loading: css({
+  },
+  error: {
+    color: theme.palette.error.main
+  },
+  warning: {
+    color: theme.palette.warning.main
+  },
+  info: {
+    color: theme.palette.success.main
+  },
+  loading: {
     opacity: 0.4
-  }).toString()
-};
+  },
+  spacer: {
+    width: isIOSTheme() ? 27 : 32,
+    order: 1,
+    flexShrink: 0
+  }
+}));
 
 /**
  * @param {Object} props The components props
@@ -42,6 +44,10 @@ const styles = {
 const PaymentBarPromotionCouponMessages = ({
   messages
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     isLoading
   } = useContext(CartContext);
@@ -53,16 +59,16 @@ const PaymentBarPromotionCouponMessages = ({
     additionalParams,
     type
   }) => /*#__PURE__*/_jsx(CartTotalLine, {
-    className: styles.line,
+    className: classes.line,
     children: /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(CartTotalLine.Spacer, {
-        className: spacer
+        className: classes.spacer
       }), /*#__PURE__*/_jsx("div", {
-        className: classNames(styles.message, {
-          [styles.loading]: isLoading,
-          [styles.error]: type === 'error',
-          [styles.warning]: type === 'warning',
-          [styles.info]: type === 'info'
+        className: cx(classes.message, {
+          [classes.loading]: isLoading,
+          [classes.error]: type === 'error',
+          [classes.warning]: type === 'warning',
+          [classes.info]: type === 'info'
         }),
         children: errorBehavior.getErrorMessage(message, additionalParams)
       })]

package/cart/components/PaymentBar/PaymentBarPromotionCoupons.js

@@ -1,19 +1,16 @@
 import React, { useContext, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
-import classNames from 'classnames';
 import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
-import { i18n } from '@shopgate/engage/core';
+import { i18n, isIOSTheme } from '@shopgate/engage/core';
 import { CrossIcon } from '@shopgate/engage/components';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import PaymentBarPromotionCouponMessages from "./PaymentBarPromotionCouponMessages";
 import { CartContext } from "../../cart.context";
 import PaymentBarPromotionalText from "./PaymentBarPromotionalText";
-import { spacer } from "./PaymentBarContent.style";
 import connect from "./PaymentBarPromotionCoupons.connector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = {
-  icon: css({
+const useStyles = makeStyles()({
+  icon: {
     backgroundColor: '#898989',
     color: '#fff',
     borderRadius: 32,
@@ -26,11 +23,16 @@ const styles = {
     })]: {
       padding: 3
     }
-  }).toString(),
-  withMessages: css({
+  },
+  withMessages: {
     paddingBottom: '0px !important'
-  }).toString()
-};
+  },
+  spacer: {
+    width: isIOSTheme() ? 27 : 32,
+    order: 1,
+    flexShrink: 0
+  }
+});
 
 /**
  * @returns {JSX}
@@ -41,6 +43,10 @@ const PaymentBarPromotionCoupons = ({
   deleteCoupon,
   showSeparator
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     isLoading,
     currency
@@ -67,8 +73,8 @@ const PaymentBarPromotionCoupons = ({
     return /*#__PURE__*/_jsxs(Fragment, {
       children: [/*#__PURE__*/_jsxs(CartTotalLine, {
         isDisabled: isLoading,
-        className: classNames(className, {
-          [styles.withMessages]: !!messages.length
+        className: cx(className, {
+          [classes.withMessages]: !!messages.length
         }),
         children: [/*#__PURE__*/_jsx(CartTotalLine.Label, {
           label: i18n.text('cart.coupon_label', {
@@ -82,9 +88,9 @@ const PaymentBarPromotionCoupons = ({
           amount: amount,
           currency: currency
         }), /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
-          className: spacer,
+          className: classes.spacer,
           children: /*#__PURE__*/_jsx("div", {
-            className: styles.icon,
+            className: classes.icon,
             onClick: () => {
               deleteCoupon(code);
             },

package/cart/components/PaymentBar/PaymentBarPromotionalText.js

@@ -1,29 +1,22 @@
-import React, { Fragment, useCallback, useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
 import { connect } from 'react-redux';
-import classNames from 'classnames';
-import { nl2br, showModal as showModalAction } from '@shopgate/engage/core';
+import { nl2br, showModal as showModalAction, isIOSTheme } from '@shopgate/engage/core';
 import { InfoIcon } from '@shopgate/engage/components';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
-import { spacer } from "./PaymentBarContent.style";
 import { CartContext } from "../../cart.context";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const mapDispatchToProps = {
   showModal: showModalAction
 };
-const {
-  variables
-} = themeConfig;
-const styles = {
-  textWrapper: css({
-    padding: `${variables.gap.xsmall}px 0`,
-    color: 'var(--color-state-alert)',
+const useStyles = makeStyles()(theme => ({
+  textWrapper: {
+    padding: theme.spacing(0.5, 0),
+    color: theme.palette.error.main,
     order: 3
-  }).toString(),
-  line: css({
+  },
+  line: {
     justifyContent: 'start',
     [responsiveMediaQuery('<=xs', {
       appAlways: true
@@ -32,11 +25,8 @@ const styles = {
       paddingBottom: 3,
       verticalAlign: 'text-bottom'
     }
-  }).toString(),
-  message: css({
-    order: 2
-  }).toString(),
-  iconWrapper: css({
+  },
+  iconWrapper: {
     cursor: 'pointer',
     color: 'var(--color-primary)',
     fontSize: '1.5rem',
@@ -49,14 +39,19 @@ const styles = {
       fontSize: '1.375rem',
       paddingBottom: 0
     }
-  }).toString(),
-  icon: css({
+  },
+  icon: {
     display: 'inline'
-  }).toString(),
-  loading: css({
+  },
+  loading: {
     opacity: 0.5
-  }).toString()
-};
+  },
+  spacer: {
+    width: isIOSTheme() ? 27 : 32,
+    order: 1,
+    flexShrink: 0
+  }
+}));
 
 /**
  * @param {Object} props The component props
@@ -67,6 +62,10 @@ const PaymentBarPromotionalText = ({
   showModal,
   renderIcon
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     isLoading
   } = useContext(CartContext);
@@ -83,17 +82,19 @@ const PaymentBarPromotionalText = ({
   }
   if (!renderIcon) {
     return /*#__PURE__*/_jsx(CartTotalLine, {
-      className: styles.line,
+      className: classes.line,
       children: /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx("div", {
-          className: classNames(styles.textWrapper, {
-            [styles.loading]: isLoading
-          }),
+          className: cx(classes.textWrapper, {
+            [classes.loading]: isLoading
+          })
+          // eslint-disable-next-line react/no-danger
+          ,
           dangerouslySetInnerHTML: {
             __html: nl2br(text)
           }
         }), /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
-          className: spacer
+          className: classes.spacer
         })]
       })
     });
@@ -101,13 +102,13 @@ const PaymentBarPromotionalText = ({
   return /*#__PURE__*/_jsx("span", {
     onClick: showText,
     onKeyDown: showText,
-    className: classNames(styles.iconWrapper, {
-      [styles.loading]: isLoading
+    className: cx(classes.iconWrapper, {
+      [classes.loading]: isLoading
     }),
     role: "button",
     tabIndex: 0,
     children: /*#__PURE__*/_jsx(InfoIcon, {
-      className: styles.icon
+      className: classes.icon
     })
   });
 };

package/cart/components/PaymentBar/PaymentBarReserveButton.js

@@ -2,11 +2,28 @@ import "core-js/modules/es.regexp.flags.js";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { I18n, SurroundPortals, RippleButton } 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 { FulfillmentSheet, STAGE_RESERVE_FORM } from "../../../locations";
 import { CartContext } from "../../cart.context";
-import { button, disabledButton } from "./PaymentBarCheckoutButton.style";
 import connect from "./PaymentBarReserveButton.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`
+  }
+});
 
 /**
  * The reserve button component.
@@ -14,10 +31,12 @@ import connect from "./PaymentBarReserveButton.connector";
  * @param {Function} props.historyReset The history reset function.
  * @return {JSX.Element} The rendered component.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const PaymentBarReserveButton = ({
   historyReset
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     flags: {
       orderable
@@ -46,7 +65,7 @@ const PaymentBarReserveButton = ({
       onClick: handleClick,
       disabled: !orderable,
       type: "regular",
-      className: orderable ? button : disabledButton,
+      className: orderable ? classes.button : classes.disabledButton,
       children: /*#__PURE__*/_jsx(I18n.Text, {
         string: "cart.reserve"
       })

package/cart/components/PaymentBar/PaymentBarShippingCost.js

@@ -1,11 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { SurroundPortals } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { isIOSTheme } from '@shopgate/engage/core';
 import { CART_PAYMENT_BAR_TOTALS_SHIPPING, getShippingLine } from '@shopgate/pwa-common-commerce/cart';
 import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
 import { CartContext } from "../../cart.context";
-import { spacer } from "./PaymentBarContent.style";
 import connect from "./PaymentBarShippingCost.connector";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  spacer: {
+    width: isIOSTheme() ? 27 : 32,
+    order: 1,
+    flexShrink: 0
+  }
+});
 
 /**
  * The PaymentBarShippingCost component.
@@ -15,12 +24,14 @@ import connect from "./PaymentBarShippingCost.connector";
  * @param {string|null} [props.className=null] Additional class names.
  * @returns {JSX.Element|null} The rendered component.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PaymentBarShippingCost = ({
   shippingCost,
   showSeparator,
   className
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     currency,
     isLoading,
@@ -44,7 +55,7 @@ const PaymentBarShippingCost = ({
       }), /*#__PURE__*/_jsx(CartTotalLine.Hint, {
         hint: shippingLine.hint
       }), hasPromotionCoupons && /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
-        className: spacer
+        className: classes.spacer
       })]
     })
   });

package/cart/components/PaymentBar/PaymentBarSubTotal.js

@@ -1,11 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { SurroundPortals } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { isIOSTheme } from '@shopgate/engage/core';
 import { CART_PAYMENT_BAR_TOTALS_SUB_TOTAL } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
 import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
 import { CartContext } from "../../cart.context";
-import { spacer } from "./PaymentBarContent.style";
 import connect from "./PaymentBarSubTotal.connector";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  spacer: {
+    width: isIOSTheme() ? 27 : 32,
+    order: 1,
+    flexShrink: 0
+  }
+});
 
 /**
  * Renders the PaymentBarSubTotal component.
@@ -16,13 +25,15 @@ import connect from "./PaymentBarSubTotal.connector";
  * @param {string|null} [props.className=null] The class name for styling.
  * @returns {JSX.Element|null} The rendered component or null.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PaymentBarSubTotal = ({
   amount,
   label,
   showSeparator,
   className
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     currency,
     isLoading,
@@ -41,7 +52,7 @@ const PaymentBarSubTotal = ({
         amount: amount,
         currency: currency
       }), hasPromotionCoupons && /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
-        className: spacer
+        className: classes.spacer
       })]
     })
   });