@configuratorware/configurator-frontendgui 1.40.6 → 1.41.1

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

@@ -73,6 +73,10 @@ var _core = require("@material-ui/core");
 
 var _AcceptPrivacy = _interopRequireDefault(require("../AcceptPrivacy"));
 
+var _ConfigurationOverview = _interopRequireDefault(require("../ConfigurationOverview"));
+
+var _isMobileDevice = require("../../../../Framework/Helpers/isMobileDevice");
+
 var _excluded = ["onTouchMove"],
     _excluded2 = ["wrapperClass", "renderPriceBox"];
 
@@ -281,6 +285,22 @@ var styles = function styles(theme) {
     }), _defineProperty(_closeIcon, '&:hover', {
       cursor: 'pointer'
     }), _closeIcon),
+    configurationButton: {
+      '&:hover': {
+        cursor: 'pointer'
+      },
+      fontWeight: 'bold',
+      textTransform: 'none',
+      padding: '6px 15px',
+      marginRight: '5px'
+    },
+    summary: {
+      display: 'flex',
+      alignItems: 'center',
+      '& svg': {
+        marginRight: 5
+      }
+    },
     dialogTitleRoot: {
       padding: '20px 0'
     }
@@ -341,6 +361,7 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       showPriceOverview: false,
+      showConfigurationOverview: false,
       notice: '',
       hasErrorReceiveOfferForm: false,
       bulkNameErrors: [],
@@ -481,8 +502,41 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
       }, _callee, null, [[0, 6]]);
     })));
 
+    _defineProperty(_assertThisInitialized(_this), "openConfigurationOverview", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              _context2.next = 3;
+              return _this.props.validateConfiguration();
+
+            case 3:
+              _this.setState({
+                showConfigurationOverview: true,
+                hasErrorReceiveOfferForm: false
+              });
+
+              _context2.next = 9;
+              break;
+
+            case 6:
+              _context2.prev = 6;
+              _context2.t0 = _context2["catch"](0);
+              // eslint-disable-next-line no-console
+              console.warn("Error while validating configuration: ".concat(_context2.t0));
+
+            case 9:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 6]]);
+    })));
+
     _defineProperty(_assertThisInitialized(_this), "handleClose", function () {
       _this.setState({
+        showConfigurationOverview: false,
         showPriceOverview: false,
         bulkNameErrors: [],
         approval: {
@@ -495,24 +549,24 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
       _this.props.onClose();
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onReceiveOfferFormPress", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    _defineProperty(_assertThisInitialized(_this), "onReceiveOfferFormPress", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
       var formValidation, result;
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context3.prev = _context3.next) {
             case 0:
               formValidation = _this.receiveOfferFormComponentRef.current.validate();
 
               if (!(!_this.requestHasErrors() && formValidation)) {
-                _context2.next = 9;
+                _context3.next = 9;
                 break;
               }
 
-              _context2.next = 4;
+              _context3.next = 4;
               return _this.props.sendReceiveOfferRequest(formValidation);
 
             case 4:
-              result = _context2.sent;
+              result = _context3.sent;
 
               if (!result) {
                 _this.setState({
@@ -528,7 +582,7 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
                 });
               }
 
-              _context2.next = 10;
+              _context3.next = 10;
               break;
 
             case 9:
@@ -536,10 +590,10 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
 
             case 10:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2);
+      }, _callee3);
     })));
 
     _defineProperty(_assertThisInitialized(_this), "setConfigurationCommentDebounced", (0, _core.debounce)(function (value) {
@@ -596,6 +650,7 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
           showCallToAction = _this$props4.showCallToAction,
           showConfigurationModeSwitch = _this$props4.showConfigurationModeSwitch,
           ConfigurationModeSwitchComponent = _this$props4.ConfigurationModeSwitchComponent;
+      var isMobile = (0, _isMobileDevice.isMobileDevice)();
       var boxStyle = boxed ? classes.card : classes.cardUnboxed;
       return /*#__PURE__*/_react["default"].createElement(_Card["default"], {
         className: (0, _clsx["default"])(boxStyle, (0, _customClassName["default"])('cta-box'))
@@ -608,7 +663,21 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
         classes: {
           root: classes.AmountPriceContent
         }
+      }, !isMobile && /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+        container: true
       }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+        item: true,
+        xs: 12,
+        sm: 12,
+        md: 12,
+        lg: 12,
+        className: classes.summary
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "list_alt"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        className: classes.configurationButton,
+        variant: "text",
+        size: "small",
+        onClick: _this.openConfigurationOverview
+      }, (0, _i18n.t)('amountPrice.configurationOverview')))), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         container: true
       }, !hidePieces && /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
