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

package/src/components/header/header.jsx

@@ -1,631 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-import * as Icon from 'react-icons/fa';
-import Popup from 'reactjs-popup';
-import {
-  KEYBOARD_BUTTON_CODE,
-  MODE,
-  NEW_DESIGN,
-  SAVE_DESIGN,
-  ASK_QUOTE,
-  DEFAULT_FONT_FAMILY,
-  TEXT_COLOR_NEUTRAL_0,
-  TEXT_COLOR_NEUTRAL_3,
-  SUBMIT_DESIGN,
-  BG_COLOR_1,
-  SUBMIT_REQUEST_ASSIST,
-  SUBMIT_ADD_CART
-} from '../../constants';
-import { FormTextInput } from '../style/export';
-import './header.style.css';
-import * as PS from './styles';
-import SnackBar from '../atoms/Snackbar/index';
-import { SaveButton } from '../../../src/components/header/button/SaveButton';
-import { Button } from '@material-ui/core';
-import InfoIcon from '@material-ui/icons/Info';
-import Tooltip from '@material-ui/core/Tooltip';
-
-const AWS = require('aws-sdk');
-
-const s3 = new AWS.S3({
-  accessKeyId: process.env.REACT_APP_AWS_ID,
-  secretAccessKey: process.env.REACT_APP_AWS_SECRET
-});
-
-const headerBarStyle = {
-  position: 'absolute',
-  top: 0,
-  // fontSize: '12px',
-  borderBottom: '1px solid #e8e8e8',
-  display: 'flex',
-  // backgroundColor: SharedStyle.SECONDARY_COLOR.alt,
-  boxShadow:
-    '3px 1px 3px 0px rgba(0,0,0,0.2), -1px -1px 1px 0px rgba(0,0,0,0.14), 0px 2px 1px -1px rgba(0,0,0,0.12)',
-  backgroundColor: '#fff',
-  padding: '3px 1em',
-  textAlign: 'center',
-  border: 0,
-  margin: 0,
-  boxSizing: 'border-box',
-  cursor: 'default',
-  userSelect: 'none',
-  zIndex: '199'
-};
-const inputStyle = { textAlign: 'left', height: '32px', border: 'unset' };
-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;
-};
-export default class Header extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = {
-      HamburgerMenuOpen: false,
-      renameForm: false,
-      renameTitle: '  ',
-      saveAsBtnClicked: false,
-      isSnackBarOpen: false,
-      snackBarMessage: '',
-      isLoading: false
-    };
-  }
-
-  canSubmit() {
-    return this.state.renameTitle !== '';
-  }
-
-  renameFormToggle(data, saveAsBtnClicked = false) {
-    if (this.canSubmit()) {
-      this.setState({
-        renameForm: data,
-        saveAsBtnClicked
-      });
-    } else {
-      this.setState({
-        isSnackBarOpen: true,
-        snackBarMessage: 'This field is required'
-      });
-    }
-  }
-
-  onRenameTitleChange(ev) {
-    this.setState({ renameTitle: ev.target.value });
-    sessionStorage.setItem('projectTitle', ev.target.value);
-    this.context.projectActions.rename(ev.target.value);
-  }
-
-  renameTitleSubmit(ev) {
-    ev.preventDefault();
-    if (!this.canSubmit()) {
-      this.renameFormToggle(false);
-      return;
-    }
-    this.setState({
-      renameForm: false,
-      renameTitle: this.state.renameTitle
-    });
-  }
-  handlePopupClose(e) {
-    const { HamburgerMenuOpen } = this.state;
-    this.setState({ HamburgerMenuOpen: !HamburgerMenuOpen });
-  }
-
-  render() {
-    let {
-      props: {
-        state,
-        width,
-        height,
-        saveProject: _saveProject,
-        newProject,
-        handleSaveDesign,
-        handleSubmitForQuote,
-        handleNewProject,
-        isModalVisible,
-        handleSubmitPrompt
-      },
-      context: { projectActions, userActions, translator }
-    } = this;
-
-    const {
-      HamburgerMenuOpen,
-      renameTitle,
-      renameForm,
-      saveAsBtnClicked,
-      isLoading
-    } = this.state;
-    let userInfo = [];
-    if (this.props.match) userInfo = this.props.match.params;
-    // let projectTitle = sessionStorage.getItem('projectTitle');
-    let projectTitle = state.scene.title;
-    let projectId = sessionStorage.getItem('projectId');
-
-    if (projectTitle == null || projectTitle == '') {
-      sessionStorage.setItem('projectTitle', 'Untitled');
-      this.context.projectActions.rename('Untitled');
-      projectTitle = 'Untitled';
-    }
-
-    let handleSaveBtn = async ({ showPrompt = true }) => {
-      if (showPrompt) {
-        handleSaveDesign(true);
-      } else {
-        this.setState({ isLoading: true });
-
-        const extraFormData = {
-          userType: sessionStorage.getItem('user_type') || '',
-          designType: sessionStorage.getItem('project_type') || '',
-          startTime: sessionStorage.getItem('project_timeline') || ''
-        };
-
-        // It's a saved project, Save the changed project
-        await this.props.saveProject({
-          projectName: state.scene.title,
-          projectId: sessionStorage.getItem('projectId'),
-          email: sessionStorage.getItem('email'),
-          firstName: sessionStorage.getItem('firstName'),
-          lastName: sessionStorage.getItem('lastName'),
-          phone: sessionStorage.getItem('phone'),
-          user_type: extraFormData.userType,
-          project_type: extraFormData.designType,
-          project_timeline: extraFormData.startTime
-        });
-        this.setState({ isLoading: false });
-      }
-    };
-
-    let newProjectBtn = () => {
-      if (sessionStorage.getItem('asking')) newProject();
-      else handleNewProject(true);
-      this.props.setToolbar('');
-    };
-
-    let saveProject = e => {
-      e.preventDefault();
-      this.setState({ HamburgerMenuOpen: !HamburgerMenuOpen });
-      _saveProject();
-    };
-
-    let saveAsBtnClickEvent = e => {
-      e.preventDefault();
-      this.setState({ HamburgerMenuOpen: !HamburgerMenuOpen });
-      projectActions.unselectAll();
-      this.renameFormToggle(true, true);
-    };
-
-    let snaplibrary = e => {
-      e.preventDefault();
-      projectActions.openCatalog();
-      this.setState({ HamburgerMenuOpen: !HamburgerMenuOpen });
-    };
-
-    let objectProperty = '';
-
-    if (HamburgerMenuOpen) {
-      objectProperty = (
-        <PS.SelectedWrapper>
-          <PS.TitleBar>
-            <PS.TitleBarIconButton
-              onClick={e => {
-                this.setState({ HamburgerMenuOpen: !HamburgerMenuOpen });
-              }}
-            >
-              <Icon.FaTimes />
-            </PS.TitleBarIconButton>
-          </PS.TitleBar>
-          <PS.ContentWrapper>
-            <PS.SubTitle
-              onClick={e => {
-                this.props.history.push('/login');
-                userInfo.role !== undefined && userActions.logout();
-              }}
-            >
-              {userInfo.role === undefined ? 'Sign in' : 'Sign out'}
-            </PS.SubTitle>
-            <PS.SubTitle
-              onClick={e => {
-                this.props.history.push({
-                  pathname: '/register',
-                  state: { type: 'register' }
-                });
-              }}
-            >
-              {'Register'}
-            </PS.SubTitle>
-            {userInfo.role === 'admin' ||
-              (userInfo.role === 'superadmin' && (
-                <PS.SubTitle
-                  onClick={e => {
-                    this.props.history.push({
-                      pathname: '/register',
-                      state: { type: 'adduser' }
-                    });
-                  }}
-                >
-                  Add user
-                </PS.SubTitle>
-              ))}
-            <PS.Diver></PS.Diver>
-            <PS.SubTitle
-              onClick={event => {
-                this.setState({ HamburgerMenuOpen: !HamburgerMenuOpen });
-                confirm('Would you want to start a new Project?')
-                  ? (projectActions.newProject(),
-                    this.renameFormToggle(false),
-                    sessionStorage.removeItem('projectId'),
-                    sessionStorage.setItem('projectTitle', 'Untitled'),
-                    projectActions.rename('Untitled'))
-                  : null;
-              }}
-            >
-              New Project
-            </PS.SubTitle>
-            <PS.Diver></PS.Diver>
-            {userInfo.role === 'designer' ||
-            userInfo.role === 'customer' ||
-            userInfo.role === 'superdesigner' ||
-            userInfo.role === 'superadmin' ? (
-              <PS.SubTitle onClick={saveProject}>Save Project</PS.SubTitle>
-            ) : (
-              <PS.SubTitle
-                onClick={event => {
-                  this.setState({
-                    HamburgerMenuOpen: !HamburgerMenuOpen,
-                    isSnackBarOpen: true,
-                    snackBarMessage: 'You should Login.'
-                  });
-                }}
-              >
-                Save Project
-              </PS.SubTitle>
-            )}
-            <PS.Diver></PS.Diver>
-            {userInfo.role === 'designer' ||
-            userInfo.role === 'customer' ||
-            userInfo.role === 'superdesigner' ||
-            userInfo.role === 'superadmin' ? (
-              <PS.SubTitle onClick={saveAsBtnClickEvent}>
-                Save As...
-              </PS.SubTitle>
-            ) : (
-              <PS.SubTitle
-                onClick={event => {
-                  this.setState({
-                    HamburgerMenuOpen: !HamburgerMenuOpen,
-                    isSnackBarOpen: true,
-                    snackBarMessage: 'You should Login.'
-                  });
-                }}
-              >
-                Save As...
-              </PS.SubTitle>
-            )}
-
-            <PS.Diver></PS.Diver>
-            {userInfo.role === 'designer' ||
-            userInfo.role === 'customer' ||
-            userInfo.role === 'superdesigner' ||
-            userInfo.role === 'superadmin' ? (
-              <PS.SubTitle onClick={snaplibrary}>Open Project</PS.SubTitle>
-            ) : null}
-            {/* <PS.PositionValue>Rotate</PS.PositionValue>
-          <PS.PositionValue>Resize</PS.PositionValue> */}
-          </PS.ContentWrapper>
-        </PS.SelectedWrapper>
-      );
-    }
-    return (
-      <div style={{ ...headerBarStyle, width, height }}>
-        <SnackBar
-          isOpen={this.state.isSnackBarOpen}
-          message={this.state.snackBarMessage}
-          handleClose={() =>
-            this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
-          }
-        />
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <PS.LogoBox style={{ padding: 'unset' }}>
-            <a href={this.props.companyURL} target="_blank">
-              <img height="40px" src={this.props.logoImage} />
-            </a>
-          </PS.LogoBox>
-          <Popup
-            trigger={objectProperty}
-            open={this.state.HamburgerMenuOpen}
-            arrow={false}
-          />
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              fontFamily: DEFAULT_FONT_FAMILY,
-              fontSize: 13,
-              fontWeight: 600,
-              lineHeight: '18px',
-              textAlign: 'center'
-            }}
-          >
-            <p
-              style={{
-                color: TEXT_COLOR_NEUTRAL_3,
-                fontSize: '16px',
-                fontWeight: 600,
-                lineHeight: '22px',
-                textAlign: 'center'
-              }}
-            >
-              Drafts
-            </p>
-            <p style={{ color: TEXT_COLOR_NEUTRAL_0, margin: '0px 3px' }}>/</p>
-            {renameForm ? (
-              <div className="header-projectname-wrapper">
-                <PS.InputStyle>
-                  <FormTextInput
-                    value={projectTitle ? projectTitle : renameTitle}
-                    onChange={e => {
-                      this.onRenameTitleChange(e);
-                    }}
-                    style={inputStyle}
-                    onKeyDown={e => {
-                      var keyCode = e.keyCode || e.which;
-                      if (keyCode == KEYBOARD_BUTTON_CODE.ENTER) {
-                        if (saveAsBtnClicked) {
-                          saveProject(e);
-                        }
-                        this.renameFormToggle(false, false);
-                      }
-                    }}
-                  />
-                </PS.InputStyle>
-              </div>
-            ) : (
-              <div className="header-projectname-wrapper">
-                <p
-                  style={{ color: TEXT_COLOR_NEUTRAL_0 }}
-                  onClick={
-                    isModalVisible
-                      ? null
-                      : () => this.renameFormToggle(true, saveAsBtnClicked)
-                  }
-                >
-                  {projectTitle ? projectTitle : renameTitle}
-                </p>
-                {/* <PS.EditBox >
-                      <IconButton className='padding-5'><EditOutlined /></IconButton>
-                    </PS.EditBox> */}
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '1rem',
-            width: '100%'
-          }}
-        >
-          {!this.props.allVisible && (
-            <SaveButton
-              isSaved={this.props.isSaved}
-              handleSaveBtn={() => {
-                let showPrompt = false;
-                if (!this.props.isTokenPresent) {
-                  showPrompt = true;
-                }
-                if (this.props.isTokenPresent && this.props.isSaved) {
-                  showPrompt = true;
-                }
-
-                return handleSaveBtn({
-                  showPrompt
-                });
-              }}
-              isLoading={isLoading}
-            />
-          )}
-
-          {!this.props.allVisible && (
-            <PS.SelectedBox onClick={isModalVisible ? null : newProjectBtn}>
-              <img height="18px" src="/assets/img/svg/headerbar/plus.svg" />
-              <PS.SelectTitle style={{ marginRight: 10 }}>
-                {NEW_DESIGN}
-              </PS.SelectTitle>
-            </PS.SelectedBox>
-          )}
-          <div
-            style={{
-              flex: 1
-            }}
-          />
-          {!this.props.allVisible && (
-            <Tooltip
-              title={
-                !this.props.isTokenPresent ? (
-                  <span
-                    style={{
-                      fontSize: 14
-                    }}
-                  >
-                    You need to <b>save the project</b> before requesting
-                    Designer Assistance.
-                  </span>
-                ) : (
-                  ''
-                )
-              }
-            >
-              <PS.SelectedBox
-                onClick={
-                  isModalVisible
-                    ? null
-                    : () => {
-                        if (!this.props.isTokenPresent) {
-                          this.props.handleSubmitPrompt(SUBMIT_REQUEST_ASSIST);
-                        } else {
-                          if (!this.props.isSaved) {
-                            handleSaveBtn({
-                              showPrompt: !this.props.isTokenPresent
-                            });
-                          }
-                          handleSubmitForQuote(true, SUBMIT_REQUEST_ASSIST);
-                        }
-                        this.props.setToolbar('');
-                      }
-                }
-              >
-                <img height="18px" src="\assets\img\svg\headerbar\assist.svg" />
-                <PS.SelectTitle>{SUBMIT_DESIGN}</PS.SelectTitle>
-                {!this.props.isTokenPresent && (
-                  <div
-                    style={{
-                      width: '5px',
-                      height: '5px',
-                      position: 'relative'
-                    }}
-                  >
-                    <InfoIcon
-                      style={{
-                        color: 'rgb(76, 18, 161)',
-                        position: 'absolute',
-                        width: '15px',
-                        height: '15px',
-                        bottom: '8px',
-                        right: '-16px'
-                      }}
-                    />
-                  </div>
-                )}
-              </PS.SelectedBox>
-            </Tooltip>
-          )}
-          {/*{!this.props.allVisible && (*/}
-          {/*  <PS.SelectedBox*/}
-          {/*    onClick={*/}
-          {/*      isModalVisible*/}
-          {/*        ? null*/}
-          {/*        : () => {*/}
-          {/*            projectActions.setIsHelp(!state.isHelp);*/}
-          {/*          }*/}
-          {/*    }*/}
-          {/*  >*/}
-          {/*    <img height="18px" src="/assets/img/svg/bottombar/help.svg" />*/}
-          {/*    <PS.SelectTitle>Help Center</PS.SelectTitle>*/}
-          {/*  </PS.SelectedBox>*/}
-          {/*)}*/}
-          {!this.props.allVisible && (
-            <Tooltip
-              title={
-                !this.props.isTokenPresent ? (
-                  <span
-                    style={{
-                      fontSize: 14
-                    }}
-                  >
-                    You need to <b>save the project</b> before Adding to Cart
-                  </span>
-                ) : (
-                  ''
-                )
-              }
-            >
-              <Button
-                variant="outlined"
-                onClick={() => {
-                  if (!this.props.isTokenPresent) {
-                    handleSubmitPrompt(SUBMIT_ADD_CART);
-                  } else {
-                    if (!this.props.isSaved) {
-                      handleSaveBtn({
-                        showPrompt: !this.props.isTokenPresent
-                      });
-                    }
-                    handleSubmitForQuote(true, SUBMIT_ADD_CART);
-                  }
-                }}
-                disabled={isLoading}
-                style={{
-                  pointerEvents: isLoading ? 'none' : 'auto',
-                  padding: '8px 20px',
-                  color: 'white',
-                  backgroundColor: 'rgba(76, 18, 161, 1)',
-                  border: '1px solid rgba(76, 18, 161, 1)',
-                  marginLeft: '1rem',
-                  textTransform: 'none',
-                  display: 'flex',
-                  alignItems: 'center'
-                }}
-                startIcon={
-                  <img
-                    style={{
-                      color: 'white'
-                    }}
-                    src="\assets\img\svg\headerbar\cart.svg"
-                  />
-                }
-                endIcon={
-                  !this.props.isTokenPresent && (
-                    <div
-                      style={{
-                        width: '5px',
-                        height: '5px',
-                        position: 'relative'
-                      }}
-                    >
-                      <InfoIcon
-                        style={{
-                          position: 'absolute',
-                          width: '15px',
-                          height: '15px',
-                          bottom: '8px',
-                          right: '-16px'
-                        }}
-                      />
-                    </div>
-                  )
-                }
-              >
-                Add to Cart
-              </Button>
-            </Tooltip>
-          )}
-        </div>
-      </div>
-    );
-  }
-}
-
-Header.propTypes = {
-  state: PropTypes.object.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired
-};
-
-Header.contextTypes = {
-  projectActions: PropTypes.object.isRequired,
-  viewer2DActions: PropTypes.object.isRequired,
-  viewer3DActions: PropTypes.object.isRequired,
-  linesActions: PropTypes.object.isRequired,
-  holesActions: PropTypes.object.isRequired,
-  itemsActions: PropTypes.object.isRequired,
-  userActions: PropTypes.object.isRequired,
-  translator: PropTypes.object.isRequired
-};

package/src/components/header/header.style.css

@@ -1,47 +0,0 @@
-.header-projectname-wrapper {
-  display: flex;
-  font-family: 'Open Sans';
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 18px;
-  text-align: center;
-}
-
-@media screen and (min-width: 1024) {
-  .header-projectname-wrapper {
-    font-size: 9px;
-  }
-}
-@media screen and (max-width: 1024) {
-  .header-projectname-wrapper {
-    font-size: 9px;
-  }
-}
-@media screen and (min-width: 1366) {
-  .header-projectname-wrapper {
-    font-size: 13px;
-  }
-}
-@media screen and (max-width: 1366) {
-  .header-projectname-wrapper {
-    font-size: 13px;
-  }
-}
-@media screen and (min-width: 1440) {
-  .header-projectname-wrapper {
-    font-size: 16px;
-  }
-}
-@media screen and (max-width: 1440) {
-  .header-projectname-wrapper {
-    font-size: 16px;
-  }
-}
-.header-projectname-display {
-  margin-top: 8px;
-  margin-right: 2px;
-}
-
-.padding-5 {
-  padding: 5px !important;
-}