@configuratorware/configurator-frontendgui 1.57.16 → 1.58.0

package/App/Modules/Designer/Components/ImageControlbox/index.js

@@ -27,6 +27,7 @@ var _ObjectTools = _interopRequireDefault(require("../ObjectTools"));
 var _AnalyticsWrapper = _interopRequireDefault(require("../../../../Shared/Components/Analytics/AnalyticsWrapper"));
 var _CustomDialog = _interopRequireDefault(require("../../../../../Shared/Components/CustomDialog"));
 var _customClassName = _interopRequireDefault(require("../../../../Utils/customClassName"));
+var _MainButton = _interopRequireDefault(require("../../../../../Shared/Components/MainButton"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
@@ -67,11 +68,15 @@ var styles = function styles(theme) {
       width: 50,
       margin: '15px 5px 0 0'
     })), _CardContentWrapper),
+    printQualityContainer: {
+      flexWrap: 'nowrap',
+      marginBottom: 15,
+      gap: 8
+    },
     printQuality: _defineProperty({
       display: 'inline-flex',
       alignItems: 'center',
       backgroundColor: '#000000',
-      marginBottom: 15,
       borderRadius: '4px',
       color: '#fff',
       padding: '10px',
@@ -178,7 +183,8 @@ var ImageControlbox = /*#__PURE__*/function (_React$Component) {
         lg: 12
       }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         container: true,
-        alignItems: "center"
+        alignItems: "center",
+        className: classes.printQualityContainer
       }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
         lg: printQualityInfoExists ? 10 : 12,
@@ -227,12 +233,13 @@ var ImageControlbox = /*#__PURE__*/function (_React$Component) {
         title: (0, _i18n.t)('imageControlbox.editButtonTooltip')
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "edit")))))))), /*#__PURE__*/_react["default"].createElement(_CustomDialog["default"], {
         open: printQualityInfoDialogOpen,
+        onCancel: this.handlePrintQualityInfoDialogClose,
         onClose: this.handlePrintQualityInfoDialogClose
       }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], {
         id: "alert-dialog-description"
-      }, (0, _i18n.t)('imageControlbox.printQuality.' + printQuality))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-        onClick: this.handlePrintQualityInfoDialogClose,
-        color: "primary"
+      }, (0, _i18n.t)('imageControlbox.printQuality.' + printQuality))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_MainButton["default"], {
+        variant: "contained",
+        onClick: this.handlePrintQualityInfoDialogClose
       }, "OK"))));
     }
   }]);

package/App/Screens/DesignerProductPreview/Screen.js

@@ -24,7 +24,7 @@ var _Actions = require("../../Reducers/ImageGallery/Actions");
 var _Selectors3 = require("../../Reducers/UI/Selectors");
 var _ImageUpload = _interopRequireDefault(require("../../Modules/Designer/Components/ImageEditDialog/ImageUpload"));
 var _ImageColorPicker = _interopRequireDefault(require("../../Modules/Designer/Components/ImageColorPicker/ImageColorPicker"));
-var _Transformers = require("../../Modules/Designer/Utils/Transformers");
+var _DesignDataService = require("../../Services/DesignDataService");
 var _Progress = _interopRequireDefault(require("../../Shared/Components/Progress/Progress"));
 var _ThemeProvider = _interopRequireDefault(require("../Configurator/ThemeProvider"));
 var _DesignerProductPreviewManager = require("./DesignerProductPreviewManager");
@@ -168,37 +168,81 @@ var DesignerProductPreviewScreen = function DesignerProductPreviewScreen(props)
   (0, _react.useEffect)(function () {
     setApplied(false);
   }, [editParams]);
