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

package/src/components/toolbar/popup/downloadsummary/index.jsx

@@ -1,643 +0,0 @@
-import React from 'react';
-import * as S from './styles';
-import Dialog from '@material-ui/core/Dialog';
-import styled from 'styled-components';
-import {
-  SECONDARY_PURPLE_COLOR,
-  TEXT_COLOR_NEUTRAL_2,
-  BG_COLOR_1,
-  API_SERVER_URL,
-  MODE_BACK_ELEVATION_VIEW,
-  MODE_FRONT_ELEVATION_VIEW,
-  MODE_LEFT_ELEVATION_VIEW,
-  MODE_RIGHT_ELEVATION_VIEW,
-  SHADE_LIGHT_PURPLE_COLOR,
-  LOCAL_STORAGE_CUSTOMER_INFO
-} from '../../../../constants';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-import { withStyles } from '@material-ui/core/styles';
-import moment from 'moment';
-import ShowCabinetInfo from './showCabinetInfo';
-import Show2DView from './show2D/show2DView';
-import Show3DView from './show3D/show3DView';
-import ShowElevationView from './showElevation/showElevationView';
-import ShowWarranty from './showWarranty';
-import axios from 'axios';
-import { DownloadSummaryContext } from './downloadSummaryContext';
-import ls from 'localstorage-slim';
-
-const StyledDialog = styled(Dialog)`
-  .MuiDialog-paperWidthSm {
-    border-radius: 5px;
-    max-width: 806px;
-    width: 90%;
-    height: 71%;
-    position: relative;
-  }
-`;
-
-const DesignViewer = styled.div`
-  width: 55%;
-  border-style: solid;
-  border-width: 10px 10px 10px 20px;
-  border-color: rgba(0, 0, 0, 0);
-  background-color: rgba(0, 0, 0, 0.5);
-  overflow: hidden;
-  position: relative;
-
-  ::-webkit-scrollbar {
-    width: 2px;
-    position: absolute;
-  }
-  ::-webkit-scrollbar-track-piece {
-    background-color: rgba(0, 0, 0, 0.2);
-    position: absolute;
-  }
-  ::-webkit-scrollbar-thumb {
-    background-color: rgb(220, 220, 220);
-    border-radius: 5px;
-    transition: all 0.3s;
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: rgb(193, 202, 228);
-    border-radius: 5px;
-    transition: all 0.3s;
-  }
-`;
-
-const DesignViewerMask = styled.div`
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  pointer-events: none;
-  z-index: 20;
-`;
-const DesignViewerMaskInner = styled.div`
-  width: calc(100% - 12px);
-  height: 100%;
-  border-radius: 5px;
-  pointer-events: none;
-  overflow: hidden;
-  z-index: 1;
-  box-shadow: 0 0 0 10px #7f7f7f;
-`;
-
-const DesignViewerInnerContent = styled.div`
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  position: relative;
-  z-index: 0;
-`;
-
-const StyledMuiCheckbox = withStyles({
-  root: {
-    color: TEXT_COLOR_NEUTRAL_2,
-    '&$checked': {
-      color: SECONDARY_PURPLE_COLOR
-    }
-  },
-  checked: {}
-})(props => <Checkbox color="default" {...props} />);
-
-class DownloadSummaryPopup extends React.Component {
-  constructor(props) {
-    super(props);
-
-    let customerInfo = {};
-    try {
-      customerInfo = ls.get(LOCAL_STORAGE_CUSTOMER_INFO);
-    } catch (e) {
-      customerInfo = {};
-    }
-
-    this.state = {
-      email: customerInfo?.email || sessionStorage.getItem('email') || '',
-      emailfocusOn: false,
-      phone: sessionStorage.getItem('phone') || '',
-      phonefocusOn: false,
-      firstName:
-        customerInfo?.firstName || sessionStorage.getItem('firstName') || '',
-      firstNamefocusOn: false,
-      lastName:
-        customerInfo?.lastName || sessionStorage.getItem('lastName') || '',
-      lastNamefocusOn: false,
-      projectTitlefocusOn: false,
-      projectTitle: sessionStorage.getItem('projectTitle'),
-      check_3d: false,
-      check_2d: false,
-      check_list: false,
-      isLoading: false,
-      isLoading3D: false,
-      isLoadingElevation: {
-        front: false,
-        back: false,
-        right: false,
-        left: false
-      },
-      monkeyDocId: null
-    };
-
-    this.setIsLoading3D = this.setIsLoading3D.bind(this);
-    this.setIsLoadingElevation = this.setIsLoadingElevation.bind(this);
-  }
-
-  setIsLoading3D(flag) {
-    this.setState({ isLoading3D: flag });
-  }
-
-  setIsLoadingElevation(key, value) {
-    let temp = this.state.isLoadingElevation;
-    temp[key] = value;
-    this.setState({
-      isLoadingElevation: temp
-    });
-  }
-
-  _closePanel() {
-    this.setState({ check_3d: false, check_2d: false, check_list: false });
-    this.props.setDownloadPopupVisible(false);
-  }
-
-  render() {
-    const { visible } = this.props;
-    const {
-      firstName,
-      firstNameFocusOn,
-      lastName,
-      lastNameFocusOn,
-      email,
-      emailFocusOn,
-      phone,
-      phoneFocusOn,
-      projectTitle,
-      projectTitleFocusOn,
-      check_3d,
-      check_2d,
-      check_list,
-      isLoading,
-      isLoading3D,
-      monkeyDocId
-    } = this.state;
-
-    const summaryContextValue = {
-      firstName: this.state.firstName,
-      lastName: this.state.lastName,
-      email: this.state.email,
-      phone: this.state.phone,
-      projectTitle: this.state.projectTitle,
-      projectId: sessionStorage.getItem('projectId')
-    };
-
-    const pdfBrowserDownload = (fileName, pdfUrl) => {
-      setTimeout(() => {
-        let fileOutputLink = document.createElement('a');
-
-        fileOutputLink.setAttribute('download', fileName);
-        fileOutputLink.setAttribute('target', '_blank');
-        fileOutputLink.href = pdfUrl;
-        fileOutputLink.style.display = 'none';
-        document.body.appendChild(fileOutputLink);
-        setTimeout(() => {
-          fileOutputLink.click();
-        }, 100);
-        document.body.removeChild(fileOutputLink);
-        this.setState({
-          isModalVisible: false,
-          imageUri: '',
-          image: ''
-        });
-
-        document.removeEventListener('keydown', this.onKeyDown, false);
-        document.removeEventListener(
-          'mouseup',
-          this.onMouseUp_On_New_Save_SQ_DA,
-          false
-        );
-      }, 750);
-    };
-
-    const downloadSummaryHandler = () => {
-      // for imgCapture
-      let img3D = 'false';
-      let img2DPlain = 'false',
-        imgFront = 'false',
-        imgBack = 'false',
-        imgLeft = 'false',
-        imgRight = 'false';
-
-      // for header
-      const projectTitle = summaryContextValue.projectTitle;
-      const fName = summaryContextValue.firstName ?? '';
-      const lName = summaryContextValue.lastName ?? '';
-      const creator = (fName + ' ' + lName).trim();
-      const createDate = moment(new Date()).format('DD-MM-YYYY');
-      const projectID = summaryContextValue.projectId ?? '';
-      // for project save
-      const projectData = JSON.stringify(this.props.state.get('scene').toJS());
-      // for cabinet list
-      const cabinetList = window.productsInReview;
-      // for print checkboxes
-      const print_check = { check_3d, check_2d, check_list };
-      if (!this.state.isLoading) this.setState({ isLoading: true });
-
-      const wait_for_prepare_data = v => {
-        if (!v) {
-          setTimeout(downloadSummaryHandler, 1000);
-          return true;
-        }
-        return false;
-      };
-
-      if (check_3d) {
-        if (wait_for_prepare_data(window.pdf3DPlain)) return;
-        img3D = window.pdf3DPlain;
-      }
-      if (check_2d) {
-        if (wait_for_prepare_data(window.pdf2DPlain)) return;
-        img2DPlain = window.pdf2DPlain;
-
-        if (
-          wait_for_prepare_data(
-            window.__elevationImg.MODE_FRONT_ELEVATION_VIEW
-          ) ||
-          wait_for_prepare_data(
-            window.__elevationImg.MODE_BACK_ELEVATION_VIEW
-          ) ||
-          wait_for_prepare_data(
-            window.__elevationImg.MODE_LEFT_ELEVATION_VIEW
-          ) ||
-          wait_for_prepare_data(window.__elevationImg.MODE_RIGHT_ELEVATION_VIEW)
-        )
-          return;
-        imgFront = window.__elevationImg.MODE_FRONT_ELEVATION_VIEW;
-        imgBack = window.__elevationImg.MODE_BACK_ELEVATION_VIEW;
-        imgLeft = window.__elevationImg.MODE_LEFT_ELEVATION_VIEW;
-        imgRight = window.__elevationImg.MODE_RIGHT_ELEVATION_VIEW;
-      }
-
-      axios
-        .post(`${API_SERVER_URL}/api/project/downloadPDF`, {
-          monkeyDocId: monkeyDocId,
-          img3D: img3D,
-          img2DElevation: [img2DPlain, imgFront, imgBack, imgLeft, imgRight],
-          projectTitle: projectTitle,
-          creator: creator,
-          createDate: createDate,
-          summaryID: projectID + createDate,
-          projectID: projectID,
-          projectData: projectData,
-          cabinetList: cabinetList,
-          whatToPrint: print_check
-        })
-        .then(async res => {
-          const respData = res.data;
-          if (respData.success) {
-            this.setState({
-              isLoading: false,
-              monkeyDocId: respData.monkeyDocId
-            });
-            pdfBrowserDownload(respData.filename, respData.download_url);
-          } else {
-            this.setState({ isLoading: false });
-          }
-        });
-    };
-
-    return (
-      <DownloadSummaryContext.Provider value={summaryContextValue}>
-        <div>
-          <StyledDialog
-            id="showInfo"
-            open={visible}
-            onClose={() => this._closePanel()}
-          >
-            {isLoading && (
-              <div
-                style={{
-                  position: 'absolute',
-                  alignItems: 'center',
-                  width: '100%',
-                  height: '100%',
-                  opacity: '0.8',
-                  background: 'gray',
-                  zIndex: '10',
-                  justifyContent: 'center',
-                  display: 'flex'
-                }}
-              >
-                <img
-                  style={{ animation: 'spin 2s linear infinite' }}
-                  src={'/assets/img/loading_large.gif'}
-                  alt="img"
-                />
-              </div>
-            )}
-            <div
-              style={{
-                display: 'flex',
-                width: '100%',
-                userSelect: 'none ',
-                height: '100%'
-              }}
-            >
-              <div
-                style={{
-                  width: '45%',
-                  display: 'flex',
-                  padding: '40px 40px 40px 40px',
-                  flexDirection: 'column'
-                }}
-              >
-                <S.DialogTitle>Download Summary</S.DialogTitle>
-                <S.DialogContent style={{ margin: '10px 0' }}>
-                  You are almost there, customize your summary based on your
-                  requirements.
-                </S.DialogContent>
-                <div
-                  style={{
-                    height: '80%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    overflowY: 'scroll'
-                  }}
-                >
-                  {sessionStorage.getItem('email') === null && (
-                    <div style={{}}>
-                      <S.StyledInputWrapper>
-                        <S.StyledInput
-                          value={firstName}
-                          onChange={e =>
-                            this.setState({ firstName: e.target.value })
-                          }
-                          onFocus={e =>
-                            this.setState({ firstNameFocusOn: true })
-                          }
-                          onBlur={e =>
-                            this.setState({ firstNameFocusOn: false })
-                          }
-                          placeholder={
-                            firstNameFocusOn ? 'Enter First Name' : 'First Name'
-                          }
-                          required
-                        />
-                        {(firstNameFocusOn || !!firstName.length) && (
-                          <S.StyledInputHeadLabel
-                            style={{
-                              color: !firstNameFocusOn && TEXT_COLOR_NEUTRAL_2
-                            }}
-                          >
-                            First Name
-                          </S.StyledInputHeadLabel>
-                        )}
-                        {!!firstName.length && (
-                          <S.PlusImage
-                            maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                            onClick={() => this.setState({ firstName: '' })}
-                          />
-                        )}
-                      </S.StyledInputWrapper>
-                      <S.StyledInputWrapper>
-                        <S.StyledInput
-                          value={lastName}
-                          onChange={e =>
-                            this.setState({ lastName: e.target.value })
-                          }
-                          onFocus={e =>
-                            this.setState({ lastNameFocusOn: true })
-                          }
-                          onBlur={e =>
-                            this.setState({ lastNameFocusOn: false })
-                          }
-                          placeholder={
-                            lastNameFocusOn ? 'Enter Last Name' : 'Last Name'
-                          }
-                          required
-                        />
-                        {(lastNameFocusOn || !!lastName.length) && (
-                          <S.StyledInputHeadLabel
-                            style={{
-                              color: !lastNameFocusOn && TEXT_COLOR_NEUTRAL_2
-                            }}
-                          >
-                            Last Name
-                          </S.StyledInputHeadLabel>
-                        )}
-                        {!!lastName.length && (
-                          <S.PlusImage
-                            maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                            onClick={() => this.setState({ lastName: '' })}
-                          />
-                        )}
-                      </S.StyledInputWrapper>
-                      <S.StyledInputWrapper>
-                        <S.StyledInput
-                          value={email}
-                          onChange={e =>
-                            this.setState({ email: e.target.value })
-                          }
-                          onFocus={e => this.setState({ emailFocusOn: true })}
-                          onBlur={e => this.setState({ emailFocusOn: false })}
-                          placeholder={emailFocusOn ? 'Enter Email' : 'Email'}
-                          required
-                        />
-                        {(emailFocusOn || !!email.length) && (
-                          <S.StyledInputHeadLabel
-                            style={{
-                              color: !emailFocusOn && TEXT_COLOR_NEUTRAL_2
-                            }}
-                          >
-                            Email
-                          </S.StyledInputHeadLabel>
-                        )}
-                        {!!email.length && (
-                          <S.PlusImage
-                            maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                            onClick={() => this.setState({ email: '' })}
-                          />
-                        )}
-                      </S.StyledInputWrapper>
-                      <S.StyledInputWrapper>
-                        <S.StyledInput
-                          value={phone}
-                          onChange={e =>
-                            this.setState({ phone: e.target.value })
-                          }
-                          onFocus={() => this.setState({ phoneFocusOn: true })}
-                          onBlur={() => this.setState({ phoneFocusOn: false })}
-                          placeholder={
-                            phoneFocusOn ? 'Enter Phone Number' : 'Phone Number'
-                          }
-                          required
-                        />
-                        {(phoneFocusOn || !!phone.length) && (
-                          <S.StyledInputHeadLabel
-                            style={{
-                              color: !phoneFocusOn && TEXT_COLOR_NEUTRAL_2
-                            }}
-                          >
-                            Phone Number
-                          </S.StyledInputHeadLabel>
-                        )}
-                        {!!phone.length && (
-                          <S.PlusImage
-                            maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                            onClick={() => this.setState({ phone: '' })}
-                          />
-                        )}
-                      </S.StyledInputWrapper>
-                      <S.StyledInputWrapper>
-                        <S.StyledInput
-                          value={projectTitle}
-                          onChange={e =>
-                            this.setState({ projectTitle: e.target.value })
-                          }
-                          onFocus={() =>
-                            this.setState({ projectTitleFocusOn: true })
-                          }
-                          onBlur={() =>
-                            this.setState({ projectTitleFocusOn: false })
-                          }
-                          placeholder={
-                            projectTitleFocusOn
-                              ? 'Enter Project Name'
-                              : 'Project Name'
-                          }
-                          required
-                        />
-                        {(projectTitleFocusOn || !!projectTitle.length) && (
-                          <S.StyledInputHeadLabel
-                            style={{
-                              color:
-                                !projectTitleFocusOn && TEXT_COLOR_NEUTRAL_2
-                            }}
-                          >
-                            Project Name
-                          </S.StyledInputHeadLabel>
-                        )}
-                        {!!projectTitle.length && (
-                          <S.PlusImage
-                            maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                            onClick={() => this.setState({ projectTitle: '' })}
-                          />
-                        )}
-                      </S.StyledInputWrapper>
-                    </div>
-                  )}
-                  <S.DialogContent style={{ margin: '4px 0px' }}>
-                    What you want to print:
-                  </S.DialogContent>
-                  <FormControlLabel
-                    style={{ margin: '6px 0px' }}
-                    control={
-                      <StyledMuiCheckbox
-                        style={{ padding: 'unset' }}
-                        checked={check_3d}
-                        onChange={() => this.setState({ check_3d: !check_3d })}
-                        value={check_3d}
-                      />
-                    }
-                    label={
-                      <S.DialogContents>
-                        3D render of the kitchen
-                      </S.DialogContents>
-                    }
-                  />
-                  <FormControlLabel
-                    style={{ margin: '6px 0px' }}
-                    control={
-                      <StyledMuiCheckbox
-                        style={{ padding: 'unset' }}
-                        checked={check_2d}
-                        onChange={() => this.setState({ check_2d: !check_2d })}
-                        value={check_2d}
-                      />
-                    }
-                    label={
-                      <S.DialogContents>
-                        2D floor plan and elevations technical view
-                      </S.DialogContents>
-                    }
-                  />
-                  <FormControlLabel
-                    style={{ margin: '6px 0px' }}
-                    control={
-                      <StyledMuiCheckbox
-                        style={{ padding: 'unset' }}
-                        checked={check_list}
-                        onChange={() =>
-                          this.setState({ check_list: !check_list })
-                        }
-                        value={check_list}
-                      />
-                    }
-                    label={
-                      <S.DialogContents>
-                        List of parts with quantities and pricing
-                      </S.DialogContents>
-                    }
-                  />
-                </div>
-                <S.SaveBox onClick={downloadSummaryHandler}>
-                  <S.SelectTitle style={{ color: BG_COLOR_1 }}>
-                    Save & Download Summary
-                  </S.SelectTitle>
-                </S.SaveBox>
-              </div>
-              <DesignViewer>
-                <DesignViewerMask>
-                  <DesignViewerMaskInner />
-                </DesignViewerMask>
-                <DesignViewerInnerContent>
-                  <div style={{ paddingRight: '10px' }}>
-                    {check_3d && (
-                      <Show3DView
-                        props={this.props}
-                        setIsLoading3D={this.setIsLoading3D}
-                      />
-                    )}
-                    {check_2d && <Show2DView props={this.props} />}
-                    {check_2d && [
-                      <ShowElevationView
-                        props={this.props}
-                        mode={MODE_FRONT_ELEVATION_VIEW}
-                        setIsLoadingElevation={this.setIsLoadingElevation}
-                      />,
-                      <ShowElevationView
-                        props={this.props}
-                        mode={MODE_BACK_ELEVATION_VIEW}
-                        setIsLoadingElevation={this.setIsLoadingElevation}
-                      />,
-                      <ShowElevationView
-                        props={this.props}
-                        mode={MODE_LEFT_ELEVATION_VIEW}
-                        setIsLoadingElevation={this.setIsLoadingElevation}
-                      />,
-                      <ShowElevationView
-                        props={this.props}
-                        mode={MODE_RIGHT_ELEVATION_VIEW}
-                        setIsLoadingElevation={this.setIsLoadingElevation}
-                      />
-                    ]}
-                    {check_list && (
-                      <ShowCabinetInfo
-                        productDATA={window.productData || null}
-                        totalPrice={window.totalPrice}
-                        config={this.props.logoImage}
-                      />
-                    )}
-                    <ShowWarranty config={this.props.logoImage} />
-                  </div>
-                </DesignViewerInnerContent>
-              </DesignViewer>
-            </div>
-          </StyledDialog>
-        </div>
-      </DownloadSummaryContext.Provider>
-    );
-  }
-}
-
-export default DownloadSummaryPopup;
-

