@configuratorware/configurator-frontendgui 1.41.1 → 1.42.1

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

@@ -1,78 +1,47 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
-var _lodash = _interopRequireDefault(require("lodash"));
-
+var _find = _interopRequireDefault(require("lodash/find"));
+var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
+var _isArray = _interopRequireDefault(require("lodash/isArray"));
 var _reactSwipeable = require("react-swipeable");
-
 var _clsx2 = _interopRequireDefault(require("clsx"));
-
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-
 var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
-
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-
 var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styles = require("@material-ui/core/styles");
-
 var _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth"));
-
 var _configuration = require("../../../../configuration");
-
 var _LoadingOverlay = _interopRequireDefault(require("../../../../../Framework/Components/LoadingOverlay"));
-
 var _i18n = require("../../../../../Framework/i18n");
-
 var _CustomDialog = _interopRequireDefault(require("../../../../../Shared/Components/CustomDialog"));
-
 var _OptionAmount = _interopRequireDefault(require("../OptionAmount"));
-
 var _getImageUrl = _interopRequireDefault(require("../../../../Utils/getImageUrl"));
-
 var _Markdown = _interopRequireDefault(require("../../../../../Framework/Components/Markdown"));
-
 var _ZoomImage = _interopRequireDefault(require("./ZoomImage"));
-
 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; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
