@shopgate/engage 7.30.0-alpha.10 → 7.30.0-alpha.11

package/core/hocs/withRoute.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { RouteContext } from '@shopgate/pwa-common/context';
 
@@ -8,6 +7,7 @@ import { RouteContext } from '@shopgate/pwa-common/context';
  * @param {string|null} prop The optional prop name.
  * @returns {Object}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const getInjectedProps = (context, prop) => {
   if (!prop) {
     return context;
@@ -32,7 +32,12 @@ export function withRoute(WrappedComponent, options = {}) {
    * @param {Object} props The component props.
    * @returns {JSX}
    */
-  const WithRoute = props => /*#__PURE__*/React.createElement(RouteContext.Consumer, null, routeContext => /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, getInjectedProps(routeContext, options.prop), props)));
+  const WithRoute = props => /*#__PURE__*/_jsx(RouteContext.Consumer, {
+    children: routeContext => /*#__PURE__*/_jsx(WrappedComponent, {
+      ...getInjectedProps(routeContext, options.prop),
+      ...props
+    })
+  });
   const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WithRoute.displayName = `WithRoute(${displayName})`;
   return WithRoute;

package/core/hocs/withTheme.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { ThemeContext } from '@shopgate/pwa-common/context';
 
@@ -8,6 +7,7 @@ import { ThemeContext } from '@shopgate/pwa-common/context';
  * @param {string|null} prop The optional prop name.
  * @returns {Object}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const getInjectedProps = (context, prop) => {
   if (!prop) {
     return context;
@@ -71,13 +71,18 @@ export function withTheme(WrappedComponent, options = {}) {
    * @param {Object} props The component props.
    * @returns {JSX.Element}
    */
-  const WithTheme = props => /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, ({
-    contexts,
-    ...themeContext
-  }) =>
-  /*#__PURE__*/
-  // The contexts are left out in favor of other HOCs.
-  React.createElement(WrappedComponent, _extends({}, getInjectedProps(themeContext, options.prop), props)));
+  const WithTheme = props => /*#__PURE__*/_jsx(ThemeContext.Consumer, {
+    children: ({
+      contexts,
+      ...themeContext
+    }) =>
+    /*#__PURE__*/
+    // The contexts are left out in favor of other HOCs.
+    _jsx(WrappedComponent, {
+      ...getInjectedProps(themeContext, options.prop),
+      ...props
+    })
+  });
   const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WithTheme.displayName = `WithTheme(${displayName})`;
   return WithTheme;

package/core/hocs/withThemeResources.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { useThemeResources, useThemeComponents, useThemeWidgets } from '@shopgate/engage/core/hooks';
 
@@ -8,11 +7,13 @@ import { useThemeResources, useThemeComponents, useThemeWidgets } from '@shopgat
  * @param {React.ComponentType<any>} WrappedComponent The wrapped component
  * @returns {React.FC<any>}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const withThemeResources = WrappedComponent => function ThemeResourcesWrapper(props) {
   const themeResources = useThemeResources();
-  return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
+  return /*#__PURE__*/_jsx(WrappedComponent, {
+    ...props,
     themeResources: themeResources
-  }));
+  });
 };
 
 /**
@@ -23,9 +24,10 @@ export const withThemeResources = WrappedComponent => function ThemeResourcesWra
  */
 export const withThemeComponents = WrappedComponent => function ThemeResourcesWrapper(props) {
   const themeComponents = useThemeComponents();
-  return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
+  return /*#__PURE__*/_jsx(WrappedComponent, {
+    ...props,
     themeComponents: themeComponents
-  }));
+  });
 };
 
 /**
@@ -42,7 +44,8 @@ export const withThemeWidgets = (WrappedComponent, options = {}) => function The
     version = 'v1'
   } = options;
   const themeWidgets = useThemeWidgets(version);
-  return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
+  return /*#__PURE__*/_jsx(WrappedComponent, {
+    ...props,
     themeWidgets: themeWidgets
-  }));
+  });
 };

package/core/hocs/withWidgetSettings.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { useWidgetSettings } from "../hooks/useWidgetSettings";
 
