@configuratorware/configurator-frontendgui 1.28.3 → 1.29.1

package/src/App/Services/ConfiguratorService.js

@@ -30,7 +30,7 @@ import {
 import { withGlobalLoader } from '../Reducers/UI/Actions';
 import { getFontMapping } from '../Reducers/Fonts/Selectors';
 import { Services } from '../ServiceLocator';
-import { getConf } from '../configuration';
+import { getConf, SaveTypes } from '../configuration';
 import { selectMultipleOptions, setCalculationEnabled } from '../Reducers/Configurator/Actions';
 import { setCalculationAutoResolveEnabled } from '../Reducers/Configurator/Actions';
 import { skipNextAutoResolve } from '../Reducers/Configurator/Actions';
@@ -38,7 +38,12 @@ import { getDesignData } from '../Reducers/DesignData/Reducer';
 import { getCached } from '../../Utils/Function/cached';
 import { getFirstDataURLFromScreenshotsObj } from '../Modules/Visualization/Utils/getFirstDataURLFromScreenshotsObj';
 import { isPlaceholderObject } from '../Reducers/DesignData/Selectors';
-import createMessageInterface from '../Utils/createMessageInterface';
+import createMessageInterface, {
+    LISTENER_SAVE_CONFIGURATION,
+    LISTENER_SWITCH_OPTIONS,
+    METHOD_ADD_TO_CART,
+    METHOD_CONFIGURATION_SAVED_REMOTELY,
+} from '../Utils/createMessageInterface';
 
 const getSelectedAmountsBySizes = (item, selectedAmounts) => {
     const itemGroupMap = (rootItem, fn) => {
@@ -83,7 +88,7 @@ export default class ConfiguratorService extends AbstractConfiguratorService {
         const adminMode = getConf('adminMode');
         if (!adminMode) {
             const messageInterface = createMessageInterface();
-            messageInterface.addListener('switch_options', async event => {
+            messageInterface.addListener(LISTENER_SWITCH_OPTIONS, async event => {
                 const optionsJSON = get(event, 'data.options');
                 try {
                     const optionsToSelect = JSON.parse(optionsJSON);
@@ -93,6 +98,19 @@ export default class ConfiguratorService extends AbstractConfiguratorService {
                     console.error('Wrong JSON provided for switch_options:', optionsJSON);
                 }
             });
+            messageInterface.addListener(LISTENER_SAVE_CONFIGURATION, async event => {
+                const save_id = get(event, 'data.save_id');
+                const saveType =
+                    get(event, 'data.save_type') === SaveTypes.CART ? SaveTypes.CART : SaveTypes.USER;
+                try {
+                    const configuration = await this.captureAndSaveConfiguration(saveType);
+                    const code = get(configuration, 'data.code');
+                    messageInterface.dispatch({ method: METHOD_CONFIGURATION_SAVED_REMOTELY, save_id, code });
+                } catch (e) {
+                    // eslint-disable-next-line no-console
+                    console.error('Saving configuration failed, save_id was  ', save_id);
+                }
+            });
         }
     }
 
@@ -725,7 +743,10 @@ export default class ConfiguratorService extends AbstractConfiguratorService {
                 const appConf = getConf();
                 const targetOrigin = get(appConf, 'addToCartPostMessageTargetOrigin', '*');
 
-                window.parent.postMessage({ method: 'addtocart', code: configuration.code }, targetOrigin);
+                window.parent.postMessage(
+                    { method: METHOD_ADD_TO_CART, code: configuration.code },
+                    targetOrigin
+                );
             } else if (addToCartMethod === 'functionCall' && window.parent.addToCart !== undefined) {
                 window.parent.addToCart(configuration.code);
             }

package/src/App/Services/InteractionService.js

@@ -5,6 +5,7 @@ import Api from '../../Framework/Api';
 import { t } from 'Framework/i18n';
 import { getConfiguration } from '../Reducers/Configurator/Selectors';
 import { EventTypes } from '../Constant';
+import { METHOD_CONFIGURATION_SAVED } from '../Utils/createMessageInterface';
 
 export default class InteractionService extends AbstractInteractionService {
     constructor() {
@@ -44,7 +45,7 @@ export default class InteractionService extends AbstractInteractionService {
             await configurator.captureAndSaveConfiguration(SaveTypes.USER);
             const { code } = configurator.state.configuration;
             this.postMessageToContainer({
-                method: 'configurationsaved',
+                method: METHOD_CONFIGURATION_SAVED,
                 code,
             });
         } catch (e) {

package/src/App/Services/VisualizationService.js

@@ -264,6 +264,9 @@ export default class VisualizationService extends AbstractVisualizationService {
         const isAdminMode = getConf('adminMode');
         sendMessage(component, 'clearViewIfEmpty', !!isAdminMode);
 
+        const visualizationOverlayMode = getConf('visualizationOverlayMode');
+        sendMessage(component, 'setOverlayMode', !!visualizationOverlayMode);
+
         this.observable.dispatch(EventTypes.ComponentChange, { component });
 
         return this;

package/src/App/Services/__tests__/DesignDataService.selectViewForComponent.test.js

@@ -178,57 +178,4 @@ describe('DesignDataService.selectViewForComponent', () => {
 
         expect(srv.selectDesignView).toHaveBeenCalledWith('front_view', { saveLast: false });
     });
-
-    it('calls selectDesignView with the identifier of lastSelectedDesignView if no creatorView is referenced by the selected component', () => {
-        const componentWithNoCreatorView = {
-            identifier: 'id1',
-            title: 'title1',
-            creatorView: null,
-        };
-
-        ServiceLocator.provide(
-            new (class StoreService {
-                static serviceName = 'StoreService';
-                state = {
-                    designArea: {
-                        filteredDesignAreas: mockDesignAreas,
-                        selectedDesignArea: {},
-                    },
-                    designView: {
-                        designViews: [
-                            { identifier: 'front_view' },
-                            { identifier: 'side_view' },
-                            { identifier: 'top_view' },
-                        ],
-                        selectedDesignView: {
-                            identifier: 'side_view',
-                        },
-                        lastSelectedDesignView: {
-                            identifier: 'top_view',
-                        },
-                    },
-                    configurator: {
-                        configuration: {
-                            optionclassifications: [
-                                componentWithNoCreatorView,
-                                {
-                                    identifier: 'id2',
-                                    title: 'title2',
-                                    creatorView: { identifier: 'side_view' },
-                                },
-                            ],
-                        },
-                    },
-                };
-                dispatch = v => v;
-            })()
-        );
-        const srv = new DesignDataService();
-
-        srv.selectDesignView = jest.fn();
-
-        srv.selectViewForComponent(componentWithNoCreatorView);
-
-        expect(srv.selectDesignView).toHaveBeenCalledWith('top_view', { saveLast: false });
-    });
 });

package/src/App/Shared/Containers/AlertMessages.js

@@ -1,5 +1,5 @@
 import { containerConnect } from 'Framework/ComponentContainer';
-import AlertDialog from '../Components/AlertDialog/index';
+import AlertDialog from '../Components/AlertDialog';
 import { Services } from 'App/ServiceLocator';
 import { t } from 'Framework/i18n';
 

package/src/App/Shared/Containers/AmountPrice/index.test.js

@@ -2,7 +2,7 @@ import AmountPrice, {
     createAmountPropsFromState,
     createPricePropsFromState,
     showProductVariantsForItem,
-} from '../AmountPrice';
+} from './index';
 import mountWithState from 'Utils/Test/mountWithState';
 import ServiceLocator from 'App/ServiceLocator';
 

package/src/App/Shared/Containers/Error.js

@@ -1,5 +1,5 @@
 import { containerConnect } from 'Framework/ComponentContainer';
-import AlertDialog from '../Components/AlertDialog/index';
+import AlertDialog from '../Components/AlertDialog';
 import { Services } from 'App/ServiceLocator';
 import { t } from 'Framework/i18n';
 

package/src/App/Shared/Containers/SaveConfiguration.js

@@ -1,7 +1,7 @@
 import CircularProgress from '@material-ui/core/CircularProgress/CircularProgress';
 import containerConnect from 'Framework/ComponentContainer';
 import { Services } from 'App/ServiceLocator';
-import SaveConfiguration from '../Components/SaveConfiguration/index';
+import SaveConfiguration from '../Components/SaveConfiguration';
 import { getShareUrl } from '../../Reducers/Configurator/Selectors';
 
 const mapStateToProps = ({ ui, configurator }) => ({

package/src/App/Translations.js

@@ -1,5 +1,5 @@
 import { use } from 'Framework/i18n';
-import { isProduction } from '../App/configuration';
+import { isProduction } from './configuration';
 export async function initLanguage(lang) {
     // ensure that the filename always has an underscore and no dash
     const fileKey = lang.replace('-', '_');

package/src/App/Utils/createMessageInterface.js

@@ -1,5 +1,15 @@
 import get from 'lodash/get';
 
+export const METHOD_ADD_TO_CART = 'addtocart';
+
+export const METHOD_CONFIGURATION_SAVED = 'configurationsaved';
+
+export const METHOD_CONFIGURATION_SAVED_REMOTELY = 'configurationsaved_remotely';
+
+export const LISTENER_SWITCH_OPTIONS = 'switch_options';
+
+export const LISTENER_SAVE_CONFIGURATION = 'save_configuration';
+
 /**
  * Helper interface for bi-directional postMessage API
  */

package/src/App/configuration.js

@@ -197,6 +197,9 @@ 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,
 };
 
 /**

package/src/Framework/i18n.js

@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { connect } from 'react-redux';
 import _ from 'lodash';
-import * as reactI18nify from 'react-i18nify';
 import Hyphen from 'react-hyphen';
 import { getConf } from '../App/configuration';
 
@@ -231,10 +230,10 @@ export function translateComponent(ComponentToTranslate, mapStateToProps, mapDis
 export const t = I18n.t.bind(I18n);
 
 export function useTranslationWithoutStore() {
-    reactI18nify.I18n.setTranslationsGetter(function() {
+    I18n.setTranslationsGetter(function() {
         return translations;
     });
-    reactI18nify.I18n.setLocaleGetter(function() {
+    I18n.setLocaleGetter(function() {
         return 'en-GB';
     });
 }

package/babel.config.js

@@ -1,46 +0,0 @@
-module.exports = function(api) {
-    const presets = [
-        '@babel/preset-env',
-        '@babel/preset-typescript',
-        '@babel/preset-react', // Transpile React components to JavaScript
-    ];
-
-    const plugins = [
-        ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
-        '@babel/plugin-proposal-class-properties',
-        '@babel/plugin-syntax-dynamic-import',
-
-        [
-            require.resolve('babel-plugin-module-resolver'),
-            {
-                root: ['./src'],
-            },
-        ],
-    ];
-
-    const ignore = [];
-
-    if (api.env('development')) {
-        plugins.push('react-hot-loader/babel'); // Enables React code to work with HMR.
-        api.cache(true);
-    } else if (api.env('production')) {
-        ignore.push(
-            '**/__tests__', // ignore the whole test directory
-            '**/*.test.js', // ignore test files only
-            '**/__mocks__'
-        );
-        api.cache(false);
-    } else if (api.env('test')) {
-        // makes possible to import ES modules (by transforming them to CommonJS)
-        // in node's current LTS version (12.x) ES modules are only experimental,
-        // for the current status check https://nodejs.org/docs/latest/api/esm.html#esm_modules_ecmascript_modules
-        plugins.push(['@babel/plugin-transform-modules-commonjs', { allowTopLevelThis: true }]);
-        api.cache(true);
-    }
-
-    return {
-        presets,
-        plugins,
-        ignore,
-    };
-};

package/public/ConfigurationMessagingDemo.html

@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <style>
-        html, body {
-            margin: 0;
-            display: flex;
-        }
-    </style>
-    <meta charset="UTF-8">
-    <title>Test for configurator messaging</title>
-</head>
-<body>
-<script>
-    window.addEventListener('message', (event) => {
-        const data = event.data;
-        console.log('message posted from the embedded page', data);
-
-        const method = data.method;
-        const code = data.code;
-
-        switch (method) {
-            case 'configurationsaved': {
-                console.log('the user clicked the save button in the top right corner, and received the following code: ' + code);
-                // do other actions here
-                break;
-            }
-            case 'addtocart': {
-                console.log('the user clicked the "add to cart" button in the bottom right corner, and received the following code: ' + code);
-                // do other actions here
-                break;
-            }
-            default: {
-                console.log('unhandled or unknown method: ' + method);
-            }
-        }
-    });
-
-    function onButtonClicked() {
-        const options = document.getElementById('input_switch_options').value;
-        if (options) {
-            document.getElementById('configurator_page').contentWindow.postMessage({type: 'switch_options', options });
-        }
-    }
-</script>
-<iframe src="/identifier:softshell_creatordesigner_2d" id="configurator_page" style="width: 80vw; height: 100vh; border: 0;"></iframe>
-<div style="width: 20vw; height: 100vh;">
-
-    <textarea type="text" style="width: 17vw; height: 40vw; margin: 1vw" id="input_switch_options">
-        [{"identifier":"softshell_body","selectedoptions":[{"identifier":"softshell_navy","amount":1}]},{"identifier":"softshell_hood","selectedoptions":[{"identifier":"softshell_lime"}]}]
-    </textarea>
-    <button style="margin-left: 6vw" onclick="onButtonClicked()">Switch Options</button>
-</div>
-</body>
-</html>

package/scripts/cpPath.js

@@ -1,135 +0,0 @@
-/* eslint no-console: 0 */
-
-/**
- * This script is made to copy specific files with their folder structure
- *
- * usage: node ./scripts/cpPath.js src dst [filterRegExp]
- *
- * @author boda@redhotmagma.de
- */
-
-const fs = require('fs');
-const path = require('path');
-
-const { mkDirDeep, walkDir } = require('./utils/fileSystem');
-
-let src = null;
-let dst = null;
-let reg = null;
-
-process.argv.forEach(function(val, index) {
-    switch (index) {
-        case 2:
-            src = val;
-            break;
-        case 3:
-            dst = val;
-            break;
-        case 4:
-            reg = new RegExp(val);
-    }
-});
-
-if (!src || !fs.existsSync(src)) {
-    throw new Error('src must be an existing directory');
-}
-if (!dst || !fs.existsSync(dst)) {
-    throw new Error('dst must be an existing directory');
-}
-
-function copyWithParent(src, dst) {
-    if (typeof dst === 'function') {
-        dst = dst(src);
-    }
-    mkDirDeep(dst.replace(/[/\\][^/\\]+$/, ''));
-    console.log(src + ' -> ' + dst);
-    const fileExt = src.replace(/.+\.([\w]+)$/, '$1');
-    switch (fileExt) {
-        case 'scss':
-            fs.readFile(src, 'utf8', function read(err, data) {
-                if (err) {
-                    throw err;
-                }
-                const modifiedContent = prepareSassFile(src, data);
-                fs.writeFile(dst, modifiedContent, 'utf8', function write(err) {
-                    if (err) {
-                        throw err;
-                    }
-                });
-            });
-            break;
-        default:
-            fs.createReadStream(src).pipe(fs.createWriteStream(dst));
-    }
-}
-
-function prepareSassFile(relativeSrc, content) {
-    const src = path.resolve(relativeSrc).replace(/\\/g, '/');
-    if (!content || !content.match) {
-        console.log('Strange file: ' + src);
-        return content;
-    }
-    const replaceImports = content.match(/@import ['"][^.~].+/g);
-    let output = content;
-    if (replaceImports) {
-        console.log('Resolving imports in sass file: ' + src);
-        const pathUp =
-            '..' +
-            src
-                .match(/src\/.+/)[0]
-                .match(/\//g)
-                .splice(1)
-                .join('..');
-        for (let i in replaceImports) {
-            const pathToImport = replaceImports[i].replace(/@import ['"][/]?([^'"]+).*/, '$1');
-            const resolverPath = pathUp + pathToImport;
-
-            const srcPathDir = src.replace(/\/[^/]+$/, '/');
-            const relativeImportPath = srcPathDir + pathToImport;
-            const rootImportPath = srcPathDir + resolverPath;
-
-            let resolveRootImport = false;
-            try {
-                fs.accessSync(relativeImportPath);
-            } catch (err) {
-                try {
-                    fs.accessSync(relativeImportPath + '.scss');
-                } catch (err) {
-                    try {
-                        fs.accessSync(rootImportPath);
-                        resolveRootImport = true;
-                    } catch (err) {
-                        try {
-                            fs.accessSync(rootImportPath + '.scss');
-                            resolveRootImport = true;
-                        } catch (err) {
-                            throw 'Cannot resolve import path: ' + replaceImports[i] + ' in ' + src;
-                        }
-                    }
-                }
-            }
-            if (resolveRootImport) {
-                console.log('  ' + pathToImport + ' -> ' + resolverPath);
-                const resolvedImport = replaceImports[i].replace(
-                    /(@import ['"])[^'"]+(.*)/,
-                    '$1' + resolverPath + '$2'
-                );
-                output = output.replace(replaceImports[i], resolvedImport);
-            }
-        }
-    }
-    return output;
-}
-
-console.log(
-    '\x1b[37m\x1b[42m%s\x1b[0m',
-    'Copying files from ' + src + ' to ' + dst + (reg ? ' with filter: ' + reg : ' without filter')
-);
-
-walkDir(src, function(f) {
-    if (reg === null || (reg && reg.test(f))) {
-        copyWithParent(f, function(path) {
-            return dst + path.replace(src, '');
-        });
-    }
-});

package/scripts/moveLibToPackageRoot.js

@@ -1,40 +0,0 @@
-/* eslint no-console: 0 */
-
-/**
- * This script is made to copy the compiled source from lib to the root folder
- *
- * Runs only when installing this package as a dependency in client projects
- *
- * usage: node ./scripts/moveLibToPackageRoot.js
- *
- * @author boda@redhotmagma.de
- */
-
-const fs = require('fs');
-const path = require('path');
-const rimraf = require('rimraf');
-
-const { isDependency } = require('./utils/process');
-const { walkDir } = require('./utils/fileSystem');
-
-if (isDependency()) {
-    console.log('\x1b[37m\x1b[42m%s\x1b[0m', 'Moving content of lib into the root package directory');
-
-    const src = path.resolve('./lib');
-    const dst = path.resolve('./');
-    walkDir(src, function(file) {
-        const relativePath = file.replace(src, '');
-        const tp = path.resolve(dst + relativePath);
-        if (fs.statSync(file).isFile()) {
-            fs.createReadStream(file).pipe(fs.createWriteStream(tp));
-        } else {
-            fs.mkdirSync(tp);
-        }
-    });
-
-    rimraf(src, function(err) {
-        if (err) {
-            console.log('Error occured while clearing the directory: ' + src, err);
-        }
-    });
-}

package/scripts/rmDir.js

@@ -1,29 +0,0 @@
-/* eslint no-console: 0 */
-
-const fs = require('fs');
-
-let dir = process.argv[2];
-
-if (!dir) {
-    throw new Error('src must be an existing directory');
-}
-
-function rmDir(dirPath) {
-    try {
-        const files = fs.readdirSync(dirPath);
-        if (files.length > 0) {
-            for (let f of files) {
-                const filePath = dirPath + '/' + f;
-                if (fs.statSync(filePath).isFile()) fs.unlinkSync(filePath);
-                else rmDir(filePath);
-            }
-        }
-        fs.rmdirSync(dirPath);
-    } catch (e) {
-        return;
-    }
-}
-
-console.log('\x1b[32m%s\x1b[0m', 'Removing dir: ' + dir);
-
-rmDir(dir);

package/scripts/updateLocalPackages.js

@@ -1,68 +0,0 @@
-/* eslint no-console: 0 */
-
-/**
- * A tool to copy local modifications of local packages (graphics editor and visualization component)
- * over to the node_modules of this project in order to test them in the integrated environment.
- * This script is made only for development purposes, does not replace the package version update in package.json.
- *
- * It uses the configuration file localPackages.json (should be placed in the project root)
- * Example for localPackages.json:
- * {
- *   "visualization": {                      // alias of the package
- *     "path": "../visualization_component", // location in the local file system, relative to the project path
- *     "name": "redhotmagma-visualization"   // name of the package in package.json
- *   },
- *   ...
- * }
- * Usage of the script:
- * node .\scripts\updateLocalPackages.js               // update all local dependencies listed in localPackages.json
- * node .\scripts\updateLocalPackages.js visualization // update only a single package identified by its alias
- *
- * @author boda@redhotmagma.de (2019.09.24)
- */
-
-const { resolve } = require('path');
-const { cpDirDeep } = require('./utils/fileSystem');
-
-const _alias = process.argv[2];
-
-try {
-    let items = require('../localPackages.json');
-    if (_alias && _alias.length) {
-        const selectedItem = items[_alias];
-        if (!selectedItem) {
-            console.log('Package not found:', _alias);
-            console.log('Available packages:');
-            console.table(items);
-            process.exit(0);
-        } else {
-            items = { [_alias]: selectedItem };
-        }
-    }
-    // eslint-disable-next-line no-unused-vars
-    for (let [alias, { path, name }] of Object.entries(items)) {
-        console.log(`Updating package: ${name} -> ${path}`);
-        updatePackage({ name, path });
-    }
-} catch (e) {
-    console.error(e);
-}
-
-function updatePackage(options = {}) {
-    const { name, path, buildScript = 'npm run package', libDir = 'lib' } = options;
-    const cwd = process.cwd();
-    const projectPath = resolve(cwd, path);
-    const packagePath = resolve(cwd, 'node_modules', name);
-    try {
-        const { exec } = require('child_process');
-        const childProcess = exec(buildScript, { cwd: projectPath });
-        childProcess.stdout.pipe(process.stdout);
-        childProcess.stderr.pipe(process.stderr);
-        childProcess.on('close', code => {
-            console.log(`child process exited with code ${code}`);
-            cpDirDeep(resolve(projectPath, libDir), packagePath);
-        });
-    } catch (e) {
-        console.error(e);
-    }
-}

package/scripts/utils/process.js

@@ -1,19 +0,0 @@
-/**
- * These utils are made to simplify querying process information for the node scripts.
- *
- * @author boda@redhotmagma.de
- */
-
-/**
- * Checks if the current installation process is a dependency installation
- * @return {boolean}
- */
-function isDependency() {
-    // if the path of the initial directory contains 'node_modules', it's probably installed as a dependency
-    const { INIT_CWD } = process.env;
-    return INIT_CWD.indexOf('node_modules') !== -1;
-}
-
-module.exports = {
-    isDependency,
-};

package/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    // Target latest version of ECMAScript.
-    "target": "esnext",
-    // Search under node_modules for non-relative imports.
-    "moduleResolution": "node",
-    // Process & infer types from .js files.
-    "allowJs": true,
-    // Don't emit; allow Babel to transform files.
-    "noEmit": true,
-    // Enable strictest settings like strictNullChecks & noImplicitAny.
-    "strict": true,
-    // Disallow features that require cross-file information for emit.
-    "isolatedModules": true,
-    // Import non-ES modules as default imports.
-    "esModuleInterop": true
-  },
-  "include": [
-    "./src",
-    "./node_modules/redhotmagma-graphics-editor"
-  ]
-}