kitchen-simulator 5.0.0-test.4 → 5.0.0-test.6

package/es/components/firstsetting/firstsetting.js

@@ -1,626 +0,0 @@
-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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as S from './button/styles';
-import * as rectangleData from '../toolbar/main/rectangle.json';
-import * as lShaped from '../toolbar/main/lShaped.json';
-import * as oRectangle from '../toolbar/main/oRectangle.json';
-import * as longNarrow from '../toolbar/main/longNarrow.json';
-import { MODE_IDLE, MODE_2D_PAN } from '../../constants';
-var FirstSetting = /*#__PURE__*/function (_Component) {
-  function FirstSetting(props, context) {
-    var _this;
-    _classCallCheck(this, FirstSetting);
-    _this = _callSuper(this, FirstSetting, [props, context]);
-    _this.state = {
-      step: 1,
-      roomShape: {
-        name: '',
-        data: {}
-      },
-      doorColor: {
-        name: '',
-        url: '',
-        color: ''
-      },
-      installation: '',
-      doorCategory: {
-        name: '',
-        url: ''
-      },
-      doorStyle: ''
-    };
-    return _this;
-  }
-  _inherits(FirstSetting, _Component);
-  return _createClass(FirstSetting, [{
-    key: "loadProject",
-    value: function loadProject(data) {
-      this.context.projectActions.loadProject(data, this.props.categoryData);
-    }
-  }, {
-    key: "_confirm",
-    value: function _confirm() {
-      this.props.close();
-      if (this.state.roomShape.name === '') return;
-      if (this.state.roomShape.name === 'custom') this.context.linesActions.selectToolDrawingLine('wall');else this.loadProject(this.state.roomShape.data, this.props.categoryData);
-      this.context.itemsActions.setDoorStyle(this.state.doorStyle);
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {}
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {}
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$state = this.state,
-        step = _this$state.step,
-        roomShape = _this$state.roomShape,
-        doorColor = _this$state.doorColor,
-        installation = _this$state.installation,
-        doorCategory = _this$state.doorCategory,
-        doorStyle = _this$state.doorStyle;
-      var roomShapeData = [{
-        type: 'square',
-        name: 'Square',
-        url: '/assets/img/svg/firstsetting/Square.svg',
-        data: rectangleData
-      }, {
-        type: 'l-shape',
-        name: 'L-Shaped',
-        url: '/assets/img/svg/firstsetting/L.svg',
-        data: lShaped
-      }, {
-        type: 'irregular',
-        name: 'Irregular',
-        url: '/assets/img/svg/firstsetting/L2.svg',
-        data: longNarrow
-      }, {
-        type: 'open',
-        name: 'Open',
-        url: '/assets/img/svg/firstsetting/Open.svg',
-        data: oRectangle
-      }];
-      var stepBar = [{
-        index: 1,
-        title: 'ROOM SHAPE',
-        description: 'Select from the predefined shapes or draw your own.',
-        content: /*#__PURE__*/React.createElement(S.ContentWrapper, null, /*#__PURE__*/React.createElement(S.ContentWrapper1, null, roomShapeData.map(function (item) {
-          return /*#__PURE__*/React.createElement(S.ContentItem, {
-            onClick: function onClick() {
-              return _this2.setState({
-                roomShape: {
-                  name: item.type,
-                  data: item.data
-                }
-              });
-            }
-          }, /*#__PURE__*/React.createElement(S.RoomContentImage, {
-            src: item.url,
-            style: {
-              backgroundColor: roomShape.name === item.type && 'rgb(217, 232, 255)'
-            }
-          }), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-            id: "check",
-            src: "/assets/img/svg/firstsetting/check-normal.svg"
-          }), roomShape.name === item.type && /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-            src: "/assets/img/svg/firstsetting/check-active.svg"
-          }), item.name);
-        })), /*#__PURE__*/React.createElement(S.ContentWrapper1, null, /*#__PURE__*/React.createElement(S.ContentItem, {
-          onClick: function onClick() {
-            return _this2.setState({
-              roomShape: {
-                name: 'custom',
-                data: {}
-              }
-            });
-          }
-        }, /*#__PURE__*/React.createElement(S.RoomContentImage, {
-          src: "/assets/img/svg/firstsetting/Square.svg",
-          style: {
-            backgroundColor: roomShape.name === 'custom' && 'rgb(217, 232, 255)'
-          }
-        }), /*#__PURE__*/React.createElement("img", {
-          src: "/assets/img/svg/firstsetting/pencil.svg",
-          style: {
-            position: 'absolute',
-            top: 10,
-            right: 10,
-            height: 35,
-            zIndex: 2
-          }
-        }), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-          id: "check",
-          src: "/assets/img/svg/firstsetting/check-normal.svg"
-        }), roomShape.name === 'custom' && /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-          src: "/assets/img/svg/firstsetting/check-active.svg"
-        }), "Custom")))
-      }, {
-        index: 2,
-        title: 'CABINET COLOR',
-        description: 'Select a preferred color first.',
-        content: /*#__PURE__*/React.createElement(S.ContentWrapper, null, /*#__PURE__*/React.createElement("span", {
-          style: {
-            fontSize: 20,
-            fontWeight: 'bold'
-          }
-        }, "Color"), /*#__PURE__*/React.createElement(S.ContentWrapper1, null, /*#__PURE__*/React.createElement(S.ColorContentItem, {
-          onClick: function onClick() {
-            return _this2.setState({
-              doorColor: {
-                name: 'White',
-                color: '#ffffff'
-              }
-            });
-          }
-        }, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundColor: '#ffffff',
-            border: doorColor.color === '#ffffff' && '5px solid #4C12A1'
-          }
-        }), "White"), /*#__PURE__*/React.createElement(S.ColorContentItem, {
-          onClick: function onClick() {
-            return _this2.setState({
-              doorColor: {
-                name: 'Black',
-                color: '#000F33'
-              }
-            });
-          }
-        }, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundColor: '#000F33',
-            border: doorColor.color === '#000F33' && '5px solid #4C12A1'
-          }
-        }), "Black"), /*#__PURE__*/React.createElement(S.ColorContentItem, {
-          onClick: function onClick() {
-            return _this2.setState({
-              doorColor: {
-                name: 'Grey',
-                color: '#8791AB'
-              }
-            });
-          }
-        }, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundColor: '#8791AB',
-            border: doorColor.color === '#8791AB' && '5px solid #4C12A1'
-          }
-        }), "Grey"), /*#__PURE__*/React.createElement(S.ColorContentItem, {
-          onClick: function onClick() {
-            return _this2.setState({
-              doorColor: {
-                name: 'Blue',
-                color: '#0A339E'
-              }
-            });
-          }
-        }, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundColor: '#0A339E',
-            border: doorColor.color === '#0A339E' && '5px solid #4C12A1'
-          }
-        }), "Blue"), /*#__PURE__*/React.createElement(S.ColorContentItem, {
-          onClick: function onClick() {
-            return _this2.setState({
-              doorColor: {
-                name: 'Green',
-                color: '#00491D'
-              }
-            });
-          }
-        }, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundColor: '#00491D',
-            border: doorColor.color === '#00491D' && '5px solid #4C12A1'
-          }
-        }), "Green"), /*#__PURE__*/React.createElement(S.ColorContentItem, {
-          onClick: function onClick() {
-            return _this2.setState({
-              doorColor: {
-                name: 'Brown',
-                color: '#624100'
-              }
-            });
-          }
-        }, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundColor: '#624100',
-            border: doorColor.color === '#624100' && '5px solid #4C12A1'
-          }
-        }), "Brown"), /*#__PURE__*/React.createElement(S.ColorContentItem, {
-          onClick: function onClick() {
-            return _this2.setState({
-              doorColor: {
-                name: 'Wood',
-                url: '/assets/img/svg/color/wood2.jpg'
-              }
-            });
-          }
-        }, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundImage: 'url("/assets/img/svg/color/wood2.jpg")',
-            border: doorColor.name === 'Wood' && '5px solid #4C12A1'
-          }
-        }), "Wood"), /*#__PURE__*/React.createElement(S.ColorContentItem, {
-          onClick: function onClick() {
-            return _this2.setState({
-              doorColor: {
-                name: 'Stone',
-                url: '/assets/img/svg/color/stone2.jpg'
-              }
-            });
-          }
-        }, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundImage: 'url("/assets/img/svg/color/stone2.jpg")',
-            border: doorColor.name === 'Stone' && '5px solid #4C12A1'
-          }
-        }), "Stone")))
-      }, {
-        index: 3,
-        title: 'INSTALLATION',
-        description: 'Select from the door collection for all cabinets.',
-        content: /*#__PURE__*/React.createElement(S.ContentWrapper, null, /*#__PURE__*/React.createElement("span", {
-          style: {
-            fontSize: 20,
-            fontWeight: 'bold'
-          }
-        }, "Color"), /*#__PURE__*/React.createElement(S.ContentWrapper1, null, /*#__PURE__*/React.createElement(S.ColorContentItem, null, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundColor: 'white',
-            cursor: 'auto',
-            border: doorColor.color === '#ffffff' && '5px solid #4C12A1'
-          }
-        }), "White"), /*#__PURE__*/React.createElement(S.ColorContentItem, null, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundColor: '#000F33',
-            cursor: 'auto',
-            border: doorColor.color === '#000F33' && '5px solid #4C12A1'
-          }
-        }), "Black"), /*#__PURE__*/React.createElement(S.ColorContentItem, null, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundColor: '#8791AB',
-            cursor: 'auto',
-            border: doorColor.color === '#8791AB' && '5px solid #4C12A1'
-          }
-        }), "Grey"), /*#__PURE__*/React.createElement(S.ColorContentItem, null, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundColor: '#0A339E',
-            cursor: 'auto',
-            border: doorColor.color === '#0A339E' && '5px solid #4C12A1'
-          }
-        }), "Blue"), /*#__PURE__*/React.createElement(S.ColorContentItem, null, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundColor: '#00491D',
-            cursor: 'auto',
-            border: doorColor.color === '#00491D' && '5px solid #4C12A1'
-          }
-        }), "Green"), /*#__PURE__*/React.createElement(S.ColorContentItem, null, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundColor: '#624100',
-            cursor: 'auto',
-            border: doorColor.color === '#624100' && '5px solid #4C12A1'
-          }
-        }), "Brown"), /*#__PURE__*/React.createElement(S.ColorContentItem, null, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundImage: 'url("/assets/img/svg/color/wood2.jpg")',
-            cursor: 'auto',
-            border: doorColor.name === 'Wood' && '5px solid #4C12A1'
-          }
-        }), "Wood"), /*#__PURE__*/React.createElement(S.ColorContentItem, null, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundImage: 'url("/assets/img/svg/color/stone2.jpg")',
-            cursor: 'auto',
-            border: doorColor.name === 'Stone' && '5px solid #4C12A1'
-          }
-        }), "Stone")), /*#__PURE__*/React.createElement("span", {
-          style: {
-            fontSize: 20,
-            fontWeight: 'bold',
-            marginTop: 30
-          }
-        }, "Installation"), /*#__PURE__*/React.createElement(S.ContentWrapper1, null, this.props.categoryData.data.doorStyles.items.map(function (item) {
-          return /*#__PURE__*/React.createElement(S.DoorStyleContentItem, {
-            onClick: function onClick() {
-              return _this2.setState({
-                installation: item.name
-              });
-            }
-          }, /*#__PURE__*/React.createElement(S.DoorStyleContentImage, {
-            src: item.thumbnail,
-            style: {
-              backgroundColor: installation === item.name && 'rgb(217, 232, 255)'
-            }
-          }), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-            id: "check",
-            src: "/assets/img/svg/firstsetting/check-normal.svg"
-          }), installation === item.name && /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-            src: "/assets/img/svg/firstsetting/check-active.svg"
-          }), item.name);
-        })))
-      }, {
-        index: 4,
-        title: 'STYLE',
-        description: 'Select from the door collection for all cabinets.',
-        content: /*#__PURE__*/React.createElement(S.ContentWrapper, null, /*#__PURE__*/React.createElement("span", {
-          style: {
-            fontSize: 20,
-            fontWeight: 'bold'
-          }
-        }, installation), /*#__PURE__*/React.createElement(S.ContentWrapper1, null, installation && this.props.categoryData.data.doorStyles.items.filter(function (item) {
-          return item.name === installation;
-        })[0].items.map(function (element) {
-          return /*#__PURE__*/React.createElement(S.DoorStyleContentItem, {
-            onClick: function onClick() {
-              return _this2.setState({
-                doorCategory: {
-                  name: element.name,
-                  url: element.thumbnail
-                }
-              });
-            }
-          }, /*#__PURE__*/React.createElement(S.DoorCategoryContentImage, {
-            style: {
-              backgroundColor: doorCategory.name === element.name && 'rgb(217, 232, 255)',
-              height: doorCategory.name === element.name && 150,
-              margin: doorCategory.name === element.name && 'unset',
-              padding: doorCategory.name === element.name && 30
-            },
-            src: element.thumbnail
-          }), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-            id: "check",
-            src: "/assets/img/svg/firstsetting/check-normal.svg"
-          }), doorCategory.name === element.name && /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-            src: "/assets/img/svg/firstsetting/check-active.svg"
-          }), element.name);
-        })))
-      }, {
-        index: 5,
-        title: 'FINISH',
-        description: 'Select from the door collection for all cabinets.',
-        content: /*#__PURE__*/React.createElement(S.ContentWrapper, null, /*#__PURE__*/React.createElement("span", {
-          style: {
-            fontSize: 20,
-            fontWeight: 'bold'
-          }
-        }, installation, "/", doorCategory.name), /*#__PURE__*/React.createElement(S.DoorStyleWrapper, null, doorCategory.name && this.props.categoryData.data.doorStyles.items.filter(function (item) {
-          return item.name === installation;
-        })[0].items.filter(function (item1) {
-          return item1.name === doorCategory.name;
-        })[0].items.map(function (element) {
-          if (doorColor.color) {
-            return element.color === doorColor.color && /*#__PURE__*/React.createElement(S.DoorStyleContentItem, {
-              onClick: function onClick() {
-                return _this2.setState({
-                  doorStyle: element
-                });
-              }
-            }, /*#__PURE__*/React.createElement(S.DoorCategoryContentImage, {
-              src: element.thumbnail,
-              style: {
-                padding: doorStyle.name === element.name ? '10px 40px' : '0px 40px',
-                backgroundColor: doorStyle.name === element.name && 'rgb(217, 232, 255)',
-                height: doorStyle.name === element.name && 150,
-                margin: doorStyle.name === element.name && 'unset'
-              }
-            }), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-              id: "check",
-              src: "/assets/img/svg/firstsetting/check-normal.svg"
-            }), doorStyle.name === element.name && /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-              src: "/assets/img/svg/firstsetting/check-active.svg"
-            }), element.name);
-          } else {
-            return /*#__PURE__*/React.createElement(S.DoorStyleContentItem, {
-              style: {
-                width: '15.7%'
-              },
-              onClick: function onClick() {
-                return _this2.setState({
-                  doorStyle: element
-                });
-              }
-            }, /*#__PURE__*/React.createElement(S.DoorCategoryContentImage, {
-              src: element.thumbnail,
-              style: {
-                padding: doorStyle.name === element.name ? '10px 40px' : '0px 40px',
-                backgroundColor: doorStyle.name === element.name && 'rgb(217, 232, 255)',
-                height: doorStyle.name === element.name && 150,
-                margin: doorStyle.name === element.name && 'unset'
-              }
-            }), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-              id: "check",
-              src: "/assets/img/svg/firstsetting/check-normal.svg"
-            }), doorStyle.name === element.name && /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-              src: "/assets/img/svg/firstsetting/check-active.svg"
-            }), element.name);
-          }
-        })))
-      }, {
-        index: 6,
-        description: 'Select from the door collection for all cabinets.',
-        content: /*#__PURE__*/React.createElement(S.ContentWrapper, null, /*#__PURE__*/React.createElement("span", {
-          style: {
-            fontSize: 20,
-            fontWeight: 'bold',
-            marginBottom: '15px'
-          }
-        }, "Room Shape"), /*#__PURE__*/React.createElement(S.ContentWrapper1, null, roomShapeData.filter(function (element) {
-          return element.type === roomShape.name;
-        }).map(function (item) {
-          return /*#__PURE__*/React.createElement(S.ContentItem, null, /*#__PURE__*/React.createElement(S.RoomContentImage, {
-            src: item.url,
-            style: {
-              backgroundColor: 'rgb(217, 232, 255)'
-            }
-          }), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-            src: "/assets/img/svg/firstsetting/check-active.svg"
-          }), item.name);
-        }), roomShape.name === 'custom' && /*#__PURE__*/React.createElement(S.ContentItem, null, /*#__PURE__*/React.createElement(S.RoomContentImage, {
-          src: "/assets/img/svg/firstsetting/Square.svg",
-          style: {
-            backgroundColor: 'rgb(217, 232, 255)'
-          }
-        }), /*#__PURE__*/React.createElement("img", {
-          src: "/assets/img/svg/firstsetting/pencil.svg",
-          style: {
-            position: 'absolute',
-            top: 10,
-            right: 10,
-            height: 35
-          }
-        }), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-          src: "/assets/img/svg/firstsetting/check-active.svg"
-        }), "Custom")), /*#__PURE__*/React.createElement(S.ContentWrapper1, null, doorColor.name && /*#__PURE__*/React.createElement(S.ContentWrapper2, null, /*#__PURE__*/React.createElement("span", {
-          style: {
-            fontSize: 20,
-            fontWeight: 'bold',
-            marginBottom: '25px'
-          }
-        }, "Color"), /*#__PURE__*/React.createElement(S.ColorContentItem, null, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          style: {
-            backgroundColor: doorColor.color,
-            backgroundImage: "url(".concat(doorColor.url, ")"),
-            border: '5px solid #4C12A1'
-          }
-        }), doorColor.name)), installation && doorCategory.name && /*#__PURE__*/React.createElement(S.ContentWrapper2, null, /*#__PURE__*/React.createElement("span", {
-          style: {
-            fontSize: 20,
-            fontWeight: 'bold',
-            marginBottom: '25px'
-          }
-        }, installation), /*#__PURE__*/React.createElement(S.DoorStyleContentItem, null, /*#__PURE__*/React.createElement(S.DoorCategoryContentImageWrapper, {
-          style: {
-            backgroundColor: 'rgb(217, 232, 255'
-          }
-        }, /*#__PURE__*/React.createElement(S.DoorCategoryContentImage, {
-          src: doorCategory.url
-        })), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-          src: "/assets/img/svg/firstsetting/check-active.svg"
-        }), doorCategory.name)), installation && doorCategory.name && doorStyle.name && /*#__PURE__*/React.createElement(S.ContentWrapper2, null, /*#__PURE__*/React.createElement("span", {
-          style: {
-            fontSize: 20,
-            fontWeight: 'bold',
-            marginBottom: '25px'
-          }
-        }, "Finish"), /*#__PURE__*/React.createElement(S.DoorStyleContentItem, null, /*#__PURE__*/React.createElement(S.DoorCategoryContentImage, {
-          src: doorStyle.thumbnail,
-          style: {
-            padding: '10px 40px',
-            backgroundColor: 'rgb(217, 232, 255)',
-            height: 150,
-            margin: 'unset'
-          }
-        }), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-          src: "/assets/img/svg/firstsetting/check-active.svg"
-        }), doorStyle.name))))
-      }];
-      return /*#__PURE__*/React.createElement(S.FirstSettingWrapper, null, /*#__PURE__*/React.createElement(S.TitleBarWrapper, null, /*#__PURE__*/React.createElement(S.TitleBar, null, step === 1 ? 'Choose your room shape' : step === 6 ? 'Summary' : 'Choose your door style'), /*#__PURE__*/React.createElement(S.TitleBarButtonWrapper, null, /*#__PURE__*/React.createElement(S.TitleBarButton, {
-        style: {
-          border: 'none'
-        },
-        onClick: function onClick() {
-          step > 1 && _this2.setState({
-            step: step - 1
-          });
-          switch (step) {
-            case 6:
-              _this2.setState({
-                doorStyle: ''
-              });
-              break;
-            case 5:
-              _this2.setState({
-                doorCategory: {
-                  name: '',
-                  url: ''
-                },
-                doorStyle: ''
-              });
-              break;
-            case 4:
-              _this2.setState({
-                installation: '',
-                doorCategory: {
-                  name: '',
-                  url: ''
-                }
-              });
-              break;
-            case 3:
-              _this2.setState({
-                installation: ''
-              });
-              break;
-            case 2:
-              _this2.setState({
-                doorColor: {
-                  name: '',
-                  url: '',
-                  color: ''
-                }
-              });
-            default:
-              break;
-          }
-        }
-      }, "Cancel"), /*#__PURE__*/React.createElement(S.TitleBarButton, {
-        style: {
-          backgroundColor: 'rgb(0,185,185)'
-        },
-        onClick: function onClick() {
-          step < 6 ? _this2.setState({
-            step: step + 1
-          }) : _this2._confirm();
-        }
-      }, /*#__PURE__*/React.createElement("img", {
-        height: "25px",
-        src: "/assets/img/svg/headerbar/check.svg"
-      }), step > 5 ? 'Confirm' : 'OK'))), /*#__PURE__*/React.createElement(S.StepBarWrapper, null, stepBar.map(function (element) {
-        switch (element.index) {
-          case 1:
-            return /*#__PURE__*/React.createElement(S.StepBullet, null, /*#__PURE__*/React.createElement(S.StepBulletLabel, null, element.title), /*#__PURE__*/React.createElement(S.StepBulletIcon, {
-              src: step === element.index ? '/assets/img/svg/firstsetting/bullet-current.svg' : '/assets/img/svg/firstsetting/bullet-done.svg'
-            }));
-          case 6:
-            return null;
-          default:
-            return /*#__PURE__*/React.createElement(S.StepBullet, null, /*#__PURE__*/React.createElement(S.StepBarIcon, {
-              src: step >= element.index - 1 ? '/assets/img/svg/firstsetting/bar-active.svg' : '/assets/img/svg/firstsetting/bar-normal.svg'
-            }), /*#__PURE__*/React.createElement(S.StepBulletLabel, null, element.title), /*#__PURE__*/React.createElement(S.StepBulletIcon, {
-              src: step === element.index ? '/assets/img/svg/firstsetting/bullet-current.svg' : step > element.index ? '/assets/img/svg/firstsetting/bullet-done.svg' : '/assets/img/svg/firstsetting/bullet-not-done.svg'
-            }));
-        }
-      })), /*#__PURE__*/React.createElement("div", null, stepBar[step - 1].description, /*#__PURE__*/React.createElement("br", null), "To get professional help, click on the", ' ', /*#__PURE__*/React.createElement("strong", null, "Designer Assistance"), " button."), stepBar[step - 1].content);
-    }
-  }]);
-}(Component);
-export { FirstSetting as default };
-FirstSetting.propTypes = {
-  state: PropTypes.object.isRequired,
-  content: PropTypes.number.isRequired
-};
-FirstSetting.contextTypes = {
-  projectActions: PropTypes.object.isRequired,
-  viewer2DActions: PropTypes.object.isRequired,
-  viewer3DActions: PropTypes.object.isRequired,
-  linesActions: PropTypes.object.isRequired,
-  itemsActions: PropTypes.object.isRequired,
-  catalog: PropTypes.object.isRequired
-};
-//# sourceMappingURL=firstsetting.js.map