@configuratorware/configurator-frontendgui 1.28.1 → 1.29.0

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

@@ -0,0 +1,193 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _lodash = require("lodash");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _core = require("@material-ui/core");
+
+var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+
+var _LoadingOverlay = _interopRequireDefault(require("../../../../../Framework/Components/LoadingOverlay"));
+
+var _CustomDialog = _interopRequireDefault(require("../../../../../Shared/Components/CustomDialog"));
+
+var _customClassName = _interopRequireDefault(require("../../../../Utils/customClassName"));
+
+var _Option = _interopRequireDefault(require("../Option"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+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 useStyles = (0, _core.makeStyles)(function (theme) {
+  var _dialogStyle, _theme$breakpoints$be2, _ref;
+
+  return _ref = {
+    dialogStyle: (_dialogStyle = {
+      height: '100%'
+    }, _defineProperty(_dialogStyle, theme.breakpoints.down('sm'), {
+      width: '100%',
+      maxWidth: '390px'
+    }), _defineProperty(_dialogStyle, theme.breakpoints.between('sm', 'xl'), {
+      width: '470px',
+      maxWidth: '470px'
+    }), _defineProperty(_dialogStyle, theme.breakpoints.up('md'), {
+      marginLeft: '120px',
+      '& .MuiBackdrop-root': {
+        left: '140px'
+      }
+    }), _dialogStyle)
+  }, _defineProperty(_ref, theme.breakpoints.between('sm', 'md'), _defineProperty({}, theme.orientation.portrait, {
+    top: '-110px !important'
+  })), _defineProperty(_ref, '& > div.MuiDialog-container', _defineProperty({}, theme.breakpoints.between('sm', 'lg'), (_theme$breakpoints$be2 = {}, _defineProperty(_theme$breakpoints$be2, theme.orientation.portrait, {
+    alignItems: 'flex-end'
+  }), _defineProperty(_theme$breakpoints$be2, theme.orientation.landscape, {
+    alignItems: 'flex-start',
+    marginTop: 35
+  }), _theme$breakpoints$be2))), _defineProperty(_ref, "contentStyle", {}), _defineProperty(_ref, "backDrop", {
+    backgroundColor: 'rgba(0,0,0,0.0)'
+  }), _ref;
+}, {
+  name: 'OptionsList'
+});
+
+var OptionsList = function OptionsList(_ref2) {
+  var addCheckedOptionclassification = _ref2.addCheckedOptionclassification,
+      children = _ref2.children,
+      isLoading = _ref2.isLoading,
+      onClose = _ref2.onClose,
+      onSelect = _ref2.onSelect,
+      onToggle = _ref2.onToggle,
+      optionclassification = _ref2.optionclassification,
+      options = _ref2.options,
+      show = _ref2.show,
+      viewDetails = _ref2.viewDetails,
+      viewStockInformation = _ref2.viewStockInformation,
+      LoadingComponent = _ref2.LoadingComponent,
+      OptionComponent = _ref2.OptionComponent,
+      isAdminMode = _ref2.isAdminMode;
+  var classes = useStyles();
+
+  var createOptions = function createOptions() {
+    var onOptionClicked = function onOptionClicked() {
+      addCheckedOptionclassification(optionclassification);
+    };
+
+    return options.map(function (option) {
+      var optionIndex = -1;
+      var optionGroupChildren = (0, _lodash.get)(option, 'option_group.children', []);
+
+      if (optionGroupChildren.length === 0) {
+        optionIndex = (0, _lodash.findIndex)((0, _lodash.get)(optionclassification, 'selectedoptions'), {
+          identifier: option.identifier
+        });
+      } else {
+        var _iterator = _createForOfIteratorHelper(optionGroupChildren),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var item = _step.value;
+            optionIndex = (0, _lodash.findIndex)((0, _lodash.get)(optionclassification, 'selectedoptions'), {
+              identifier: item.identifier
+            });
+
+            if (optionIndex > -1) {
+              // we need the first selected option
+              break;
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+
+      var selected = optionIndex <= -1 ? false : !(option.amount_is_selectable && option.amount < 1);
+      return /*#__PURE__*/_react["default"].createElement(OptionComponent, {
+        key: 'optionlistitem' + option.identifier,
+        option: option,
+        optionclassification: optionclassification,
+        onSelect: onSelect,
+        selected: selected,
+        viewDetails: viewDetails,
+        viewStockInformation: viewStockInformation,
+        onClick: onOptionClicked,
+        onToggle: onToggle,
+        isAdminMode: isAdminMode
+      });
+    });
+  };
+
+  var renderOptions = function renderOptions() {
+    var optionListItems = createOptions();
+    return /*#__PURE__*/_react["default"].createElement("div", null, children ? children : optionListItems.length > 0 ? optionListItems : null, /*#__PURE__*/_react["default"].createElement(LoadingComponent, {
+      show: isLoading
+    }));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_CustomDialog["default"], {
+    className: (0, _clsx["default"])(classes.dialogStyle, (0, _customClassName["default"])('options')),
+    dialogTitle: optionclassification.title,
+    onCancel: onClose,
+    onClose: onClose,
+    open: show && !!optionclassification.identifier,
+    BackdropProps: {
+      classes: {
+        root: classes.backDrop
+      }
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
+    className: classes.contentStyle
+  }, renderOptions()));
+};
+
+OptionsList.defaultProps = {
+  addCheckedOptionclassification: function addCheckedOptionclassification() {},
+  isLoading: false,
+  onClose: function onClose() {},
+  onSelect: function onSelect() {},
+  onToggle: function onToggle() {},
+  options: [],
+  optionclassification: {},
+  show: false,
+  viewDetails: function viewDetails() {},
+  viewStockInformation: function viewStockInformation() {},
+  LoadingComponent: _LoadingOverlay["default"],
+  OptionComponent: _Option["default"]
+};
+OptionsList.propTypes = {
+  addCheckedOptionclassification: _propTypes["default"].func,
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
+  isLoading: _propTypes["default"].bool,
+  onClose: _propTypes["default"].func,
+  onSelect: _propTypes["default"].func,
+  onToggle: _propTypes["default"].func,
+  options: _propTypes["default"].array,
+  optionclassification: _propTypes["default"].object,
+  show: _propTypes["default"].bool,
+  viewDetails: _propTypes["default"].func,
+  viewStockInformation: _propTypes["default"].func,
+  LoadingComponent: _propTypes["default"].elementType,
+  OptionComponent: _propTypes["default"].elementType,
+  isAdminMode: _propTypes["default"].bool
+};
+var _default = OptionsList;
+exports["default"] = _default;

package/App/Modules/Creator/Components/Price/Styles.scss

@@ -0,0 +1,3 @@
+.price {
+
+}

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

@@ -0,0 +1,79 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _i18n = require("../../../../../Framework/i18n");
+
+require("./Styles.scss");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 _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 _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); }
+
+var Price = /*#__PURE__*/function (_React$Component) {
+  _inherits(Price, _React$Component);
+
+  var _super = _createSuper(Price);
+
+  function Price() {
+    _classCallCheck(this, Price);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Price, [{
+    key: "render",
+    value: function render() {
+      var _ref = this.props.calculation || {},
+          totalFormatted = _ref.totalFormatted,
+          invalidated = _ref.invalidated;
+
+      var title = this.props.title;
+      return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: "price"
+      }, title && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "price-title"
+      }, title, ": "), /*#__PURE__*/_react["default"].createElement("span", {
+        className: "price-value"
+      }, invalidated ? (0, _i18n.T)('price.calculating') : totalFormatted && !invalidated ? totalFormatted : ''));
+    }
+  }]);
+
+  return Price;
+}(_react["default"].Component);
+
+Price.propTypes = {
+  calculation: _propTypes["default"].object,
+  title: _propTypes["default"].node
+};
+var _default = Price;
+exports["default"] = _default;

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

