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

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

@@ -309,6 +309,10 @@ var Option = function Option(_ref) {
     }));
   };
 
+  var onAbstractClicked = function onAbstractClicked(event) {
+    event.stopPropagation();
+  };
+
   var onDetailsClicked = function onDetailsClicked(event) {
     event.stopPropagation();
     event.preventDefault();
@@ -450,7 +454,8 @@ var Option = function Option(_ref) {
     }, option.title), hasTextinput && renderTextInput(), !hidePrices && /*#__PURE__*/_react["default"].createElement("div", {
       className: classes.price
     }, option.priceFormatted), smallerScreen && renderControls('horizontal'), option["abstract"] && /*#__PURE__*/_react["default"].createElement(_Markdown["default"], {
-      className: classes.description
+      className: classes.description,
+      onClick: onAbstractClicked
     }, option["abstract"]), renderActions()));
   };
 
@@ -508,6 +513,7 @@ var Option = function Option(_ref) {
       onOptionSelected: onOptionSelected,
       onOptionClicked: onOptionClicked,
       onAmountChanged: onAmountChanged,
+      onAbstractClicked: onAbstractClicked,
       onDetailsClicked: onDetailsClicked,
       onIncompatibilityClicked: onIncompatibilityClicked,
       onOptionGroupClicked: onOptionGroupClicked,

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

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _lodash = _interopRequireDefault(require("lodash"));
 
+var _reactSwipeable = require("react-swipeable");
+
 var _clsx2 = _interopRequireDefault(require("clsx"));
 
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
@@ -43,8 +45,6 @@ var _Markdown = _interopRequireDefault(require("../../../../../Framework/Compone
 
 var _ZoomImage = _interopRequireDefault(require("./ZoomImage"));
 
-var _Swipeable = require("../../../../../Shared/Components/Swipeable");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -214,11 +214,14 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "swiped", function (e) {
-      if (e.dir === _Swipeable.LEFT) {
-        _this.next();
-      } else if (e.dir === _Swipeable.RIGHT) {
-        _this.prev();
+    _defineProperty(_assertThisInitialized(_this), "swiped", function (e, deltaX, deltaY) {
+      // use only horizontal swiping
+      if (Math.abs(deltaX) >= Math.abs(deltaY)) {
+        if (deltaX > 0) {
+          _this.next();
+        } else {
+          _this.prev();
+        }
       }
     });
 
@@ -425,12 +428,12 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/_react["default"].createElement(LoadingComponent, {
         show: loading
-      })) : /*#__PURE__*/_react["default"].createElement(_Swipeable.Swipeable, {
-        options: {
-          trackMouse: true,
-          onSwiped: showNav && this.swiped,
-          delta: Optiondetail.swipeDelta
-        },
+      })) : /*#__PURE__*/_react["default"].createElement(_reactSwipeable.Swipeable, {
+        disabled: !showNav,
+        trackMouse: true,
+        onSwiped: this.swiped,
+        delta: Optiondetail.swipeDelta
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         ref: this.setDetailsContainerRef,
         className: showNav ? classes.detailContainerWithNav : classes.detailContainer
       }, showNav && /*#__PURE__*/_react["default"].createElement("div", {
@@ -450,7 +453,7 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
       })), detailsContent) : detailsContent, showNav && /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _clsx2["default"])(classes.detailNav, 'next'),
         onClick: this.next
-      }))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
+      })))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.detailFooter
       }, this.renderControls())), /*#__PURE__*/_react["default"].createElement(_ZoomImage["default"], {
         onClose: this.toggleZoomImage,

package/App/Modules/Creator/CreatorScreen.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CreatorScreen = CreatorScreen;
-exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -305,6 +304,4 @@ CreatorScreen.defaultProps = {
   },
   Layout: _DefaultLayout["default"],
   OptionsListContainer: _OptionsList["default"]
-};
-var _default = CreatorScreen;
-exports["default"] = _default;
+};

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

