@configuratorware/configurator-frontendgui 1.31.1 → 1.31.2

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

@@ -71,6 +71,8 @@ var _LoadingOverlay = _interopRequireDefault(require("../../../../Framework/Comp
 
 var _core = require("@material-ui/core");
 
+var _AcceptPrivacy = _interopRequireDefault(require("../AcceptPrivacy"));
+
 var _excluded = ["onTouchMove"],
     _excluded2 = ["wrapperClass", "renderPriceBox"];
 
@@ -346,7 +348,8 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
         error: null
       },
       inView: true,
-      showErrors: false
+      showErrors: false,
+      dataPrivacyAccepted: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "receiveOfferFormComponentRef", /*#__PURE__*/_react["default"].createRef());
@@ -388,6 +391,15 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
           }
         });
       }
+
+      if (!_this.dataPrivacyApproved()) {
+        _this.setState({
+          dataPrivacyAccepted: {
+            value: false,
+            error: true
+          }
+        });
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "requestHasErrors", function () {
@@ -396,7 +408,7 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
           displayAcceptDesign = _this$props2.displayAcceptDesign;
       var designApproved = _this.state.approval.value;
 
-      if (bulkNameErrors && bulkNameErrors.length > 0 || displayAcceptDesign && !designApproved) {
+      if (bulkNameErrors && bulkNameErrors.length > 0 || displayAcceptDesign && !designApproved || !_this.dataPrivacyApproved()) {
         return true;
       }
 
@@ -413,6 +425,15 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "dataPrivacyApproved", function () {
+      var _this$props3 = _this.props,
+          showReceiveOfferForm = _this$props3.showReceiveOfferForm,
+          clientTexts = _this$props3.clientTexts;
+      var dataPrivacyLink = clientTexts.dataPrivacyLink;
+      var dataPrivacyApproved = _this.state.dataPrivacyAccepted.value;
+      return showReceiveOfferForm && dataPrivacyApproved && dataPrivacyLink;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleTouchMove", function (evt) {
       var dialogContent = _this.dialogContentRef.current;
       evt.preventDefault();
@@ -554,18 +575,18 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderDefaultPriceBox", function () {
-      var _this$props3 = _this.props,
-          classes = _this$props3.classes,
-          amount = _this$props3.amount,
-          boxed = _this$props3.boxed,
-          priceFormatted = _this$props3.priceFormatted,
-          hidePrices = _this$props3.hidePrices,
-          hidePieces = _this$props3.hidePieces,
-          vatNotice = _this$props3.vatNotice,
-          showReceiveOfferForm = _this$props3.showReceiveOfferForm,
-          showCallToAction = _this$props3.showCallToAction,
-          showConfigurationModeSwitch = _this$props3.showConfigurationModeSwitch,
-          ConfigurationModeSwitchComponent = _this$props3.ConfigurationModeSwitchComponent;
+      var _this$props4 = _this.props,
+          classes = _this$props4.classes,
+          amount = _this$props4.amount,
+          boxed = _this$props4.boxed,
+          priceFormatted = _this$props4.priceFormatted,
+          hidePrices = _this$props4.hidePrices,
+          hidePieces = _this$props4.hidePieces,
+          vatNotice = _this$props4.vatNotice,
+          showReceiveOfferForm = _this$props4.showReceiveOfferForm,
+          showCallToAction = _this$props4.showCallToAction,
+          showConfigurationModeSwitch = _this$props4.showConfigurationModeSwitch,
+          ConfigurationModeSwitchComponent = _this$props4.ConfigurationModeSwitchComponent;
       var boxStyle = boxed ? classes.card : classes.cardUnboxed;
       return /*#__PURE__*/_react["default"].createElement(_Card["default"], {
         className: (0, _clsx["default"])(boxStyle, (0, _customClassName["default"])('cta-box'))
@@ -653,9 +674,9 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
   _createClass(AmountPrice, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var _this$props4 = this.props,
-          error = _this$props4.error,
-          bulkNameErrors = _this$props4.bulkNameErrors;
+      var _this$props5 = this.props,
+          error = _this$props5.error,
+          bulkNameErrors = _this$props5.bulkNameErrors;
 
       if (error && !(0, _isEqual["default"])(error, prevProps.error) && this.dialogContentRef.current) {
         this.dialogContentRef.current.scrollTo(0, 0);
@@ -695,32 +716,35 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
           approval = _this$state.approval,
           inView = _this$state.inView,
           showErrors = _this$state.showErrors,
-          bulkNameErrors = _this$state.bulkNameErrors;
-      var _this$props5 = this.props,
-          amount = _this$props5.amount,
-          priceList = _this$props5.priceList,
-          priceFormatted = _this$props5.priceFormatted,
-          onSelectableChanged = _this$props5.onSelectableChanged,
-          showProductVariants = _this$props5.showProductVariants,
-          ProductVariantComponent = _this$props5.ProductVariantComponent,
-          error = _this$props5.error,
-          width = _this$props5.width,
-          hidePrices = _this$props5.hidePrices,
-          title = _this$props5.title,
-          classes = _this$props5.classes,
-          showReceiveOfferForm = _this$props5.showReceiveOfferForm,
-          vatNotice = _this$props5.vatNotice,
-          clientTexts = _this$props5.clientTexts,
-          displayAcceptDesign = _this$props5.displayAcceptDesign,
-          notifications = _this$props5.notifications,
-          showCallToAction = _this$props5.showCallToAction,
-          ReceiveOfferFormComponent = _this$props5.ReceiveOfferFormComponent,
-          AcceptDesignComponent = _this$props5.AcceptDesignComponent,
-          PriceOverviewComponent = _this$props5.PriceOverviewComponent,
-          NotificationComponent = _this$props5.NotificationComponent,
-          PriceListComponent = _this$props5.PriceListComponent,
-          AddToCartComponent = _this$props5.AddToCartComponent;
-      var termsAndConditionsLink = clientTexts.termsAndConditionsLink;
+          bulkNameErrors = _this$state.bulkNameErrors,
+          dataPrivacyAccepted = _this$state.dataPrivacyAccepted;
+      var _this$props6 = this.props,
+          amount = _this$props6.amount,
+          priceList = _this$props6.priceList,
+          priceFormatted = _this$props6.priceFormatted,
+          onSelectableChanged = _this$props6.onSelectableChanged,
+          showProductVariants = _this$props6.showProductVariants,
+          ProductVariantComponent = _this$props6.ProductVariantComponent,
+          error = _this$props6.error,
+          width = _this$props6.width,
+          hidePrices = _this$props6.hidePrices,
+          title = _this$props6.title,
+          classes = _this$props6.classes,
+          showReceiveOfferForm = _this$props6.showReceiveOfferForm,
+          vatNotice = _this$props6.vatNotice,
+          clientTexts = _this$props6.clientTexts,
+          displayAcceptDesign = _this$props6.displayAcceptDesign,
+          notifications = _this$props6.notifications,
+          showCallToAction = _this$props6.showCallToAction,
+          ReceiveOfferFormComponent = _this$props6.ReceiveOfferFormComponent,
+          AcceptDesignComponent = _this$props6.AcceptDesignComponent,
+          PriceOverviewComponent = _this$props6.PriceOverviewComponent,
+          NotificationComponent = _this$props6.NotificationComponent,
+          PriceListComponent = _this$props6.PriceListComponent,
+          AddToCartComponent = _this$props6.AddToCartComponent,
+          AcceptPrivacyComponent = _this$props6.AcceptPrivacyComponent;
+      var termsAndConditionsLink = clientTexts.termsAndConditionsLink,
+          dataPrivacyLink = clientTexts.dataPrivacyLink;
       var mergedNotifications = _toConsumableArray(notifications) || [];
 
       if (showErrors && bulkNameErrors && bulkNameErrors.length > 0) {
@@ -785,6 +809,14 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
           noteLabel: (0, _i18n.t)('amountPrice.notice'),
           handleChange: this.handleBasketNoticeChange
         }) : null,
+        acceptDataPrivacyComponent: showReceiveOfferForm && dataPrivacyLink ? /*#__PURE__*/_react["default"].createElement(AcceptPrivacyComponent, {
+          dataPrivacyLink: dataPrivacyLink,
+          displayAcceptDesign: true,
+          handleChangeCheckboxApproval: this.handleChange,
+          approval: dataPrivacyAccepted,
+          closeProductOverviewDialog: this.handleClose,
+          displayNote: false
+        }) : null,
         notificationComponent: mergedNotifications.map(function (_ref4, key) {
           var message = _ref4.message,
               level = _ref4.level,
@@ -839,10 +871,10 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props6 = this.props,
-          wrapperClass = _this$props6.wrapperClass,
-          renderPriceBox = _this$props6.renderPriceBox,
-          props = _objectWithoutProperties(_this$props6, _excluded2);
+      var _this$props7 = this.props,
+          wrapperClass = _this$props7.wrapperClass,
+          renderPriceBox = _this$props7.renderPriceBox,
+          props = _objectWithoutProperties(_this$props7, _excluded2);
 
       var showPriceOverview = this.state.showPriceOverview;
       var openPriceOverview = this.openPriceOverview,
@@ -899,7 +931,8 @@ _defineProperty(AmountPrice, "propTypes", {
   PriceListComponent: _propTypes["default"].elementType,
   AddToCartComponent: _propTypes["default"].elementType,
   renderPriceBox: _propTypes["default"].func,
-  userComment: _propTypes["default"].string
+  userComment: _propTypes["default"].string,
+  AcceptPrivacyComponent: _propTypes["default"].elementType
 });
 
 _defineProperty(AmountPrice, "defaultProps", {
@@ -915,7 +948,8 @@ _defineProperty(AmountPrice, "defaultProps", {
   PriceOverviewComponent: _PriceOverview["default"],
   NotificationComponent: _Notification["default"],
   PriceListComponent: _PriceList["default"],
-  AddToCartComponent: _AddToBasket["default"]
+  AddToCartComponent: _AddToBasket["default"],
+  AcceptPrivacyComponent: _AcceptPrivacy["default"]
 });
 
 var _default = (0, _withWidth["default"])()((0, _styles.withStyles)(styles, {

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

@@ -97,7 +97,8 @@ var PriceOverview = /*#__PURE__*/function (_React$Component) {
           receiveOfferFormComponent = _this$props.receiveOfferFormComponent,
           showReceiveOfferForm = _this$props.showReceiveOfferForm,
           amount = _this$props.amount,
-          acceptDesignComponent = _this$props.acceptDesignComponent;
+          acceptDesignComponent = _this$props.acceptDesignComponent,
+          acceptDataPrivacyComponent = _this$props.acceptDataPrivacyComponent;
       return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
         xs: 12,
@@ -124,7 +125,7 @@ var PriceOverview = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement("b", null, contactData)), receiveOfferFormComponent), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
         xs: 12
-      }, acceptDesignComponent, amount > 0 && /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), priceListComponent), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+      }, acceptDesignComponent, acceptDataPrivacyComponent, amount > 0 && /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), priceListComponent), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
         xs: 12
       }, addToCartComponent && /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), addToCartComponent)), !showReceiveOfferForm && /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
@@ -167,7 +168,8 @@ _defineProperty(PriceOverview, "propTypes", {
   receiveOfferFormComponent: _propTypes["default"].element,
   showReceiveOfferForm: _propTypes["default"].bool,
   amount: _propTypes["default"].number,
-  acceptDesignComponent: _propTypes["default"].element
+  acceptDesignComponent: _propTypes["default"].element,
+  acceptDataPrivacyComponent: _propTypes["default"].element
 });
 
 var _default = (0, _styles.withStyles)(styles, {

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

@@ -58,7 +58,7 @@ var styles = function styles(theme) {
       marginTop: 0
     },
     outlinedInput: _defineProperty({
-      padding: 14,
+      padding: 10,
       fontSize: 15
     }, theme.breakpoints.down('xs'), {
       padding: 19
@@ -143,7 +143,6 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
     _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
     _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
     _this.setInputRef = _this.setInputRef.bind(_assertThisInitialized(_this));
-    _this.designApprovalRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
 
@@ -231,7 +230,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.email'),
-        margin: "normal",
+        margin: "dense",
         variant: "outlined",
         fullWidth: true,
         error: !!email.error,
@@ -256,7 +255,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.name'),
-        margin: "normal",
+        margin: "dense",
         variant: "outlined",
         fullWidth: true,
         error: !!name.error,
@@ -278,7 +277,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.company'),
-        margin: "normal",
+        margin: "dense",
         variant: "outlined",
         fullWidth: true,
         error: !!company.error,
@@ -300,7 +299,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.phonenumber'),
-        margin: "normal",
+        margin: "dense",
         variant: "outlined",
         fullWidth: true,
         error: !!phonenumber.error,
@@ -329,7 +328,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.zip'),
-        margin: "normal",
+        margin: "dense",
         variant: "outlined",
         fullWidth: true,
         error: !!zip.error,
@@ -355,7 +354,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.city'),
-        margin: "normal",
+        margin: "dense",
         variant: "outlined",
         fullWidth: true,
         error: !!city.error,
@@ -377,7 +376,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.street'),
-        margin: "normal",
+        margin: "dense",
         variant: "outlined",
         fullWidth: true,
         error: !!street.error,
@@ -399,7 +398,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.country'),
-        margin: "normal",
+        margin: "dense",
         variant: "outlined",
         fullWidth: true,
         error: !!country.error,

package/App/configuration.js

@@ -169,8 +169,10 @@ var applicationConfiguration = {
   designer: {
     dpi: 300,
     // the default canvas dpi as project specific option
-    maxColorAmount: 10 // the default max number of colors in the colorizing feature
-
+    maxColorAmount: 10,
+    // the default max number of colors in the colorizing feature
+    allowedImageUploadFormats: [// the image formats users can upload to designareas / designer items
+    'jpg', 'jpeg', 'svg', 'png', 'pdf', 'bmp', 'tif', 'tiff', 'eps', 'ai', 'gif']
   },
   vectorizeImageQuality: 45000,
   renderPreviewImagesForCheckout: true,

package/package.json

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

package/public/translations/de_DE.json

@@ -158,7 +158,10 @@
     "checkInputsInForm": "Bitte Eingaben im Formular prüfen",
     "sentOk": "Anfrage wurde erfolgreich versandt.",
     "sentError": "Fehler beim Senden der Anfrage.",
-    "sendButton": "Angebot anfordern"
+    "sendButton": "Angebot anfordern",
+    "privacyNotice": "Ich willige darin ein, dass die von mir überreichten Informationen und Kontaktdaten dazu verwendet werden, um mit mir anlässlich meiner Kontaktaufnahme in Verbindung zu treten, hierüber zu kommunizieren und meine Anfrage abzuwickeln. Dies gilt insbesondere für die Verwendung der E-Mail-Adresse zum vorgenannten Zweck. Die Einwilligung kann jederzeit mit Wirkung für die Zukunft per E-Mail widerrufen werden. Die Datenschutzerklärung kann %{privacyLink} eingesehen werden.",
+    "privacyLinkLabel": "hier",
+    "selectionError": "Checkbox nicht bestätigt"
   },
   "acceptDesignScreen": {
     "selectionError": "Checkbox nicht bestätigt",

package/public/translations/en_GB.json

@@ -63,9 +63,8 @@
   },
   "productVariant": {
     "amountChosen": "chosen: ",
-    "addColor": "Add color",
-    "adaptAmount": "Adapt amount",
-    "editDesign": "Edit design",
+    "chooseSize": "Choose size",
+    "adaptSizes": "Adapt sizes",
     "confirmSelection": "Confirm selection",
     "amountLabel": "Amount"
   },
@@ -159,7 +158,10 @@
     "checkInputsInForm": "Please check the form inputs below",
     "sentOk": "Request was successfully sent.",
     "sentError": "Error sending the request.",
-    "sendButton": "Request a quote"
+    "sendButton": "Request a quote",
+    "privacyNotice": "I consent to the information and contact details I have provided being used to contact me, to communicate about and to process my request. This applies in particular to the use of the e-mail address for the aforementioned purpose. The consent can be revoked at any time with effect for the future by e-mail. The privacy policy can be viewed %{privacyLink}.",
+    "privacyLinkLabel": "here",
+    "selectionError": "No consent given"
   },
   "acceptDesignScreen": {
     "checkedSelectionActive": "I have checked all provided data and the design and I approve the configuration",
@@ -183,7 +185,6 @@
   "missingVariantError": "The selected item %{selectedVariant} is no longer available.",
   "errorDialogTitle": "Notice",
   "clientValidationError": "No valid channel/client combination found!",
-  "alertDialogTitle": "Alert",
   "okButtonLabel": "Ok",
   "cancelButtonLabel": "Cancel",
   "designAreaControlBox": {
@@ -412,6 +413,10 @@
     "okButton": "Ok",
     "cancelButton": "Cancel",
     "rules": {
+      "itemattributematch": {
+        "text": "The selection does not match the following parts in the configuration.",
+        "resolveText": "These options will be removed:"
+      },
       "optionexclusion": {
         "text": "The selection does not match the following parts in the configuration.",
         "resolveText": "These options will be removed:"

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

@@ -15,6 +15,7 @@ import Button from '@material-ui/core/Button';
 import MainButton from 'Shared/Components/MainButton';
 import { Services } from 'App/ServiceLocator';
 import withWidth, { isWidthDown } from '@material-ui/core/withWidth/withWidth';
+import { getConf } from '../../../../configuration';
 
 const styles = theme => ({
     imagePreview: {
@@ -208,7 +209,7 @@ class ImageEditDialog extends React.Component {
 
         const extension = file.name.toLowerCase().match(/\.([0-9a-z]+)$/i)[1];
 
-        const allowedFormats = ['jpg', 'jpeg', 'svg', 'png', 'pdf', 'bmp', 'tif', 'eps', 'ai', 'gif'];
+        const allowedFormats = getConf('designer.allowedImageUploadFormats');
 
         if (allowedFormats.indexOf(extension) === -1) {
             error = t('fileUpload.uploadFormatError', { formats: allowedFormats.join(', ').toUpperCase() });
@@ -221,8 +222,8 @@ class ImageEditDialog extends React.Component {
             error,
             imageData: null,
         });
-        const renderabelFormats = ['jpg', 'jpeg', 'svg', 'png', 'bmp', 'tif', 'gif'];
-        const isRenderable = renderabelFormats.indexOf(extension) !== -1;
+        const renderableFormats = ['jpg', 'jpeg', 'svg', 'png', 'bmp', 'gif'];
+        const isRenderable = renderableFormats.indexOf(extension) !== -1;
         if (isRenderable && file.type && file.type.match('image.*')) {
             const reader = new FileReader();
             reader.onload = e => {

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

@@ -480,14 +480,14 @@ export const fetchOptions = (itemidentifier, optionclassification, configuration
     );
 };
 
-export const switchOptionsBasic = (configuration, switchedoptions, noCheck = false) => {
+export const switchOptionsBasic = (configuration, switchedOptions, noCheck = false) => {
     const config = {};
     if (noCheck) {
         config.params = { nocheck: 1 };
     }
     return apiActions.postData(
         'configuration/switchoption',
-        { configuration, switchedoptions },
+        { configuration, switchedOptions },
         data => ({
             // dummy receiver
             type: 'RECEIVE_SWITCHOPTIONSRESULT_BASIC',
@@ -497,37 +497,6 @@ export const switchOptionsBasic = (configuration, switchedoptions, noCheck = fal
     );
 };
 
-export const switchOptionArrays = (configuration, switchOptionData, noCheck = false) => dispatch => {
-    const switchedoptions = {};
-    const afterSwitch = [];
-
-    for (const componentIdentifier in switchOptionData) {
-        if (isArray(switchOptionData[componentIdentifier])) {
-            const [firstOption, ...otherOptions] = switchOptionData[componentIdentifier];
-
-            switchedoptions[componentIdentifier] = firstOption;
-
-            if (otherOptions.length > 0) {
-                for (let optionData of otherOptions) {
-                    afterSwitch.push({
-                        [componentIdentifier]: optionData,
-                    });
-                }
-            }
-        } else {
-            switchedoptions[componentIdentifier] = switchOptionData[componentIdentifier];
-        }
-    }
-
-    let p = dispatch(switchOptionsBasic(configuration, switchedoptions, noCheck));
-    for (let switchOption of afterSwitch) {
-        p = p.then(action => {
-            return dispatch(switchOptionsBasic(action.data, switchOption, noCheck));
-        });
-    }
-    return p;
-};
-
 export const switchOptions = (
     configuration,
     switchOptionData,
@@ -535,7 +504,7 @@ export const switchOptions = (
     refreshOptions = false,
     setChecked = false
 ) => dispatch => {
-    return dispatch(switchOptionArrays(configuration, switchOptionData, noCheck)).then(action => {
+    return dispatch(switchOptionsBasic(configuration, switchOptionData, noCheck)).then(action => {
         const extraData = { switchOptionData, noCheck, refreshOptions, setChecked };
         return dispatch(receiveSwitchoptionsresult(action.data, extraData));
     });
@@ -701,10 +670,10 @@ export const resolveConflicts = () => (dispatch, getState) => {
                 if (switchOptionsData) {
                     if (p) {
                         p = p.then(action => {
-                            return dispatch(switchOptionArrays(action.data, switchOptionsData, true));
+                            return dispatch(switchOptionsBasic(action.data, switchOptionsData, true));
                         });
                     } else {
-                        p = dispatch(switchOptionArrays(configuration, switchOptionsData, true));
+                        p = dispatch(switchOptionsBasic(configuration, switchOptionsData, true));
                     }
                 }
             }
@@ -781,7 +750,7 @@ export const selectMultipleOptions = optionsList => (dispatch, getState) => {
     for (const component of optionsList) {
         switchOptionData[component.identifier] = component.selectedoptions.map(({ identifier, amount }) => ({
             identifier,
-            amount: amount || 1,
+            amount: typeof amount === 'undefined' ? 1 : amount,
             check_results: null,
         }));
     }

package/src/App/Reducers/ImageGallery/Reducer.js

@@ -133,7 +133,11 @@ export function imageGalleryReducer(state = initialState, action = {}) {
                         selectedImage: currentImage,
                     };
                 } else {
-                    Object.assign(currentImage, selectedImage);
+                    const idx = userImages.indexOf(currentImage);
+                    userImages[idx] = {
+                        ...currentImage,
+                        ...selectedImage,
+                    };
                     return {
                         ...state,
                         userImages,

package/src/App/Screens/Configurator/ThemeProvider.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { MuiThemeProvider, createTheme } from '@material-ui/core/styles';
 import { grey } from '@material-ui/core/colors';
 import merge from 'lodash/merge';
 import cloneDeep from 'lodash/cloneDeep';
@@ -245,7 +245,7 @@ const mapStateToProps = state => ({
 
 export const ThemeMixer = ({ client, customTheme, withTheme, children }) => {
     const themeMix = useMemo(() => {
-        const theme = createMuiTheme(
+        const theme = createTheme(
             createThemeFromClientTheme(client && client.theme ? client.theme : {}, customTheme || {})
         );
         if (typeof withTheme === 'function') {

package/src/App/Services/DesignerService.js

@@ -36,11 +36,18 @@ import { createTextPlaceholder } from '../Reducers/ImageGallery/Modifiers';
 import { updateLinkedImagesWithImageData } from '../Reducers/DesignData/Actions';
 import { checkDesignElementRestrictions } from '../Reducers/DesignArea/DesignElementSelectors';
 
+function getCanvasImageScalingWithImageData(canvasImage, imageData) {
+    const currentPreview = canvasImage.imageData.preview;
+    const nextPreview = imageData.preview;
+    return canvasImage.scaling * (currentPreview.width / nextPreview.width);
+}
+
 function updateCanvasImageWithImageData(canvasImage, imageData) {
     return canvasImage.updateOptions(
         prepareImageObjectData({
             imageData,
             src: `${getConf('network.host')}${imageData.preview.url}`,
+            scaling: getCanvasImageScalingWithImageData(canvasImage, imageData),
         })
     );
 }