@configuratorware/configurator-frontendgui 1.41.1 → 1.42.1

package/src/App/Shared/Components/AmountPrice/index.js

@@ -3,20 +3,20 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import isEqual from 'lodash/isEqual';
 import { withStyles } from '@material-ui/core/styles';
-import withWidth from '@material-ui/core/withWidth/withWidth';
-import Card from '@material-ui/core/Card/Card';
-import CardContent from '@material-ui/core/CardContent/CardContent';
-import Typography from '@material-ui/core/Typography/Typography';
-import Button from '@material-ui/core/Button/Button';
-import CardActions from '@material-ui/core/CardActions/CardActions';
-import Grid from '@material-ui/core/Grid/Grid';
-import grey from '@material-ui/core/colors/grey';
-import Dialog from '@material-ui/core/Dialog/Dialog';
-import DialogContent from '@material-ui/core/DialogContent/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle/DialogTitle';
-import DialogActions from '@material-ui/core/DialogActions/DialogActions';
-import Icon from '@material-ui/core/Icon/Icon';
-import RootRef from '@material-ui/core/RootRef/RootRef';
+import withWidth from '@material-ui/core/withWidth';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import CardActions from '@material-ui/core/CardActions';
+import Grid from '@material-ui/core/Grid';
+import { grey } from '@material-ui/core/colors';
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogActions from '@material-ui/core/DialogActions';
+import Icon from '@material-ui/core/Icon';
+import RootRef from '@material-ui/core/RootRef';
 import { InView } from 'react-intersection-observer';
 import { t } from 'Framework/i18n';
 import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
@@ -29,7 +29,7 @@ import AddToCart from '../AddToBasket';
 import ReceiveOfferForm from '../ReceiveOfferForm';
 import AcceptDesign from '../AcceptDesign';
 import LoadingOverlay from '../../../../Framework/Components/LoadingOverlay';
-import { debounce } from '@material-ui/core';
+import { debounce } from '@material-ui/core/utils';
 import AcceptPrivacy from '../AcceptPrivacy';
 import ConfigurationOverview from '../ConfigurationOverview';
 import { isMobileDevice } from 'Framework/Helpers/isMobileDevice';
