@configuratorware/configurator-admingui 1.36.1 → 1.37.0

package/Components/FormFragments/Text.js

@@ -13,10 +13,8 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var text = function text(props) {
-  return /*#__PURE__*/_react["default"].createElement(_TextField["default"], _defineProperty({
+  return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
     label: props.label,
     onChange: function onChange(evt) {
       props.onChange(props.name, evt.target.value === '' && props.emptyValue !== undefined ? props.emptyValue : evt.target.value);
@@ -32,7 +30,7 @@ var text = function text(props) {
     },
     inputProps: props.inputProps,
     rows: props.rows || 1
-  }, "helperText", props.helperText));
+  });
 };
 
 text.defaultProps = {

package/Screens/ApiKeys/Containers/Edit.js

@@ -112,11 +112,13 @@ var connectedTextField = (0, _connect["default"])(mapStateToProps, mapDispatchTo
 var formFields = [{
   name: 'email',
   label: 'E-mail',
-  type: 'text'
+  type: 'text',
+  helperText: (0, _i18n.t)('apiKeys.mailHelperText')
 }, {
   name: 'username',
   label: 'User name',
-  type: 'text'
+  type: 'text',
+  helperText: (0, _i18n.t)('apiKeys.userHelperText')
 }, {
   name: 'api_key',
   label: 'apikey',

package/Screens/ApiKeys/Translations.js

@@ -10,7 +10,9 @@ require("../../App/i18n").use({
     apikey: 'API Key',
     'create new api key': 'neuen API key erstellen',
     apiKeys: {
-      addButtonlabel: 'API Key hinzufügen'
+      addButtonlabel: 'API Key hinzufügen',
+      mailHelperText: 'Die E-Mail Adresse muss einzigartig und keinem bestehenden API Key oder adminarea Nutzer zugeordnet sein',
+      userHelperText: 'Der Nutzername muss einzigartig und keinem bestehenden Nutzer zugeordnet sein'
     }
   },
   en: {
@@ -18,7 +20,9 @@ require("../../App/i18n").use({
     apikey: 'API Key',
     'create new api key': 'create new api key',
     apiKeys: {
-      addButtonlabel: 'Add API Key'
+      addButtonlabel: 'Add API Key',
+      mailHelperText: 'The e-mail address has to be unique and must not be used by an existing API key or adminarea user',
+      userHelperText: 'The username has to be unique and must not be used by an existing API key or adminarea user'
     }
   }
 }, true);

package/Screens/Designer/SubScreens/DesignAreas/Components/MaskEditorField/MaskEditorCanvas.js

@@ -36,7 +36,7 @@ var calculateCanvasSize = function calculateCanvasSize(ratio
 /* width / height */
 ) {
   // experimental values for canvas margin (looks good with the dialog)
-  var modalFitCorrectionY = 260;
+  var modalFitCorrectionY = 280;
   var modalFitCorrectionX = 144;
   var base = Math.min(window.innerWidth, window.innerHeight) - (window.innerWidth < window.innerHeight - modalFitCorrectionY ? modalFitCorrectionX : modalFitCorrectionY);
   var width = ratio < 1 ? base * ratio : base;

package/Screens/Designer/SubScreens/DesignAreas/Components/MaskEditorField/MaskEditorField.js

@@ -41,6 +41,8 @@ var _MaskEditorCanvas = require("./MaskEditorCanvas");
 
 var _maskTypes = require("../../Utils/maskTypes");
 
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography/Typography"));
+
 var _excluded = ["onChange", "name"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -147,6 +149,11 @@ var MaskEditorField = (0, _withStyles["default"])(styles)((0, _withFileUpload.wi
       dataUrl = _useState8[0],
       setDataUrl = _useState8[1];
 
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      embeddedImageError = _useState10[0],
+      setEmbeddedImageError = _useState10[1];
+
   var maskType = currentValue.maskType,
       maskData = currentValue.maskData;
 
@@ -161,20 +168,34 @@ var MaskEditorField = (0, _withStyles["default"])(styles)((0, _withFileUpload.wi
       maskType: maskType,
       maskData: {}
     }));
+    resetState();
+  };
+
+  var resetState = function resetState() {
     setFreeFormFile(false);
     setDataUrl(false);
+    setEmbeddedImageError(false);
   };
 
   var getFileDataUrl = function getFileDataUrl(file) {
+    setEmbeddedImageError(false);
+
     if (!file) {
       return;
     }
 
     var reader = new FileReader();
     reader.addEventListener('load', function () {
-      setDataUrl(reader.result);
-      setFreeFormFile(file);
-      clearMaskData();
+      var svgString = atob(reader.result.replace(/data:image\/svg\+xml;base64,/, ''));
+      var embeddedImageIndex = svgString.search('<image');
+
+      if (embeddedImageIndex !== -1) {
+        setEmbeddedImageError(true);
+      } else {
+        setDataUrl(reader.result);
+        setFreeFormFile(file);
+        clearMaskData();
+      }
     }, false);
     reader.readAsDataURL(file);
   };
@@ -188,8 +209,7 @@ var MaskEditorField = (0, _withStyles["default"])(styles)((0, _withFileUpload.wi
   (0, _react.useEffect)(function () {
     // reset internal state when showing the dialog
     if (showDialog) {
-      setDataUrl(false);
-      setFreeFormFile(false);
+      resetState();
 
       if ((0, _size["default"])(value) > 0) {
         setCurrentValue(initialValue);
@@ -291,7 +311,10 @@ var MaskEditorField = (0, _withStyles["default"])(styles)((0, _withFileUpload.wi
       onChange: getFileDataUrl,
       src: getMaskSrc(maskType),
       fileName: freeFormFile ? freeFormFile.name : freeFormUrl.replace(/.*\/([^/]+)$/, '$1')
-    }))),
+    })), embeddedImageError && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      variant: "body1",
+      color: "error"
+    }, (0, _i18n.t)('maskEditor.embeddedImageError'))),
     open: showDialog,
     maxWidth: 'xl',
     fullWidth: false,

package/Screens/Designer/SubScreens/DesignAreas/Containers/Edit.js

@@ -33,6 +33,8 @@ var _FormArray = _interopRequireDefault(require("../Components/FormArray"));
 
 var _i18n = require("../../../../../App/i18n");
 
+var _lodash = _interopRequireDefault(require("lodash"));
+
 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; }
@@ -45,39 +47,47 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 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 getVariantsDefaultColors = function getVariantsDefaultColors(productionMethod, extendedItem) {
-  var variantsDefaultColors = [];
+var getItemDefaultColors = function getItemDefaultColors(productionMethod, extendedItem) {
+  var itemDefaultColors = [];
   var defaultColors = productionMethod.defaultColors;
 
   if ((0, _isObject["default"])(defaultColors)) {
-    var _iterator = _createForOfIteratorHelper(extendedItem.children),
-        _step;
-
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var child = _step.value;
-        var defaultColor = {
-          variantIdentifier: child.identifier,
-          variantTitle: child.title,
-          colorPaletteIdentifier: null,
-          colorIdentifier: null
-        };
-
-        if (defaultColors[child.identifier]) {
-          defaultColor.colorPaletteIdentifier = Object.keys(defaultColors[child.identifier])[0];
-          defaultColor.colorIdentifier = defaultColors[child.identifier][defaultColor.colorPaletteIdentifier];
+    if (_lodash["default"].isArray(_lodash["default"].get(extendedItem, 'children')) && extendedItem.children.length > 0) {
+      var _iterator = _createForOfIteratorHelper(extendedItem.children),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var child = _step.value;
+          itemDefaultColors.push(getDefaultColor(child, defaultColors));
         }
-
-        variantsDefaultColors.push(defaultColor);
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
+    } else {
+      itemDefaultColors.push(getDefaultColor(extendedItem, defaultColors));
     }
   }
 
-  return variantsDefaultColors;
+  return itemDefaultColors;
+};
+
+var getDefaultColor = function getDefaultColor(item, defaultColors) {
+  var defaultColor = {
+    variantIdentifier: item.identifier,
+    variantTitle: item.title || item.translated_title,
+    colorPaletteIdentifier: null,
+    colorIdentifier: null
+  };
+
+  if (defaultColors[item.identifier]) {
+    defaultColor.colorPaletteIdentifier = Object.keys(defaultColors[item.identifier])[0];
+    defaultColor.colorIdentifier = defaultColors[item.identifier][defaultColor.colorPaletteIdentifier];
+  }
+
+  return defaultColor;
 };
 
 var ConnectedFormComponent = (0, _reactRedux.connect)(function (state, ownProps) {
@@ -99,7 +109,7 @@ var ConnectedFormComponent = (0, _reactRedux.connect)(function (state, ownProps)
   var availableColorPalettes = colorPalettes.filter(function (palette) {
     return availableColorPaletteIds.indexOf(palette.id) !== -1;
   });
-  var variantsDefaultColors = getVariantsDefaultColors(ownProps.data, extendedItem);
+  var variantsDefaultColors = getItemDefaultColors(ownProps.data, extendedItem);
   var errorData = (0, _get["default"])(state, 'dataBySource.designarea.error.response.data.errors');
   var index = (0, _findIndex["default"])(ownDesignProductionMethods, {
     id: ownProps.data.id

package/Screens/Designer/SubScreens/DesignAreas/Containers/FormProductionMethods.js

@@ -122,7 +122,8 @@ var styles = function styles() {
     engravingBackgroundColor: {
       display: 'flex',
       alignItems: 'baseline',
-      marginBottom: '1em'
+      marginBottom: '1em',
+      marginLeft: '1em'
     },
     inputAlign: {
       textAlign: 'center'
@@ -555,7 +556,7 @@ var FormProductionMethods = /*#__PURE__*/function (_React$Component) {
 
       var currentValues = _lodash["default"].get(productionMethod, 'additionalData.engravingBackgroundColors', []);
 
-      var availableItemIdentifiers = _lodash["default"].isArray(_lodash["default"].get(extendedItem, 'children')) ? extendedItem.children.map(function (_ref3) {
+      var availableItemIdentifiers = _lodash["default"].isArray(_lodash["default"].get(extendedItem, 'children')) && extendedItem.children.length > 0 ? extendedItem.children.map(function (_ref3) {
         var identifier = _ref3.identifier;
         return identifier;
       }) : [extendedItem.identifier];
@@ -879,7 +880,7 @@ var FormProductionMethods = /*#__PURE__*/function (_React$Component) {
       })), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
         xs: 12
-      }, isEngravingEffect(productionMethod) && engravingBackgroundColors.map(function (item) {
+      }, isEngravingEffect(productionMethod) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, (0, _i18n.t)('EngravingBackgroundColor')), engravingBackgroundColors.map(function (item) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: item.itemIdentifier,
           className: classes.engravingBackgroundColor
@@ -890,13 +891,13 @@ var FormProductionMethods = /*#__PURE__*/function (_React$Component) {
           component: "legend"
         }, item.itemIdentifier, ":"), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
           key: item.itemIdentifier,
-          placeholder: (0, _i18n.t)('EngravingBackgroundColor'),
+          placeholder: (0, _i18n.t)('EngravingBackgroundColorPlaceholder'),
           onChange: _this4.onChangeEngravingBackgroundColor(item),
           value: item.colorHex,
           style: styles.input,
           className: classes.inputAlign
         }));
-      }))), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+      })))), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
         xs: 12,
         className: classes.checkboxGrid