@@ -11,6 +10,7 @@ import { useWidgetSettings } from "../hooks/useWidgetSettings";
  * @param {number|undefined} [index] The optional index of the widget.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export function withWidgetSettings(WrappedComponent, widgetId, index) {
   /**
    * The actual HOC.
@@ -19,9 +19,10 @@ export function withWidgetSettings(WrappedComponent, widgetId, index) {
    */
   const WithWidgetSettings = props => {
     const settings = useWidgetSettings(widgetId, index);
-    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
-      widgetSettings: settings
-    }, props));
+    return /*#__PURE__*/_jsx(WrappedComponent, {
+      widgetSettings: settings,
+      ...props
+    });
   };
   const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WithWidgetSettings.displayName = `WithWidgetSettings(${displayName})`;

package/core/hocs/withWidgetStyles.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { useWidgetStyles } from "../hooks/useWidgetStyles";
 
@@ -9,6 +8,7 @@ import { useWidgetStyles } from "../hooks/useWidgetStyles";
  * @param {number|undefined} [index] The optional index of the widget.
  * @returns {Object}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export function withWidgetStyles(WrappedComponent, widgetId, index) {
   /**
    * The actual HOC.
@@ -17,9 +17,10 @@ export function withWidgetStyles(WrappedComponent, widgetId, index) {
    */
   const WithWidgetStyles = props => {
     const styles = useWidgetStyles(widgetId, index);
-    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
-      widgetStyles: styles
-    }, props));
+    return /*#__PURE__*/_jsx(WrappedComponent, {
+      widgetStyles: styles,
+      ...props
+    });
   };
   const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WithWidgetStyles.displayName = `WithWidgetStyles(${displayName})`;

package/core/providers/AppProvider.js

@@ -1,3 +1,5 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import appConfig from '@shopgate/pwa-common/helpers/config';
@@ -8,35 +10,40 @@ import AppContext from "../contexts/AppContext";
 /**
  * The AppProvider component.
  */
