@configuratorware/configurator-frontendgui 1.28.6 → 1.29.3

package/src/App/Modules/Designer/Components/DesignAreaControlbox/index.js

@@ -51,7 +51,9 @@ const styles = theme => ({
             padding: 0,
         },
         '&:last-child': {
-            paddingBottom: 16,
+            [theme.breakpoints.up('sm')]: {
+                paddingBottom: 16,
+            },
         },
     },
     listItemText: {
@@ -101,13 +103,28 @@ const styles = theme => ({
         },
     },
     underlineInputText: {
-        marginBottom: 8,
+        marginBottom: 0,
+        [theme.breakpoints.up('sm')]: {
+            marginBottom: 8,
+        },
+        '&:before': {
+            borderBottom: 0,
+            [theme.breakpoints.up('sm')]: {
+                borderBottom: '1px solid rgba(0, 0, 0, 0.42)',
+            },
+        },
         //https://github.com/mui-org/material-ui/issues/12192#issuecomment-406182809
         '&&&&:hover:before': {
-            borderBottom: '1px solid rgba(0, 0, 0, 0.42)',
+            borderBottom: 0,
+            [theme.breakpoints.up('sm')]: {
+                borderBottom: '1px solid rgba(0, 0, 0, 0.42)',
+            },
         },
         '&:after': {
-            borderBottom: '1px solid transparent',
+            borderBottom: 0,
+            [theme.breakpoints.up('sm')]: {
+                borderBottom: '1px solid transparent',
+            },
         },
     },
     iconRootCheck: {

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/Modules/Designer/Containers/Designer.js

@@ -1,6 +1,6 @@
 import { containerConnect } from 'Framework/ComponentContainer';
 import { designAreaAppliesMask, getCurrentCanvasSize } from 'App/Reducers/DesignArea/Selectors';
-import { DefaultDesigner } from 'App/Screens/Configurator/DesignerUI';
+import { DefaultDesigner } from '../DesignerUI';
 import { Services } from 'App/ServiceLocator';
 import { getClientHighlightColor, visualizationModeCheck } from 'App/Reducers/Configurator/Selectors';
 import { isFallbackVisualizationMode } from 'App/Reducers/Configurator/Selectors';

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

@@ -25,6 +25,7 @@ import DesignerSelectionToolbox from './Containers/DesignerSelectionToolbox';
 import AddVisualElement from './Containers/AddVisualElement';
 import ScreenPropTypes from '../../Screens/Configurator/ScreenPropTypes';
 import FullScreenView from './Components/FullScreenView/FullScreenView';
+import DesignerClickAwayListener from './MultilayerComponents/DesignerClickAwayListener';
 
 /**
  * Main Screen of the configurator
@@ -59,6 +60,7 @@ export function DesignerScreen(props) {
         renderLoader,
         renderLicenseNotice,
         customElements,
+        visualizationOverlayMode,
 
         // Components
         CanvasProvider,
@@ -78,6 +80,16 @@ export function DesignerScreen(props) {
                     renderProps.width === 'xs' && showDesigner ? () => <div /> : renderHeader()
                 }
                 fallbackMode={fallbackMode}
+                showDesigner={showDesigner}
+                visualizationOverlayMode={visualizationOverlayMode}
+                renderDesigner={
+                    visualizationOverlayMode &&
+                    (props => (
+                        <FallbackVisualization fallbackMode={fallbackMode} showContent={showDesigner}>
+                            {showDesigner && renderDesigner({ visualizationOverlayMode, ...props })}
+                        </FallbackVisualization>
+                    ))
+                }
                 renderVisualization={() =>
                     renderVisualization({
                         fullScreenViewProps: {
@@ -100,9 +112,11 @@ export function DesignerScreen(props) {
                                 : !showProductViewButton && renderEditDesignButton({ styledButton: false })
                             : null}
                         {!fallbackMode && <DesignerAlignTarget />}
-                        <FallbackVisualization fallbackMode={fallbackMode} showContent={showDesigner}>
-                            {showDesigner && renderDesigner()}
-                        </FallbackVisualization>
+                        {!visualizationOverlayMode && (
+                            <FallbackVisualization fallbackMode={fallbackMode} showContent={showDesigner}>
+                                {showDesigner && renderDesigner()}
+                            </FallbackVisualization>
+                        )}
                         {renderError()}
                         {renderAlertMessages()}
                         {renderConfirm()}
@@ -230,11 +244,21 @@ const renderEditDesignButton = ({ styledButton }) => <EditDesignButton buttonXS=
 DesignerScreen.defaultProps = {
     // Render props
     renderCreator: () => null,
-    renderDesigner: () => (
-        <React.Suspense fallback={<div>Loading Designer Component...</div>}>
-            <Designer />
-        </React.Suspense>
-    ),
+    renderDesigner: ({ designerClassName, visualizationOverlayMode } = {}) => {
+        const designer = <Designer visualizationOverlayMode={visualizationOverlayMode} />;
+        return (
+            <React.Suspense fallback={<div>Loading Designer Component...</div>}>
+                {visualizationOverlayMode ? (
+                    <>
+                        <DesignerClickAwayListener />
+                        <div className={designerClassName}>{designer}</div>
+                    </>
+                ) : (
+                    designer
+                )}
+            </React.Suspense>
+        );
+    },
     renderDesignerSelectionToolbox: () => (
         <React.Suspense fallback={<div>Loading Designer Toolbox...</div>}>
             <DesignerSelectionToolbox />

package/src/App/{Screens/Configurator → Modules/Designer}/DesignerUI.js

@@ -7,8 +7,8 @@ import IconDelete from '@material-ui/icons/Delete';
 import IconRotate from '@material-ui/icons/RotateRight';
 import IconScale from '@material-ui/icons/UnfoldMore';
 
-import Designer from 'App/Modules/Designer/Designer';
-import AddVisualElement from 'App/Modules/Designer/Containers/AddVisualElement';
+import Designer from './Designer';
+import AddVisualElement from './Containers/AddVisualElement';
 import withWidth, { isWidthUp } from '@material-ui/core/withWidth/withWidth';
 
 import { getConf } from 'App/configuration';
@@ -16,6 +16,8 @@ import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
 import { useSelector } from 'react-redux';
 import { getSelectedDesignProductionMethod } from '../../Reducers/DesignArea/Selectors';
+import StandardToolboxPortal from './MultilayerComponents/StandardToolboxPortal';
+import InlineToolboxPortal from './MultilayerComponents/InlineToolboxPortal';
 
 const StandardToolboxWithCanvasState = withWidth()(
     ({ width }) =>
@@ -26,15 +28,23 @@ const StandardToolboxWithCanvasState = withWidth()(
         )
 );
 
-const renderStandardToolbox = ({ upload, components: { StandardToolbox } }) => (
-    <StandardToolbox {...{ upload }}>
-        {({ canvas }) => (
-            <CanvasStateProvider canvas={canvas}>
-                <StandardToolboxWithCanvasState canvas={canvas} />
-            </CanvasStateProvider>
-        )}
-    </StandardToolbox>
-);
+const renderStandardToolbox = ({ visualizationOverlayMode } = {}) => ({
+    upload,
+    components: { StandardToolbox },
+}) => {
+    const ContainerComponent = visualizationOverlayMode ? StandardToolboxPortal : React.Fragment;
+    return (
+        <ContainerComponent>
+            <StandardToolbox {...{ upload }}>
+                {({ canvas }) => (
+                    <CanvasStateProvider canvas={canvas}>
+                        <StandardToolboxWithCanvasState canvas={canvas} />
+                    </CanvasStateProvider>
+                )}
+            </StandardToolbox>
+        </ContainerComponent>
+    );
+};
 
 const toolboxButtonStyle = {
     width: 40,
@@ -119,8 +129,12 @@ const renderAngleLabel = angleLabel => {
     return <AngleLabel angleLabel={angleLabel} />;
 };
 
-const renderInlineToolbox = ({ components: { InlineToolbox } }) => (
-    <InlineToolbox renderToolboxButton={renderInlineToolButton} renderAngleLabel={renderAngleLabel} />
+const renderInlineToolbox = ({ visualizationOverlayMode }) => ({ components: { InlineToolbox } }) => (
+    <InlineToolbox
+        renderToolboxButton={renderInlineToolButton}
+        renderAngleLabel={renderAngleLabel}
+        ContainerComponent={visualizationOverlayMode ? InlineToolboxPortal : React.Fragment}
+    />
 );
 
 renderInlineToolButton.propTypes = {
@@ -134,17 +148,19 @@ renderInlineToolbox.propTypes = {
     components: PropTypes.element,
 };
 
-renderStandardToolbox.propTypes = {
-    upload: PropTypes.array,
-    components: PropTypes.element,
+export const DefaultDesigner = ({ visualizationOverlayMode, ...props }) => {
+    return (
+        <Designer
+            renderStandardToolbox={renderStandardToolbox({ visualizationOverlayMode })}
+            renderSelectionToolbox={() => null /*disable the default*/}
+            renderInlineToolbox={renderInlineToolbox({ visualizationOverlayMode })}
+            renderRulers={getConf('displayEditorRulers', true) ? null : noop}
+            fillContainer
+            {...props}
+        />
+    );
+};
+
+DefaultDesigner.propTypes = {
+    visualizationOverlayMode: PropTypes.bool.isRequired,
 };