@@ -0,0 +1,185 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.StyledProductPart = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _getImageUrl = _interopRequireDefault(require("../../../../Utils/getImageUrl"));
+
+var _customClassName = _interopRequireDefault(require("../../../../Utils/customClassName"));
+
+var _i18n = require("../../../../../Framework/i18n");
+
+var _styles = require("@material-ui/core/styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 ProductPart = function ProductPart(_ref) {
+  var displaySwitchedOptions = _ref.displaySwitchedOptions,
+      onSelect = _ref.onSelect,
+      optionclassification = _ref.optionclassification,
+      selectedOption = _ref.selectedOption,
+      verticalMode = _ref.verticalMode,
+      setAnchorRef = _ref.setAnchorRef,
+      classes = _ref.classes;
+  var selected = (0, _get["default"])(selectedOption, 'identifier', null) === (0, _get["default"])(optionclassification, 'identifier', '');
+  var direction = verticalMode ? 'vertical' : 'horizontal';
+
+  var displayImage = function displayImage() {
+    var imageUrl = displaySwitchedOptions && selectedOption ? (0, _getImageUrl["default"])(selectedOption.thumbnail) : (0, _getImageUrl["default"])(optionclassification.thumbnail);
+    return /*#__PURE__*/_react["default"].createElement("i", {
+      className: "".concat(classes.icon, " ").concat(direction),
+      style: imageUrl ? {
+        backgroundImage: 'url(' + imageUrl + ')'
+      } : {}
+    });
+  };
+
+  var displayText = function displayText() {
+    return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      className: classes.rootTypography,
+      variant: "body1",
+      component: "span"
+    }, /*#__PURE__*/_react["default"].createElement(_i18n.Hyphenated, null, optionclassification.title));
+  };
+
+  var onClick = function onClick(event) {
+    event.stopPropagation();
+    onSelect(optionclassification);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _clsx["default"])(classes.root, direction, (0, _customClassName["default"])('component')),
+    ref: setAnchorRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.marker, " ").concat(direction, " ").concat(selected ? 'selected' : '')
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.content, " ").concat(direction),
+    onClick: onClick
+  }, displayImage(), displayText()));
+};
+
+var MARKER_POSITION = {
+  left: 'left',
+  right: 'right',
+  top: 'top'
+};
+ProductPart.defaultProps = {
+  optionclassification: {},
+  onSelect: function onSelect() {},
+  verticalMode: true
+};
+ProductPart.propTypes = {
+  displaySwitchedOptions: _propTypes["default"].bool,
+  onSelect: _propTypes["default"].func,
+  optionclassification: _propTypes["default"].object,
+  selectedOption: _propTypes["default"].object,
+  verticalMode: _propTypes["default"].bool,
+  setAnchorRef: _propTypes["default"].func,
+  classes: _propTypes["default"].object
+};
+var StyledProductPart = (0, _styles.withStyles)(function (theme) {
+  var _root, _selected;
+
+  var captionMaxHeight = "calc(".concat(theme.creator.productPart.captionPaddingTop, " + ").concat(theme.creator.productPart.lineHeight, " * 2)");
+  var iconMaxHeigth = "calc(".concat(theme.creator.productPart.itemSize, " - ").concat(captionMaxHeight, "  - ").concat(theme.creator.productPart.captionPaddingTop, ")");
+  var iconSizeWithoutMarker = "calc(".concat(theme.creator.productPart.itemSize, " - ").concat(theme.creator.productPart.spaceBetweenItemAndMarker, ")");
+  var contentMargin = {
+    right: '0 0 0 ' + theme.creator.productPart.spaceBetweenItemAndMarker,
+    left: '0 ' + theme.creator.productPart.spaceBetweenItemAndMarker + ' 0 0'
+  };
+  return {
+    root: (_root = {}, _defineProperty(_root, theme.breakpoints.up('sm'), {
+      width: theme.creator.productPart.selectedItemSize
+    }), _defineProperty(_root, "width", theme.creator.productPart.itemSize), _defineProperty(_root, "height", 'auto'), _defineProperty(_root, '&.horizontal', {
+      padding: '0 10px'
+    }), _defineProperty(_root, '&.vertical', {
+      marginLeft: 'auto',
+      display: 'flex',
+      flexDirection: 'row-reverse'
+    }), _defineProperty(_root, "tapHighlightColor", theme.tapHighlightColor), _root),
+    content: {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'column',
+      cursor: 'pointer',
+      textAlign: 'center',
+      position: 'relative',
+      '&.horizontal': {
+        width: theme.creator.productPart.itemSize,
+        height: 'auto',
+        "float": MARKER_POSITION.top,
+        whiteSpace: 'normal',
+        '& span': {
+          marginBottom: 0
+        }
+      },
+      '&.vertical': {
+        width: iconSizeWithoutMarker,
+        maxHeight: 120,
+        "float": theme.creator.productPartsList.markerVerticalPosition,
+        margin: theme.creator.productPartsList.markerVerticalPosition === MARKER_POSITION.right ? contentMargin.left : contentMargin.right
+      }
+    },
+    icon: {
+      maxHeight: iconMaxHeigth,
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'contain',
+      display: 'block',
+      '&.horizontal': {
+        width: theme.creator.productPart.itemSize,
+        height: 'calc(0.75*' + theme.creator.productPart.itemSize + ')'
+      },
+      '&.vertical': {
+        width: iconSizeWithoutMarker,
+        height: 'calc(0.75*' + iconSizeWithoutMarker + ')'
+      }
+    },
+    marker: {
+      backgroundColor: 'transparent',
+      '&.horizontal': {
+        width: theme.creator.productPart.itemSize,
+        height: theme.creator.productPart.markerThickness
+      },
+      '&.vertical': {
+        width: theme.creator.productPart.markerThickness,
+        height: "calc(".concat(theme.creator.productPart.itemSize, " - 24px)"),
+        "float": theme.creator.productPartsList.markerVerticalPosition
+      },
+      '&.selected': (_selected = {}, _defineProperty(_selected, theme.breakpoints.down('sm'), {
+        marginBottom: 4
+      }), _defineProperty(_selected, "backgroundColor", theme.palette.primary.main), _selected)
+    },
+    rootTypography: {
+      padding: '3px 0 2px 7px',
+      marginBottom: 5,
+      display: '-webkit-box',
+      overflow: 'hidden',
+      wordWrap: 'break-word',
+      maxWidth: theme.creator.productPart.itemSize,
+      lineHeight: 1,
+      boxOrient: 'vertical',
+      lineClamp: 3,
+      minHeight: 20
+    }
+  };
+}, {
+  name: 'ProductPart'
+})(ProductPart);
+exports.StyledProductPart = StyledProductPart;
+var _default = StyledProductPart;
+exports["default"] = _default;

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _redux = require("redux");
+
+var _reactRedux = require("react-redux");
+
+var _react2 = require("@storybook/react");
+
+var _ThemeProvider = _interopRequireDefault(require("../../../../Screens/Configurator/ThemeProvider"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+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 initialState = {
+  displaySwitchedOptions: false,
+  optionclassification: {
+    identifier: 'seat',
+    title: 'Seat'
+  },
+  selectedOption: {
+    identifier: 'seat'
+  },
+  selectedOption2: {
+    identifier: 'back'
+  },
+  onSelect: function onSelect() {}
+};
+var stories = {
+  withoutMarker: {
+    displaySwitchedOptions: initialState.displaySwitchedOptions,
+    optionclassification: initialState.optionclassification,
+    selectedOption: initialState.selectedOption2,
+    onSelect: initialState.onSelect
+  },
+  withVerticalMarker: {
+    displaySwitchedOptions: initialState.displaySwitchedOptions,
+    optionclassification: initialState.optionclassification,
+    selectedOption: initialState.selectedOption,
+    onSelect: initialState.onSelect
+  },
+  withHorizontalMarker: {
+    displaySwitchedOptions: initialState.displaySwitchedOptions,
+    optionclassification: initialState.optionclassification,
+    selectedOption: initialState.selectedOption,
+    onSelect: initialState.onSelect,
+    verticalMode: false
+  }
+};
+var customTheme = {
+  palette: {
+    primary: {
+      main: '#FF0000'
+    }
+  }
+};
+
+var reducer = function reducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+  return _objectSpread(_objectSpread({}, action), state);
+};
+
+var store = (0, _redux.createStore)(reducer, ['Use Redux']);
+
+var createStory = function createStory(data) {
+  return /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
+    store: store
+  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], {
+    customTheme: customTheme
+  }, /*#__PURE__*/_react["default"].createElement(_index["default"], data)));
+};
+
+(0, _react2.storiesOf)('ProductPart', module).add('without marker', function () {
+  return createStory(stories.withoutMarker);
+}).add('vertical mode', function () {
+  return createStory(stories.withVerticalMarker);
+}).add('horizontal mode', function () {
+  return createStory(stories.withHorizontalMarker);
+});