@@ -708,12 +777,65 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
         onShowChange && onShowChange(showPriceOverview);
       }
 
+      var showConfigurationOverview = this.state.showConfigurationOverview;
+
+      if (showConfigurationOverview !== prevState.showConfigurationOverview) {
+        var _onShowChange = this.props.onShowChange;
+        _onShowChange && _onShowChange(showConfigurationOverview);
+      }
+
       if (this.state.notice === prevState.notice && this.props.userComment !== this.state.notice) {
         this.setState({
           notice: this.props.userComment
         });
       }
     }
+  }, {
+    key: "renderConfigurationOverview",
+    value: function renderConfigurationOverview() {
+      var showConfigurationOverview = this.state.showConfigurationOverview;
+      var _this$props6 = this.props,
+          ConfigurationOverviewComponent = _this$props6.ConfigurationOverviewComponent,
+          userConfiguration = _this$props6.userConfiguration,
+          width = _this$props6.width,
+          classes = _this$props6.classes;
+      return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+        "aria-labelledby": "alert-dialog-title",
+        "aria-describedby": "alert-dialog-description",
+        classes: {
+          paper: classes.dialogWrapper,
+          container: width === 'md' || width === 'xs' ? classes.dialogPositioning : '',
+          root: classes.dialogPositioning
+        },
+        BackdropProps: {
+          className: classes.dialogPositioning
+        },
+        onClose: this.handleClose.bind(this),
+        open: showConfigurationOverview,
+        fullWidth: true,
+        fullScreen: width === 'sm' || width === 'xs',
+        scroll: "paper"
+      }, /*#__PURE__*/_react["default"].createElement(_LoadingOverlay["default"], {
+        show: this.props.addToCartPopUpLoader
+      }), /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
+        classes: {
+          root: classes.dialogTitleRoot
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        variant: "body1"
+      }, /*#__PURE__*/_react["default"].createElement("b", null, (0, _i18n.t)('amountPrice.configurationOverview'))), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        className: classes.closeIcon,
+        onClick: this.handleClose.bind(this)
+      }, "close")), /*#__PURE__*/_react["default"].createElement(_RootRef["default"], {
+        rootRef: this.dialogContentRef
+      }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
+        classes: {
+          root: classes.contentPositioning
+        }
+      }, /*#__PURE__*/_react["default"].createElement(ConfigurationOverviewComponent, {
+        optionclassifications: userConfiguration.optionclassifications
+      }))));
+    }
   }, {
     key: "renderPriceOverview",
     value: function renderPriceOverview() {
@@ -727,31 +849,31 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
           showErrors = _this$state.showErrors,
           bulkNameErrors = _this$state.bulkNameErrors,
           dataPrivacyAccepted = _this$state.dataPrivacyAccepted;
-      var _this$props6 = this.props,
-          amount = _this$props6.amount,
-          priceList = _this$props6.priceList,
-          priceFormatted = _this$props6.priceFormatted,
-          onSelectableChanged = _this$props6.onSelectableChanged,
-          showProductVariants = _this$props6.showProductVariants,
-          ProductVariantComponent = _this$props6.ProductVariantComponent,
-          error = _this$props6.error,
-          width = _this$props6.width,
-          hidePrices = _this$props6.hidePrices,
-          title = _this$props6.title,
-          classes = _this$props6.classes,
-          showReceiveOfferForm = _this$props6.showReceiveOfferForm,
-          vatNotice = _this$props6.vatNotice,
-          clientTexts = _this$props6.clientTexts,
-          displayAcceptDesign = _this$props6.displayAcceptDesign,
-          notifications = _this$props6.notifications,
-          showCallToAction = _this$props6.showCallToAction,
-          ReceiveOfferFormComponent = _this$props6.ReceiveOfferFormComponent,
-          AcceptDesignComponent = _this$props6.AcceptDesignComponent,
-          PriceOverviewComponent = _this$props6.PriceOverviewComponent,
-          NotificationComponent = _this$props6.NotificationComponent,
-          PriceListComponent = _this$props6.PriceListComponent,
-          AddToCartComponent = _this$props6.AddToCartComponent,
-          AcceptPrivacyComponent = _this$props6.AcceptPrivacyComponent;
+      var _this$props7 = this.props,
+          amount = _this$props7.amount,
+          priceList = _this$props7.priceList,
+          priceFormatted = _this$props7.priceFormatted,
+          onSelectableChanged = _this$props7.onSelectableChanged,
+          showProductVariants = _this$props7.showProductVariants,
+          ProductVariantComponent = _this$props7.ProductVariantComponent,
+          error = _this$props7.error,
+          width = _this$props7.width,
+          hidePrices = _this$props7.hidePrices,
+          title = _this$props7.title,
+          classes = _this$props7.classes,
+          showReceiveOfferForm = _this$props7.showReceiveOfferForm,
+          vatNotice = _this$props7.vatNotice,
+          clientTexts = _this$props7.clientTexts,
+          displayAcceptDesign = _this$props7.displayAcceptDesign,
+          notifications = _this$props7.notifications,
+          showCallToAction = _this$props7.showCallToAction,
+          ReceiveOfferFormComponent = _this$props7.ReceiveOfferFormComponent,
+          AcceptDesignComponent = _this$props7.AcceptDesignComponent,
+          PriceOverviewComponent = _this$props7.PriceOverviewComponent,
+          NotificationComponent = _this$props7.NotificationComponent,
+          PriceListComponent = _this$props7.PriceListComponent,
+          AddToCartComponent = _this$props7.AddToCartComponent,
+          AcceptPrivacyComponent = _this$props7.AcceptPrivacyComponent;
       var termsAndConditionsLink = clientTexts.termsAndConditionsLink,
           dataPrivacyLink = clientTexts.dataPrivacyLink;
       var mergedNotifications = _toConsumableArray(notifications) || [];
@@ -830,10 +952,10 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
           closeProductOverviewDialog: this.handleClose,
           displayNote: false
         })) : null,
