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

package/src/components/header/header.jsx

@@ -0,0 +1,631 @@
+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

@@ -0,0 +1,47 @@
+.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;
+}