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

package/src/components/toolbar/popup/downloadsummary/showElevation/viewerElevationDownload.jsx

@@ -0,0 +1,152 @@
+import React, { useEffect, useState } from 'react';
+import State3D from '../../../../viewer3d/ruler-utils/state3D';
+import { getSignedUrl } from '../../../../../utils/helper';
+import Viewer3D from '../../../../viewer3d/viewer3d';
+
+const ViewerElevationDownLoad = ({ state, setIsLoadingElevation, catalog }) => {
+  const width = 682,
+    height = 500;
+
+  let pdfID = `${state.mode}_pdfID`;
+  let svgID = `${state.mode}_svgID`;
+
+  useEffect(() => {
+    if (!window.__elevationImg) {
+      window.__elevationImg = {};
+    }
+    return () => (window.__elevationImg[state.mode] = '');
+  }, []);
+
+  const saveSVGScreenshotToFile = async () => {
+    let maxWidthSVGElement = document.getElementById(`${svgID}`);
+
+    if (maxWidthSVGElement !== null) {
+      let images = maxWidthSVGElement.getElementsByTagName('image');
+
+      let readBlob = b => {
+        return new Promise(res => {
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            res(reader.result);
+          };
+          reader.onerror = () => {
+            res(b);
+          };
+          reader.readAsDataURL(b);
+        });
+      };
+
+      try {
+        for (let image of images) {
+          const url = getSignedUrl(image.getAttribute('href'));
+          const response = await fetch(url, { cache: 'no-store' });
+          const blob = await response.blob();
+          const content = await readBlob(blob);
+          image.setAttribute('href', content);
+        }
+      } catch (e) {}
+      // End: Change Image tags' href to local data src
+    }
+
+    let serializer = new XMLSerializer();
+
+    let img = new Image();
+    let img2 = new Image();
+    // I create the new canvas to draw
+    let canvas2D3DPlain1 = document.getElementById(`${pdfID}`);
+
+    if (canvas2D3DPlain1 !== null) {
+      let canvas2D3DPlain = canvas2D3DPlain1.getElementsByTagName('canvas')[0];
+
+      let canvas42DPlain = document.createElement('canvas');
+      let ctx = canvas42DPlain.getContext('2d');
+
+      // Set width and height for the new canvas
+      let heightAtt = document.createAttribute('height');
+      heightAtt.value = maxWidthSVGElement.height.baseVal.value;
+      canvas42DPlain.setAttributeNode(heightAtt);
+
+      let widthAtt = document.createAttribute('width');
+      widthAtt.value = maxWidthSVGElement.width.baseVal.value;
+      canvas42DPlain.setAttributeNode(widthAtt);
+
+      ctx.fillStyle = 'white';
+      ctx.fillRect(0, 0, canvas42DPlain.width, canvas42DPlain.height);
+
+      img.crossOrigin = 'anonymous';
+      img.src = `data:image/svg+xml;base64,${window.btoa(
+        serializer.serializeToString(maxWidthSVGElement)
+      )}`;
+      img2.crossOrigin = 'anonymous';
+      img2.src = canvas2D3DPlain.toDataURL();
+
+      img2.onload = () => {
+        ctx.globalAlpha = 1;
+        ctx.drawImage(
+          img2,
+          0,
+          0,
+          maxWidthSVGElement.width.baseVal.value,
+          maxWidthSVGElement.height.baseVal.value
+        );
+        ctx.drawImage(
+          img,
+          0,
+          0,
+          maxWidthSVGElement.width.baseVal.value,
+          maxWidthSVGElement.height.baseVal.value
+        );
+
+        window.__elevationImg[state.mode] = canvas42DPlain.toDataURL();
+      };
+    } else {
+      window.__elevationImg[state.mode] = '';
+    }
+  };
+
+  const _setIsLoadingElevation = (key, value) => {
+    if (!value) {
+      saveSVGScreenshotToFile();
+    }
+    setIsLoadingElevation(key, value);
+  };
+
+  return (
+    <div
+      id={pdfID}
+      style={{
+        position: 'relative',
+        transform: `scale(0.5,0.5)`,
+        width: 6,
+        height: 0
+      }}
+    >
+      <svg
+        id={svgID}
+        width={width}
+        height={height}
+        style={{ position: 'absolute' }}
+      >
+        <g transform={`translate(${width / 2}, ${height / 2})`}>
+          <State3D
+            state={state}
+            catalog={catalog}
+            width={width}
+            height={height}
+            downloadFlag={true}
+          />
+        </g>
+      </svg>
+
+      <Viewer3D
+        state={state}
+        setIsLoadingElevation={_setIsLoadingElevation}
+        width={width}
+        height={height}
+        downloadFlag={true}
+      />
+    </div>
+  );
+};
+
+export default ViewerElevationDownLoad;

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

