@configuratorware/configurator-frontendgui 1.27.3-beta.1 → 1.27.3-beta.5

package/App/Services/ConfiguratorService.js

@@ -0,0 +1,1122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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"));
+
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+var _difference = _interopRequireDefault(require("lodash/difference"));
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _AbstractConfiguratorService = _interopRequireDefault(require("../../Framework/Services/AbstractConfiguratorService"));
+
+var configuratorActions = _interopRequireWildcard(require("../Reducers/Configurator/Actions"));
+
+var _Selectors = require("../Reducers/Configurator/Selectors");
+
+var _Selectors2 = require("../Reducers/DesignArea/Selectors");
+
+var _Actions2 = require("../Reducers/UI/Actions");
+
+var _Selectors3 = require("../Reducers/Fonts/Selectors");
+
+var _ServiceLocator = require("../ServiceLocator");
+
+var _configuration2 = require("../configuration");
+
+var _Reducer = require("../Reducers/DesignData/Reducer");
+
+var _cached = require("../../Utils/Function/cached");
+
+var _getFirstDataURLFromScreenshotsObj = require("../Modules/Visualization/Utils/getFirstDataURLFromScreenshotsObj");
+
+var _Selectors4 = require("../Reducers/DesignData/Selectors");
+
+var _createMessageInterface = _interopRequireDefault(require("../Utils/createMessageInterface"));
+
+var _excluded = ["code"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+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; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } 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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var getSelectedAmountsBySizes = function getSelectedAmountsBySizes(item, selectedAmounts) {
+  var itemGroupMap = function itemGroupMap(rootItem, fn) {
+    var data = [];
+
+    if ((0, _get["default"])(rootItem, 'itemGroup.children.length', 0) > 0) {
+      var _iterator = _createForOfIteratorHelper(rootItem.itemGroup.children),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _item = _step.value;
+          var mappedData = fn(_item, data);
+          mappedData && data.push(mappedData);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+
+    return data;
+  };
+
+  return itemGroupMap(item, function (colorGroupItem) {
+    return {
+      identifier: colorGroupItem.identifier,
+      amount: (0, _get["default"])(selectedAmounts, colorGroupItem.identifier, 0),
+      sizes: itemGroupMap(colorGroupItem, function (sizeGroupItem) {
+        return {
+          amount: (0, _get["default"])(selectedAmounts, sizeGroupItem.identifier, 0),
+          identifier: sizeGroupItem.identifier
+        };
+      })
+    };
+  });
+};
+
+var ConfiguratorService = /*#__PURE__*/function (_AbstractConfigurator) {
+  _inherits(ConfiguratorService, _AbstractConfigurator);
+
+  var _super = _createSuper(ConfiguratorService);
+
+  function ConfiguratorService() {
+    var _this;
+
+    _classCallCheck(this, ConfiguratorService);
+
+    _this = _super.call(this);
+
+    _ServiceLocator.Services.store.observeStore(function (state) {
+      return state.configurator.configuration;
+    }, function () {
+      // since it's debounced, the prevConfiguration should be the configuration from the latest call
+      var prevConfiguration = {};
+      return (0, _debounce["default"])(function (configuration) {
+        _this.onConfigurationChange(configuration, prevConfiguration);
+
+        prevConfiguration = configuration;
+      }, 300);
+    }());
+
+    return _this;
+  }
+
+  _createClass(ConfiguratorService, [{
+    key: "init",
+    value: function init() {
+      var adminMode = (0, _configuration2.getConf)('adminMode');
+
+      if (!adminMode) {
+        var messageInterface = (0, _createMessageInterface["default"])();
+        messageInterface.addListener('switch_options', /*#__PURE__*/function () {
+          var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(event) {
+            var optionsJSON, optionsToSelect;
+            return regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    optionsJSON = (0, _get["default"])(event, 'data.options');
+
+                    try {
+                      optionsToSelect = JSON.parse(optionsJSON);
+
+                      _ServiceLocator.Services.store.dispatch((0, configuratorActions.selectMultipleOptions)(optionsToSelect));
+                    } catch (e) {
+                      // eslint-disable-next-line no-console
+                      console.error('Wrong JSON provided for switch_options:', optionsJSON);
+                    }
+
+                  case 2:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          }));
+
+          return function (_x) {
+            return _ref.apply(this, arguments);
+          };
+        }());
+      }
+    } // state selector
+
+  }, {
+    key: "state",
+    get: function get() {
+      return _ServiceLocator.Services.store.state.configurator;
+    }
+  }, {
+    key: "initialize",
+    value: function initialize() {
+      var params = {};
+      var basePath = (0, _configuration2.getConf)('routingBasePath', '/');
+      var itemRegex = new RegExp("".concat(basePath, "(code|identifier):([^/]+)"));
+      var results = itemRegex.exec(location.pathname);
+
+      if (results) {
+        params[results[1]] = results[2];
+      }
+
+      if (params.identifier) {
+        this.setLoadIdentifier(params.identifier);
+      } else if (params.code) {
+        this.setLoadCode(params.code);
+      }
+
+      this.loadClientData();
+    }
+  }, {
+    key: "prepareConfigurationForSave",
+    value: function prepareConfigurationForSave() {
+      var overwrite = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var extraData = arguments.length > 1 ? arguments[1] : undefined;
+      var configuration = this.state.configuration;
+
+      var updatedConfiguration = _ServiceLocator.Services.designData.removeAllDesignAreaPlaceholders(configuration); // remove the code by default (to prevent overwriting the current configuration)
+
+
+      var code = updatedConfiguration.code,
+          otherData = _objectWithoutProperties(updatedConfiguration, _excluded); // always remove parentCode from customdata
+
+
+      var customdata = (0, _omit["default"])(updatedConfiguration.customdata || {}, ['parentCode']); // add parentCode only when it's set in the config
+
+      if ((0, _configuration2.getConf)('addParentCodeOnSave')) {
+        customdata.parentCode = code;
+      }
+
+      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, otherData), overwrite ? {
+        code: code
+      } : {}), extraData), {}, {
+        customdata: customdata
+      });
+    }
+  }, {
+    key: "setCalculationAutoResolveEnabled",
+    value: function setCalculationAutoResolveEnabled(enabled) {
+      _ServiceLocator.Services.store.dispatch((0, configuratorActions.setCalculationAutoResolveEnabled)(enabled));
+    }
+  }, {
+    key: "skipNextCalculationAutoResolve",
+    value: function skipNextCalculationAutoResolve() {
+      _ServiceLocator.Services.store.dispatch((0, configuratorActions.skipNextAutoResolve)());
+    }
+  }, {
+    key: "onConfigurationChange",
+    value: function () {
+      var _onConfigurationChange = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(configuration, prevConfiguration) {
+        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!(this.state.calculationIsEnabled && (!configuration.check_results || // no check results
+                configuration.check_results.status) && // or the check result status is ok
+                this.shouldInvalidateCalculation(prevConfiguration, configuration))) {
+                  _context2.next = 11;
+                  break;
+                }
+
+                if (!(0, _Selectors.isCalculationAutoResolveEnabled)(this.state)) {
+                  _context2.next = 9;
+                  break;
+                }
+
+                // disable automatic price updates to take direct control over error handling
+                _ServiceLocator.Services.store.dispatch((0, configuratorActions.setCalculationEnabled)(false)); // triggering the calculation directly to make sure it's synced
+
+
+                _context2.next = 5;
+                return _ServiceLocator.Services.store.dispatch(configuratorActions.doCalculation());
+
+              case 5:
+                _ServiceLocator.Services.store.dispatch((0, configuratorActions.setCalculationEnabled)(true));
+
+                _ServiceLocator.Services.configurator.resolveCalculationErrors();
+
+                _context2.next = 11;
+                break;
+
+              case 9:
+                _ServiceLocator.Services.store.dispatch(configuratorActions.invalidateCalculation());
+
+                _ServiceLocator.Services.store.dispatch(configuratorActions.doCalculation());
+
+              case 11:
+                if (this.shouldUpdateVisualization(prevConfiguration, configuration)) {
+                  _ServiceLocator.Services.visualization.update(configuration);
+                }
+
+              case 12:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function onConfigurationChange(_x2, _x3) {
+        return _onConfigurationChange.apply(this, arguments);
+      }
+
+      return onConfigurationChange;
+    }()
+  }, {
+    key: "shouldInvalidateCalculation",
+    value: function shouldInvalidateCalculation(prevConfiguration, configuration) {
+      return this.isRoughEqual(configuration, prevConfiguration);
+    }
+  }, {
+    key: "shouldUpdateVisualization",
+    value: function shouldUpdateVisualization(prevConfiguration, configuration) {
+      return this.isRoughEqual(configuration, prevConfiguration);
+    }
+  }, {
+    key: "isRoughEqual",
+    value: function isRoughEqual(configuration, prevConfiguration) {
+      // calculation should be invalidated only when one of the relevant properties has changed
+      var pc = this.getRoughConfiguration(prevConfiguration);
+      var cc = this.getRoughConfiguration(configuration);
+      return !(0, _isEqual["default"])(cc, pc);
+    }
+    /**
+     * Returns the configuration core values
+     * Use this method to create a more simple comparable object that represents the same
+     * configuration
+     * @param configuration
+     * @returns {{item: {identifier: *, price: *}, optionclassifications: Array, designdata: {}, customdata: {}}}
+     */
+
+  }, {
+    key: "getRoughConfiguration",
+    value: function getRoughConfiguration(configuration) {
+      var item = configuration.item,
+          optionclassifications = configuration.optionclassifications,
+          designdata = configuration.designdata;
+      var customdata = configuration.customdata && (0, _omit["default"])(configuration.customdata, ['comment']);
+      return {
+        item: item && {
+          identifier: item.identifier,
+          price: item.price
+        },
+        optionclassifications: optionclassifications && (0, _map["default"])(optionclassifications, function (oc) {
+          return {
+            identifier: oc.identifier,
+            selectedoptions: (0, _map["default"])(oc.selectedoptions, function (o) {
+              return {
+                identifier: o.identifier,
+                amount: o.amount,
+                price: o.price
+              };
+            })
+          };
+        }),
+        designdata: designdata && this.getRoughDesignData(designdata),
+        customdata: customdata
+      };
+    }
+    /**
+     * The design data can also invalidate the calculation if any of the relevant properties have changed.
+     * (Eg. an object is added or removed, or a design area related option has changed.)
+     * @param designData
+     * @returns {null|object}
+     */
+
+  }, {
+    key: "getRoughDesignData",
+    value: function getRoughDesignData(designData) {
+      if (!designData) {
+        return null;
+      }
+
+      var designAreas = Object.keys(designData);
+      var roughDesignData = {};
+
+      for (var _i = 0, _designAreas = designAreas; _i < _designAreas.length; _i++) {
+        var designAreaIdentifier = _designAreas[_i];
+        var designAreaData = designData[designAreaIdentifier];
+        var canvasData = designAreaData.canvasData,
+            designProductionMethodIdentifier = designAreaData.designProductionMethodIdentifier,
+            colorAmount = designAreaData.colorAmount;
+        roughDesignData[designAreaIdentifier] = {
+          objectCount: (0, _get["default"])(canvasData, 'objects.length'),
+          designProductionMethodIdentifier: designProductionMethodIdentifier,
+          colorAmount: colorAmount
+        };
+      }
+
+      return roughDesignData;
+    } //// <-- ACTIONS -->
+
+  }, {
+    key: "saveConfiguration",
+    value: function () {
+      var _saveConfiguration = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(configuration, configurationtype) {
+        return regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                return _context3.abrupt("return", _ServiceLocator.Services.store.dispatch(configuratorActions.saveConfiguration(configuration, configurationtype)));
+
+              case 1:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3);
+      }));
+
+      function saveConfiguration(_x4, _x5) {
+        return _saveConfiguration.apply(this, arguments);
+      }
+
+      return saveConfiguration;
+    }()
+  }, {
+    key: "getPreviewImagesForVariants",
+    value: function () {
+      var _getPreviewImagesForVariants = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+        var options,
+            _options$size,
+            size,
+            designData,
+            configurationOptions,
+            cached,
+            memo,
+            designAreas,
+            defaultDesignAreaIdentifier,
+            areasWithDesign,
+            screenshotAreaIdentifier,
+            screenshotArea,
+            usedAreas,
+            firstDesignViewIdentifier,
+            usedViews,
+            variants,
+            screenshots,
+            images,
+            _args4 = arguments;
+
+        return regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                options = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {};
+
+                _ServiceLocator.Services.designData.closeDesignAreaEditor();
+
+                _ServiceLocator.Services.designData.clearDesignAreaSelection();
+
+                _options$size = options.size, size = _options$size === void 0 ? {
+                  width: 100,
+                  height: 100
+                } : _options$size;
+                designData = (0, _Reducer.getDesignData)(this.state);
+                configurationOptions = (0, _Selectors.getConfiguration)(this.state).optionclassifications;
+                cached = (0, _cached.getCached)('variantPreviewImages', designData, configurationOptions);
+
+                if (!cached.validate()) {
+                  _context4.next = 9;
+                  break;
+                }
+
+                return _context4.abrupt("return", cached.getValue());
+
+              case 9:
+                memo = _ServiceLocator.Services.designData.createHighlightMemo(false);
+                designAreas = _ServiceLocator.Services.store.state.designArea.filteredDesignAreas; // use the first area as default if it's not defined through the production methods
+
+                defaultDesignAreaIdentifier = (0, _Selectors2.getDefaultDesignAreaIdentifierFromProductionMethod)(_ServiceLocator.Services.store.state) || (designAreas.length ? designAreas[0].identifier : null);
+                areasWithDesign = designData && Object.keys(designData).filter(function (designAreaIdentifier) {
+                  return (0, _get["default"])(designData[designAreaIdentifier], 'canvasData.objects.length');
+                }); // use the default design area, or the first that contains a design
+
+                screenshotAreaIdentifier = areasWithDesign && (areasWithDesign.indexOf(defaultDesignAreaIdentifier) !== -1 ? defaultDesignAreaIdentifier : areasWithDesign[0]) || defaultDesignAreaIdentifier;
+                screenshotArea = (0, _find["default"])(designAreas, {
+                  identifier: screenshotAreaIdentifier
+                });
+                usedAreas = screenshotAreaIdentifier && [screenshotAreaIdentifier];
+                firstDesignViewIdentifier = (0, _get["default"])(_ServiceLocator.Services.store.state.designView, 'designViews[0].identifier');
+                usedViews = [screenshotArea ? screenshotArea.designView.identifier : firstDesignViewIdentifier];
+                variants = (0, _Selectors.getChildren)(this.state).map(function (_ref2) {
+                  var identifier = _ref2.identifier;
+                  return identifier;
+                });
+
+                if (!variants[0]) {
+                  variants = [(0, _Selectors.getItem)(this.state).identifier];
+                }
+
+                _context4.prev = 20;
+                _context4.next = 23;
+                return _ServiceLocator.Services.visualization.getScreenshots({
+                  areaList: usedAreas,
+                  viewList: usedViews,
+                  variantList: variants,
+                  size: size
+                });
+
+              case 23:
+                screenshots = _context4.sent;
+
+                if (screenshots) {
+                  _context4.next = 26;
+                  break;
+                }
+
+                return _context4.abrupt("return", {});
+
+              case 26:
+                images = {};
+                Object.keys(screenshots).forEach(function (identifier) {
+                  images[variants.length === 1 ? variants[0] : identifier] = (0, _getFirstDataURLFromScreenshotsObj.getFirstDataURLFromScreenshotsObj)(screenshots[identifier]);
+                });
+                cached.setValue(images);
+                return _context4.abrupt("return", images);
+
+              case 32:
+                _context4.prev = 32;
+                _context4.t0 = _context4["catch"](20);
+                // eslint-disable-next-line no-console
+                console.error('Error occurred while generating preview images:', _context4.t0);
+
+              case 35:
+                _context4.prev = 35;
+                memo.restore();
+                return _context4.finish(35);
+
+              case 38:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4, this, [[20, 32, 35, 38]]);
+      }));
+
+      function getPreviewImagesForVariants() {
+        return _getPreviewImagesForVariants.apply(this, arguments);
+      }
+
+      return getPreviewImagesForVariants;
+    }()
+  }, {
+    key: "togglePlaceholders",
+    value: function togglePlaceholders(show) {
+      var _this2 = this;
+
+      var canvases = _ServiceLocator.Services.designData.getDesignAreaCanvases();
+
+      canvases.forEach(function (_ref3) {
+        var canvas = _ref3.canvas;
+
+        var _iterator2 = _createForOfIteratorHelper(canvas.objects),
+            _step2;
+
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var obj = _step2.value;
+
+            if ((0, _Selectors4.isPlaceholderObject)(obj)) {
+              obj.wrappedObject.visible = show;
+            }
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      });
+      return function () {
+        return _this2.togglePlaceholders(true);
+      };
+    }
+  }, {
+    key: "createMediaDataForConfiguration",
+    value: function () {
+      var _createMediaDataForConfiguration = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(configuration) {
+        var mediaData, restorePlaceholderVisibility, memo, fontMapping, svgs, fullSvgs, usedAreas, designArea, filteredDesignAreas, usedViews, item, selectedAmounts, selectedVariants, selectedVariant, designViewList, screenshots, _iterator4, _step4, variant, variantImages, _keys, orderedImages, index, key;
+
+        return regeneratorRuntime.wrap(function _callee5$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                mediaData = {};
+                restorePlaceholderVisibility = this.togglePlaceholders(false);
+                memo = _ServiceLocator.Services.designData.createHighlightMemo(false);
+                fontMapping = (0, _Selectors3.getFontMapping)(_ServiceLocator.Services.store.state);
+                _context5.next = 6;
+                return _ServiceLocator.Services.designData.getScreenshotsOfElements(fontMapping);
+
+              case 6:
+                svgs = _context5.sent;
+                mediaData.designDataSnapshots = svgs;
+                _context5.next = 10;
+                return _ServiceLocator.Services.designData.getScreenshots(fontMapping);
+
+              case 10:
+                fullSvgs = _context5.sent;
+                mediaData.printDesignData = fullSvgs;
+                usedAreas = Object.keys(fullSvgs);
+                designArea = _ServiceLocator.Services.store.state.designArea;
+                filteredDesignAreas = designArea.filteredDesignAreas;
+                usedViews = (0, _Selectors2.getCameraViewListForDesignAreaList)(filteredDesignAreas, usedAreas);
+                item = (0, _Selectors.getItem)(this.state);
+                selectedAmounts = (0, _Selectors.getSelectedAmounts)(this.state);
+                selectedVariants = getSelectedAmountsBySizes(item, selectedAmounts).filter(function (item) {
+                  if (item.sizes.length > 0) {
+                    var _iterator3 = _createForOfIteratorHelper(item.sizes),
+                        _step3;
+
+                    try {
+                      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+                        var size = _step3.value;
+
+                        if (size.amount > 0) {
+                          return true;
+                        }
+                      }
+                    } catch (err) {
+                      _iterator3.e(err);
+                    } finally {
+                      _iterator3.f();
+                    }
+                  } else {
+                    if (item.amount > 0) {
+                      return true;
+                    }
+                  }
+
+                  return false;
+                }).map(function (item) {
+                  return item.identifier;
+                });
+                selectedVariant = (0, _Selectors.getSelectedVariantIdentifier)(this.state);
+
+                if (selectedVariants.length === 0) {
+                  selectedVariants.push(selectedVariant);
+                }
+
+                designViewList = (0, _Selectors2.getDesignViewListForDesignAreas)(_ServiceLocator.Services.store.state);
+                mediaData.screenshots = {};
+                _context5.prev = 23;
+                _context5.next = 26;
+                return _ServiceLocator.Services.visualization.getScreenshots({
+                  areaList: usedAreas,
+                  // used in 2D visualization
+                  viewList: usedViews,
+                  // used in 3D visualization
+                  variantList: selectedVariants,
+                  designViewList: designViewList // used in 2D visualization
+
+                });
+
+              case 26:
+                screenshots = _context5.sent;
+
+                if (screenshots) {
+                  // make sure the order is kept on the server side
+                  _iterator4 = _createForOfIteratorHelper(selectedVariants);
+
+                  try {
+                    for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+                      variant = _step4.value;
+                      variantImages = screenshots[variant];
+
+                      if (variantImages) {
+                        _keys = Object.keys(variantImages);
+                        orderedImages = {};
+
+                        for (index = 0; index < _keys.length; index++) {
+                          key = _keys[index];
+                          orderedImages[index + key] = variantImages[key];
+                        }
+
+                        screenshots[variant] = orderedImages;
+                      }
+                    }
+                  } catch (err) {
+                    _iterator4.e(err);
+                  } finally {
+                    _iterator4.f();
+                  }
+                }
+
+                mediaData.screenshots = screenshots;
+                _context5.next = 34;
+                break;
+
+              case 31:
+                _context5.prev = 31;
+                _context5.t0 = _context5["catch"](23);
+                // do not save in case of an error while generating screenshots
+                // eslint-disable-next-line no-console
+                console.error('Error occurred while generating screenshots:', _context5.t0);
+
+              case 34:
+                memo.restore();
+
+                if (_typeof(configuration) === 'object') {
+                  Object.assign(configuration, mediaData);
+                }
+
+                restorePlaceholderVisibility();
+                return _context5.abrupt("return", mediaData);
+
+              case 38:
+              case "end":
+                return _context5.stop();
+            }
+          }
+        }, _callee5, this, [[23, 31]]);
+      }));
+
+      function createMediaDataForConfiguration(_x6) {
+        return _createMediaDataForConfiguration.apply(this, arguments);
+      }
+
+      return createMediaDataForConfiguration;
+    }()
+  }, {
+    key: "captureAndSaveConfiguration",
+    value: function () {
+      var _captureAndSaveConfiguration = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(saveType) {
+        var extraData,
+            configuration,
+            _args6 = arguments;
+        return regeneratorRuntime.wrap(function _callee6$(_context6) {
+          while (1) {
+            switch (_context6.prev = _context6.next) {
+              case 0:
+                extraData = _args6.length > 1 && _args6[1] !== undefined ? _args6[1] : {};
+                _context6.prev = 1;
+                _context6.next = 4;
+                return this.editNameAsync(saveType);
+
+              case 4:
+                _context6.next = 10;
+                break;
+
+              case 6:
+                _context6.prev = 6;
+                _context6.t0 = _context6["catch"](1);
+                // do not save if the name is not entered / confirmed
+                // eslint-disable-next-line no-console
+                console.error('Custom name editor not confirmed!');
+                return _context6.abrupt("return");
+
+              case 10:
+                configuration = this.prepareConfigurationForSave(false, extraData);
+                _context6.next = 13;
+                return this.createMediaDataForConfiguration(configuration);
+
+              case 13:
+                return _context6.abrupt("return", this.saveConfiguration(configuration, saveType));
+
+              case 14:
+              case "end":
+                return _context6.stop();
+            }
+          }
+        }, _callee6, this, [[1, 6]]);
+      }));
+
+      function captureAndSaveConfiguration(_x7) {
+        return _captureAndSaveConfiguration.apply(this, arguments);
+      }
+
+      return captureAndSaveConfiguration;
+    }()
+  }, {
+    key: "editNameAsync",
+    value: function editNameAsync(saveType) {
+      if ((0, _configuration2.getConf)('editCustomTitleBeforeSave') && (0, _configuration2.getConf)('customTitleSaveTypes').indexOf(saveType) !== -1) {
+        _ServiceLocator.Services.ui.show('customTitleEditor');
+
+        return _ServiceLocator.Services.async.create('customEditorConfirm');
+      }
+    }
+  }, {
+    key: "validateConfiguration",
+    value: function validateConfiguration() {
+      return _ServiceLocator.Services.store.dispatch((0, _Actions2.withGlobalLoader)(configuratorActions.validateConfiguration(this.state.configuration)));
+    }
+  }, {
+    key: "saveAndReloadConfiguration",
+    value: function () {
+      var _saveAndReloadConfiguration = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(saveType) {
+        var tmpConfiguration, _configuration, _this$state, selectedoptionclassification, configuration, loadIdentifier, itemIdentifier;
+
+        return regeneratorRuntime.wrap(function _callee7$(_context7) {
+          while (1) {
+            switch (_context7.prev = _context7.next) {
+              case 0:
+                if (!this.state.configuration.item.identifier) {
+                  _context7.next = 6;
+                  break;
+                }
+
+                tmpConfiguration = (0, _omit["default"])(this.state.configuration, ['code', 'date_created']);
+                _context7.next = 4;
+                return this.saveConfiguration(tmpConfiguration, saveType);
+
+              case 4:
+                _configuration = this.state.configuration;
+                this.setLoadCode(_configuration.code);
+
+              case 6:
+                _this$state = this.state, selectedoptionclassification = _this$state.selectedoptionclassification, configuration = _this$state.configuration, loadIdentifier = _this$state.loadIdentifier;
+                itemIdentifier = configuration.item.identifier || loadIdentifier; // item identifier is required for the following actions
+
+                if (itemIdentifier) {
+                  _context7.next = 10;
+                  break;
+                }
+
+                return _context7.abrupt("return");
+
+              case 10:
+                // reload inspirations
+                if ((0, _configuration2.getConf)('loadInspirations')) {
+                  this.loadInspirations(itemIdentifier);
+                } // reload configuration variants
+
+
+                this.loadConfigurationVariants(itemIdentifier); // the optionlist should be reloaded as well if open
+
+                if (configuration.item.identifier && selectedoptionclassification.identifier) {
+                  this.loadOptions(configuration.item.identifier, selectedoptionclassification.identifier, configuration);
+                }
+
+              case 13:
+              case "end":
+                return _context7.stop();
+            }
+          }
+        }, _callee7, this);
+      }));
+
+      function saveAndReloadConfiguration(_x8) {
+        return _saveAndReloadConfiguration.apply(this, arguments);
+      }
+
+      return saveAndReloadConfiguration;
+    }()
+  }, {
+    key: "setLoadCode",
+    value: function setLoadCode(code) {
+      return _ServiceLocator.Services.store.dispatch(configuratorActions.setLoadCode(code));
+    }
+  }, {
+    key: "setLoadIdentifier",
+    value: function setLoadIdentifier(identifier) {
+      return _ServiceLocator.Services.store.dispatch(configuratorActions.setLoadIdentifier(identifier));
+    }
+  }, {
+    key: "loadInspirations",
+    value: function loadInspirations(itemIdentifier) {
+      return _ServiceLocator.Services.store.dispatch(configuratorActions.fetchInspirations(itemIdentifier));
+    }
+  }, {
+    key: "loadConfigurationVariants",
+    value: function loadConfigurationVariants(itemIdentifier) {
+      return _ServiceLocator.Services.store.dispatch(configuratorActions.fetchConfigurationVariants(itemIdentifier));
+    }
+  }, {
+    key: "loadOptions",
+    value: function loadOptions(itemIdentifier, optionClassificationIdentifier, configuration) {
+      return _ServiceLocator.Services.store.dispatch(configuratorActions.fetchOptions(itemIdentifier, optionClassificationIdentifier, configuration));
+    }
+  }, {
+    key: "loadInitialOptions",
+    value: function loadInitialOptions() {
+      return _ServiceLocator.Services.store.dispatch(configuratorActions.loadInitialOptionclassification(this.state.configuration));
+    }
+  }, {
+    key: "loadInitialConfiguration",
+    value: function loadInitialConfiguration() {
+      return _ServiceLocator.Services.store.dispatch((0, _Actions2.withGlobalLoader)(configuratorActions.fetchInitialConfiguration()));
+    }
+  }, {
+    key: "loadConfigurationForDesignerProductPreview",
+    value: function loadConfigurationForDesignerProductPreview() {
+      return _ServiceLocator.Services.store.dispatch((0, _Actions2.withGlobalLoader)(configuratorActions.fetchConfigurationForDesignerProductPreview()));
+    }
+  }, {
+    key: "loadCodeSnippets",
+    value: function loadCodeSnippets() {
+      var _this3 = this;
+
+      return _ServiceLocator.Services.store.dispatch(configuratorActions.fetchCodesnippets()).then(function (codeSnippets) {
+        return _this3.attachCodeSnippets(codeSnippets);
+      });
+    }
+  }, {
+    key: "loadClientData",
+    value: function loadClientData() {
+      return _ServiceLocator.Services.store.dispatch((0, _Actions2.withGlobalLoader)(configuratorActions.fetchClientData()));
+    }
+  }, {
+    key: "attachCodeSnippets",
+    value: function attachCodeSnippets(codeSnippets) {
+      if (codeSnippets.data.length > 0) {
+        codeSnippets.data.forEach(function (_ref4) {
+          var code = _ref4.code;
+          var fragment = document.createRange().createContextualFragment(code);
+
+          while (fragment.children.length > 0) {
+            document.head.insertBefore(fragment.children[0], document.head.firstElementChild);
+          }
+        });
+        window.dataLayer && _ServiceLocator.Services.analytics.setDataLayer(window.dataLayer);
+      }
+    }
+  }, {
+    key: "setSelectedAmount",
+    value: function setSelectedAmount(identifier, amount) {
+      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) {
+      if (!(0, _Selectors.isSelectedAmountsUpdated)(this.state) && !(0, _Selectors.hasMultipleVariantsSelected)(this.state)) {
+        if (!oldVariant.children && !newVariant.children && !oldVariant.itemGroup && !newVariant.itemGroup) {
+          return _ServiceLocator.Services.store.dispatch(configuratorActions.switchSelectedAmount(oldVariant.identifier, newVariant.identifier));
+        }
+
+        var oldIdentifiers = (0, _Selectors.getDeepestChildIdentifiers)(oldVariant);
+        var newIdentifiers = (0, _Selectors.getDeepestChildIdentifiers)(newVariant);
+        var oldIdentifierKeys = (0, _keys2["default"])(oldIdentifiers);
+        var newIdentifierKeys = (0, _keys2["default"])(newIdentifiers);
+        var sortedOldIdentifierKeys = oldIdentifierKeys.sort(function (a, b) {
+          return a.localeCompare(b, 0, {
+            numeric: false
+          });
+        });
+        var sortedNewIdentifierKeys = newIdentifierKeys.sort(function (a, b) {
+          return a.localeCompare(b, 0, {
+            numeric: false
+          });
+        });
+        var identifierDiffs = (0, _difference["default"])(sortedOldIdentifierKeys, sortedNewIdentifierKeys);
+
+        if (identifierDiffs.length === 0 && (0, _isEqual["default"])(sortedOldIdentifierKeys, sortedNewIdentifierKeys)) {
+          for (var key in oldIdentifiers) {
+            if (!oldIdentifiers.hasOwnProperty(key)) {
+              continue;
+            }
+
+            if (newIdentifiers[key]) {
+              _ServiceLocator.Services.store.dispatch(configuratorActions.switchSelectedAmount(oldIdentifiers[key], newIdentifiers[key]));
+            }
+          }
+        }
+      }
+    }
+  }, {
+    key: "clearBulkNames",
+    value: function clearBulkNames() {
+      return _ServiceLocator.Services.store.dispatch(configuratorActions.clearBulkNames());
+    }
+  }, {
+    key: "saveBulkNames",
+    value: function saveBulkNames(identifier, bulkNamesData) {
+      return _ServiceLocator.Services.store.dispatch(configuratorActions.saveBulkNames(identifier, bulkNamesData));
+    }
+  }, {
+    key: "switchSelectedAmount",
+    value: function switchSelectedAmount(oldIdentifier, newIdentifier) {
+      this.setSelectedVariantIdentifier(newIdentifier);
+      var item = this.state.configuration.item;
+      var oldVariant = (0, _find["default"])(item.itemGroup.children, function (o) {
+        return o.identifier === oldIdentifier;
+      });
+      var newVariant = (0, _find["default"])(item.itemGroup.children, function (o) {
+        return o.identifier === newIdentifier;
+      });
+      var selectedAmounts = (0, _Selectors.getSelectedAmounts)(this.state);
+      var firstSelectedAmountIdentifier = (0, _keys2["default"])(selectedAmounts)[0];
+      var oldSelectedAmountVariant = (0, _find["default"])(item.itemGroup.children, function (o) {
+        if (o.itemGroup) {
+          var children = o.itemGroup.children;
+          return children.find(function (child) {
+            return child.identifier === firstSelectedAmountIdentifier;
+          });
+        } else {
+          return o.identifier === firstSelectedAmountIdentifier;
+        }
+      });
+
+      if (!(0, _configuration2.getConf)('restrictAmountselectionToSelectedVariant', false)) {
+        // Updates selected Amounts from previous selectedVariant amount to new variant
+        this.updateSelectedAmount(oldSelectedAmountVariant, newVariant);
+        return;
+      }
+
+      if (!oldVariant.children && !newVariant.children) {
+        return _ServiceLocator.Services.store.dispatch(configuratorActions.switchSelectedAmount(oldVariant.identifier, newVariant.identifier));
+      }
+
+      var oldIdentifiers = (0, _Selectors.getDeepestChildIdentifiers)(oldVariant);
+      var newIdentifiers = (0, _Selectors.getDeepestChildIdentifiers)(newVariant);
+
+      for (var key in oldIdentifiers) {
+        if (!oldIdentifiers.hasOwnProperty(key)) {
+          continue;
+        }
+
+        if (newIdentifiers[key]) {
+          _ServiceLocator.Services.store.dispatch(configuratorActions.switchSelectedAmount(oldIdentifiers[key], newIdentifiers[key]));
+        }
+      }
+    }
+  }, {
+    key: "setConfigurationComment",
+    value: function setConfigurationComment(comment) {
+      return _ServiceLocator.Services.store.dispatch(configuratorActions.setComment(comment));
+    }
+  }, {
+    key: "setSelectedCalculation",
+    value: function setSelectedCalculation(identifier, value) {
+      return _ServiceLocator.Services.store.dispatch(configuratorActions.setSelectedCalculation(identifier, value));
+    }
+  }, {
+    key: "setSelectedVariantIdentifier",
+    value: function setSelectedVariantIdentifier(identifier) {
+      return _ServiceLocator.Services.store.dispatch(configuratorActions.setSelectedVariantIdentifier(identifier));
+    }
+    /**
+     * A simple method for saving the configuration without any additional design data or screenshot
+     * @param {string} saveType
+     * @param {object} extraData
+     * @returns {Promise}
+     */
+
+  }, {
+    key: "prepareAndSaveConfiguration",
+    value: function prepareAndSaveConfiguration(saveType) {
+      var extraData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var configuration = this.prepareConfigurationForSave(false, extraData);
+      return this.saveConfiguration(configuration, saveType);
+    }
+  }, {
+    key: "addToCartCallback",
+    value: function addToCartCallback(configuration) {
+      // after saving call parent function if existing or send postMessage (depending on the configuration)
+      if (window.parent !== undefined) {
+        var addToCartMethod = (0, _configuration2.getConf)('addToCartMethod');
+
+        if (addToCartMethod === 'postMessage' && window.parent.postMessage !== undefined) {
+          var appConf = (0, _configuration2.getConf)();
+          var targetOrigin = (0, _get["default"])(appConf, 'addToCartPostMessageTargetOrigin', '*');
+          window.parent.postMessage({
+            method: 'addtocart',
+            code: configuration.code
+          }, targetOrigin);
+        } else if (addToCartMethod === 'functionCall' && window.parent.addToCart !== undefined) {
+          window.parent.addToCart(configuration.code);
+        }
+      }
+    }
+  }]);
+
+  return ConfiguratorService;
+}(_AbstractConfiguratorService["default"]);
+
+exports["default"] = ConfiguratorService;