@configuratorware/configurator-frontendgui 1.28.6 → 1.29.3

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

@@ -0,0 +1,231 @@
+"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 _clsx = _interopRequireDefault(require("clsx"));
+
+var _index = _interopRequireDefault(require("@material-ui/core/Icon/index"));
+
+var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+var _Hidden = _interopRequireDefault(require("@material-ui/core/Hidden/Hidden"));
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem/MenuItem"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton/IconButton"));
+
+var _Menu = _interopRequireDefault(require("@material-ui/core/Menu/Menu"));
+
+var _AnalyticsWrapper = _interopRequireDefault(require("../Analytics/AnalyticsWrapper"));
+
+var _customClassName = _interopRequireDefault(require("../../../Utils/customClassName"));
+
+var _i18n = require("../../../../Framework/i18n");
+
+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); }
+
+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 styles = function styles(theme) {
+  return {
+    iconHover: {
+      margin: theme.spacing(1),
+      textAlign: 'center',
+      verticalAlign: 'middle',
+      lineHeight: '24px',
+      width: '24px',
+      height: '24px',
+      '&:hover': {
+        color: 'rgba(0,0,0, 0.5)',
+        cursor: 'pointer'
+      }
+    },
+    root: {
+      whiteSpace: 'nowrap'
+    },
+    ToolbarButton: {
+      padding: 0
+    },
+    ToolbarIconButton: {
+      height: 32,
+      width: 32,
+      padding: 8,
+      '& span': {
+        fontSize: 24,
+        color: theme.palette.primary.darkText
+      }
+    },
+    MenuItemOption: {
+      '@media (hover: none) , (pointer: coarse)': {
+        '&:focus': {
+          backgroundColor: '#fff'
+        }
+      }
+    },
+    toolTitle: {
+      alignSelf: 'center',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      width: 175
+    }
+  };
+};
+
+var ITEM_HEIGHT = 52;
+
+var ToolbarList = /*#__PURE__*/function (_React$Component) {
+  _inherits(ToolbarList, _React$Component);
+
+  var _super = _createSuper(ToolbarList);
+
+  function ToolbarList() {
+    var _this;
+
+    _classCallCheck(this, ToolbarList);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      anchorEl: null
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
+      _this.setState({
+        anchorEl: event.currentTarget
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClose", function () {
+      _this.setState({
+        anchorEl: null
+      });
+    });
+
+    return _this;
+  }
+
+  _createClass(ToolbarList, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          tools = _this$props.tools;
+      var anchorEl = this.state.anchorEl;
+      var open = Boolean(anchorEl);
+      var toolbarMobileIcon = !open ? 'menu' : 'close';
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _clsx["default"])(classes.root, (0, _customClassName["default"])('tools'))
+      }, tools && /*#__PURE__*/_react["default"].createElement(_Hidden["default"], {
+        xsDown: true
+      }, tools.map(function (tool) {
+        return /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
+          key: tool.key,
+          targetId: tool.key
+        }, /*#__PURE__*/_react["default"].createElement(_index["default"], {
+          title: tool.title && (0, _i18n.t)(tool.title),
+          key: tool.key,
+          className: classes.iconHover,
+          onClick: tool["function"]
+        }, tool.identifier));
+      })), /*#__PURE__*/_react["default"].createElement(_Hidden["default"], {
+        smUp: true
+      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        "aria-label": "Menu",
+        "aria-haspopup": "true",
+        classes: {
+          root: classes.ToolbarButton,
+          label: classes.ToolbarIconButton
+        },
+        onClick: this.handleClick
+      }, /*#__PURE__*/_react["default"].createElement(_index["default"], null, toolbarMobileIcon)), /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
+        id: "long-menu",
+        anchorEl: anchorEl,
+        open: open,
+        getContentAnchorEl: null,
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
+        },
+        onClose: this.handleClose,
+        PaperProps: {
+          style: {
+            maxHeight: ITEM_HEIGHT * 4.5,
+            width: 250
+          }
+        }
+      }, tools && tools.map(function (tool) {
+        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+          className: classes.MenuItemOption,
+          key: tool.key,
+          onClick: _this2.handleClose
+        }, /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
+          key: tool.key,
+          targetId: tool.key
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            display: 'flex',
+            width: '100%'
+          },
+          onClick: tool["function"]
+        }, /*#__PURE__*/_react["default"].createElement(_index["default"], {
+          key: tool.key,
+          className: classes.iconHover
+        }, tool.identifier), /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.toolTitle
+        }, tool.title && (0, _i18n.t)(tool.title)))));
+      })))));
+    }
+  }]);
+
+  return ToolbarList;
+}(_react["default"].Component);
+
+_defineProperty(ToolbarList, "propTypes", {
+  classes: _propTypes["default"].object,
+  tools: _propTypes["default"].array
+});
+
+var _default = (0, _withStyles["default"])(styles, {
+  name: 'ToolbarList'
+})(ToolbarList);
+
+exports["default"] = _default;