@@ -0,0 +1,149 @@
+import React from 'react';
+import DownloadSummaryTemp from './downloadSummaryTemp';
+import * as constants from '../../../../constants';
+import moment from 'moment';
+
+const styles = {
+  viewTitle: {
+    color: '#565F77',
+    marginBottom: 'inherit',
+    fontSize: '9px',
+    fontFamily: constants.DEFAULT_FONT_FAMILY,
+    fontWeight: '700',
+    lineHeight: '12.6px',
+    wordWrap: 'break-word'
+  },
+  viewWarranty: {
+    color: '#565F77',
+    margin: 'inherit',
+    fontSize: '7px',
+    fontFamily: constants.DEFAULT_FONT_FAMILY,
+    fontWeight: '400',
+    lineHeight: '12.6px',
+    wordWrap: 'break-word',
+    marginTop: '4px'
+  },
+  viewWarranty_1: {
+    color: '#565F77',
+    margin: 'inherit',
+    fontSize: '7px',
+    fontFamily: constants.DEFAULT_FONT_FAMILY,
+    fontWeight: '400',
+    lineHeight: '12.6px',
+    wordWrap: 'break-word',
+    marginTop: '20px'
+  }
+};
+
+const ShowWarranty = props => {
+  return (
+    <DownloadSummaryTemp config={props}>
+      <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.WARRANTY_VIEW}
+        </div>
+        <div
+          style={{
+            marginTop: 7,
+            color: '#434D63',
+            fontSize: '9px',
+            fontFamily: constants.DEFAULT_FONT_FAMILY,
+            fontWeight: '600',
+            lineHeight: '15px',
+            wordWrap: 'break-word'
+          }}
+        >
+          {constants.WARRANTY_SUPPORT}
+        </div>
+        <div style={{}}>
+          <h5 style={styles.viewTitle}>1. Coverage Period</h5>
+          <p style={styles.viewWarranty}>
+            This warranty is valid for a period of{' '}
+            {moment(new Date()).format('MM-YYYY')}/[XX months/years] from the
+            original purchase date, as indicated on the purchase receipt.
+          </p>
+          <h5 style={styles.viewTitle}>2. Scope of Warranty</h5>
+          <p style={styles.viewWarranty}>
+            This warranty covers defects in materials and workmanship under
+            normal use. It does not cover damage caused by misuse, neglect,
+            unauthorized modifications, or external factors such as accidents or
+            natural disasters.
+          </p>
+          <h5 style={styles.viewTitle}>3. Warranty Claim Process</h5>
+          <p style={styles.viewWarranty}>
+            <span>To file a warranty claim:</span>
+            <ul style={{ paddingLeft: '15px', marginTop: '10px' }}>
+              <li>
+                Contact our support team at [support email or phone number].
+              </li>
+              <li>
+                Provide proof of purchase and a detailed description of the
+                issue.
+              </li>
+              <li>
+                Follow instructions for returning the product or scheduling an
+                inspection.
+              </li>
+            </ul>
+          </p>
+          <h5 style={styles.viewTitle}>4. Remedies</h5>
+          <p style={styles.viewWarranty}>
+            <span>
+              If a defect is confirmed, DIY Design Space will, at its
+              discretion:
+            </span>
+            <ul style={{ paddingLeft: '15px', marginTop: '10px' }}>
+              <li>Repair the defective item.</li>
+              <li>Replace it with an identical or equivalent product.</li>
+              <li>Refund the purchase price.</li>
+            </ul>
+          </p>
+          <h5 style={styles.viewTitle}>5. Limitations</h5>
+          <p style={styles.viewWarranty}>
+            This warranty is non-transferable and valid only for the original
+            purchaser. It excludes liability for incidental or consequential
+            damages arising from the use of the product.
+          </p>
+          <h5 style={styles.viewTitle}>6. Additional Terms</h5>
+          <p style={styles.viewWarranty}>
+            For products requiring maintenance, adherence to the recommended
+            care guidelines is necessary for warranty validity. This warranty
+            gives you specific legal rights, and you may also have other rights
+            that vary by jurisdiction. For complete details, please visit our
+            website at [website link].
+          </p>
+          <p style={styles.viewWarranty_1}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in
+            erat vitae purus venenatis vestibulum sed id nisi. Vestibulum sit
+            amet risus in nibh tempor ullamcorper. Sed porta vestibulum dui, et
+            feugiat libero vestibulum quis. Pellentesque habitant morbi
+            tristique senectus et netus et malesuada fames ac turpis egestas.
+            Quisque sit amet neque augue. Nam ornare nisl sed dui venenatis, a
+            accumsan purus imperdiet. Etiam iaculis leo ac risus efficitur
+            sollicitudin. Proin tincidunt feugiat lorem, a cursus diam.
+          </p>
+          <p style={styles.viewWarranty_1}>
+            Proin et lobortis lacus. Donec auctor tempor commodo. Morbi
+            tristique enim magna, sit amet rutrum metus facilisis lobortis.
+            Nullam quam nisi, ultricies nec ultricies ut, faucibus facilisis
+            nisi. Aenean eget interdum erat. Mauris efficitur lobortis sem,
+            vitae pretium augue luctus consectetur. In in justo eget ante
+            dapibus porttitor. Etiam vestibulum tempor mi ac aliquam.
+          </p>
+        </div>
+      </div>
+    </DownloadSummaryTemp>
+  );
+};
+
+export default ShowWarranty;