+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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+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 styles = function styles(theme) {
   return {
     detailNav: {
@@ -155,34 +124,25 @@ var styles = function styles(theme) {
     }
   };
 };
-
 var Optiondetail = /*#__PURE__*/function (_React$Component) {
   _inherits(Optiondetail, _React$Component);
-
   var _super = _createSuper(Optiondetail);
-
   function Optiondetail(props) {
     var _this;
-
     _classCallCheck(this, Optiondetail);
-
     _this = _super.call(this, props);
-
     _defineProperty(_assertThisInitialized(_this), "prev", function () {
       var _this$props = _this.props,
-          details = _this$props.details,
-          options = _this$props.options,
-          viewDetails = _this$props.viewDetails;
-
+        details = _this$props.details,
+        options = _this$props.options,
+        viewDetails = _this$props.viewDetails;
       if (options.length) {
-        var optionIndex = _lodash["default"].findIndex(options, {
+        var optionIndex = (0, _findIndex["default"])(options, {
           identifier: details.identifier
         });
-
         var prevIndex = optionIndex === 0 ? options.length - 1 : optionIndex - 1;
         var prev = options[prevIndex];
         viewDetails(prev);
-
         _this.setState({
           currentOption: prev,
           loading: true,
@@ -190,22 +150,18 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
         });
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "next", function () {
       var _this$props2 = _this.props,
-          details = _this$props2.details,
-          options = _this$props2.options,
-          viewDetails = _this$props2.viewDetails;
-
+        details = _this$props2.details,
+        options = _this$props2.options,
+        viewDetails = _this$props2.viewDetails;
       if (options.length) {
-        var optionIndex = _lodash["default"].findIndex(options, {
+        var optionIndex = (0, _findIndex["default"])(options, {
           identifier: details.identifier
         });
-
         var nextIndex = optionIndex === options.length - 1 ? 0 : optionIndex + 1;
         var next = options[nextIndex];
         viewDetails(next);
-
         _this.setState({
           currentOption: next,
           loading: true,
@@ -213,7 +169,6 @@ 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)) {
@@ -224,37 +179,31 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
         }
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "handleImageLoaded", function () {
       return _this.setState({
         imageStatus: 'loaded'
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "toggleZoomImage", function () {
       return _this.setState({
         zoomImage: !_this.state.zoomImage
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "setDetailsImageRef", function (ref) {
       _this.detailImageRef = ref;
     });
-
     _defineProperty(_assertThisInitialized(_this), "setDetailsContainerRef", function (ref) {
       _this.detailContainerRef = ref;
     });
-
     _defineProperty(_assertThisInitialized(_this), "getMaxZoomedWidth", function (width) {
       var isWideScreen = width === 'sm' || width === 'md' || width === 'lg' || width === 'xl';
       var maxZoomedWidth = width === 'xl' ? 1080 : 720;
       return isWideScreen ? maxZoomedWidth : '100%';
     });
-
     var _details = props.details,
-        _options = props.options;
+      _options = props.options;
     _this.state = {
-      currentOption: _lodash["default"].find(_options, {
+      currentOption: (0, _find["default"])(_options, {
         identifier: _details.identifier
       }),
       loading: false,
@@ -268,17 +217,15 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
     _this.detailImageRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
-
   _createClass(Optiondetail, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _this$props3 = this.props,
-          details = _this$props3.details,
-          options = _this$props3.options;
-
+        details = _this$props3.details,
+        options = _this$props3.options;
       if (details.identifier !== prevProps.details.identifier) {
         this.setState({
-          currentOption: _lodash["default"].find(options, {
+          currentOption: (0, _find["default"])(options, {
             identifier: details.identifier
           }),
           loading: false
@@ -291,11 +238,10 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
       if (!this.state.currentOption) {
         return null;
       }
-
       var optionclassification = this.props.optionclassification;
       var currentOption = this.state.currentOption;
       var identifier = currentOption.identifier;
-      return _lodash["default"].find(optionclassification.selectedoptions, {
+      return (0, _find["default"])(optionclassification.selectedoptions, {
         identifier: identifier
       }) || currentOption;
     }
@@ -305,7 +251,6 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
       var onSelect = this.props.onSelect;
       var option = this.getOptionData();
       var amount = option.amount + delta;
-
       if (amount < 0) {
         return; // prevent setting below 0
       }
@@ -318,9 +263,9 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
     key: "onSelect",
     value: function onSelect() {
       var _this$props4 = this.props,
-          onSelect = _this$props4.onSelect,
-          onClose = _this$props4.onClose; // just close it if it's already selected
-
+        onSelect = _this$props4.onSelect,
+        onClose = _this$props4.onClose;
+      // just close it if it's already selected
       if (this.state.currentOption.amount > 0) {
         onClose && onClose();
       } else {
@@ -334,11 +279,9 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
     value: function renderControls() {
       var OptionlistitemAmount = this.props.OptionlistitemAmount;
       var option = this.getOptionData();
-
       if (!option) {
         return null;
       }
-
       if (option.amount_is_selectable) {
         return /*#__PURE__*/_react["default"].createElement(OptionlistitemAmount, {
           option: option,
@@ -356,21 +299,20 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props5 = this.props,
-          LoadingComponent = _this$props5.LoadingComponent,
-          options = _this$props5.options,
-          show = _this$props5.show,
-          onClose = _this$props5.onClose,
-          details = _this$props5.details,
-          classes = _this$props5.classes,
-          width = _this$props5.width;
+        LoadingComponent = _this$props5.LoadingComponent,
+        options = _this$props5.options,
+        show = _this$props5.show,
+        onClose = _this$props5.onClose,
+        details = _this$props5.details,
+        classes = _this$props5.classes,
+        width = _this$props5.width;
       var _this$state = this.state,
-          loading = _this$state.loading,
-          loadingContainerHeight = _this$state.loadingContainerHeight;
-      var showNav = _lodash["default"].isArray(options) && options.length > 1;
+        loading = _this$state.loading,
+        loadingContainerHeight = _this$state.loadingContainerHeight;
+      var showNav = (0, _isArray["default"])(options) && options.length > 1;
       var detailImage = details.detailImage;
       var query = new URLSearchParams(location.search);
       var hidePrices = query.has('_hide_prices') && query.get('_hide_prices') === '1';
-
       var detailsContent = /*#__PURE__*/_react["default"].createElement("div", null, details["abstract"] && /*#__PURE__*/_react["default"].createElement(_Markdown["default"], {
         MdComponent: _Typography["default"],
         variant: "body2",
@@ -386,16 +328,13 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
         component: "div",
         className: classes.detailsTypography
       }, details.description));
-
       var showFullScreenModal = ['xs', 'sm'].includes(width);
       var maxZoomedWidth = this.getMaxZoomedWidth(width);
       var isLandscapeFormat = false;
-
       if (!!this.detailImageRef && this.detailImageRef.current !== null && this.state.imageStatus === 'loaded') {
         if (this.detailImageRef.naturalHeight < this.detailImageRef.naturalWidth) {
           isLandscapeFormat = true;
         }
-
         if (!this.state.hasZoomSet) {
           var hasZoom = this.detailImageRef.naturalHeight * this.detailImageRef.naturalWidth >= 1.2 * this.detailImageRef.width * this.detailImageRef.height;
           this.setState({
@@ -403,12 +342,10 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
             hasZoom: hasZoom
           });
         }
-
         if (this.detailImageRef.naturalWidth < 720) {
           maxZoomedWidth = this.detailImageRef.naturalWidth;
         }
       }
-
       return /*#__PURE__*/_react["default"].createElement(_CustomDialog["default"], {
         open: show,
         dialogTitle: details.title,
@@ -466,37 +403,15 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
       }));
     }
   }]);
-
   return Optiondetail;
 }(_react["default"].Component);
-
-_defineProperty(Optiondetail, "propTypes", {
-  details: _propTypes["default"].object,
-  optionclassification: _propTypes["default"].object,
-  classes: _propTypes["default"].object,
-  options: _propTypes["default"].array,
-  viewDetails: _propTypes["default"].func,
-  onSelect: _propTypes["default"].func,
-  OptionlistitemAmount: _propTypes["default"].elementType,
-  show: _propTypes["default"].bool,
-  title: _propTypes["default"].string,
-  onClose: _propTypes["default"].func,
-  LoadingComponent: _propTypes["default"].elementType,
-  width: _propTypes["default"].string,
-  isLoading: _propTypes["default"].bool
-});
-
 _defineProperty(Optiondetail, "swipeDelta", 50);
-
 Optiondetail.defaultProps = {
   OptionlistitemAmount: _OptionAmount["default"],
   LoadingComponent: _LoadingOverlay["default"]
 };
-
-var _default = (0, _styles.withStyles)(styles, {
+var _default = exports["default"] = (0, _styles.withStyles)(styles, {
   name: 'Optiondetail'
 })((0, _withWidth["default"])({
   initialWidth: 'xl'
-})(Optiondetail));
-
-exports["default"] = _default;
+})(Optiondetail));

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

@@ -1,87 +1,26 @@
 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.mockedProps = exports.optionData = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@storybook/react");
-
 var _ThemeProvider = _interopRequireDefault(require("../../../../Screens/Configurator/ThemeProvider"));
-
 var _index = _interopRequireDefault(require("./index"));
-
 var _redux = require("redux");
-
 var _reactRedux = require("react-redux");
-
+var _indexTest = require("./index.test.mocks");
 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; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var optionData = {
-  "abstract": 'Das sind schwarze Reissverschlüsse',
-  amount: null,
-  amount_is_selectable: null,
-  attributes: [],
-  description: '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. ',
-  detailImageExists: false,
-  identifier: 'reissverschluesse_black',
-  imageIdentifier: 'reissverschluesse_black',
-  netPrice: null,
-  price: 0,
-  priceFormatted: '0,00 €',
-  stock: null,
-  title: 'Reissverschlüsse schwarz'
-};
-exports.optionData = optionData;
-var mockedProps = {
-  channelSettings: {
-    currencySymbol: '€',
-    channel: '_default'
-  },
-  details: optionData,
-  isTabletDevice: false,
-  languageSettings: {
-    currencysymbolposition: 'right',
-    dateformat: 'd.m.Y',
-    decimalpoint: ',',
-    id: '2',
-    iso: 'de_DE',
-    pricedecimals: 2,
-    thousandsseparator: '.',
-    user_created_id: '0'
-  },
-  optionclassification: {
-    attributes: [],
-    description: '',
-    identifier: 'reissverschluss',
-    is_mandatory: true,
-    is_multiselect: false,
-    optionsCount: '2',
-    selectedoptions: [optionData],
-    title: 'Reissverschluss'
-  },
-  options: [optionData],
-  show: true,
-  title: 'Reissverschluss',
-  viewDetails: function viewDetails() {},
-  OptionlistitemAmount: _react["default"].Fragment
-};
-exports.mockedProps = mockedProps;
+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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+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); }
 (0, _react2.storiesOf)('OptionDetail', module).add('renders as fullscreen on small screens', function () {
   return /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
     store: (0, _redux.createStore)(function () {
       var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       return state;
     })
-  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_index["default"], _objectSpread(_objectSpread({}, mockedProps), {}, {
+  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_index["default"], _objectSpread(_objectSpread({}, _indexTest.mockedProps), {}, {
     width: 'sm'
   }))));
 }).add('renders as a modal on larger screens', function () {
@@ -90,7 +29,7 @@ exports.mockedProps = mockedProps;
       var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       return state;
     })
-  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_index["default"], _objectSpread(_objectSpread({}, mockedProps), {}, {
+  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_index["default"], _objectSpread(_objectSpread({}, _indexTest.mockedProps), {}, {
     width: 'md'
   }))));
 }).add('renders with previous and next navigation', function () {
@@ -99,7 +38,7 @@ exports.mockedProps = mockedProps;
       var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       return state;
     })
-  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_index["default"], _objectSpread(_objectSpread({}, mockedProps), {}, {
+  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_index["default"], _objectSpread(_objectSpread({}, _indexTest.mockedProps), {}, {
     options: [{}, {}]
   }))));
 }).add('renders the provided loading component with the same size as the previous screen after navigating to another tile', function () {
@@ -108,7 +47,7 @@ exports.mockedProps = mockedProps;
       var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       return state;
     })
-  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_index["default"], _objectSpread(_objectSpread({}, mockedProps), {}, {
+  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_index["default"], _objectSpread(_objectSpread({}, _indexTest.mockedProps), {}, {
     options: [{}, {}],
     LoadingComponent: function LoadingComponent() {
       return null;

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

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.optionData = exports.mockedProps = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var optionData = exports.optionData = {
+  "abstract": 'Das sind schwarze Reissverschlüsse',
+  amount: null,
+  amount_is_selectable: null,
+  attributes: [],
+  description: '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. ',
+  detailImageExists: false,
+  identifier: 'reissverschluesse_black',
+  imageIdentifier: 'reissverschluesse_black',
+  netPrice: null,
+  price: 0,
+  priceFormatted: '0,00 €',
+  stock: null,
+  title: 'Reissverschlüsse schwarz'
+};
+var mockedProps = exports.mockedProps = {
+  channelSettings: {
+    currencySymbol: '€',
+    channel: '_default'
+  },
+  details: optionData,
+  isTabletDevice: false,
+  languageSettings: {
+    currencysymbolposition: 'right',
+    dateformat: 'd.m.Y',
+    decimalpoint: ',',
+    id: '2',
+    iso: 'de_DE',
+    pricedecimals: 2,
+    thousandsseparator: '.',
+    user_created_id: '0'
+  },
+  optionclassification: {
+    attributes: [],
+    description: '',
+    identifier: 'reissverschluss',
+    is_mandatory: true,
+    is_multiselect: false,
+    optionsCount: '2',
+    selectedoptions: [optionData],
+    title: 'Reissverschluss'
+  },
+  options: [optionData],
+  show: true,
+  title: 'Reissverschluss',
+  viewDetails: function viewDetails() {},
+  OptionlistitemAmount: _react["default"].Fragment
+};