@configuratorware/configurator-frontendgui 1.51.4 → 1.52.0

package/App/Modules/Creator/CreatorScreen.js

@@ -22,7 +22,7 @@ var _FastConfiguration = _interopRequireDefault(require("./Containers/FastConfig
 var _Optiondetail = _interopRequireDefault(require("./Containers/Optiondetail"));
 var _OptionsList = _interopRequireDefault(require("./Containers/OptionsList"));
 var _ProductPartsList = _interopRequireDefault(require("./Containers/ProductPartsList"));
-var _InvalidConfigurationNotice = _interopRequireDefault(require("./Containers/InvalidConfigurationNotice"));
+var _InvalidConfigurationNotice = _interopRequireDefault(require("../../Shared/Containers/InvalidConfigurationNotice"));
 var _FullScreenView = _interopRequireDefault(require("./Components/FullScreenView/FullScreenView"));
 var _Option = _interopRequireDefault(require("./Components/Option"));
 var _excluded = ["renderAmountPrice"];

package/App/Modules/Designer/Components/ImageEditDialog/ImageThumbnail.js

@@ -95,7 +95,7 @@ var ImageThumbnail = /*#__PURE__*/function (_React$Component) {
             case 1:
               svgContent = _context.v;
               this.setState({
-                src: (0, _DesignDataService.applySvgContentOperations)(image.preview, image.operations, svgContent)
+                src: (0, _DesignDataService.applySvgContentOperations)(image.original, image.preview, image.operations, svgContent)
               });
             case 2:
               return _context.a(2);

package/App/Modules/Designer/Containers/DesignAreaControlbox.js

@@ -35,7 +35,6 @@ var mapStateToProps = function mapStateToProps(state) {
     handleChangeProductionMethod: function handleChangeProductionMethod(_ref2) {
       var value = _ref2.target.value;
       _ServiceLocator.Services.designData.setDesignProductionMethod(value);
-      _ServiceLocator.Services.configurator.resolveCalculationErrors();
     }
   };
 };

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

@@ -137,7 +137,7 @@ var ImageEditDialogContainer = exports.ImageEditDialogContainer = /*#__PURE__*/f
             return (0, _DesignDataService.getSvgContent)(previewUrl, true);
           case 1:
             svgContent = _context.v;
-            preview = (0, _DesignDataService.applySvgContentOperations)(image.preview, null, svgContent);
+            preview = (0, _DesignDataService.applySvgContentOperations)(image.original, image.preview, null, svgContent);
             _this.setState({
               originalImagePreview: preview
             });
@@ -425,7 +425,7 @@ var ImageEditDialogContainer = exports.ImageEditDialogContainer = /*#__PURE__*/f
             case 1:
               svgContent = _context6.v;
             case 2:
-              preview = (0, _DesignDataService.applySvgContentOperations)(image.preview, image.displayColorPreview ? image.operations : null, svgContent);
+              preview = (0, _DesignDataService.applySvgContentOperations)(image.original, image.preview, image.displayColorPreview ? image.operations : null, svgContent);
               _context6.n = 4;
               break;
             case 3:

package/App/Modules/Designer/DesignerScreen.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ReactComponent = _interopRequireDefault(require("../../../Shared/PropTypes/ReactComponent"));
 var _Header = _interopRequireDefault(require("../../Shared/Containers/Header"));
+var _InvalidConfigurationNotice = _interopRequireDefault(require("../../Shared/Containers/InvalidConfigurationNotice"));
 var _DesignAreaControlbox = _interopRequireDefault(require("./Containers/DesignAreaControlbox"));
 var _EditDesignButton = _interopRequireDefault(require("./Containers/EditDesignButton"));
 var _CloseGraphicsEditorButton = _interopRequireDefault(require("./Containers/CloseGraphicsEditorButton"));
@@ -57,6 +58,7 @@ function DesignerScreen(props) {
     _renderVisualization = props.renderVisualization,
     renderDesignAreaControlbox = props.renderDesignAreaControlbox,
     renderEditDesignButton = props.renderEditDesignButton,
+    renderInvalidConfigurationNotice = props.renderInvalidConfigurationNotice,
     renderCloseGraphicsEditorButton = props.renderCloseGraphicsEditorButton,
     renderImageEditDialog = props.renderImageEditDialog,
     renderCloseDesignEditor = props.renderCloseDesignEditor,
@@ -127,7 +129,8 @@ function DesignerScreen(props) {
       }, renderProps.width !== 'xs' ? renderAmountPrice(props) : props.activeDesignArea ? renderCloseGraphicsEditorButton(renderProps) : renderAmountPrice(props))))));
     },
     renderLoader: renderLoader,
-    renderLicenseNotice: renderLicenseNotice
+    renderLicenseNotice: renderLicenseNotice,
+    renderInvalidConfigurationNotice: renderInvalidConfigurationNotice
   }));
 }
 // eslint-disable-next-line react/prop-types
@@ -190,6 +193,9 @@ DesignerScreen.defaultProps = {
   },
   renderEditDesignButton: renderEditDesignButton,
   renderDesignAreaControlbox: renderDesignAreaControlbox,
+  renderInvalidConfigurationNotice: function renderInvalidConfigurationNotice() {
+    return /*#__PURE__*/React.createElement(_InvalidConfigurationNotice["default"], null);
+  },
   // Components
   CanvasProvider: _DefaultCanvasProvider.DefaultCanvasProvider,
   CanvasStateProvider: _DefaultCanvasProvider.DefaultCanvasStateProvider,

package/App/Modules/Designer/Layouts/DefaultLayout.js

@@ -145,7 +145,8 @@ var DefaultLayout = function DefaultLayout(_ref3) {
     imageOnly = _ref3.imageOnly,
     renderDesigner = _ref3.renderDesigner,
     showDesigner = _ref3.showDesigner,
-    visualizationOverlayMode = _ref3.visualizationOverlayMode;
+    visualizationOverlayMode = _ref3.visualizationOverlayMode,
+    renderInvalidConfigurationNotice = _ref3.renderInvalidConfigurationNotice;
   return imageOnly ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(classes.root, " ").concat(fallbackMode ? classes.fallbackMode : '')
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -160,7 +161,7 @@ var DefaultLayout = function DefaultLayout(_ref3) {
     classes: classes
   }))), renderLoader()) : /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(classes.root, " ").concat(fallbackMode ? classes.fallbackMode : '')