package/Screens/Designer/SubScreens/DesignAreas/Translations.js

@@ -7,7 +7,8 @@ require("../../../../App/i18n").use({
     isDefault: 'default',
     allowBulkNames: 'Allow bulk names',
     varyingDefaultColors: 'Varying Default Color',
-    EngravingBackgroundColor: 'Color value',
+    EngravingBackgroundColorPlaceholder: 'Color value',
+    EngravingBackgroundColor: 'Engraving color',
     errors: {
       noProdMethodLeft: 'No more production methods exist.'
     },
@@ -42,7 +43,8 @@ require("../../../../App/i18n").use({
       selectFile: 'Select SVG file',
       uploadAndSave: 'Upload and save',
       uploadFailed: 'Failed to upload the SVG',
-      uploadInProgress: 'Upload in progress, please wait...'
+      uploadInProgress: 'Upload in progress, please wait...',
+      embeddedImageError: 'The provided file contains an embedded raster graphic. Please use plain / vector only svg files.'
     },
     validation: {
       designProductionMethod: {
@@ -73,7 +75,8 @@ require("../../../../App/i18n").use({
     isDefault: 'Standard',
     allowBulkNames: 'Einzelnamen erlauben',
     varyingDefaultColors: 'abweichende Standardfarbe',
-    EngravingBackgroundColor: 'Farbwert',
+    EngravingBackgroundColorPlaceholder: 'Farbwert',
+    EngravingBackgroundColor: 'Gravurfarbe',
     errors: {
       noProdMethodLeft: 'Keine weiteren Produktionsverfahren vorhanden.'
     },
@@ -102,7 +105,8 @@ require("../../../../App/i18n").use({
       selectFile: 'SVG Datei auswählen',
       uploadAndSave: 'Hochladen und speichern',
       uploadFailed: 'Fehler beim Hochladen von SVG',
-      uploadInProgress: 'Upload läuft, bitte warten...'
+      uploadInProgress: 'Upload läuft, bitte warten...',
+      embeddedImageError: 'Die gewählte Datei enthält eingebettete Pixelgrafiken und kann nicht verwendet werden. Bitte wähle eine Datei, die ausschließlich Vektordaten enthält.'
     },
     validation: {
       designProductionMethod: {

package/UIComponents/SelectField.js

@@ -113,7 +113,7 @@ var UISelectField = /*#__PURE__*/function (_React$Component) {
       }, placeholder && /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
         value: placeholderValue,
         disabled: disablePlaceholder
-      }, placeholder), children), /*#__PURE__*/_react["default"].createElement(_FormHelperText["default"], null, error));
+      }, placeholder), children), error && /*#__PURE__*/_react["default"].createElement(_FormHelperText["default"], null, error));
     }
   }]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@configuratorware/configurator-admingui",