package/App/Shared/Components/ToolbarList/index.story.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var mockIcons = [{
+  key: 'save',
+  identifier: 'save',
+  "function": 'saveConfiguration'
+}, {
+  key: 'mail',
+  identifier: 'mail',
+  "function": 'sendMail'
+}, {
+  key: 'picture_as_pdf',
+  identifier: 'picture_as_pdf',
+  "function": 'savePDf'
+}, {
+  key: 'help',
+  identifier: 'help',
+  "function": 'help'
+}];
+(0, _react2.storiesOf)('Toolbar', module).add('with Icons', function () {
+  return /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    tools: mockIcons,
+    color: "secondary"
+  });
+});

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

@@ -0,0 +1,270 @@
+"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 _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText/ListItemText"));
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem/MenuItem"));
+
+var _Select = _interopRequireDefault(require("@material-ui/core/Select/Select"));
+
+var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl/FormControl"));
+
+var _Input = _interopRequireDefault(require("@material-ui/core/Input/Input"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography/Typography"));
+
+var _AnalyticsWrapper = _interopRequireDefault(require("../Analytics/AnalyticsWrapper"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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); }
+
+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 styles = function styles(theme) {
+  var _root;
+
+  return {
+    formControl: _defineProperty({
+      marginTop: theme.spacing(1),
+      marginBottom: theme.spacing(1),
+      marginRight: theme.spacing(3),
+      minWidth: 150,
+      maxWidth: 500
+    }, theme.breakpoints.down('xs'), {
+      marginRight: theme.spacing(1),
+      '& .MuiInput-root': {
+        maxWidth: 144
+      }
+    }),
+    root: (_root = {
+      display: 'flex',
+      maxWidth: 'calc(100% - 40px)'
+    }, _defineProperty(_root, theme.breakpoints.up('sm'), {
+      maxWidth: 'calc(100% - 160px)' // subtract the full menu width
+
+    }), _defineProperty(_root, theme.breakpoints.between('xs', 'sm'), {
+      display: 'flex',
+      alignItems: 'center'
+    }), _root),
+    typographyBody: _defineProperty({
+      fontWeight: 'bold',
+      fontSize: 15,
+      justifyContent: 'space-between',
+      flexWrap: 'wrap',
+      marginRight: 5,
+      lineHeight: '18px',
+      textAlign: 'center',
+      letterSpacing: 'unset',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }, theme.breakpoints.down('sm'), {
+      fontSize: 12
+    }),
+    fontWeightNormal: {
+      fontWeight: 'normal'
+    },
+    typoLineHeight: {
+      marginLeft: 24
+    },
+    variantThumbnail: {
+      width: 50,
+      height: 50,
+      maxHeight: '100%',
+      maxWidth: '100%'
+    },
+    menuItemRoot: {
+      whiteSpace: 'unset',
+      height: 76,
+      width: 220
+    },
+    selectedListItem: {
+      '& span': {
+        fontWeight: 'bold',
+        letterSpacing: 'unset'
+      }
+    },
+    arrowNone: {
+      display: 'none'
+    },
+    itemInfoWrapper: _defineProperty({
+      display: 'inline-flex',
+      alignItems: 'center'
+    }, theme.breakpoints.down('sm'), {
+      display: 'block',
+      maxWidth: '100%',
+      overflow: 'hidden',
+      '& p': {
+        marginLeft: 0,
+        display: 'block',
+        maxWidth: '100%',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        textAlign: 'start'
+      }
+    }),
+    variantList: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      textTransform: 'capitalize',
+      paddingLeft: 16,
+      '& span': {
+        fontSize: '15px',
+        lineHeight: '22px',
+        letterSpacing: 'unset',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      }
+    },
+    selectInputUnderline: {
+      '&:after': {
+        borderBottom: '2px solid ' + theme.palette.primary.main
+      }
+    },
+    selectMenu: {
+      '& img': {
+        display: 'none'
+      },
+      '& div': {
+        '& span': {
+          fontSize: '15px',
+          fontWeight: 'bold'
+        }
+      }
+    }
+  };
+};
+
+var ITEM_HEIGHT = 55;
+var ITEM_PADDING_TOP = 15;
+var MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 7 + ITEM_PADDING_TOP,
+      width: 220,
+      top: 55
+    }
+  }
+};
+
+var VariantChooser = /*#__PURE__*/function (_React$Component) {
+  _inherits(VariantChooser, _React$Component);
+
+  var _super = _createSuper(VariantChooser);
+
+  function VariantChooser() {
+    _classCallCheck(this, VariantChooser);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(VariantChooser, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          value = _this$props.value,
+          variants = _this$props.variants,
+          handleChange = _this$props.handleChange,
+          title = _this$props.title,
+          renderExtraInfo = _this$props.renderExtraInfo;
+      var multipleVariants = variants.length > 1;
+      var arrowVisible = !multipleVariants ? classes.arrowNone : '';
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.root
+      }, variants.length > 1 && /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
+        className: classes.formControl
+      }, /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
+        targetId: "change_variant"
+      }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        value: value,
+        onChange: handleChange,
+        input: /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+          id: "variantInput",
+          classes: {
+            underline: classes.selectInputUnderline
+          }
+        }),
+        MenuProps: MenuProps,
+        classes: {
+          selectMenu: classes.selectMenu,
+          icon: arrowVisible
+        }
+      }, variants.map(function (variant) {
+        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+          key: variant.key,
+          value: variant.value,
+          "aria-label": variant.title,
+          classes: {
+            selected: classes.selectedListItem
+          },
+          className: classes.menuItemRoot
+        }, variant.url && /*#__PURE__*/_react["default"].createElement("img", {
+          src: variant.url,
+          alt: variant.title,
+          "aria-label": variant.title,
+          className: classes.variantThumbnail
+        }), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
+          className: classes.variantList,
+          primary: variant.title
+        }));
+      })))), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.itemInfoWrapper
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        classes: {
+          body2: classes.typographyBody
+        },
+        component: "p",
+        variant: "body2"
+      }, title), renderExtraInfo && renderExtraInfo(this.props)));
+    }
+  }]);
+
+  return VariantChooser;
+}(_react["default"].Component);
+
+_defineProperty(VariantChooser, "propTypes", {
+  classes: _propTypes["default"].object,
+  value: _propTypes["default"].string,
+  variants: _propTypes["default"].array,
+  title: _propTypes["default"].string,
+  handleChange: _propTypes["default"].func,
+  renderExtraInfo: _propTypes["default"].func
+});
+
+var _default = (0, _withStyles["default"])(styles, {
+  name: 'VariantChooser'
+})(VariantChooser);
+
+exports["default"] = _default;