-  }, renderLicenseNotice(), /*#__PURE__*/_react["default"].createElement("div", {
+  }, renderLicenseNotice(), renderInvalidConfigurationNotice(), /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.header
   }, renderHeader({
     area: 'header',

package/App/Modules/Designer/Utils/Transformers.js

@@ -83,7 +83,7 @@ var prepareImageObjectData = exports.prepareImageObjectData = function prepareIm
             return (0, _DesignDataService.getSvgContent)(url, true);
           case 3:
             svgContent = _context.v;
-            return _context.a(2, (0, _DesignDataService.applySvgContentOperations)(image.preview, displayColorPreview || gallery ? operations ? operations : image.operations : null, svgContent));
+            return _context.a(2, (0, _DesignDataService.applySvgContentOperations)(image.original, image.preview, displayColorPreview || gallery ? operations ? operations : image.operations : null, svgContent));
         }
       }, _callee);
     }));

package/App/Reducers/Configurator/Selectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.visualizationModeCheck = exports.showReceiveOfferForm = exports.showItemIdentifier = exports.showCallToAction = exports.isSelectedAmountsUpdated = exports.isFallbackVisualizationMode = exports.isDesignerProductPreviewMode = exports.isCalculationAutoResolveEnabled = exports.hasMultipleVariantsSelected = exports.getVisualizationSettings = exports.getUserSelectedCalculation = exports.getShareUrl = exports.getSelectedVariantIdentifier = exports.getSelectedAmounts = exports.getItemSettings = exports.getItem = exports.getDeepestChildIdentifiers = exports.getCurrentVisualizationSettings = exports.getConfigurator = exports.getConfigurationSettings = exports.getConfiguration = exports.getClientTexts = exports.getClientHighlightColor = exports.getClient = exports.getChildren = exports.getCallToAction = exports.getCalculation = exports.getBulkNames = exports.findMaxChildrenCount = exports.createCalculationErrorChecker = void 0;
+exports.visualizationModeCheck = exports.showReceiveOfferForm = exports.showItemIdentifier = exports.showCallToAction = exports.isSelectedAmountsUpdated = exports.isFallbackVisualizationMode = exports.isDesignerProductPreviewMode = exports.isCalculationAutoResolveEnabled = exports.hasMultipleVariantsSelected = exports.getVisualizationSettings = exports.getUserSelectedCalculation = exports.getShareUrl = exports.getSelectedVariantIdentifier = exports.getSelectedAmounts = exports.getItemSettings = exports.getItem = exports.getDeepestChildIdentifiers = exports.getCurrentVisualizationSettings = exports.getConfigurator = exports.getConfigurationSettings = exports.getConfiguration = exports.getClientTexts = exports.getClientHighlightColor = exports.getClient = exports.getChildren = exports.getCallToAction = exports.getCalculation = exports.getBulkNames = exports.findMaxChildrenCount = void 0;
 var _get = _interopRequireDefault(require("lodash/get"));
 var _flow = _interopRequireDefault(require("lodash/flow"));
 var _find = _interopRequireDefault(require("lodash/find"));
@@ -129,15 +129,6 @@ var _getDeepestChildIdentifiers = exports.getDeepestChildIdentifiers = function
   }
   return result;
 };
-var createCalculationErrorChecker = exports.createCalculationErrorChecker = function createCalculationErrorChecker(configuratorState) {
-  var calculation = getCalculation(configuratorState);
-  var errorCode = (0, _get["default"])(calculation, 'code');
-  return {
-    isMinOrderAmountError: function isMinOrderAmountError() {
-      return errorCode === 'minimum_order_amount_error';
-    }
-  };
-};
 var getClientHighlightColor = exports.getClientHighlightColor = function getClientHighlightColor(state) {
   return (0, _get["default"])(getClient(getConfigurator(state)), 'theme.highlightColor');
 };

package/App/Screens/Configurator/Containers/CalculationWidget.js