package/src/components/toolbar/popup/downloadsummary/styles.css

@@ -0,0 +1,177 @@
+/**
+ * Styles for submit for quote panel
+ */
+
+.submit-for-quote {
+  width: 100%;
+  height: 100%;
+  user-select: none;
+}
+
+.submit-for-quote-header {
+  background-color: #1183b7;
+  height: 30px;
+  padding-right: 6px;
+}
+
+.submit-for-quote-header-icon {
+  float: right;
+  margin-top: 4px;
+}
+
+.submit-for-quote-desc {
+  font-size: 14px;
+  margin-top: 20px;
+  margin-left: 40px;
+}
+
+.submit-for-quote-form {
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.submit-for-quote-form-item {
+  width: 345px;
+  margin-top: 20px;
+}
+
+.submit-for-quote-footer {
+  width: 70px;
+  margin-left: 350px;
+  margin-top: 15px;
+  cursor: pointer;
+}
+
+.submit-for-quote-form-item-label {
+  padding-left: 3px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.submit-for-quote-form-item-span {
+  display: inline-block;
+  width: 92px;
+  padding-left: 3px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.submit-for-quote-form-item-checkbox {
+  position: relative;
+  margin-right: 4px;
+  top: 2px;
+}
+
+.submit-for-quote-form-item-input {
+  width: 250px;
+  margin-left: 5px;
+}
+
+.submit-for-quote-form-item-button {
+  width: 230px;
+  height: 23px;
+  margin-left: 20px;
+  color: white !important;
+}
+
+.submit-for-quote-form-item-button > .MuiSelect-icon {
+  color: white !important;
+}
+
+.submit-for-quote-form-item-button-icon {
+  width: 45px;
+  display: inline-block;
+}
+
+.submit-for-quote-form-item-button-img {
+  display: block;
+  margin: auto;
+}
+
+.submit-for-quote-form-item-textarea {
+  width: 100%;
+  height: 100%;
+  margin-top: 10px;
+  resize: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 80%;
+  margin: auto;
+}
+
+.container {
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.adImgStyle {
+  width: 100%;
+  height: 600px;
+  margin: auto;
+}
+
+.baseFontStyle {
+  color: rgba(10, 10, 10, 0.692);
+  /* font-size: 12px; */
+  font-family: Open Sans;
+  /* font-weight: 600; */
+}
+
+.headerStyle {
+  margin-top: 20px;
+  padding: 15px 0;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid gray;
+}
+
+.footerStyle {
+  padding: 15px 0;
+  font-size: 12px;
+  border-top: 1px solid gray;
+  display: flex;
+  justify-content: space-between;
+  font-family: Open Sans;
+  color: #777777;
+}
+
+.contentStyle {
+  padding: 30px 0;
+}
+
+.summaryStore {
+  display: flex;
+  justify-content: space-between;
+  font-family: Open Sans;
+}
+
+.summaryStyle {
+  font-weight: 600;
+  padding-right: 200px;
+}
+
+.logoStyle {
+  width: 50px;
+  height: 50px;
+  background-color: steelblue;
+}
+
+.dividerStyle {
+  padding: 0 20px;
+}