@configuratorware/configurator-frontendgui 1.27.3-beta.1 → 1.27.3-beta.5

package/package.json

@@ -1,44 +1,20 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.27.3-beta.1",
+  "version": "1.27.3-beta.5",
   "license": "UNLICENSED",
   "private": false,
-  "main": "./lib/index.js",
-  "files": [
-    "App",
-    "Framework",
-    "Resources",
-    "src",
-    "scripts",
-    "babel.config.js",
-    "tsconfig.json",
-    "public/translations",
-    "public/favicon.ico",
-    "public/invoke.js",
-    "public/DesignerPreviewWidgetDemo.html",
-    "public/ConfigurationMessagingDemo.html"
-  ],
+  "main": "./index.js",
   "dependencies": {
-    "@babel/cli": "^7.13.14",
-    "@babel/core": "^7.13.14",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-decorators": "^7.13.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.13.8",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.13.12",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "^7.13.0",
+    "@configuratorware/scripts": "1.27.3-beta.5",
     "@hot-loader/react-dom": "^17.0.1",
-    "@material-ui/core": "^4.11.3",
+    "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@material-ui/lab": "^4.0.0-alpha.60",
     "@tweenjs/tween.js": "^17.6.0",
     "axios": "^0.21.1",
-    "babel-plugin-module-resolver": "^4.1.0",
     "clsx": "^1.1.1",
     "console-polyfill": "^0.3.0",
-    "cross-env": "^7.0.3",
     "css-element-queries": "^1.2.3",
     "fontfaceobserver": "^2.1.0",
     "hyphenated-de": "^1.2.0",
@@ -56,73 +32,34 @@
     "react-file-drop": "^0.2.8",
     "react-hot-loader": "^4.13.0",
     "react-hyphen": "^1.4.0",
-    "react-intersection-observer": "^8.31.0",
-    "react-redux": "^7.2.3",
+    "react-intersection-observer": "^8.32.0",
+    "react-redux": "^7.2.4",
     "react-redux-i18n": "^1.9.3",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.27.3-beta.1",
-    "redhotmagma-visualization": "1.27.3-beta.1",
-    "redux": "^4.0.5",
+    "redhotmagma-graphics-editor": "1.27.3-beta.5",
+    "redhotmagma-visualization": "1.27.3-beta.5",
+    "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",
     "redux-thunk": "^2.3.0",
-    "rimraf": "^3.0.2",
     "showdown": "^1.9.1",
     "storage-factory": "^0.2.0",
     "typeface-roboto": "^1.1.13",
     "url-search-params-polyfill": "^8.1.1",
     "uuid": "^3.4.0"
   },
-  "devDependencies": {
-    "@sambego/storybook-state": "^2.0.1",
-    "@storybook/addon-actions": "^6.2.1",
-    "@storybook/addon-essentials": "^6.2.1",
-    "@storybook/addon-links": "^6.2.1",
-    "@storybook/builder-webpack5": "^6.2.1",
-    "@storybook/react": "^6.2.1",
-    "@types/jest": "^26.0.22",
-    "@types/lodash": "^4.14.168",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.2",
-    "css-loader": "^5.2.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^4.3.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.23.1",
-    "eslint-plugin-react-hooks": "^2.5.1",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.3.1",
-    "husky": "^3.1.0",
-    "jest": "^26.6.3",
-    "jest-environment-enzyme": "^7.1.2",
-    "jest-enzyme": "^7.1.2",
-    "jsdom": "^16.5.2",
-    "lint-staged": "^9.5.0",
-    "mini-css-extract-plugin": "^1.4.0",
-    "node-sass": "^5.0.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "prettier": "^1.19.1",
-    "redux-mock-store": "^1.5.4",
-    "resolve-url-loader": "^3.1.2",
-    "sass-loader": "^11.0.1",
-    "sinon": "^10.0.0",
-    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.1.1",
-    "ts-jest": "^26.5.4",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.28.0",
-    "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^3.11.2"
-  },
   "peerDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-decorators": "^7.13.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-module-resolver": "^4.1.0",
     "css-loader": "^5.2.0",
     "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^1.4.0",