@@ -172,6 +172,7 @@ const styles = theme => ({
             whiteSpace: 'normal',
             fontSize: 12,
         },
+        whiteSpace: 'nowrap',
     },
     AmountPriceTypography: {
         textAlign: 'end',
@@ -303,6 +304,9 @@ class AmountPrice extends React.Component {
         userComment: PropTypes.string,
         AcceptPrivacyComponent: PropTypes.elementType,
         userConfiguration: PropTypes.object,
+        skipPriceOverview: PropTypes.bool,
+        toggleGlobalLoader: PropTypes.func.isRequired,
+        isCreator: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -321,6 +325,7 @@ class AmountPrice extends React.Component {
         PriceListComponent: PriceList,
         AddToCartComponent: AddToCart,
         AcceptPrivacyComponent: AcceptPrivacy,
+        skipPriceOverview: false,
     };
 
     state = {
@@ -474,6 +479,23 @@ class AmountPrice extends React.Component {
         }
     };
 
+    onAddToCartClick = async () => {
+        if (this.props.skipPriceOverview) {
+            try {
+                this.props.toggleGlobalLoader(true);
+                await this.props.validateConfiguration();
+                return await this.props.onAddToBasket();
+            } catch (e) {
+                // eslint-disable-next-line no-console
+                console.warn(`Error while validating configuration: ${e}`);
+            } finally {
+                this.props.toggleGlobalLoader(false);
+            }
+            return;
+        }
+        return this.openPriceOverview();
+    };
+
     handleClose = () => {
         this.setState({
             showConfigurationOverview: false,
@@ -766,6 +788,7 @@ class AmountPrice extends React.Component {
             showCallToAction,
             showConfigurationModeSwitch,
             ConfigurationModeSwitchComponent,
+            isCreator,
         } = this.props;
 
         const isMobile = isMobileDevice();
@@ -777,7 +800,7 @@ class AmountPrice extends React.Component {
                         className={classes.cardContentWrapper}
                         classes={{ root: classes.AmountPriceContent }}
                     >
-                        {!isMobile && (
+                        {isCreator && !isMobile && (
                             <Grid container>
                                 <Grid item xs={12} sm={12} md={12} lg={12} className={classes.summary}>
                                     <Icon>list_alt</Icon>
@@ -856,7 +879,7 @@ class AmountPrice extends React.Component {
                                             variant="contained"
                                             fullWidth
                                             size="medium"
-                                            onClick={this.openPriceOverview}
+                                            onClick={this.onAddToCartClick}
                                             classes={{
                                                 root: classes.mainButton,
                                                 label: classes.mainButtonLabel,

package/src/App/Shared/Components/AmountPrice/index.test.jsx

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

package/src/App/Shared/Components/Analytics/AnalyticsWrapper.test.js

@@ -3,7 +3,8 @@ import React from 'react';
 import { mount, render } from 'enzyme/build';
 import AnalyticsWrapper from './AnalyticsWrapper';
 import ServiceLocator from '../../../ServiceLocator';
-import { Button, Select } from '@material-ui/core/index';
+import Button from '@material-ui/core/Button';
+import Select from '@material-ui/core/Select';
 
 it('the wrapper component does not modify the original output', () => {
     const clickFunc = jest.fn();

package/src/App/Shared/Components/BulkNames/index.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
 import withWidth from '@material-ui/core/withWidth';
 import { t } from 'Framework/i18n';
 import isEmpty from 'lodash/isEmpty';
 import upperFirst from 'lodash/upperFirst';
 import IconButton from '@material-ui/core/IconButton';
 import InputAdornment from '@material-ui/core/InputAdornment';
-import Dialog from '@material-ui/core/Dialog/Dialog';
+import Dialog from '@material-ui/core/Dialog';
 import Button from '@material-ui/core/Button';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -18,7 +18,7 @@ import Icon from '@material-ui/core/Icon';
 import AddCircle from '@material-ui/icons/AddCircle';
 import DeleteIcon from '@material-ui/icons/Delete';
 import MainButton from '../../../../Shared/Components/MainButton';
-import Grid from '@material-ui/core/Grid/Grid';
+import Grid from '@material-ui/core/Grid';
 import { PlusMinusInput } from '../PlusMinusInput';
 
 const styles = theme => ({

package/src/App/Shared/Components/CallToAction/__snapshots__/index.test.js.snap

@@ -4,7 +4,7 @@ exports[`Shared/Components/CallToAction does not render without an anchorRef 1`]
 
 exports[`Shared/Components/CallToAction renders with bottom offset 1`] = `
 <div
-  placement="bottom"
+  data-placement="bottom"
 >
   <div
     class="CallToAction-container-6 CallToAction-bottomContainer-10 CallToAction-bottomContainer-34"
@@ -30,7 +30,7 @@ exports[`Shared/Components/CallToAction renders with bottom offset 1`] = `
 
 exports[`Shared/Components/CallToAction renders with left offset 1`] = `
 <div
-  placement="left"
+  data-placement="left"
 >
   <div
     class="CallToAction-container-6 CallToAction-leftContainer-9 CallToAction-leftContainer-37"
@@ -56,7 +56,7 @@ exports[`Shared/Components/CallToAction renders with left offset 1`] = `
 
 exports[`Shared/Components/CallToAction renders with right offset 1`] = `
 <div
-  placement="right"
+  data-placement="right"
 >
   <div
     class="CallToAction-container-6 CallToAction-rightContainer-11 CallToAction-rightContainer-31"
@@ -82,7 +82,7 @@ exports[`Shared/Components/CallToAction renders with right offset 1`] = `
 
 exports[`Shared/Components/CallToAction renders with top offset 1`] = `
 <div
-  placement="top"
+  data-placement="top"
 >
   <div
     class="CallToAction-container-6 CallToAction-topContainer-8 CallToAction-topContainer-24"

package/src/App/Shared/Components/CallToAction/index.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
-import Icon from '@material-ui/core/Icon/Icon';
-import { Typography, withWidth } from '@material-ui/core';
-
+import Icon from '@material-ui/core/Icon';
+import Typography from '@material-ui/core/Typography';
+import withWidth from '@material-ui/core/withWidth';
 const textShadow = '0px 0px 4px rgba(255, 255, 255, 0.8)';
 
 const useStyles = makeStyles(

package/src/App/Shared/Components/CallToAction/index.test.js

@@ -7,7 +7,7 @@ jest.mock('@material-ui/core/Popper', () => {
         __esModule: true,
         // eslint-disable-next-line react/prop-types,react/display-name
         default: ({ children, placement }) => {
-            return <div placement={placement}>{children}</div>;
+            return <div data-placement={placement}>{children}</div>;
         },
     };
 });

package/src/App/Shared/Components/ConfigurationOverview/index.js

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

package/src/App/Shared/Components/Header/Header.js

@@ -2,15 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar/AppBar';
-import Toolbar from '@material-ui/core/Toolbar/Toolbar';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
 import { t } from 'Framework/i18n';
 
 import customClassName from 'App/Utils/customClassName';
 import Stepper from '../Stepper';
 import VariantChooser from '../VariantChooser';
 import ToolbarList from '../ToolbarList';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles(
     theme => ({

package/src/App/Shared/Components/InformationTag/InformationTag.js

@@ -1,7 +1,9 @@
 import React from 'react';
-import Icon from '@material-ui/core/Icon/Icon';
+import Icon from '@material-ui/core/Icon';
 import PropTypes from 'prop-types';
-import { IconButton, Typography, withStyles } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
 import Popover from '@material-ui/core/Popover';
 
 const styles = () => ({

package/src/App/Shared/Components/LicenseNotice/LicenseNotice.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import { Tooltip, withStyles, withWidth } from '@material-ui/core';
+import Tooltip from '@material-ui/core/Tooltip';
+import { withStyles } from '@material-ui/core/styles';
+import withWidth from '@material-ui/core/withWidth';
 import { t } from 'Framework/i18n';
 import PropTypes from 'prop-types';
 import ErrorIcon from '@material-ui/icons/Error';

package/src/App/Shared/Components/LoadConfiguration/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogActions from '@material-ui/core/DialogActions';
 import Typography from '@material-ui/core/Typography';
@@ -41,30 +41,38 @@ const styles = theme => ({
         marginBottom: 32,
     },
     codeField: {
-        fontSize: '26px',
         borderRadius: 4,
-        height: 40,
-        fontWeight: 'bold',
+        width: 200,
+        height: 20,
         [theme.breakpoints.down('xs')]: {
-            height: 56,
-            width: '100%',
+            width: 370,
         },
     },
     codeFieldInput: {
-        fontSize: '15px',
-        lineHeight: '18px',
+        fontSize: '24px',
+        lineHeight: '28px',
+        marginTop: 8,
+        marginBottom: 8,
         textAlign: 'center',
         height: 20,
-        padding: '10px 16px',
-        minWidth: 320,
+        padding: '10px',
+        fontWeight: 'bold',
         [theme.breakpoints.down('xs')]: {
-            padding: '0 5px',
-            height: 56,
             minWidth: 50,
         },
     },
+    codeFieldLabel: {
+        fontSize: '18px',
+        fontWeight: 'bold',
+        textAlign: 'center',
+        marginLeft: 1,
+        width: '99%',
+        backgroundColor: '#fff',
+        transform: 'translate(0px, 20px) scale(1)',
+    },
     activeButton: {
         padding: '6px 15px',
+        marginTop: 10,
     },
 });
 
@@ -120,13 +128,19 @@ class LoadConfiguration extends React.Component {
                                     value={loadCode}
                                     variant={'outlined'}
                                     onChange={this.onChange}
-                                    placeholder={t('loadConfiguration.codeInputPlaceholder')}
+                                    label={t('loadConfiguration.codeInputPlaceholder')}
                                     InputProps={{
                                         classes: {
                                             input: classes.codeFieldInput,
                                         },
                                         disableUnderline: true,
                                     }}
+                                    InputLabelProps={{
+                                        classes: {
+                                            outlined: classes.codeFieldLabel,
+                                        },
+                                        disableUnderline: true,
+                                    }}
                                 />
                             </div>
                         </React.Fragment>

package/src/App/Shared/Components/Notification/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid/Grid';
-import Typography from '@material-ui/core/Typography/Typography';
-import Icon from '@material-ui/core/Icon/Icon';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Icon from '@material-ui/core/Icon';
 import PropTypes from 'prop-types';
 
 const styles = () => ({

package/src/App/Shared/Components/PdfDownload/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import { t } from 'Framework/i18n';
-import withWidth from '@material-ui/core/withWidth/withWidth';
+import withWidth from '@material-ui/core/withWidth';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogActions from '@material-ui/core/DialogActions';
-import grey from '@material-ui/core/colors/grey';
-import Typography from '@material-ui/core/Typography/Typography';
+import { grey } from '@material-ui/core/colors';
+import Typography from '@material-ui/core/Typography';
 import { Services } from 'App/ServiceLocator';
 import PropTypes from 'prop-types';
 import CustomDialog from 'Shared/Components/CustomDialog';

package/src/App/Shared/Components/PlusMinusInput/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import withWidth from '@material-ui/core/withWidth/withWidth';
-import { withStyles } from '@material-ui/core';
+import withWidth from '@material-ui/core/withWidth';
+import { withStyles } from '@material-ui/core/styles';
 import isFunction from 'lodash/isFunction';
-import Input from '@material-ui/core/Input/Input';
-import InputAdornment from '@material-ui/core/InputAdornment/InputAdornment';
+import Input from '@material-ui/core/Input';
+import InputAdornment from '@material-ui/core/InputAdornment';
 import RemoveCircle from '../../../../Resources/Icons/MaterialUI/Icons/RemoveCircle';
 import AddCircle from '../../../../Resources/Icons/MaterialUI/Icons/AddCircle';
 

package/src/App/Shared/Components/PriceList/index.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import ListItem from '@material-ui/core/ListItem/ListItem';
-import List from '@material-ui/core/List/List';
-import ListItemText from '@material-ui/core/ListItemText/ListItemText';
-import Grid from '@material-ui/core/Grid/Grid';
-import Checkbox from '@material-ui/core/Checkbox/Checkbox';
-import Typography from '@material-ui/core/Typography/Typography';
-import { isFunction } from 'lodash';
+import ListItem from '@material-ui/core/ListItem';
+import List from '@material-ui/core/List';
+import ListItemText from '@material-ui/core/ListItemText';
+import Grid from '@material-ui/core/Grid';
+import Checkbox from '@material-ui/core/Checkbox';
+import Typography from '@material-ui/core/Typography';
+import isFunction from 'lodash/isFunction';
 import InformationTag from '../InformationTag/InformationTag';
 import { translationExists, t } from '../../../../Framework/i18n';
 import clsx from 'clsx';
@@ -19,7 +19,7 @@ const styles = theme => ({
         paddingLeft: 0,
     },
     MuiCheckboxRoot: {
-        margin: '0 0 0 12px',
+        //margin: '0 0 0 12px',
         padding: 0,
         [theme.breakpoints.down('xs')]: {
             margin: '0',
@@ -42,7 +42,7 @@ const styles = theme => ({
         overflow: 'hidden',
     },
     listItemPrimary: {
-        padding: '0 16px',
+        padding: '0 2px',
         [theme.breakpoints.down('xs')]: {
             padding: 0,
         },

package/src/App/Shared/Components/PriceList/index.test.js

@@ -2,8 +2,8 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
 import PriceList from './index';
-import { noop } from 'lodash';
-import { Typography } from '@material-ui/core';
+import noop from 'lodash/noop';
+import Typography from '@material-ui/core/Typography';
 
 it('renders correctly with default props', () => {
     const tree = render(<PriceList />);

package/src/App/Shared/Components/PriceOverview/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid/Grid';
-import Typography from '@material-ui/core/Typography/Typography';
-import Divider from '@material-ui/core/Divider/Divider';
-import Card from '@material-ui/core/Card/Card';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+import Card from '@material-ui/core/Card';
 import PropTypes from 'prop-types';
 
 const styles = theme => ({

package/src/App/Shared/Components/PriceOverview/index.story.js

@@ -8,7 +8,7 @@ import AddToCart from '../AddToBasket';
 import ProductVariant from '../ProductVariant';
 import AmountPrice from '../AmountPrice';
 import ReceiveOfferForm from '../ReceiveOfferForm';
-import Grid from '@material-ui/core/Grid/Grid';
+import Grid from '@material-ui/core/Grid';
 import blueImg from '../ProductVariant/res/blau.jpg';
 import greyIMG from '../ProductVariant/res/grau.jpg';
 import redIMG from '../ProductVariant/res/rot.jpg';

package/src/App/Shared/Components/ProductVariant/Image.js

@@ -1,4 +1,4 @@
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
 import React, { useEffect, useState } from 'react';
 import clsx from 'clsx';
 

package/src/App/Shared/Components/ProductVariant/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
 import { t } from 'Framework/i18n';
-import Grid from '@material-ui/core/Grid/Grid';
+import Grid from '@material-ui/core/Grid';
 import AmountInput from '../AmountInput';
 import isFunction from 'lodash/isFunction';
 import get from 'lodash/get';
@@ -11,10 +11,10 @@ import find from 'lodash/find';
 import sum from 'lodash/sum';
 import isEmpty from 'lodash/isEmpty';
 import upperFirst from 'lodash/upperFirst';
-import ListItem from '@material-ui/core/ListItem/ListItem';
-import Button from '@material-ui/core/Button/Button';
-import Typography from '@material-ui/core/Typography/Typography';
-import Icon from '@material-ui/core/Icon/Icon';
+import ListItem from '@material-ui/core/ListItem';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import Icon from '@material-ui/core/Icon';
 import BulkNames from '../../Containers/BulkNames';
 import Image from './Image';
 

package/src/App/Shared/Components/Progress/Progress.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import Fade from '@material-ui/core/Fade/Fade';
-import CircularProgress from '@material-ui/core/CircularProgress/CircularProgress';
-import withStyles from '@material-ui/core/styles/withStyles';
+import Fade from '@material-ui/core/Fade';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = () => ({
     container: {

package/src/App/Shared/Components/ReceiveOfferForm/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField/TextField';
+import TextField from '@material-ui/core/TextField';
 import Grid from '@material-ui/core/Grid';
-import _ from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
 import { t } from 'Framework/i18n';
 
 const styles = theme => ({
@@ -109,7 +109,7 @@ class ReceiveOfferForm extends React.Component {
     }
 
     handleBlur(event) {
-        const value = _.cloneDeep(this.state[event.target.name]);
+        const value = cloneDeep(this.state[event.target.name]);
 
         value.error = validateTextInput(event.target.name, event.target.value);
 
@@ -123,7 +123,7 @@ class ReceiveOfferForm extends React.Component {
         let approvalNotSet = null;
         const values = {};
 
-        const state = _.cloneDeep(this.state);
+        const state = cloneDeep(this.state);
 
         const inputFields = ['email', 'name', 'company', 'phonenumber', 'zip', 'city', 'street', 'country'];
 

package/src/App/Shared/Components/SaveConfiguration/index.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import { t } from 'Framework/i18n';
-import withWidth from '@material-ui/core/withWidth/withWidth';
+import withWidth from '@material-ui/core/withWidth';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogActions from '@material-ui/core/DialogActions';
-import Typography from '@material-ui/core/Typography/Typography';
+import Typography from '@material-ui/core/Typography';
 import CheckCircle from '@material-ui/icons/CheckCircle';
 import FileCopy from '@material-ui/icons/FileCopy';
 import Error from '@material-ui/icons/Error';
 import MainButton from 'Shared/Components/MainButton';
 import CustomDialog from 'Shared/Components/CustomDialog';
 import PropTypes from 'prop-types';
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
+import Tooltip from '@material-ui/core/Tooltip';
 
 const styles = theme => ({
     dialogTitleRoot: {

package/src/App/Shared/Components/SendEmail/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import makeStyles from '@material-ui/core/styles/makeStyles';
+import { makeStyles } from '@material-ui/core/styles';
 import { t } from 'Framework/i18n';
-import withWidth from '@material-ui/core/withWidth/withWidth';
+import withWidth from '@material-ui/core/withWidth';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogActions from '@material-ui/core/DialogActions';
 
-import Typography from '@material-ui/core/Typography/Typography';
+import Typography from '@material-ui/core/Typography';
 import CustomDialog from 'Shared/Components/CustomDialog';
 import MainButton from 'Shared/Components/MainButton';
 import PropTypes from 'prop-types';

package/src/App/Shared/Components/Stepper/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Tabs from '@material-ui/core/Tabs/Tabs';
-import Tab from '@material-ui/core/Tab/Tab';
-import Icon from '@material-ui/core/Icon/index';
-import withStyles from '@material-ui/core/styles/withStyles';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Icon from '@material-ui/core/Icon';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
     MuiTabRoot: {

package/src/App/Shared/Components/ToolbarList/index.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropsTypes from 'prop-types';
 import clsx from 'clsx';
-import Icon from '@material-ui/core/Icon/index';
-import withStyles from '@material-ui/core/styles/withStyles';
-import Hidden from '@material-ui/core/Hidden/Hidden';
-import MenuItem from '@material-ui/core/MenuItem/MenuItem';
-import IconButton from '@material-ui/core/IconButton/IconButton';
-import Menu from '@material-ui/core/Menu/Menu';
+import Icon from '@material-ui/core/Icon';
+import { withStyles } from '@material-ui/core/styles';
+import Hidden from '@material-ui/core/Hidden';
+import MenuItem from '@material-ui/core/MenuItem';
+import IconButton from '@material-ui/core/IconButton';
+import Menu from '@material-ui/core/Menu';
 import AnalyticsWrapper from '../Analytics/AnalyticsWrapper';
 import customClassName from 'App/Utils/customClassName';
 import { t } from 'Framework/i18n';