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

package/src/KitchenConfigurator.jsx

@@ -1,1517 +0,0 @@
-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 {
-  API_SERVER_URL,
-  BG_COLOR_HOVER,
-  CLIENTS_NAME,
-  DEFAULT_FONT_FAMILY,
-  LOCAL_STORAGE_CART_ACTION,
-  LOCAL_STORAGE_ORIGINAL_TOKEN,
-  LOCAL_STORAGE_TOKEN_NAME,
-  LOCAL_STORAGE_TOKEN_VALUE,
-  MODE,
-  PRIMARY_GREEN_COLOR,
-  SECONDARY_PURPLE_COLOR,
-  TEXT_COLOR_NEUTRAL_1
-} from './constants';
-import { base64Decode, getPath } from './utils/helper';
-import { isEmpty } from './components/viewer2d/utils';
-import actions from './actions/export';
-import Catalog from './catalog/catalog';
-import { Project } from './class/export';
-import {
-  Content,
-  FooterBarComponents,
-  HeaderComponents,
-  MyProjectsComonents,
-  SignComponents,
-  ToolbarComponents,
-  WizardStepComponents
-} 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';
-import ls from 'localstorage-slim';
-
-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 { Header } = HeaderComponents;
-const { Toolbar } = ToolbarComponents;
-const { FooterBar } = FooterBarComponents;
-const { WizardStep } = WizardStepComponents;
-const { Sign } = SignComponents;
-const { MyProjects } = MyProjectsComonents;
-
-const toolbarW = 0;
-const sidebarW = 250;
-const footerBarH = 20;
-
-const wrapperStyle = {
-  display: 'flex',
-  flexFlow: 'row nowrap'
-};
-
-const uploadFiles = (data, filePath) => {
-  var p1 = new Promise((resolve, reject) => {
-    const params = {
-      Bucket: process.env.REACT_APP_AWS_BUCKET_NAME,
-      Key: filePath,
-      Body: data,
-      ContentType: 'application/json',
-      ACL: 'public-read'
-    };
-    s3.putObject(params, function (err, data) {
-      if (err) {
-        reject(err);
-        return;
-      }
-      console.log('success');
-      resolve([data.Location]);
-    });
-  });
-  return p1;
-};
-
-let saveAlert = '';
-let saveInterval = '';
-
-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);
-  }
-
-  // debouncedSetIsSaved = _.debounce(
-  //   () => this.setState({ isSaved: false }),
-  //   200
-  // );
-  //
-  // componentDidUpdate(prevProps) {
-  //   // Only strip properties if the object is not null/undefined
-  //   function stripProperty(obj, properties) {
-  //     if (!obj) return obj;
-  //     let changed = false;
-  //     const newObj = { ...obj };
-  //     for (const prop of properties) {
-  //       if (prop in newObj) {
-  //         delete newObj[prop];
-  //         changed = true;
-  //       }
-  //     }
-  //     return changed ? newObj : obj;
-  //   }
-  //
-  //   const prevState = this.props.stateExtractor(prevProps.state);
-  //   const currState = this.props.stateExtractor(this.props.state);
-  //
-  //   // Only convert to JS once per items/areas/lines
-  //   const prevLayer = prevState.scene.selectedLayer;
-  //   const currLayer = currState.scene.selectedLayer;
-  //
-  //   const prevItems = prevState
-  //     .getIn(['scene', 'layers', prevLayer, 'items'])
-  //     .toJS();
-  //   const currItems = currState
-  //     .getIn(['scene', 'layers', currLayer, 'items'])
-  //     .toJS();
-  //
-  //   const prevItemsProps = Object.values(prevItems).map(
-  //     ({ x, y, rotation }) => ({ x, y, rotation })
-  //   );
-  //   const currItemsProps = Object.values(currItems).map(
-  //     ({ x, y, rotation }) => ({ x, y, rotation })
-  //   );
-  //
-  //   const prevDoorStyleRaw = prevState.getIn([
-  //     'scene',
-  //     'layers',
-  //     prevLayer,
-  //     'doorStyle'
-  //   ]);
-  //   const currDoorStyleRaw = currState.getIn([
-  //     'scene',
-  //     'layers',
-  //     currLayer,
-  //     'doorStyle'
-  //   ]);
-  //   const prevDoorStyle = stripProperty(prevDoorStyleRaw, ['doorStyles']);
-  //   const currDoorStyle = stripProperty(currDoorStyleRaw, ['doorStyles']);
-  //
-  //   const prevAreasRaw = prevState
-  //     .getIn(['scene', 'layers', prevLayer, 'areas'])
-  //     .toJS();
-  //   const currAreasRaw = currState
-  //     .getIn(['scene', 'layers', currLayer, 'areas'])
-  //     .toJS();
-  //   const prevAreas = stripProperty(Object.values(prevAreasRaw)[0], [
-  //     'selected'
-  //   ]);
-  //   const currAreas = stripProperty(Object.values(currAreasRaw)[0], [
-  //     'selected'
-  //   ]);
-  //
-  //   const prevLinesRaw = prevState
-  //     .getIn(['scene', 'layers', prevLayer, 'lines'])
-  //     .toJS();
-  //   const currLinesRaw = currState
-  //     .getIn(['scene', 'layers', currLayer, 'lines'])
-  //     .toJS();
-  //   const prevLines = stripProperty(Object.values(prevLinesRaw)[0], [
-  //     'selected'
-  //   ]);
-  //   const currLines = stripProperty(Object.values(currLinesRaw)[0], [
-  //     'selected'
-  //   ]);
-  //
-  //   const prevCeilingHeight = prevState.getIn([
-  //     'scene',
-  //     'layers',
-  //     prevLayer,
-  //     'ceilHeight'
-  //   ]);
-  //   const currCeilingHeight = currState.getIn([
-  //     'scene',
-  //     'layers',
-  //     currLayer,
-  //     'ceilHeight'
-  //   ]);
-  //
-  //   let changed =
-  //     !_.isEqual(prevItemsProps, currItemsProps) ||
-  //     !_.isEqual(prevDoorStyle, currDoorStyle) ||
-  //     !_.isEqual(prevAreas, currAreas) ||
-  //     !_.isEqual(prevLines, currLines) ||
-  //     prevCeilingHeight !== currCeilingHeight;
-  //
-  //   if (changed) {
-  //     this.debouncedSetIsSaved();
-  //
-  //     const currentItemsLength = Object.keys(currItems).length;
-  //     const prevItemsLength = Object.keys(prevItems).length;
-  //     // make sure prompt appears only when adding cabinets
-  //     const allowedItemLengths = [5, 10, 15];
-  //
-  //     if (
-  //       allowedItemLengths.includes(currentItemsLength) &&
-  //       prevItemsLength === currentItemsLength - 1 &&
-  //       !this.props.match.params.token
-  //     ) {
-  //       this.setState({ savePromptVisible: true });
-  //     }
-  //   }
-  // }
-
-  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
-    );
-  }
-
-  handleSaveDesign(value) {
-    let { stateExtractor, state } = this.props;
-    let plannerState = stateExtractor(state);
-    let items = plannerState.getIn(['scene', 'layers', 'layer-1', 'items']);
-    let 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 });
-  }
-
-  handleNewProject(value) {
-    this.setState({ reviewQuotePopupOpened: false });
-    this.setState({ savePopupVisible: false });
-    this.setState({ quotePopupVisible: false });
-    this.setState({ assistPopupVisible: false });
-    this.setState({ newProjectPopupVisible: value });
-  }
-
-  handleSubmitForQuote(
-    isVisible,
-    submitType = constants.SUBMIT_REQUEST_ASSIST
-  ) {
-    const 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 });
-    }
-  }
-
-  saveScreenshotToFile = event => {
-    event.preventDefault();
-    let canvas = document.getElementsByID('viewer3D')[1];
-    let canvas_crop_image = document.getElementById('canvas_crop_image');
-    let ctx = canvas_crop_image.getContext('2d');
-
-    // Set width and height for the new canvas
-    let heightAtt = document.createAttribute('height');
-    heightAtt.value = canvas.height;
-    canvas_crop_image.setAttributeNode(heightAtt);
-
-    let widthAtt = document.createAttribute('width');
-    widthAtt.value = canvas.width;
-    canvas_crop_image.setAttributeNode(widthAtt);
-
-    ctx.fillStyle = 'white';
-    ctx.fillRect(0, 0, canvas_crop_image.width, canvas_crop_image.height);
-
-    let img = new Image();
-    img.crossOrigin = 'anonymous';
-    img.src = canvas.toDataURL();
-
-    img.onload = () => {
-      ctx.globalAlpha = 0.3;
-      ctx.drawImage(
-        img,
-        0,
-        0,
-        canvas_crop_image.width,
-        canvas_crop_image.height
-      );
-      this.setState({
-        isModalVisible: true,
-        imageUri: canvas.toDataURL(),
-        image: img
-      });
-      canvas_crop_image.style.zIndex = 11;
-      document.addEventListener('keydown', this.onKeyDown, false);
-      document.addEventListener(
-        'mouseup',
-        this.onMouseUp_On_New_Save_SQ_DA,
-        false
-      );
-      canvas_crop_image.style.display = 'block';
-    };
-  };
-
-  findDelkeys(obj, deleteKeys, path) {
-    if (typeof obj === 'object') {
-      let allkeys = Object.keys(obj);
-      for (let i = 0; i < allkeys.length; i++) {
-        const value = obj[allkeys[i]];
-        if (isEmpty(value)) {
-          deleteKeys.push({
-            path: path,
-            key: allkeys[i]
-          });
-        } else if (typeof value === 'object') {
-          let newPath = path + allkeys[i] + ',';
-          this.findDelkeys(value, deleteKeys, newPath);
-        }
-      }
-    } else if (isEmpty(obj)) {
-      let tmpkey = path.split(',');
-      deleteKeys.push({
-        path: path,
-        key: tmpkey[tmpkey.length - 1]
-      });
-    }
-  }
-
-  render() {
-    let { width, height, state, stateExtractor, ...props } = this.props;
-    let {
-      savePopupVisible,
-      quotePopupVisible,
-      assistPopupVisible,
-      newProjectPopupVisible,
-      savePromptVisible,
-      isLeaving,
-      submitPromptVisible,
-      stateSubmitType,
-      submitTosave,
-      signOpen,
-      myProjectsOpen,
-      myProjectsToLogin,
-      downloadPopupVisible
-    } = 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;
-
-    // const userInfo = this.props.match ? this.props.match.params : [];
-    const userInfo = [];
-
-    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
-    });
-
-    var history = this.props.history;
-
-    let handleContinueQuote = () => {
-      this.setToolbar('reviewforquote');
-      this.setState({ savePopupVisible: false, quotePopupVisible: true });
-    };
-
-    let newProject = () => {
-      this.props.projectActions.newProject();
-      sessionStorage.setItem('projectTitle', 'Untitled');
-      this.props.projectActions.rename('Untitled');
-      sessionStorage.removeItem('projectId');
-      sessionStorage.removeItem('usedObjects');
-      const visualizerName = sessionStorage.getItem('visualizerName');
-      const originalAccessToken = ls.get(LOCAL_STORAGE_ORIGINAL_TOKEN);
-      const tokenName = ls.get(LOCAL_STORAGE_TOKEN_NAME);
-
-      let pathname = `/${visualizerName}`;
-      if (tokenName && originalAccessToken) {
-        pathname += `?${tokenName}${originalAccessToken}`;
-      }
-
-      history.push({ pathname });
-      this.setState({ wizardStepOpend: false });
-    };
-
-    /**
-     * @description Save Projects
-     * @param {{email,firstName,lastName,notes,projectName}} param Project information to save
-     */
-    let saveProject = async param => {
-      let rlt = { success: false };
-
-      // Get storage info
-      let title = sessionStorage.getItem('projectTitle');
-      let projectId = sessionStorage.getItem('projectId');
-
-      let projectTitle =
-        (param && param.projectName) ||
-        title ||
-        `Project-${new Date().toLocaleString()}`;
-      let utm = this.utm;
-
-      // State
-      let state = Project.unselectAll(extractedState).updatedState;
-      let { scene } = state;
-      state = state.merge({ scene: scene.merge({ title: projectTitle }) });
-
-      // Set storage info
-      sessionStorage.setItem('projectTitle', projectTitle);
-      props.projectActions.rename(projectTitle);
-
-      // Filter cds
-      const itemData = state
-        .getIn([
-          'scene',
-          'layers',
-          state.get('scene').toJS().selectedLayer,
-          'items'
-        ])
-        .toArray();
-
-      itemData.forEach(it => {
-        const item = it.toJS();
-        const doorStyles = item?.doorStyle?.doorStyles;
-
-        // Skip if no doorStyles data at all
-        if (!doorStyles) return;
-
-        const newCDSdata = Array.isArray(doorStyles.cds)
-          ? doorStyles.cds.filter(
-              it1 =>
-                it1.cabinet_door_style_id === doorStyles.cabinet_door_style_id
-            )
-          : [];
-
-        const layerId = state.get('scene').toJS().selectedLayer;
-        const basePath = [
-          'scene',
-          'layers',
-          layerId,
-          'items',
-          it.id,
-          'doorStyle',
-          'doorStyles'
-        ];
-
-        if (state.hasIn(basePath)) {
-          state = state.setIn([...basePath, 'cds'], newCDSdata);
-        }
-      });
-
-      // Delete null values
-
-      let newScene = state.getIn(['scene']);
-      let deleteKeys = [];
-      this.findDelkeys(newScene.toJS(), deleteKeys, '');
-      for (let i = 0; i < deleteKeys.length; i++) {
-        let tmp = newScene.toJS();
-        let deletePath = deleteKeys[i].path.split(',');
-        for (let j = 0; j < deletePath.length; j++) {
-          if (!isEmpty(deletePath[j])) {
-            tmp = tmp[deletePath[j]];
-          }
-        }
-        if (deletePath.length >= 2) {
-          delete tmp[deleteKeys[i].key];
-          deletePath.pop();
-          if (!isEmpty(newScene.getIn(deletePath)))
-            newScene = newScene.setIn(deletePath, tmp);
-        } else {
-          newScene = newScene.delete(deleteKeys[i].key);
-        }
-      }
-
-      state = state.setIn(['scene'], newScene);
-
-      // Data to save
-      const projectData = JSON.stringify(state.get('scene').toJS());
-
-      const object_count = Object.keys(
-        state?.scene?.layers?.get(state?.scene?.selectedLayer)?.items || {}
-      ).length;
-
-      try {
-        const originalAccessToken = ls.get(LOCAL_STORAGE_ORIGINAL_TOKEN);
-        const tokenName = ls.get(LOCAL_STORAGE_TOKEN_NAME);
-
-        const response = await axios.post('/api/project/saveProject', {
-          pid: projectId,
-          title: projectTitle,
-          mode: MODE,
-          access_token: userInfo.token ? userInfo.token : null,
-          userrole: userInfo.role ? userInfo.role : null,
-          saveData: { ...param, ...utm, projectData, object_count },
-          url: window.location.hostname,
-          visualizerName: sessionStorage.getItem('visualizerName'),
-          ...(originalAccessToken
-            ? { original_token: originalAccessToken }
-            : undefined),
-          ...(tokenName ? { query_params_token_prefix: tokenName } : undefined)
-        });
-
-        const { success, message, userData, access_token } = response.data;
-        if (success === true) {
-          rlt.success = true;
-
-          const { insertId } = response.data.execResult;
-          const 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 });
-          actions.userActions.login(
-            userData[0].id,
-            userData[0].role,
-            access_token,
-            utm
-          );
-          this.setState({
-            toolbar: this.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>'
-          });
-          if (this.state.submitTosave) {
-            handleContinueQuote();
-          }
-        } else {
-          rlt.success = false;
-          rlt.message = message;
-
-          this.setState({
-            isSnackBarOpen: true,
-            snackBarMessage: `Failed to add project data: ${message}`
-          });
-        }
-      } catch (err) {
-        rlt.success = false;
-
-        console.error(err);
-        this.setState({
-          isSnackBarOpen: true,
-          snackBarMessage: 'Failed to add project data.'
-        });
-      }
-
-      return rlt;
-    };
-
-    let pidSplit = userInfo.pid && userInfo.pid.indexOf('?');
-    // If pidSplit is undefined pid is undefined
-    let pid =
-      pidSplit === undefined || pidSplit === -1
-        ? userInfo.pid
-        : userInfo.pid.slice(0, pidSplit);
-
-    let submitForQuote = async param => {
-      let rlt = { success: false };
-
-      if (!userInfo.token) {
-        this.setState({
-          isSnackBarOpen: true,
-          snackBarMessage: 'You should save the project first.'
-        });
-        return;
-      }
-      let apiUrl = '';
-      if (param.flag === constants.SUBMIT_REQUEST_ASSIST) {
-        apiUrl = `${API_SERVER_URL}/api/project/submitProject`;
-      } else if (param.flag === constants.SUBMIT_ADD_CART) {
-        apiUrl = `${API_SERVER_URL}/api/project/addCart`;
-      }
-      try {
-        const extraFormData = {
-          userType: sessionStorage.getItem('user_type') || '',
-          designType: sessionStorage.getItem('project_type') || '',
-          startTime: sessionStorage.getItem('project_timeline') || ''
-        };
-
-        const originalAccessToken = ls.get(LOCAL_STORAGE_ORIGINAL_TOKEN);
-        const tokenName = ls.get(LOCAL_STORAGE_TOKEN_NAME);
-
-        const customerRequests = param.customer_requests;
-        const notes = customerRequests.notes;
-        const response = await axios.post(apiUrl, {
-          access_token: userInfo.token,
-          data: {
-            ...param,
-            ...(extraFormData.userType
-              ? { user_type: extraFormData.userType }
-              : undefined),
-            ...(extraFormData.designType
-              ? { project_type: extraFormData.designType }
-              : undefined),
-            ...(extraFormData.startTime
-              ? { project_timeline: extraFormData.startTime }
-              : undefined),
-            client_name: sessionStorage.getItem('visualizerName'),
-            user_token: ls.get(LOCAL_STORAGE_TOKEN_VALUE),
-            cart_action_type: ls.get(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: this.props.location.search,
-          userrole: userInfo.role,
-          url: window.location.hostname
-        });
-
-        const { success, message, redirect_url } = response.data;
-        if (success) {
-          rlt.success = true;
-
-          param.email && sessionStorage.setItem('email', param.email);
-          param.phone && sessionStorage.setItem('phone', param.phone);
-          this.setState({
-            redirectURL: redirect_url,
-            isSnackBarOpen: true,
-            snackBarMessage: `${
-              param.flag === constants.SUBMIT_REQUEST_ASSIST
-                ? 'Project submitted'
-                : 'Added to cart'
-            } successfully.${
-              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
-          });
-        } else {
-          rlt.success = false;
-          rlt.message = message;
-
-          this.setState({
-            isSnackBarOpen: true,
-            snackBarMessage: `${
-              param.flag === constants.SUBMIT_REQUEST_ASSIST
-                ? 'Submitting project'
-                : 'Adding to cart'
-            } failed: ${message}`
-          });
-        }
-      } catch (err) {
-        rlt.success = false;
-
-        console.log('err', err);
-        this.setState({
-          isSnackBarOpen: true,
-          snackBarMessage: `${
-            param.flag === constants.SUBMIT_REQUEST_ASSIST
-              ? 'Submitting project'
-              : 'Adding to cart'
-          } failed.`
-        });
-      }
-
-      return rlt;
-    };
-
-    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 }}>
-          {/*<Header*/}
-          {/*  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={submitType => {*/}
-          {/*    this.setState({ submitPromptVisible: true });*/}
-          {/*    this.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 && (*/}
-          {/*  <Sign*/}
-          {/*    setSignOpen={this.setSignOpen.bind(this)}*/}
-          {/*    setMyProjectsOpen={this.setMyProjectsOpen.bind(this)}*/}
-          {/*    setMyProjectsToLogin={this.setMyProjectsToLogin.bind(this)}*/}
-          {/*    myProjectsToLogin={myProjectsToLogin}*/}
-          {/*  />*/}
-          {/*)}*/}
-          {/*{!allVisible && (*/}
-          {/*  // left side bar & top tools bar*/}
-          {/*  <Toolbar*/}
-          {/*    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={submitType => {*/}
-          {/*      this.setState({ submitPromptVisible: true });*/}
-          {/*      this.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}*/}
-          {/*  />*/}
-          {/*)}*/}
-          <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()}
-          />
-          {/*{!allVisible && (*/}
-          {/*  <FooterBar*/}
-          {/*    content={contentW}*/}
-          {/*    setToolbar={this.setToolbar}*/}
-          {/*    layers={extractedState.scene.layers}*/}
-          {/*    setShowProperty={this.setShowProperty}*/}
-          {/*    state={extractedState}*/}
-          {/*    selectedLayer={extractedState.scene.selectedLayer}*/}
-          {/*    {...props}*/}
-          {/*  />*/}
-          {/*)}*/}
-          {/*{firstVisit && (*/}
-          {/*  <WizardStep*/}
-          {/*    key="first-setting"*/}
-          {/*    content={contentW}*/}
-          {/*    layers={extractedState.scene.layers}*/}
-          {/*    close={() => this.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 && (*/}
-          {/*  <MyProjects*/}
-          {/*    setMyProjectsOpen={this.setMyProjectsOpen.bind(this)}*/}
-          {/*    {...props}*/}
-          {/*  />*/}
-          {/*)}*/}
-          {/*<SaveDesignPopup*/}
-          {/*  visible={savePopupVisible}*/}
-          {/*  submitTosave={submitTosave}*/}
-          {/*  handleSaveDesign={this.handleSaveDesign.bind(this)}*/}
-          {/*  saveProject={saveProject}*/}
-          {/*  state={extractedState}*/}
-          {/*  {...props}*/}
-          {/*/>*/}
-          {/*<SubmitForQuotePopup*/}
-          {/*  categoryData={categoryData}*/}
-          {/*  curDoorStyle={doorStyle}*/}
-          {/*  handleSubmitForQuote={this.handleSubmitForQuote.bind(this)}*/}
-          {/*  submitForQuote={submitForQuote}*/}
-          {/*  visible={quotePopupVisible}*/}
-          {/*  setDoorStyle={this.props.itemsActions.setDoorStyle}*/}
-          {/*  submitType={stateSubmitType}*/}
-          {/*  {...props}*/}
-          {/*/>*/}
-          {/*<NewProjectPopup*/}
-          {/*  isSaved={this.state.isSaved}*/}
-          {/*  visible={newProjectPopupVisible}*/}
-          {/*  handleNewProject={this.handleNewProject.bind(this)}*/}
-          {/*  newProject={newProject}*/}
-          {/*  areas={extractedState.getIn([*/}
-          {/*    'scene',*/}
-          {/*    'layers',*/}
-          {/*    extractedState.scene.selectedLayer,*/}
-          {/*    'areas'*/}
-          {/*  ])}*/}
-          {/*/>*/}
-          {/*<SubmitPromptPopup*/}
-          {/*  visible={submitPromptVisible}*/}
-          {/*  submitType={stateSubmitType}*/}
-          {/*  handleOk={value =>*/}
-          {/*    this.handleSaveDesign(value) ||*/}
-          {/*    this.setState({ submitTosave: true })*/}
-          {/*  }*/}
-          {/*  handleClose={() => {*/}
-          {/*    this.setState({ submitPromptVisible: false });*/}
-          {/*  }}*/}
-          {/*/>*/}
-          {/*<AutosavePromptPopup*/}
-          {/*  isLeaving={isLeaving}*/}
-          {/*  visible={savePromptVisible}*/}
-          {/*  handleOk={this.handleSaveDesign.bind(this)}*/}
-          {/*  handleClose={() =>*/}
-          {/*    this.setState({ savePromptVisible: false, submitTosave: false })*/}
-          {/*  }*/}
-          {/*/>*/}
-          {/*<DownloadSummaryPopup*/}
-          {/*  visible={downloadPopupVisible}*/}
-          {/*  state={extractedState}*/}
-          {/*  catalog={this.props.catalog}*/}
-          {/*  setDownloadPopupVisible={this.setDownloadPopupVisible.bind(this)}*/}
-          {/*  {...props}*/}
-          {/*/>*/}
-          {/*{saveAlert}*/}
-        </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);