@configuratorware/configurator-frontendgui 1.29.5 → 1.30.2

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.29.5",
+  "version": "1.30.2",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.29.5",
+    "@configuratorware/scripts": "1.30.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.29.5",
-    "redhotmagma-visualization": "1.29.5",
+    "redhotmagma-graphics-editor": "1.30.2",
+    "redhotmagma-visualization": "1.30.2",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/src/App/Modules/Creator/Components/Option/__snapshots__/index.test.js.snap

@@ -128,7 +128,7 @@ exports[`Option renders with Incompatibility link 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root Option-materialIcon-50"
+                  class="MuiSvgIcon-root Option-materialIcon-50 custom-css-rule-info-icon-option"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
@@ -397,7 +397,7 @@ exports[`Option renders with details 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root Option-materialIcon-39"
+                  class="MuiSvgIcon-root Option-materialIcon-39 custom-css-rule-info-icon-option"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >

package/src/App/Modules/Creator/Components/Option/index.js

@@ -357,7 +357,12 @@ const Option = ({ children, render, ...props }) => {
                 {displayDetails && (
                     <div>
                         <a className={classes.iconWithText} onClick={onDetailsClicked}>
-                            <InfoRoundedIcon className={classes.materialIcon} />
+                            <InfoRoundedIcon
+                                className={clsx(
+                                    classes.materialIcon,
+                                    customClassName('rule-info-icon-option')
+                                )}
+                            />
                             <Typography variant={'body2'} className={classes.iconWithText}>
                                 {translations.details}
                             </Typography>
@@ -368,7 +373,12 @@ const Option = ({ children, render, ...props }) => {
                 {resultStatus !== true && (
                     <div>
                         <a className={classes.iconWithText} onClick={onIncompatibilityClicked}>
-                            <WarningRoundedIcon className={classes.materialIcon} />
+                            <WarningRoundedIcon
+                                className={clsx(
+                                    classes.materialIcon,
+                                    customClassName('rule-alert-icon-option')
+                                )}
+                            />
                             <Typography variant={'body2'}>{translations.incompatibility}</Typography>
                         </a>
                     </div>

package/src/App/Modules/Creator/Components/OptionsList/index.js

@@ -56,22 +56,24 @@ const useStyles = makeStyles(
     }
 );
 
-const OptionsList = ({
-    addCheckedOptionclassification,
-    children,
-    isLoading,
-    onClose,
-    onSelect,
-    onToggle,
-    optionclassification,
-    options,
-    show,
-    viewDetails,
-    viewStockInformation,
-    LoadingComponent,
-    OptionComponent,
-    isAdminMode,
-}) => {
+const OptionsList = ({ render, ...props }) => {
+    const {
+        addCheckedOptionclassification,
+        children,
+        isLoading,
+        onClose,
+        onSelect,
+        onToggle,
+        optionclassification,
+        options,
+        show,
+        viewDetails,
+        viewStockInformation,
+        LoadingComponent,
+        OptionComponent,
+        isAdminMode,
+    } = props;
+
     const classes = useStyles();
 
     const createOptions = () => {
@@ -130,22 +132,33 @@ const OptionsList = ({
         );
     };
 
-    return (
-        <CustomDialog
-            className={clsx(classes.dialogStyle, customClassName('options'))}
-            dialogTitle={optionclassification.title}
-            onCancel={onClose}
-            onClose={onClose}
-            open={show && !!optionclassification.identifier}
-            BackdropProps={{
-                classes: {
-                    root: classes.backDrop,
-                },
-            }}
-        >
-            <DialogContent className={classes.contentStyle}>{renderOptions()}</DialogContent>
-        </CustomDialog>
-    );
+    const renderOptionsList = () => {
+        return (
+            <CustomDialog
+                className={clsx(classes.dialogStyle, customClassName('options'))}
+                dialogTitle={optionclassification.title}
+                onCancel={onClose}
+                onClose={onClose}
+                open={show && !!optionclassification.identifier}
+                BackdropProps={{
+                    classes: {
+                        root: classes.backDrop,
+                    },
+                }}
+            >
+                <DialogContent className={classes.contentStyle}>{renderOptions()}</DialogContent>
+            </CustomDialog>
+        );
+    };
+
+    const getRenderProps = () => ({
+        ...props,
+        renderOptions,
+        createOptions,
+        renderOptionsList,
+    });
+
+    return typeof render === 'function' ? render(getRenderProps()) : renderOptionsList();
 };
 
 OptionsList.defaultProps = {
@@ -178,6 +191,7 @@ OptionsList.propTypes = {
     LoadingComponent: PropTypes.elementType,
     OptionComponent: PropTypes.elementType,
     isAdminMode: PropTypes.bool,
+    render: PropTypes.func,
 };
 
 export default OptionsList;

package/src/App/Modules/Designer/Components/DesignerSelectionToolbox/DesignerSelectionToolbox.js

@@ -1,7 +1,6 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
-import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import withStyles from '@material-ui/core/styles/withStyles';
 import withWidth from '@material-ui/core/withWidth/withWidth';
@@ -15,6 +14,7 @@ import { isPlaceholderContent } from 'App/Reducers/DesignArea/Selectors';
 import isMobileDevice from 'Framework/Helpers/isMobileDevice';
 import { hasBackgroundColor } from 'App/Reducers/DesignData/Selectors';
 import { t } from 'Framework/i18n';
+import { isOriginalVector } from '../../Utils/Transformers';
 
 const styles = theme => ({
     root: {
@@ -98,10 +98,7 @@ const handleObjectButtonClick = (evt, canvas, onMoveUpClick, onMoveDownClick) =>
 };
 
 export const isOriginallyVector = object =>
-    (object &&
-        object.type === 'Image' &&
-        /^(eps|pdf|ai|svg)$/i.test(get(object, 'imageData.original.format', ''))) ||
-    false;
+    (object && object.type === 'Image' && isOriginalVector(object.imageData)) || false;
 
 const isRaster = object =>
     (object && object.type === 'Image' && /\.(jpe?g|png|gif)$/i.test(object.src)) || false;

package/src/App/Modules/Designer/Components/DesignerSelectionToolbox/DesignerSelectionToolbox.test.js

@@ -23,6 +23,7 @@ describe('Designer/DesignerSelectionToolbox', () => {
         const createObject = (type, format) => ({ type, imageData: { original: { format } } });
 
         expect(isOriginallyVector(createObject('Image', 'eps'))).toEqual(true);
+        expect(isOriginallyVector(createObject('Image', 'ept'))).toEqual(true);
         expect(isOriginallyVector(createObject('Image', 'pdf'))).toEqual(true);
         expect(isOriginallyVector(createObject('Image', 'ai'))).toEqual(true);
         expect(isOriginallyVector(createObject('Image', 'svg'))).toEqual(true);

package/src/App/Modules/Designer/Components/ImageColorPicker/ImageColorPicker.js

@@ -210,17 +210,14 @@ export class ImageColorPicker extends React.Component {
         const { width: pw, height: ph } = container.getBoundingClientRect();
         const { width: ow, height: oh } = img;
 
-        const pa = pw / ph;
-        const oa = ow / oh;
-
-        if (pa >= oa) {
-            const height = Math.min(ph, oh);
-            const width = (height * ow) / oh;
+        if (ow / oh <= pw / ph) {
+            const height = ph;
+            const width = height * (ow / oh);
 
             this.updateCanvasDimensionsAndContent(canvas, img, width, height);
         } else {
-            const width = Math.min(pw, ow);
-            const height = (width * oh) / ow;
+            const width = pw;
+            const height = width * (oh / ow);
 
             this.updateCanvasDimensionsAndContent(canvas, img, width, height);
         }

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

@@ -52,7 +52,7 @@ class ImageThumbnail extends React.Component {
         }
 
         if (!image.displayColorPreview && !image.gallery) {
-            return getRasterURL(image.preview.url);
+            return getRasterURL(getPreviewUrlFromImageData(image.thumbnail));
         }
 
         this.downloadSvg(image);

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

@@ -32,6 +32,7 @@ import ColorPicker from '../ImageColorPicker/ImageColorPicker';
 import ImageThumbnail from './ImageThumbnail';
 import colorizeIcon from './res/baseline_colorize_black_24dp.png';
 import checkers from './res/checkers_tile.png';
+import { isOriginalVector } from '../../Utils/Transformers';
 
 const styles = theme => ({
     dialogContent: {
@@ -499,7 +500,8 @@ class ImageEditDialog extends React.Component {
                                         src={
                                             [0, 2].includes(activeTabIndex) &&
                                             !displayColorPreview &&
-                                            !image.gallery
+                                            !image.gallery &&
+                                            !isOriginalVector(image)
                                                 ? originalImagePreview
                                                 : preview
                                         }

package/src/App/Modules/Designer/Containers/ImageEditDialog.js

@@ -51,7 +51,7 @@ import createSelector from 'Utils/Function/createSelector';
 import { getConf } from 'App/configuration';
 import { EventTypes } from 'App/Constant';
 import { expandVectorizeColorsMap, getClosestColorFromMap } from '../Utils/ImageEditUtils';
-import { getRasterURL } from '../Utils/Transformers';
+import { getRasterURL, isOriginalVector } from '../Utils/Transformers';
 
 const getOperationsFromState = state => {
     const { clipping, clippingColor, vectorize, vectorizeThreshold, vectorizeColorsMap } = state;
@@ -197,12 +197,10 @@ export class ImageEditDialogContainer extends React.Component {
             image.preview &&
             image.preview.url &&
             activeTabIndex === 2 &&
-            originalImagePreview === null
+            originalImagePreview === null &&
+            !isOriginalVector(image)
         ) {
-            const previewUrl = `${getConf('network.host')}${image.preview.url}`;
-            this.setState({
-                originalImagePreview: image.gallery ? previewUrl : previewUrl.replace(/.svg$/, '.png'),
-            });
+            this.updateOriginalPreview();
         }
 
         if (operationsChanged) {
@@ -285,6 +283,24 @@ export class ImageEditDialogContainer extends React.Component {
         }
     }
 
+    updateOriginalPreview = async () => {
+        const { image } = this.props;
+        const previewUrl = `${getConf('network.host')}${image.preview.url}`;
+        const isSvg = previewUrl && /\.svg$/.test(previewUrl);
+        if (isSvg) {
+            const svgContent = await getSvgContent(previewUrl, true);
+            const preview = applySvgContentOperations(image.preview, null, svgContent);
+
+            this.setState({
+                originalImagePreview: preview,
+            });
+        } else {
+            this.setState({
+                originalImagePreview: previewUrl,
+            });
+        }
+    };
+
     setUpload = upload => {
         this.setState({ upload });
     };
@@ -471,25 +487,33 @@ export class ImageEditDialogContainer extends React.Component {
         let preview = null;
         let originalImagePreview = null;
 
+        let previewUrl = image?.preview?.url;
+        if (previewUrl && activeTabIndex === 1) {
+            previewUrl = getRasterURL(previewUrl);
+        }
+
+        const isSvg = previewUrl && /\.svg$/.test(previewUrl);
+
         if (image) {
-            const updateSVG =
-                activeTabIndex !== 1 &&
-                (image.displayColorPreview || image.gallery) &&
-                isEditableVectorImage(image.preview);
+            const updateSVG = isSvg;
 
             if (updateSVG) {
                 if (!svgContent) {
                     svgContent = await getSvgContent(image.preview.url, false, forceFetch);
                 }
 
-                preview = applySvgContentOperations(image.preview, image.operations, svgContent);
+                preview = applySvgContentOperations(
+                    image.preview,
+                    image.displayColorPreview ? image.operations : null,
+                    svgContent
+                );
             } else {
                 const forceUpdate = isImageInvalidatedByChange(this.lastImageUpdateData, image);
                 if (forceUpdate) {
                     this.previewVersion = Math.random();
                 }
                 preview =
-                    getRasterURL(getPreviewUrlFromImageData(image.preview)) +
+                    getPreviewUrlFromImageData(previewUrl) +
                     (this.previewVersion ? `?${this.previewVersion}` : '');
                 originalImagePreview = preview;
             }
@@ -625,6 +649,7 @@ export class ImageEditDialogContainer extends React.Component {
             ImageUploadComponent,
             customControlElements,
             checkOwnership,
+            designProductionMethod,
         } = this.props;
         const {
             preview,
@@ -694,6 +719,7 @@ export class ImageEditDialogContainer extends React.Component {
                             vectorsRequired={vectorsRequired}
                             colorAmountList={colorAmountList}
                             customControlElements={customControlElements}
+                            designProductionMethodName={designProductionMethod?.title}
                         />
                     }
                     activeTabIndex={activeTabIndex}
@@ -794,6 +820,7 @@ const mapStateToProps = state => {
         hasPlaceHolderImage,
         initialColorMaxAmount,
         colorPreviewRequirementFulfilled,
+        designProductionMethod,
     };
 };
 

package/src/App/Modules/Designer/Utils/SvgFixers.js

@@ -0,0 +1,36 @@
+export const getMatchAt = (str, regexp, idx = 1, defaultValue = '') => {
+    const matches = ('' + str).match(regexp);
+    return (matches && matches[idx]) || defaultValue;
+};
+
+export const embeddedSvgImageToInlineSvgContent = svgStr =>
+    svgStr.replace(/<image([^>]+)xlink:href="data:image\/svg\+xml;base64,([^"]+)"[^>]*>/g, function(
+        _,
+        attributesStr,
+        base64Str
+    ) {
+        const x = getMatchAt(attributesStr, /x="([^"]+)"/, 1, 0);
+        const y = getMatchAt(attributesStr, /y="([^"]+)"/, 1, 0);
+        const transform = getMatchAt(attributesStr, /transform="([^"]+)"/, 1, '');
+        const svgContent = atob(base64Str).replace(/(<\?xml[^>]+>)|(<!--[^>]+-->)/gi, '');
+        return `<g transform="${transform} translate(${x},${y})">${svgContent}</g>`;
+    });
+
+export const alterObjectValues = (obj, fn) => {
+    Object.keys(obj).forEach(key => {
+        obj[key] = fn(obj[key], key);
+    });
+    return obj;
+};
+
+export const alterArrayValues = (arr, fn) => {
+    arr.forEach((value, key) => {
+        arr[key] = fn(value, key);
+    });
+    return arr;
+};
+
+export const prepareDesignDataSnapshots = svgArrMap =>
+    alterObjectValues(svgArrMap, arr => alterArrayValues(arr, embeddedSvgImageToInlineSvgContent));
+
+export const preparePrintDesignData = svgMap => alterObjectValues(svgMap, embeddedSvgImageToInlineSvgContent);

package/src/App/Modules/Designer/Utils/Transformers.js

@@ -19,6 +19,9 @@ export const fixSrcURL = src => {
 
 export const getRasterURL = imageURL => ('' + imageURL).replace(/svg$/, 'png');
 
+export const isOriginalVector = imageData =>
+    /^(eps|ept|ps|pdf|ai|svg)$/i.test(get(imageData, 'original.format', ''));
+
 export const noCache = src => `${src}?${Math.random()}`;
 
 export const prepareImageObjectData = rawObject => {
@@ -29,21 +32,22 @@ export const prepareImageObjectData = rawObject => {
         src: fixSrcURL(rawObject.src),
     };
 
-    data.transformImageSrc = async (url, { preview, operations } = {}) => {
+    data.transformImageSrc = async (url, { operations } = {}) => {
         if (!isEditableVectorImage({ url })) {
             return noCache(url);
         }
 
         const { displayColorPreview, gallery, isPlaceHolderImage } = image;
+        const originalVector = isOriginalVector(image);
 
-        if (!displayColorPreview && !gallery && !isPlaceHolderImage) {
+        if (!originalVector && !displayColorPreview && !gallery && !isPlaceHolderImage) {
             return noCache(fixSrcURL(getRasterURL(get(image, 'preview.url', ''))));
         }
 
         const svgContent = await getSvgContent(url, true);
 
         return applySvgContentOperations(
-            preview ? preview : image.preview,
+            image.preview,
             displayColorPreview || gallery ? (operations ? operations : image.operations) : null,
             svgContent
         );

package/src/App/Modules/Designer/Utils/__tests__/Transformers.test.js

@@ -94,7 +94,7 @@ describe('App/Modules/Designer/Utils/Transformers', () => {
         expect(transformedSrc).toBe('base64encodedSVG');
     });
 
-    it('transformImageSrc uses the raster image if color preview is disabled but the original format is SVG', async () => {
+    it('transformImageSrc uses the SVG image if color preview is disabled but the original format is SVG', async () => {
         DesignDataHelpers.getSvgContent.mockResolvedValue('<svg></svg>');
         DesignDataHelpers.applySvgContentOperations.mockReturnValue('base64encodedSVG');
         const currentSrc = 'path/to/image.svg';
@@ -113,7 +113,7 @@ describe('App/Modules/Designer/Utils/Transformers', () => {
         };
         const preparedImageData = prepareImageObjectData(imageObjectData);
         const transformedSrc = await preparedImageData.transformImageSrc(currentSrc);
-        expect(transformedSrc.indexOf('path/to/image.png')).toBe(0);
+        expect(transformedSrc).toBe('base64encodedSVG');
     });
 
     it('transformImageSrc applies the operations (vectorizeColorsMap) on gallery images', async () => {

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

@@ -1,5 +1,6 @@
 import get from 'lodash/get';
 import find from 'lodash/find';
+import isString from 'lodash/isString';
 import flatten from 'lodash/flatten';
 import { getConf } from '../../configuration';
 import { getConfiguration, getConfigurator } from '../Configurator/Selectors';
@@ -15,11 +16,12 @@ import {
 import isEqual from 'lodash/isEqual';
 
 export const getPreviewUrlFromImageData = (preview, options = {}) => {
-    if (/^data:image/.test(preview.url)) {
-        return preview.url;
+    const previewUrl = isString(preview) ? preview : preview.url;
+    if (/^data:image/.test(previewUrl)) {
+        return previewUrl;
     }
     const { host = getConf('network.host', '') } = options;
-    return `${host}${preview.url}`;
+    return `${host}${previewUrl}`;
 };
 
 export const isEditableVectorImage = preview => {
@@ -113,8 +115,6 @@ export const isColorMappingCompatible = (colorPalettes, vectorizeColorsMap) => {
     );
 };
 
-export const isVectorFormat = extension => /^(eps|pdf|ai|svg)$/i.test(extension);
-
 export const showVectorizeImageQuality = (imageToAnalyse, minimumPixelAmount = null) => {
     if (imageToAnalyse) {
         const pixelsInTheImage =

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

@@ -8,7 +8,6 @@ import {
     isImageCompatible,
     isImageReadyToBeAdded,
     showVectorizeImageQuality,
-    isVectorFormat,
     isHardModified,
     isColorPreviewCompatible,
     getPreviewUrlFromImageData,
@@ -624,18 +623,6 @@ describe('Reducers/ImageGallery/Selectors', () => {
         });
     });
 
-    test('isVectorFormat returns true for known vector formats, otherwise false', () => {
-        [
-            ['eps', true],
-            ['pdf', true],
-            ['ai', true],
-            ['svg', true],
-            ['png', false],
-            ['jpg', false],
-            ['gif', false],
-        ].forEach(([format, expectedValue]) => expect(isVectorFormat(format)).toBe(expectedValue));
-    });
-
     test('isHardModified returns true if the related props are changed', () => {
         expect(
             isHardModified(

package/src/App/Services/AnalyticsService.js

@@ -356,34 +356,21 @@ export default class AnalyticsService {
 
     EventTypes = EventTypes;
 
-    async setDataLayer(dataLayer) {
-        await Services.store.addMiddleware(this.createMiddleware(dataLayer));
+    setDataLayer(dataLayer) {
+        this.dataLayer = dataLayer;
         const loadIdentifier = Services.configurator.state.loadIdentifier;
         loadIdentifier && this.triggerEvent(EventTypes.load_item, Services.configurator.state.loadIdentifier);
     }
 
-    createMiddleware(dataLayer) {
-        return store => next => action => {
-            const result = next(action);
-
-            const actionsToTrack = this.getActionsToTrack();
-            if (!actionsToTrack[action.type]) {
-                return result;
-            }
-            const nextState = store.getState();
-            if (action.type) {
-                const data = actionsToTrack[action.type](action, nextState);
-                dataLayer.push(data);
-            }
-            return result;
-        };
-    }
-
     getActionsToTrack() {
         return actionsToTrack;
     }
 
     triggerEvent(type, data = {}) {
-        Services.store.dispatch({ type, data });
+        const actionsToTrack = this.getActionsToTrack();
+        if (type && actionsToTrack[type]) {
+            const gaData = actionsToTrack[type]({ type, data }, Services.store.state);
+            this.dataLayer && this.dataLayer.push(gaData);
+        }
     }
 }

package/src/App/Services/ConfiguratorService.js

@@ -44,6 +44,7 @@ import createMessageInterface, {
     METHOD_ADD_TO_CART,
     METHOD_CONFIGURATION_SAVED_REMOTELY,
 } from '../Utils/createMessageInterface';
+import { prepareDesignDataSnapshots, preparePrintDesignData } from '../Modules/Designer/Utils/SvgFixers';
 
 const getSelectedAmountsBySizes = (item, selectedAmounts) => {
     const itemGroupMap = (rootItem, fn) => {
@@ -363,10 +364,10 @@ export default class ConfiguratorService extends AbstractConfiguratorService {
         const fontMapping = getFontMapping(Services.store.state);
 
         const svgs = await Services.designData.getScreenshotsOfElements(fontMapping);
-        mediaData.designDataSnapshots = svgs;
+        mediaData.designDataSnapshots = prepareDesignDataSnapshots(svgs);
 
         const fullSvgs = await Services.designData.getScreenshots(fontMapping);
-        mediaData.printDesignData = fullSvgs;
+        mediaData.printDesignData = preparePrintDesignData(fullSvgs);
         const usedAreas = Object.keys(fullSvgs);
 
         const { designArea } = Services.store.state;