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

package/product/components/UnitQuantityPicker/UnitQuantityPicker.js

@@ -3,65 +3,63 @@ import PropTypes from 'prop-types';
 import { i18n, hasNewServices } from '@shopgate/engage/core/helpers';
 import { UIEvents } from '@shopgate/engage/core';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
-import { css } from 'glamor';
-import classNames from 'classnames';
+import { makeStyles } from '@shopgate/engage/styles';
 import { themeConfig } from '@shopgate/engage';
 import { RippleButton, QuantityInput } from '@shopgate/engage/components';
 import { broadcastLiveMessage } from '@shopgate/engage/a11y/helpers';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const {
-  variables,
   colors
 } = themeConfig;
-const styles = {
-  root: css({
-    display: 'flex',
-    flexDirection: 'row',
-    position: 'relative',
-    zIndex: 5
-  }).toString(),
-  backdrop: css({
-    zIndex: 4,
-    top: 0,
-    left: 0,
-    height: '100%',
-    width: '100%',
-    position: 'fixed'
-  }),
-  inputWrapper: ({
-    inputColor,
-    inputBgColor
-  }) => css({
-    display: 'flex',
-    alignItems: 'center',
-    width: '100%',
-    fontSize: 16,
-    backgroundColor: `var(--color-background-accent, ${colors.shade8})`,
-    ...(inputColor && {
-      color: `${inputColor} !important`
-    }),
-    ...(inputBgColor && {
-      backgroundColor: `${inputBgColor} !important`
-    }),
-    ' .quantity-label': {
-      paddingLeft: variables.gap.small,
-      paddingRight: 4,
-      textAlign: 'center',
-      width: 'calc(100% - 32px)',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap'
-    }
-  }),
-  input: ({
-    inputColor,
-    inputBgColor,
-    hasLabel,
-    size
-  }) => {
-    const fontWeight = size === 'large' ? 600 : 'normal';
-    return css({
-      padding: `0 ${variables.gap.small}px`,
+const useStyles = makeStyles()((theme, {
+  inputColor,
+  inputBgColor,
+  buttonColor,
+  buttonBgColor,
+  size = 'default',
+  hasLabel
+}) => {
+  const fontWeight = size === 'large' ? 600 : 'normal';
+  const sizeValue = size === 'large' ? 36 : 28;
+  return {
+    root: {
+      display: 'flex',
+      flexDirection: 'row',
+      position: 'relative',
+      zIndex: 5
+    },
+    backdrop: {
+      zIndex: 4,
+      top: 0,
+      left: 0,
+      height: '100%',
+      width: '100%',
+      position: 'fixed'
+    },
+    inputWrapper: {
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%',
+      fontSize: 16,
+      backgroundColor: 'var(--color-background-accent)',
+      ...(inputColor && {
+        color: `${inputColor} !important`
+      }),
+      ...(inputBgColor && {
+        backgroundColor: `${inputBgColor} !important`
+      }),
+      ' .quantity-label': {
+        paddingLeft: theme.spacing(1),
+        paddingRight: 4,
+        textAlign: 'center',
+        width: 'calc(100% - 32px)',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap'
+      }
+    },
+    input: {
+      padding: theme.spacing(0, 1),
       textAlign: hasLabel ? 'left' : 'center',
       fontWeight,
       height: '100%',
@@ -79,15 +77,8 @@ const styles = {
       '&:focus:not(:focus-visible)': {
         outline: 'none'
       }
-    }).toString();
-  },
-  button: ({
-    size = 'default',
-    buttonColor,
-    buttonBgColor
-  }) => {
-    const sizeValue = size === 'large' ? 36 : 28;
-    return css({
+    },
+    button: {
       width: sizeValue,
       ' &&': {
         minWidth: sizeValue,
@@ -103,29 +94,29 @@ const styles = {
           backgroundColor: `${buttonBgColor} !important`
         })
       }
-    });
-  },
-  buttonRipple: css({
-    padding: 0
-  }).toString(),
-  buttonNoRadiusLeft: css({
-    ' &&': {
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0
-    }
-  }).toString(),
-  buttonNoRadiusRight: css({
-    ' &&': {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0
-    }
-  }).toString(),
-  disabled: css({
-    ' > div': {
+    },
+    buttonRipple: {
       padding: 0
+    },
+    buttonNoRadiusLeft: {
+      ' &&': {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      }
+    },
+    buttonNoRadiusRight: {
+      ' &&': {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      }
+    },
+    disabled: {
+      ' > div': {
+        padding: 0
+      }
     }
-  }).toString()
-};
+  };
+});
 
 /**
  * A Quantity Picker with unit support.
@@ -172,6 +163,17 @@ const UnitQuantityPicker = ({
     showLabel = widgetDefaults.showLabel
   } = useWidgetSettings('@shopgate/engage/product/components/UnitQuantityPicker');
   const [isFocused, setIsFocused] = useState(false);
+  const {
+    classes,
+    cx
+  } = useStyles({
+    inputColor,
+    inputBgColor,
+    buttonColor,
+    buttonBgColor,
+    size,
+    hasLabel: showLabel && !!quantityLabel
+  });
   const inputRef = useRef(null);
   const handleOnFocus = useCallback(() => {
     setIsFocused(true);
@@ -249,39 +251,27 @@ const UnitQuantityPicker = ({
     // Show hidden backdrop when focused to avoid side effects when user blurs the input
     // e.g. opening links unintended
     _jsx("div", {
-      className: styles.backdrop
+      className: classes.backdrop
     }), /*#__PURE__*/_jsxs("div", {
-      className: `${styles.root} ${className}`,
+      className: cx(classes.root, className),
       children: [/*#__PURE__*/_jsx(RippleButton, {
         type: "secondary",
         disabled: !allowDecrement || disabled,
-        rippleClassName: styles.buttonRipple,
-        className: classNames(styles.button({
-          size,
-          buttonColor,
-          buttonBgColor
-        }), styles.buttonNoRadiusRight, {
-          [styles.disabled]: !allowDecrement || disabled
+        rippleClassName: classes.buttonRipple,
+        className: cx(classes.button, classes.buttonNoRadiusRight, {
+          [classes.disabled]: !allowDecrement || disabled
         }),
         onClick: handleDecrement,
         "aria-label": i18n.text('product.decrease_quantity'),
         children: "-"
       }), /*#__PURE__*/_jsxs("span", {
-        className: styles.inputWrapper({
-          inputColor,
-          inputBgColor
-        }),
+        className: classes.inputWrapper,
         children: [quantityLabel && showLabel && /*#__PURE__*/_jsx("span", {
           "aria-hidden": true,
           className: "quantity-label",
           children: quantityLabel
         }), /*#__PURE__*/_jsx(QuantityInput, {
-          className: styles.input({
-            inputColor,
-            inputBgColor,
-            hasLabel: showLabel && !!quantityLabel,
-            size
-          }),
+          className: classes.input,
           value: value,
           onChange: onChange,
           maxDecimals: maxDecimals,
@@ -298,13 +288,9 @@ const UnitQuantityPicker = ({
       }), /*#__PURE__*/_jsx(RippleButton, {
         type: "secondary",
         disabled: !allowIncrement || disabled,
-        rippleClassName: styles.buttonRipple,
-        className: classNames(styles.button({
-          size,
-          buttonColor,
-          buttonBgColor
-        }), styles.buttonNoRadiusLeft, {
-          [styles.disabled]: !allowIncrement || disabled
+        rippleClassName: classes.buttonRipple,
+        className: cx(classes.button, classes.buttonNoRadiusLeft, {
+          [classes.disabled]: !allowIncrement || disabled
         }),
         onClick: handleIncrement,
         "aria-label": i18n.text('product.increase_quantity'),

package/product/components/UnitQuantityPicker/UnitQuantityPickerWithSection.js

@@ -1,30 +1,30 @@
 import React, { useMemo } from 'react';
-import { css } from 'glamor';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { hasNewServices, i18n } from '@shopgate/engage/core/helpers';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
 import { withCurrentProduct, withWidgetSettings } from '@shopgate/engage/core/hocs';
 import { Section } from '@shopgate/engage/a11y/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import { makeGetCurrentProductPropertyByLabel } from '@shopgate/engage/product/selectors/product';
 import ProductUnitQuantityPicker from "./ProductUnitQuantityPicker";
 import OrderQuantityHint from "../OrderQuantityHint";
 import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  quantityPicker: css({
+const useStyles = makeStyles()({
+  quantityPicker: {
     display: 'flex',
     flexDirection: 'column'
-  }).toString(),
-  quantityPickerPicker: css({
+  },
+  quantityPickerPicker: {
     width: '100%'
-  }).toString(),
-  quantityHint: css({
+  },
+  quantityHint: {
     '&:not(:empty)': {
       paddingTop: 8,
       marginBottom: -4
     }
-  }).toString()
-};
+  }
+});
 
 /**
  * A Quantity Picker with unit support.
@@ -35,6 +35,9 @@ const UnitQuantityPickerWithSection = ({
   variantId,
   productProperty
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     show = hasNewServices()
   } = useWidgetSettings('@shopgate/engage/product/components/UnitQuantityPicker');
@@ -54,16 +57,16 @@ const UnitQuantityPickerWithSection = ({
   return /*#__PURE__*/_jsx(Section, {
     title: "product.sections.quantity",
     children: /*#__PURE__*/_jsx(ProductUnitQuantityPicker, {
-      className: styles.quantityPicker,
+      className: classes.quantityPicker,
       classes: {
-        picker: styles.quantityPickerPicker
+        picker: classes.quantityPickerPicker
       },
       size: "large",
       quantityLabel: quantityLabel,
       hideHeadline: true,
       children: /*#__PURE__*/_jsx(OrderQuantityHint, {
         productId: variantId || productId,
-        className: styles.quantityHint
+        className: classes.quantityHint
       })
     })
   });

package/product/components/UnitQuantityPicker/helper.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.string.replace.js";
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
 
 /**
  * Formats a float number to a string with limited decimals

package/product/helpers/index.d.ts

@@ -0,0 +1,13 @@
+export * from "@shopgate/pwa-common-commerce/product/helpers";
+export * from "../components/Media/helpers";
+export * from "./redirects";
+export function buildFetchCategoryProductsParams(): undefined | {
+    params: Object;
+};
+export function buildFetchSearchResultsParams(): undefined | {
+    params: Object;
+};
+export function setDefaultProductFetchParams(): void;
+export function getProductImageSettings(): Object;
+export function loadProductImage(src: string, resolution?: Object): Promise<any>;
+//# sourceMappingURL=index.d.ts.map

package/product/helpers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../product/helpers/index.js"],"names":[],"mappings":";;;AAcO,oDAFM,SAAS,GAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAC,CAkBtC;AAhBM,iDAFM,SAAS,GAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAC,CAkBtC;AAWM,qDAON;AAMM,2CAFK,MAAM,CAoCjB;AAQM,sCAJI,MAAM,eACN,MAAM,gBAWhB"}

package/product/helpers/redirects.d.ts

@@ -0,0 +1,2 @@
+export function enableRedirectHandler(): void;
+//# sourceMappingURL=redirects.d.ts.map

package/product/helpers/redirects.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"redirects.d.ts","sourceRoot":"","sources":["../../../product/helpers/redirects.js"],"names":[],"mappings":"AAUO,yCAFM,IAAI,CA4BhB"}

package/product/selectors/helpers/filterProperties.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Reads the setting for product properties whitelisting/blacklisting
+ * and filters the properties accordingly.
+ * @param {Array} properties Array of properties with label and value attributes.
+ * @return {Array} Filtered properties.
+ */
+export function filterProperties(properties: any[]): any[];
+//# sourceMappingURL=filterProperties.d.ts.map

package/product/selectors/helpers/filterProperties.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterProperties.d.ts","sourceRoot":"","sources":["../../../../product/selectors/helpers/filterProperties.js"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,2DAyBC"}

package/product/selectors/helpers/index.d.ts

@@ -0,0 +1,3 @@
+export { filterProperties } from "./filterProperties";
+export { wrapMemoizedSelector } from "./wrapMemoizedSelector";
+//# sourceMappingURL=index.d.ts.map

package/product/selectors/helpers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../product/selectors/helpers/index.js"],"names":[],"mappings":""}

package/product/selectors/helpers/wrapMemoizedSelector.d.ts

@@ -0,0 +1,2 @@
+export function wrapMemoizedSelector(selector: Function): Function;
+//# sourceMappingURL=wrapMemoizedSelector.d.ts.map

package/product/selectors/helpers/wrapMemoizedSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapMemoizedSelector.d.ts","sourceRoot":"","sources":["../../../../product/selectors/helpers/wrapMemoizedSelector.js"],"names":[],"mappings":"AAKO,mEAMN"}

package/product/selectors/media.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import { createSelector } from 'reselect';
 import { getProductId, getProductState } from '@shopgate/pwa-common-commerce/product/selectors/product';
 

package/product/selectors/product.d.ts

@@ -0,0 +1,112 @@
+/**
+ * Creates the selector to get a product's properties from the state filtered via
+ * positive / negative list.
+ * @returns {Function}
+ */
+export function makeGetProductProperties(): Function;
+/**
+ * Creates the selector to get a product's effectivity dates.
+ * @returns {Function}
+ */
+export function makeGetProductEffectivityDates(): Function;
+/**
+ * Creates a selector to return product characteristics.
+ * @returns {Function}
+ */
+export function makeGetProductCharacteristics(): Function;
+/**
+ * Creates a selector to return product featured media.
+ * @returns {Function}
+ */
+export function makeGetProductFeaturedMedia(): Function;
+export function getProductState(state: Object): Object;
+/**
+ * Selects the product properties state.
+ * @param {Object} state The current application state.
+ * @param {Object} props The component props.
+ * @return {Object} The product properties state.
+ */
+export const getProductPropertiesState: ((state: Object) => any) & import("reselect").OutputSelectorFields<(args_0: Object) => any, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects all products from the store.
+ * @param {Object} state The current application state.
+ * @return {Object} The collection of products.
+ */
+export const getProducts: ((state: Object) => any) & import("reselect").OutputSelectorFields<(args_0: Object) => any, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+export function getProductId(state: Object, props?: Object): string | null;
+/**
+ * Retrieves the product data for the passed productId from the store.
+ * @param {Object} state The current application state.
+ * @param {Object} props The component props.
+ * @return {Object} The current product.
+ */
+export const getProduct: ((state: Object, props?: Object | undefined) => any) & import("reselect").OutputSelectorFields<(...args: any) => any, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Retrieves a product by id from state. Different to getProduct() which returns the product
+ * entity data if available, this selector returns the pure state entry for a given productId.
+ * So the expires and the isFetching property is processable.
+ * @param {Object} state The current application state.
+ * @param {Object} props The component props.
+ * @return {Object|null} The dedicated product.
+ */
+export const getProductById: ((state: any, ...params: any[]) => any) & import("reselect").OutputSelectorFields<(...args: readonly unknown[]) => any, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+export const getProductDataById: ((state: any, ...params: any[]) => any) & import("reselect").OutputSelectorFields<(...args: any) => any, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Determines a baseProductId for the products which are referenced within the props.
+ * When a variantId is passed, the selector will return the id of the related base product.
+ * @param {Object} state The current application state.
+ * @param {Object} props The component props.
+ * @return {string|null}
+ */
+export const getBaseProductId: ((state: any, ...params: any[]) => any) & import("reselect").OutputSelectorFields<(...args: readonly unknown[]) => any, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Retrieves the base product data for the passed productId from the store.
+ * @param {Object} state The current application state.
+ * @returns {Object|null} The current product.
+ */
+export const getBaseProduct: ((state: any) => any) & import("reselect").OutputSelectorFields<(...args: any) => any, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * END of the copied block
+ */
+/**
+ * Selects the is fetching state of the active product.
+ */
+export const getProductIsFetching: ((state: Object, props?: Object | undefined) => any) & import("reselect").OutputSelectorFields<(...args: any) => any, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+export function makeGetProductPropertiesUnfiltered(): Function;
+export function makeIsProductActive(returnNullIfProductMissing?: boolean): Function;
+export function makeIsBaseProductActive(returnNullIfProductMissing?: boolean): Function;
+export function makeGetCurrentProductPropertyByLabel(): Function;
+export function makeGetProductType(): Function;
+//# sourceMappingURL=product.d.ts.map

package/product/selectors/product.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product.d.ts","sourceRoot":"","sources":["../../../product/selectors/product.js"],"names":[],"mappings":"AAgLA;;;;GAIG;AACH,qDAcC;AAmBD;;;GAGG;AACH,2DAkBC;AAED;;;GAGG;AACH,0DAKC;AAED;;;GAGG;AACH,wDAWC;AArPM,uCAHI,MAAM,GACL,MAAM,CAE0D;AAE5E;;;;;GAKG;AACH;;;;EAGE;AAEF;;;;GAIG;AACH;;;;EAGE;AASK,oCAJI,MAAM,UACN,MAAM,GACL,MAAM,GAAC,IAAI,CAuBtB;AAED;;;;;GAKG;AACH;;;;EAOE;AAEF;;;;;;;GAOG;AACH;;;;EAeE;AAEF;;;;EAGE;AAEF;;;;;;GAMG;AACH;;;;EAkBE;AAEF;;;;GAIG;AACH;;;;EAYE;AAEF;;GAEG;AAEH;;GAEG;AACH;;;;EAIE;AA2BK,+DAWN;AA+DM,iEANI,OAAO,YAejB;AAWM,qEANI,OAAO,YAejB;AAMM,iEAeN;AAOM,+CAGN"}

package/push-opt-in/components/PushOptInModal/index.js

@@ -1,25 +1,68 @@
 import React, { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
-import classNames from 'classnames';
+import { makeStyles } from '@shopgate/engage/styles';
 import { Grid, I18n, Button, Modal } from '@shopgate/engage/components';
-import { appConfig } from '@shopgate/engage';
+import { appConfig, themeConfig } from '@shopgate/engage';
 import pushImage from "./push-opt-in.svg";
-import styles from "./style";
 import connect from "./connector";
 import { svgToDataUrl } from "../../../core";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()(() => ({
+  modalContent: {
+    width: '100%'
+  },
+  modalLayout: {
+    backgroundColor: colors.lightOverlay
+  },
+  container: {
+    backgroundColor: colors.lightOverlay,
+    textAlign: 'center',
+    padding: '30px',
+    justifyContent: 'center',
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  title: {
+    fontWeight: 'bold',
+    fontSize: '1.35rem',
+    paddingTop: '30px',
+    paddingBottom: '30px'
+  },
+  item: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
+  image: {
+    width: '80%',
+    maxWidth: 400
+  },
+  button: {
+    marginTop: '30px'
+  },
+  buttonText: {
+    color: colors.gray
+  }
+}));
 
 /**
  * The Push opt-in modal component.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PushOptInModal = ({
   isPushOptInModalVisible,
   allowPushOptIn,
   denyPushOptIn
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     pushOptIn: {
       modalMessage,
@@ -58,44 +101,44 @@ const PushOptInModal = ({
   }
   return /*#__PURE__*/_jsx(Modal, {
     classes: {
-      content: styles.modalContent,
-      layout: styles.modalLayout
+      content: classes.modalContent,
+      layout: classes.modalLayout
     },
     children: /*#__PURE__*/_jsx(Grid, {
-      className: classNames(styles.container, 'push-opt-in-modal__container'),
+      className: cx(classes.container, 'push-opt-in-modal__container'),
       role: "alertdialog",
       "aria-modal": true,
       "aria-labelledby": "pushOptInDialogTitle",
       "aria-describedby": "pushOptInDialogMessage",
       children: /*#__PURE__*/_jsxs(Grid.Item, {
-        className: styles.item,
+        className: classes.item,
         children: [/*#__PURE__*/_jsx("img", {
           src: imageSRC,
-          className: classNames(styles.image, 'push-opt-in-modal__image'),
+          className: cx(classes.image, 'push-opt-in-modal__image'),
           alt: "",
           "aria-hidden": "true"
         }), /*#__PURE__*/_jsx(I18n.Text, {
-          className: classNames(styles.title, 'push-opt-in-modal__title'),
+          className: cx(classes.title, 'push-opt-in-modal__title'),
           string: modalTitle || 'pushOptInModal.title',
           id: "pushOptInDialogTitle"
         }), /*#__PURE__*/_jsx(I18n.Text, {
-          className: classNames('push-opt-in-modal__message'),
+          className: cx('push-opt-in-modal__message'),
           string: modalMessage || 'pushOptInModal.message',
           id: "pushOptInDialogMessage"
         }), /*#__PURE__*/_jsx(Button, {
           onClick: handleAllowPushOptIn,
           type: "primary",
-          className: classNames(styles.button, 'push-opt-in-modal__button-allow'),
+          className: cx(classes.button, 'push-opt-in-modal__button-allow'),
           children: /*#__PURE__*/_jsx(I18n.Text, {
             string: modalButtonAllow || 'pushOptInModal.buttonAllow'
           })
         }), /*#__PURE__*/_jsx(Button, {
           onClick: handleDenyPushOptIn,
           type: "plain",
-          className: classNames(styles.button, 'push-opt-in-modal__button-deny'),
+          className: cx(classes.button, 'push-opt-in-modal__button-deny'),
           children: /*#__PURE__*/_jsx(I18n.Text, {
             string: modalButtonDeny || 'pushOptInModal.buttonDeny',
-            className: styles.buttonText
+            className: classes.buttonText
           })
         })]
       })