-  var previewSrc = (0, _react.useMemo)(function () {
-    return imageData && "".concat((0, _Transformers.getRasterURL)((0, _Selectors2.getPreviewUrlFromImageData)(imageData.preview)), "?").concat(Math.random());
-  }, [imageData]);
-  var nextAction = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  var _useState9 = (0, _react.useState)(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    previewSrc = _useState0[0],
+    setPreviewSrc = _useState0[1];
+  (0, _react.useEffect)(function () {
+    var _imageData$preview;
+    if (!(imageData !== null && imageData !== void 0 && (_imageData$preview = imageData.preview) !== null && _imageData$preview !== void 0 && _imageData$preview.url)) {
+      setPreviewSrc(null);
+      return;
+    }
+    var cancelled = false;
+    var previewUrl = (0, _Selectors2.getPreviewUrlFromImageData)(imageData.preview);
+    var isSvg = /\.svg$/.test(previewUrl);
+    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var svgContent;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            _context.t0 = step;
-            _context.next = _context.t0 === Steps.upload ? 3 : _context.t0 === Steps.removeBackground ? 5 : 10;
+            if (!isSvg) {
+              _context.next = 9;
+              break;
+            }
+            _context.next = 3;
+            return (0, _DesignDataService.getSvgContent)(previewUrl, true, true);
+          case 3:
+            svgContent = _context.sent;
+            if (!cancelled) {
+              _context.next = 6;
+              break;
+            }
+            return _context.abrupt("return");
+          case 6:
+            setPreviewSrc((0, _DesignDataService.applySvgContentOperations)(imageData.original, imageData.preview, null, svgContent));
+            _context.next = 10;
+            break;
+          case 9:
+            setPreviewSrc("".concat(previewUrl, "?").concat(Math.random()));
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }))();
+    return function () {
+      cancelled = true;
+    };
+  }, [imageData]);
+  var nextAction = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.t0 = step;
+            _context2.next = _context2.t0 === Steps.upload ? 3 : _context2.t0 === Steps.removeBackground ? 5 : 10;
             break;
           case 3:
             imageUploadRef.current.uploadFile();
-            return _context.abrupt("break", 10);
+            return _context2.abrupt("break", 10);
           case 5:
-            _context.next = 7;
+            _context2.next = 7;
             return editFile(_objectSpread(_objectSpread({}, editParams), {}, {
               vectorize: true
             }), imageData);
           case 7:
             manager.useImage();
             setApplied(true);
-            return _context.abrupt("break", 10);
+            return _context2.abrupt("break", 10);
           case 10:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee);
+      }, _callee2);
     }));
     return function nextAction() {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
   var updateParams = function updateParams(params) {
@@ -222,8 +266,8 @@ var DesignerProductPreviewScreen = function DesignerProductPreviewScreen(props)
       clippingColor: editParams.clippingColor || _Constants.defaultClippingColor
     }));
   };
-  var onClippingChange = function onClippingChange(_ref2) {
-    var clipping = _ref2.target.value;
+  var onClippingChange = function onClippingChange(_ref3) {
+    var clipping = _ref3.target.value;
     return updateParams(_objectSpread(_objectSpread({}, editParams), {}, {
       clipping: clipping
     }));

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

@@ -606,7 +606,7 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
           root: classes.AmountPriceButton,
           sizeSmall: classes.smallButtonSize
         }
-      }, amount, " ", (0, _i18n.t)('amountPrice.pieces'))), !hidePrices && /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+      }, amount, ' ', amount === 1 ? (0, _i18n.t)('amountPrice.piece') : (0, _i18n.t)('amountPrice.pieces'))), !hidePrices && /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
         xs: 12,
         sm: 6,

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

@@ -101,6 +101,19 @@ it('renders without callToAction', function () {
   }));
   expect(tree).toMatchSnapshot();
 });
