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

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

@@ -11,8 +11,6 @@ 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"));
@@ -45,6 +43,8 @@ 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,14 +214,11 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _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();
-        }
+    _defineProperty(_assertThisInitialized(_this), "swiped", function (e) {
+      if (e.dir === _Swipeable.LEFT) {
+        _this.next();
+      } else if (e.dir === _Swipeable.RIGHT) {
+        _this.prev();
       }
     });
 
@@ -428,12 +425,12 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/_react["default"].createElement(LoadingComponent, {
         show: loading
-      })) : /*#__PURE__*/_react["default"].createElement(_reactSwipeable.Swipeable, {
-        disabled: !showNav,
-        trackMouse: true,
-        onSwiped: this.swiped,
-        delta: Optiondetail.swipeDelta
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+      })) : /*#__PURE__*/_react["default"].createElement(_Swipeable.Swipeable, {
+        options: {
+          trackMouse: true,
+          onSwiped: showNav && this.swiped,
+          delta: Optiondetail.swipeDelta
+        },
         ref: this.setDetailsContainerRef,
         className: showNav ? classes.detailContainerWithNav : classes.detailContainer
       }, showNav && /*#__PURE__*/_react["default"].createElement("div", {
@@ -453,7 +450,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,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CreatorScreen = CreatorScreen;
+exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -304,4 +305,6 @@ CreatorScreen.defaultProps = {
   },
   Layout: _DefaultLayout["default"],
   OptionsListContainer: _OptionsList["default"]
-};
+};
+var _default = CreatorScreen;
+exports["default"] = _default;

package/App/Modules/Designer/DesignerScreen.js

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

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.detailImageExists === true);
+    return !!(option["abstract"] || option.description || option.detailImage);
   });
 }

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

@@ -83,6 +83,7 @@ var SendEmail = function SendEmail(props) {
     },
     id: "alert-dialog-description"
   }, (0, _i18n.t)('sendEmailDialog.info'))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_MainButton["default"], {
+    target: "_blank",
     href: emailUrl,
     onClick: onClose,
     variant: "contained",

package/Framework/Components/Carousel/index.js

@@ -9,8 +9,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactSwipeable = require("react-swipeable");
-
 var _lodash = _interopRequireDefault(require("lodash"));
 
 require("./Styles.scss");
@@ -21,6 +19,8 @@ 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,18 +186,16 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "swiped", function (e) {
-      // 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) {
+      if (_this.props.vertical) {
+        if (e.dir === _Swipeable.UP) {
           _this.next();
-        } else {
+        } else if (e.dir === _Swipeable.DOWN) {
           _this.prev();
         }
-      } // 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) {
+      } else {
+        if (e.dir === _Swipeable.LEFT) {
           _this.next();
-        } else {
+        } else if (e.dir === _Swipeable.RIGHT) {
           _this.prev();
         }
       }
@@ -231,10 +229,13 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
   _createClass(Carousel, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.init();
       var carousel = this.refs.carousel;
-      var wheelEventName = 'onwheel' in carousel ? 'wheel' : 'mousewheel';
-      carousel.addEventListener(wheelEventName, this.scrolled);
+
+      if (carousel) {
+        this.init();
+        var wheelEventName = 'onwheel' in carousel ? 'wheel' : 'mousewheel';
+        carousel.addEventListener(wheelEventName, this.scrolled);
+      }
     }
   }, {
     key: "componentDidUpdate",
@@ -278,11 +279,13 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
         className: (0, _clsx["default"])(classes.carousel, prevClassName),
         ref: "prev",
         onClick: this.prev
-      }), /*#__PURE__*/_react["default"].createElement(_reactSwipeable.Swipeable, {
+      }), /*#__PURE__*/_react["default"].createElement(_Swipeable.Swipeable, {
         className: 'carousel-frame',
-        trackMouse: true,
-        onSwiping: this.swiping,
-        onSwiped: this.swiped
+        options: {
+          trackMouse: true,
+          onSwiping: this.swiping,
+          onSwiped: this.swiped
+        }
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "carousel-slider",
         style: {

package/Shared/Components/Swipeable.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UP", {
+  enumerable: true,
+  get: function get() {
+    return _reactSwipeable.UP;
+  }
+});
+Object.defineProperty(exports, "DOWN", {
+  enumerable: true,
+  get: function get() {
+    return _reactSwipeable.DOWN;
+  }
+});
+Object.defineProperty(exports, "LEFT", {
+  enumerable: true,
+  get: function get() {
+    return _reactSwipeable.LEFT;
+  }
+});
+Object.defineProperty(exports, "RIGHT", {
+  enumerable: true,
+  get: function get() {
+    return _reactSwipeable.RIGHT;
+  }
+});
+exports.Swipeable = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactSwipeable = require("react-swipeable");
+
+var _excluded = ["options"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+// eslint-disable-next-line react/prop-types,react/display-name
+var Swipeable = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var options = _ref.options,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var handlers = (0, _reactSwipeable.useSwipeable)(options);
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({}, handlers, props, {
+    ref: ref
+  }));
+});
+
+exports.Swipeable = Swipeable;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.35.2",
+  "version": "1.36.0-beta.0",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.35.2",
-    "@hot-loader/react-dom": "^17.0.1",
+    "@configuratorware/scripts": "1.36.0-beta.0",
+    "@hot-loader/react-dom": "^17.0.2",
     "@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": "^16.14.0",