package/src/components/toolbar/popup/downloadsummary/show2D/show2DView.jsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import DownloadSummaryTemp from '../downloadSummaryTemp';
-import * as constants from '../../../../../constants';
-import Viewer2DDownLoad from './viewer2DDownLoad';
-
-const Show2DView = ({ props }) => {
-  return (
-    <DownloadSummaryTemp config={props.logoImage}>
-      <div style={{ marginBottom: '32px' }}>
-        <div
-          style={{
-            marginTop: '20px',
-            color: '#000F33',
-            fontSize: '17px',
-            fontFamily: constants.DEFAULT_FONT_FAMILY,
-            fontWeight: '700',
-            lineHeight: '45.9px',
-            wordWrap: 'break-word'
-          }}
-        >
-          {constants.TWO_D_FLOOR_PLAN}
-        </div>
-        <div
-          style={{
-            marginTop: 7,
-            color: '#434D63',
-            fontSize: '9px',
-            fontFamily: constants.DEFAULT_FONT_FAMILY,
-            fontWeight: '600',
-            lineHeight: '15px',
-            wordWrap: 'break-word'
-          }}
-        >
-          {constants.TECHNICAL_VIEW}
-        </div>
-      </div>
-      <div style={{ height: 412 }}>
-        <div style={{ transform: `scale(0.5, 0.5)`, width: 6, height: 2 }}>
-          <Viewer2DDownLoad
-            state={props.state}
-            catalog={props.catalog}
-            width={682}
-            height={560}
-          />
-        </div>
-      </div>
-    </DownloadSummaryTemp>
-  );
-};
-
-export default Show2DView;