@configuratorware/configurator-frontendgui 1.35.6 → 1.35.8

package/App/Modules/Designer/Components/DesignerSelectionToolbox/DesignerSelectionToolbox.js

@@ -196,7 +196,8 @@ var DesignerSelectionToolbox = function DesignerSelectionToolbox(props) {
       addCustomFont = props.addCustomFont,
       defaultFont = props.defaultFont,
       loadFonts = props.loadFonts,
-      initialColor = props.initialColor;
+      initialColor = props.initialColor,
+      autoFocusEditor = props.autoFocusEditor;
   var rteRef = (0, _react.useRef)(null);
   var editorRef = (0, _react.useRef)(null);
 
@@ -330,7 +331,7 @@ var DesignerSelectionToolbox = function DesignerSelectionToolbox(props) {
             }
 
             return renderTextEditor(_objectSpread(_objectSpread({}, textToolsRenderObj), {}, {
-              autoFocusWhenMounted: !((0, _Selectors.isPlaceholderContent)(selectedObject.content) || (0, _isMobileDevice["default"])()),
+              autoFocusWhenMounted: autoFocusEditor || !((0, _Selectors.isPlaceholderContent)(selectedObject.content) || (0, _isMobileDevice["default"])()),
               textEditorElementProps: textEditorElementProps,
               onChangeHTML: function onChangeHTML() {
                 // call the original function first with all the args
@@ -411,7 +412,8 @@ DesignerSelectionToolbox.propTypes = {
   calculateTextEditorBackgroundColor: _propTypes["default"].func,
   addCustomFont: _propTypes["default"].func,
   defaultFont: _propTypes["default"].object,
-  initialColor: _propTypes["default"].object
+  initialColor: _propTypes["default"].object,
+  autoFocusEditor: _propTypes["default"].bool
 };
 DesignerSelectionToolbox.defaultProps = {
   TextControlboxComponent: _TextControlbox["default"],
@@ -422,7 +424,8 @@ DesignerSelectionToolbox.defaultProps = {
   classes: {},
   width: '',
   isActiveBulkName: false,
-  isPortraitMode: false
+  isPortraitMode: false,
+  autoFocusEditor: false
 };
 
 var _default = (0, _withWidth["default"])()((0, _withStyles["default"])(styles, {

package/App/Shared/Components/AmountPrice/index.js

@@ -358,6 +358,10 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "priceListRef", /*#__PURE__*/_react["default"].createRef());
 
+    _defineProperty(_assertThisInitialized(_this), "acceptDesignRef", /*#__PURE__*/_react["default"].createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "acceptDataPrivacyRef", /*#__PURE__*/_react["default"].createRef());
+
     _defineProperty(_assertThisInitialized(_this), "handleChange", function (event) {
       _this.setState(_defineProperty({}, event.target.name, {
         value: event.target.checked,
@@ -365,7 +369,7 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
       }));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "verifyRequestErrors", function () {
+    _defineProperty(_assertThisInitialized(_this), "verifyRequestErrors", function (hasFormValidationErrors) {
       var _this$props = _this.props,
           bulkNameErrors = _this$props.bulkNameErrors,
           displayAcceptDesign = _this$props.displayAcceptDesign;
@@ -390,6 +394,8 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
             error: true
           }
         });
+
+        !hasFormValidationErrors && _this.acceptDesignRef.current && _this.acceptDesignRef.current.scrollIntoView();
       }
 
       if (!_this.dataPrivacyApproved()) {
@@ -399,6 +405,8 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
             error: true
           }
         });
+
+        !hasFormValidationErrors && _this.acceptDataPrivacyRef.current && _this.acceptDataPrivacyRef.current.scrollIntoView();
       }
     });
 
@@ -523,7 +531,7 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
               break;
 
             case 9:
-              _this.verifyRequestErrors();
+              _this.verifyRequestErrors(formValidation.hasError);
 
             case 10:
             case "end":
@@ -799,7 +807,9 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
         contactData: (0, _i18n.t)('amountPrice.contactData'),
         handleClose: this.handleClose,
         amount: amount,
-        acceptDesignComponent: showCallToAction ? /*#__PURE__*/_react["default"].createElement(AcceptDesignComponent, {
+        acceptDesignComponent: showCallToAction ? /*#__PURE__*/_react["default"].createElement("div", {
+          ref: this.acceptDesignRef
+        }, /*#__PURE__*/_react["default"].createElement(AcceptDesignComponent, {
           termsAndConditionsLink: termsAndConditionsLink,
           displayAcceptDesign: displayAcceptDesign,
           handleChangeCheckboxApproval: this.handleChange,
@@ -808,15 +818,17 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
           notice: notice,
           noteLabel: (0, _i18n.t)('amountPrice.notice'),
           handleChange: this.handleBasketNoticeChange
-        }) : null,
-        acceptDataPrivacyComponent: showReceiveOfferForm && dataPrivacyLink ? /*#__PURE__*/_react["default"].createElement(AcceptPrivacyComponent, {
+        })) : null,
+        acceptDataPrivacyComponent: showReceiveOfferForm && dataPrivacyLink ? /*#__PURE__*/_react["default"].createElement("div", {
+          ref: this.acceptDataPrivacyRef
+        }, /*#__PURE__*/_react["default"].createElement(AcceptPrivacyComponent, {
           dataPrivacyLink: dataPrivacyLink,
           displayAcceptDesign: true,
           handleChangeCheckboxApproval: this.handleChange,
           approval: dataPrivacyAccepted,
           closeProductOverviewDialog: this.handleClose,
           displayNote: false
-        }) : null,
+        })) : null,
         notificationComponent: mergedNotifications.map(function (_ref4, key) {
           var message = _ref4.message,
               level = _ref4.level,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.35.6",
+  "version": "1.35.8",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.35.6",
+    "@configuratorware/scripts": "1.35.8",
     "@hot-loader/react-dom": "^17.0.1",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.2",
@@ -39,8 +39,8 @@
     "react-router-dom": "^5.2.0",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.35.6",
-    "redhotmagma-visualization": "1.35.6",
+    "redhotmagma-graphics-editor": "1.35.8",
+    "redhotmagma-visualization": "1.35.8",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/src/App/Modules/Designer/Components/DesignerSelectionToolbox/DesignerSelectionToolbox.js

@@ -132,6 +132,7 @@ const DesignerSelectionToolbox = props => {
         defaultFont,
         loadFonts,
         initialColor,
+        autoFocusEditor,
     } = props;
 
     const rteRef = useRef(null);
@@ -291,10 +292,13 @@ const DesignerSelectionToolbox = props => {
 
                                                     return renderTextEditor({
                                                         ...textToolsRenderObj,
-                                                        autoFocusWhenMounted: !(
-                                                            isPlaceholderContent(selectedObject.content) ||
-                                                            isMobileDevice()
-                                                        ),
+                                                        autoFocusWhenMounted:
+                                                            autoFocusEditor ||
+                                                            !(
+                                                                isPlaceholderContent(
+                                                                    selectedObject.content
+                                                                ) || isMobileDevice()
+                                                            ),
                                                         textEditorElementProps,
                                                         onChangeHTML: (...args) => {
                                                             // call the original function first with all the args
@@ -396,6 +400,7 @@ DesignerSelectionToolbox.propTypes = {
     addCustomFont: PropTypes.func,
     defaultFont: PropTypes.object,
     initialColor: PropTypes.object,
+    autoFocusEditor: PropTypes.bool,
 };
 
 DesignerSelectionToolbox.defaultProps = {
@@ -408,6 +413,7 @@ DesignerSelectionToolbox.defaultProps = {
     width: '',
     isActiveBulkName: false,
     isPortraitMode: false,
+    autoFocusEditor: false,
 };
 
 export default withWidth()(

package/src/App/Shared/Components/AmountPrice/index.js

@@ -339,6 +339,8 @@ class AmountPrice extends React.Component {
     receiveOfferFormComponentRef = React.createRef();
     dialogContentRef = React.createRef();
     priceListRef = React.createRef();
+    acceptDesignRef = React.createRef();
+    acceptDataPrivacyRef = React.createRef();
 
     handleChange = event => {
         this.setState({
@@ -349,10 +351,9 @@ class AmountPrice extends React.Component {
         });
     };
 
-    verifyRequestErrors = () => {
+    verifyRequestErrors = hasFormValidationErrors => {
         const { bulkNameErrors, displayAcceptDesign } = this.props;
         const designApproved = this.state.approval.value;
-
         if (bulkNameErrors && bulkNameErrors.length > 0) {
             this.setState({ showErrors: true });
             this.setState({ bulkNameErrors });
@@ -365,6 +366,9 @@ class AmountPrice extends React.Component {
                     error: true,
                 },
             });
+            !hasFormValidationErrors &&
+                this.acceptDesignRef.current &&
+                this.acceptDesignRef.current.scrollIntoView();
         }
         if (!this.dataPrivacyApproved()) {
             this.setState({
@@ -373,6 +377,9 @@ class AmountPrice extends React.Component {
                     error: true,
                 },
             });
+            !hasFormValidationErrors &&
+                this.acceptDataPrivacyRef.current &&
+                this.acceptDataPrivacyRef.current.scrollIntoView();
         }
     };
 
@@ -449,7 +456,7 @@ class AmountPrice extends React.Component {
                 this.setState({ hasErrorReceiveOfferForm: false });
             }
         } else {
-            this.verifyRequestErrors();
+            this.verifyRequestErrors(formValidation.hasError);
         }
     };
 
@@ -574,28 +581,32 @@ class AmountPrice extends React.Component {
                             amount={amount}
                             acceptDesignComponent={
                                 showCallToAction ? (
-                                    <AcceptDesignComponent
-                                        termsAndConditionsLink={termsAndConditionsLink}
-                                        displayAcceptDesign={displayAcceptDesign}
-                                        handleChangeCheckboxApproval={this.handleChange}
-                                        approval={approval}
-                                        closeProductOverviewDialog={this.handleClose}
-                                        notice={notice}
-                                        noteLabel={t('amountPrice.notice')}
-                                        handleChange={this.handleBasketNoticeChange}
-                                    />
+                                    <div ref={this.acceptDesignRef}>
+                                        <AcceptDesignComponent
+                                            termsAndConditionsLink={termsAndConditionsLink}
+                                            displayAcceptDesign={displayAcceptDesign}
+                                            handleChangeCheckboxApproval={this.handleChange}
+                                            approval={approval}
+                                            closeProductOverviewDialog={this.handleClose}
+                                            notice={notice}
+                                            noteLabel={t('amountPrice.notice')}
+                                            handleChange={this.handleBasketNoticeChange}
+                                        />
+                                    </div>
                                 ) : null
                             }
                             acceptDataPrivacyComponent={
                                 showReceiveOfferForm && dataPrivacyLink ? (
-                                    <AcceptPrivacyComponent
-                                        dataPrivacyLink={dataPrivacyLink}
-                                        displayAcceptDesign={true}
-                                        handleChangeCheckboxApproval={this.handleChange}
-                                        approval={dataPrivacyAccepted}
-                                        closeProductOverviewDialog={this.handleClose}
-                                        displayNote={false}
-                                    />
+                                    <div ref={this.acceptDataPrivacyRef}>
+                                        <AcceptPrivacyComponent
+                                            dataPrivacyLink={dataPrivacyLink}
+                                            displayAcceptDesign={true}
+                                            handleChangeCheckboxApproval={this.handleChange}
+                                            approval={dataPrivacyAccepted}
+                                            closeProductOverviewDialog={this.handleClose}
+                                            displayNote={false}
+                                        />
+                                    </div>
                                 ) : null
                             }
                             notificationComponent={mergedNotifications.map(