kitchen-simulator 1.1.1-test.75 → 1.1.1-test.77

package/lib/KitchenConfigurator.js

@@ -1,7 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,6 +9,7 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -19,38 +20,68 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _axios = _interopRequireDefault(require("axios"));
 var _convertUnitsLite = require("./utils/convert-units-lite");
-var _export = require("./plugins/export");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactHotjar = require("react-hotjar");
 var _reactRedux = require("react-redux");
 var _redux = require("redux");
-var constants = _interopRequireWildcard(require("./constants"));
+var _Snackbar = _interopRequireDefault(require("./components/atoms/Snackbar"));
+var _autosaveprompt = _interopRequireDefault(require("./components/toolbar/popup/autosaveprompt"));
+var _downloadsummary = _interopRequireDefault(require("./components/toolbar/popup/downloadsummary"));
+var _newproject = _interopRequireDefault(require("./components/toolbar/popup/newproject"));
+var _savedesign = _interopRequireDefault(require("./components/toolbar/popup/savedesign"));
+var _submitforquote = _interopRequireDefault(require("./components/toolbar/popup/submitforquote"));
+var _constants = _interopRequireWildcard(require("./constants"));
+var constants = _constants;
+var _lodash = _interopRequireDefault(require("lodash"));
 var _helper = require("./utils/helper");
-var _export2 = _interopRequireDefault(require("./actions/export"));
+var _utils = require("./components/viewer2d/utils");
+var _export = _interopRequireDefault(require("./actions/export"));
 var _catalog = _interopRequireDefault(require("./catalog/catalog"));
+var _export2 = require("./class/export");
 var _export3 = require("./components/export");
+var _jwtService = _interopRequireDefault(require("./components/login/jwtService"));
+var _index = _interopRequireDefault(require("./components/toolbar/popup/submitprompt/index"));
+require("./styles/export");
 var _translator = _interopRequireDefault(require("./translator/translator"));
 var _objectsUtils = require("./utils/objects-utils");
 var _version = require("./version");