@@ -137,26 +74,7 @@
     "webpack-dev-server": "^3.11.2"
   },
   "scripts": {
-    "start": "webpack serve --port 3001 --host 0.0.0.0",
-    "start:dev": "webpack-dev-server --port 3333 --config dev/webpack.config.js",
-    "build": "webpack --config webpack.production.config.js",
-    "package": "npm run package:clean && npm run package:compile && npm run package:copy && npm run package:after",
-    "package:clean": "rimraf ./lib",
-    "package:compile": "cross-env NODE_ENV=production babel ./src --out-dir ./lib --extensions .ts,.tsx,.js,.jsx",
-    "package:copy": "node ./scripts/cpPath.js ./src ./lib \"\\.(scss|eot|svg|ttf|woff|woff2|png)$\"",
-    "package:install-packages": "node ./packages/install.js",
-    "package:after": "node ./scripts/moveLibToPackageRoot.js",
     "copy-public": "node ./scripts/cpPublic.js",
-    "install": "npm run package && npm run copy-public",
-    "build:test": "npm run build && http-server -P http://localhost:10030",
-    "build:profile": "webpack --config webpack.production.config.js --profile --json > stats.json",
-    "storybook": "start-storybook -p 6006",
-    "test": "jest",
-    "test:dev": "jest --watch",
-    "analyze": "npm run build:profile && webpack-bundle-analyzer stats.json ./public",
-    "lint": "eslint ./ --ext .js,.jsx",
-    "lint-ci": "eslint ./ --ext .js,.jsx -c .eslintrc.ci.json --quiet",
-    "lint-fix": "eslint ./ --ext .js,.jsx --fix",
-    "build-storybook": "build-storybook"
+    "install": "npm run copy-public"
   }
-}
+}

package/scripts/cpPublic.js

@@ -23,8 +23,8 @@
 
 const path = require('path');
 
-const { cpDirDeep, testMatchers } = require('./utils/fileSystem');
-const { isDependency } = require('./utils/process');
+const { cpDirDeep, testMatchers } = require('@configuratorware/scripts/utils/fileSystem');
+const { isDependency } = require('@configuratorware/scripts/utils/process');
 
 // keep existing files listed below
 const test = testMatchers.keepIfExists(/favicon\.ico$/);
@@ -38,5 +38,5 @@ if (isDependency()) {
     const src = path.resolve(__dirname, '../public');
     const dst = path.resolve(__dirname, '../../../../public');
 
-    cpDirDeep(src, dst, test);
+    cpDirDeep(src, dst, { testFn: test });
 }

package/scripts/getDefaultWebpackConfig.js

@@ -6,7 +6,7 @@ const path = require('path');
 const webpack = require('webpack');
 const fs = require('fs');
 