+it('renders singular piece label when amount is 1', function () {
+  var tree = (0, _enzyme.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    width: "lg",
+    amount: 1,
+    priceFormatted: "500,00 \u20AC",
+    vatNotice: "VAT included plus shipping",
+    priceList: mockedPriceData,
+    onChangeAmount: _noop["default"],
+    ConfigurationModeSwitchComponent: getDefaultComponent
+  }));
+  expect(tree.text()).toContain('1 amountPrice.piece');
+  expect(tree.text()).not.toContain('amountPrice.pieces');
+});
 it('renders receiveOfferForm', function () {
   var tree = (0, _enzyme.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
     showReceiveOfferForm: true,

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

@@ -142,7 +142,7 @@ var PriceList = /*#__PURE__*/function (_React$Component) {
           root: classes.MuiTypographyNoWrap,
           gutterBottom: classes.gutterBottom
         }
-      }, amount, " ", (0, _i18n.t)('amountPrice.pieces')), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
+      }, amount, " ", amount === 1 ? (0, _i18n.t)('amountPrice.piece') : (0, _i18n.t)('amountPrice.pieces')), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
         className: classes.listItemPrimary,
         primary: productTitle
       }))), list && list.length > 0 && /*#__PURE__*/_react["default"].createElement(_List["default"], {

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

@@ -173,10 +173,9 @@ var ProductVariant = /*#__PURE__*/function (_React$Component) {
               sizes: _objectSpread(_objectSpread({}, state.sizes), {}, _defineProperty({}, size.identifier, value))
             };
           });
-        } else {
-          if ((0, _isFunction["default"])(_this.props.handleChange)) {
-            _this.props.handleChange(variant, size, value);
-          }
+        }
+        if ((0, _isFunction["default"])(_this.props.handleChange)) {
+          _this.props.handleChange(variant, size, value);
         }
       };
     });
