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

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

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

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