-const version = require('../package.json').version;
+const { version } = require('../package.json');
 
 function getConfig(mode, dirname) {
     try {
@@ -84,7 +84,8 @@ function getConfig(mode, dirname) {
                     'process.env.FRONTENDGUI_VERSION': JSON.stringify(version),
                 });
 
-                return Object.assign({}, commonConfig, {
+                return {
+                    ...commonConfig,
                     mode: 'development',
                     cache: true,
                     devtool: 'eval-cheap-module-source-map',
@@ -132,20 +133,21 @@ function getConfig(mode, dirname) {
                     },
                     plugins: [env, new webpack.HotModuleReplacementPlugin()],
                     resolve: Object.assign({}, commonConfig.resolve, {
+                        ...commonConfig.resolve,
                         alias: {
-                            'react-dom': '@hot-loader/react-dom',
+                            ...commonConfig.resolve.alias,
+                            'react-dom': path.resolve(dirname, 'node_modules/@hot-loader/react-dom'),
                         },
                     }),
                     optimization: {
                         moduleIds: 'named',
                     },
-                });
+                };
             }
 
             case 'prod': {
                 const TerserPlugin = require('terser-webpack-plugin');
                 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-                const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
                 const env = new webpack.DefinePlugin({
                     'process.env.NODE_ENV': JSON.stringify('production'),
@@ -156,8 +158,6 @@ function getConfig(mode, dirname) {
                     filename: 'bundle.css',
                 });
 
-                const optimizeCss = new OptimizeCSSAssetsPlugin({});
-
                 const minimizer = new TerserPlugin({
                     parallel: true,
                     terserOptions: {
@@ -167,7 +167,8 @@ function getConfig(mode, dirname) {
                     },
                 });
 
-                return Object.assign({}, commonConfig, {
+                return {
+                    ...commonConfig,
                     mode: 'production',
                     devtool: 'source-map',
                     devServer: {
@@ -204,11 +205,11 @@ function getConfig(mode, dirname) {
                             },
                         ].concat(commonRules),
                     },
-                    plugins: [env, extractSass, optimizeCss],
+                    plugins: [env, extractSass],
                     optimization: {
                         minimizer: [minimizer],
                     },
-                });
+                };
             }
         }
     } catch (e) {

package/src/App/Error/ProductionErrorPage/Style.scss

@@ -37,7 +37,7 @@ $font-color: #282828;
   }
 
   .error-icon {
-    background: url('./res/error_gears.png');
+    background: url('res/error_gears.png');
     background-size: 100% 100%;
     height: 20vh;
     width: 20vh;

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

@@ -109,6 +109,7 @@ const styles = theme => {
             '&.selected': {
                 backgroundColor: '#d8d8d8',
             },
+            tapHighlightColor: theme.tapHighlightColor,
         },
         text: {
             float: 'left',

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

@@ -4,7 +4,7 @@ import { mount, render } from 'enzyme';
 import { Provider } from 'react-redux';
 import { noop } from 'lodash';
 import DefaultThemeProvider from 'App/Screens/Configurator/ThemeProvider';
-import Option from '../Option';
+import Option from './index';
 
 const reducer = (state = {}, action) => {
     return { ...action, ...state };

package/src/App/Modules/Creator/Components/OptionAmount/index.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import OptionAmount from '../OptionAmount';
+import OptionAmount from './index';
 import { mount, render } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { TextField } from '@material-ui/core';

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

@@ -108,6 +108,7 @@ export const StyledProductPart = withStyles(
                     display: 'flex',
                     flexDirection: 'row-reverse',
                 },
+                tapHighlightColor: theme.tapHighlightColor,
             },
             content: {
                 alignItems: 'center',

package/src/App/Modules/Creator/Components/ProductPart/index.test.js

@@ -4,7 +4,7 @@ import { Provider } from 'react-redux';
 import { mount, render } from 'enzyme';
 import { noop } from 'lodash';
 import DefaultThemeProvider from 'App/Screens/Configurator/ThemeProvider';
-import ProductPart from '../ProductPart';
+import ProductPart from './index';
 
 const initialState = {
     displaySwitchedOptions: false,

package/src/App/Modules/Designer/Components/AddGalleryImage/index.story.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import ServiceLocator from 'App/ServiceLocator';
-import AddGalleryImage from './';
+import AddGalleryImage from './index';
 import blueImg from './res/blau.jpg';
 import greyIMG from './res/grau.jpg';
 import redIMG from './res/rot.jpg';

package/src/App/Modules/Designer/Components/ColorPalettes/index.test.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { noop } from 'lodash';
 import { mount, render } from 'enzyme';
-import ColorPalettes from '../ColorPalettes';
+import ColorPalettes from './index';
 
 const colorPalettes = {
     colorPalettes: [

package/src/App/Modules/Designer/Components/DesignAreaControlbox/index.test.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { noop } from 'lodash';
 import { mount, render } from 'enzyme';
-import DesignAreaControlbox from '../DesignAreaControlbox';
+import DesignAreaControlbox from './index';
 import MenuItem from '@material-ui/core/MenuItem';
 import ServiceLocator from 'App/ServiceLocator';
 

package/src/App/Modules/Designer/Components/TextControlbox/index.test.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { noop } from 'lodash';
 import { mount, render } from 'enzyme';
 import MenuItem from '@material-ui/core/MenuItem';
-import TextControlbox from '../TextControlbox';
+import TextControlbox from './index';
 import ServiceLocator from 'App/ServiceLocator';
 
 const mockedFontsList = [

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

@@ -6,7 +6,13 @@ import Api from 'Framework/Api';
 import { createActionWithGlobalState } from 'Utils/Redux/createActionWithGlobalState';
 import { getConf } from '../../configuration';
 import { Services } from '../../ServiceLocator';
-import { dismissError, reportError, setVisible, setWorkInProgress } from '../UI/Actions';
+import {
+    dismissError,
+    reportConfigurationNotFoundError,
+    reportError,
+    setVisible,
+    setWorkInProgress,
+} from '../UI/Actions';
 import { fetchFonts } from '../../Reducers/Fonts/Actions';
 import { addImagesFromDesignArea } from '../../Reducers/ImageGallery/Actions';
 import {
@@ -627,9 +633,13 @@ export const fetchInitialConfiguration = () => (dispatch, getState) => {
     const defaultLoadIdentifier = getConf('defaultLoadIdentifier');
 
     if (loadCode) {
-        // Load the options by code
+        // Load the configuration by code
         return dispatch(fetchConfigurationByCode(loadCode)).then(configuration => {
-            Services.analytics.triggerEvent(EventTypes.load_item, configuration.data.item.identifier);
+            if (configuration.error) {
+                dispatch(reportConfigurationNotFoundError(t('loadConfiguration.error.loadingFailed')));
+            } else {
+                Services.analytics.triggerEvent(EventTypes.load_item, configuration.data.item.identifier);
+            }
         });
     } else if (getConf('loadVariantsFirst')) {
         // Load variants by identifier

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

@@ -19,6 +19,7 @@ import { getConfigurator, getSelectedVariantIdentifier } from '../Configurator/S
 import { compareDesignAreasBySize } from '../DesignView/Transformers';
 import { isImageCompatible } from '../ImageGallery/Selectors';
 import { recalculateSingleDesignArea } from './Transformers';
+import { CONFIGURATION_NOT_FOUND_ERROR } from '../UI/Actions';
 export * from './MaskSelectors';
 
 export function getDesignProductionMethods(state) {
@@ -299,13 +300,14 @@ function isIt500Error({ ui: { error } }) {
 
 function isConfigurationNotFound({ ui: { error } }) {
     return (
-        error &&
-        error.source &&
-        error.response &&
-        error.response.status === 404 &&
-        ['loadbyitemidentifier', 'getconfigurationvariants'].indexOf(
-            (error.source.url || error.source).split('/')[1]
-        ) !== -1
+        (error &&
+            error.source &&
+            error.response &&
+            error.response.status === 404 &&
+            ['loadbyitemidentifier', 'getconfigurationvariants'].indexOf(
+                (error.source.url || error.source).split('/')[1]
+            ) !== -1) ||
+        (error && error.type === CONFIGURATION_NOT_FOUND_ERROR)
     );
 }
 

package/src/App/Reducers/DesignView/Actions.js

@@ -2,8 +2,7 @@ export const actionTypes = {
     SELECT_DESIGN_VIEW: 'DesignView/SELECT_DESIGN_VIEW',
 };
 
-export const selectDesignView = (designViewIdentifier, options) => ({
+export const selectDesignView = designViewIdentifier => ({
     type: actionTypes.SELECT_DESIGN_VIEW,
     designViewIdentifier,
-    options,
 });

package/src/App/Reducers/DesignView/Reducer.js

@@ -1,4 +1,4 @@
-import { actionTypes as designViewActionTypes } from '../DesignView/Actions';
+import { actionTypes as designViewActionTypes } from './Actions';
 import find from 'lodash/find';
 import get from 'lodash/get';
 import * as configuratorActionTypes from '../Configurator/Actions';
@@ -16,7 +16,6 @@ const prepareDesignViews = designViews =>
 const initialState = {
     designViews: [],
     selectedDesignView: {},
-    lastSelectedDesignView: {},
     autogeneratedDesignViews: [],
     viewThumbnailImages: [],
 };
@@ -24,13 +23,11 @@ const initialState = {
 export default function designViewReducer(state = initialState, action = {}) {
     switch (action.type) {
         case designViewActionTypes.SELECT_DESIGN_VIEW: {
-            const { designViewIdentifier, options = {} } = action;
+            const { designViewIdentifier } = action;
             const designView = find(state.designViews, { identifier: designViewIdentifier });
-            const { saveLast = true } = options;
             return {
                 ...state,
                 selectedDesignView: designView,
-                ...(saveLast ? { lastSelectedDesignView: designView } : null),
             };
         }
         case configuratorActionTypes.RECEIVE_DESIGNER_DATA: {
@@ -62,14 +59,12 @@ export default function designViewReducer(state = initialState, action = {}) {
                     ...state,
                     designViews: prepareDesignViews(updatedDesignViews),
                     selectedDesignView: {},
-                    lastSelectedDesignView: {},
                 };
             }
             return {
                 ...state,
                 designViews: prepareDesignViews(designViews),
                 selectedDesignView: {},
-                lastSelectedDesignView: {},
             };
         }
         case configuratorActionTypes.RECEIVE_CONFIGURATION: {
@@ -87,7 +82,6 @@ export default function designViewReducer(state = initialState, action = {}) {
                         ...state,
                         designViews: [],
                         selectedDesignView: {},
-                        lastSelectedDesignView: {},
                         autogeneratedDesignViews,
                         viewThumbnailImages,
                     };
@@ -99,7 +93,6 @@ export default function designViewReducer(state = initialState, action = {}) {
                     ...state,
                     designViews: autogeneratedDesignViews,
                     selectedDesignView,
-                    lastSelectedDesignView: selectedDesignView,
                     autogeneratedDesignViews,
                     viewThumbnailImages,
                 };
@@ -109,7 +102,6 @@ export default function designViewReducer(state = initialState, action = {}) {
                 ...state,
                 designViews: [],
                 selectedDesignView: {},
-                lastSelectedDesignView: {},
                 autogeneratedDesignViews: [],
                 viewThumbnailImages: [],
             };

package/src/App/Reducers/DesignView/__mocks__/designerViewData.js

@@ -91,5 +91,4 @@ export const simpleState = {
     selectedDesignView: {
         identifier: 'front_view',
     },
-    lastSelectedDesignView: {},
 };

package/src/App/Reducers/DesignView/__tests__/Reducer.test.js

@@ -13,7 +13,6 @@ describe('Reducers/DesignView.designViewReducer', () => {
         expect(initialState).toEqual({
             designViews: [],
             selectedDesignView: {},
-            lastSelectedDesignView: {},
             autogeneratedDesignViews: [],
             viewThumbnailImages: [],
         });
@@ -42,23 +41,6 @@ describe('Reducers/DesignView.designViewReducer', () => {
         const action = selectDesignView(identifier);
         const state = designViewReducer(initialState, action);
         expect(state.selectedDesignView.identifier).toBe(identifier);
-        expect(state.lastSelectedDesignView.identifier).toBe(identifier);
-    });
-    test('returns the correct state for SELECT_DESIGN_VIEW action, if the { saveLast: false } option is provided', () => {
-        // select a view directly (eg. user clicks the view buttons)
-        const initialState = designViewReducer(simpleState);
-        const selectedDesignViewIdentifier = simpleState.designViews[1].identifier;
-        const selectDesignViewAction = selectDesignView(selectedDesignViewIdentifier);
-        const state1 = designViewReducer(initialState, selectDesignViewAction);
-        expect(state1.selectedDesignView.identifier).toBe(selectedDesignViewIdentifier);
-        expect(state1.lastSelectedDesignView.identifier).toBe(selectedDesignViewIdentifier);
-
-        // select a view automatically (eg. user switches to a component which has a linked view)
-        const autoDesignViewIdentifier = simpleState.designViews[0].identifier;
-        const action = selectDesignView(autoDesignViewIdentifier, { saveLast: false });
-        const state2 = designViewReducer(state1, action);
-        expect(state2.selectedDesignView.identifier).toBe(autoDesignViewIdentifier);
-        expect(state2.lastSelectedDesignView.identifier).toBe(selectedDesignViewIdentifier);
     });
     test('clears the selectedDesignView for RECEIVE_CONFIGURATION action', () => {
         const initialState = designViewReducer(simpleState);
@@ -70,7 +52,6 @@ describe('Reducers/DesignView.designViewReducer', () => {
         const action = { type: RECEIVE_CONFIGURATION };
         const state = designViewReducer(stateWithSelectedDesignView, action);
         expect(state.selectedDesignView).toEqual({});
-        expect(state.lastSelectedDesignView).toEqual({});
     });
     test(
         'creates the designViews list and sets the selectedDesignView if visualizationData is available ' +
@@ -100,9 +81,6 @@ describe('Reducers/DesignView.designViewReducer', () => {
             expect(state.selectedDesignView).toEqual({
                 identifier: 'front',
             });
-            expect(state.lastSelectedDesignView).toEqual({
-                identifier: 'front',
-            });
         }
     );
 

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

@@ -1,6 +1,6 @@
 import { createDefaultReceiver, fetchDataAsync, postDataAsync } from '../Actions';
 import { createAsyncTask } from '../UI/Actions';
-import { getUserImagesByDesignArea } from '../ImageGallery/Selectors';
+import { getUserImagesByDesignArea } from './Selectors';
 import { calculateImageBrightness } from '../../Services/DesignDataService';
 import { getImageUsageInfo } from './Selectors';
 import { getCurrentCompatibilityInfoHash } from '../DesignArea/Selectors';

package/src/App/Reducers/UI/Actions.js

@@ -6,6 +6,7 @@ export const CUSTOM_ERROR = 'ui/CUSTOM_ERROR';
 export const DISMISS_ERROR = 'ui/DISMISS_ERROR';
 export const SHOW_ALERT = 'ui/SHOW_ALERT';
 export const DISMISS_ALERT = 'ui/DISMISS_ALERT';
+export const CONFIGURATION_NOT_FOUND_ERROR = 'ui/CONFIGURATION_NOT_FOUND';
 
 export const setVisible = (name, show) => (dispatch, getState) => {
     if (getState().ui.visibilityMap[name] !== show) {
@@ -34,6 +35,13 @@ export const reportError = errorMessage => ({
     },
 });
 
+export const reportConfigurationNotFoundError = errorMessage => ({
+    type: CONFIGURATION_NOT_FOUND_ERROR,
+    error: {
+        message: errorMessage,
+    },
+});
+
 export const dismissError = () => ({
     type: DISMISS_ERROR,
 });

package/src/App/Reducers/UI/Reducer.js

@@ -5,6 +5,7 @@ import {
     DISMISS_ERROR,
     SHOW_ALERT,
     DISMISS_ALERT,
+    CONFIGURATION_NOT_FOUND_ERROR,
 } from './Actions';
 
 import * as apiActions from '../Actions';
@@ -20,7 +21,8 @@ export function errorHandler(state, action) {
     switch (action.type) {
         case apiActions.NETWORK_ERROR:
         case apiActions.REQUEST_ERROR:
-        case CUSTOM_ERROR: {
+        case CUSTOM_ERROR:
+        case CONFIGURATION_NOT_FOUND_ERROR: {
             return {
                 ...state,
                 error: {

package/src/App/Screens/Configurator/Components/CalculationWidget/index.test.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { noop } from 'lodash';
 import { mount, render } from 'enzyme';
-import CalculationWidget from '../CalculationWidget';
+import CalculationWidget from './index';
 import MenuItem from '@material-ui/core/MenuItem';
 import { Select, ExpansionPanel, ExpansionPanelDetails } from '@material-ui/core';
 import ServiceLocator from 'App/ServiceLocator';

package/src/App/Screens/Configurator/Components/DesignApproval/index.test.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import noop from 'lodash/noop';
 import { render } from 'enzyme';
-import DesignApproval from '../DesignApproval';
+import DesignApproval from './index';
 
 it('renders correctly without error', () => {
     const tree = render(<DesignApproval checked={true} error={false} link={'fakeLink'} onChange={noop} />);

package/src/App/Screens/Configurator/Components/FullScreenView/index.test.jsx

@@ -1,7 +1,7 @@
 /* eslint-env jest */
 import React from 'react';
 import { mount, render } from 'enzyme';
-import FullScreenView from '../FullScreenView';
+import FullScreenView from './index';
 
 describe('Screens/Configurator/Components/FullScreenView', () => {
     it('renders correctly', () => {

package/src/App/Screens/Configurator/Containers/AmountPrice.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import AmountPrice from 'App/Shared/Containers/AmountPrice';
 import ProductVariant from 'App/Shared/Containers/ProductVariant';
-import ConfigurationModeSwitch from '../Containers/ConfigurationModeSwitch';
+import ConfigurationModeSwitch from './ConfigurationModeSwitch';
 import { makeStyles } from '@material-ui/core';
 
 export const useStyles = makeStyles(