@configuratorware/configurator-frontendgui 1.49.9 → 1.50.0

package/App/Error/ProductionErrorPage/index.js

@@ -9,8 +9,10 @@ var _Typography = _interopRequireDefault(require("@material-ui/core/Typography")
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 var _i18n = require("../../../Framework/i18n");
 require("./Style.scss");
+var _Store = require("./../../Store");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var ErrorPage = function ErrorPage() {
+  var is404Error = _Store.store.getState().api.has404Error;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "error-wrapper"
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -22,7 +24,9 @@ var ErrorPage = function ErrorPage() {
     className: "text"
   }, (0, _i18n.T)('errorPage.errorTexts.first')), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     className: "text"
-  }, (0, _i18n.T)('errorPage.errorTexts.second'))), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }, (0, _i18n.T)('errorPage.errorTexts.second')), is404Error && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    className: "text"
+  }, (0, _i18n.T)('errorPage.errorTexts.404'))), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     variant: "contained",
     color: "secondary",
     className: "button",

package/App/Modules/Creator/Components/Incompatibility/OptionExclusionRule/index.js

@@ -45,7 +45,8 @@ var decorateOptionlistitem = exports.decorateOptionlistitem = (0, _memoize["defa
       return null;
     }
     return /*#__PURE__*/_react["default"].createElement(OptionlistitemComponent, _extends({}, props, {
-      OptionAmountComponent: null
+      OptionAmountComponent: null,
+      notAccessible: true
     }));
   });
 });

package/App/Modules/Creator/Components/Incompatibility/OptionRule/index.js

@@ -44,7 +44,8 @@ var decorateOptionlistitem = exports.decorateOptionlistitem = (0, _memoize["defa
       return null;
     }
     return /*#__PURE__*/_react["default"].createElement(OptionlistitemComponent, _extends({}, props, {
-      OptionAmountComponent: null
+      OptionAmountComponent: null,
+      notAccessible: true
     }));
   });
 });

package/App/Modules/Creator/Components/Incompatibility/index.js

@@ -175,8 +175,7 @@ var Incompatibility = /*#__PURE__*/function (_React$Component) {
         dialogTitle: (0, _i18n.T)('incompatibility.dialogTitle'),
         onClose: onClose,
         onCancel: onClose,
-        className: classes.incompatibilityDialog,
-        refValue: checkResults
+        className: classes.incompatibilityDialog
       }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
         className: 'incompatibility'
       }, this.renderRules()), this.renderFooter());

package/App/Modules/Creator/Components/InvalidConfigurationNotice/index.js

@@ -8,19 +8,16 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
 var _styles = require("@material-ui/core/styles");
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
-var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
 var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
 var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 var _MainButton = _interopRequireDefault(require("../../../../../Shared/Components/MainButton"));
 var _List = _interopRequireDefault(require("@material-ui/core/List"));
 var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
 var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
 var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));
 var _i18n = require("../../../../../Framework/i18n");
+var _CustomDialog = _interopRequireDefault(require("../../../../../Shared/Components/CustomDialog"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -35,19 +32,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     root: {
       borderTop: "7px solid ".concat(theme.palette.primary.main)
     },
-    titleRoot: {
-      margin: 0,
-      padding: theme.spacing(2)
-    },
-    title: {
-      marginRight: 40
-    },
-    closeButton: {
-      position: 'absolute',
-      right: theme.spacing(1),
-      top: theme.spacing(1),
-      color: theme.palette.grey[500]
-    },
     contentRoot: {
       padding: theme.spacing(2)
     },
@@ -76,23 +60,16 @@ var InvalidConfigurationNotice = function InvalidConfigurationNotice(_ref) {
       initialRender.current = false;
     }
   }, [open, validationErrors, adminMode, initialRender]);
