kitchen-simulator 5.0.0-test.7 → 5.0.0-test.70

package/src/_KitchenConfigurator.jsx

@@ -0,0 +1,578 @@
+import axios from 'axios';
+import * as convert from 'convert-units';
+import { Plugins as PlannerPlugins } from './index';
+import * as PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import ReactGA from 'react-ga4';
+import { hotjar } from 'react-hotjar';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as constants from './constants';
+import { base64Decode, getPath } from './utils/helper';
+import actions from './actions/export';
+import Catalog from './catalog/catalog';
+import { Content } from './components/export';
+import Translator from './translator/translator';
+import { objectsMap } from './utils/objects-utils';
+import { VERSION } from './version';
+
+const toolbarW = 0;
+
+const wrapperStyle = {
+  display: 'flex',
+  flexFlow: 'row nowrap'
+};
+
+class KitchenConfigurator extends Component {
+  constructor(props) {
+    super(props);
+
+    // utm tracking
+    const utmDetailParams = new URLSearchParams(
+      this.props.location && this.props.location.search
+    );
+
+    const utmStrEncoded = utmDetailParams.get('details');
+    let utmRequestData = null;
+    if (utmStrEncoded) {
+      try {
+        utmRequestData = JSON.parse(base64Decode(utmStrEncoded));
+        utmRequestData = JSON.parse(utmRequestData?.utm);
+      } catch (e) {
+        console.error('Cannot parse utm parameter: ', error);
+        utmRequestData = null;
+      }
+    }
+
+    this.state = {
+      savePopupVisible: false,
+      quotePopupVisible: false,
+      assistPopupVisible: false,
+      newProjectPopupVisible: false,
+      isModalVisible: false,
+      submitPromptVisible: false,
+      stateSubmitType: constants.SUBMIT_REQUEST_ASSIST,
+      savePromptVisible: false,
+      isShowProperty: true,
+      submitTosave: false,
+      signOpen: false,
+      myProjectsOpen: false,
+      myProjectsToLogin: false,
+      downloadPopupVisible: false,
+
+      // For Toolbar Item
+      toolbar: '',
+      reviewQuotePopupOpened: false,
+      floorOpened: false,
+      cabinetOpened: false,
+      applianceOpened: false,
+      finishingOpened: false,
+      doorStyleOpen: false,
+      wizardStepOpend: false,
+      tutorialMouseEventsAdd: false,
+      replaceCabinetFlag: false,
+      isSnackBarOpen: false,
+      isSnackBar1Open: false,
+      redirectURL: '',
+      snackBarMessage: '',
+      isSaved: false,
+      isLeaving: false
+    };
+
+    // For UTM tracking
+    this.utm = {
+      utm_source: utmRequestData?.source || 'source',
+      utm_medium: utmRequestData?.medium || 'medium',
+      utm_campaign: utmRequestData?.campaign || 'campaign',
+      utm_term: utmRequestData?.term || 'term',
+      utm_content: utmRequestData?.content || 'content',
+      gclid: utmRequestData?.gclid || 'gclid',
+      msclkid: utmRequestData?.msclkid || 'msclkid',
+      fbclid: utmRequestData?.fbclid || 'fbclid',
+      ttclid: utmRequestData?.ttclid || 'ttclid'
+    };
+
+    this.openFloor = this.openFloor.bind(this);
+    this.openCabinet = this.openCabinet.bind(this);
+    this.openFinishing = this.openFinishing.bind(this);
+    this.openAppliance = this.openAppliance.bind(this);
+    this.toggleDoorStyle = this.toggleDoorStyle.bind(this);
+    this.onReviewQuoteClicked = this.onReviewQuoteClicked.bind(this);
+    this.closeFloorTB = this.closeFloorTB.bind(this);
+    this.closeCabinetTB = this.closeCabinetTB.bind(this);
+    this.closeFinishingTB = this.closeFinishingTB.bind(this);
+    this.closeApplianceTB = this.closeApplianceTB.bind(this);
+    this.setToolbar = this.setToolbar.bind(this);
+    this.replaceCabinet = this.replaceCabinet.bind(this);
+    this.setSubmitToSave = this.setSubmitToSave.bind(this);
+    this.setSignOpen = this.setSignOpen.bind(this);
+    this.setMyProjectsOpen = this.setMyProjectsOpen.bind(this);
+    this.setMyProjectsToLogin = this.setMyProjectsToLogin.bind(this);
+    this.setDownloadPopupVisible = this.setDownloadPopupVisible.bind(this);
+    this.neverShowInput = React.createRef(null);
+    this.setShowProperty = this.setShowProperty.bind(this);
+  }
+
+  // Toolbar control functions
+
+  setToolbar(toolBarKey) {
+    this.setState({ toolbar: toolBarKey });
+  }
+
+  setShowProperty(value) {
+    this.setState({ isShowProperty: value });
+  }
+
+  setMyProjectsOpen(value) {
+    this.setState({ myProjectsOpen: value });
+    this.setState({ signOpen: false });
+    this.setState({ wizardStepOpend: false });
+  }
+
+  setMyProjectsToLogin(value) {
+    this.setState({ myProjectsToLogin: value });
+  }
+
+  setDownloadPopupVisible(value) {
+    this.setState({ reviewQuotePopupOpened: false });
+    this.setState({ savePopupVisible: false });
+    this.setState({ quotePopupVisible: false });
+    this.setState({ submitTosave: false });
+    this.setState({ assistPopupVisible: false });
+    this.setState({ newProjectPopupVisible: false });
+    this.setState({ downloadPopupVisible: value });
+  }
+
+  setSubmitToSave(value) {
+    this.setState({ submitTosave: value });
+  }
+
+  setSignOpen(value) {
+    this.setState({ wizardStepOpend: false });
+    this.setState({ myProjectsOpen: false });
+    this.setState({ signOpen: value });
+  }
+
+  openFloor() {
+    this.setState({ floorOpened: true });
+    document.getElementById(
+      'make_floorplan_inactive'
+    ).parentElement.parentElement.style.zIndex = 999;
+  }
+
+  openCabinet() {
+    this.setState({ cabinetOpened: true });
+    document.getElementById(
+      'add_cabinets_inactive'
+    ).parentElement.parentElement.style.zIndex = 999;
+  }
+
+  toggleDoorStyle(visible) {
+    this.setState({ doorStyleOpen: visible });
+    document.getElementById(
+      'select_doorstyle_inactive'
+    ).parentElement.parentElement.style.zIndex = visible ? 999 : 6;
+  }
+
+  replaceCabinet(value) {
+    this.setState({ replaceCabinetFlag: value });
+  }
+
+  openAppliance() {
+    this.setState({ applianceOpened: true });
+    document.getElementById(
+      'add_appliances_inactive'
+    ).parentElement.parentElement.style.zIndex = 999;
+  }
+
+  openFinishing() {
+    this.setState({ finishingOpened: true });
+    document.getElementById(
+      'finishing_touches_inactive'
+    ).parentElement.parentElement.style.zIndex = 999;
+  }
+
+  onReviewQuoteClicked(visible) {
+    this.setState({ reviewQuotePopupOpened: visible });
+    document.getElementById(
+      'review_quote_inactive'
+    ).parentElement.parentElement.style.zIndex = visible ? 999 : 6;
+  }
+
+  closeFloorTB() {
+    this.setState({ floorOpened: false });
+    document.getElementById('make_floorplan_inactive') &&
+      (document.getElementById(
+        'make_floorplan_inactive'
+      ).parentElement.parentElement.style.zIndex = 6);
+  }
+
+  closeCabinetTB() {
+    this.setState({ cabinetOpened: false });
+    document.getElementById(
+      'add_cabinets_inactive'
+    ).parentElement.parentElement.style.zIndex = 6;
+  }
+
+  closeFinishingTB() {
+    this.setState({ finishingOpened: false });
+    document.getElementById(
+      'finishing_touches_inactive'
+    ).parentElement.parentElement.style.zIndex = 6;
+  }
+
+  closeApplianceTB() {
+    this.setState({ applianceOpened: false });
+    document.getElementById(
+      'add_appliances_inactive'
+    ).parentElement.parentElement.style.zIndex = 6;
+  }
+
+  closeDoorstyle() {
+    this.setState({});
+    document.getElementById(
+      'select_doorstyle_inactive'
+    ).parentElement.parentElement.style.zIndex = 6;
+  }
+  closeReviewQuote() {
+    this.setState({});
+    document.getElementById(
+      'review_quote_inactive'
+    ).parentElement.parentElement.style.zIndex = 6;
+  }
+
+  getChildContext() {
+    return {
+      ...objectsMap(actions, actionNamespace => this.props[actionNamespace]),
+      translator: this.props.translator,
+      catalog: this.props.catalog
+    };
+  }
+
+  saveProjectToStorage() {
+    let { state, stateExtractor } = this.props;
+    const extractedState = stateExtractor(state);
+    const projectData = JSON.stringify(extractedState.get('scene').toJS());
+    sessionStorage.setItem(window.location.href, projectData);
+  }
+
+  handleBeforeUnload = e => {
+    const 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(() => {
+        this.setState({ savePromptVisible: true, isLeaving: true });
+      }, 500);
+
+      this.saveProjectToStorage();
+
+      // This line is required to trigger the browser confirmation dialog
+      e.preventDefault();
+      e.returnValue = '';
+      return '';
+    }
+  };
+
+  componentDidMount() {
+    ReactGA.send({ hitType: 'pageview', page: getPath() });
+    hotjar.event && hotjar.event(`pageview:${getPath()}`);
+
+    window.addEventListener('beforeunload', this.handleBeforeUnload);
+
+    console.log('context =>', this.context);
+
+    window.forRedo = [];
+    let { store } = this.context;
+    let { projectActions, catalog, stateExtractor, state, plugins } =
+      this.props;
+
+    projectActions.initCatalog(catalog);
+
+    let { match } = this.props;
+
+    if (sessionStorage.getItem(window.location.href)) {
+      const jsonData = sessionStorage.getItem(window.location.href);
+      projectActions.loadProject(JSON.parse(jsonData), this.props.categoryData);
+      sessionStorage.removeItem(window.location.href);
+      return;
+    }
+
+    if (match && match.params.pid === undefined) {
+      let newplugins = [
+        ...plugins,
+        PlannerPlugins.Autosave('KitchenConfigurator_v0', false)
+      ];
+      newplugins.forEach(newplugin => newplugin(store, stateExtractor));
+      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(`${constants.API_SERVER_URL}/api/project/loadPidProject`, {
+            pid: match.params.pid,
+            visualizerName: sessionStorage.getItem('visualizerName')
+          })
+          .then(async response => {
+            const { projectElement } = response.data;
+            if (projectElement.length === 0) return;
+            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);
+            let jsonData;
+            if (projectElement[0].project_data) {
+              jsonData = JSON.parse(projectElement[0].project_data);
+            } else {
+              try {
+                jsonData = await axios.post(
+                  `${constants.API_SERVER_URL}/api/project/loadPidData`,
+                  { pid: match.params.pid }
+                ).data.data;
+              } catch (err) {
+                this.setState({
+                  isSnackBarOpen: true,
+                  snackBarMessage: err
+                });
+              }
+            }
+            jsonData.isLoadingCabinet = false;
+            projectActions.loadProject(jsonData, this.props.categoryData);
+          });
+      }
+
+      sessionStorage.removeItem('user_type');
+      sessionStorage.removeItem('project_type');
+      sessionStorage.removeItem('project_timeline');
+    }
+  }
+
+  componentWillUnmount() {
+    window.addEventListener('beforeunload', this.handleBeforeUnload);
+    window.onbeforeunload = null;
+  }
+
+  componentWillMount() {}
+
+  componentWillReceiveProps(nextProps) {
+    let { stateExtractor, state, projectActions, catalog } = nextProps;
+    let plannerState = stateExtractor(state);
+    let catalogReady = plannerState.getIn(['catalog', 'ready']);
+    if (!catalogReady) {
+      projectActions.initCatalog(catalog);
+    }
+  }
+
+  isProjectEmpty(scene) {
+    let { layers, selectedLayer } = scene;
+    let layer = layers.get(selectedLayer);
+    return (
+      layer.areas.size +
+        layer.lines.size +
+        layer.holes.size +
+        layer.items.size ===
+      0
+    );
+  }
+
+  render() {
+    let { width, height, state, stateExtractor, ...props } = this.props;
+    let {
+      savePopupVisible,
+      quotePopupVisible,
+      assistPopupVisible,
+      signOpen,
+      myProjectsOpen
+    } = this.state;
+    let contentW = width - toolbarW;
+    let categoryData = this.props.categoryData;
+    // console.log(categoryData);
+    // let contentW = width - toolbarW - sidebarW;
+    // let toolbarH = height - footerBarH;
+    // let contentH = height - footerBarH;
+    // let sidebarH = height - footerBarH;
+    let toolbarH = height;
+    let contentH = height;
+    let sidebarH = height;
+    let headerW = width;
+    let headerH = 60;
+
+    let extractedState = stateExtractor(state);
+    let doorStyle = extractedState.get('doorStyle');
+    if (
+      extractedState.getIn([
+        'scene',
+        'layers',
+        extractedState.scene.selectedLayer,
+        'doorStyle'
+      ]) !== undefined &&
+      extractedState.getIn([
+        'scene',
+        'layers',
+        extractedState.scene.selectedLayer,
+        'doorStyle'
+      ]) !== null
+    ) {
+      const extractedStateData = extractedState.getIn([
+        'scene',
+        'layers',
+        extractedState.scene.selectedLayer,
+        'doorStyle'
+      ]);
+      let doorIdAvailable = false;
+      if (
+        this.props.categoryData.doorStyles &&
+        this.props.categoryData.doorStyles.items
+      ) {
+        this.props.categoryData.doorStyles.items.find(category => {
+          doorIdAvailable = category.items.find(style => {
+            let item = style.items.find(it => it.id === extractedStateData.id);
+            if (item) {
+              colorItem = item;
+              return true;
+            } else {
+              return false;
+            }
+          });
+        });
+      }
+
+      if (doorIdAvailable) doorStyle = extractedStateData;
+    }
+
+    let firstVisit =
+      this.state.wizardStepOpend && this.isProjectEmpty(extractedState.scene);
+    let allVisible = firstVisit || signOpen || myProjectsOpen;
+
+    let _scene = extractedState.getIn(['scene']);
+    let len = convert(_scene.width).from(_scene.unit).to('cm');
+    let _viewer2D = extractedState.getIn(['viewer2D']);
+    if (_viewer2D.size > 0) {
+      let scaleX = (width / len) * 3;
+      let scaleY = (height / len) * 3;
+      let scale = scaleX > scaleY ? scaleY : scaleX;
+      let _e = width - len * scale,
+        _f = height - len * scale;
+      let viewer = _viewer2D.toJS();
+      if (viewer.e === 0 && viewer.f === 0) {
+        _viewer2D = _viewer2D.merge({
+          e: viewer.viewerWidth / 2 - viewer.SVGWidth / 2,
+          f: viewer.viewerHeight / 2 - viewer.SVGHeight / 2,
+          a: 0.99,
+          d: 0.99
+        });
+      }
+    }
+    extractedState = extractedState.merge({
+      viewer2D: _viewer2D
+    });
+
+    return (
+      <section>
+        <div style={{ ...wrapperStyle, height }}>
+          <Content
+            width={contentW}
+            height={contentH}
+            catalog={this.props.catalog}
+            state={extractedState}
+            toolBar={this.state.toolbar}
+            setToolbar={this.setToolbar}
+            replaceCabinet={this.replaceCabinet}
+            keyDownEnable={
+              !savePopupVisible && !quotePopupVisible && !assistPopupVisible
+            }
+            {...props}
+            onWheel={event => event.preventDefault()}
+          />
+        </div>
+      </section>
+    );
+  }
+}
+
+KitchenConfigurator.propTypes = {
+  translator: PropTypes.instanceOf(Translator),
+
+  catalog: PropTypes.instanceOf(Catalog),
+  allowProjectFileSupport: PropTypes.bool,
+  plugins: PropTypes.arrayOf(PropTypes.func),
+  autosaveKey: PropTypes.string,
+  autosaveDelay: PropTypes.number,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  stateExtractor: PropTypes.func.isRequired,
+  toolbarButtons: PropTypes.array,
+  sidebarComponents: PropTypes.array,
+  footerbarComponents: PropTypes.array,
+  customContents: PropTypes.object,
+  softwareSignature: PropTypes.string,
+  configData: PropTypes.object
+};
+
+KitchenConfigurator.contextTypes = {
+  store: PropTypes.object.isRequired
+};
+
+KitchenConfigurator.childContextTypes = {
+  ...objectsMap(actions, () => PropTypes.object),
+  translator: PropTypes.object,
+  catalog: PropTypes.object
+};
+
+KitchenConfigurator.defaultProps = {
+  translator: new Translator(),
+  catalog: new Catalog(),
+  plugins: [],
+  allowProjectFileSupport: true,
+  softwareSignature: `KitchenConfigurator ${VERSION}`,
+  toolbarButtons: [],
+  sidebarComponents: [],
+  footerbarComponents: [],
+  customContents: {},
+  configData: {}
+};
+
+//redux connect
+function mapStateToProps(reduxState) {
+  return {
+    state: reduxState
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return objectsMap(actions, actionNamespace =>
+    bindActionCreators(actions[actionNamespace], dispatch)
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(KitchenConfigurator);

package/src/actions/export.js

@@ -8,7 +8,6 @@ import * as verticesActions from './vertices-actions';
 import * as itemsActions from './items-actions';
 import * as areaActions from './area-actions';
 import * as groupsActions from './groups-actions';
-import * as userActions from './user-actions';
 export {
   projectActions,
   viewer2DActions,
@@ -19,8 +18,7 @@ export {
   verticesActions,
   itemsActions,
   areaActions,
-  groupsActions,
-  userActions
+  groupsActions
 };
 
 export default {
@@ -33,6 +31,5 @@ export default {
   verticesActions,
   itemsActions,
   areaActions,
-  groupsActions,
-  userActions
+  groupsActions
 };