@@ -172,7 +172,6 @@ var mapStateToProps = function mapStateToProps(state) {
     colorAmountList: colorAmountList,
     designProductionMethods: designProductionMethods,
     amountValue: amountProps.amount,
-    amountError: (0, _Selectors3.createCalculationErrorChecker)(state.configurator).isMinOrderAmountError(),
     designAreas: designAreas,
     currentDesignProductionMethod: designProductionMethod,
     colorAmounts: colorAmounts,

package/App/Services/ConfiguratorService.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _get = _interopRequireDefault(require("lodash/get"));
-var _has = _interopRequireDefault(require("lodash/has"));
 var _find = _interopRequireDefault(require("lodash/find"));
 var _map = _interopRequireDefault(require("lodash/map"));
 var _keys2 = _interopRequireDefault(require("lodash/keys"));
@@ -259,7 +258,6 @@ var ConfiguratorService = exports["default"] = /*#__PURE__*/function (_AbstractC
               return _ServiceLocator.Services.store.dispatch(configuratorActions.doCalculation());
             case 1:
               _ServiceLocator.Services.store.dispatch((0, _Actions.setCalculationEnabled)(true));
-              _ServiceLocator.Services.configurator.resolveCalculationErrors();
               _context3.n = 3;
               break;
             case 2:
@@ -798,35 +796,6 @@ var ConfiguratorService = exports["default"] = /*#__PURE__*/function (_AbstractC
       var isUpdatedByUser = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       return _ServiceLocator.Services.store.dispatch(configuratorActions.setSelectedAmount(identifier || (0, _Selectors.getSelectedVariantIdentifier)(this.state) || this.state.configuration.item.identifier, amount, isUpdatedByUser));
     }
-  }, {
-    key: "resolveCalculationErrors",
-    value: function resolveCalculationErrors() {
-      var configuratorstate = _ServiceLocator.Services.store.state.configurator;
-      var configurationItem = (0, _get["default"])(configuratorstate, 'configuration.item', {});
-      if ((0, _Selectors.createCalculationErrorChecker)(configuratorstate).isMinOrderAmountError()) {
-        var calculation = (0, _Selectors.getCalculation)(configuratorstate);
-        calculation.errors.forEach(function (error) {
-          var variant = '';
-          var amount = 0;
-          if (error.itemIdentifier === configurationItem.parentItemIdentifier) {
-            var selectedAmounts = (0, _Selectors.getSelectedAmounts)(configuratorstate);
-            if ((0, _keys2["default"])(selectedAmounts).length > 1) {
-              variant = configuratorstate.selectedVariantIdentifier;
-              var selectedVariantAmount = (0, _has["default"])(selectedAmounts, configuratorstate.selectedVariantIdentifier) ? selectedAmounts[configuratorstate.selectedVariantIdentifier] : 0;
-              amount = error.minimumAmount - error.selectedAmount + selectedVariantAmount;
-            } else {
-              variant = configuratorstate.selectedVariantIdentifier;
-              amount = error.minimumAmount;
-            }
-          } else {
-            variant = error.itemIdentifier;
-            amount = error.minimumAmount;
-          }
-          _ServiceLocator.Services.store.dispatch(configuratorActions.setSelectedAmount(variant, amount, false));
-        });
-      }
-      _ServiceLocator.Services.store.dispatch(configuratorActions.setCalculationErrorsResolved());
-    }
   }, {
     key: "updateSelectedAmount",
     value: function updateSelectedAmount(oldVariant, newVariant) {

package/App/Services/DesignDataService.js

@@ -327,27 +327,54 @@ var getSvgContent = exports.getSvgContent = function () {
     }
   };
 }();
-var applySvgContentOperations = exports.applySvgContentOperations = function applySvgContentOperations(preview, operations, svgContent) {
+var applySvgContentOperations = exports.applySvgContentOperations = function applySvgContentOperations(original, preview, operations, svgContent) {
   // add missing attributes to svg tag if needed
   var svgTags = svgContent.match(/<svg[^>]*>/);
   if (svgTags && svgTags[0]) {
     var svgTag = svgTags[0];
     var percentageHeight = /height=["']\d+%["']/;
     var percentageWidth = /width=["']\d+%["']/;
+    var scaleFactor = 2048 / preview.width;
+    if (preview.height > preview.width) {
+      scaleFactor = 2048 / preview.height;
+    }
+    var pixelWidth = Math.round(preview.width * scaleFactor);
+    var pixelHeight = Math.round(preview.height * scaleFactor);
+    var isSvgUpload = original.format.toLowerCase() === 'svg';
     if (svgTag.indexOf('viewBox=') === -1) {
-      svgContent = svgContent.replace('<svg', "<svg viewBox=\"0 0 ".concat(preview.width, " ").concat(preview.height, "\""));
+      if (isSvgUpload) {
+        svgContent = svgContent.replace('<svg', "<svg viewBox=\"0 0 ".concat(pixelWidth, " ").concat(pixelHeight, "\""));
+      } else {
+        svgContent = svgContent.replace('<svg', "<svg viewBox=\"0 0 ".concat(preview.width, " ").concat(preview.height, "\""));
+      }
     }
     if (svgTag.indexOf('height=') === -1) {
-      svgContent = svgContent.replace('<svg', "<svg height=\"".concat(preview.height, "px\""));
+      if (isSvgUpload) {
+        svgContent = svgContent.replace('<svg', "<svg height=\"".concat(pixelHeight, "px\""));
+      } else {
+        svgContent = svgContent.replace('<svg', "<svg height=\"".concat(preview.height, "px\""));
+      }
     }
     if (svgTag.indexOf('width=') === -1) {
-      svgContent = svgContent.replace('<svg', "<svg width=\"".concat(preview.width, "px\""));
+      if (isSvgUpload) {
+        svgContent = svgContent.replace('<svg', "<svg width=\"".concat(pixelWidth, "px\""));
+      } else {
+        svgContent = svgContent.replace('<svg', "<svg width=\"".concat(preview.width, "px\""));
+      }
     }
     if (percentageHeight.test(svgTag)) {
-      svgContent = svgContent.replace(percentageHeight, "height=\"".concat(preview.height, "px\""));
+      if (isSvgUpload) {
+        svgContent = svgContent.replace(percentageHeight, "height=\"".concat(pixelHeight, "px\""));
+      } else {
+        svgContent = svgContent.replace(percentageHeight, "height=\"".concat(preview.height, "px\""));
+      }
     }
     if (percentageWidth.test(svgTag)) {
-      svgContent = svgContent.replace(percentageWidth, "width=\"".concat(preview.width, "px\""));
+      if (isSvgUpload) {
+        svgContent = svgContent.replace(percentageWidth, "width=\"".concat(pixelWidth, "px\""));
+      } else {
+        svgContent = svgContent.replace(percentageWidth, "width=\"".concat(preview.width, "px\""));
+      }
     }
   }
 

package/App/{Modules/Creator → Shared}/Components/InvalidConfigurationNotice/index.js

@@ -11,13 +11,13 @@ var _styles = require("@material-ui/core/styles");
 var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
 var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-var _MainButton = _interopRequireDefault(require("../../../../../Shared/Components/MainButton"));
+var _MainButton = _interopRequireDefault(require("../../../../Shared/Components/MainButton"));
 var _List = _interopRequireDefault(require("@material-ui/core/List"));
 var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
 var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
 var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));
-var _i18n = require("../../../../../Framework/i18n");
-var _CustomDialog = _interopRequireDefault(require("../../../../../Shared/Components/CustomDialog"));
+var _i18n = require("../../../../Framework/i18n");
+var _CustomDialog = _interopRequireDefault(require("../../../../Shared/Components/CustomDialog"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }

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

@@ -211,7 +211,6 @@ var mapDispatchToProps = function mapDispatchToProps() {
       return _ServiceLocator.Services.configurator.setSelectedCalculation(identifier, value);
     },
     onClose: function onClose() {
-      _ServiceLocator.Services.configurator.resolveCalculationErrors();
       _ServiceLocator.Services.visualization.abortScreenshotting();
     },
     onChangeAmount: function onChangeAmount(amount) {

package/App/{Modules/Creator → Shared}/Containers/InvalidConfigurationNotice/index.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _ComponentContainer = _interopRequireDefault(require("../../../../../Framework/ComponentContainer"));
+var _ComponentContainer = _interopRequireDefault(require("../../../../Framework/ComponentContainer"));
 var _InvalidConfigurationNotice = _interopRequireDefault(require("../../Components/InvalidConfigurationNotice"));
-var _Actions = require("../../../../Reducers/UI/Actions");
-var _Selectors = require("../../../../Reducers/Configurator/Selectors");
-var _cached = require("../../../../../Utils/Function/cached");
-var _configuration = require("../../../../configuration");
+var _Actions = require("../../../Reducers/UI/Actions");
+var _Selectors = require("../../../Reducers/Configurator/Selectors");
+var _cached = require("../../../../Utils/Function/cached");
+var _configuration = require("../../../configuration");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -28,6 +28,25 @@ var getValidationErrors = function getValidationErrors(configuratorState) {
   var _getConfiguration = (0, _Selectors.getConfiguration)(configuratorState),
     optionclassifications = _getConfiguration.optionclassifications;
   return (0, _cached.getCached)('getValidationErrors', validation, optionclassifications && optionclassifications.length).use(function () {
+    if (validation.code && validation.code === 'minimum_order_amount_error') {
+      var _errors = [];
+      var itemTitle = '';
+      validation.errors.forEach(function (error, index) {
+        itemTitle = error.itemTitle;
+        _errors.push({
+          message: 'minimumOrderAmountError',
+          key: index,
+          amounts: {
+            minAmount: error.minimumAmount,
+            selectedAmount: error.selectedAmount
+          }
+        });
+      });
+      return [{
+        title: itemTitle,
+        errors: _errors
+      }];
+    }
     var errors = (validation === null || validation === void 0 ? void 0 : validation.validationErrors) || (validation === null || validation === void 0 ? void 0 : validation.errors) || {};
     return !optionclassifications ? [] : Object.entries(errors).map(function (_ref) {
       var _optionclassification;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.51.4",
+  "version": "1.52.0",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.51.4",
+    "@configuratorware/scripts": "1.52.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -36,8 +36,8 @@
     "react-router-dom": "^5.3.4",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.51.4",
-    "redhotmagma-visualization": "1.51.4",
+    "redhotmagma-graphics-editor": "1.52.0",
+    "redhotmagma-visualization": "1.52.0",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/public/translations/de_DE.json

@@ -39,7 +39,7 @@
     "amount": "Menge",
     "minimumAmountError": "Die Mindestbestellmenge von %{minimumAmount} für %{itemTitle} ist nicht erreicht. Gewählte Menge: %{selectedAmount}.",
     "showPriceList": "Preisliste anzeigen",
-    "bulkSavings": "%{itemTitle}: Bestelle noch %{savingsBulkAmount} mehr und spare %{savingAmount} %."
+    "bulkSavings": "%{itemTitle}: Bestelle noch %{savingsBulkAmount} mehr und spare %{savingAmount} % auf den Basispreis des Produktes."
   },
   "amountSelection": {
     "total": "Gesamt: ",
@@ -391,7 +391,8 @@
     "errorTypes": {
       "no_selected_option_in_mandatory_component": "In dieser Komponente muss eine Option gewählt sein. ",
       "selected_option_no_longer_available": "Gewählte Option(en) in dieser Komponente sind nicht mehr verfügbar. ",
-      "minamount_not_met": "Die Mindestmenge an Optionen für diese Komponente ist %{minimumAmount} (%{selectedAmount} gewählt). "
+      "minamount_not_met": "Die Mindestmenge an Optionen für diese Komponente ist %{minimumAmount} (%{selectedAmount} gewählt). ",
+      "minimumOrderAmountError": "Die Mindestbestellmenge für den Artikel beträgt %{minimumAmount} (%{selectedAmount} gewählt). "
     }
   },
   "common": {

package/public/translations/en_GB.json

@@ -39,7 +39,7 @@
     "MainCallToActionLabel": "request a quote",
     "minimumAmountError": "The minimum order amount of %{minimumAmount} for %{itemTitle} is not reached. Selected amount: %{selectedAmount}.",
     "showPriceList": "Show price list",
-    "bulkSavings": "%{itemTitle}: Order %{savingsBulkAmount} more to save %{savingAmount} %."
+    "bulkSavings": "%{itemTitle}: Order %{savingsBulkAmount} more to save %{savingAmount} % on the articles base price."
   },
   "amountSelection": {
     "total": "Total: %{value} amount",
@@ -391,7 +391,8 @@
     "errorTypes": {
       "no_selected_option_in_mandatory_component": "In this component an option has to be selected. ",
       "selected_option_no_longer_available": "Selected option(s) in this component are not available anymore. ",
-      "minamount_not_met": "The minimum amount for options in this component is %{minimumAmount} (%{selectedAmount} selected). "
+      "minamount_not_met": "The minimum amount for options in this component is %{minimumAmount} (%{selectedAmount} selected). ",
+      "minimumOrderAmountError": "The minimum order amount for the article is %{minimumAmount} (%{selectedAmount} selected). "
     }
   },
   "common": {

package/src/App/Modules/Creator/CreatorScreen.js

@@ -18,7 +18,7 @@ import FastConfigurationContainer from './Containers/FastConfiguration';
 import OptionDetailContainer from './Containers/Optiondetail';
 import OptionsListContainer from './Containers/OptionsList';
 import ProductPartsListContainer from './Containers/ProductPartsList';
-import InvalidConfigurationNotice from './Containers/InvalidConfigurationNotice';
+import InvalidConfigurationNotice from 'App/Shared/Containers/InvalidConfigurationNotice';
 import FullScreenView from './Components/FullScreenView/FullScreenView';
 
 import Option from './Components/Option';

package/src/App/Modules/Designer/Components/ImageEditDialog/ImageThumbnail.js

@@ -64,7 +64,7 @@ class ImageThumbnail extends React.Component {
         const svgContent = await getSvgContent(getPreviewUrlFromImageData(image.preview), true);
 
         this.setState({
-            src: applySvgContentOperations(image.preview, image.operations, svgContent),
+            src: applySvgContentOperations(image.original, image.preview, image.operations, svgContent),
         });
     }
 

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

@@ -31,7 +31,6 @@ const mapStateToProps = state => {
         handleChangeDesignArea: ({ target: { value } }) => Services.designData.selectDesignArea(value),
         handleChangeProductionMethod: ({ target: { value } }) => {
             Services.designData.setDesignProductionMethod(value);
-            Services.configurator.resolveCalculationErrors();
         },
     };
 };

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

@@ -323,7 +323,7 @@ export class ImageEditDialogContainer extends React.Component {
         const isSvg = previewUrl && /\.svg$/.test(previewUrl);
         if (isSvg) {
             const svgContent = await getSvgContent(previewUrl, true);
-            const preview = applySvgContentOperations(image.preview, null, svgContent);
+            const preview = applySvgContentOperations(image.original, image.preview, null, svgContent);
 
             this.setState({
                 originalImagePreview: preview,
@@ -537,6 +537,7 @@ export class ImageEditDialogContainer extends React.Component {
                 }
 
                 preview = applySvgContentOperations(
+                    image.original,
                     image.preview,
                     image.displayColorPreview ? image.operations : null,
                     svgContent

package/src/App/Modules/Designer/DesignerScreen.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import ReactComponentType from 'Shared/PropTypes/ReactComponent';
 
 import Header from 'App/Shared/Containers/Header';
+import InvalidConfigurationNotice from 'App/Shared/Containers/InvalidConfigurationNotice';
 import DesignAreaControlbox from './Containers/DesignAreaControlbox';
 import EditDesignButton from './Containers/EditDesignButton';
 import CloseGraphicsEditorButton from './Containers/CloseGraphicsEditorButton';
@@ -53,6 +54,7 @@ export function DesignerScreen(props) {
         renderVisualization,
         renderDesignAreaControlbox,
         renderEditDesignButton,
+        renderInvalidConfigurationNotice,
         renderCloseGraphicsEditorButton,
         renderImageEditDialog,
         renderCloseDesignEditor,
@@ -198,6 +200,7 @@ export function DesignerScreen(props) {
                 )}
                 renderLoader={renderLoader}
                 renderLicenseNotice={renderLicenseNotice}
+                renderInvalidConfigurationNotice={renderInvalidConfigurationNotice}
             />
         </CanvasProvider>
     );
@@ -225,6 +228,7 @@ DesignerScreen.propTypes = {
     renderImageEditDialog: PropTypes.func,
     renderCloseDesignEditor: PropTypes.func,
     renderAddVisualElement: PropTypes.func,
+    renderInvalidConfigurationNotice: PropTypes.func,
 
     // Components
     CanvasProvider: ReactComponentType.isRequired,
@@ -272,6 +276,7 @@ DesignerScreen.defaultProps = {
     renderAddVisualElement: () => <AddVisualElement autoHide />,
     renderEditDesignButton,
     renderDesignAreaControlbox,
+    renderInvalidConfigurationNotice: () => <InvalidConfigurationNotice />,
 
     // Components
     CanvasProvider: DefaultCanvasProvider,

package/src/App/Modules/Designer/Layouts/DefaultLayout.js

@@ -153,6 +153,7 @@ const DefaultLayout = ({
     renderDesigner,
     showDesigner,
     visualizationOverlayMode,
+    renderInvalidConfigurationNotice,
 }) => {
     return imageOnly ? (
         <div className={`${classes.root} ${fallbackMode ? classes.fallbackMode : ''}`}>
@@ -171,6 +172,7 @@ const DefaultLayout = ({
     ) : (
         <div className={`${classes.root} ${fallbackMode ? classes.fallbackMode : ''}`}>
             {renderLicenseNotice()}
+            {renderInvalidConfigurationNotice()}
             <div className={classes.header}>
                 {renderHeader({
                     area: 'header',
@@ -222,6 +224,7 @@ DefaultLayout.propTypes = {
     fallbackMode: PropTypes.bool,
     isPortraitMode: PropTypes.bool,
     imageOnly: PropTypes.bool,
+    renderInvalidConfigurationNotice: PropTypes.func,
 };
 
 export default withStyles(styles, { name: 'DefaultLayout' })(

package/src/App/Modules/Designer/Utils/Transformers.js

@@ -47,6 +47,7 @@ export const prepareImageObjectData = rawObject => {
         const svgContent = await getSvgContent(url, true);
 
         return applySvgContentOperations(
+            image.original,
             image.preview,
             displayColorPreview || gallery ? (operations ? operations : image.operations) : null,
             svgContent

package/src/App/Modules/Designer/Utils/__tests__/Transformers.test.js

@@ -144,6 +144,7 @@ describe('App/Modules/Designer/Utils/Transformers', () => {
         const preparedImageData = prepareImageObjectData(imageObjectData);
         await preparedImageData.transformImageSrc(currentSrc);
         expect(DesignDataHelpers.applySvgContentOperations).toBeCalledWith(
+            imageData.original,
             imageData.preview,
             imageData.operations,
             '<svg></svg>'

package/src/App/Reducers/Configurator/Selectors.js

@@ -106,14 +106,6 @@ export const getDeepestChildIdentifiers = item => {
     return result;
 };
 
-export const createCalculationErrorChecker = configuratorState => {
-    const calculation = getCalculation(configuratorState);
-    const errorCode = get(calculation, 'code');
-    return {
-        isMinOrderAmountError: () => errorCode === 'minimum_order_amount_error',
-    };
-};
-
 export const getClientHighlightColor = state =>
     get(getClient(getConfigurator(state)), 'theme.highlightColor');
 

package/src/App/Reducers/Configurator/__tests__/Selectors.test.js

@@ -1,5 +1,4 @@
 import {
-    createCalculationErrorChecker,
     findMaxChildrenCount,
     getCalculation,
     getClientHighlightColor,
@@ -313,20 +312,6 @@ describe('Reducers/Configurator/Selectors', () => {
             xl: 'demo_hoodie_blue_xl',
         });
     });
-    test('createCalculationErrorChecker.isMinOrderAmountError returns false if there is no error', () => {
-        const configuratorState = {
-            calculation: {},
-        };
-        expect(createCalculationErrorChecker(configuratorState).isMinOrderAmountError()).toBe(false);
-    });
-    test('createCalculationErrorChecker.isMinOrderAmountError returns true if the minimum_order_amount_error is present', () => {
-        const configuratorState = {
-            calculation: {
-                code: 'minimum_order_amount_error',
-            },
-        };
-        expect(createCalculationErrorChecker(configuratorState).isMinOrderAmountError()).toBe(true);
-    });
     test('getItemSettings returns the settings of the configuration item', () => {
         const settings = {
             visualizationCreator: '3d',

package/src/App/Screens/Configurator/Containers/CalculationWidget.js

@@ -16,7 +16,7 @@ import {
     getDefaultDesignAreaIdentifierFromProductionMethod,
 } from 'App/Reducers/DesignArea/Selectors';
 import { createBackgroundWorkStateSelector } from 'App/Reducers/UI/Selectors';
-import { createCalculationErrorChecker, getItem } from 'App/Reducers/Configurator/Selectors';
+import { getItem } from 'App/Reducers/Configurator/Selectors';
 
 import CalculationWidget from '../Components/CalculationWidget';
 import Notification from 'App/Shared/Components/Notification';
@@ -185,7 +185,6 @@ const mapStateToProps = state => {
         colorAmountList: colorAmountList,
         designProductionMethods: designProductionMethods,
         amountValue: amountProps.amount,
-        amountError: createCalculationErrorChecker(state.configurator).isMinOrderAmountError(),
         designAreas: designAreas,
         currentDesignProductionMethod: designProductionMethod,
         colorAmounts: colorAmounts,

package/src/App/Services/ConfiguratorService.js

@@ -1,5 +1,4 @@
 import get from 'lodash/get';
-import has from 'lodash/has';
 import find from 'lodash/find';
 import map from 'lodash/map';
 import keys from 'lodash/keys';
@@ -16,8 +15,6 @@ import {
     isSelectedAmountsUpdated,
     hasMultipleVariantsSelected,
     getDeepestChildIdentifiers,
-    createCalculationErrorChecker,
-    getCalculation,
     isCalculationAutoResolveEnabled,
     getConfiguration,
     getChildren,
@@ -181,7 +178,6 @@ export default class ConfiguratorService extends AbstractConfiguratorService {
                 // triggering the calculation directly to make sure it's synced
                 await Services.store.dispatch(configuratorActions.doCalculation());
                 Services.store.dispatch(setCalculationEnabled(true));
-                Services.configurator.resolveCalculationErrors();
             } else {
                 Services.store.dispatch(configuratorActions.invalidateCalculation());
                 Services.store.dispatch(configuratorActions.doCalculation());
@@ -583,39 +579,6 @@ export default class ConfiguratorService extends AbstractConfiguratorService {
         );
     }
 
-    resolveCalculationErrors() {
-        const configuratorstate = Services.store.state.configurator;
-        const configurationItem = get(configuratorstate, 'configuration.item', {});
-        if (createCalculationErrorChecker(configuratorstate).isMinOrderAmountError()) {
-            const calculation = getCalculation(configuratorstate);
-            calculation.errors.forEach(error => {
-                let variant = '';
-                let amount = 0;
-                if (error.itemIdentifier === configurationItem.parentItemIdentifier) {
-                    const selectedAmounts = getSelectedAmounts(configuratorstate);
-                    if (keys(selectedAmounts).length > 1) {
-                        variant = configuratorstate.selectedVariantIdentifier;
-                        const selectedVariantAmount = has(
-                            selectedAmounts,
-                            configuratorstate.selectedVariantIdentifier
-                        )
-                            ? selectedAmounts[configuratorstate.selectedVariantIdentifier]
-                            : 0;
-                        amount = error.minimumAmount - error.selectedAmount + selectedVariantAmount;
-                    } else {
-                        variant = configuratorstate.selectedVariantIdentifier;
-                        amount = error.minimumAmount;
-                    }
-                } else {
-                    variant = error.itemIdentifier;
-                    amount = error.minimumAmount;
-                }
-                Services.store.dispatch(configuratorActions.setSelectedAmount(variant, amount, false));
-            });
-        }
-        Services.store.dispatch(configuratorActions.setCalculationErrorsResolved());
-    }
-
     updateSelectedAmount(oldVariant, newVariant) {
         if (!isSelectedAmountsUpdated(this.state) && !hasMultipleVariantsSelected(this.state)) {
             if (

package/src/App/Services/DesignDataService.js

@@ -399,7 +399,7 @@ export const getSvgContent = (() => {
     };
 })();
 
-export const applySvgContentOperations = (preview, operations, svgContent) => {
+export const applySvgContentOperations = (original, preview, operations, svgContent) => {
     // add missing attributes to svg tag if needed
     const svgTags = svgContent.match(/<svg[^>]*>/s);
 
@@ -407,25 +407,54 @@ export const applySvgContentOperations = (preview, operations, svgContent) => {
         const svgTag = svgTags[0];
         const percentageHeight = /height=["']\d+%["']/;
         const percentageWidth = /width=["']\d+%["']/;
-
+        let scaleFactor = 2048 / preview.width;
+        if (preview.height > preview.width) {
+            scaleFactor = 2048 / preview.height;
+        }
+        const pixelWidth = Math.round(preview.width * scaleFactor);
+        const pixelHeight = Math.round(preview.height * scaleFactor);
+        const isSvgUpload = original.format.toLowerCase() === 'svg';
         if (svgTag.indexOf('viewBox=') === -1) {
-            svgContent = svgContent.replace('<svg', `<svg viewBox="0 0 ${preview.width} ${preview.height}"`);
+            if (isSvgUpload) {
+                svgContent = svgContent.replace('<svg', `<svg viewBox="0 0 ${pixelWidth} ${pixelHeight}"`);
+            } else {
+                svgContent = svgContent.replace(
+                    '<svg',
+                    `<svg viewBox="0 0 ${preview.width} ${preview.height}"`
+                );
+            }
         }
 
         if (svgTag.indexOf('height=') === -1) {
-            svgContent = svgContent.replace('<svg', `<svg height="${preview.height}px"`);
+            if (isSvgUpload) {
+                svgContent = svgContent.replace('<svg', `<svg height="${pixelHeight}px"`);
+            } else {
+                svgContent = svgContent.replace('<svg', `<svg height="${preview.height}px"`);
+            }
         }
 
         if (svgTag.indexOf('width=') === -1) {
-            svgContent = svgContent.replace('<svg', `<svg width="${preview.width}px"`);
+            if (isSvgUpload) {
+                svgContent = svgContent.replace('<svg', `<svg width="${pixelWidth}px"`);
+            } else {
+                svgContent = svgContent.replace('<svg', `<svg width="${preview.width}px"`);
+            }
         }
 
         if (percentageHeight.test(svgTag)) {
-            svgContent = svgContent.replace(percentageHeight, `height="${preview.height}px"`);
+            if (isSvgUpload) {
+                svgContent = svgContent.replace(percentageHeight, `height="${pixelHeight}px"`);
+            } else {
+                svgContent = svgContent.replace(percentageHeight, `height="${preview.height}px"`);
+            }
         }
 
         if (percentageWidth.test(svgTag)) {
-            svgContent = svgContent.replace(percentageWidth, `width="${preview.width}px"`);
+            if (isSvgUpload) {
+                svgContent = svgContent.replace(percentageWidth, `width="${pixelWidth}px"`);
+            } else {
+                svgContent = svgContent.replace(percentageWidth, `width="${preview.width}px"`);
+            }
         }
     }
 
@@ -439,7 +468,6 @@ export const applySvgContentOperations = (preview, operations, svgContent) => {
         Object.keys(operations.vectorizeColorsMap).length
     ) {
         const colorRegex = new RegExp(`(${Object.keys(operations.vectorizeColorsMap).join('|')})`, 'ig');
-
         svgContent = svgContent.replace(colorRegex, match => {
             const { value } = operations.vectorizeColorsMap[match.toLowerCase()];
 

package/src/App/Services/__tests__/ConfiguratorService.test.js

@@ -197,247 +197,6 @@ describe('Services/ConfiguratorService', () => {
         });
     });
 
-    test('resolveCalculationErrors for minAmount error', () => {
-        class StoreService {
-            static serviceName = 'StoreService';
-
-            observeStore() {}
-
-            get state() {
-                return {
-                    configurator: {
-                        calculation: {
-                            code: 'minimum_order_amount_error',
-                            errors: [
-                                {
-                                    itemIdentifier: 'default_first_variant',
-                                    itemTitle: 'Demo Kugelschreiber Durchsichtig',
-                                    minimumAmount: 300,
-                                    selectedAmount: 50,
-                                },
-                            ],
-                        },
-                        selectedVariantIdentifier: 'default_first_variant',
-                        configuration: {
-                            customdata: {
-                                selectedAmounts: {},
-                            },
-                            item: {
-                                parentItemIdentifier: 'test_identifier',
-                                itemGroup: {
-                                    children: [
-                                        {
-                                            identifier: 'default_first_variant',
-                                        },
-                                        {
-                                            identifier: 'default_second_variant',
-                                        },
-                                    ],
-                                },
-                            },
-                        },
-                    },
-                };
-            }
-
-            dispatch = jest.fn();
-        }
-        const storeSrvc = new StoreService();
-        const configuratorSrv = new ConfiguratorService();
-
-        ServiceLocator.provide(storeSrvc);
-        configuratorSrv.resolveCalculationErrors();
-
-        expect(storeSrvc.dispatch).toBeCalledWith({
-            type: SET_SELECTED_AMOUNT,
-            identifier: 'default_first_variant',
-            isUpdatedByUser: false,
-            amount: 300,
-        });
-    });
-
-    test('resolveCalculationErrors on design_production method change and customdata.selectedAmounts is empty', () => {
-        class StoreService {
-            static serviceName = 'StoreService';
-
-            observeStore() {}
-
-            get state() {
-                return {
-                    configurator: {
-                        calculation: {
-                            code: 'minimum_order_amount_error',
-                            errors: [
-                                {
-                                    itemIdentifier: 'test_identifier',
-                                    itemTitle: 'Demo Kugelschreiber Durchsichtig',
-                                    minimumAmount: 200,
-                                    selectedAmount: 50,
-                                },
-                            ],
-                        },
-                        selectedVariantIdentifier: 'default_first_variant',
-                        configuration: {
-                            customdata: {
-                                selectedAmounts: {},
-                            },
-                            item: {
-                                parentItemIdentifier: 'test_identifier',
-                                itemGroup: {
-                                    children: [
-                                        {
-                                            identifier: 'default_first_variant',
-                                        },
-                                        {
-                                            identifier: 'default_second_variant',
-                                        },
-                                    ],
-                                },
-                            },
-                        },
-                    },
-                };
-            }
-
-            dispatch = jest.fn();
-        }
-        const storeSrvc = new StoreService();
-        const configuratorSrv = new ConfiguratorService();
-
-        ServiceLocator.provide(storeSrvc);
-        configuratorSrv.resolveCalculationErrors();
-
-        expect(storeSrvc.dispatch).toBeCalledWith({
-            type: SET_SELECTED_AMOUNT,
-            identifier: 'default_first_variant',
-            isUpdatedByUser: false,
-            amount: 200,
-        });
-    });
-
-    test('resolveCalculationErrors on design_production method change and customdata.selectedAmounts with 1 selection', () => {
-        class StoreService {
-            static serviceName = 'StoreService';
-
-            observeStore() {}
-
-            get state() {
-                return {
-                    configurator: {
-                        calculation: {
-                            code: 'minimum_order_amount_error',
-                            errors: [
-                                {
-                                    itemIdentifier: 'test_identifier',
-                                    itemTitle: 'Demo Kugelschreiber Durchsichtig',
-                                    minimumAmount: 200,
-                                    selectedAmount: 20,
-                                },
-                            ],
-                        },
-                        selectedVariantIdentifier: 'default_first_variant',
-                        configuration: {
-                            customdata: {
-                                selectedAmounts: {
-                                    default_second_variant: 20,
-                                },
-                            },
-                            item: {
-                                parentItemIdentifier: 'test_identifier',
-                                itemGroup: {
-                                    children: [
-                                        {
-                                            identifier: 'default_first_variant',
-                                        },
-                                        {
-                                            identifier: 'default_second_variant',
-                                        },
-                                    ],
-                                },
-                            },
-                        },
-                    },
-                };
-            }
-
-            dispatch = jest.fn();
-        }
-        const storeSrvc = new StoreService();
-        const configuratorSrv = new ConfiguratorService();
-
-        ServiceLocator.provide(storeSrvc);
-        configuratorSrv.resolveCalculationErrors();
-
-        expect(storeSrvc.dispatch).toBeCalledWith({
-            type: SET_SELECTED_AMOUNT,
-            identifier: 'default_first_variant',
-            isUpdatedByUser: false,
-            amount: 200,
-        });
-    });
-
-    test('resolveCalculationErrors  on design_production method change and customdata.selectedAmounts with 2 selections', () => {
-        class StoreService {
-            static serviceName = 'StoreService';
-
-            observeStore() {}
-
-            get state() {
-                return {
-                    configurator: {
-                        calculation: {
-                            code: 'minimum_order_amount_error',
-                            errors: [
-                                {
-                                    itemIdentifier: 'test_identifier',
-                                    itemTitle: 'Demo Kugelschreiber Durchsichtig',
-                                    minimumAmount: 200,
-                                    selectedAmount: 40,
-                                },
-                            ],
-                        },
-                        selectedVariantIdentifier: 'default_second_variant',
-                        configuration: {
-                            customdata: {
-                                selectedAmounts: {
-                                    default_second_variant: 20,
-                                    default_first_variant: 20,
-                                },
-                            },
-                            item: {
-                                parentItemIdentifier: 'test_identifier',
-                                itemGroup: {
-                                    children: [
-                                        {
-                                            identifier: 'default_first_variant',
-                                        },
-                                        {
-                                            identifier: 'default_second_variant',
-                                        },
-                                    ],
-                                },
-                            },
-                        },
-                    },
-                };
-            }
-
-            dispatch = jest.fn();
-        }
-        const storeSrvc = new StoreService();
-        const configuratorSrv = new ConfiguratorService();
-
-        ServiceLocator.provide(storeSrvc);
-        configuratorSrv.resolveCalculationErrors();
-
-        expect(storeSrvc.dispatch).toBeCalledWith({
-            type: SET_SELECTED_AMOUNT,
-            identifier: 'default_second_variant',
-            isUpdatedByUser: false,
-            amount: 180,
-        });
-    });
-
     test('clearBulkNames dispatches the correct action', () => {
         const configuratorSrvc = new ConfiguratorService();
         const storeSrvc = new StoreService();

package/src/App/Services/__tests__/DesignDataService.test.js

@@ -877,6 +877,9 @@ describe('Services/DesignDataService', () => {
     });
 
     test('applySvgContentOperations returns the correct src', () => {
+        const original = {
+            format: 'SVG',
+        };
         const preview = {
             width: 200,
             height: 100,
@@ -888,9 +891,9 @@ describe('Services/DesignDataService', () => {
             },
         };
 
-        const getResult = (preview, operations, svgContent) =>
+        const getResult = (original, preview, operations, svgContent) =>
             atob(
-                applySvgContentOperations(preview, operations, svgContent).replace(
+                applySvgContentOperations(original, preview, operations, svgContent).replace(
                     /^data:image\/svg\+xml;base64,/,
                     ''
                 )
@@ -898,12 +901,14 @@ describe('Services/DesignDataService', () => {
 
         const svgContentWithoutWidthHeight = '<svg><circle r="10" fill="#ff0000" /></svg>';
         const svgContentWithWidthHeight =
-            '<svg width="200px" height="100px" viewBox="0 0 200 100"><circle r="10" fill="#0000ff" /></svg>';
+            '<svg width="2048px" height="1024px" viewBox="0 0 2048 1024"><circle r="10" fill="#0000ff" /></svg>';
 
-        expect(getResult(preview, operations, svgContentWithoutWidthHeight)).toEqual(
+        expect(getResult(original, preview, operations, svgContentWithoutWidthHeight)).toEqual(
+            svgContentWithWidthHeight
+        );
+        expect(getResult(original, preview, operations, svgContentWithWidthHeight)).toEqual(
             svgContentWithWidthHeight
         );
-        expect(getResult(preview, operations, svgContentWithWidthHeight)).toEqual(svgContentWithWidthHeight);
     });
 
     describe('getSvgColors', () => {

package/src/App/{Modules/Creator → Shared}/Components/InvalidConfigurationNotice/index.js

@@ -12,7 +12,7 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Divider from '@material-ui/core/Divider';
 import { T } from 'Framework/i18n';
-import CustomDialog from '../../../../../Shared/Components/CustomDialog';
+import CustomDialog from '../../../../Shared/Components/CustomDialog';
 
 const useStyles = makeStyles(
     theme => ({
@@ -35,7 +35,6 @@ const InvalidConfigurationNotice = ({ validationErrors, show, close, open, admin
     const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
     const classes = useStyles();
     const initialRender = useRef(true);
-
     useEffect(() => {
         if (adminMode || !initialRender.current) {
             validationErrors.length && open();

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

@@ -210,7 +210,6 @@ const mapDispatchToProps = () => ({
     onSelectableChanged: (identifier, value) =>
         Services.configurator.setSelectedCalculation(identifier, value),
     onClose: () => {
-        Services.configurator.resolveCalculationErrors();
         Services.visualization.abortScreenshotting();
     },
     onChangeAmount: amount => Services.configurator.setSelectedAmount(false, amount),

package/src/App/{Modules/Creator → Shared}/Containers/InvalidConfigurationNotice/index.js

@@ -1,9 +1,10 @@
 import containerConnect from 'Framework/ComponentContainer';
 import InvalidConfigurationNotice from '../../Components/InvalidConfigurationNotice';
 import { setVisible } from 'App/Reducers/UI/Actions';
-import { getConfiguration } from '../../../../Reducers/Configurator/Selectors';
-import { getCached } from '../../../../../Utils/Function/cached';
+import { getConfiguration } from '../../../Reducers/Configurator/Selectors';
+import { getCached } from '../../../../Utils/Function/cached';
 import { getConf } from 'App/configuration';
+
 /**
  * Stores the mapped validation errors in cache to keep the same reference if the source has not changed
  * this makes possible to show up the dialog when it gets new list of errors.
@@ -18,6 +19,28 @@ const getValidationErrors = configuratorState => {
         validation,
         optionclassifications && optionclassifications.length
     ).use(() => {
+        if (validation.code && validation.code === 'minimum_order_amount_error') {
+            let errors = [];
+            let itemTitle = '';
+            validation.errors.forEach((error, index) => {
+                itemTitle = error.itemTitle;
+                errors.push({
+                    message: 'minimumOrderAmountError',
+                    key: index,
+                    amounts: {
+                        minAmount: error.minimumAmount,
+                        selectedAmount: error.selectedAmount,
+                    },
+                });
+            });
+
+            return [
+                {
+                    title: itemTitle,
+                    errors,
+                },
+            ];
+        }
         const errors = validation?.validationErrors || validation?.errors || {};
         return !optionclassifications
             ? []