kitchen-simulator 5.0.0-test.13 → 5.0.0-test.14

package/src/_KitchenConfigurator.jsx

@@ -0,0 +1,710 @@
+import Dialog from '@material-ui/core/Dialog';
+import axios from 'axios';
+import convert from 'convert-units';
+import { Plugins as PlannerPlugins } from './index';
+import 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 styled from 'styled-components';
+import SnackBar from './components/atoms/Snackbar';
+import * as constants from './constants';
+import {
+  BG_COLOR_HOVER,
+  CLIENTS_NAME,
+  DEFAULT_FONT_FAMILY,
+  PRIMARY_GREEN_COLOR,
+  SECONDARY_PURPLE_COLOR,
+  TEXT_COLOR_NEUTRAL_1
+} from './constants';
+import { base64Decode, getPath } from './utils/helper';
+import actions from './actions/export';
+import Catalog from './catalog/catalog';
+import { Content } from './components/_export';
+import jwtService from './components/login/jwtService';
+import './styles/export';
+import Translator from './translator/translator';
+import { objectsMap } from './utils/objects-utils';
+import { VERSION } from './version';
+
+const AWS = require('aws-sdk');
+
+const StyledDialog = styled(Dialog)`
+  .MuiDialog-paperWidthSm {
+    border-radius: 10px;
+  }
+`;
+
+export const StyledDialogContent = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  padding: 10px 30px;
+  padding-top: 30px;
+`;
+
+export const StyledDialogAction = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: 15px 30px 25px;
+`;
+
+export const StyledButton = styled.div`
+  padding: 10px 20px;
+  cursor: pointer;
+  margin-right: 10px;
+  color: ${SECONDARY_PURPLE_COLOR};
+  font-weight: bold;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 16px;
+  border-radius: 20px;
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+  }
+`;
+
+const s3 = new AWS.S3({
+  accessKeyId: process.env.REACT_APP_AWS_ID,
+  secretAccessKey: process.env.REACT_APP_AWS_SECRET
+});
+
+const toolbarW = 0;
+const sidebarW = 250;
+const footerBarH = 20;
+
+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.jwtCheck();
+
+    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;
+  }
+
+  jwtCheck() {
+    jwtService.on('onAutoLogin', () => {
+      // this.props.showMessage({message: 'Logging in with JWT'});
+
+      /**
+       * Sign in and retrieve user data from Api
+       */
+      jwtService
+        .signInWithToken()
+        .then(user => {
+          //this.props.userActions.setUserData(user);
+          this.props.userActions.login(
+            user.id,
+            user.role,
+            jwtService.getAccessToken(),
+            this.utm
+          );
+          //this.props.showMessage(option)
+          //this.props.showMessage({message: 'Logged in with token data',  variant: 'success'});
+          //alert('Logged in with token data');
+        })
+        .catch(error => {
+          //this.props.showMessage({message: error});
+          this.setState({
+            isSnackBarOpen: true,
+            snackBarMessage: error
+          });
+        });
+    });
+
+    jwtService.on('onAutoLogout', message => {
+      if (message) {
+        //this.props.showMessage({message, variant: 'error'});
+      }
+      this.props.userActions.logout();
+    });
+
+    jwtService.init();
+  }
+
+  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>
+        <SnackBar
+          isOpen={this.state.isSnackBarOpen}
+          message={this.state.snackBarMessage}
+          handleClose={() =>
+            this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
+          }
+          autoHideDuration={10000}
+        />
+        <SnackBar
+          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 ${CLIENTS_NAME[sessionStorage.getItem('visualizerName')]}. <br />Please log in with the same email address.`}
+          autoHideDuration={20000}
+          action={
+            <div>
+              <a
+                href={this.state.redirectURL}
+                target="_blank"
+                style={{
+                  fontFamily: DEFAULT_FONT_FAMILY,
+                  color: PRIMARY_GREEN_COLOR,
+                  fontWeight: 700,
+                  marginRight: 10
+                }}
+              >
+                View Cart
+              </a>
+              <img
+                onClick={() => this.setState({ isSnackBar1Open: false })}
+                style={{ float: 'right', height: 24, cursor: 'pointer' }}
+                src="/assets/img/svg/close.svg"
+              />
+            </div>
+          }
+        />
+        <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);