kitchen-simulator 3.1.14 → 4.0.0-alpha.12

package/es/LiteKitchenConfigurator.js

@@ -1,13 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-var _excluded = ["width", "height", "state", "stateExtractor", "measurementUnit"];
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["width", "height", "state", "stateExtractor"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -40,6 +42,24 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
     _this = _callSuper(this, LiteKitchenConfigurator, [props]);
 
     // utm tracking
+    _defineProperty(_this, "lastProcessedExternalEventId", null);
+    _defineProperty(_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) {
+        setTimeout(function () {
+          _this.setState({
+            savePromptVisible: true,
+            isLeaving: true
+          });
+        }, 500);
+        _this.saveProjectToStorage();
+
+        // This line is required to trigger the browser confirmation dialog
+        e.preventDefault();
+        e.returnValue = '';
+        return '';
+      }
+    });
     var utmDetailParams = new URLSearchParams(_this.props.location && _this.props.location.search);
     var utmStrEncoded = utmDetailParams.get('details');
     var utmRequestData = null;
@@ -312,33 +332,175 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
         catalog: this.props.catalog
       });
     }
+  }, {
+    key: "saveProjectToStorage",
+    value: function saveProjectToStorage() {
+      var _this$props = this.props,
+        state = _this$props.state,
+        stateExtractor = _this$props.stateExtractor;
+      var extractedState = stateExtractor(state);
+      var projectData = JSON.stringify(extractedState.get('scene').toJS());
+      sessionStorage.setItem(window.location.href, projectData);
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this3 = this;
+      window.addEventListener('beforeunload', this.handleBeforeUnload);
       console.log('context =>', this.context);
       window.forRedo = [];
       var store = this.context.store;
-      var _this$props = this.props,
-        stateExtractor = _this$props.stateExtractor,
-        plugins = _this$props.plugins;
+      var _this$props2 = this.props,
+        projectActions = _this$props2.projectActions,
+        catalog = _this$props2.catalog,
+        stateExtractor = _this$props2.stateExtractor,
+        state = _this$props2.state,
+        plugins = _this$props2.plugins;
+      projectActions.initCatalog(catalog);
+      var match = this.props.match;
+      if (sessionStorage.getItem(window.location.href)) {
+        var jsonData = sessionStorage.getItem(window.location.href);
+        projectActions.loadProject(JSON.parse(jsonData), this.props.categoryData);
+        sessionStorage.removeItem(window.location.href);
+        return;
+      }
       var newplugins = _toConsumableArray(plugins);
       newplugins.forEach(function (newplugin) {
         return newplugin(store, stateExtractor);
       });
+      if (match && match.params.pid === undefined) {
+        projectActions.newProject();
+        sessionStorage.setItem('projectTitle', 'Untitled');
+        projectActions.rename('Untitled');
+        sessionStorage.removeItem('projectId');
+        sessionStorage.removeItem('email');
+        sessionStorage.removeItem('firstName');
+        sessionStorage.removeItem('lastName');
+        sessionStorage.removeItem('usedObjects');
+        return;
+      }
+      if (match && match.params.pid !== undefined) {
+        if (match.params.pid === 'new') {
+          projectActions.newProject();
+          sessionStorage.setItem('projectTitle', 'Untitled');
+          projectActions.rename('Untitled');
+          sessionStorage.removeItem('projectId');
+          sessionStorage.removeItem('email');
+          sessionStorage.removeItem('firstName');
+          sessionStorage.removeItem('lastName');
+          sessionStorage.removeItem('usedObjects');
+        } else {
+          axios.post("".concat(constants.API_SERVER_URL, "/api/project/loadPidProject"), {
+            pid: match.params.pid,
+            visualizerName: sessionStorage.getItem('visualizerName')
+          }).then(/*#__PURE__*/function () {
+            var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(response) {
+              var projectElement, jsonData, _t;
+              return _regeneratorRuntime.wrap(function (_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    projectElement = response.data.projectElement;
+                    if (!(projectElement.length === 0)) {
+                      _context.next = 1;
+                      break;
+                    }
+                    return _context.abrupt("return");
+                  case 1:
+                    sessionStorage.setItem('projectTitle', projectElement[0].title);
+                    projectActions.rename(projectElement[0].title);
+                    sessionStorage.setItem('projectId', projectElement[0].id);
+                    sessionStorage.setItem('email', projectElement[0].email);
+                    sessionStorage.setItem('firstName', projectElement[0].firstName);
+                    sessionStorage.setItem('lastName', projectElement[0].lastName);
+                    sessionStorage.setItem('phone', projectElement[0].phone);
+                    if (!projectElement[0].project_data) {
+                      _context.next = 2;
+                      break;
+                    }
+                    jsonData = JSON.parse(projectElement[0].project_data);
+                    _context.next = 5;
+                    break;
+                  case 2:
+                    _context.prev = 2;
+                    _context.next = 3;
+                    return axios.post("".concat(constants.API_SERVER_URL, "/api/project/loadPidData"), {
+                      pid: match.params.pid
+                    }).data.data;
+                  case 3:
+                    jsonData = _context.sent;
+                    _context.next = 5;
+                    break;
+                  case 4:
+                    _context.prev = 4;
+                    _t = _context["catch"](2);
+                    _this3.setState({
+                      isSnackBarOpen: true,
+                      snackBarMessage: _t
+                    });
+                  case 5:
+                    jsonData.isLoadingCabinet = false;
+                    projectActions.loadProject(jsonData, _this3.props.categoryData);
+                  case 6:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee, null, [[2, 4]]);
+            }));
+            return function (_x) {
+              return _ref.apply(this, arguments);
+            };
+          }());
+        }
+        sessionStorage.removeItem('user_type');
+        sessionStorage.removeItem('project_type');
+        sessionStorage.removeItem('project_timeline');
+      }
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('beforeunload', this.handleBeforeUnload);
+      window.onbeforeunload = null;
+    }
+  }, {
+    key: "componentWillMount",
+    value: function componentWillMount() {}
   }, {
     key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(nextProps) {
+      var _this4 = this;
       var stateExtractor = nextProps.stateExtractor,
         state = nextProps.state,
         projectActions = nextProps.projectActions,
         catalog = nextProps.catalog,
-        externalEvent = nextProps.externalEvent,
-        onInternalEvent = nextProps.onInternalEvent;
+        externalEvent = nextProps.externalEvent;
 
       // handle external events
-      if (this.props.externalEvent !== externalEvent) {
-        handleExternalEvent(nextProps);
+      if (!externalEvent) return;
+      var eventId = externalEvent.__eventId;
+      if (eventId == null) return;
+      if (this.lastProcessedExternalEventId === eventId) {
+        return; // already processed
+      }
+      this.lastProcessedExternalEventId = eventId;
+      try {
+        var result = handleExternalEvent(nextProps);
+        if (result && typeof result.then === 'function') {
+          result.then(function () {
+            var _this4$props$onExtern, _this4$props;
+            return (_this4$props$onExtern = (_this4$props = _this4.props).onExternalEventProcessed) === null || _this4$props$onExtern === void 0 ? void 0 : _this4$props$onExtern.call(_this4$props, eventId);
+          })["catch"](function () {
+            var _this4$props$onExtern2, _this4$props2;
+            return (_this4$props$onExtern2 = (_this4$props2 = _this4.props).onExternalEventProcessed) === null || _this4$props$onExtern2 === void 0 ? void 0 : _this4$props$onExtern2.call(_this4$props2, eventId);
+          });
+        } else {
+          var _this$props$onExterna, _this$props3;
+          (_this$props$onExterna = (_this$props3 = this.props).onExternalEventProcessed) === null || _this$props$onExterna === void 0 || _this$props$onExterna.call(_this$props3, eventId);
+        }
+      } catch (e) {
+        var _this$props$onExterna2, _this$props4;
+        (_this$props$onExterna2 = (_this$props4 = this.props).onExternalEventProcessed) === null || _this$props$onExterna2 === void 0 || _this$props$onExterna2.call(_this$props4, eventId);
+        throw e;
       }
       var plannerState = stateExtractor(state);
       var catalogReady = plannerState.getIn(['catalog', 'ready']);
@@ -357,13 +519,12 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        width = _this$props2.width,
-        height = _this$props2.height,
-        state = _this$props2.state,
-        stateExtractor = _this$props2.stateExtractor,
-        measurementUnit = _this$props2.measurementUnit,
-        props = _objectWithoutProperties(_this$props2, _excluded);
+      var _this$props5 = this.props,
+        width = _this$props5.width,
+        height = _this$props5.height,
+        state = _this$props5.state,
+        stateExtractor = _this$props5.stateExtractor,
+        props = _objectWithoutProperties(_this$props5, _excluded);
       var _this$state = this.state,
         savePopupVisible = _this$state.savePopupVisible,
         quotePopupVisible = _this$state.quotePopupVisible,
@@ -371,6 +532,8 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
         signOpen = _this$state.signOpen,
         myProjectsOpen = _this$state.myProjectsOpen;
       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;
@@ -381,6 +544,27 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       var headerW = width;
       var headerH = 60;
       var extractedState = stateExtractor(state);
+      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']);
+        var doorIdAvailable = false;
+        if (this.props.categoryData.doorStyles && this.props.categoryData.doorStyles.items) {
+          this.props.categoryData.doorStyles.items.find(function (category) {
+            doorIdAvailable = category.items.find(function (style) {
+              var item = style.items.find(function (it) {
+                return it.id === extractedStateData.id;
+              });
+              if (item) {
+                colorItem = item;
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+        }
+        if (doorIdAvailable) doorStyle = extractedStateData;
+      }
       var firstVisit = this.state.wizardStepOpend && this.isProjectEmpty(extractedState.scene);
       var allVisible = firstVisit || signOpen || myProjectsOpen;
       var _scene = extractedState.getIn(['scene']);
@@ -405,15 +589,11 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       extractedState = extractedState.merge({
         viewer2D: _viewer2D
       });
-
-      // set the measurement unit after project setup
-      if (measurementUnit) this.props.viewer2DActions.updateCeilHeightUnit(measurementUnit);
       return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("div", {
         style: _objectSpread(_objectSpread({}, wrapperStyle), {}, {
           height: height,
           display: 'flex',
-          justifyContent: 'center',
-          position: 'relative'
+          justifyContent: 'center'
         })
       }, /*#__PURE__*/React.createElement(Content, _extends({
         width: contentW,
@@ -427,8 +607,7 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       }, props, {
         onWheel: function onWheel(event) {
           return event.preventDefault();
-        },
-        onInternalEvent: this.props.onInternalEvent
+        }
       }))));
     }
   }]);
@@ -448,7 +627,8 @@ LiteKitchenConfigurator.propTypes = {
   customContents: PropTypes.object,
   softwareSignature: PropTypes.string,
   configData: PropTypes.object,
-  onInternalEvent: PropTypes.func
+  onExternalEventProcessed: PropTypes.func,
+  externalEvent: PropTypes.any
 };
 LiteKitchenConfigurator.contextTypes = {
   store: PropTypes.object.isRequired