-  "version": "1.36.1",
+  "version": "1.37.0",
   "license": "UNLICENSED",
   "private": false,
   "dependencies": {
@@ -29,7 +29,7 @@
     "react-redux-i18n": "^1.9.3",
     "react-router": "^3.2.6",
     "react-sortable-hoc": "^1.11.0",
-    "redhotmagma-visualization": "1.36.1",
+    "redhotmagma-visualization": "1.37.0",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/src/Components/FormFragments/Text.js

@@ -25,7 +25,6 @@ const text = props => (
         }}
         inputProps={props.inputProps}
         rows={props.rows || 1}
-        helperText={props.helperText}
     />
 );
 

package/src/Screens/ApiKeys/Containers/Edit.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import connect from 'react-redux/es/connect/connect';
 import { setFieldData, postData, refreshListAction, APIUSER_REDUCER_NAME } from '../Reducers/Actions';
 import { get } from 'lodash';
-import { T } from '../../../App/i18n';
+import { T, t } from '../../../App/i18n';
 import generateConnectedEdit from '../../../Components/DefaultConnectedForm';
 import Text from '../../../Components/FormFragments/Text';
 import Button from '@material-ui/core/Button/Button';
@@ -41,11 +41,13 @@ const formFields = [
         name: 'email',
         label: 'E-mail',
         type: 'text',
+        helperText: t('apiKeys.mailHelperText')
     },
     {
         name: 'username',
         label: 'User name',
         type: 'text',
+        helperText: t('apiKeys.userHelperText')
     },
     {
         name: 'api_key',

package/src/Screens/ApiKeys/Translations.js

@@ -10,6 +10,8 @@ require('../../App/i18n').use(
             'create new api key': 'neuen API key erstellen',
             apiKeys: {
                 addButtonlabel: 'API Key hinzufügen',
+                mailHelperText: 'Die E-Mail Adresse muss einzigartig und keinem bestehenden API Key oder adminarea Nutzer zugeordnet sein',
+                userHelperText: 'Der Nutzername muss einzigartig und keinem bestehenden Nutzer zugeordnet sein',
             },
         },
         en: {
@@ -18,6 +20,8 @@ require('../../App/i18n').use(
             'create new api key': 'create new api key',
             apiKeys: {
                 addButtonlabel: 'Add API Key',
+                mailHelperText: 'The e-mail address has to be unique and must not be used by an existing API key or adminarea user',
+                userHelperText: 'The username has to be unique and must not be used by an existing API key or adminarea user',
             },
         },
     },

package/src/Screens/Designer/SubScreens/DesignAreas/Components/MaskEditorField/MaskEditorCanvas.js

@@ -17,7 +17,7 @@ const styles = {
 
 const calculateCanvasSize = (ratio /* width / height */) => {
     // experimental values for canvas margin (looks good with the dialog)
-    const modalFitCorrectionY = 260;
+    const modalFitCorrectionY = 280;
     const modalFitCorrectionX = 144;
     const base =
         Math.min(window.innerWidth, window.innerHeight) -

package/src/Screens/Designer/SubScreens/DesignAreas/Components/MaskEditorField/MaskEditorField.js

@@ -16,6 +16,7 @@ import { withFileUpload } from './withFileUpload';
 import InlineFileInput from './InlineFileInput';
 import { MaskEditorCanvas } from './MaskEditorCanvas';
 import { maskTypes } from '../../Utils/maskTypes';
+import Typography from '@material-ui/core/Typography/Typography';
 
 const maskTypeValues = Object.values(maskTypes);
 
@@ -78,17 +79,24 @@ export const MaskEditorField = withStyles(styles)(
             const [currentValue, setCurrentValue] = useState(initialValue);
             const [freeFormFile, setFreeFormFile] = useState(false);
             const [dataUrl, setDataUrl] = useState(false);
+            const [embeddedImageError, setEmbeddedImageError] = useState(false);
 
             const { maskType, maskData } = currentValue;
 
             const clearMaskData = () => setCurrentValue({ ...currentValue, maskData: {} });
             const setMaskType = maskType => {
                 setCurrentValue({ ...currentValue, maskType, maskData: {} });
+                resetState();
+            };
+            
+            const resetState = () => {
                 setFreeFormFile(false);
                 setDataUrl(false);
+                setEmbeddedImageError(false);
             };
 
             const getFileDataUrl = file => {
+                setEmbeddedImageError(false);
                 if (!file) {
                     return;
                 }
@@ -96,9 +104,16 @@ export const MaskEditorField = withStyles(styles)(
                 reader.addEventListener(
                     'load',
                     function() {
-                        setDataUrl(reader.result);
-                        setFreeFormFile(file);
-                        clearMaskData();
+                        const svgString = atob(reader.result.replace(/data:image\/svg\+xml;base64,/, ''));
+                        const embeddedImageIndex = svgString.search('<image');
+                        if (embeddedImageIndex !== -1) {
+                            setEmbeddedImageError(true);
+                        }
+                        else {
+                            setDataUrl(reader.result);
+                            setFreeFormFile(file);
+                            clearMaskData(); 
+                        }
                     },
                     false
                 );
@@ -115,8 +130,7 @@ export const MaskEditorField = withStyles(styles)(
             useEffect(() => {
                 // reset internal state when showing the dialog
                 if (showDialog) {
-                    setDataUrl(false);
-                    setFreeFormFile(false);
+                    resetState();
                     if (size(value) > 0) {
                         setCurrentValue(initialValue);
                     }
@@ -213,6 +227,11 @@ export const MaskEditorField = withStyles(styles)(
                                         />
                                     )}
                                 </div>
+                                {embeddedImageError &&
+                                    <Typography variant="body1" color="error">
+                                        {t('maskEditor.embeddedImageError')}
+                                    </Typography>
+                                }
                             </React.Fragment>
                         }
                         open={showDialog}

package/src/Screens/Designer/SubScreens/DesignAreas/Containers/Edit.js

@@ -12,34 +12,43 @@ import FormProductionMethods from './FormProductionMethods';
 import { DesignAreaMaskEditorField } from './ConnectedMaskEditorField';
 import FormArray from '../Components/FormArray';
 import { t } from '../../../../../App/i18n';
+import _ from 'lodash';
 
-const getVariantsDefaultColors = (productionMethod, extendedItem) => {
-    const variantsDefaultColors = [];
+const getItemDefaultColors = (productionMethod, extendedItem) => {
+    const itemDefaultColors = [];
 
     const { defaultColors } = productionMethod;
-
     if (isObject(defaultColors)) {
-        for (const child of extendedItem.children) {
-            const defaultColor = {
-                variantIdentifier: child.identifier,
-                variantTitle: child.title,
-                colorPaletteIdentifier: null,
-                colorIdentifier: null,
-            };
-
-            if (defaultColors[child.identifier]) {
-                defaultColor.colorPaletteIdentifier = Object.keys(defaultColors[child.identifier])[0];
-                defaultColor.colorIdentifier =
-                    defaultColors[child.identifier][defaultColor.colorPaletteIdentifier];
+        if (_.isArray(_.get(extendedItem, 'children')) && extendedItem.children.length > 0) {
+            for (const child of extendedItem.children) {
+                itemDefaultColors.push(getDefaultColor(child, defaultColors));
             }
-
-            variantsDefaultColors.push(defaultColor);
+        }
+        else {
+            itemDefaultColors.push(getDefaultColor(extendedItem, defaultColors));
         }
     }
 
-    return variantsDefaultColors;
+    return itemDefaultColors;
 };
 
+const getDefaultColor = (item, defaultColors) => {
+    const defaultColor = {
+        variantIdentifier: item.identifier,
+        variantTitle: item.title || item.translated_title,
+        colorPaletteIdentifier: null,
+        colorIdentifier: null,
+    };
+
+    if (defaultColors[item.identifier]) {
+        defaultColor.colorPaletteIdentifier = Object.keys(defaultColors[item.identifier])[0];
+        defaultColor.colorIdentifier =
+            defaultColors[item.identifier][defaultColor.colorPaletteIdentifier];
+    }
+    
+    return defaultColor;
+}
+
 const ConnectedFormComponent = connect(
     (state, ownProps) => {
         const itemId = get(state, 'designAreasData.data.item.value.id');
@@ -61,7 +70,7 @@ const ConnectedFormComponent = connect(
         const availableColorPalettes = colorPalettes.filter(
             palette => availableColorPaletteIds.indexOf(palette.id) !== -1
         );
-        const variantsDefaultColors = getVariantsDefaultColors(ownProps.data, extendedItem);
+        const variantsDefaultColors = getItemDefaultColors(ownProps.data, extendedItem);
 
         const errorData = get(state, 'dataBySource.designarea.error.response.data.errors');
         const index = findIndex(ownDesignProductionMethods, { id: ownProps.data.id });

package/src/Screens/Designer/SubScreens/DesignAreas/Containers/FormProductionMethods.js

@@ -40,6 +40,7 @@ const styles = () => ({
         display: 'flex',
         alignItems: 'baseline',
         marginBottom: '1em',
+        marginLeft: '1em',
     },
     inputAlign: {
         textAlign: 'center',
@@ -323,7 +324,7 @@ class FormProductionMethods extends React.Component {
             return [];
         }
         const currentValues = _.get(productionMethod, 'additionalData.engravingBackgroundColors', []);
-        const availableItemIdentifiers = _.isArray(_.get(extendedItem, 'children'))
+        const availableItemIdentifiers = (_.isArray(_.get(extendedItem, 'children')) && extendedItem.children.length > 0)
             ? extendedItem.children.map(({ identifier }) => identifier)
             : [extendedItem.identifier];
         const result = [];
@@ -434,7 +435,6 @@ class FormProductionMethods extends React.Component {
     onColorPalettesDialogSelectClick = (value, colorIdentifier, colorPaletteIdentifier) => {
         const { openedVariantsDefaultColor } = this.state;
         const { data } = this.props;
-
         const newData = {
             ...data,
             defaultColors: {
@@ -744,25 +744,33 @@ class FormProductionMethods extends React.Component {
                             ))}
                         </UISelectField>
                         <Grid item xs={12}>
-                            {isEngravingEffect(productionMethod) &&
-                                engravingBackgroundColors.map(item => (
-                                    <div
-                                        key={item.itemIdentifier}
-                                        className={classes.engravingBackgroundColor}
-                                    >
-                                        <FormLabel classes={{ root: classes.InputLabel }} component="legend">
-                                            {item.itemIdentifier}:
-                                        </FormLabel>
-                                        <TextField
-                                            key={item.itemIdentifier}
-                                            placeholder={t('EngravingBackgroundColor')}
-                                            onChange={this.onChangeEngravingBackgroundColor(item)}
-                                            value={item.colorHex}
-                                            style={styles.input}
-                                            className={classes.inputAlign}
-                                        />
-                                    </div>
-                                ))}
+                            {isEngravingEffect(productionMethod) && (
+                                <React.Fragment>
+                                    <Typography>
+                                        {t('EngravingBackgroundColor')}
+                                    </Typography>
+                                    {
+                                        engravingBackgroundColors.map(item => (
+                                            <div
+                                                key={item.itemIdentifier}
+                                                className={classes.engravingBackgroundColor}
+                                            >
+                                                <FormLabel classes={{ root: classes.InputLabel }} component="legend">
+                                                    {item.itemIdentifier}:
+                                                </FormLabel>
+                                                <TextField
+                                                    key={item.itemIdentifier}
+                                                    placeholder={t('EngravingBackgroundColorPlaceholder')}
+                                                    onChange={this.onChangeEngravingBackgroundColor(item)}
+                                                    value={item.colorHex}
+                                                    style={styles.input}
+                                                    className={classes.inputAlign}
+                                                />
+                                            </div>
+                                        ))
+                                    }
+                                </React.Fragment>
+                                )}
                         </Grid>
                     </Grid>
                     <Grid item xs={12} className={classes.checkboxGrid}>

package/src/Screens/Designer/SubScreens/DesignAreas/Translations.js

@@ -6,7 +6,8 @@ require('../../../../App/i18n').use(
             isDefault: 'default',
             allowBulkNames: 'Allow bulk names',
             varyingDefaultColors: 'Varying Default Color',
-            EngravingBackgroundColor: 'Color value',
+            EngravingBackgroundColorPlaceholder: 'Color value',
+            EngravingBackgroundColor: 'Engraving color',
             errors: {
                 noProdMethodLeft: 'No more production methods exist.',
             },
@@ -43,6 +44,7 @@ require('../../../../App/i18n').use(
                 uploadAndSave: 'Upload and save',
                 uploadFailed: 'Failed to upload the SVG',
                 uploadInProgress: 'Upload in progress, please wait...',
+                embeddedImageError: 'The provided file contains an embedded raster graphic. Please use plain / vector only svg files.'
             },
             validation: {
                 designProductionMethod: {
@@ -75,7 +77,8 @@ require('../../../../App/i18n').use(
             isDefault: 'Standard',
             allowBulkNames: 'Einzelnamen erlauben',
             varyingDefaultColors: 'abweichende Standardfarbe',
-            EngravingBackgroundColor: 'Farbwert',
+            EngravingBackgroundColorPlaceholder: 'Farbwert',
+            EngravingBackgroundColor: 'Gravurfarbe',
             errors: {
                 noProdMethodLeft: 'Keine weiteren Produktionsverfahren vorhanden.',
             },
@@ -106,6 +109,7 @@ require('../../../../App/i18n').use(
                 uploadAndSave: 'Hochladen und speichern',
                 uploadFailed: 'Fehler beim Hochladen von SVG',
                 uploadInProgress: 'Upload läuft, bitte warten...',
+                embeddedImageError: 'Die gewählte Datei enthält eingebettete Pixelgrafiken und kann nicht verwendet werden. Bitte wähle eine Datei, die ausschließlich Vektordaten enthält.'
             },
             validation: {
                 designProductionMethod: {

package/src/Screens/Designer/__tests__/__snapshots__/FormProductionMethods.test.js.snap

@@ -51,9 +51,6 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
             </svg>
           </div>
         </div>
-        <p
-          class="MuiFormHelperText-root-197 MuiFormHelperText-filled-203"
-        />
       </div>
       <div
         class="MuiGrid-item-44 MuiGrid-grid-xs-12-83"
@@ -63,13 +60,13 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
       class="MuiGrid-item-44 MuiGrid-grid-xs-12-83 FormProductionMethods-checkboxGrid-1"
     >
       <label
-        class="MuiFormControlLabel-root-205"
+        class="MuiFormControlLabel-root-197"
       >
         <span
-          class="MuiButtonBase-root-227 MuiIconButton-root-221 MuiPrivateSwitchBase-root-217 MuiCheckbox-root-211 MuiCheckbox-colorPrimary-215"
+          class="MuiButtonBase-root-219 MuiIconButton-root-213 MuiPrivateSwitchBase-root-209 MuiCheckbox-root-203 MuiCheckbox-colorPrimary-207"
         >
           <span
-            class="MuiIconButton-label-226"
+            class="MuiIconButton-label-218"
           >
             <svg
               aria-hidden="true"
@@ -83,7 +80,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
               />
             </svg>
             <input
-              class="MuiPrivateSwitchBase-input-220"
+              class="MuiPrivateSwitchBase-input-212"
               data-indeterminate="false"
               type="checkbox"
               value="varyingDimensions"
@@ -91,7 +88,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
           </span>
         </span>
         <span
-          class="MuiTypography-root-230 MuiTypography-body1-239 MuiFormControlLabel-label-210"
+          class="MuiTypography-root-222 MuiTypography-body1-231 MuiFormControlLabel-label-202"
         >
           varyingDimensions
         </span>
@@ -101,13 +98,13 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
       class="MuiGrid-item-44 MuiGrid-grid-xs-12-83 FormProductionMethods-checkboxGrid-1"
     >
       <label
-        class="MuiFormControlLabel-root-205"
+        class="MuiFormControlLabel-root-197"
       >
         <span
-          class="MuiButtonBase-root-227 MuiIconButton-root-221 MuiPrivateSwitchBase-root-217 MuiCheckbox-root-211 MuiCheckbox-colorPrimary-215"
+          class="MuiButtonBase-root-219 MuiIconButton-root-213 MuiPrivateSwitchBase-root-209 MuiCheckbox-root-203 MuiCheckbox-colorPrimary-207"
         >
           <span
-            class="MuiIconButton-label-226"
+            class="MuiIconButton-label-218"
           >
             <svg
               aria-hidden="true"
@@ -121,7 +118,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
               />
             </svg>
             <input
-              class="MuiPrivateSwitchBase-input-220"
+              class="MuiPrivateSwitchBase-input-212"
               data-indeterminate="false"
               type="checkbox"
               value="allowBulkNames"
@@ -129,7 +126,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
           </span>
         </span>
         <span
-          class="MuiTypography-root-230 MuiTypography-body1-239 MuiFormControlLabel-label-210"
+          class="MuiTypography-root-222 MuiTypography-body1-231 MuiFormControlLabel-label-202"
         >
           allowBulkNames
         </span>
@@ -139,13 +136,13 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
       class="MuiGrid-item-44 MuiGrid-grid-xs-12-83 FormProductionMethods-checkboxGrid-1"
     >
       <label
-        class="MuiFormControlLabel-root-205"
+        class="MuiFormControlLabel-root-197"
       >
         <span
-          class="MuiButtonBase-root-227 MuiIconButton-root-221 MuiPrivateSwitchBase-root-217 MuiCheckbox-root-211 MuiCheckbox-colorPrimary-215"
+          class="MuiButtonBase-root-219 MuiIconButton-root-213 MuiPrivateSwitchBase-root-209 MuiCheckbox-root-203 MuiCheckbox-colorPrimary-207"
         >
           <span
-            class="MuiIconButton-label-226"
+            class="MuiIconButton-label-218"
           >
             <svg
               aria-hidden="true"
@@ -159,7 +156,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
               />
             </svg>
             <input
-              class="MuiPrivateSwitchBase-input-220"
+              class="MuiPrivateSwitchBase-input-212"
               data-indeterminate="false"
               type="checkbox"
               value="isDefault"
@@ -167,7 +164,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
           </span>
         </span>
         <span
-          class="MuiTypography-root-230 MuiTypography-body1-239 MuiFormControlLabel-label-210"
+          class="MuiTypography-root-222 MuiTypography-body1-231 MuiFormControlLabel-label-202"
         >
           isDefault
         </span>
@@ -177,13 +174,13 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
       class="MuiGrid-item-44 MuiGrid-grid-xs-12-83 FormProductionMethods-checkboxGrid-1"
     >
       <label
-        class="MuiFormControlLabel-root-205"
+        class="MuiFormControlLabel-root-197"
       >
         <span
-          class="MuiButtonBase-root-227 MuiIconButton-root-221 MuiPrivateSwitchBase-root-217 MuiCheckbox-root-211 MuiCheckbox-colorPrimary-215"
+          class="MuiButtonBase-root-219 MuiIconButton-root-213 MuiPrivateSwitchBase-root-209 MuiCheckbox-root-203 MuiCheckbox-colorPrimary-207"
         >
           <span
-            class="MuiIconButton-label-226"
+            class="MuiIconButton-label-218"
           >
             <svg
               aria-hidden="true"
@@ -197,7 +194,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
               />
             </svg>
             <input
-              class="MuiPrivateSwitchBase-input-220"
+              class="MuiPrivateSwitchBase-input-212"
               data-indeterminate="false"
               type="checkbox"
               value="varyingDefaultColors"
@@ -205,7 +202,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
           </span>
         </span>
         <span
-          class="MuiTypography-root-230 MuiTypography-body1-239 MuiFormControlLabel-label-210"
+          class="MuiTypography-root-222 MuiTypography-body1-231 MuiFormControlLabel-label-202"
         >
           varyingDefaultColors
         </span>
@@ -215,13 +212,13 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
       class="MuiGrid-item-44 MuiGrid-grid-xs-12-83 FormProductionMethods-checkboxGrid-1"
     >
       <label
-        class="MuiFormControlLabel-root-205"
+        class="MuiFormControlLabel-root-197"
       >
         <span
-          class="MuiButtonBase-root-227 MuiIconButton-root-221 MuiPrivateSwitchBase-root-217 MuiCheckbox-root-211 MuiCheckbox-colorPrimary-215"
+          class="MuiButtonBase-root-219 MuiIconButton-root-213 MuiPrivateSwitchBase-root-209 MuiCheckbox-root-203 MuiCheckbox-colorPrimary-207"
         >
           <span
-            class="MuiIconButton-label-226"
+            class="MuiIconButton-label-218"
           >
             <svg
               aria-hidden="true"
@@ -235,7 +232,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
               />
             </svg>
             <input
-              class="MuiPrivateSwitchBase-input-220"
+              class="MuiPrivateSwitchBase-input-212"
               data-indeterminate="false"
               type="checkbox"
               value="designElementsLocked"
@@ -243,7 +240,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
           </span>
         </span>
         <span
-          class="MuiTypography-root-230 MuiTypography-body1-239 MuiFormControlLabel-label-210"
+          class="MuiTypography-root-222 MuiTypography-body1-231 MuiFormControlLabel-label-202"
         >
           designElementsLocked
         </span>
@@ -253,13 +250,13 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
       class="MuiGrid-item-44 MuiGrid-grid-xs-12-83 FormProductionMethods-checkboxGrid-1"
     >
       <label
-        class="MuiFormControlLabel-root-205"
+        class="MuiFormControlLabel-root-197"
       >
         <span
-          class="MuiButtonBase-root-227 MuiIconButton-root-221 MuiPrivateSwitchBase-root-217 MuiCheckbox-root-211 MuiCheckbox-colorPrimary-215"
+          class="MuiButtonBase-root-219 MuiIconButton-root-213 MuiPrivateSwitchBase-root-209 MuiCheckbox-root-203 MuiCheckbox-colorPrimary-207"
         >
           <span
-            class="MuiIconButton-label-226"
+            class="MuiIconButton-label-218"
           >
             <svg
               aria-hidden="true"
@@ -273,7 +270,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
               />
             </svg>
             <input
-              class="MuiPrivateSwitchBase-input-220"
+              class="MuiPrivateSwitchBase-input-212"
               data-indeterminate="false"
               type="checkbox"
               value="oneLineText"
@@ -281,7 +278,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
           </span>
         </span>
         <span
-          class="MuiTypography-root-230 MuiTypography-body1-239 MuiFormControlLabel-label-210"
+          class="MuiTypography-root-222 MuiTypography-body1-231 MuiFormControlLabel-label-202"
         >
           oneLineText
         </span>
@@ -294,7 +291,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
         class="MuiFormControl-root-143"
       >
         <label
-          class="MuiFormLabel-root-277 MuiInputLabel-root-266 MuiInputLabel-formControl-271 MuiInputLabel-animated-274"
+          class="MuiFormLabel-root-269 MuiInputLabel-root-258 MuiInputLabel-formControl-263 MuiInputLabel-animated-266"
           data-shrink="false"
         >
           minimumOrderAmount
@@ -318,7 +315,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
         class="FormProductionMethods-inputWithLabel-14"
       >
         <legend
-          class="MuiFormLabel-root-277"
+          class="MuiFormLabel-root-269"
         >
            maxTextElements 
         </legend>
@@ -344,7 +341,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
         class="FormProductionMethods-inputWithLabel-14"
       >
         <legend
-          class="MuiFormLabel-root-277"
+          class="MuiFormLabel-root-269"
         >
            maxImageElements 
         </legend>
@@ -370,7 +367,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
         class="FormProductionMethods-inputWithLabel-14"
       >
         <legend
-          class="MuiFormLabel-root-277"
+          class="MuiFormLabel-root-269"
         >
            maxTotalElements 
         </legend>
@@ -404,14 +401,14 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
         class="MuiGrid-item-44 MuiGrid-grid-xs-12-83"
       >
         <button
-          class="MuiButtonBase-root-227 MuiIconButton-root-221"
+          class="MuiButtonBase-root-219 MuiIconButton-root-213"
           id="remove"
           label="Remove"
           tabindex="0"
           type="button"
         >
           <span
-            class="MuiIconButton-label-226"
+            class="MuiIconButton-label-218"
           >
             <svg
               aria-hidden="true"

package/src/UIComponents/SelectField.js

@@ -59,7 +59,9 @@ class UISelectField extends React.Component {
                     )}
                     {children}
                 </Select>
-                <FormHelperText>{error}</FormHelperText>
+                {error &&
+                    <FormHelperText>{error}</FormHelperText>
+                }
             </FormControl>
         );
     }