@@ -350,9 +349,9 @@ var ProductVariant = /*#__PURE__*/function (_React$Component) {
             label: classes.ButtonOutlinedRootLabel
           }
         }, (0, _i18n.t)('productVariant.confirmSelection'))), (0, _get["default"])(variant, 'sizes.length', 0) === 0 && /*#__PURE__*/_react["default"].createElement(_AmountInput["default"], {
-          value: variant.amount + ' ' + (0, _i18n.t)('amountSelection.amount'),
-          amountLabel: (0, _i18n.t)('productVariant.amountLabel'),
+          value: variant.amount + ' ' + (variant.amount === 1 ? (0, _i18n.t)('amountSelection.piece') : (0, _i18n.t)('amountSelection.amount')),
           hasValueLabel: true,
+          amountLabel: (0, _i18n.t)('productVariant.amountLabel'),
           onChange: _this2.handleChange(variant),
           onClick: _this2.handleBulkNameForm(variant),
           error: hasError(variant.identifier, error),

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

@@ -37,7 +37,6 @@ var styles = function styles(theme) {
     iconHover: {
       margin: theme.spacing(1),
       textAlign: 'center',
-      verticalAlign: 'middle',
       lineHeight: '24px',
       width: '24px',
       height: '24px',

package/package.json

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

package/public/translations/de_DE.json

@@ -30,6 +30,7 @@
     "configurationOverview": "Meine Konfiguration",
     "productVariants": "Produktvarianten",
     "contactData": "Kontaktdaten",
+    "piece": "Stück",
     "pieces": "Stück",
     "vatNotice": "inkl.MwSt. zzgl. Versand",
     "vatNoticeNet": "exkl.MwSt. zzgl. Versand",
@@ -43,6 +44,7 @@
   },
   "amountSelection": {
     "total": "Gesamt: ",
+    "piece": "Stück",
     "amount": "Stück"
   },
   "textControlbox": {

package/public/translations/en_GB.json

@@ -33,6 +33,7 @@
     "notice": "Notices",
     "intoCart": "Add to basket",
     "amount": "amount",
+    "piece": "piece",
     "pieces": "pieces",
     "vatNotice": "VAT included plus shipping",
     "vatNoticeNet": "VAT excluded plus shipping",
@@ -43,6 +44,7 @@
   },
   "amountSelection": {
     "total": "Total: %{value} amount",
+    "piece": "piece",
     "amount": "pieces"
   },
   "textControlbox": {

package/src/App/Modules/Designer/Components/ImageControlbox/index.js

@@ -21,6 +21,7 @@ import ObjectTools from '../ObjectTools';
 import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
 import CustomDialog from 'Shared/Components/CustomDialog';
 import customClassName from 'App/Utils/customClassName';
+import MainButton from 'Shared/Components/MainButton';
 
 const styles = theme => ({
     card: {
@@ -49,11 +50,15 @@ const styles = theme => ({
             },
         },
     },
+    printQualityContainer: {
+        flexWrap: 'nowrap',
+        marginBottom: 15,
+        gap: 8,
+    },
     printQuality: {
         display: 'inline-flex',
         alignItems: 'center',
         backgroundColor: '#000000',
-        marginBottom: 15,
         borderRadius: '4px',
         color: '#fff',
         padding: '10px',
@@ -175,7 +180,7 @@ class ImageControlbox extends React.Component {
                     <CardContent className={boxed ? '' : classes.CardContentWrapper}>
                         <Grid container>
                             <Grid item xs={12} lg={12}>
-                                <Grid container alignItems="center">
+                                <Grid container alignItems="center" className={classes.printQualityContainer}>
                                     <Grid
                                         item
                                         lg={printQualityInfoExists ? 10 : 12}
@@ -236,6 +241,7 @@ class ImageControlbox extends React.Component {
                 </Card>
                 <CustomDialog
                     open={printQualityInfoDialogOpen}
+                    onCancel={this.handlePrintQualityInfoDialogClose}
                     onClose={this.handlePrintQualityInfoDialogClose}
                 >
                     <DialogContent>
@@ -244,9 +250,9 @@ class ImageControlbox extends React.Component {
                         </DialogContentText>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={this.handlePrintQualityInfoDialogClose} color="primary">
+                        <MainButton variant="contained" onClick={this.handlePrintQualityInfoDialogClose}>
                             OK
-                        </Button>
+                        </MainButton>
                     </DialogActions>
                 </CustomDialog>
             </React.Fragment>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { connect } from 'react-redux';
@@ -20,7 +20,7 @@ import { editImage, WN_UPLOAD_IMAGE } from '../../Reducers/ImageGallery/Actions'
 import { createBackgroundWorkStateSelector } from '../../Reducers/UI/Selectors';
 import ImageUpload from '../../Modules/Designer/Components/ImageEditDialog/ImageUpload';
 import ColorPicker from '../../Modules/Designer/Components/ImageColorPicker/ImageColorPicker';
-import { getRasterURL } from '../../Modules/Designer/Utils/Transformers';
+import { applySvgContentOperations, getSvgContent } from '../../Services/DesignDataService';
 import Progress from '../../Shared/Components/Progress/Progress';
 import DefaultThemeProvider from '../Configurator/ThemeProvider';
 import { createDesignerProductPreviewManager } from './DesignerProductPreviewManager';
@@ -137,8 +137,35 @@ const DesignerProductPreviewScreen = props => {
         setApplied(false);
     }, [editParams]);
 
-    const previewSrc = useMemo(() => {
-        return imageData && `${getRasterURL(getPreviewUrlFromImageData(imageData.preview))}?${Math.random()}`;
+    const [previewSrc, setPreviewSrc] = useState(null);
+
+    useEffect(() => {
+        if (!imageData?.preview?.url) {
+            setPreviewSrc(null);
+            return;
+        }
+
+        let cancelled = false;
+        const previewUrl = getPreviewUrlFromImageData(imageData.preview);
+        const isSvg = /\.svg$/.test(previewUrl);
+
+        (async () => {
+            if (isSvg) {
+                const svgContent = await getSvgContent(previewUrl, true, true);
+                if (cancelled) {
+                    return;
+                }
+                setPreviewSrc(
+                    applySvgContentOperations(imageData.original, imageData.preview, null, svgContent)
+                );
+            } else {
+                setPreviewSrc(`${previewUrl}?${Math.random()}`);
+            }
+        })();
+
+        return () => {
+            cancelled = true;
+        };
     }, [imageData]);
 
     const nextAction = async () => {

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

@@ -851,7 +851,8 @@ class AmountPrice extends React.Component {
                                             sizeSmall: classes.smallButtonSize,
                                         }}
                                     >
-                                        {amount} {t('amountPrice.pieces')}
+                                        {amount}{' '}
+                                        {amount === 1 ? t('amountPrice.piece') : t('amountPrice.pieces')}
                                     </Button>
                                 </Grid>
                             )}

package/src/App/Shared/Components/AmountPrice/index.test.jsx

@@ -113,6 +113,22 @@ it('renders without callToAction', () => {
     expect(tree).toMatchSnapshot();
 });
 
+it('renders singular piece label when amount is 1', () => {
+    const tree = render(
+        <AmountPrice
+            width="lg"
+            amount={1}
+            priceFormatted="500,00 €"
+            vatNotice="VAT included plus shipping"
+            priceList={mockedPriceData}
+            onChangeAmount={noop}
+            ConfigurationModeSwitchComponent={getDefaultComponent}
+        />
+    );
+    expect(tree.text()).toContain('1 amountPrice.piece');
+    expect(tree.text()).not.toContain('amountPrice.pieces');
+});
+
 it('renders receiveOfferForm', () => {
     const tree = render(
         <AmountPrice

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

@@ -122,7 +122,7 @@ class PriceList extends React.Component {
                                         gutterBottom: classes.gutterBottom,
                                     }}
                                 >
-                                    {amount} {t('amountPrice.pieces')}
+                                    {amount} {amount === 1 ? t('amountPrice.piece') : t('amountPrice.pieces')}
                                 </Typography>
 
                                 <ListItemText className={classes.listItemPrimary} primary={productTitle} />

package/src/App/Shared/Components/PriceList/index.test.js

@@ -69,6 +69,14 @@ it('does not show price for optional cost unchecked', async () => {
     expect(TypoWrapper).toHaveText('');
 });
 
+it('renders singular piece label when amount is 1 and list is empty', () => {
+    const tree = render(
+        <PriceList amount={1} list={[]} productTitle="Demo Hoodie" onSelectableChanged={noop} />
+    );
+    expect(tree.text()).toContain('1 amountPrice.piece');
+    expect(tree.text()).not.toContain('amountPrice.pieces');
+});
+
 it('shows the price for optional cost selected', () => {
     const priceList = [
         {

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

@@ -176,10 +176,9 @@ class ProductVariant extends React.Component {
             this.setState(state => ({
                 sizes: { ...state.sizes, [size.identifier]: value },
             }));
-        } else {
-            if (isFunction(this.props.handleChange)) {
-                this.props.handleChange(variant, size, value);
-            }
+        }
+        if (isFunction(this.props.handleChange)) {
+            this.props.handleChange(variant, size, value);
         }
     };
 
@@ -373,9 +372,15 @@ class ProductVariant extends React.Component {
                                     )}
                                     {get(variant, 'sizes.length', 0) === 0 && (
                                         <AmountInput
-                                            value={variant.amount + ' ' + t('amountSelection.amount')}
-                                            amountLabel={t('productVariant.amountLabel')}
+                                            value={
+                                                variant.amount +
+                                                ' ' +
+                                                (variant.amount === 1
+                                                    ? t('amountSelection.piece')
+                                                    : t('amountSelection.amount'))
+                                            }
                                             hasValueLabel={true}
+                                            amountLabel={t('productVariant.amountLabel')}
                                             onChange={this.handleChange(variant)}
                                             onClick={this.handleBulkNameForm(variant)}
                                             error={hasError(variant.identifier, error)}

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

@@ -16,7 +16,6 @@ const styles = theme => ({
     iconHover: {
         margin: theme.spacing(1),
         textAlign: 'center',
-        verticalAlign: 'middle',
         lineHeight: '24px',
         width: '24px',
         height: '24px',