-        notificationComponent: mergedNotifications.map(function (_ref4, key) {
-          var message = _ref4.message,
-              level = _ref4.level,
-              color = _ref4.color;
+        notificationComponent: mergedNotifications.map(function (_ref5, key) {
+          var message = _ref5.message,
+              level = _ref5.level,
+              color = _ref5.color;
           return /*#__PURE__*/_react["default"].createElement(NotificationComponent, {
             key: key,
             icon: level,
@@ -884,20 +1006,24 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props7 = this.props,
-          wrapperClass = _this$props7.wrapperClass,
-          renderPriceBox = _this$props7.renderPriceBox,
-          props = _objectWithoutProperties(_this$props7, _excluded2);
-
-      var showPriceOverview = this.state.showPriceOverview;
+      var _this$props8 = this.props,
+          wrapperClass = _this$props8.wrapperClass,
+          renderPriceBox = _this$props8.renderPriceBox,
+          props = _objectWithoutProperties(_this$props8, _excluded2);
+
+      var _this$state2 = this.state,
+          showPriceOverview = _this$state2.showPriceOverview,
+          showConfigurationOverview = _this$state2.showConfigurationOverview;
       var openPriceOverview = this.openPriceOverview,
+          openConfigurationOverview = this.openConfigurationOverview,
           renderDefaultPriceBox = this.renderDefaultPriceBox;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: wrapperClass
       }, renderPriceBox ? renderPriceBox(_objectSpread(_objectSpread({}, props), {}, {
         openPriceOverview: openPriceOverview,
+        openConfigurationOverview: openConfigurationOverview,
         renderDefaultPriceBox: renderDefaultPriceBox
-      })) : this.renderDefaultPriceBox(), showPriceOverview && this.renderPriceOverview());
+      })) : this.renderDefaultPriceBox(), showPriceOverview && this.renderPriceOverview(), showConfigurationOverview && this.renderConfigurationOverview());
     }
   }]);
 
