kitchen-simulator 5.0.0-test.25 → 5.0.0-test.27

package/src/KitchenConfigurator.jsx

@@ -1,1526 +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 AutosavePromptPopup from './components/toolbar/popup/autosaveprompt';
-import DownloadSummaryPopup from './components/toolbar/popup/downloadsummary';
-import NewProjectPopup from './components/toolbar/popup/newproject';
-import SaveDesignPopup from './components/toolbar/popup/savedesign';
-import SubmitForQuotePopup from './components/toolbar/popup/submitforquote';
-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 _ from 'lodash';
-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 SubmitPromptPopup from './components/toolbar/popup/submitprompt/index';
-// 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:
-        this.props.match?.params?.pid === undefined ||
-        this.props.match?.params?.pid === 'null'
-          ? true
-          : false,
-      tutorialMouseEventsAdd: false,
-      replaceCabinetFlag: false,
-      isSnackBarOpen: false,
-      isSnackBar1Open: false,
-      redirectURL: '',
-      snackBarMessage: '',
-      isSaved: !!this.props.match?.params?.token,
-      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);
-
-    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 : [];
-
-    let extractedState = stateExtractor(state);
-    //console.log('KC state - mode: ', extractedState.mode);
-    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);