@configuratorware/configurator-frontendgui 1.29.2 → 1.30.0

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_INT,
+  development: DEVELOPMENT_HOST_LOCAL,
   test: ''
 };
 var resourceUrlsByNodeEnv = {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.29.2",
+  "version": "1.30.0",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.29.2",
+    "@configuratorware/scripts": "1.30.0",
     "@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.2",
-    "redhotmagma-visualization": "1.29.2",
+    "redhotmagma-graphics-editor": "1.30.0",
+    "redhotmagma-visualization": "1.30.0",
     "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/Optiondetail/__snapshots__/index.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Screens/Components/ImageEditDialog/MessageBox renders as a modal screen on larger screens 1`] = `
 <div>
   <div
-    class="MuiDialogContent-root"
+    class="MuiDialogContent-root Optiondetail-detailDialogContentRoot-14"
   >
     <div>
       <div
@@ -60,7 +60,7 @@ exports[`Screens/Components/ImageEditDialog/MessageBox renders as a modal screen
 exports[`Screens/Components/ImageEditDialog/MessageBox renders as full screen on smaller screens 1`] = `
 <div>
   <div
-    class="MuiDialogContent-root"
+    class="MuiDialogContent-root Optiondetail-detailDialogContentRoot-14"
   >
     <div>
       <div
@@ -117,7 +117,7 @@ exports[`Screens/Components/ImageEditDialog/MessageBox renders as full screen on
 exports[`Screens/Components/ImageEditDialog/MessageBox renders with previous and next navigation buttons 1`] = `
 <div>
   <div
-    class="MuiDialogContent-root"
+    class="MuiDialogContent-root Optiondetail-detailDialogContentRoot-14"
   >
     <div>
       <div

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

@@ -96,6 +96,9 @@ const styles = theme => ({
     dialogContentRootWithZoom: {
         overflow: 'hidden',
     },
+    detailDialogContentRoot: {
+        overflowY: 'auto',
+    },
 });
 
 class Optiondetail extends React.Component {
@@ -112,7 +115,6 @@ class Optiondetail extends React.Component {
         onClose: PropTypes.func,
         LoadingComponent: PropTypes.elementType,
         width: PropTypes.string,
-        isTabletDevice: PropTypes.bool,
         isLoading: PropTypes.bool,
     };
 
@@ -261,16 +263,7 @@ class Optiondetail extends React.Component {
     };
 
     render() {
-        const {
-            LoadingComponent,
-            options,
-            show,
-            onClose,
-            details,
-            classes,
-            width,
-            isTabletDevice,
-        } = this.props;
+        const { LoadingComponent, options, show, onClose, details, classes, width } = this.props;
         const { loading, loadingContainerHeight } = this.state;
         const showNav = _.isArray(options) && options.length > 1;
         const detailImage = details.detailImage;
@@ -307,7 +300,7 @@ class Optiondetail extends React.Component {
             </div>
         );
 
-        const showFullScreenModal = ['xs', 'sm'].includes(width) && !isTabletDevice;
+        const showFullScreenModal = ['xs', 'sm'].includes(width);
         let maxZoomedWidth = this.getMaxZoomedWidth(width);
         let isLandscapeFormat = false;
         if (
@@ -341,7 +334,16 @@ class Optiondetail extends React.Component {
                 fullScreen={showFullScreenModal}
             >
                 <DialogContent
-                    classes={this.state.hasZoom ? { root: classes.dialogContentRootWithZoom } : null}
+                    classes={
+                        this.state.hasZoom
+                            ? {
+                                  root: clsx(
+                                      classes.detailDialogContentRoot,
+                                      classes.dialogContentRootWithZoom
+                                  ),
+                              }
+                            : { root: classes.detailDialogContentRoot }
+                    }
                 >
                     {loading ? (
                         <div style={{ height: loadingContainerHeight, boxSizing: 'border-box' }}>

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/ImageColorPicker/ImageColorPicker.js

@@ -210,17 +210,16 @@ 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 (oa <= 1) {
+            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;
             }

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,8 @@ export const fixSrcURL = src => {
 
 export const getRasterURL = imageURL => ('' + imageURL).replace(/svg$/, 'png');
 
+export const isOriginalVector = imageData => /svg|pdf|eps|ai/i.test(get(imageData, 'original.format', ''));
+
 export const noCache = src => `${src}?${Math.random()}`;
 
 export const prepareImageObjectData = rawObject => {
@@ -29,21 +31,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 => {

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;