package/App/Shared/Components/VariantChooser/index.story.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _storybookState = require("@sambego/storybook-state");
+
+var _i18n = require("../../../../Framework/i18n");
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _blue = _interopRequireDefault(require("./res/blue.jpg"));
+
+var _green = _interopRequireDefault(require("./res/green.jpg"));
+
+var _white = _interopRequireDefault(require("./res/white.jpg"));
+
+var _red = _interopRequireDefault(require("./res/red.jpg"));
+
+var _black = _interopRequireDefault(require("./res/black.jpg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var mockData = [{
+  key: 'green',
+  title: 'Light Softshell Green',
+  value: 'green',
+  url: _green["default"]
+}, {
+  key: 'white ',
+  title: 'Weiße Premium Kapuzenjacke zur Weihnacht',
+  value: 'white',
+  url: _white["default"]
+}, {
+  key: 'black',
+  title: 'Schwarze Kapuzenjacke nach Weihnachten',
+  value: 'black',
+  url: _black["default"]
+}, {
+  key: 'red',
+  title: 'Rote Premium Kapuzenjacke',
+  value: 'red',
+  url: _red["default"]
+}, {
+  key: 'blue',
+  title: 'Blau Premium Kapuzenjacke',
+  value: 'blue',
+  url: _blue["default"]
+}, {
+  key: 'blue1',
+  title: 'Blaue Premium Kapuzenjacke zur Weihnacht',
+  value: 'blue1',
+  url: _blue["default"]
+}, {
+  key: 'blue2',
+  title: 'Weiße Premium Jacke',
+  value: 'blue2',
+  url: _blue["default"]
+}];
+var mockOneVariantData = [{
+  key: 'white ',
+  title: 'Premium Kapuzenjacke zur Weihnacht',
+  value: 'white',
+  url: _white["default"]
+}];
+var store = new _storybookState.Store({
+  name: 'Light Softshell Green'
+});
+
+function handleChange(event) {
+  store.set({
+    name: event.target.value
+  });
+}
+
+(0, _react2.storiesOf)('VariantChooser', module).add('multiple variants', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storybookState.State, {
+    store: store
+  }, function (state) {
+    return /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      variants: mockData,
+      value: state.name,
+      item: (0, _i18n.t)('mockedData.Premium_Kapuzenjacke'),
+      orderNr: "309575",
+      handleChange: handleChange
+    });
+  });
+}).add('one variant', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storybookState.State, {
+    store: store
+  }, function () {
+    return /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      variants: mockOneVariantData,
+      value: 'Premium Kapuzenjacke zur Weihnacht',
+      item: (0, _i18n.t)('mockedData.Premium_Kapuzenjacke'),
+      orderNr: "309575"
+    });
+  });
+});

package/App/Shared/Containers/AlertMessages.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _ComponentContainer = require("../../../Framework/ComponentContainer");
+
+var _AlertDialog = _interopRequireDefault(require("../Components/AlertDialog"));
+
+var _ServiceLocator = require("../../ServiceLocator");
+
+var _i18n = require("../../../Framework/i18n");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var mapStateToProps = function mapStateToProps(_ref) {
+  var message = _ref.ui.message;
+  return {
+    Component: _AlertDialog["default"],
+    message: message,
+    title: (0, _i18n.t)('errorDialogTitle')
+  };
+};
+
+var mapDispatchToProps = function mapDispatchToProps() {
+  return {
+    dismissMessage: function dismissMessage() {
+      return _ServiceLocator.Services.ui.dismissAlert();
+    }
+  };
+};
+
+var _default = (0, _ComponentContainer.containerConnect)(mapStateToProps, mapDispatchToProps);
+
+exports["default"] = _default;