kitchen-simulator 5.0.0-test.18 → 5.0.0-test.19

package/src/KitchenConfigurator.jsx

@@ -0,0 +1,1526 @@
+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);