-class AppProvider extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let AppProvider = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function AppProvider(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Sets the isVisible state to TRUE.
      */
-    this.setVisible = () => {
-      this.setIsVisible(true);
+    _this.setVisible = () => {
+      _this.setIsVisible(true);
     };
     /**
      * Sets the isVisible state to TRUE.
      */
-    this.setHidden = () => {
-      this.setIsVisible(false);
+    _this.setHidden = () => {
+      _this.setIsVisible(false);
     };
-    this.state = {
+    _this.state = {
       isVisible: true
     };
-    event.addCallback(APP_EVENT_VIEW_WILL_APPEAR, this.setVisible);
-    event.addCallback(APP_EVENT_VIEW_WILL_DISAPPEAR, this.setHidden);
+    event.addCallback(APP_EVENT_VIEW_WILL_APPEAR, _this.setVisible);
+    event.addCallback(APP_EVENT_VIEW_WILL_DISAPPEAR, _this.setHidden);
+    return _this;
   }
 
   /**
    * Removes the event listeners when the component unmounts.
    */
-  componentWillUnmount() {
+  _inheritsLoose(AppProvider, _Component);
+  var _proto = AppProvider.prototype;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     event.removeCallback(APP_EVENT_VIEW_WILL_APPEAR, this.setVisible);
     event.removeCallback(APP_EVENT_VIEW_WILL_DISAPPEAR, this.setHidden);
   }
@@ -44,20 +51,13 @@ class AppProvider extends Component {
   /**
    * Returns the context value to be passed to consumers.
    * @returns {Object}
-   */
-  get provided() {
-    return {
-      appConfig,
-      isVisible: this.state.isVisible,
-      setIsVisible: this.setIsVisible
-    };
-  }
+   */;
   /**
    * Sets the isVisible state. It indicates if Engage is visible,
    * or another WebView is presented to the user.
    * @param {boolean} value The new value
    */
-  setIsVisible(value) {
+  _proto.setIsVisible = function setIsVisible(value) {
     this.setState({
       isVisible: value
     });
@@ -65,11 +65,22 @@ class AppProvider extends Component {
 
   /**
    * @returns {JSX}
-   */
-  render() {
-    return /*#__PURE__*/React.createElement(AppContext.Provider, {
-      value: this.provided
-    }, this.props.children);
-  }
-}
+   */;
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsx(AppContext.Provider, {
+      value: this.provided,
+      children: this.props.children
+    });
+  };
+  return _createClass(AppProvider, [{
+    key: "provided",
+    get: function () {
+      return {
+        appConfig,
+        isVisible: this.state.isVisible,
+        setIsVisible: this.setIsVisible
+      };
+    }
+  }]);
+}(Component);
 export default AppProvider;

package/core/providers/ThemeResourcesProvider.js

@@ -26,6 +26,7 @@ import { ThemeResourcesContext } from "../contexts";
  * @param {React.ReactNode} props.children The component children.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ThemeResourcesProvider = ({
   widgets,
   components,
@@ -36,11 +37,13 @@ const ThemeResourcesProvider = ({
     widgets,
     components
   }), [components, widgets]);
-  return /*#__PURE__*/React.createElement(ThemeResourcesContext.Provider, {
-    value: value
-  }, legacyThemeAPI ? /*#__PURE__*/React.createElement(LegacyThemeContext.Provider, {
-    value: legacyThemeAPI
-  }, children) : children);
+  return /*#__PURE__*/_jsx(ThemeResourcesContext.Provider, {
+    value: value,
+    children: legacyThemeAPI ? /*#__PURE__*/_jsx(LegacyThemeContext.Provider, {
+      value: legacyThemeAPI,
+      children: children
+    }) : children
+  });
 };
 ThemeResourcesProvider.defaultProps = {
   legacyThemeAPI: null

package/development/components/ClientInformation/ClientInformation.js

@@ -1,10 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useLongPress } from '@shopgate/engage/core/hooks';
 import { getClientInformation } from '@shopgate/engage/core/selectors';
 import DevelopmentSettings from "../DevelopmentSettings";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   root: {
     position: 'relative',
@@ -56,17 +56,22 @@ const ClientInformation = () => {
   if (!codebaseVersion) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: cx('ui-shared__client-information', classes.root)
-  }, longPressAttrs, {
-    "aria-hidden": true
-  }), /*#__PURE__*/React.createElement("p", {
-    className: classes.unselectable
-  }, `App Version: ${appVersion} (${codebaseVersion})`, /*#__PURE__*/React.createElement("br", null), `Lib Version: ${libVersion}`), deviceIdVisible && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-    className: classes.deviceId
-  }, `Device ID: ${deviceId ?? ''}`), /*#__PURE__*/React.createElement(DevelopmentSettings, {
-    isOpen: developmentSettingsVisible,
-    onClose: () => setDevelopmentSettingsVisible(false)
-  })));
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx('ui-shared__client-information', classes.root),
+    ...longPressAttrs,
+    "aria-hidden": true,
+    children: [/*#__PURE__*/_jsxs("p", {
+      className: classes.unselectable,
+      children: [`App Version: ${appVersion} (${codebaseVersion})`, /*#__PURE__*/_jsx("br", {}), `Lib Version: ${libVersion}`]
+    }), deviceIdVisible && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("p", {
+        className: classes.deviceId,
+        children: `Device ID: ${deviceId ?? ''}`
+      }), /*#__PURE__*/_jsx(DevelopmentSettings, {
+        isOpen: developmentSettingsVisible,
+        onClose: () => setDevelopmentSettingsVisible(false)
+      })]
+    })]
+  });
 };
 export default ClientInformation;

package/development/components/DevelopmentSettings/DevelopmentSettings.js

@@ -6,6 +6,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { getEnabledCMSVersion, getEnableCms2ForAllShoppers } from '@shopgate/engage/core/selectors';
 import { getIsCMS2PreviewEnabled } from "../../selectors";
 import { toggleCms2Preview } from "../../action-creators";
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
     padding: theme.spacing(2, 2, 4),