-  return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_CustomDialog["default"], {
     fullScreen: fullScreen,
-    open: show,
     classes: {
       paper: classes.root
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
-    disableTypography: true,
-    className: classes.titleRoot
-  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    variant: 'h5',
-    className: classes.title
-  }, (0, _i18n.T)('invalidConfigurationNotice.title')), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
-    "aria-label": "close",
-    className: classes.closeButton,
-    onClick: close
-  }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null))), /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
+    },
+    open: show,
+    onClose: close,
+    onCancel: close,
+    dialogTitle: (0, _i18n.T)('invalidConfigurationNotice.title')
+  }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
     className: classes.contentRoot
   }, /*#__PURE__*/_react["default"].createElement(_List["default"], null, validationErrors.map(function (_ref2, index) {
     var title = _ref2.title,

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

@@ -27,6 +27,7 @@ var _customClassName = _interopRequireDefault(require("../../../../Utils/customC
 var _OptionAmount = _interopRequireDefault(require("../OptionAmount"));
 var _OptionGroup = _interopRequireDefault(require("../OptionGroup"));
 var _getImageUrl = _interopRequireDefault(require("../../../../Utils/getImageUrl"));
+var _AccessibleButton = _interopRequireDefault(require("../../../../Shared/Components/AccessibleButton/AccessibleButton"));
 var _excluded = ["children", "render"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -66,12 +67,10 @@ var styles = function styles(theme) {
     description: {},
     materialIcon: {},
     price: {},
-    details: {
-      display: 'inline-block'
-    },
+    details: {},
     iconWithText: {
       lineHeight: customValues.icon.lineHeight,
-      display: 'flex',
+      display: 'inline-flex',
       verticalAlign: 'middle',
       '& $materialIcon': {
         "float": 'left',
@@ -116,13 +115,13 @@ var styles = function styles(theme) {
       padding: 10,
       cursor: 'pointer',
       fontSize: customValues.textArea.fontSize,
-      display: 'table',
-      width: '94%',
+      display: 'flex',
       '& .content': {
         position: 'relative',
-        display: 'table-cell',
+        display: 'flex',
         verticalAlign: 'middle',
-        margin: 0
+        margin: 0,
+        flex: 1
       },
       '& .disabled': {
         cursor: 'not-allowed',
@@ -311,7 +310,8 @@ var Option = function Option(_ref) {
             variant: 'body2'
           }, translations.notAvailable));
         case 'yellow':
-          return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("a", {
+          return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_AccessibleButton["default"], {
+            component: "a",
             className: classes.iconWithText,
             onClick: onLateDeliveryClicked
           }, /*#__PURE__*/_react["default"].createElement(_RestoreRounded["default"], {
@@ -348,7 +348,8 @@ var Option = function Option(_ref) {
     var displayDetails = shouldDisplayDetails();
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: classes.details
-    }, displayDetails && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("a", {
+    }, displayDetails && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_AccessibleButton["default"], {
+      component: "a",
       className: classes.iconWithText,
       onClick: onDetailsClicked
     }, /*#__PURE__*/_react["default"].createElement(_InfoRounded["default"], {
@@ -383,7 +384,7 @@ var Option = function Option(_ref) {
     }, option["abstract"]), renderActions()));
   };
   var renderControls = function renderControls(view) {
-    if (isEnabled() && amountIsSelectable) {
+    if (isEnabled() && amountIsSelectable && OptionAmountComponent) {
       return /*#__PURE__*/_react["default"].createElement(OptionAmountComponent, {
         view: view,
         option: option,
@@ -443,10 +444,12 @@ var Option = function Option(_ref) {
     });
   };
   var renderItem = function renderItem() {
-    return /*#__PURE__*/_react["default"].createElement("div", {
+    return /*#__PURE__*/_react["default"].createElement(_AccessibleButton["default"], {
+      component: "div",
       className: getRootClassName(),
       "data-option": option.identifier,
-      onClick: onOptionClicked
+      onClick: onOptionClicked,
+      notAccessible: props.notAccessible
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: getContentClassName()
     }, typeof children === 'function' ? children(getRenderProps()) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
@@ -470,7 +473,8 @@ Option.defaultProps = {
   viewDetails: function viewDetails() {},
   viewStockInformation: function viewStockInformation() {},
   OptionAmountComponent: _OptionAmount["default"],
-  OptionGroupComponent: _OptionGroup["default"]
+  OptionGroupComponent: _OptionGroup["default"],
+  notAccessible: false
 };
 var _default = exports["default"] = (0, _styles.withStyles)(styles, {
   name: 'Option'

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

@@ -13,6 +13,7 @@ var _styles = require("@material-ui/core/styles");
 var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
 var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
 var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));
+var _AccessibleButton = _interopRequireDefault(require("../../../../Shared/Components/AccessibleButton/AccessibleButton"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -167,10 +168,11 @@ var OptionAmount = function OptionAmount(_ref) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _clsx["default"])(classes.root, view),
     onClick: onAmountClicked
-  }, /*#__PURE__*/_react["default"].createElement(_Add["default"], {
-    className: classes.plus,
+  }, /*#__PURE__*/_react["default"].createElement(_AccessibleButton["default"], {
     onClick: plus
-  }), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_Add["default"], {
+    className: classes.plus
+  })), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
     value: optionAmount,
     inputRef: textRef,
     onChange: updateAmount,
@@ -182,10 +184,12 @@ var OptionAmount = function OptionAmount(_ref) {
         return target.select();
       }, 0);
     }
-  }), /*#__PURE__*/_react["default"].createElement(_Remove["default"], {
-    className: (0, _clsx["default"])(classes.minus, !optionAmount && 'disable'),
-    onClick: minus
-  }));
+  }), /*#__PURE__*/_react["default"].createElement(_AccessibleButton["default"], {
+    onClick: minus,
+    disabled: !optionAmount
+  }, /*#__PURE__*/_react["default"].createElement(_Remove["default"], {
+    className: (0, _clsx["default"])(classes.minus, !optionAmount && 'disable')
+  })));
 };
 OptionAmount.defaultProps = {
   option: {},

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

@@ -13,6 +13,7 @@ var _getImageUrl = _interopRequireDefault(require("../../../../Utils/getImageUrl
 var _customClassName = _interopRequireDefault(require("../../../../Utils/customClassName"));
 var _i18n = require("../../../../../Framework/i18n");
 var _styles = require("@material-ui/core/styles");
+var _AccessibleButton = _interopRequireDefault(require("../../../../Shared/Components/AccessibleButton/AccessibleButton"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -63,16 +64,11 @@ var ProductPart = function ProductPart(_ref) {
     ref: setAnchorRef
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(classes.marker, " ").concat(direction, " ").concat(selectedAndVisible ? 'selected' : '')
-  }), /*#__PURE__*/_react["default"].createElement("div", {
+  }), /*#__PURE__*/_react["default"].createElement(_AccessibleButton["default"], {
     className: "".concat(classes.content, " ").concat(direction),
     onClick: onClick
   }, displayImage(), displayText()));
 };
-var MARKER_POSITION = {
-  left: 'left',
-  right: 'right',
-  top: 'top'
-};
 ProductPart.defaultProps = {
   optionclassification: {},
   onSelect: function onSelect() {},
@@ -81,12 +77,8 @@ ProductPart.defaultProps = {
 var StyledProductPart = exports.StyledProductPart = (0, _styles.withStyles)(function (theme) {
   var _root, _selected;
   var captionMaxHeight = "calc(".concat(theme.creator.productPart.captionPaddingTop, " + ").concat(theme.creator.productPart.lineHeight, " * 2)");
-  var iconMaxHeigth = "calc(".concat(theme.creator.productPart.itemSize, " - ").concat(captionMaxHeight, "  - ").concat(theme.creator.productPart.captionPaddingTop, ")");
-  var iconSizeWithoutMarker = "calc(".concat(theme.creator.productPart.itemSize, " - ").concat(theme.creator.productPart.spaceBetweenItemAndMarker, ")");
-  var contentMargin = {
-    right: '0 0 0 ' + theme.creator.productPart.spaceBetweenItemAndMarker,
-    left: '0 ' + theme.creator.productPart.spaceBetweenItemAndMarker + ' 0 0'
-  };
+  var iconMaxHeigth = "calc(".concat(theme.creator.productPart.itemSize, " - ").concat(captionMaxHeight, ")");
+  var iconSizeWithoutMarker = "calc(".concat(theme.creator.productPart.itemSize, ")");
   return {
     root: (_root = {}, _defineProperty(_root, theme.breakpoints.up('sm'), {
       width: theme.creator.productPart.selectedItemSize
@@ -104,20 +96,21 @@ var StyledProductPart = exports.StyledProductPart = (0, _styles.withStyles)(func
       cursor: 'pointer',
       textAlign: 'center',
       position: 'relative',
-      '&.horizontal': {
+      '&.horizontal': _defineProperty({
+        padding: theme.spacing(1, 0, 0, 0),
         width: theme.creator.productPart.itemSize,
         height: 'auto',
-        "float": MARKER_POSITION.top,
         whiteSpace: 'normal',
         '& span': {
           marginBottom: 0
         }
-      },
+      }, theme.breakpoints.down('xs'), {
+        padding: theme.spacing(0.5, 0, 0, 0)
+      }),
       '&.vertical': {
+        padding: theme.spacing(0, 0, 1, 0),
         width: iconSizeWithoutMarker,
-        maxHeight: 120,
-        "float": theme.creator.productPartsList.markerVerticalPosition,
-        margin: theme.creator.productPartsList.markerVerticalPosition === MARKER_POSITION.right ? contentMargin.left : contentMargin.right
+        margin: 0
       }
     },
     icon: {
@@ -126,10 +119,12 @@ var StyledProductPart = exports.StyledProductPart = (0, _styles.withStyles)(func
       backgroundRepeat: 'no-repeat',
       backgroundSize: 'contain',
       display: 'block',
-      '&.horizontal': {
+      '&.horizontal': _defineProperty({
         width: theme.creator.productPart.itemSize,
         height: 'calc(0.75*' + theme.creator.productPart.itemSize + ')'
-      },
+      }, theme.breakpoints.down('xs'), {
+        maxHeight: "calc(0.75 * ".concat(iconMaxHeigth, ")")
+      }),
       '&.vertical': {
         width: iconSizeWithoutMarker,
         height: 'calc(0.75*' + iconSizeWithoutMarker + ')'
@@ -143,21 +138,21 @@ var StyledProductPart = exports.StyledProductPart = (0, _styles.withStyles)(func
       },
       '&.vertical': {
         width: theme.creator.productPart.markerThickness,
-        height: "calc(".concat(theme.creator.productPart.itemSize, " - 24px)"),
-        "float": theme.creator.productPartsList.markerVerticalPosition
+        margin: theme.spacing(0, 0, 1, 0)
       },
       '&.selected': (_selected = {}, _defineProperty(_selected, theme.breakpoints.down('sm'), {
         marginBottom: 4
+      }), _defineProperty(_selected, theme.breakpoints.down('xs'), {
+        marginBottom: 0
       }), _defineProperty(_selected, "backgroundColor", theme.palette.primary.main), _selected)
     },
     rootTypography: {
-      padding: '3px 0 2px 7px',
-      marginBottom: 5,
+      paddingTop: theme.creator.productPart.captionPaddingTop,
       display: '-webkit-box',
       overflow: 'hidden',
       wordWrap: 'break-word',
       maxWidth: theme.creator.productPart.itemSize,
-      lineHeight: 1,
+      lineHeight: theme.creator.productPart.lineHeight,
       boxOrient: 'vertical',
       lineClamp: 3,
       minHeight: 20

package/App/Modules/Creator/Components/ProductPartsList/index.js

@@ -34,8 +34,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     root: {
       zIndex: 1,
       '&.horizontal': _defineProperty({
-        position: 'absolute',
-        bottom: 8,
         height: 'auto',
         // the available width (see container) is reduced by the width of the two arrows
         width: 'calc(100% - 72px)'

package/App/Modules/Creator/Layouts/DefaultLayout.js

@@ -85,8 +85,7 @@ var styles = function styles(theme) {
     productsList: {
       position: 'absolute',
       '&.horizontal': (_horizontal = {
-        bottom: 2,
-        height: 130
+        bottom: 2
       }, _defineProperty(_horizontal, theme.breakpoints.down('xs'), {
         width: '100%',
         left: 0,
@@ -184,6 +183,13 @@ var DefaultLayout = function DefaultLayout(_ref) {
   })), /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _clsx["default"])(classes.outerContainer, !displayVerticalList && 'withBottomList')
   }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.productsList, " ").concat(displayVerticalList ? 'vertical' : 'horizontal')
+  }, renderProductsList({
+    area: 'products',
+    width: width,
+    classes: classes,
+    displayVerticalList: displayVerticalList
+  })), /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(classes.container, " ").concat(isPortraitMode ? classes.containerTabletPortrait : '', " ").concat(displayVerticalList ? 'reducedSize' : 'fullSize')
   }, !fallbackMode && /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(classes.visualization, " ").concat(displayVerticalList ? '' : 'withBottomList')
@@ -199,13 +205,6 @@ var DefaultLayout = function DefaultLayout(_ref) {
     area: 'cart',
     width: width,
     classes: classes
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.productsList, " ").concat(displayVerticalList ? 'vertical' : 'horizontal')
-  }, renderProductsList({
-    area: 'products',
-    width: width,
-    classes: classes,
-    displayVerticalList: displayVerticalList
   }))));
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(classes.root, " ").concat(fallbackMode ? classes.fallbackMode : '')

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

@@ -128,6 +128,7 @@ var AddImagePanel = /*#__PURE__*/function (_React$Component) {
       var showImageLibrary = images.length > 0;
       var showFilters = tags.length > 0;
       var applyButtonDisabled = (0, _isEmpty["default"])(selectedImage);
+      var dialogTitleId = 'gallery-image-dialog-title';
       return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
         open: open,
         maxWidth: "md",
@@ -136,12 +137,14 @@ var AddImagePanel = /*#__PURE__*/function (_React$Component) {
         fullScreen: width === 'sm' || width === 'xs',
         classes: {
           paper: classes.root
-        }
+        },
+        "aria-labelledby": dialogTitleId
       }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
         disableTypography: true
       }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         variant: "h5",
-        className: classes.title
+        className: classes.title,
+        id: dialogTitleId
       }, (0, _i18n.t)('imageLibrary.gallery')), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         "aria-label": "close",
         className: classes.closeButton,

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

@@ -82,8 +82,6 @@ var CustomFontOverlay = exports.CustomFontOverlay = function CustomFontOverlay(p
   return open && /*#__PURE__*/_react["default"].createElement(_CustomDialog["default"], {
     open: open,
     onClose: closeOverlay,
-    "aria-labelledby": "alert-dialog-title",
-    "aria-describedby": "alert-dialog-description",
     onCancel: closeOverlay,
     dialogTitle: (0, _i18n.t)('textControlbox.addCustomFont')
   }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {

package/App/Modules/Designer/Components/Dialog/index.js

@@ -68,9 +68,7 @@ var UIDialog = /*#__PURE__*/function (_React$Component) {
           paper: paperClassName
         },
         onClose: onClose
-      }, other), /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
-        onClose: onClose
-      }, /*#__PURE__*/_react["default"].createElement("b", null, dialogTitle), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, other), /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], null, /*#__PURE__*/_react["default"].createElement("b", null, dialogTitle), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         className: classes.DialogIcon,
         onClick: onClose
       }, "close")), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children));

package/App/Modules/Designer/Components/ImageControlbox/index.js

@@ -227,9 +227,7 @@ var ImageControlbox = /*#__PURE__*/function (_React$Component) {
         title: (0, _i18n.t)('imageControlbox.editButtonTooltip')
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "edit")))))))), /*#__PURE__*/_react["default"].createElement(_CustomDialog["default"], {
         open: printQualityInfoDialogOpen,
-        onClose: this.handlePrintQualityInfoDialogClose,
-        "aria-labelledby": "alert-dialog-title",
-        "aria-describedby": "alert-dialog-description"
+        onClose: this.handlePrintQualityInfoDialogClose
       }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], {
         id: "alert-dialog-description"
       }, (0, _i18n.t)('imageControlbox.printQuality.' + printQuality))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {

package/App/Reducers/Reducer.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = apiReducer;
 var _isObject = _interopRequireDefault(require("lodash/isObject"));
 var _reduce = _interopRequireDefault(require("lodash/reduce"));
+var _get = _interopRequireDefault(require("lodash/get"));
 var _Actions = require("./Actions");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -16,7 +17,8 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var initialState = {
   sources: {},
-  isFetching: false
+  isFetching: false,
+  has404Error: false
 };
 function getSourceState(action) {
   switch (action.type) {
@@ -58,6 +60,9 @@ function getSourceState(action) {
       };
   }
 }
+function has404Error(sourceState) {
+  return (0, _get["default"])(sourceState, 'error.response.status', null) === 404;
+}
 function apiReducer() {
   var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
   var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -82,7 +87,8 @@ function apiReducer() {
           sources: sources,
           isFetching: (0, _reduce["default"])(sources, function (result, value) {
             return result || value.isFetching;
-          }, false)
+          }, false),
+          has404Error: has404Error(sourceState)
         });
       }
     default:

package/App/Screens/Configurator/Components/Confirm/index.js

@@ -48,13 +48,9 @@ var Confirm = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement(_CustomDialog["default"], {
         open: confirm !== null,
         onClose: onCancel,
-        "aria-labelledby": "alert-dialog-title",
-        "aria-describedby": "alert-dialog-description",
         dialogTitle: (0, _i18n.t)('errorDialogTitle'),
         onCancel: onCancel
-      }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], {
-        id: "alert-dialog-description"
-      }, message)), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], null, message)), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         onClick: onCancel,
         variant: "contained"
       }, cancelLabel), /*#__PURE__*/_react["default"].createElement(_MainButton["default"], {

package/App/Screens/Configurator/Components/Error/index.js

@@ -50,11 +50,8 @@ var Error = /*#__PURE__*/function (_React$Component) {
       return message && /*#__PURE__*/_react["default"].createElement(_CustomDialog["default"], {
         open: true,
         onClose: this.handleClose,
-        "aria-labelledby": "alert-dialog-title",
-        "aria-describedby": "alert-dialog-description",
         dialogTitle: (0, _i18n.t)('errorDialogTitle')
       }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], {
-        id: "alert-dialog-description",
         dangerouslySetInnerHTML: {
           __html: message
         }

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

@@ -109,7 +109,6 @@ var PreviewButton = exports.PreviewButton = function PreviewButton(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
     targetId: "preview_open"
   }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    component: "div",
     className: (0, _clsx["default"])(classes.button, bottom && classes.buttonBottom, top && classes.buttonTop, (0, _customClassName["default"])('preview-button')),
     onClick: onClick
   }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
@@ -167,15 +166,13 @@ var FullScreenView = /*#__PURE__*/function (_React$Component) {
       var topPreviewButton = renderTopPreviewButton(_objectSpread(_objectSpread({}, this.props), {}, {
         onClick: this.openPreview
       }));
-      return previewOpen ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.fullScreenWrapper
-      }, /*#__PURE__*/_react["default"].createElement(_PreviewPortal["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, previewOpen && /*#__PURE__*/_react["default"].createElement(_PreviewPortal["default"], {
         closePreviewMode: this.closePreview,
         thumbnailClick: this.handleViewChange,
         previewOpen: previewOpen,
         hasItems: hasItems,
         dialogStyle: dialogStyle
-      }, children)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, topPreviewButton, children, showDesignViewList ? /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+      }, children), topPreviewButton, !previewOpen && children, showDesignViewList ? /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         container: true,
         direction: "column",
         justifyContent: "space-between",

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

@@ -20,6 +20,6 @@ describe('Screens/Configurator/Components/FullScreenView', function () {
       }
     }));
     expect(wrapper.find('div.custom-css-views')).toHaveLength(1);
-    expect(wrapper.find('div.custom-css-preview-button')).toHaveLength(1);
+    expect(wrapper.find('button.custom-css-preview-button')).toHaveLength(1);
   });
 });