+    "react": "^17.0.2",
     "react-custom-scrollbars": "^4.2.1",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.2",
     "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": "^5.5.1",
+    "react-swipeable": "^6.2.2",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.35.2",
-    "redhotmagma-visualization": "1.35.2",
+    "redhotmagma-graphics-editor": "1.36.0-beta.0",
+    "redhotmagma-visualization": "1.36.0-beta.0",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",
@@ -52,25 +52,18 @@
     "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",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "css-loader": "^5.2.0",
+    "css-loader": "^5.2.7",
     "file-loader": "^6.2.0",
-    "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",
+    "mini-css-extract-plugin": "^2.1.0",
+    "resolve-url-loader": "^3.1.4",
+    "sass": "^1.53.0",
+    "sass-loader": "^13.0.2",
     "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.28.0",
-    "webpack-cli": "^4.6.0",
+    "webpack": "^5.46.0",
+    "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2"
   },
   "scripts": {

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

@@ -5,30 +5,28 @@ exports[`Screens/Components/ImageEditDialog/MessageBox renders as a modal screen
   <div
     class="MuiDialogContent-root Optiondetail-detailDialogContentRoot-14"
   >
-    <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
+      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>
@@ -62,30 +60,28 @@ exports[`Screens/Components/ImageEditDialog/MessageBox renders as full screen on
   <div
     class="MuiDialogContent-root Optiondetail-detailDialogContentRoot-14"
   >
-    <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
+      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>
@@ -119,38 +115,36 @@ exports[`Screens/Components/ImageEditDialog/MessageBox renders with previous and
   <div
     class="MuiDialogContent-root Optiondetail-detailDialogContentRoot-14"
   >
-    <div>
+    <div
+      class="Optiondetail-detailContainerWithNav-3"
+    >
       <div
-        class="Optiondetail-detailContainerWithNav-3"
-      >
+        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="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>
+          class="MuiTypography-root Optiondetail-priceFormatted-6 MuiTypography-body2"
+        >
+          0,00 €
         </div>
         <div
-          class="Optiondetail-detailNav-1 next"
-        />
+          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="Optiondetail-detailNav-1 next"
+      />
     </div>
   </div>
   <div

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

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

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

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

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

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

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

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

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

@@ -70,6 +70,7 @@ const SendEmail = props => {
             </DialogContent>
             <DialogActions>
                 <MainButton
+                    target="_blank"
                     href={emailUrl}
                     onClick={onClose}
                     variant="contained"

package/src/Framework/Components/Carousel/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Swipeable } from 'react-swipeable';
 import _ from 'lodash';
 
 import './Styles.scss';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
+import { DOWN, LEFT, RIGHT, Swipeable, UP } from '../../../Shared/Components/Swipeable';
 
 const styles = theme => ({
     carousel: {
@@ -37,10 +37,12 @@ class Carousel extends React.Component {
     }
 
     componentDidMount() {
-        this.init();
         const { carousel } = this.refs;
-        const wheelEventName = 'onwheel' in carousel ? 'wheel' : 'mousewheel';
-        carousel.addEventListener(wheelEventName, this.scrolled);
+        if (carousel) {
+            this.init();
+            const wheelEventName = 'onwheel' in carousel ? 'wheel' : 'mousewheel';
+            carousel.addEventListener(wheelEventName, this.scrolled);
+        }
     }
 
     componentDidUpdate() {
@@ -140,19 +142,16 @@ class Carousel extends React.Component {
     };
 
     swiped = e => {
-        // 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) {
+        if (this.props.vertical) {
+            if (e.dir === UP) {
                 this.next();
-            } else {
+            } else if (e.dir === DOWN) {
                 this.prev();
             }
-        }
-        // 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) {
+        } else {
+            if (e.dir === LEFT) {
                 this.next();
-            } else {
+            } else if (e.dir === RIGHT) {
                 this.prev();
             }
         }
@@ -199,9 +198,11 @@ class Carousel extends React.Component {
                     )}
                     <Swipeable
                         className={'carousel-frame'}
-                        trackMouse={true}
-                        onSwiping={this.swiping}
-                        onSwiped={this.swiped}
+                        options={{
+                            trackMouse: true,
+                            onSwiping: this.swiping,
+                            onSwiped: this.swiped,
+                        }}
                     >
                         <div
                             className="carousel-slider"

package/src/Shared/Components/Swipeable.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useSwipeable, UP, DOWN, LEFT, RIGHT } from 'react-swipeable';
+
+export { UP, DOWN, LEFT, RIGHT };
+
+// eslint-disable-next-line react/prop-types,react/display-name
+export const Swipeable = React.forwardRef(({ options, ...props }, ref) => {
+    const handlers = useSwipeable(options);
+    return <div {...handlers} {...props} ref={ref} />;
+});