@@ -41,21 +42,24 @@ const DevelopmentSettings = ({
   if (enableCms2ForAllShoppers || enabledCMSVersion === 'v1') {
     return null;
   }
-  return /*#__PURE__*/React.createElement(SheetDrawer, {
+  return /*#__PURE__*/_jsx(SheetDrawer, {
     title: " ",
     isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.container
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    className: classes.button,
-    type: "simple",
-    onClick: () => {
-      onClose();
-      setTimeout(() => {
-        dispatch(toggleCms2Preview(!isCMS2PreviewEnabled));
-      }, 300);
-    }
-  }, `${isCMS2PreviewEnabled ? 'Disable' : 'Enable'} CMS 2.0 Preview`)));
+    onClose: onClose,
+    children: /*#__PURE__*/_jsx("div", {
+      className: classes.container,
+      children: /*#__PURE__*/_jsx(RippleButton, {
+        className: classes.button,
+        type: "simple",
+        onClick: () => {
+          onClose();
+          setTimeout(() => {
+            dispatch(toggleCms2Preview(!isCMS2PreviewEnabled));
+          }, 300);
+        },
+        children: `${isCMS2PreviewEnabled ? 'Disable' : 'Enable'} CMS 2.0 Preview`
+      })
+    })
+  });
 };
 export default DevelopmentSettings;

package/development/components/DevelopmentTools/DevelopmentTools.js

@@ -10,12 +10,17 @@ import SimulatedInsets from "../SimulatedInsets";
  * @param {React.ReactNode} props.children The child components.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const DevelopmentTools = ({
   children
 }) => {
   if (!isDev) {
     return children;
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Shortcuts, null), /*#__PURE__*/React.createElement(SimulatedInsets, null, children));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Shortcuts, {}), /*#__PURE__*/_jsx(SimulatedInsets, {
+      children: children
+    })]
+  });
 };
 export default /*#__PURE__*/memo(DevelopmentTools);

package/development/components/SimulatedInsets/SimulatedInsetBottom.js

@@ -1,8 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { css } from 'glamor';
+import { jsx as _jsx } from "react/jsx-runtime";
 const classes = {
   container: css({
     position: 'fixed',
@@ -44,14 +44,15 @@ const SimulatedInsetBottom = ({
   const containerClasses = useMemo(() => classNames(classes.container, {
     [classes.containerHighlight]: highlightInset
   }), [highlightInset]);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsx("div", {
     "aria-hidden": true,
     role: "presentation",
-    className: containerClasses
-  }, props, {
-    onClick: onClick
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classes.handle
-  }));
+    className: containerClasses,
+    ...props,
+    onClick: onClick,
+    children: /*#__PURE__*/_jsx("div", {
+      className: classes.handle
+    })
+  });
 };
 export default SimulatedInsetBottom;

package/development/components/SimulatedInsets/SimulatedInsetTop.js

@@ -1,10 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 import { css } from 'glamor';
 import { getStatusBarStyleStorage } from '@shopgate/engage/development/selectors';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const classes = {
   container: css({
     position: 'fixed',
@@ -89,18 +89,21 @@ const SimulatedInsetTop = ({
     [classes.styleLight]: statusBarStyle === 'light',
     [classes.styleNone]: statusBarStyle === 'none'
   }), [highlightInset, statusBarStyle]);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsxs("div", {
     "aria-hidden": true,
     role: "presentation",
-    className: classNames(containerClasses)
-  }, props, {
-    onClick: onClick
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classes.info
-  }, time), /*#__PURE__*/React.createElement("div", {
-    className: classes.notch
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classes.info
-  }, "5G"));
+    className: classNames(containerClasses),
+    ...props,
+    onClick: onClick,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.info,
+      children: time
+    }), /*#__PURE__*/_jsx("div", {
+      className: classes.notch
+    }), /*#__PURE__*/_jsx("div", {
+      className: classes.info,
+      children: "5G"
+    })]
+  });
 };
 export default SimulatedInsetTop;