@@ -940,12 +1066,14 @@ _defineProperty(AmountPrice, "propTypes", {
   ReceiveOfferFormComponent: _propTypes["default"].elementType,
   AcceptDesignComponent: _propTypes["default"].elementType,
   PriceOverviewComponent: _propTypes["default"].elementType,
+  ConfigurationOverviewComponent: _propTypes["default"].elementType,
   NotificationComponent: _propTypes["default"].elementType,
   PriceListComponent: _propTypes["default"].elementType,
   AddToCartComponent: _propTypes["default"].elementType,
   renderPriceBox: _propTypes["default"].func,
   userComment: _propTypes["default"].string,
-  AcceptPrivacyComponent: _propTypes["default"].elementType
+  AcceptPrivacyComponent: _propTypes["default"].elementType,
+  userConfiguration: _propTypes["default"].object
 });
 
 _defineProperty(AmountPrice, "defaultProps", {
@@ -959,6 +1087,7 @@ _defineProperty(AmountPrice, "defaultProps", {
   ReceiveOfferFormComponent: _ReceiveOfferForm["default"],
   AcceptDesignComponent: _AcceptDesign["default"],
   PriceOverviewComponent: _PriceOverview["default"],
+  ConfigurationOverviewComponent: _ConfigurationOverview["default"],
   NotificationComponent: _Notification["default"],
   PriceListComponent: _PriceList["default"],
   AddToCartComponent: _AddToBasket["default"],

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

@@ -0,0 +1,114 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Grid = _interopRequireDefault(require("@material-ui/core/Grid/Grid"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var styles = function styles() {
+  return {
+    li: {
+      listStyle: 'none'
+    },
+    gridWrapper: {
+      padding: '10px 0 25px 0'
+    },
+    title: {
+      fontWeight: 'bold'
+    }
+  };
+};
+
+var ConfigurationOverview = /*#__PURE__*/function (_React$Component) {
+  _inherits(ConfigurationOverview, _React$Component);
+
+  var _super = _createSuper(ConfigurationOverview);
+
+  function ConfigurationOverview() {
+    _classCallCheck(this, ConfigurationOverview);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ConfigurationOverview, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          optionclassifications = _this$props.optionclassifications,
+          classes = _this$props.classes;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.gridWrapper
+      }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+        container: true,
+        spacing: 2
+      }, optionclassifications === null || optionclassifications === void 0 ? void 0 : optionclassifications.map(function (optionclassification) {
+        var _optionclassification;
+
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+          item: true,
+          xs: 6,
+          key: optionclassification.identifier
+        }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+          className: classes.title
+        }, optionclassification.title)), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+          item: true,
+          xs: 6
+        }, (_optionclassification = optionclassification.selectedoptions) === null || _optionclassification === void 0 ? void 0 : _optionclassification.map(function (option) {
+          return /*#__PURE__*/_react["default"].createElement("li", {
+            key: option.identifier,
+            className: classes.li
+          }, option.amount !== 1 ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, option.amount, " x ", option.title) : /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, option.title));
+        })));
+      })));
+    }
+  }]);
+
+  return ConfigurationOverview;
+}(_react["default"].Component);
+
+_defineProperty(ConfigurationOverview, "propTypes", {
+  optionclassifications: _propTypes["default"].array,
+  classes: _propTypes["default"].object
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'ConfigurationOverview'
+})(ConfigurationOverview);
+
+exports["default"] = _default;

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

@@ -244,7 +244,8 @@ var mapStateToProps = function mapStateToProps(_ref) {
   }, createAmountPropsFromState(configurator)), priceProps), {}, {
     clientTexts: (0, _Selectors.getClientTexts)(configurator),
     addToCartPopUpLoader: (0, _Selectors2.getVisibilityMapProperty)(ui, 'addToCartPopUpLoader'),
-    userComment: (0, _get["default"])(configurator, 'configuration.customdata.comment', '')
+    userComment: (0, _get["default"])(configurator, 'configuration.customdata.comment', ''),
+    userConfiguration: (0, _Selectors.getConfiguration)(configurator)
   });
 };
 

package/App/configuration.js

