@configuratorware/configurator-frontendgui 1.33.4 → 1.34.1

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

@@ -356,6 +356,13 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
       }, _callee, null, [[9, 17]]);
     })));
 
+    _defineProperty(_assertThisInitialized(_this), "getAllowedImageFormats", function () {
+      var formats = (0, _configuration.getConf)('designer.allowedImageUploadFormats').split(',');
+      return formats ? formats.map(function (format) {
+        return ".".concat(format);
+      }) : 'image/*';
+    });
+
     _this.state = {
       selectedFile: null,
       ownershipChecked: false,
@@ -402,6 +409,7 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
         className: classes.imageUploadButton
       }, (0, _i18n.t)('fileUpload.chooseImage'), /*#__PURE__*/_react["default"].createElement("input", {
         type: "file",
+        accept: this.getAllowedImageFormats(),
         onChange: this.handleInputChange
       }))), selectedFile !== null && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, imageData && /*#__PURE__*/_react["default"].createElement("img", {
         className: classes.imagePreview,
@@ -427,6 +435,7 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
         className: "".concat(classes.imageUploadButton, " ").concat(classes.imageUploadChangeImageButton)
       }, /*#__PURE__*/_react["default"].createElement(_Loop["default"], null), " ", (0, _i18n.t)('fileUpload.changeImage'), /*#__PURE__*/_react["default"].createElement("input", {
         type: "file",
+        accept: this.getAllowedImageFormats(),
         onChange: this.handleInputChange
       }))))), checkOwnership && /*#__PURE__*/_react["default"].createElement(_FormGroup["default"], {
         classes: {

package/App/Reducers/Configurator/Selectors.js

@@ -103,11 +103,14 @@ exports.getCurrentVisualizationSettings = getCurrentVisualizationSettings;
 var visualizationModeCheck = (0, _flow["default"])(getCurrentVisualizationSettings, function (mode) {
   return {
     is2D: function is2D() {
-      return mode === '2dVariant' || mode === '2dLayer' || mode === '2d' || mode === 'layer';
+      return mode === '2dVariant' || mode === '2dVariantOverlay' || mode === '2dLayer' || mode === '2d' || mode === 'layer';
     },
     is3D: function is3D() {
       return mode === '3dVariant' || mode === '3dScene' || mode === '3d';
     },
+    is2DOverlay: function is2DOverlay() {
+      return mode === '2dVariantOverlay';
+    },
     isDefault: function isDefault() {
       return mode === 'default';
     }

package/App/Reducers/ImageGallery/Selectors.js

@@ -170,10 +170,9 @@ var showVectorizeImageQuality = function showVectorizeImageQuality(imageToAnalys
 
   if (imageToAnalyse) {
     var pixelsInTheImage = (0, _get["default"])(imageToAnalyse, 'original.width', 0) * (0, _get["default"])(imageToAnalyse, 'original.height', 0);
-    var vectorFormats = ['ai', 'pdf', 'svg', 'eps', 'ps', 'ept'];
-    var hasVectorFormat = vectorFormats.indexOf((0, _get["default"])(imageToAnalyse, 'original.format', '').toLowerCase()) > -1;
+    var hasFormatSVG = (0, _get["default"])(imageToAnalyse, 'original.format', '').toLowerCase() === 'svg';
     var pixelsOfReference = minimumPixelAmount || (0, _configuration.getConf)('vectorizeImageQuality');
-    return !hasVectorFormat && pixelsInTheImage < pixelsOfReference;
+    return !hasFormatSVG && pixelsInTheImage < pixelsOfReference;
   }
 
   return false;

package/App/Screens/Configurator/Screen.js

@@ -197,7 +197,7 @@ var mapStateToProps = function mapStateToProps(state) {
   var vertical = dock ? dock === 'left' : state.device.screen.orientation === 'landscape';
   var showAddToCartButton = state.ui.visibilityMap.addToCartButton;
   var showConfigurationVariantSelection = state.ui.visibilityMap.configurationvariantSelection;
-  var visualizationOverlayMode = (0, _configuration.getConf)('visualizationOverlayMode');
+  var visualizationOverlayMode = (0, _Selectors.visualizationModeCheck)(state).is2DOverlay();
   var configuration = {
     showAddToCartButton: (0, _configuration.getConf)('showAddToCartButton'),
     editCustomTitle: (0, _configuration.getConf)('editCustomTitleBeforeSave'),

package/App/Services/DesignDataService.js

@@ -450,8 +450,6 @@ var applySvgContentOperations = function applySvgContentOperations(preview, oper
 
   if (svgTags && svgTags[0]) {
     var svgTag = svgTags[0];
-    var percentageHeight = /height=["']\d+%["']/;
-    var percentageWidth = /width=["']\d+%["']/;
 
     if (svgTag.indexOf('viewBox=') === -1) {
       svgContent = svgContent.replace('<svg', "<svg viewBox=\"0 0 ".concat(preview.width, " ").concat(preview.height, "\""));
@@ -464,18 +462,7 @@ var applySvgContentOperations = function applySvgContentOperations(preview, oper
     if (svgTag.indexOf('width=') === -1) {
       svgContent = svgContent.replace('<svg', "<svg width=\"".concat(preview.width, "px\""));
     }
-
-    if (percentageHeight.test(svgTag)) {
-      svgContent = svgContent.replace(percentageHeight, "height=\"".concat(preview.height, "px\""));
-    }
-
-    if (percentageWidth.test(svgTag)) {
-      svgContent = svgContent.replace(percentageWidth, "width=\"".concat(preview.width, "px\""));
-    }
-  } // remove doctype if present
-
-
-  svgContent = svgContent.replace(/<!DOCTYPE(?:(?!>)[\s\S])*>/gi, '');
+  }
 
   if (operations && operations.vectorize && operations.vectorizeColorsMap && Object.keys(operations.vectorizeColorsMap).length) {
     var colorRegex = new RegExp("(".concat(Object.keys(operations.vectorizeColorsMap).join('|'), ")"), 'ig');

package/App/Services/InteractionService.js

@@ -657,12 +657,16 @@ var InteractionService = /*#__PURE__*/function (_AbstractInteractionS) {
     value: function createPdfUrl() {
       var documentType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'user';
       var configuration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (0, _Selectors.getConfiguration)(_ServiceLocator.Services.configurator.state);
+      var queryParams = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
-      var params = _Api["default"].getGETParameters();
+      var params = _objectSpread(_objectSpread({}, _Api["default"].getGETParameters()), queryParams);
 
+      var customKeys = Object.keys(queryParams);
+      var keys = ['_language', '_client', '_channel', '_display_net_prices', '_share_url'];
+      var mergedKeys = keys.concat(customKeys);
       var query = new URLSearchParams(location.search);
       var queryString = Object.keys(params).filter(function (key) {
-        return ['_language', '_client', '_channel', '_display_net_prices', '_share_url'].indexOf(key) !== -1;
+        return mergedKeys.indexOf(key) !== -1;
       }).map(function (key) {
         return key === '_share_url' ? key + '=' + encodeURIComponent(params[key]) : key + '=' + params[key];
       }).join('&');

package/App/Services/VisualizationService.js

@@ -433,7 +433,8 @@ var VisualizationService = /*#__PURE__*/function (_AbstractVisualizatio) {
 
       var isAdminMode = (0, _configuration.getConf)('adminMode');
       (0, _sendMessage["default"])(component, 'clearViewIfEmpty', !!isAdminMode);
-      var visualizationOverlayMode = (0, _configuration.getConf)('visualizationOverlayMode');
+      var state = _ServiceLocator.Services.store.state;
+      var visualizationOverlayMode = (0, _Selectors2.visualizationModeCheck)(state).is2DOverlay();
       (0, _sendMessage["default"])(component, 'setOverlayMode', !!visualizationOverlayMode);
       var visualizationOptions = (0, _configuration.getConf)('visualization.options');
       (0, _sendMessage["default"])(component, 'setOptions', visualizationOptions);

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

@@ -52,7 +52,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var styles = function styles(theme) {
-  var _MuiFormControlRoot;
+  var _MuiFormControlRoot, _checkboxLabel, _checkbox;
 
   return {
     MuiFormControlRoot: (_MuiFormControlRoot = {
@@ -63,13 +63,18 @@ var styles = function styles(theme) {
     }), _defineProperty(_MuiFormControlRoot, '& label', {
       fontSize: 15
     }), _MuiFormControlRoot),
-    checkboxLabel: _defineProperty({
+    checkboxLabel: (_checkboxLabel = {
       fontSize: 15,
       paddingLeft: 15,
       paddingBottom: 12
-    }, theme.breakpoints.down('xs'), {
-      paddingLeft: 12
-    }),
+    }, _defineProperty(_checkboxLabel, theme.breakpoints.down('xs'), {
+      paddingLeft: 2
+    }), _defineProperty(_checkboxLabel, "alignItems", 'start'), _checkboxLabel),
+    checkbox: (_checkbox = {
+      margin: '0 10px'
+    }, _defineProperty(_checkbox, theme.breakpoints.down('xs'), {
+      margin: '-12px 0 0 10px'
+    }), _defineProperty(_checkbox, "padding", '0'), _checkbox),
     formHelperText: {
       marginLeft: 45,
       marginBottom: 15
@@ -130,7 +135,8 @@ var AcceptDesign = /*#__PURE__*/function (_React$Component) {
           name: "approval",
           checked: approval.value,
           onChange: handleChangeCheckboxApproval,
-          color: "primary"
+          color: "primary",
+          className: classes.checkbox
         }),
         label: /*#__PURE__*/_react["default"].createElement("span", {
           dangerouslySetInnerHTML: {

package/App/configuration.js

@@ -31,7 +31,7 @@ var DEVELOPMENT_HOST_INT = 'http://int.configuratorware.local'; // eslint-disabl
 var DEVELOPMENT_HOST_LOCAL = 'http://localhost:10030';
 var hostsByNodeEnv = {
   production: '',
-  development: DEVELOPMENT_HOST_LOCAL,
+  development: DEVELOPMENT_HOST_INT,
   test: ''
 };
 var resourceUrlsByNodeEnv = {
@@ -186,9 +186,7 @@ var applicationConfiguration = {
   // automatically show the vectorization preview in colorizing step
   autoPreviewVectorization: true,
   // switch to the previously selected view when selecting a component that has no view specified
-  switchViewOnComponentSelection: true,
-  // the visualization behaves like it was a mask over the designer canvas
-  visualizationOverlayMode: false
+  switchViewOnComponentSelection: true
 };
 /**
  * document.domain can be set via a GET Param or is defaulted to

package/package.json

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

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

@@ -287,6 +287,11 @@ class ImageEditDialog extends React.Component {
         }
     };
 
+    getAllowedImageFormats = () => {
+        const formats = getConf('designer.allowedImageUploadFormats').split(',');
+        return formats ? formats.map(format => `.${format}`) : 'image/*';
+    };
+
     render() {
         const { classes, width, checkOwnership } = this.props;
         const { ownershipChecked, ownershipErrorVisible, selectedFile, error, imageData } = this.state;
@@ -316,7 +321,11 @@ class ImageEditDialog extends React.Component {
                                     className={classes.imageUploadButton}
                                 >
                                     {t('fileUpload.chooseImage')}
-                                    <input type="file" onChange={this.handleInputChange} />
+                                    <input
+                                        type="file"
+                                        accept={this.getAllowedImageFormats()}
+                                        onChange={this.handleInputChange}
+                                    />
                                 </MainButton>
                             </React.Fragment>
                         )}
@@ -365,7 +374,11 @@ class ImageEditDialog extends React.Component {
                                     className={`${classes.imageUploadButton} ${classes.imageUploadChangeImageButton}`}
                                 >
                                     <LoopIcon /> {t('fileUpload.changeImage')}
-                                    <input type="file" onChange={this.handleInputChange} />
+                                    <input
+                                        type="file"
+                                        accept={this.getAllowedImageFormats()}
+                                        onChange={this.handleInputChange}
+                                    />
                                 </Button>
                             </React.Fragment>
                         )}

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

@@ -48,8 +48,14 @@ export const getCurrentVisualizationSettings = createSelector(
 );
 
 export const visualizationModeCheck = flow(getCurrentVisualizationSettings, mode => ({
-    is2D: () => mode === '2dVariant' || mode === '2dLayer' || mode === '2d' || mode === 'layer',
+    is2D: () =>
+        mode === '2dVariant' ||
+        mode === '2dVariantOverlay' ||
+        mode === '2dLayer' ||
+        mode === '2d' ||
+        mode === 'layer',
     is3D: () => mode === '3dVariant' || mode === '3dScene' || mode === '3d',
+    is2DOverlay: () => mode === '2dVariantOverlay',
     isDefault: () => mode === 'default',
 }));
 

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

@@ -119,12 +119,10 @@ export const showVectorizeImageQuality = (imageToAnalyse, minimumPixelAmount = n
     if (imageToAnalyse) {
         const pixelsInTheImage =
             get(imageToAnalyse, 'original.width', 0) * get(imageToAnalyse, 'original.height', 0);
-        const vectorFormats = ['ai', 'pdf', 'svg', 'eps', 'ps', 'ept'];
-        const hasVectorFormat =
-            vectorFormats.indexOf(get(imageToAnalyse, 'original.format', '').toLowerCase()) > -1;
+        const hasFormatSVG = get(imageToAnalyse, 'original.format', '').toLowerCase() === 'svg';
         const pixelsOfReference = minimumPixelAmount || getConf('vectorizeImageQuality');
 
-        return !hasVectorFormat && pixelsInTheImage < pixelsOfReference;
+        return !hasFormatSVG && pixelsInTheImage < pixelsOfReference;
     }
     return false;
 };

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

@@ -141,7 +141,7 @@ const mapStateToProps = state => {
     const vertical = dock ? dock === 'left' : state.device.screen.orientation === 'landscape';
     const showAddToCartButton = state.ui.visibilityMap.addToCartButton;
     const showConfigurationVariantSelection = state.ui.visibilityMap.configurationvariantSelection;
-    const visualizationOverlayMode = getConf('visualizationOverlayMode');
+    const visualizationOverlayMode = visualizationModeCheck(state).is2DOverlay();
 
     const configuration = {
         showAddToCartButton: getConf('showAddToCartButton'),

package/src/App/Screens/DesignerProductPreview/__tests__/__snapshots__/Screen.test.js.snap

@@ -38,6 +38,7 @@ exports[`Screens/DesignerProductPreview/Screen renders the initial image upload
           >
             fileUpload.chooseImage
             <input
+              accept=".jpg,.jpeg,.svg,.png,.pdf,.bmp,.tif,.tiff,.eps,.ai,.gif"
               type="file"
             />
           </span>

package/src/App/Services/DesignDataService.js

@@ -397,8 +397,6 @@ export const applySvgContentOperations = (preview, operations, svgContent) => {
 
     if (svgTags && svgTags[0]) {
         const svgTag = svgTags[0];
-        const percentageHeight = /height=["']\d+%["']/;
-        const percentageWidth = /width=["']\d+%["']/;
 
         if (svgTag.indexOf('viewBox=') === -1) {
             svgContent = svgContent.replace('<svg', `<svg viewBox="0 0 ${preview.width} ${preview.height}"`);
@@ -411,19 +409,8 @@ export const applySvgContentOperations = (preview, operations, svgContent) => {
         if (svgTag.indexOf('width=') === -1) {
             svgContent = svgContent.replace('<svg', `<svg width="${preview.width}px"`);
         }
-
-        if (percentageHeight.test(svgTag)) {
-            svgContent = svgContent.replace(percentageHeight, `height="${preview.height}px"`);
-        }
-
-        if (percentageWidth.test(svgTag)) {
-            svgContent = svgContent.replace(percentageWidth, `width="${preview.width}px"`);
-        }
     }
 
-    // remove doctype if present
-    svgContent = svgContent.replace(/<!DOCTYPE[^>]*>/gis, '');
-
     if (
         operations &&
         operations.vectorize &&

package/src/App/Services/InteractionService.js

@@ -296,15 +296,18 @@ export default class InteractionService extends AbstractInteractionService {
         }
     }
 
-    createPdfUrl(documentType = 'user', configuration = getConfiguration(Services.configurator.state)) {
-        const params = Api.getGETParameters();
+    createPdfUrl(
+        documentType = 'user',
+        configuration = getConfiguration(Services.configurator.state),
+        queryParams = {}
+    ) {
+        const params = { ...Api.getGETParameters(), ...queryParams };
+        const customKeys = Object.keys(queryParams);
+        const keys = ['_language', '_client', '_channel', '_display_net_prices', '_share_url'];
+        const mergedKeys = keys.concat(customKeys);
         const query = new URLSearchParams(location.search);
         let queryString = Object.keys(params)
-            .filter(
-                key =>
-                    ['_language', '_client', '_channel', '_display_net_prices', '_share_url'].indexOf(key) !==
-                    -1
-            )
+            .filter(key => mergedKeys.indexOf(key) !== -1)
             .map(key =>
                 key === '_share_url' ? key + '=' + encodeURIComponent(params[key]) : key + '=' + params[key]
             )

package/src/App/Services/VisualizationService.js

@@ -264,7 +264,8 @@ export default class VisualizationService extends AbstractVisualizationService {
         const isAdminMode = getConf('adminMode');
         sendMessage(component, 'clearViewIfEmpty', !!isAdminMode);
 
-        const visualizationOverlayMode = getConf('visualizationOverlayMode');
+        const state = Services.store.state;
+        const visualizationOverlayMode = visualizationModeCheck(state).is2DOverlay();
         sendMessage(component, 'setOverlayMode', !!visualizationOverlayMode);
 
         const visualizationOptions = getConf('visualization.options');

package/src/App/Shared/Components/AcceptDesign/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import { t } from 'Framework/i18n';
@@ -25,8 +26,16 @@ const styles = theme => ({
         paddingLeft: 15,
         paddingBottom: 12,
         [theme.breakpoints.down('xs')]: {
-            paddingLeft: 12,
+            paddingLeft: 2,
         },
+        alignItems: 'start',    
+    },
+    checkbox: {
+        margin: '0 10px',
+        [theme.breakpoints.down('xs')]: {
+            margin: '-12px 0 0 10px',
+        },
+        padding: '0',
     },
     formHelperText: {
         marginLeft: 45,
@@ -91,6 +100,7 @@ class AcceptDesign extends React.Component {
                                     checked={approval.value}
                                     onChange={handleChangeCheckboxApproval}
                                     color="primary"
+                                    className={classes.checkbox}
                                 />
                             }
                             label={

package/src/App/configuration.js

@@ -13,7 +13,7 @@ const DEVELOPMENT_HOST_LOCAL = 'http://localhost:10030';
 
 const hostsByNodeEnv = {
     production: '',
-    development: DEVELOPMENT_HOST_LOCAL,
+    development: DEVELOPMENT_HOST_INT,
     test: '',
 };
 
@@ -205,9 +205,6 @@ let applicationConfiguration = {
 
     // switch to the previously selected view when selecting a component that has no view specified
     switchViewOnComponentSelection: true,
-
-    // the visualization behaves like it was a mask over the designer canvas
-    visualizationOverlayMode: false,
 };
 
 /**