-export const DefaultDesigner = props => (
-    <Designer
-        renderStandardToolbox={renderStandardToolbox}
-        renderSelectionToolbox={() => null /*disable the default*/}
-        renderInlineToolbox={renderInlineToolbox}
-        renderRulers={getConf('displayEditorRulers', true) ? null : noop}
-        fillContainer
-        {...props}
-    />
-);

package/src/App/Modules/Designer/Layouts/DefaultLayout.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import withWidth from '@material-ui/core/withWidth';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 
 const styles = theme => ({
     root: {
@@ -97,6 +98,26 @@ const styles = theme => ({
             top: 69,
         },
     },
+    visualizationOverlay: {
+        pointerEvents: 'none',
+        zIndex: 1,
+    },
+    designer: {
+        position: 'absolute',
+        width: '100%',
+        height: 'calc(100% - 342px)',
+        display: 'flex',
+        pointerEvents: 'none',
+        top: 60,
+        [theme.breakpoints.up('sm')]: {
+            top: 0,
+        },
+        [theme.orientation.landscape]: {
+            width: 'calc(100% - 366px)',
+            height: 'calc(100% - 150px)',
+            top: 0,
+        },
+    },
     toBottom: {
         marginTop: 'auto',
     },
@@ -129,6 +150,9 @@ const DefaultLayout = ({
     fallbackMode,
     isPortraitMode,
     imageOnly,
+    renderDesigner,
+    showDesigner,
+    visualizationOverlayMode,
 }) => {
     return imageOnly ? (
         <div className={`${classes.root} ${fallbackMode ? classes.fallbackMode : ''}`}>
@@ -155,7 +179,17 @@ const DefaultLayout = ({
                 })}
             </div>
             <div className={`${classes.container} ${isPortraitMode ? classes.containerTabletPortrait : ''}`}>
-                {!fallbackMode && <div className={classes.visualization}>{renderVisualization()}</div>}
+                {renderDesigner && renderDesigner({ designerClassName: classes.designer })}
+                {!fallbackMode && (
+                    <div
+                        className={clsx(
+                            classes.visualization,
+                            showDesigner && visualizationOverlayMode && classes.visualizationOverlay
+                        )}
+                    >
+                        {renderVisualization()}
+                    </div>
+                )}
                 <div className={classes.main}>
                     {renderMain({
                         area: 'main',

package/src/App/Modules/Designer/MultilayerComponents/DesignerClickAwayListener.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Services } from 'App/ServiceLocator';
+import { withStyles } from '@material-ui/core';
+
+const styles = () => ({
+    root: { position: 'absolute', height: '100%', width: '100%' },
+});
+
+export const DesignerClickAwayListener = ({ classes }) => (
+    <div className={classes.root} onClick={() => Services.designData.clearDesignAreaSelection()} />
+);
+
+DesignerClickAwayListener.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { name: 'DesignerClickAwayListener' })(DesignerClickAwayListener);

package/src/App/Modules/Designer/MultilayerComponents/InlineToolboxPortal.js

@@ -0,0 +1,54 @@
+import React, { useEffect, useLayoutEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import Portal from '@material-ui/core/Portal';
+import { withStyles } from '@material-ui/core';
+
+const styles = {
+    root: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        zIndex: 1,
+        pointerEvents: 'none',
+        '& > *': {
+            pointerEvents: 'all',
+        },
+    },
+};
+
+const InlineToolboxPortal = ({
+    classes,
+    canvasPosition,
+    canvas,
+    selectedObject,
+    inlineToolboxRef,
+    ...props
+}) => {
+    const [style, setStyle] = useState(null);
+    useEffect(() => {
+        const { top, left, width, height } = canvas.canvasElement.getBoundingClientRect();
+        setStyle({ top, left, width, height, position: 'absolute' });
+    }, [canvasPosition, canvas, selectedObject, inlineToolboxRef]);
+    useLayoutEffect(() => {
+        inlineToolboxRef && inlineToolboxRef.updateToolbarTransform();
+    }, [style, inlineToolboxRef]);
+    return (
+        <Portal>
+            <div className={classes.root} style={style} {...props} />
+        </Portal>
+    );
+};
+
+InlineToolboxPortal.propTypes = {
+    classes: PropTypes.object.isRequired,
+    canvasPosition: PropTypes.object.isRequired,
+    canvas: PropTypes.object.isRequired,
+    selectedObject: PropTypes.object,
+    inlineToolboxRef: PropTypes.object,
+};
+
+export const StyledInlineToolboxPortal = withStyles(styles, { name: 'StandardToolboxPortal' })(
+    InlineToolboxPortal
+);
+
+export default StyledInlineToolboxPortal;

package/src/App/Modules/Designer/MultilayerComponents/StandardToolboxPortal.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Portal from '@material-ui/core/Portal';
+import { withStyles } from '@material-ui/core';
+
+const styles = theme => ({
+    root: {
+        position: 'absolute',
+        zIndex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        bottom: 48,
+        left: 8,
+        width: 'calc(100% - 388px)',
+        [theme.orientation.portrait]: {
+            bottom: 370,
+            left: 0,
+            width: '100%',
+        },
+    },
+});
+
+const StandardToolboxPortal = ({ classes, ...props }) => (
+    <Portal>
+        <div className={classes.root} {...props} />
+    </Portal>
+);
+
+StandardToolboxPortal.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export const StyledStandardToolboxPortal = withStyles(styles, { name: 'StandardToolboxPortal' })(
+    StandardToolboxPortal
+);
+
+export default StyledStandardToolboxPortal;

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/Screens/Configurator/Components/CalculationWidget/__snapshots__/index.test.jsx.snap

@@ -100,7 +100,7 @@ exports[`renders correctly 1`] = `
               </div>
             </div>
             <div
-              class="MuiCollapse-container MuiCollapse-hidden"
+              class="MuiCollapse-root MuiCollapse-hidden"
               style="min-height:0px"
             >
               <div
@@ -277,7 +277,7 @@ exports[`renders correctly 1`] = `
               </div>
             </div>
             <div
-              class="MuiCollapse-container MuiCollapse-hidden"
+              class="MuiCollapse-root MuiCollapse-hidden"
               style="min-height:0px"
             >
               <div
@@ -454,7 +454,7 @@ exports[`renders correctly 1`] = `
               </div>
             </div>
             <div
-              class="MuiCollapse-container MuiCollapse-hidden"
+              class="MuiCollapse-root MuiCollapse-hidden"
               style="min-height:0px"
             >
               <div
@@ -631,7 +631,7 @@ exports[`renders correctly 1`] = `
               </div>
             </div>
             <div
-              class="MuiCollapse-container MuiCollapse-hidden"
+              class="MuiCollapse-root MuiCollapse-hidden"
               style="min-height:0px"
             >
               <div

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/__snapshots__/index.test.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Screens/Configurator/Components/FullScreenView renders correctly 1`] = `
 <div
-  class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-align-items-xs-center MuiGrid-justify-xs-space-between"
+  class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-align-items-xs-center MuiGrid-justify-content-xs-space-between"
 >
   <div
     aria-disabled="false"

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

@@ -27,6 +27,7 @@ const styles = theme => ({
         left: 'calc(50%)',
         zIndex: 2,
         transform: 'translate(-50%, 0)',
+        pointerEvents: 'all',
         [theme.breakpoints.down('sm')]: {
             zIndex: 5,
         },
@@ -179,7 +180,7 @@ class FullScreenView extends React.Component {
                     <Grid
                         container
                         direction="column"
-                        justify="space-between"
+                        justifyContent="space-between"
                         className={clsx(classes.viewsContainer, customClassName('views'))}
                     >
                         {showPreviewButton && (
@@ -216,7 +217,7 @@ class FullScreenView extends React.Component {
                     !topPreviewButton &&
                     showPreviewButton &&
                     width !== 'xs' && (
-                        <Grid container direction="column" justify="space-between" alignItems="center">
+                        <Grid container direction="column" justifyContent="space-between" alignItems="center">
                             <PreviewButton
                                 {...this.props}
                                 onClick={this.openPreview}