@@ -31,7 +31,7 @@ var DEVELOPMENT_HOST_INT = 'http://int.configuratorware.local'; // eslint-disabl
 var DEVELOPMENT_HOST_LOCAL = 'http://localhost:10030';
 var hostsByNodeEnv = {
   production: '',
-  development: DEVELOPMENT_HOST_INT,
+  development: DEVELOPMENT_HOST_LOCAL,
   test: ''
 };
 var resourceUrlsByNodeEnv = {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.40.6",
+  "version": "1.41.1",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.40.6",
+    "@configuratorware/scripts": "1.41.1",
     "@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.40.6",
-    "redhotmagma-visualization": "1.40.6",
+    "redhotmagma-graphics-editor": "1.41.1",
+    "redhotmagma-visualization": "1.41.1",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/public/translations/de_DE.json

@@ -27,6 +27,7 @@
   },
   "amountPrice": {
     "priceOverview": "Preisübersicht",
+    "configurationOverview": "Meine Konfiguration",
     "productVariants": "Produktvarianten",
     "contactData": "Kontaktdaten",
     "pieces": "Stück",

package/src/App/Modules/Designer/Containers/ImageEditDialog.js

@@ -97,6 +97,7 @@ export class ImageEditDialogContainer extends React.Component {
         open: PropTypes.bool,
         editMode: PropTypes.bool,
         vectorsRequired: PropTypes.bool,
+        vectorizedLogoMandatory: PropTypes.bool,
         colorDisabled: PropTypes.bool,
         loading: PropTypes.bool,
         errorCode: PropTypes.string,
@@ -180,6 +181,7 @@ export class ImageEditDialogContainer extends React.Component {
             isImageCompatible,
             isColorMappingCompatible,
             vectorsRequired,
+            vectorizedLogoMandatory,
         } = this.props;
 
         const { vectorize, vectorizeColorsMap, activeTabIndex, originalImagePreview } = this.state;
@@ -256,13 +258,32 @@ export class ImageEditDialogContainer extends React.Component {
             Object.assign(newState, { vectorizeColorsMap });
         }
 
-        if (activeTabIndex === 2 && vectorsRequired && !vectorize && !image.gallery) {
+        if (
+            activeTabIndex === 2 &&
+            (vectorsRequired || vectorizedLogoMandatory) &&
+            !vectorize &&
+            !image.gallery
+        ) {
             Object.assign(newState, {
                 vectorize: true,
             });
         }
 
-        !isMatch(this.state, newState) && this.handleStateChange(newState);
+        let options;
+        if (
+            activeTabIndex === 2 &&
+            !image.gallery &&
+            vectorizedLogoMandatory &&
+            !image.displayColorPreview &&
+            !this.state.displayColorPreview
+        ) {
+            options = { displayColorPreview: true };
+            Object.assign(newState, {
+                displayColorPreview: true,
+            });
+        }
+
+        (!isMatch(this.state, newState) || options) && this.handleStateChange(newState, options);
 
         if ((justOpened || imageChanged) && !image.incomplete) {
             this.updatePreview(null, { forceFetch: operationsChanged });
@@ -514,10 +535,12 @@ export class ImageEditDialogContainer extends React.Component {
                 if (forceUpdate) {
                     this.previewVersion = Math.random();
                 }
-                preview =
-                    getPreviewUrlFromImageData(previewUrl) +
-                    (this.previewVersion ? `?${this.previewVersion}` : '');
-                originalImagePreview = preview;
+                if (previewUrl) {
+                    preview =
+                        getPreviewUrlFromImageData(previewUrl) +
+                        (this.previewVersion ? `?${this.previewVersion}` : '');
+                    originalImagePreview = preview;
+                }
             }
         }
 
@@ -641,6 +664,7 @@ export class ImageEditDialogContainer extends React.Component {
             maxColorAmount,
             colorDisabled,
             vectorsRequired,
+            vectorizedLogoMandatory,
             image,
             usedColors,
             imageColorsWereEdited,
@@ -680,6 +704,7 @@ export class ImageEditDialogContainer extends React.Component {
             activeTabIndex === 2 &&
             colorCount > 0 &&
             !isGalleryImage &&
+            !vectorizedLogoMandatory &&
             (colorPreviewEnabled || !colorPreviewRequirementFulfilled);
 
         return (
@@ -779,6 +804,7 @@ const mapStateToProps = state => {
     const colorPalettes = getColorPalettes(state);
     const designProductionMethod = getSelectedDesignProductionMethod(state);
     const vectorsRequired = !!get(designProductionMethod, 'options.vectorsRequired');
+    const vectorizedLogoMandatory = !!get(designProductionMethod, 'options.vectorizedLogoMandatory');
     const colorDisabled = isColoringDisabled(state);
     const userImages = getUserImages(imageGallery);
     const hasPlaceHolderImage = hasPlaceHolderImagesForActiveDesignArea(state);
@@ -818,6 +844,7 @@ const mapStateToProps = state => {
         userImages,
         colorPalettes,
         vectorsRequired,
+        vectorizedLogoMandatory,
         colorDisabled,
         uploadSize,
         galleryHasImages,