@@ -41,6 +41,8 @@ var _i18n = require("../../../../../Framework/i18n");
 
 var _Transformers = require("../../Utils/Transformers");
 
+var _reactRedux = require("react-redux");
+
 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); }
@@ -196,7 +198,8 @@ var DesignerSelectionToolbox = function DesignerSelectionToolbox(props) {
       addCustomFont = props.addCustomFont,
       defaultFont = props.defaultFont,
       loadFonts = props.loadFonts,
-      initialColor = props.initialColor;
+      initialColor = props.initialColor,
+      autoFocusEditor = props.autoFocusEditor;
   var rteRef = (0, _react.useRef)(null);
   var editorRef = (0, _react.useRef)(null);
 
@@ -205,6 +208,9 @@ var DesignerSelectionToolbox = function DesignerSelectionToolbox(props) {
       showCustomFontOverlay = _useState2[0],
       toggleCustomFontOverlay = _useState2[1];
 
+  var disableLinebreaks = (0, _reactRedux.useSelector)(function (state) {
+    return (0, _Selectors.isOneLineText)(state);
+  });
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.root
   }, /*#__PURE__*/_react["default"].createElement(_SelectionToolbox["default"], null, function (_ref) {
@@ -312,6 +318,13 @@ var DesignerSelectionToolbox = function DesignerSelectionToolbox(props) {
                 if ((0, _Selectors.isPlaceholderContent)(selectedObject.content)) {
                   canvas.selectedObject.content = '';
                 }
+              },
+              onBlur: function onBlur() {
+                var regex = /<\/span>/;
+
+                if (selectedObject.content.search(regex) === -1) {
+                  canvas.selectedObject.remove();
+                }
               }
             };
 
@@ -323,7 +336,8 @@ var DesignerSelectionToolbox = function DesignerSelectionToolbox(props) {
             }
 
             return renderTextEditor(_objectSpread(_objectSpread({}, textToolsRenderObj), {}, {
-              autoFocusWhenMounted: !((0, _Selectors.isPlaceholderContent)(selectedObject.content) || (0, _isMobileDevice["default"])()),
+              disableLinebreaks: disableLinebreaks,
+              autoFocusWhenMounted: autoFocusEditor || !((0, _Selectors.isPlaceholderContent)(selectedObject.content) || (0, _isMobileDevice["default"])()),
               textEditorElementProps: textEditorElementProps,
               onChangeHTML: function onChangeHTML() {
                 // call the original function first with all the args
@@ -404,7 +418,8 @@ DesignerSelectionToolbox.propTypes = {
   calculateTextEditorBackgroundColor: _propTypes["default"].func,
   addCustomFont: _propTypes["default"].func,
   defaultFont: _propTypes["default"].object,
-  initialColor: _propTypes["default"].object
+  initialColor: _propTypes["default"].object,
+  autoFocusEditor: _propTypes["default"].bool
 };
 DesignerSelectionToolbox.defaultProps = {
   TextControlboxComponent: _TextControlbox["default"],
@@ -415,7 +430,8 @@ DesignerSelectionToolbox.defaultProps = {
   classes: {},
   width: '',
   isActiveBulkName: false,
-  isPortraitMode: false
+  isPortraitMode: false,
+  autoFocusEditor: false
 };
 
 var _default = (0, _withWidth["default"])()((0, _withStyles["default"])(styles, {

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

@@ -32,7 +32,7 @@ var styles = function styles(theme) {
       width: '25%'
     })), _defineProperty(_thumbnailGrid, theme.orientation.landscape, {
       height: 136
-    }), _defineProperty(_thumbnailGrid, '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 825px)', {
+    }), _defineProperty(_thumbnailGrid, '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)', {
       width: '100%',
       maxWidth: '100%',
       position: 'absolute',

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

@@ -688,7 +688,7 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
               return _context8.abrupt("return");
 
             case 13:
-              if (!(activeTabIndex === 0)) {
+              if (!(activeTabIndex === 0 && !(image.gallery && colorDisabled))) {
                 _context8.next = 16;
                 break;
               }

package/App/Modules/Designer/DesignerScreen.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DesignerScreen = DesignerScreen;
-exports["default"] = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -253,6 +252,4 @@ DesignerScreen.defaultProps = {
   TextEditorStateProvider: _DefaultCanvasProvider.DefaultTextEditorStateProvider,
   Layout: _DefaultLayout["default"],
   PopupArea: _PopupAreaProvider.PopupArea
-};
-var _default = DesignerScreen;
-exports["default"] = _default;
+};

package/App/Modules/Visualization/CreatorAlignTarget.js

@@ -29,7 +29,7 @@ var styles = function styles(theme) {
       maxHeight: 'calc(100% - 286px)'
     }), _defineProperty(_root, theme.breakpoints.up('lg'), {
       maxHeight: 'calc(100% - 196px)'
-    }), _defineProperty(_root, '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 825px)', {
+    }), _defineProperty(_root, '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)', {
       maxHeight: '100%'
     }), _root)
   };

package/App/Modules/Visualization/DesignerAlignTarget.js

@@ -33,7 +33,7 @@ var styles = function styles(theme) {
     }), _defineProperty(_theme$orientation$po, theme.breakpoints.up('md'), {
       maxHeight: 'calc(100% - 172px)',
       marginTop: 0
-    }), _theme$orientation$po)), _defineProperty(_root, '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 825px)', {
+    }), _theme$orientation$po)), _defineProperty(_root, '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)', {
       maxHeight: '100%'
     }), _root)
   };