+var _localstorageSlim = _interopRequireDefault(require("localstorage-slim"));
+var _ga = require("./analytics/ga4");
+var _summarizeCart = require("./utils/summarizeCart");
+var _posthog = require("./analytics/posthog");
 var _excluded = ["width", "height", "state", "stateExtractor"];
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t4 in e) "default" !== _t4 && {}.hasOwnProperty.call(e, _t4) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t4)) && (i.get || i.set) ? o(f, _t4, i) : f[_t4] = e[_t4]); return f; })(e, t); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 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) { (0, _defineProperty2["default"])(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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var Header = _export3.HeaderComponents.Header;
+var Toolbar = _export3.ToolbarComponents.Toolbar;
+var FooterBar = _export3.FooterBarComponents.FooterBar;
+var WizardStep = _export3.WizardStepComponents.WizardStep;
+var Sign = _export3.SignComponents.Sign;
+var MyProjects = _export3.MyProjectsComonents.MyProjects;
 var toolbarW = 0;
 var wrapperStyle = {
   display: 'flex',
   flexFlow: 'row nowrap'
 };
+var saveAlert = '';
 var KitchenConfigurator = /*#__PURE__*/function (_Component) {
   function KitchenConfigurator(props) {
-    var _utmRequestData2, _utmRequestData3, _utmRequestData4, _utmRequestData5, _utmRequestData6, _utmRequestData7, _utmRequestData8, _utmRequestData9, _utmRequestData0;
+    var _this$props$match, _this$props$match2, _this$props$match3, _utmRequestData2, _utmRequestData3, _utmRequestData4, _utmRequestData5, _utmRequestData6, _utmRequestData7, _utmRequestData8, _utmRequestData9, _utmRequestData0;
     var _this;
     (0, _classCallCheck2["default"])(this, KitchenConfigurator);
     _this = _callSuper(this, KitchenConfigurator, [props]);
-
-    // utm tracking
+    (0, _defineProperty2["default"])(_this, "debouncedSetIsSaved", _lodash["default"].debounce(function () {
+      return _this.setState({
+        isSaved: false
+      });
+    }, 200));
     (0, _defineProperty2["default"])(_this, "handleBeforeUnload", function (e) {
       var areas = _this.props.stateExtractor(_this.props.state).getIn(['scene', 'layers', _this.props.stateExtractor(_this.props.state).scene.selectedLayer, 'areas']);
       if (!_this.state.isSaved && areas.size > 0) {
@@ -96,7 +127,6 @@ var KitchenConfigurator = /*#__PURE__*/function (_Component) {
       myProjectsOpen: false,
       myProjectsToLogin: false,
       downloadPopupVisible: false,
-      // For Toolbar Item
       toolbar: '',
       reviewQuotePopupOpened: false,
       floorOpened: false,
@@ -104,18 +134,16 @@ var KitchenConfigurator = /*#__PURE__*/function (_Component) {
       applianceOpened: false,
       finishingOpened: false,
       doorStyleOpen: false,
-      wizardStepOpend: false,
+      wizardStepOpend: ((_this$props$match = _this.props.match) === null || _this$props$match === void 0 || (_this$props$match = _this$props$match.params) === null || _this$props$match === void 0 ? void 0 : _this$props$match.pid) === undefined || ((_this$props$match2 = _this.props.match) === null || _this$props$match2 === void 0 || (_this$props$match2 = _this$props$match2.params) === null || _this$props$match2 === void 0 ? void 0 : _this$props$match2.pid) === 'null' ? true : false,
       tutorialMouseEventsAdd: false,
       replaceCabinetFlag: false,
       isSnackBarOpen: false,
       isSnackBar1Open: false,
       redirectURL: '',
       snackBarMessage: '',
-      isSaved: false,
+      isSaved: !!((_this$props$match3 = _this.props.match) !== null && _this$props$match3 !== void 0 && (_this$props$match3 = _this$props$match3.params) !== null && _this$props$match3 !== void 0 && _this$props$match3.token),
       isLeaving: false
     };
-
-    // For UTM tracking
     _this.utm = {
       utm_source: ((_utmRequestData2 = utmRequestData) === null || _utmRequestData2 === void 0 ? void 0 : _utmRequestData2.source) || 'source',
       utm_medium: ((_utmRequestData3 = utmRequestData) === null || _utmRequestData3 === void 0 ? void 0 : _utmRequestData3.medium) || 'medium',
@@ -127,6 +155,7 @@ var KitchenConfigurator = /*#__PURE__*/function (_Component) {
       fbclid: ((_utmRequestData9 = utmRequestData) === null || _utmRequestData9 === void 0 ? void 0 : _utmRequestData9.fbclid) || 'fbclid',
       ttclid: ((_utmRequestData0 = utmRequestData) === null || _utmRequestData0 === void 0 ? void 0 : _utmRequestData0.ttclid) || 'ttclid'
     };
+    _this.jwtCheck();
     _this.openFloor = _this.openFloor.bind(_this);
     _this.openCabinet = _this.openCabinet.bind(_this);
     _this.openFinishing = _this.openFinishing.bind(_this);
@@ -148,8 +177,6 @@ var KitchenConfigurator = /*#__PURE__*/function (_Component) {
     _this.setShowProperty = _this.setShowProperty.bind(_this);
     return _this;
   }
-
-  // Toolbar control functions
   (0, _inherits2["default"])(KitchenConfigurator, _Component);
   return (0, _createClass2["default"])(KitchenConfigurator, [{
     key: "setToolbar",
@@ -329,12 +356,42 @@ var KitchenConfigurator = /*#__PURE__*/function (_Component) {
       this.setState({});
       document.getElementById('review_quote_inactive').parentElement.parentElement.style.zIndex = 6;
     }
+  }, {
+    key: "jwtCheck",
+    value: function jwtCheck() {
+      var _this2 = this;
+      _jwtService["default"].on('onAutoLogin', function () {
+        /**
+         * Sign in and retrieve user data from Api
+         */
+        _jwtService["default"].signInWithToken().then(function (user) {
+          //this.props.userActions.setUserData(user);
+          _this2.props.userActions.login(user.id, user.role, _jwtService["default"].getAccessToken(), _this2.utm);
+          //this.props.showMessage(option)
+          //this.props.showMessage({message: 'Logged in with token data',  variant: 'success'});
+          //alert('Logged in with token data');
+        })["catch"](function (error) {
+          //this.props.showMessage({message: error});
+          _this2.setState({
+            isSnackBarOpen: true,
+            snackBarMessage: error
+          });
+        });
+      });
+      _jwtService["default"].on('onAutoLogout', function (message) {
+        if (message) {
+          //this.props.showMessage({message, variant: 'error'});
+        }
+        _this2.props.userActions.logout();
+      });
+      _jwtService["default"].init();
+    }
   }, {
     key: "getChildContext",
     value: function getChildContext() {
-      var _this2 = this;
-      return _objectSpread(_objectSpread({}, (0, _objectsUtils.objectsMap)(_export2["default"], function (actionNamespace) {
-        return _this2.props[actionNamespace];
+      var _this3 = this;
+      return _objectSpread(_objectSpread({}, (0, _objectsUtils.objectsMap)(_export["default"], function (actionNamespace) {
+        return _this3.props[actionNamespace];
       })), {}, {
         translator: this.props.translator,
         catalog: this.props.catalog
@@ -350,12 +407,102 @@ var KitchenConfigurator = /*#__PURE__*/function (_Component) {
       var projectData = JSON.stringify(extractedState.get('scene').toJS());
       sessionStorage.setItem(window.location.href, projectData);
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      // Only strip properties if the object is not null/undefined
+      function stripProperty(obj, properties) {
+        if (!obj) return obj;
+        var changed = false;
+        var newObj = _objectSpread({}, obj);
+        var _iterator = _createForOfIteratorHelper(properties),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var prop = _step.value;
+            if (prop in newObj) {
+              delete newObj[prop];
+              changed = true;
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+        return changed ? newObj : obj;
+      }
+      var prevState = this.props.stateExtractor(prevProps.state);
+      var currState = this.props.stateExtractor(this.props.state);
+
+      // Only convert to JS once per items/areas/lines
+      var prevLayer = prevState.scene.selectedLayer;
+      var currLayer = currState.scene.selectedLayer;
+      var prevItems = prevState.getIn(['scene', 'layers', prevLayer, 'items']).toJS();
+      var currItems = currState.getIn(['scene', 'layers', currLayer, 'items']).toJS();
+      var prevItemsProps = Object.values(prevItems).map(function (_ref) {
+        var x = _ref.x,
+          y = _ref.y,
+          rotation = _ref.rotation;
+        return {
+          x: x,
+          y: y,
+          rotation: rotation
+        };
+      });
+      var currItemsProps = Object.values(currItems).map(function (_ref2) {
+        var x = _ref2.x,
+          y = _ref2.y,
+          rotation = _ref2.rotation;
+        return {
+          x: x,
+          y: y,
+          rotation: rotation
+        };
+      });
+      var prevDoorStyleRaw = prevState.getIn(['scene', 'layers', prevLayer, 'doorStyle']);
+      var currDoorStyleRaw = currState.getIn(['scene', 'layers', currLayer, 'doorStyle']);
+      var prevDoorStyle = stripProperty(prevDoorStyleRaw, ['doorStyles']);
+      var currDoorStyle = stripProperty(currDoorStyleRaw, ['doorStyles']);
+      var prevAreasRaw = prevState.getIn(['scene', 'layers', prevLayer, 'areas']).toJS();
+      var currAreasRaw = currState.getIn(['scene', 'layers', currLayer, 'areas']).toJS();
+      var prevAreas = stripProperty(Object.values(prevAreasRaw)[0], ['selected']);
+      var currAreas = stripProperty(Object.values(currAreasRaw)[0], ['selected']);
+      var prevLinesRaw = prevState.getIn(['scene', 'layers', prevLayer, 'lines']).toJS();
+      var currLinesRaw = currState.getIn(['scene', 'layers', currLayer, 'lines']).toJS();
+      var prevLines = stripProperty(Object.values(prevLinesRaw)[0], ['selected']);
+      var currLines = stripProperty(Object.values(currLinesRaw)[0], ['selected']);
+      var prevCeilingHeight = prevState.getIn(['scene', 'layers', prevLayer, 'ceilHeight']);
+      var currCeilingHeight = currState.getIn(['scene', 'layers', currLayer, 'ceilHeight']);
+      var changed = !_lodash["default"].isEqual(prevItemsProps, currItemsProps) || !_lodash["default"].isEqual(prevDoorStyle, currDoorStyle) || !_lodash["default"].isEqual(prevAreas, currAreas) || !_lodash["default"].isEqual(prevLines, currLines) || prevCeilingHeight !== currCeilingHeight;
+      if (changed) {
+        this.debouncedSetIsSaved();
+        var currentItemsLength = Object.keys(currItems).length;
+        var prevItemsLength = Object.keys(prevItems).length;
+        // make sure prompt appears only when adding cabinets
+        var allowedItemLengths = [5, 10, 15];
+        if (prevItemsLength === currentItemsLength - 1 && currentItemsLength === 1) {
+          _ga.GA.events.cabinetPlaced();
+        }
+        if (allowedItemLengths.includes(currentItemsLength) && prevItemsLength === currentItemsLength - 1 && !this.props.match.params.token) {
+          this.setState({
+            savePromptVisible: true
+          });
+        }
+      }
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this3 = this;
+      var _this4 = this;
+      var cross = _ga.GA.deriveCrossAuthFromUrl(window.location.search);
+      var entry = _ga.GA.deriveProjectEntry();
+      _ga.GA.bootSessionContext({
+        projectEntry: entry,
+        crossAuth: cross
+      });
+      _reactHotjar.hotjar.event && _reactHotjar.hotjar.event("pageview:".concat((0, _helper.getPath)()));
       window.addEventListener('beforeunload', this.handleBeforeUnload);
-      console.log('context =>', this.context);
       window.forRedo = [];
       var store = this.context.store;
       var _this$props2 = this.props,
@@ -373,7 +520,7 @@ var KitchenConfigurator = /*#__PURE__*/function (_Component) {
         return;
       }
       if (match && match.params.pid === undefined) {
-        var newplugins = [].concat((0, _toConsumableArray2["default"])(plugins), [(0, _export.Autosave)('KitchenConfigurator_v0', false)]);
+        var newplugins = (0, _toConsumableArray2["default"])(plugins);
         newplugins.forEach(function (newplugin) {
           return newplugin(store, stateExtractor);
         });
@@ -402,7 +549,7 @@ var KitchenConfigurator = /*#__PURE__*/function (_Component) {
             pid: match.params.pid,
             visualizerName: sessionStorage.getItem('visualizerName')
           }).then(/*#__PURE__*/function () {
-            var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(response) {
+            var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(response) {
               var projectElement, jsonData, _t;
               return _regenerator["default"].wrap(function (_context) {
                 while (1) switch (_context.prev = _context.next) {
@@ -441,13 +588,13 @@ var KitchenConfigurator = /*#__PURE__*/function (_Component) {
                   case 4:
                     _context.prev = 4;
                     _t = _context["catch"](2);
-                    _this3.setState({
+                    _this4.setState({
                       isSnackBarOpen: true,
                       snackBarMessage: _t
                     });
                   case 5:
                     jsonData.isLoadingCabinet = false;
-                    projectActions.loadProject(jsonData, _this3.props.categoryData);
+                    projectActions.loadProject(jsonData, _this4.props.categoryData);
                   case 6:
                   case "end":
                     return _context.stop();
@@ -455,7 +602,7 @@ var KitchenConfigurator = /*#__PURE__*/function (_Component) {
               }, _callee, null, [[2, 4]]);
             }));
             return function (_x) {
-              return _ref.apply(this, arguments);
+              return _ref3.apply(this, arguments);
             };
           }());
         }
@@ -495,33 +642,159 @@ var KitchenConfigurator = /*#__PURE__*/function (_Component) {
       return layer.areas.size + layer.lines.size + layer.holes.size + layer.items.size === 0;
     }
   }, {
-    key: "render",
-    value: function render() {
+    key: "handleSaveDesign",
+    value: function handleSaveDesign(value) {
       var _this$props3 = this.props,
-        width = _this$props3.width,
-        height = _this$props3.height,
-        state = _this$props3.state,
         stateExtractor = _this$props3.stateExtractor,
-        props = (0, _objectWithoutProperties2["default"])(_this$props3, _excluded);
+        state = _this$props3.state;
+      var plannerState = stateExtractor(state);
+      var items = plannerState.getIn(['scene', 'layers', 'layer-1', 'items']);
+      var areas = plannerState.getIn(['scene', 'layers', 'layer-1', 'areas']);
+      if (areas.size === 0) {
+        this.setState({
+          isSnackBarOpen: true,
+          snackBarMessage: 'Your project is empty.'
+        });
+        return;
+      }
+      // if (items.size === 0) {
+      //   saveAlert = <StyledAlert text={<span style={{fontSize: 16, fontFamily: DEFAULT_FONT_FAMILY}}>Add at least one item</span>} onClose={() => saveAlert = ""} />
+      //   return;
+      // } else saveAlert = '';
+      this.setState({
+        reviewQuotePopupOpened: false
+      });
+      this.setState({
+        savePopupVisible: value
+      });
+      this.setState({
+        assistPopupVisible: false
+      });
+      this.setState({
+        newProjectPopupVisible: false
+      });
+      this.setState({
+        savePromptVisible: false
+      });
+      this.setState({
+        submitPromptVisible: false
+      });
+    }
+  }, {
+    key: "handleNewProject",
+    value: function handleNewProject(value) {
+      this.setState({
+        reviewQuotePopupOpened: false
+      });
+      this.setState({
+        savePopupVisible: false
+      });
+      this.setState({
+        quotePopupVisible: false
+      });
+      this.setState({
+        assistPopupVisible: false
+      });
+      this.setState({
+        newProjectPopupVisible: value
+      });
+    }
+  }, {
+    key: "handleSubmitForQuote",
+    value: function handleSubmitForQuote(isVisible) {
+      var submitType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : constants.SUBMIT_REQUEST_ASSIST;
+      var items = this.props.stateExtractor(this.props.state).getIn(['scene', 'layers', this.props.stateExtractor(this.props.state).scene.selectedLayer, 'items']);
+      if (submitType === constants.SUBMIT_ADD_CART) {
+        this.setToolbar('reviewforquote');
+      }
+      if (submitType === constants.SUBMIT_ADD_CART && !items.size) {
+        this.setState({
+          isSnackBarOpen: true,
+          snackBarMessage: 'Your project is empty. Please add at least one item.'
+        });
+      } else {
+        this.setState({
+          reviewQuotePopupOpened: false
+        });
+        this.setState({
+          savePopupVisible: false
+        });
+        this.setState({
+          quotePopupVisible: isVisible
+        });
+        this.setState({
+          submitTosave: false
+        });
+        this.setState({
+          assistPopupVisible: false
+        });
+        this.setState({
+          newProjectPopupVisible: false
+        });
+        this.setState({
+          stateSubmitType: submitType
+        });
+      }
+    }
+  }, {
+    key: "findDelkeys",
+    value: function findDelkeys(obj, deleteKeys, path) {
+      if ((0, _typeof2["default"])(obj) === 'object') {
+        var allkeys = Object.keys(obj);
+        for (var i = 0; i < allkeys.length; i++) {
+          var value = obj[allkeys[i]];
+          if ((0, _utils.isEmpty)(value)) {
+            deleteKeys.push({
+              path: path,
+              key: allkeys[i]
+            });
+          } else if ((0, _typeof2["default"])(value) === 'object') {
+            var newPath = path + allkeys[i] + ',';
+            this.findDelkeys(value, deleteKeys, newPath);
+          }
+        }
+      } else if ((0, _utils.isEmpty)(obj)) {
+        var tmpkey = path.split(',');
+        deleteKeys.push({
+          path: path,
+          key: tmpkey[tmpkey.length - 1]
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this5 = this;
+      var _this$props4 = this.props,
+        width = _this$props4.width,
+        height = _this$props4.height,
+        state = _this$props4.state,
+        stateExtractor = _this$props4.stateExtractor,
+        props = (0, _objectWithoutProperties2["default"])(_this$props4, _excluded);
       var _this$state = this.state,
         savePopupVisible = _this$state.savePopupVisible,
         quotePopupVisible = _this$state.quotePopupVisible,
         assistPopupVisible = _this$state.assistPopupVisible,
+        newProjectPopupVisible = _this$state.newProjectPopupVisible,
+        savePromptVisible = _this$state.savePromptVisible,
+        isLeaving = _this$state.isLeaving,
+        submitPromptVisible = _this$state.submitPromptVisible,
+        stateSubmitType = _this$state.stateSubmitType,
+        submitTosave = _this$state.submitTosave,
         signOpen = _this$state.signOpen,
-        myProjectsOpen = _this$state.myProjectsOpen;
+        myProjectsOpen = _this$state.myProjectsOpen,
+        myProjectsToLogin = _this$state.myProjectsToLogin,
+        downloadPopupVisible = _this$state.downloadPopupVisible;
       var contentW = width - toolbarW;
       var categoryData = this.props.categoryData;
-      // console.log(categoryData);
-      // let contentW = width - toolbarW - sidebarW;
-      // let toolbarH = height - footerBarH;
-      // let contentH = height - footerBarH;
-      // let sidebarH = height - footerBarH;
       var toolbarH = height;
       var contentH = height;
       var sidebarH = height;
       var headerW = width;
       var headerH = 60;
+      var userInfo = this.props.match ? this.props.match.params : [];
       var extractedState = stateExtractor(state);
+      //console.log('KC state - mode: ', extractedState.mode);
       var doorStyle = extractedState.get('doorStyle');
       if (extractedState.getIn(['scene', 'layers', extractedState.scene.selectedLayer, 'doorStyle']) !== undefined && extractedState.getIn(['scene', 'layers', extractedState.scene.selectedLayer, 'doorStyle']) !== null) {
         var extractedStateData = extractedState.getIn(['scene', 'layers', extractedState.scene.selectedLayer, 'doorStyle']);
@@ -532,12 +805,7 @@ var KitchenConfigurator = /*#__PURE__*/function (_Component) {
               var item = style.items.find(function (it) {
                 return it.id === extractedStateData.id;
               });
-              if (item) {
-                colorItem = item;
-                return true;
-              } else {
-                return false;
-              }
+              return !!item;
             });
           });
         }
@@ -567,13 +835,437 @@ var KitchenConfigurator = /*#__PURE__*/function (_Component) {
       extractedState = extractedState.merge({
         viewer2D: _viewer2D
       });
-      return /*#__PURE__*/_react["default"].createElement("section", null, /*#__PURE__*/_react["default"].createElement("div", {
+      var history = this.props.history;
+      var handleContinueQuote = function handleContinueQuote() {
+        _this5.setToolbar('reviewforquote');
+        _this5.setState({
+          savePopupVisible: false,
+          quotePopupVisible: true
+        });
+      };
+      var newProject = function newProject() {
+        _this5.props.projectActions.newProject();
+        sessionStorage.setItem('projectTitle', 'Untitled');
+        _this5.props.projectActions.rename('Untitled');
+        sessionStorage.removeItem('projectId');
+        sessionStorage.removeItem('usedObjects');
+        var visualizerName = sessionStorage.getItem('visualizerName');
+        var originalAccessToken = _localstorageSlim["default"].get(_constants.LOCAL_STORAGE_ORIGINAL_TOKEN);
+        var tokenName = _localstorageSlim["default"].get(_constants.LOCAL_STORAGE_TOKEN_NAME);
+        var pathname = "/".concat(visualizerName);
+        if (tokenName && originalAccessToken) {
+          pathname += "?".concat(tokenName).concat(originalAccessToken);
+        }
+        history.push({
+          pathname: pathname
+        });
+        _this5.setState({
+          wizardStepOpend: false
+        });
+      };
+
+      /**
+       * @description Save Projects
+       * @param {{email,firstName,lastName,notes,projectName}} param Project information to save
+       */
+      var saveProject = /*#__PURE__*/function () {
+        var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(param) {
+          var _state2, _state3;
+          var rlt, title, projectId, projectTitle, utm, state, _state, scene, itemData, newScene, deleteKeys, i, tmp, deletePath, j, projectData, object_count, originalAccessToken, tokenName, response, _response$data, success, message, userData, access_token, insertId, currentProjectID, _t2;
+          return _regenerator["default"].wrap(function (_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                rlt = {
+                  success: false
+                }; // Get storage info
+                title = sessionStorage.getItem('projectTitle');
+                projectId = sessionStorage.getItem('projectId');
+                projectTitle = param && param.projectName || title || "Project-".concat(new Date().toLocaleString());
+                utm = _this5.utm; // State
+                state = _export2.Project.unselectAll(extractedState).updatedState;
+                _state = state, scene = _state.scene;
+                state = state.merge({
+                  scene: scene.merge({
+                    title: projectTitle
+                  })
+                });
+
+                // Set storage info
+                sessionStorage.setItem('projectTitle', projectTitle);
+                props.projectActions.rename(projectTitle);
+
+                // Filter cds
+                itemData = state.getIn(['scene', 'layers', state.get('scene').toJS().selectedLayer, 'items']).toArray();
+                itemData.forEach(function (it) {
+                  var _item$doorStyle;
+                  var item = it.toJS();
+                  var doorStyles = item === null || item === void 0 || (_item$doorStyle = item.doorStyle) === null || _item$doorStyle === void 0 ? void 0 : _item$doorStyle.doorStyles;
+
+                  // Skip if no doorStyles data at all
+                  if (!doorStyles) return;
+                  var newCDSdata = Array.isArray(doorStyles.cds) ? doorStyles.cds.filter(function (it1) {
+                    return it1.cabinet_door_style_id === doorStyles.cabinet_door_style_id;
+                  }) : [];
+                  var layerId = state.get('scene').toJS().selectedLayer;
+                  var basePath = ['scene', 'layers', layerId, 'items', it.id, 'doorStyle', 'doorStyles'];
+                  if (state.hasIn(basePath)) {
+                    state = state.setIn([].concat(basePath, ['cds']), newCDSdata);
+                  }
+                });
+
+                // Delete null values
+                newScene = state.getIn(['scene']);
+                deleteKeys = [];
+                _this5.findDelkeys(newScene.toJS(), deleteKeys, '');
+                for (i = 0; i < deleteKeys.length; i++) {
+                  tmp = newScene.toJS();
+                  deletePath = deleteKeys[i].path.split(',');
+                  for (j = 0; j < deletePath.length; j++) {
+                    if (!(0, _utils.isEmpty)(deletePath[j])) {
+                      tmp = tmp[deletePath[j]];
+                    }
+                  }
+                  if (deletePath.length >= 2) {
+                    delete tmp[deleteKeys[i].key];
+                    deletePath.pop();
+                    if (!(0, _utils.isEmpty)(newScene.getIn(deletePath))) newScene = newScene.setIn(deletePath, tmp);
+                  } else {
+                    newScene = newScene["delete"](deleteKeys[i].key);
+                  }
+                }
+                state = state.setIn(['scene'], newScene);
+
+                // Data to save
+                projectData = JSON.stringify(state.get('scene').toJS());
+                object_count = Object.keys(((_state2 = state) === null || _state2 === void 0 || (_state2 = _state2.scene) === null || _state2 === void 0 || (_state2 = _state2.layers) === null || _state2 === void 0 || (_state2 = _state2.get((_state3 = state) === null || _state3 === void 0 || (_state3 = _state3.scene) === null || _state3 === void 0 ? void 0 : _state3.selectedLayer)) === null || _state2 === void 0 ? void 0 : _state2.items) || {}).length;
+                _context2.prev = 1;
+                originalAccessToken = _localstorageSlim["default"].get(_constants.LOCAL_STORAGE_ORIGINAL_TOKEN);
+                tokenName = _localstorageSlim["default"].get(_constants.LOCAL_STORAGE_TOKEN_NAME);
+                _context2.next = 2;
+                return _axios["default"].post('/api/project/saveProject', _objectSpread(_objectSpread({
+                  pid: projectId,
+                  title: projectTitle,
+                  mode: _constants.MODE,
+                  access_token: userInfo.token ? userInfo.token : null,
+                  userrole: userInfo.role ? userInfo.role : null,
+                  saveData: _objectSpread(_objectSpread(_objectSpread({}, param), utm), {}, {
+                    projectData: projectData,
+                    object_count: object_count
+                  }),
+                  url: window.location.hostname,
+                  visualizerName: sessionStorage.getItem('visualizerName')
+                }, originalAccessToken ? {
+                  original_token: originalAccessToken
+                } : undefined), tokenName ? {
+                  query_params_token_prefix: tokenName
+                } : undefined));
+              case 2:
+                response = _context2.sent;
+                _response$data = response.data, success = _response$data.success, message = _response$data.message, userData = _response$data.userData, access_token = _response$data.access_token;
+                if (success === true) {
+                  rlt.success = true;
+                  insertId = response.data.execResult.insertId;
+                  currentProjectID = insertId !== 0 ? insertId : state.getIn(['scene', 'currentProjectID']); // Set storage data
+                  sessionStorage.setItem('projectId', currentProjectID);
+                  sessionStorage.setItem('email', param.email);
+                  sessionStorage.setItem('phone', param.phone);
+                  sessionStorage.setItem('firstName', param.firstName);
+                  sessionStorage.setItem('lastName', param.lastName);
+                  props.projectActions.setProjectID({
+                    currentProjectID: currentProjectID
+                  });
+                  _export["default"].userActions.login(userData[0].id, userData[0].role, access_token, utm);
+                  _this5.setState({
+                    toolbar: _this5.state.toolbar,
+                    isSaved: true,
+                    isSnackBarOpen: true,
+                    snackBarMessage: 'Your project has been saved. </br> You can now request <b>Designer Assistance</b> or <b>Add to Cart</b>'
+                  });
+                  _ga.GA.events.projectSaved(currentProjectID, 'manual');
+                  _posthog.PH.projectSaved(currentProjectID);
+                  if (_this5.state.submitTosave) {
+                    handleContinueQuote();
+                  }
+                } else {
+                  rlt.success = false;
+                  rlt.message = message;
+                  _this5.setState({
+                    isSnackBarOpen: true,
+                    snackBarMessage: "Failed to add project data: ".concat(message)
+                  });
+                }
+                _context2.next = 4;
+                break;
+              case 3:
+                _context2.prev = 3;
+                _t2 = _context2["catch"](1);
+                rlt.success = false;
+                console.error(_t2);
+                _this5.setState({
+                  isSnackBarOpen: true,
+                  snackBarMessage: 'Failed to add project data.'
+                });
+              case 4:
+                return _context2.abrupt("return", rlt);
+              case 5:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2, null, [[1, 3]]);
+        }));
+        return function saveProject(_x2) {
+          return _ref4.apply(this, arguments);
+        };
+      }();
+      var pidSplit = userInfo.pid && userInfo.pid.indexOf('?');
+      // If pidSplit is undefined pid is undefined
+      var pid = pidSplit === undefined || pidSplit === -1 ? userInfo.pid : userInfo.pid.slice(0, pidSplit);
+      var submitForQuote = /*#__PURE__*/function () {
+        var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(param) {
+          var rlt, apiUrl, extraFormData, originalAccessToken, tokenName, customerRequests, notes, response, _response$data2, success, message, redirect_url, _summarizeItems, totalCount, totalPrice, _t3;
+          return _regenerator["default"].wrap(function (_context3) {
+            while (1) switch (_context3.prev = _context3.next) {
+              case 0:
+                rlt = {
+                  success: false
+                };
+                if (userInfo.token) {
+                  _context3.next = 1;
+                  break;
+                }
+                _this5.setState({
+                  isSnackBarOpen: true,
+                  snackBarMessage: 'You should save the project first.'
+                });
+                return _context3.abrupt("return");
+              case 1:
+                apiUrl = '';
+                if (param.flag === constants.SUBMIT_REQUEST_ASSIST) {
+                  apiUrl = "".concat(_constants.API_SERVER_URL, "/api/project/submitProject");
+                } else if (param.flag === constants.SUBMIT_ADD_CART) {
+                  apiUrl = "".concat(_constants.API_SERVER_URL, "/api/project/addCart");
+                }
+                _context3.prev = 2;
+                extraFormData = {
+                  userType: sessionStorage.getItem('user_type') || '',
+                  designType: sessionStorage.getItem('project_type') || '',
+                  startTime: sessionStorage.getItem('project_timeline') || ''
+                };
+                originalAccessToken = _localstorageSlim["default"].get(_constants.LOCAL_STORAGE_ORIGINAL_TOKEN);
+                tokenName = _localstorageSlim["default"].get(_constants.LOCAL_STORAGE_TOKEN_NAME);
+                customerRequests = param.customer_requests;
+                notes = customerRequests.notes;
+                _context3.next = 3;
+                return _axios["default"].post(apiUrl, {
+                  access_token: userInfo.token,
+                  data: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, param), extraFormData.userType ? {
+                    user_type: extraFormData.userType
+                  } : undefined), extraFormData.designType ? {
+                    project_type: extraFormData.designType
+                  } : undefined), extraFormData.startTime ? {
+                    project_timeline: extraFormData.startTime
+                  } : undefined), {}, {
+                    cart_total: parseFloat(sessionStorage.getItem('cart_total')),
+                    client_name: sessionStorage.getItem('visualizerName'),
+                    user_token: _localstorageSlim["default"].get(_constants.LOCAL_STORAGE_TOKEN_VALUE),
+                    cart_action_type: _localstorageSlim["default"].get(_constants.LOCAL_STORAGE_CART_ACTION),
+                    customer_requests: Object.values(customerRequests.reviewOptions).filter(Boolean).join(', ')
+                  }, param.flag === constants.SUBMIT_ADD_CART ? {
+                    cart_notes: notes
+                  } : {
+                    designer_notes: notes
+                  }), {}, {
+                    question_add_to_cart: param.flag === constants.SUBMIT_ADD_CART
+                  }, originalAccessToken ? {
+                    original_token: originalAccessToken
+                  } : undefined), tokenName ? {
+                    query_params_token_prefix: tokenName
+                  } : undefined),
+                  num: true,
+                  projectid: pid,
+                  search: _this5.props.location.search,
+                  userrole: userInfo.role,
+                  url: window.location.hostname
+                });
+              case 3:
+                response = _context3.sent;
+                _response$data2 = response.data, success = _response$data2.success, message = _response$data2.message, redirect_url = _response$data2.redirect_url;
+                if (success) {
+                  rlt.success = true;
+                  param.email && sessionStorage.setItem('email', param.email);
+                  param.phone && sessionStorage.setItem('phone', param.phone);
+                  _this5.setState({
+                    redirectURL: redirect_url,
+                    isSnackBarOpen: true,
+                    snackBarMessage: "".concat(param.flag === constants.SUBMIT_REQUEST_ASSIST ? 'Project submitted' : 'Added to cart', " successfully.").concat(customerRequests.reviewOptions.length > 0 || customerRequests.notes ? ' <br /> A confirmation has been emailed to you and a designer will be in contact shortly' : ''),
+                    isSnackBar1Open: param.flag === constants.SUBMIT_ADD_CART
+                  });
+                  try {
+                    if (param.flag === constants.SUBMIT_REQUEST_ASSIST) {
+                      _ga.GA.events.assistanceRequested('manual', pid);
+                      _posthog.PH.assistanceRequested('manual', pid);
+                    } else {
+                      _summarizeItems = (0, _summarizeCart.summarizeItems)(JSON.parse(sessionStorage.getItem('usedObjects'))), totalCount = _summarizeItems.totalCount, totalPrice = _summarizeItems.totalPrice;
+                      _ga.GA.events.addToCart(pid, totalCount, totalPrice);
+                      _posthog.PH.addToCart(pid, totalCount, totalPrice);
+                    }
+                  } catch (e) {
+                    console.log('Error logging GA event', e);
+                  }
+                } else {
+                  rlt.success = false;
+                  rlt.message = message;
+                  _this5.setState({
+                    isSnackBarOpen: true,
+                    snackBarMessage: "".concat(param.flag === constants.SUBMIT_REQUEST_ASSIST ? 'Submitting project' : 'Adding to cart', " failed: ").concat(message)
+                  });
+                }
+                _context3.next = 5;
+                break;
+              case 4:
+                _context3.prev = 4;
+                _t3 = _context3["catch"](2);
+                rlt.success = false;
+                console.log('err', _t3);
+                _this5.setState({
+                  isSnackBarOpen: true,
+                  snackBarMessage: "".concat(param.flag === constants.SUBMIT_REQUEST_ASSIST ? 'Submitting project' : 'Adding to cart', " failed.")
+                });
+              case 5:
+                return _context3.abrupt("return", rlt);
+              case 6:
+              case "end":
+                return _context3.stop();
+            }
+          }, _callee3, null, [[2, 4]]);
+        }));
+        return function submitForQuote(_x3) {
+          return _ref5.apply(this, arguments);
+        };
+      }();
+      return /*#__PURE__*/_react["default"].createElement("section", null, /*#__PURE__*/_react["default"].createElement(_Snackbar["default"], {
+        isOpen: this.state.isSnackBarOpen,
+        message: this.state.snackBarMessage,
+        handleClose: function handleClose() {
+          return _this5.setState({
+            isSnackBarOpen: false,
+            snackBarMessage: ''
+          });
+        },
+        autoHideDuration: 10000
+      }), /*#__PURE__*/_react["default"].createElement(_Snackbar["default"], {
+        style: {
+          marginTop: this.state.isSnackBarOpen ? 75 : 'unset'
+        },
+        isOpen: this.state.isSnackBar1Open,
+        message: "The items in your design have been added to your shopping cart at ".concat(_constants.CLIENTS_NAME[sessionStorage.getItem('visualizerName')], ". <br />Please log in with the same email address."),
+        autoHideDuration: 20000,
+        action: /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("a", {
+          href: this.state.redirectURL,
+          target: "_blank",
+          style: {
+            fontFamily: _constants.DEFAULT_FONT_FAMILY,
+            color: _constants.PRIMARY_GREEN_COLOR,
+            fontWeight: 700,
+            marginRight: 10
+          }
+        }, "View Cart"), /*#__PURE__*/_react["default"].createElement("img", {
+          onClick: function onClick() {
+            return _this5.setState({
+              isSnackBar1Open: false
+            });
+          },
+          style: {
+            "float": 'right',
+            height: 24,
+            cursor: 'pointer'
+          },
+          src: "/assets/img/svg/close.svg"
+        }))
+      }), /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread(_objectSpread({}, wrapperStyle), {}, {
-          height: height,
-          display: 'flex',
-          justifyContent: 'center'
+          height: height
         })
-      }, /*#__PURE__*/_react["default"].createElement(_export3.Content, (0, _extends2["default"])({
+      }, /*#__PURE__*/_react["default"].createElement(Header, (0, _extends2["default"])({
+        isTokenPresent: !!this.props.match.params.token,
+        isSaved: this.state.isSaved,
+        width: headerW,
+        height: headerH,
+        state: extractedState,
+        reviewQuoteHandler: this.onReviewQuoteClicked.bind(this),
+        handleSaveDesign: this.handleSaveDesign.bind(this),
+        handleSubmitForQuote: this.handleSubmitForQuote.bind(this),
+        handleNewProject: this.handleNewProject.bind(this),
+        handleSubmitPrompt: function handleSubmitPrompt(submitType) {
+          _this5.setState({
+            submitPromptVisible: true
+          });
+          _this5.setState({
+            stateSubmitType: submitType
+          });
+        },
+        logoImage: this.props.logoImage,
+        companyURL: this.props.companyURL,
+        setToolbar: this.setToolbar,
+        saveProject: saveProject,
+        newProject: newProject,
+        isModalVisible: this.state.isModalVisible,
+        allVisible: allVisible,
+        wizardStepOpend: firstVisit
+      }, props)), signOpen && /*#__PURE__*/_react["default"].createElement(Sign, {
+        setSignOpen: this.setSignOpen.bind(this),
+        setMyProjectsOpen: this.setMyProjectsOpen.bind(this),
+        setMyProjectsToLogin: this.setMyProjectsToLogin.bind(this),
+        myProjectsToLogin: myProjectsToLogin
+      }), !allVisible &&
+      /*#__PURE__*/
+      // left side bar & top tools bar
+      _react["default"].createElement(Toolbar, (0, _extends2["default"])({
+        width: toolbarW,
+        content: contentW,
+        height: toolbarH,
+        headerH: headerH,
+        state: extractedState,
+        layers: extractedState.scene.layers,
+        selectedLayer: extractedState.scene.selectedLayer
+      }, props, {
+        handleSaveDesign: this.handleSaveDesign.bind(this),
+        handleSubmitForQuote: this.handleSubmitForQuote.bind(this),
+        handleNewProject: this.handleNewProject.bind(this),
+        handleSubmitPrompt: function handleSubmitPrompt(submitType) {
+          _this5.setState({
+            submitPromptVisible: true
+          });
+          _this5.setState({
+            stateSubmitType: submitType
+          });
+        },
+        toolBar: this.state.toolbar,
+        setToolbar: this.setToolbar,
+        setDownloadPopupVisible: this.setDownloadPopupVisible.bind(this),
+        openFloor: this.openFloor,
+        openCabinet: this.openCabinet,
+        openAppliance: this.openAppliance,
+        openFinishing: this.openFinishing,
+        closeFloorTB: this.closeFloorTB,
+        closeCabinetTB: this.closeCabinetTB,
+        closeFinishingTB: this.closeFinishingTB,
+        closeApplianceTB: this.closeApplianceTB,
+        setShowProperty: this.setShowProperty,
+        reviewQuotePopupOpened: this.state.reviewQuotePopupOpened,
+        isShowProperty: this.state.isShowProperty,
+        categoryData: this.props.categoryData,
+        floorOpened: this.state.floorOpened,
+        cabinetOpened: this.state.cabinetOpened,
+        applianceOpened: this.state.applianceOpened,
+        finishingOpened: this.state.finishingOpened,
+        doorStyleOpen: this.state.doorStyleOpen,
+        toggleDoorStyle: this.toggleDoorStyle,
+        onReviewQuoteClicked: this.onReviewQuoteClicked,
+        wizardStepOpend: firstVisit,
+        replaceCabinetFlag: this.state.replaceCabinetFlag,
+        replaceCabinet: this.replaceCabinet
+      })), /*#__PURE__*/_react["default"].createElement(_export3.Content, (0, _extends2["default"])({
         width: contentW,
         height: contentH,
         catalog: this.props.catalog,
@@ -586,7 +1278,78 @@ var KitchenConfigurator = /*#__PURE__*/function (_Component) {
         onWheel: function onWheel(event) {
           return event.preventDefault();
         }
-      }))));
+      })), !allVisible && /*#__PURE__*/_react["default"].createElement(FooterBar, (0, _extends2["default"])({
+        content: contentW,
+        setToolbar: this.setToolbar,
+        layers: extractedState.scene.layers,
+        setShowProperty: this.setShowProperty,
+        state: extractedState,
+        selectedLayer: extractedState.scene.selectedLayer
+      }, props)), firstVisit && /*#__PURE__*/_react["default"].createElement(WizardStep, (0, _extends2["default"])({
+        key: "first-setting",
+        content: contentW,
+        layers: extractedState.scene.layers,
+        close: function close() {
+          return _this5.setState({
+            wizardStepOpend: false
+          });
+        },
+        state: extractedState,
+        setMyProjectsToLogin: this.setMyProjectsToLogin.bind(this),
+        setSignOpen: this.setSignOpen.bind(this),
+        selectedLayer: extractedState.scene.selectedLayer,
+        setMyProjectsOpen: this.setMyProjectsOpen.bind(this)
+      }, props)), myProjectsOpen && /*#__PURE__*/_react["default"].createElement(MyProjects, (0, _extends2["default"])({
+        setMyProjectsOpen: this.setMyProjectsOpen.bind(this)
+      }, props)), /*#__PURE__*/_react["default"].createElement(_savedesign["default"], (0, _extends2["default"])({
+        visible: savePopupVisible,
+        submitTosave: submitTosave,
+        handleSaveDesign: this.handleSaveDesign.bind(this),
+        saveProject: saveProject,
+        state: extractedState
+      }, props)), /*#__PURE__*/_react["default"].createElement(_submitforquote["default"], (0, _extends2["default"])({
+        categoryData: categoryData,
+        curDoorStyle: doorStyle,
+        handleSubmitForQuote: this.handleSubmitForQuote.bind(this),
+        submitForQuote: submitForQuote,
+        visible: quotePopupVisible,
+        setDoorStyle: this.props.itemsActions.setDoorStyle,
+        submitType: stateSubmitType
+      }, props)), /*#__PURE__*/_react["default"].createElement(_newproject["default"], {
+        isSaved: this.state.isSaved,
+        visible: newProjectPopupVisible,
+        handleNewProject: this.handleNewProject.bind(this),
+        newProject: newProject,
+        areas: extractedState.getIn(['scene', 'layers', extractedState.scene.selectedLayer, 'areas'])
+      }), /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        visible: submitPromptVisible,
+        submitType: stateSubmitType,
+        handleOk: function handleOk(value) {
+          return _this5.handleSaveDesign(value) || _this5.setState({
+            submitTosave: true
+          });
+        },
+        handleClose: function handleClose() {
+          _this5.setState({
+            submitPromptVisible: false
+          });
+        }
+      }), /*#__PURE__*/_react["default"].createElement(_autosaveprompt["default"], {
+        isLeaving: isLeaving,
+        visible: savePromptVisible,
+        handleOk: this.handleSaveDesign.bind(this),
+        handleClose: function handleClose() {
+          return _this5.setState({
+            savePromptVisible: false,
+            submitTosave: false
+          });
+        }
+      }), /*#__PURE__*/_react["default"].createElement(_downloadsummary["default"], (0, _extends2["default"])({
+        visible: downloadPopupVisible,
+        state: extractedState,
+        catalog: this.props.catalog,
+        setDownloadPopupVisible: this.setDownloadPopupVisible.bind(this)
+      }, props)), saveAlert));
     }
   }]);
 }(_react.Component);
@@ -600,6 +1363,7 @@ KitchenConfigurator.propTypes = {
   width: _propTypes["default"].number.isRequired,
   height: _propTypes["default"].number.isRequired,
   stateExtractor: _propTypes["default"].func.isRequired,
+  toolbarButtons: _propTypes["default"].array,
   sidebarComponents: _propTypes["default"].array,
   footerbarComponents: _propTypes["default"].array,
   customContents: _propTypes["default"].object,
@@ -609,7 +1373,7 @@ KitchenConfigurator.propTypes = {
 KitchenConfigurator.contextTypes = {
   store: _propTypes["default"].object.isRequired
 };
-KitchenConfigurator.childContextTypes = _objectSpread(_objectSpread({}, (0, _objectsUtils.objectsMap)(_export2["default"], function () {
+KitchenConfigurator.childContextTypes = _objectSpread(_objectSpread({}, (0, _objectsUtils.objectsMap)(_export["default"], function () {
   return _propTypes["default"].object;
 })), {}, {
   translator: _propTypes["default"].object,
@@ -621,21 +1385,20 @@ KitchenConfigurator.defaultProps = {
   plugins: [],
   allowProjectFileSupport: true,
   softwareSignature: "KitchenConfigurator ".concat(_version.VERSION),
+  toolbarButtons: [],
   sidebarComponents: [],
   footerbarComponents: [],
   customContents: {},
   configData: {}
 };
-
-//redux connect
 function mapStateToProps(reduxState) {
   return {
     state: reduxState
   };
 }
 function mapDispatchToProps(dispatch) {
-  return (0, _objectsUtils.objectsMap)(_export2["default"], function (actionNamespace) {
-    return (0, _redux.bindActionCreators)(_export2["default"][actionNamespace], dispatch);
+  return (0, _objectsUtils.objectsMap)(_export["default"], function (actionNamespace) {
+    return (0, _redux.bindActionCreators)(_export["default"][actionNamespace], dispatch);
   });
 }
 var _default = exports["default"] = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(KitchenConfigurator);