@configuratorware/configurator-frontendgui 1.36.0-beta.0 → 1.36.1

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.36.0-beta.0",
+  "version": "1.36.1",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.36.0-beta.0",
-    "@hot-loader/react-dom": "^17.0.2",
+    "@configuratorware/scripts": "1.36.1",
+    "@hot-loader/react-dom": "^17.0.1",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -26,9 +26,9 @@
     "path-browserify": "^1.0.1",
     "prop-types": "^15.7.2",
     "qs": "^6.10.1",
-    "react": "^17.0.2",
+    "react": "^16.14.0",
     "react-custom-scrollbars": "^4.2.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^16.14.0",
     "react-file-drop": "^0.2.8",
     "react-hot-loader": "^4.13.0",
     "react-hyphen": "^1.4.0",
@@ -37,10 +37,10 @@
     "react-redux-i18n": "^1.9.3",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-swipeable": "^6.2.2",
+    "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.36.0-beta.0",
-    "redhotmagma-visualization": "1.36.0-beta.0",
+    "redhotmagma-graphics-editor": "1.36.1",
+    "redhotmagma-visualization": "1.36.1",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",
@@ -52,18 +52,25 @@
     "uuid": "^3.4.0"
   },
   "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",
-    "css-loader": "^5.2.7",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "css-loader": "^5.2.0",
     "file-loader": "^6.2.0",
-    "mini-css-extract-plugin": "^2.1.0",
-    "resolve-url-loader": "^3.1.4",
-    "sass": "^1.53.0",
-    "sass-loader": "^13.0.2",
+    "mini-css-extract-plugin": "^1.4.0",
+    "node-sass": "^5.0.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "resolve-url-loader": "^3.1.2",
+    "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.1.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.46.0",
-    "webpack-cli": "^4.7.2",
+    "webpack": "^5.28.0",
+    "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.11.2"
   },
   "scripts": {

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

@@ -253,6 +253,10 @@ const Option = ({ children, render, ...props }) => {
         });
     };
 
