@configuratorware/configurator-frontendgui 1.41.2 → 1.42.2

package/src/App/Modules/Designer/setupDesigner.js

@@ -110,26 +110,29 @@ export const setupDesigner = designDataService => {
         canvasMap.has(designArea) ? canvasMap.get(designArea) : false
     );
 
-    designDataService.registerInitCanvas(async ({ designArea, prevDesignArea, canvasSize, maskData }) => {
-        let canvas;
-        let isNew;
-        if (canvasMap.has(prevDesignArea)) {
-            canvas = canvasMap.get(prevDesignArea);
-            canvasMap.delete(prevDesignArea);
-            canvasMap.set(designArea, canvas);
-            canvas.setSize(canvasSize);
-            isNew = false;
-        } else {
-            canvas = canvasRepository.requestCanvas(designArea, canvasSize);
-            isNew = true;
+    designDataService.registerInitCanvas(
+        async ({ designArea, prevDesignArea, canvasSize, maskData, colorOverlayData }) => {
+            let canvas;
+            let isNew;
+            if (canvasMap.has(prevDesignArea)) {
+                canvas = canvasMap.get(prevDesignArea);
+                canvasMap.delete(prevDesignArea);
+                canvasMap.set(designArea, canvas);
+                canvas.setSize(canvasSize);
+                isNew = false;
+            } else {
+                canvas = canvasRepository.requestCanvas(designArea, canvasSize);
+                isNew = true;
+            }
+            await canvas.useMask(maskData);
+            canvas.useColorOverlay(colorOverlayData);
+            return {
+                canvas,
+                designArea,
+                isNew,
+            };
         }
-        await canvas.useMask(maskData);
-        return {
-            canvas,
-            designArea,
-            isNew,
-        };
-    });
+    );
 
     designDataService.registerRemoveCanvas(designArea => {
         if (canvasMap.has(designArea)) {

package/src/App/Modules/Visualization/AlignTargetContainer.js

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import { withAlignTarget } from 'redhotmagma-visualization/AlignTargetProvider';
 import clsx from 'clsx';
 

package/src/App/Modules/Visualization/CreatorAlignTarget.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AlignTargetContainer } from '../Creator/Containers';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import { useSelector } from 'react-redux';
 
 const styles = theme => ({

package/src/App/Modules/Visualization/DefaultVisualizationProvider.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { VisualizationProvider } from 'redhotmagma-visualization/VisualizationProvider';
 import { AlignTargetProvider } from 'redhotmagma-visualization/AlignTargetProvider';
 import { Services } from 'App/ServiceLocator';
-import sendMessage from 'Utils/Function/sendMessage';
 
 export class DefaultVisualizationProvider extends React.Component {
     static propTypes = {
@@ -19,7 +18,13 @@ export class DefaultVisualizationProvider extends React.Component {
         this.setState({
             visualization,
         });
-        sendMessage(Services.visualization, 'registerComponentChangeListener', this.onComponentChange);
+        this.removeComponentChangeListener = Services.visualization.registerComponentChangeListener(
+            this.onComponentChange
+        );
+    }
+
+    componentWillUnmount() {
+        this.removeComponentChangeListener && this.removeComponentChangeListener();
     }
 
     onComponentChange = ({ data: { component } }) => {

package/src/App/Modules/Visualization/DesignerAlignTarget.js

@@ -1,5 +1,5 @@
 import { AlignTargetContainer } from '../Creator/Containers';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
     root: {

package/src/App/Reducers/Actions.js

@@ -1,5 +1,5 @@
 import Api, { isCancelError } from 'Framework/Api';
-import _ from 'lodash';
+import isObject from 'lodash/isObject';
 import { createAsyncManager } from '../../Utils/Async/AsyncManager';
 
 export const REQUEST_DATA = 'REQUEST_DATA';
@@ -59,11 +59,11 @@ const handleResponse = (source, request, receiver, extraData = {}) => dispatch =
             return dispatch(receiver(response.data, extraData, response));
         })
         .catch(error => {
-            if (_.isObject(error.response)) {
+            if (isObject(error.response)) {
                 if (error.response.status === 404) {
                     return dispatch(requestError(source, error));
                 }
-                if (_.isObject(error.response.data)) {
+                if (isObject(error.response.data)) {
                     // request error (generated by the server)
                     dispatch(receiveData(source, error));
                     return dispatch(receiver(error.response.data, extraData, error.response));
@@ -122,11 +122,11 @@ export const asyncRequest = (source, receiver, extraData = {}, options = {}) =>
         if (useLocalErrorHandling) {
             throw error;
         }
-        if (_.isObject(error.response)) {
+        if (isObject(error.response)) {
             if (error.response.status === 404) {
                 dispatch(requestError(source, error));
             }
-            if (_.isObject(error.response.data)) {
+            if (isObject(error.response.data)) {
                 // request error (generated by the server)
                 dispatch(receiveData(source, error));
                 return receiver

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

@@ -39,7 +39,13 @@ export const isConfigurationModeSwitchAvailable = createSelector(
     modules => Object.values(modules).length > 1
 );
 
+export const isCreatorModeSelected = createSelector(getSelectedConfigurationMode, mode =>
+    isCreatorMode(mode)
+);
+
 export const isDesignerMode = modeStr => modeStr === 'designer';
 
+export const isCreatorMode = modeStr => modeStr === 'creator';
+
 export const getAvailableLicenses = data =>
     (data && data.license && data.license.split('+').filter(a => a)) || [];

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

@@ -1,5 +1,9 @@
 import * as apiActions from '../Actions';
-import { first, isObject, get, isArray, flatten } from 'lodash';
+import first from 'lodash/first';
+import isObject from 'lodash/isObject';
+import get from 'lodash/get';
+import isArray from 'lodash/isArray';
+import flatten from 'lodash/flatten';
 import find from 'lodash/find';
 import uniq from 'lodash/uniq';
 import { t } from 'Framework/i18n';
@@ -515,6 +519,9 @@ export const switchOptions = (
 
 export const doCalculation = () => (dispatch, getState) => {
     const configuration = getConfiguration(getConfigurator(getState()));
+    if (!configuration.item.identifier) {
+        return {};
+    }
     return dispatch(apiActions.postDataAsync('calculation', configuration, receiveCalculation));
 };
 

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

@@ -1,6 +1,12 @@
 import * as actionTypes from './Actions';
-import _ from 'lodash';
 import get from 'lodash/get';
+import isObject from 'lodash/isObject';
+import mergeWith from 'lodash/mergeWith';
+import merge from 'lodash/merge';
+import filter from 'lodash/filter';
+import cloneDeep from 'lodash/cloneDeep';
+import isArray from 'lodash/isArray';
+import find from 'lodash/find';
 import findIndex from 'lodash/findIndex';
 import omit from 'lodash/omit';
 import forEach from 'lodash/forEach';
@@ -16,7 +22,7 @@ const initialState = {
     options: [],
     optionsWithDetails: [],
     selectedoptionclassification: {},
-    calculation: null,
+    calculation: {},
     calculationAutoResolve: true,
     optiondetails: {},
     validation: null,
@@ -43,7 +49,7 @@ export function configurationHandler(state, action) {
         case actionTypes.RECEIVE_CONFIGURATION: {
             const configuration = action.data;
 
-            if (!_.isObject(configuration)) {
+            if (!isObject(configuration)) {
                 throw new Error(
                     `Server side error! The configuration must be a JSON structure! Data: ${configuration}`
                 );
@@ -53,13 +59,13 @@ export function configurationHandler(state, action) {
             let { selectedoptionclassification } = state;
             if (selectedoptionclassification.identifier) {
                 selectedoptionclassification =
-                    _.find(configuration.optionclassifications, {
+                    find(configuration.optionclassifications, {
                         identifier: selectedoptionclassification.identifier,
                     }) || selectedoptionclassification;
             }
 
             // set validation from the received configuration
-            const validation = _.get(configuration, 'information.validation_result');
+            const validation = get(configuration, 'information.validation_result');
 
             return {
                 ...state,
@@ -80,7 +86,7 @@ export function configurationHandler(state, action) {
             let { selectedoptionclassification, options } = state;
             const { optionclassifications } = configuration;
             if (selectedoptionclassification.identifier) {
-                const optionclassificationData = _.find(optionclassifications, {
+                const optionclassificationData = find(optionclassifications, {
                     identifier: selectedoptionclassification.identifier,
                 });
                 if (optionclassificationData) {
@@ -91,7 +97,7 @@ export function configurationHandler(state, action) {
                     for (let soi in selectedoptions) {
                         for (let oi in options) {
                             if (selectedoptions[soi].identifier === options[oi].identifier) {
-                                options[oi] = _.mergeWith(
+                                options[oi] = mergeWith(
                                     options[oi], // dst
                                     selectedoptions[soi], // src
                                     (dstValue, srcValue) => {
@@ -127,7 +133,7 @@ export function configurationHandler(state, action) {
             let { selectedoptionclassification } = state;
             if (selectedoptionclassification.identifier) {
                 selectedoptionclassification =
-                    _.find(configuration.optionclassifications, {
+                    find(configuration.optionclassifications, {
                         identifier: selectedoptionclassification.identifier,
                     }) || selectedoptionclassification;
             }
@@ -156,20 +162,20 @@ export function optionAndOptionclassificationHandler(state, action) {
         }
 
         case actionTypes.RECEIVE_OPTIONS: {
-            const options = _.cloneDeep(action.data);
+            const options = cloneDeep(action.data);
 
             // the selected options of the selected optionclassification should be updated
             // eg. after the switchoption call added a partial object (it contains only the identifier and amount)
             // but only missing values are updated
             const keepDstProps = ['amount'];
-            const selectedoptionclassification = _.cloneDeep(state.selectedoptionclassification);
+            const selectedoptionclassification = cloneDeep(state.selectedoptionclassification);
             for (let oi in options) {
                 const option = options[oi];
                 const { selectedoptions } = selectedoptionclassification;
                 for (let os in selectedoptions) {
                     const selectedoption = selectedoptions[os];
                     if (selectedoption.identifier === option.identifier) {
-                        options[oi] = selectedoptions[os] = _.mergeWith(
+                        options[oi] = selectedoptions[os] = mergeWith(
                             selectedoptions[os], // dst
                             option, // src
                             (dstValue, srcValue, key) => {
@@ -194,12 +200,12 @@ export function optionAndOptionclassificationHandler(state, action) {
             for (let os in selectedoptions) {
                 const selectedoption = selectedoptions[os];
                 for (let oi in options) {
-                    const itemGroupChildren = _.get(options[oi], 'option_group.children');
+                    const itemGroupChildren = get(options[oi], 'option_group.children');
                     if (itemGroupChildren instanceof Array) {
                         for (let ci in itemGroupChildren) {
                             if (itemGroupChildren[ci].identifier === selectedoption.identifier) {
-                                options[oi] = _.mergeWith(
-                                    _.cloneDeep(options[oi]), // dst
+                                options[oi] = mergeWith(
+                                    cloneDeep(options[oi]), // dst
                                     itemGroupChildren[ci], // src
                                     (dstValue, srcValue) =>
                                         // if the value is present in the src then use it, otherwise leave the original
@@ -319,7 +325,7 @@ export function dataHandler(state, action) {
         }
 
         case actionTypes.RECEIVE_CODESNIPPETS: {
-            if (!_.isArray(action.data)) {
+            if (!isArray(action.data)) {
                 throw new Error(
                     `Server side error! The code snippets must be a JSON array! Data: ${action.data}`
                 );
@@ -468,9 +474,9 @@ export function baseHandler(state, action) {
         }
         case actionTypes.DELETE_SELECTED_AMOUNTS: {
             const selectedAmountsPath = 'configuration.customdata.selectedAmounts';
-            const selectedAmounts = _.cloneDeep(get(state, selectedAmountsPath, {}));
+            const selectedAmounts = cloneDeep(get(state, selectedAmountsPath, {}));
             forEach(selectedAmounts, (selectedAmount, identifier) => {
-                const variantIdentifier = _.find(action.variant.sizes, { identifier: identifier });
+                const variantIdentifier = find(action.variant.sizes, { identifier: identifier });
                 if (variantIdentifier) {
                     delete selectedAmounts[variantIdentifier.identifier];
                 }
@@ -524,7 +530,7 @@ export function configurationModifierHandler(state, action) {
         }
         case actionTypes.DELETE_SELECTED_AMOUNT: {
             const selectedAmountsPath = 'configuration.customdata.selectedAmounts';
-            const selectedAmounts = _.cloneDeep(get(state, selectedAmountsPath, {}));
+            const selectedAmounts = cloneDeep(get(state, selectedAmountsPath, {}));
 
             delete selectedAmounts[action.identifier];
 
@@ -601,12 +607,12 @@ let reducerArray = Object.values(subReducers);
 let stateReducerArray = Object.values(stateChangeReducers);
 
 export const setSubReducers = customSubReducers => {
-    _.merge(subReducers, customSubReducers);
+    merge(subReducers, customSubReducers);
     reducerArray = Object.values(subReducers);
 };
 
 export const setStateChangeReducers = customStateChangeReducers => {
-    _.merge(stateChangeReducers, customStateChangeReducers);
+    merge(stateChangeReducers, customStateChangeReducers);
     stateReducerArray = Object.values(stateChangeReducers);
 };
 
@@ -628,7 +634,7 @@ export default function configuratorReducer(prevState = initialState, action = {
 }
 
 function filterOptionsWithDetails(options) {
-    return _.filter(
+    return filter(
         options,
         option => !!(option.abstract || option.description || option.detailImageExists === true)
     );

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

@@ -1,6 +1,9 @@
 import get from 'lodash/get';
 import flow from 'lodash/flow';
-import { find, difference, keys, values } from 'lodash';
+import find from 'lodash/find';
+import difference from 'lodash/difference';
+import keys from 'lodash/keys';
+import values from 'lodash/values';
 import createSelector from '../../../Utils/Function/createSelector';
 import { getSelectedConfigurationMode } from '../ConfigurationMode/Selectors';
 

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

@@ -444,6 +444,16 @@ export function getEngravingBackgroundColor(state, designProductionMethod, varia
     );
 }
 
+export function getColorOverlayData(state, designArea, variantIdentifier = false) {
+    const designProductionMethod = getSelectedDesignProductionMethodForDesignArea(state, designArea);
+    if (!designProductionMethodHasEngravingVisualizationEffect(designProductionMethod)) {
+        return null;
+    }
+    return {
+        color: getEngravingBackgroundColor(state, designArea, variantIdentifier),
+    };
+}
+
 export function getVisualizationEffectWithOptions(state, designArea, variantIdentifier = false) {
     const designProductionMethod = getSelectedDesignProductionMethodForDesignArea(state, designArea);
     const effect = getVisualizationEffect(designProductionMethod);

package/src/App/Reducers/Reducer.js

@@ -1,4 +1,5 @@
-import _ from 'lodash';
+import isObject from 'lodash/isObject';
+import reduce from 'lodash/reduce';
 
 import {
     REQUEST_DATA,
@@ -70,7 +71,7 @@ export default function apiReducer(state = initialState, action = {}) {
         case REQUEST_ERROR: {
             const sourceState = getSourceState(action);
             const sources = { ...state.sources };
-            const key = _.isObject(action.source) ? action.source.url : action.source;
+            const key = isObject(action.source) ? action.source.url : action.source;
             if (sourceState.isFetching) {
                 sources[key] = sourceState;
             } else {
@@ -80,7 +81,7 @@ export default function apiReducer(state = initialState, action = {}) {
             return {
                 ...state,
                 sources,
-                isFetching: _.reduce(
+                isFetching: reduce(
                     sources,
                     function(result, value) {
                         return result || value.isFetching;

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

@@ -1,4 +1,5 @@
 export const SET_VISIBLE = 'ui/SET_VISIBLE';
+export const SET_VISIBLE_WITH_COUNTER = 'ui/SET_VISIBLE_WITH_COUNTER';
 
 export const SET_WORK_IN_PROGRESS = 'ui/SET_WORK_IN_PROGRESS';
 
@@ -8,9 +9,22 @@ 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 VISIBILITY_NAMES = {
+    globalLoader: 'globalLoader',
+};
+
+export const COUNTER_TYPE_NAMES = [VISIBILITY_NAMES.globalLoader];
+
 export const setVisible = (name, show) => (dispatch, getState) => {
+    if (COUNTER_TYPE_NAMES.includes(name)) {
+        return dispatch({
+            type: SET_VISIBLE_WITH_COUNTER,
+            name,
+            show,
+        });
+    }
     if (getState().ui.visibilityMap[name] !== show) {
-        dispatch({
+        return dispatch({
             type: SET_VISIBLE,
             name,
             show,

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

@@ -6,12 +6,14 @@ import {
     SHOW_ALERT,
     DISMISS_ALERT,
     CONFIGURATION_NOT_FOUND_ERROR,
+    SET_VISIBLE_WITH_COUNTER,
 } from './Actions';
 
 import * as apiActions from '../Actions';
 
 const initialState = {
     visibilityMap: {},
+    visibilityMapCount: {},
     backgroundWorkMap: {},
     error: null,
     message: null,
@@ -57,6 +59,24 @@ const UIReducer = (state = initialState, action = {}) => {
             };
         }
 
+        case SET_VISIBLE_WITH_COUNTER: {
+            const stackCount = Math.max(
+                (state.visibilityMapCount[action.name] || 0) + (action.show ? 1 : -1),
+                0
+            );
+            return {
+                ...state,
+                visibilityMap: {
+                    ...state.visibilityMap,
+                    [action.name]: stackCount > 0,
+                },
+                visibilityMapCount: {
+                    ...state.visibilityMapCount,
+                    [action.name]: stackCount,
+                },
+            };
+        }
+
         case SET_WORK_IN_PROGRESS: {
             return {
                 ...state,

package/src/App/Routing.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Route as BasicRoute, Redirect, Switch } from 'react-router';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter, Route as BasicRoute, Redirect, Switch } from 'react-router-dom';
 
 import WrapperFrame from './Frame';
 import ErrorBoundary from './Error/ErrorBoundary';
@@ -10,33 +9,17 @@ import combinedScreens from './Screens';
 
 import { getConf } from './configuration.js';
 
-class Route extends Component {
-    static propTypes = {
-        component: PropTypes.elementType,
-        location: PropTypes.shape({
-            search: PropTypes.string,
-        }),
-    };
-
-    constructor(props) {
-        super(props);
-        const { component, ...rest } = props;
-        this.state = {
-            query: new URLSearchParams(props.location.search),
-            component,
-            rest,
-        };
-    }
-
-    renderComponent = props => {
-        const { component: Component, query } = this.state;
-        return <Component {...props} query={query} />;
-    };
-
-    render() {
-        return <BasicRoute {...this.state.rest} render={this.renderComponent} />;
-    }
-}
+const Route = ({ component: Component, ...props }) => (
+    <BasicRoute
+        {...props}
+        render={() => <Component {...props} query={new URLSearchParams(props.location.search)} />}
+    />
+);
+
+Route.propTypes = {
+    component: PropTypes.elementType,
+    location: PropTypes.object,
+};
 
 const NoMatch = () => <div>No routing found for the specified path.</div>;
 

package/src/App/Screens/Configurator/CalculationWidgetScreen.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { hot } from 'react-hot-loader';
 
 import { connect } from 'react-redux';
 
@@ -72,6 +71,4 @@ const mapStateToProps = state => {
     };
 };
 
-export const ConnectedCalculationWidgetScreen = connect(mapStateToProps)(
-    hot(module)(CalculationWidgetScreen)
-);
+export const ConnectedCalculationWidgetScreen = connect(mapStateToProps)(CalculationWidgetScreen);

package/src/App/Screens/Configurator/Components/AmountSelection/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import { t } from 'Framework/i18n';
-import Grid from '@material-ui/core/Grid/Grid';
-import InputBase from '@material-ui/core/InputBase/InputBase';
-import Typography from '@material-ui/core/Typography/Typography';
-import Divider from '@material-ui/core/Divider/Divider';
+import Grid from '@material-ui/core/Grid';
+import InputBase from '@material-ui/core/InputBase';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
 import AmountInput from 'App/Shared/Components/AmountInput';
 import PropTypes from 'prop-types';
 

package/src/App/Screens/Configurator/Components/CalculationWidget/index.js

@@ -14,7 +14,7 @@ import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import Divider from '@material-ui/core/Divider';
-import grey from '@material-ui/core/colors/grey';
+import { grey } from '@material-ui/core/colors';
 import Button from '@material-ui/core/Button';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
@@ -23,8 +23,8 @@ import AmountInput from 'App/Shared/Components/AmountInput';
 import MainButton from 'Shared/Components/MainButton';
 import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
 import InformationTag from 'App/Shared/Components/InformationTag/InformationTag';
-import TextField from '@material-ui/core/TextField/TextField';
-import Input from '@material-ui/core/Input/Input';
+import TextField from '@material-ui/core/TextField';
+import Input from '@material-ui/core/Input';
 import Checkbox from '@material-ui/core/Checkbox';
 import { combineMediaQueriesWithAnd } from '../../../../../Utils/Styles/combineMediaQueries';
 

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

@@ -1,10 +1,13 @@
 /* eslint-env jest */
 import React from 'react';
-import { noop } from 'lodash';
+import noop from 'lodash/noop';
 import { mount, render } from 'enzyme';
 import CalculationWidget from './index';
 import MenuItem from '@material-ui/core/MenuItem';
-import { Select, ExpansionPanel, ExpansionPanelDetails } from '@material-ui/core';
+import Select from '@material-ui/core/Select';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+
 import ServiceLocator from 'App/ServiceLocator';
 
 const designAreas = [

package/src/App/Screens/Configurator/Components/ConfigurationModeSwitch/ConfigurationModeSwitch.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { t } from 'Framework/i18n';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import AnalyticsWrapper from '../../../../Shared/Components/Analytics/AnalyticsWrapper';
 

package/src/App/Screens/Configurator/Components/FallbackVisualization/FallbackVisualization.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import { T } from 'Framework/i18n';
 import Typography from '@material-ui/core/Typography';
 import { ImageLoader } from '../ImageLoader/ImageLoader';

package/src/App/Screens/Configurator/Components/FullScreenView/index.js

@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button/Button';
-import Icon from '@material-ui/core/Icon/Icon';
-import Grid from '@material-ui/core/Grid/Grid';
+import Button from '@material-ui/core/Button';
+import Icon from '@material-ui/core/Icon';
+import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import withWidth, { isWidthDown } from '@material-ui/core/withWidth/withWidth';
+import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
 import { t } from 'Framework/i18n';
 import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
 import customClassName from 'App/Utils/customClassName';