package/development/components/SimulatedInsets/SimulatedInsets.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -14,6 +13,7 @@ import SimulatedInsetBottom from "./SimulatedInsetBottom";
  * @param {React.ReactNode} props.children The child components.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const SimulatedInsets = ({
   children
 }) => {
@@ -26,12 +26,16 @@ const SimulatedInsets = ({
   const attrs = useLongPress(() => {
     dispatch(toggleInsets(!hasSimulatedSafeAreaInsets));
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, hasSimulatedSafeAreaInsets && /*#__PURE__*/React.createElement(SimulatedInsetTop, _extends({
-    onClick: handleClick,
-    highlightInset: highlightInset
-  }, attrs)), children, hasSimulatedSafeAreaInsets && /*#__PURE__*/React.createElement(SimulatedInsetBottom, _extends({
-    onClick: handleClick,
-    highlightInset: highlightInset
-  }, attrs)));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [hasSimulatedSafeAreaInsets && /*#__PURE__*/_jsx(SimulatedInsetTop, {
+      onClick: handleClick,
+      highlightInset: highlightInset,
+      ...attrs
+    }), children, hasSimulatedSafeAreaInsets && /*#__PURE__*/_jsx(SimulatedInsetBottom, {
+      onClick: handleClick,
+      highlightInset: highlightInset,
+      ...attrs
+    })]
+  });
 };
 export default SimulatedInsets;

package/favorites/components/CommentDialog/CommentDialog.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useState, useMemo, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
@@ -11,6 +10,7 @@ import { closeFavoritesCommentDialog } from '@shopgate/pwa-common-commerce/favor
 import { themeName } from '@shopgate/pwa-common/helpers/config';
 import { updateFavorite } from '@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';
 import I18n from '@shopgate/pwa-common/components/I18n';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isIos = themeName.includes('ios');
 
 /**
@@ -112,38 +112,40 @@ const CommentDialog = ({
   if (!isVisible) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Dialog, {
+  return /*#__PURE__*/_jsx(Dialog, {
     onConfirm: handleSubmit,
     onDismiss: handleClose,
     modal: {
       title: i18n.text(`favorites.comment_modal.${(item?.notes || '').length === 0 ? 'titleAdd' : 'titleEdit'}`),
       dismiss: i18n.text('favorites.comment_modal.dismiss'),
       confirm: i18n.text('favorites.comment_modal.confirm')
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement(TextField, _extends({
-    name: "name"
-  }, isIos ? {
-    placeholder: i18n.text('favorites.comment_modal.label')
-  } : {
-    label: i18n.text('favorites.comment_modal.label')
-  }, {
-    onChange: handleChange,
-    value: value,
-    className: styles.input,
-    attributes: attributes,
-    multiLine: true,
-    tabIndex: 0
-  })), /*#__PURE__*/React.createElement(I18n.Text, {
-    className: styles.characterCount,
-    string: "favorites.comment_modal.characterCount",
-    "aria-hidden": true,
-    params: {
-      maxCount: MAX_CHARACTER_COUNT,
-      count: value?.length || 0
-    }
-  })));
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      className: styles.root,
+      children: [/*#__PURE__*/_jsx(TextField, {
+        name: "name",
+        ...(isIos ? {
+          placeholder: i18n.text('favorites.comment_modal.label')
+        } : {
+          label: i18n.text('favorites.comment_modal.label')
+        }),
+        onChange: handleChange,
+        value: value,
+        className: styles.input,
+        attributes: attributes,
+        multiLine: true,
+        tabIndex: 0
+      }), /*#__PURE__*/_jsx(I18n.Text, {
+        className: styles.characterCount,
+        string: "favorites.comment_modal.characterCount",
+        "aria-hidden": true,
+        params: {
+          maxCount: MAX_CHARACTER_COUNT,
+          count: value?.length || 0
+        }
+      })]
+    })
+  });
 };
 CommentDialog.defaultProps = {
   settings: null

package/favorites/components/FavoriteButtonWide/FavoriteButtonWide.js

@@ -13,6 +13,7 @@ import appConfig from '@shopgate/pwa-common/helpers/config';
  * @param {Object} state State.
  * @returns {Object}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const makeMapStateToProps = () => {
   const getIsOnList = makeIsProductOnFavoriteList((_, props) => props.productId);
   return (state, props) => ({
@@ -68,11 +69,12 @@ const FavoriteButtonWide = ({
   if (!appConfig.hasFavorites) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(RippleButton, {
+  return /*#__PURE__*/_jsx(RippleButton, {
     className: styles.root,
     rippleClassName: styles.ripple,
     type: "primary",
-    onClick: () => toggle(productId)
-  }, i18n.text(label));
+    onClick: () => toggle(productId),
+    children: i18n.text(label)
+  });
 };
 export default connect(makeMapStateToProps, mapDispatchToProps)(FavoriteButtonWide);