+    const onAbstractClicked = event => {
+        event.stopPropagation();
+    };
+
     const onDetailsClicked = event => {
         event.stopPropagation();
         event.preventDefault();
@@ -409,7 +413,9 @@ const Option = ({ children, render, ...props }) => {
                     {!hidePrices && <div className={classes.price}>{option.priceFormatted}</div>}
                     {smallerScreen && renderControls('horizontal')}
                     {option.abstract && (
-                        <Markdown className={classes.description}>{option.abstract}</Markdown>
+                        <Markdown className={classes.description} onClick={onAbstractClicked}>
+                            {option.abstract}
+                        </Markdown>
                     )}
 
                     {renderActions()}
@@ -481,6 +487,7 @@ const Option = ({ children, render, ...props }) => {
         onOptionSelected,
         onOptionClicked,
         onAmountChanged,
+        onAbstractClicked,
         onDetailsClicked,
         onIncompatibilityClicked,
         onOptionGroupClicked,

package/src/App/Modules/Creator/Components/Optiondetail/__snapshots__/index.test.js.snap

@@ -5,28 +5,30 @@ exports[`Screens/Components/ImageEditDialog/MessageBox renders as a modal screen
   <div
     class="MuiDialogContent-root Optiondetail-detailDialogContentRoot-14"
   >
-    <div
-      class="Optiondetail-detailContainer-4"
-    >
-      <div>
-        <div
-          class="MuiTypography-root Optiondetail-detailsTypography-8 MuiTypography-body2"
-        >
-          <p>
-            Das sind schwarze Reissverschlüsse
-          </p>
-        </div>
-        <div
-          class="MuiTypography-root Optiondetail-priceFormatted-6 MuiTypography-body2"
-        >
-          0,00 €
-        </div>
-        <div
-          class="MuiTypography-root Optiondetail-detailsTypography-8 MuiTypography-body2"
-        >
-          <p>
-            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
-          </p>
+    <div>
+      <div
+        class="Optiondetail-detailContainer-4"
+      >
+        <div>
+          <div
+            class="MuiTypography-root Optiondetail-detailsTypography-8 MuiTypography-body2"
+          >
+            <p>
+              Das sind schwarze Reissverschlüsse
+            </p>
+          </div>
+          <div
+            class="MuiTypography-root Optiondetail-priceFormatted-6 MuiTypography-body2"
+          >
+            0,00 €
+          </div>
+          <div
+            class="MuiTypography-root Optiondetail-detailsTypography-8 MuiTypography-body2"
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+            </p>
+          </div>
         </div>
       </div>
     </div>
@@ -60,28 +62,30 @@ exports[`Screens/Components/ImageEditDialog/MessageBox renders as full screen on
   <div
     class="MuiDialogContent-root Optiondetail-detailDialogContentRoot-14"
   >
-    <div
-      class="Optiondetail-detailContainer-4"
-    >
-      <div>
-        <div
-          class="MuiTypography-root Optiondetail-detailsTypography-8 MuiTypography-body2"
-        >
-          <p>
-            Das sind schwarze Reissverschlüsse
-          </p>
-        </div>
-        <div
-          class="MuiTypography-root Optiondetail-priceFormatted-6 MuiTypography-body2"
-        >
-          0,00 €
-        </div>
-        <div
-          class="MuiTypography-root Optiondetail-detailsTypography-8 MuiTypography-body2"
-        >
-          <p>
-            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
-          </p>
+    <div>
+      <div
+        class="Optiondetail-detailContainer-4"
+      >
+        <div>
+          <div
+            class="MuiTypography-root Optiondetail-detailsTypography-8 MuiTypography-body2"
+          >
+            <p>
+              Das sind schwarze Reissverschlüsse
+            </p>
+          </div>
+          <div
+            class="MuiTypography-root Optiondetail-priceFormatted-6 MuiTypography-body2"
+          >
+            0,00 €
+          </div>
+          <div
+            class="MuiTypography-root Optiondetail-detailsTypography-8 MuiTypography-body2"
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+            </p>
+          </div>
         </div>
       </div>
     </div>
@@ -115,36 +119,38 @@ exports[`Screens/Components/ImageEditDialog/MessageBox renders with previous and
   <div
     class="MuiDialogContent-root Optiondetail-detailDialogContentRoot-14"
   >
-    <div
-      class="Optiondetail-detailContainerWithNav-3"
-    >
+    <div>
       <div
-        class="Optiondetail-detailNav-1 prev"
-      />
-      <div>
-        <div
-          class="MuiTypography-root Optiondetail-detailsTypography-8 MuiTypography-body2"
-        >
-          <p>
-            Das sind schwarze Reissverschlüsse
-          </p>
-        </div>
+        class="Optiondetail-detailContainerWithNav-3"
+      >
         <div
-          class="MuiTypography-root Optiondetail-priceFormatted-6 MuiTypography-body2"
-        >
-          0,00 €
+          class="Optiondetail-detailNav-1 prev"
+        />
+        <div>
+          <div
+            class="MuiTypography-root Optiondetail-detailsTypography-8 MuiTypography-body2"
+          >
+            <p>
+              Das sind schwarze Reissverschlüsse
+            </p>
+          </div>
+          <div
+            class="MuiTypography-root Optiondetail-priceFormatted-6 MuiTypography-body2"
+          >
+            0,00 €
+          </div>
+          <div
+            class="MuiTypography-root Optiondetail-detailsTypography-8 MuiTypography-body2"
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+            </p>
+          </div>
         </div>
         <div
-          class="MuiTypography-root Optiondetail-detailsTypography-8 MuiTypography-body2"
-        >
-          <p>
-            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
-          </p>
-        </div>
+          class="Optiondetail-detailNav-1 next"
+        />
       </div>
-      <div
-        class="Optiondetail-detailNav-1 next"
-      />
     </div>
   </div>
   <div

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import _ from 'lodash';
+import { Swipeable } from 'react-swipeable';
 import clsx from 'clsx';
 import Button from '@material-ui/core/Button';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -16,7 +17,6 @@ import OptionlistitemAmount from '../OptionAmount';
 import getImageUrl from '../../../../Utils/getImageUrl';
 import Markdown from '../../../../../Framework/Components/Markdown';
 import ZoomImage from './ZoomImage';
-import { LEFT, RIGHT, Swipeable } from '../../../../../Shared/Components/Swipeable';
 
 const styles = theme => ({
     detailNav: {
@@ -189,11 +189,14 @@ class Optiondetail extends React.Component {
         }
     };
 
-    swiped = e => {
-        if (e.dir === LEFT) {
-            this.next();
-        } else if (e.dir === RIGHT) {
-            this.prev();
+    swiped = (e, deltaX, deltaY) => {
+        // use only horizontal swiping
+        if (Math.abs(deltaX) >= Math.abs(deltaY)) {
+            if (deltaX > 0) {
+                this.next();
+            } else {
+                this.prev();
+            }
         }
     };
 
@@ -348,53 +351,55 @@ class Optiondetail extends React.Component {
                         </div>
                     ) : (
                         <Swipeable
-                            options={{
-                                trackMouse: true,
-                                onSwiped: showNav && this.swiped,
-                                delta: Optiondetail.swipeDelta,
-                            }}
-                            ref={this.setDetailsContainerRef}
-                            className={showNav ? classes.detailContainerWithNav : classes.detailContainer}
+                            disabled={!showNav}
+                            trackMouse={true}
+                            onSwiped={this.swiped}
+                            delta={Optiondetail.swipeDelta}
                         >
-                            {showNav && (
-                                <div className={clsx(classes.detailNav, 'prev')} onClick={this.prev} />
-                            )}
+                            <div
+                                ref={this.setDetailsContainerRef}
+                                className={showNav ? classes.detailContainerWithNav : classes.detailContainer}
+                            >
+                                {showNav && (
+                                    <div className={clsx(classes.detailNav, 'prev')} onClick={this.prev} />
+                                )}
 
-                            {detailImage ? (
-                                <div
-                                    className={clsx({
-                                        [classes.detailsWithImageContainer]: !showFullScreenModal,
-                                    })}
-                                >
+                                {detailImage ? (
                                     <div
-                                        className={
-                                            this.state.hasZoom
-                                                ? classes.imageContainerWithZoom
-                                                : classes.imageContainer
-                                        }
-                                        onClick={this.state.hasZoom ? this.toggleZoomImage : null}
+                                        className={clsx({
+                                            [classes.detailsWithImageContainer]: !showFullScreenModal,
+                                        })}
                                     >
-                                        <img
-                                            ref={this.setDetailsImageRef}
-                                            onLoad={this.handleImageLoaded}
+                                        <div
                                             className={
-                                                this.state.zoomImage && ['xs', 'sm'].includes(width)
-                                                    ? classes.imageHidden
-                                                    : classes.image
+                                                this.state.hasZoom
+                                                    ? classes.imageContainerWithZoom
+                                                    : classes.imageContainer
                                             }
-                                            src={getImageUrl(detailImage)}
-                                            alt={details.title}
-                                        />
+                                            onClick={this.state.hasZoom ? this.toggleZoomImage : null}
+                                        >
+                                            <img
+                                                ref={this.setDetailsImageRef}
+                                                onLoad={this.handleImageLoaded}
+                                                className={
+                                                    this.state.zoomImage && ['xs', 'sm'].includes(width)
+                                                        ? classes.imageHidden
+                                                        : classes.image
+                                                }
+                                                src={getImageUrl(detailImage)}
+                                                alt={details.title}
+                                            />
+                                        </div>
+                                        {detailsContent}
                                     </div>
-                                    {detailsContent}
-                                </div>
-                            ) : (
-                                detailsContent
-                            )}
+                                ) : (
+                                    detailsContent
+                                )}
 
-                            {showNav && (
-                                <div className={clsx(classes.detailNav, 'next')} onClick={this.next} />
-                            )}
+                                {showNav && (
+                                    <div className={clsx(classes.detailNav, 'next')} onClick={this.next} />
+                                )}
+                            </div>
                         </Swipeable>
                     )}
                 </DialogContent>

package/src/App/Modules/Creator/CreatorScreen.js

@@ -310,5 +310,3 @@ CreatorScreen.defaultProps = {
     Layout: DefaultLayout,
     OptionsListContainer,
 };
-
-export default CreatorScreen;

package/src/App/Modules/Designer/Components/DesignerSelectionToolbox/DesignerSelectionToolbox.js

@@ -10,11 +10,12 @@ import TextControlbox from '../TextControlbox';
 import ImageControlbox from '../ImageControlbox';
 import { CustomFontOverlay } from './CustomFontOverlay';
 import { createFontItemProps, findCurrentFontItem } from './fontItemUtils';
-import { isPlaceholderContent } from 'App/Reducers/DesignArea/Selectors';
+import { isPlaceholderContent, isOneLineText } from 'App/Reducers/DesignArea/Selectors';
 import isMobileDevice from 'Framework/Helpers/isMobileDevice';
 import { hasBackgroundColor } from 'App/Reducers/DesignData/Selectors';
 import { t } from 'Framework/i18n';
 import { isOriginalVector } from '../../Utils/Transformers';
+import { useSelector } from 'react-redux';
 
 const styles = theme => ({
     root: {
@@ -132,11 +133,13 @@ const DesignerSelectionToolbox = props => {
         defaultFont,
         loadFonts,
         initialColor,
+        autoFocusEditor,
     } = props;
 
     const rteRef = useRef(null);
     const editorRef = useRef(null);
     const [showCustomFontOverlay, toggleCustomFontOverlay] = useState(false);
+    const disableLinebreaks = useSelector(state => isOneLineText(state));
 
     return (
         <div className={classes.root}>
@@ -271,6 +274,12 @@ const DesignerSelectionToolbox = props => {
                                                                 canvas.selectedObject.content = '';
                                                             }
                                                         },
+                                                        onBlur: () => {
+                                                            const regex = /<\/span>/;
+                                                            if (selectedObject.content.search(regex) === -1) {
+                                                                canvas.selectedObject.remove();
+                                                            }
+                                                        },
                                                     };
 
                                                     if (selectedObject.isBulkName) {
@@ -285,10 +294,14 @@ const DesignerSelectionToolbox = props => {
 
                                                     return renderTextEditor({
                                                         ...textToolsRenderObj,
-                                                        autoFocusWhenMounted: !(
-                                                            isPlaceholderContent(selectedObject.content) ||
-                                                            isMobileDevice()
-                                                        ),
+                                                        disableLinebreaks,
+                                                        autoFocusWhenMounted:
+                                                            autoFocusEditor ||
+                                                            !(
+                                                                isPlaceholderContent(
+                                                                    selectedObject.content
+                                                                ) || isMobileDevice()
+                                                            ),
                                                         textEditorElementProps,
                                                         onChangeHTML: (...args) => {
                                                             // call the original function first with all the args
@@ -390,6 +403,7 @@ DesignerSelectionToolbox.propTypes = {
     addCustomFont: PropTypes.func,
     defaultFont: PropTypes.object,
     initialColor: PropTypes.object,
+    autoFocusEditor: PropTypes.bool,
 };
 
 DesignerSelectionToolbox.defaultProps = {
@@ -402,6 +416,7 @@ DesignerSelectionToolbox.defaultProps = {
     width: '',
     isActiveBulkName: false,
     isPortraitMode: false,
+    autoFocusEditor: false,
 };
 
 export default withWidth()(

package/src/App/Modules/Designer/Components/FullScreenView/FullScreenView.js

@@ -22,7 +22,7 @@ const styles = theme => ({
         [theme.orientation.landscape]: {
             height: 136,
         },
-        '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 825px)': {
+        '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)': {
             width: '100%',
             maxWidth: '100%',
             position: 'absolute',

package/src/App/Modules/Designer/Containers/ImageEditDialog.js

@@ -567,7 +567,7 @@ export class ImageEditDialogContainer extends React.Component {
             return;
         }
 
-        if (activeTabIndex === 0) {
+        if (activeTabIndex === 0 && !(image.gallery && colorDisabled)) {
             this.setState({ activeTabIndex: image.gallery ? 2 : 1 });
             return;
         }

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

@@ -280,5 +280,3 @@ DesignerScreen.defaultProps = {
     Layout: DefaultLayout,
     PopupArea: DefaultPopupArea,
 };
-
-export default DesignerScreen;

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

@@ -20,7 +20,7 @@ const styles = theme => ({
         [theme.breakpoints.up('lg')]: {
             maxHeight: 'calc(100% - 196px)',
         },
-        '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 825px)': {
+        '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)': {
             maxHeight: '100%',
         },
     },

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

@@ -26,7 +26,7 @@ const styles = theme => ({
                 marginTop: 0,
             },
         },
-        '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 825px)': {
+        '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)': {
             maxHeight: '100%',
         },
     },

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

@@ -628,5 +628,8 @@ export default function configuratorReducer(prevState = initialState, action = {
 }
 
 function filterOptionsWithDetails(options) {
-    return _.filter(options, option => !!(option.abstract || option.description || option.detailImage));
+    return _.filter(
+        options,
+        option => !!(option.abstract || option.description || option.detailImageExists === true)
+    );
 }

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

@@ -125,11 +125,14 @@ export const getDesignAreaIdentifierToOpen = state => {
     } = state;
     const previousEditedDesignAreaIdentifier = getPreviousEditedDesignAreaIdentifier(state);
     const firstEditedDesignAreafromDesignData = getFirstEditedDesignAreafromDesignData(state);
+    const designAreaFromSelectedDesignView = getDesignAreaFromSelectedDesignView(state);
     const defaultDesignAreaFromProductionMethod = getDefaultDesignAreaIdentifierFromProductionMethod(state);
+
     return (
         identifier ||
         previousEditedDesignAreaIdentifier ||
         firstEditedDesignAreafromDesignData ||
+        designAreaFromSelectedDesignView ||
         defaultDesignAreaFromProductionMethod ||
         null
     );
@@ -672,6 +675,14 @@ export const getDesignViewListForDesignAreas = (state, designAreas) => {
     return designViewList;
 };
 
+export const getDesignAreaFromSelectedDesignView = state => {
+    const {
+        designArea: { filteredDesignAreas },
+        designView: { selectedDesignView },
+    } = state;
+    return find(filteredDesignAreas, ['designView.identifier', selectedDesignView.identifier])?.identifier;
+};
+
 export const getDefaultDesignAreaIdentifierFromProductionMethod = state => {
     //return the first designArea with isDefault: true due to api call accepts multiple productionmethods to be default
     const {
@@ -905,3 +916,7 @@ export const getImagesByDesignArea = (state, designAreaIdentifier) => {
     const designData = getDesignDataByDesignAreaIdentifier(state, designAreaIdentifier);
     return get(designData, 'canvasData.objects', []).filter(({ type }) => type === 'Image');
 };
+
+export function isOneLineText(state) {
+    return get(getSelectedDesignProductionMethod(state), 'oneLineText', false);
+}

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

@@ -262,6 +262,11 @@ describe('Reducers/DesignArea/Selectors', () => {
                 selectedDesignArea: { identifier: 'a_2' },
                 previousEditedDesignArea: {},
             },
+            designView: {
+                selectedDesignView: {
+                    identifier: '01_side',
+                },
+            },
             configurator: {
                 configuration: {
                     designdata: {

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

@@ -31,7 +31,7 @@ const styles = theme => ({
         [theme.breakpoints.down('sm')]: {
             zIndex: 5,
         },
-        '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 825px)': {
+        '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)': {
             display: 'none',
         },
     },
@@ -71,7 +71,7 @@ const styles = theme => ({
             bottom: 0,
             height: 56,
         },
-        '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 825px)': {
+        '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)': {
             display: 'none',
         },
     },

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

@@ -9,7 +9,7 @@ const styles = () => ({
     LandscapeFullscreen: {
         display: 'none',
     },
-    '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 825px)': {
+    '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)': {
         LandscapeFullscreen: {
             display: 'flex',
             position: 'absolute',

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

@@ -46,7 +46,7 @@ import { Services } from '../../ServiceLocator';
  */
 export const Configurator = props => {
     const imageOnly = useMediaQuery(
-        '(min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 825px)'
+        '(min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)'
     );
     useEffect(() => {
         if (imageOnly) {