package/App/Reducers/Configurator/Reducer.js

@@ -667,6 +667,6 @@ function configuratorReducer() {
 
 function filterOptionsWithDetails(options) {
   return _lodash["default"].filter(options, function (option) {
-    return !!(option["abstract"] || option.description || option.detailImage);
+    return !!(option["abstract"] || option.description || option.detailImageExists === true);
   });
 }

package/App/Reducers/DesignArea/Selectors.js

@@ -62,6 +62,7 @@ var _exportNames = {
   parseColorData: true,
   getCameraViewListForDesignAreaList: true,
   getDesignViewListForDesignAreas: true,
+  getDesignAreaFromSelectedDesignView: true,
   getDefaultDesignAreaIdentifierFromProductionMethod: true,
   getDefaultColorsFromDesignProductionMethod: true,
   getDefaultTextColor: true,
@@ -76,7 +77,8 @@ var _exportNames = {
   getDesignAreaPreSelection: true,
   getDesignAreaColorAmount: true,
   getVectorizeForDesignProductionMethods: true,
-  getImagesByDesignArea: true
+  getImagesByDesignArea: true,
+  isOneLineText: true
 };
 exports.getDesignProductionMethods = getDesignProductionMethods;
 exports.getDesignDataByDesignAreaIdentifier = getDesignDataByDesignAreaIdentifier;
@@ -122,13 +124,14 @@ exports.getColorsWithPalette = getColorsWithPalette;
 exports.getColorsFromCanvasData = getColorsFromCanvasData;
 exports.getColorsFromCanvasDataWithPalette = getColorsFromCanvasDataWithPalette;
 exports.findSmallestFontSizeInCanvasData = findSmallestFontSizeInCanvasData;
-exports.getImagesByDesignArea = exports.getVectorizeForDesignProductionMethods = exports.getDesignAreaColorAmount = exports.getDesignAreaPreSelection = exports.hasLastEditedDesignArea = exports.areAllDesignAreasEmpty = exports.getVectorizedImageColor = exports.areHashesCompatible = exports.getCurrentCompatibilityInfoHash = exports.getDesignAreaImageCompatibilityInfo = exports.contentHasText = exports.isPlaceholderContent = exports.getDefaultTextColor = exports.getDefaultColorsFromDesignProductionMethod = exports.getDefaultDesignAreaIdentifierFromProductionMethod = exports.getDesignViewListForDesignAreas = exports.getCameraViewListForDesignAreaList = exports.parseColorData = exports.createColorData = exports.rgbObjToHex = exports.rgbString2hex = exports.rgbToHex = exports.calculateColorDistance = exports.hexToRgbNumbers = exports.hexToRgb = exports.isValidHex = exports.getColorPalettes = exports.hasPlaceHolderImagesForActiveDesignArea = exports.getDesignAreaIdentifierToOpen = void 0;
+exports.isOneLineText = isOneLineText;
+exports.getImagesByDesignArea = exports.getVectorizeForDesignProductionMethods = exports.getDesignAreaColorAmount = exports.getDesignAreaPreSelection = exports.hasLastEditedDesignArea = exports.areAllDesignAreasEmpty = exports.getVectorizedImageColor = exports.areHashesCompatible = exports.getCurrentCompatibilityInfoHash = exports.getDesignAreaImageCompatibilityInfo = exports.contentHasText = exports.isPlaceholderContent = exports.getDefaultTextColor = exports.getDefaultColorsFromDesignProductionMethod = exports.getDefaultDesignAreaIdentifierFromProductionMethod = exports.getDesignAreaFromSelectedDesignView = exports.getDesignViewListForDesignAreas = exports.getCameraViewListForDesignAreaList = exports.parseColorData = exports.createColorData = exports.rgbObjToHex = exports.rgbString2hex = exports.rgbToHex = exports.calculateColorDistance = exports.hexToRgbNumbers = exports.hexToRgb = exports.isValidHex = exports.getColorPalettes = exports.hasPlaceHolderImagesForActiveDesignArea = exports.getDesignAreaIdentifierToOpen = void 0;
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _first = _interopRequireDefault(require("lodash/first"));
 
-var _find = _interopRequireDefault(require("lodash/find"));
+var _find2 = _interopRequireDefault(require("lodash/find"));
 
 var _findKey = _interopRequireDefault(require("lodash/findKey"));
 
@@ -348,8 +351,9 @@ var getDesignAreaIdentifierToOpen = function getDesignAreaIdentifierToOpen(state
   var identifier = state.designArea.selectedDesignArea.identifier;
   var previousEditedDesignAreaIdentifier = getPreviousEditedDesignAreaIdentifier(state);
   var firstEditedDesignAreafromDesignData = getFirstEditedDesignAreafromDesignData(state);
+  var designAreaFromSelectedDesignView = getDesignAreaFromSelectedDesignView(state);
   var defaultDesignAreaFromProductionMethod = getDefaultDesignAreaIdentifierFromProductionMethod(state);
-  return identifier || previousEditedDesignAreaIdentifier || firstEditedDesignAreafromDesignData || defaultDesignAreaFromProductionMethod || null;
+  return identifier || previousEditedDesignAreaIdentifier || firstEditedDesignAreafromDesignData || designAreaFromSelectedDesignView || defaultDesignAreaFromProductionMethod || null;
 };
 
 exports.getDesignAreaIdentifierToOpen = getDesignAreaIdentifierToOpen;
@@ -386,7 +390,7 @@ function getSelectedDesignProductionMethod(state) {
   var designProductionMethods = getDesignProductionMethods(state);
   var designAreaData = getDesignDataForSelectedDesignArea(state);
   var designProductionMethodIdentifier = designAreaData.designProductionMethodIdentifier;
-  return (0, _find["default"])(designProductionMethods, {
+  return (0, _find2["default"])(designProductionMethods, {
     identifier: designProductionMethodIdentifier
   }) || (0, _first["default"])(designProductionMethods);
 }
@@ -487,14 +491,14 @@ function getSelectedDesignProductionMethodForDesignArea(state, designArea) {
   var _ref8 = designAreaData || {},
       designProductionMethodIdentifier = _ref8.designProductionMethodIdentifier;
 
-  return (0, _find["default"])(designProductionMethods, {
+  return (0, _find2["default"])(designProductionMethods, {
     identifier: designProductionMethodIdentifier
   }) || (0, _first["default"])(designProductionMethods);
 }
 
 function getDesignProductionMethodByIdentifier(state, identifier) {
   var designProductionMethods = getDesignProductionMethods(state);
-  return (0, _find["default"])(designProductionMethods, {
+  return (0, _find2["default"])(designProductionMethods, {
     identifier: identifier
   });
 }
@@ -678,7 +682,7 @@ function getEngravingBackgroundColor(state, designProductionMethod) {
   var _designProductionMethod = designProductionMethod || getSelectedDesignProductionMethod(state) || {};
 
   var engravingBackgroundColors = _designProductionMethod.engravingBackgroundColors;
-  return (0, _get["default"])((0, _find["default"])(engravingBackgroundColors, {
+  return (0, _get["default"])((0, _find2["default"])(engravingBackgroundColors, {
     itemIdentifier: variantIdentifier || (0, _Selectors.getSelectedVariantIdentifier)((0, _Selectors.getConfigurator)(state))
   }), 'colorHex', 'rgba(0, 0, 0, 0.5)');
 }
@@ -1027,6 +1031,16 @@ var getDesignViewListForDesignAreas = function getDesignViewListForDesignAreas(s
 
 exports.getDesignViewListForDesignAreas = getDesignViewListForDesignAreas;
 
+var getDesignAreaFromSelectedDesignView = function getDesignAreaFromSelectedDesignView(state) {
+  var _find;
+
+  var filteredDesignAreas = state.designArea.filteredDesignAreas,
+      selectedDesignView = state.designView.selectedDesignView;
+  return (_find = (0, _find2["default"])(filteredDesignAreas, ['designView.identifier', selectedDesignView.identifier])) === null || _find === void 0 ? void 0 : _find.identifier;
+};
+
+exports.getDesignAreaFromSelectedDesignView = getDesignAreaFromSelectedDesignView;
+
 var getDefaultDesignAreaIdentifierFromProductionMethod = function getDefaultDesignAreaIdentifierFromProductionMethod(state) {
   //return the first designArea with isDefault: true due to api call accepts multiple productionmethods to be default
   var filteredDesignAreas = state.designArea.filteredDesignAreas;
@@ -1083,12 +1097,12 @@ var getDefaultTextColor = function getDefaultTextColor(state) {
   var variantIdentifier = (0, _Selectors.getSelectedVariantIdentifier)((0, _Selectors.getConfigurator)(state));
 
   if (defaultColors && defaultColors[variantIdentifier]) {
-    var colorPalette = (0, _find["default"])(colorPalettes, {
+    var colorPalette = (0, _find2["default"])(colorPalettes, {
       identifier: Object.keys(defaultColors[variantIdentifier])[0]
     });
 
     if (colorPalette) {
-      var color = (0, _find["default"])(colorPalette.colors, {
+      var color = (0, _find2["default"])(colorPalette.colors, {
         identifier: defaultColors[variantIdentifier][colorPalette.identifier]
       });
 
@@ -1104,7 +1118,7 @@ var getDefaultTextColor = function getDefaultTextColor(state) {
   }
 
   var paletteDefaultColorIdentifier = (0, _get["default"])(colorPalettes[0], 'defaultColor.identifier', '');
-  var paletteDefaultColor = (0, _find["default"])(colorPalettes[0].colors, {
+  var paletteDefaultColor = (0, _find2["default"])(colorPalettes[0].colors, {
     identifier: paletteDefaultColorIdentifier
   });
 
@@ -1254,7 +1268,7 @@ var getDesignAreaPreSelection = function getDesignAreaPreSelection(identifier) {
     return {};
   }
 
-  var preSelection = (0, _find["default"])(designerPreSelection.designAreas, {
+  var preSelection = (0, _find2["default"])(designerPreSelection.designAreas, {
     identifier: identifier
   });
   return preSelection ? preSelection : {};
@@ -1301,4 +1315,8 @@ var getImagesByDesignArea = function getImagesByDesignArea(state, designAreaIden
   });
 };
 
-exports.getImagesByDesignArea = getImagesByDesignArea;
+exports.getImagesByDesignArea = getImagesByDesignArea;
+
+function isOneLineText(state) {
+  return (0, _get["default"])(getSelectedDesignProductionMethod(state), 'oneLineText', false);
+}

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

@@ -95,7 +95,7 @@ var styles = function styles(theme) {
       pointerEvents: 'all'
     }, _defineProperty(_button, theme.breakpoints.down('sm'), {
       zIndex: 5
-    }), _defineProperty(_button, '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 825px)', {
+    }), _defineProperty(_button, '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)', {
       display: 'none'
     }), _button),
     buttonBottom: {},
@@ -131,7 +131,7 @@ var styles = function styles(theme) {
       left: 'calc(50% - 75px)',
       bottom: 0,
       height: 56
-    }), _defineProperty(_buttonView, '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 825px)', {
+    }), _defineProperty(_buttonView, '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)', {
       display: 'none'
     }), _buttonView)
   };

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

@@ -24,7 +24,7 @@ var styles = function 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/App/Screens/Configurator/Screen.js

@@ -83,7 +83,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  * Main Screen of the configurator
  */
 var Configurator = function Configurator(props) {
-  var imageOnly = (0, _core.useMediaQuery)('(min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 825px)');
+  var imageOnly = (0, _core.useMediaQuery)('(min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)');
   (0, React.useEffect)(function () {
     if (imageOnly) {
       _ServiceLocator.Services.visualization.enableDesignAreaInteraction(false);

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

@@ -358,6 +358,10 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "priceListRef", /*#__PURE__*/_react["default"].createRef());
 
+    _defineProperty(_assertThisInitialized(_this), "acceptDesignRef", /*#__PURE__*/_react["default"].createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "acceptDataPrivacyRef", /*#__PURE__*/_react["default"].createRef());
+
     _defineProperty(_assertThisInitialized(_this), "handleChange", function (event) {
       _this.setState(_defineProperty({}, event.target.name, {
         value: event.target.checked,
@@ -365,7 +369,7 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
       }));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "verifyRequestErrors", function () {
+    _defineProperty(_assertThisInitialized(_this), "verifyRequestErrors", function (hasFormValidationErrors) {
       var _this$props = _this.props,
           bulkNameErrors = _this$props.bulkNameErrors,
           displayAcceptDesign = _this$props.displayAcceptDesign;
@@ -390,6 +394,8 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
             error: true
           }
         });
+
+        !hasFormValidationErrors && _this.acceptDesignRef.current && _this.acceptDesignRef.current.scrollIntoView();
       }
 
       if (!_this.dataPrivacyApproved()) {
@@ -399,6 +405,8 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
             error: true
           }
         });
+
+        !hasFormValidationErrors && _this.acceptDataPrivacyRef.current && _this.acceptDataPrivacyRef.current.scrollIntoView();
       }
     });
 
@@ -523,7 +531,7 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
               break;
 
             case 9:
-              _this.verifyRequestErrors();
+              _this.verifyRequestErrors(formValidation.hasError);
 
             case 10:
             case "end":
@@ -799,7 +807,9 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
         contactData: (0, _i18n.t)('amountPrice.contactData'),
         handleClose: this.handleClose,
         amount: amount,
-        acceptDesignComponent: showCallToAction ? /*#__PURE__*/_react["default"].createElement(AcceptDesignComponent, {
+        acceptDesignComponent: showCallToAction ? /*#__PURE__*/_react["default"].createElement("div", {
+          ref: this.acceptDesignRef
+        }, /*#__PURE__*/_react["default"].createElement(AcceptDesignComponent, {
           termsAndConditionsLink: termsAndConditionsLink,
           displayAcceptDesign: displayAcceptDesign,
           handleChangeCheckboxApproval: this.handleChange,
@@ -808,15 +818,17 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
           notice: notice,
           noteLabel: (0, _i18n.t)('amountPrice.notice'),
           handleChange: this.handleBasketNoticeChange
-        }) : null,
-        acceptDataPrivacyComponent: showReceiveOfferForm && dataPrivacyLink ? /*#__PURE__*/_react["default"].createElement(AcceptPrivacyComponent, {
+        })) : null,
+        acceptDataPrivacyComponent: showReceiveOfferForm && dataPrivacyLink ? /*#__PURE__*/_react["default"].createElement("div", {
+          ref: this.acceptDataPrivacyRef
+        }, /*#__PURE__*/_react["default"].createElement(AcceptPrivacyComponent, {
           dataPrivacyLink: dataPrivacyLink,
           displayAcceptDesign: true,
           handleChangeCheckboxApproval: this.handleChange,
           approval: dataPrivacyAccepted,
           closeProductOverviewDialog: this.handleClose,
           displayNote: false
-        }) : null,
+        })) : null,
         notificationComponent: mergedNotifications.map(function (_ref4, key) {
           var message = _ref4.message,
               level = _ref4.level,

package/Framework/Components/Carousel/index.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactSwipeable = require("react-swipeable");
+
 var _lodash = _interopRequireDefault(require("lodash"));
 
 require("./Styles.scss");
@@ -19,8 +21,6 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _styles = require("@material-ui/core/styles");
 
-var _Swipeable = require("../../../Shared/Components/Swipeable");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -186,16 +186,18 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "swiped", function (e) {
-      if (_this.props.vertical) {
-        if (e.dir === _Swipeable.UP) {
+      // if it's vertical deltaY should be the bigger
+      if (_this.props.vertical && Math.abs(e.deltaY) >= Math.abs(e.deltaX)) {
+        if (e.deltaY > 0) {
           _this.next();
-        } else if (e.dir === _Swipeable.DOWN) {
+        } else {
           _this.prev();
         }
-      } else {
-        if (e.dir === _Swipeable.LEFT) {
+      } // if it's not vertical deltaX should be the bigger
+      else if (!_this.props.vertical && Math.abs(e.deltaX) >= Math.abs(e.deltaY)) {
+        if (e.deltaX > 0) {
           _this.next();
-        } else if (e.dir === _Swipeable.RIGHT) {
+        } else {
           _this.prev();
         }
       }
@@ -229,13 +231,10 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
   _createClass(Carousel, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.init();
       var carousel = this.refs.carousel;
-
-      if (carousel) {
-        this.init();
-        var wheelEventName = 'onwheel' in carousel ? 'wheel' : 'mousewheel';
-        carousel.addEventListener(wheelEventName, this.scrolled);
-      }
+      var wheelEventName = 'onwheel' in carousel ? 'wheel' : 'mousewheel';
+      carousel.addEventListener(wheelEventName, this.scrolled);
     }
   }, {
     key: "componentDidUpdate",
@@ -279,13 +278,11 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
         className: (0, _clsx["default"])(classes.carousel, prevClassName),
         ref: "prev",
         onClick: this.prev
-      }), /*#__PURE__*/_react["default"].createElement(_Swipeable.Swipeable, {
+      }), /*#__PURE__*/_react["default"].createElement(_reactSwipeable.Swipeable, {
         className: 'carousel-frame',
-        options: {
-          trackMouse: true,
-          onSwiping: this.swiping,
-          onSwiped: this.swiped
-        }
+        trackMouse: true,
+        onSwiping: this.swiping,
+        onSwiped: this.swiped
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "carousel-slider",
         style: {