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

package/src/components/toolbar/popup/cabinet/choose-product/index.jsx

@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+
+import { FaSearch, FaPlus, FaAngleLeft } from 'react-icons/fa';
+
+import * as S from '../../styles';
+import Appliance from '../../product/appliance';
+import ProductLine from '../../product/productline';
+import { ARRAY_3D_MODES } from '../../../../../constants';
+
+export const CabinetChooseProduct = ({
+  setStep,
+  chooseAction,
+  closeAction,
+  pData,
+  bFlag,
+  props,
+  doorExpand,
+  search,
+  dData,
+  onSearch,
+  mode,
+  isExpand
+}) => {
+  let temp = [];
+
+  for (let i = 0; i < pData.length; i++) {
+    if (pData[i].name.indexOf(search) != -1) temp.push(pData[i]);
+  }
+
+  pData = temp;
+  let cabinetselect = name => {
+    select(props.catalog.elements[name]);
+  };
+  let select = element => {
+    props.projectActions.unselectAll();
+    switch (element.prototype) {
+      case 'lines':
+        props.linesActions.selectToolDrawingLine(element.name);
+        break;
+      case 'items':
+        ARRAY_3D_MODES.includes(mode)
+          ? props.itemsActions.selectToolDrawingItem3D(element.name)
+          : props.itemsActions.selectToolDrawingItem(element.name);
+        break;
+      case 'holes':
+        props.holesActions.selectToolDrawingHole(element.name);
+        break;
+    }
+    props.itemsActions.updatePopupOpen(1);
+    props.projectActions.pushLastSelectedCatalogElementToHistory(element);
+    closeAction && closeAction();
+  };
+
+  let products = [];
+
+  if (pData.length > 0) {
+    let name = pData[0].type == 'cabinet' ? 'cabinet' : 'dir';
+    let blMolding = pData[0].asset.endsWith('.svg') ? 1 : 0;
+    if (!bFlag) {
+      for (let i = 0; i < pData.length; i++) {
+        if (!blMolding)
+          products.push(
+            <section
+              key={i.toString()}
+              style={{ width: '100%', position: 'relative' }}
+            >
+              <ProductLine
+                name={name}
+                onClick={() => {
+                  cabinetselect(pData[i].name);
+                }}
+                url={pData[i].thumbnail}
+                title={pData[i].long_name}
+                info={pData[i].info}
+                hascds={pData[i].hascds}
+              ></ProductLine>
+              {!pData[i].hascds && (
+                <S.UnAvailableText>Unavailable</S.UnAvailableText>
+              )}
+            </section>
+          );
+        else
+          products.push(
+            <Appliance
+              key={i.toString()}
+              name={'finishing'}
+              onClick={() => {
+                chooseAction(pData[i]);
+              }}
+              selected={pData[i].selected ? pData[i].selected : null}
+              url={pData[i].thumbnail}
+              title={pData[i].name}
+              category={pData[i].category}
+            />
+          );
+      }
+    }
+  }
+
+  let miHeight = bFlag ? 28 : 0;
+  let nonHeight = 495 - miHeight + 'px';
+  let height = window.innerHeight * 0.6 - miHeight + 'px';
+  return (
+    <S.ProductsContentWrapper
+      style={{
+        width: isExpand === 1 ? 400 : 220,
+        height: doorExpand ? height : nonHeight
+      }}
+    >
+      {isExpand === 1 ? (
+        <S.ItemWrapper style={{ flexWrap: 'wrap', border: 'none' }}>
+          {products}
+        </S.ItemWrapper>
+      ) : (
+        products
+      )}
+    </S.ProductsContentWrapper>
+  );
+};

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

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+
+import { DoubleToolbarButtonWithPopup } from '../';
+
+import { CabinetChooseProduct } from './choose-product/';
+import { CabinetCategory } from './cabinet-category';
+
+import { STEP_CABINET_CHOOSE_PRODUCT } from '../../../../constants';
+
+const CabinetToolbarButton = ({
+  trigger,
+  action,
+  chooseAction,
+  dataSource,
+  subData,
+  bFlag,
+  props,
+  dData,
+  isExpand,
+  expandAction,
+  closeAction,
+  cabinetCollapse,
+  doorCollapse,
+  doorExpand,
+  collapseAction,
+  searchCabinet,
+  search,
+  mode,
+  isOpen
+}) => {
+  const [step, setStep] = useState(STEP_CABINET_CHOOSE_PRODUCT);
+  let content = <div />;
+  let content1 = <div />;
+  content1 = (
+    <CabinetChooseProduct
+      action={action}
+      closeAction={closeAction}
+      chooseAction={chooseAction}
+      pData={subData}
+      dData={dData}
+      bFlag={0}
+      doorExpand={doorExpand}
+      props={props}
+      setStep={setStep}
+      search={searchCabinet}
+      onSearch={search}
+      mode={mode}
+      isExpand={isExpand}
+    ></CabinetChooseProduct>
+  );
+  content = (
+    <CabinetCategory
+      action={action}
+      pData={dataSource}
+      bFlag={bFlag}
+      doorExpand={doorExpand}
+      props={props}
+      setStep={setStep}
+      search={searchCabinet}
+      onSearch={search}
+      mode={mode}
+    ></CabinetCategory>
+  );
+  return (
+    <DoubleToolbarButtonWithPopup
+      closeAction={closeAction}
+      isOpen={isOpen}
+      mode={mode}
+      isExpand={isExpand}
+      expandAction={expandAction}
+      style={{ minWidth: step >= 1 && isExpand == 1 ? '800px' : '600px' }}
+      order={2}
+      isDouble={subData.length}
+      collapse1={cabinetCollapse}
+      collapse2={doorCollapse}
+      collapseAction={collapseAction}
+      trigger={trigger}
+      children1={content1}
+    >
+      {content}
+    </DoubleToolbarButtonWithPopup>
+  );
+};
+
+export default CabinetToolbarButton;

package/src/components/toolbar/popup/doorStyle/choose-style/index.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import * as S from '../../styles';
+import DoorStyleProduct from '../../product/doorstyleproduct';
+
+export const StyleChooseProduct = ({
+  dataSource,
+  isExpand,
+  currentTexture,
+  chooseAction,
+  selected
+}) => {
+  let miHeight = 0;
+  let nonHeight = 495 - miHeight + 'px';
+  // let height = (window.innerHeight * 0.6 - miHeight) + "px";
+
+  let products = [];
+  dataSource.forEach(el => {
+    products.push(
+      <DoorStyleProduct
+        key={el.name}
+        doorId={el.id}
+        isExpand={isExpand}
+        url={el.thumbnail}
+        name={el.name}
+        selected={selected}
+        currentTexture={currentTexture}
+        onClick={() => {
+          chooseAction(el);
+        }}
+      />
+    );
+  });
+
+  return (
+    <S.ProductsContentWrapper
+      style={{
+        padding: 18,
+        width: isExpand === 1 ? 800 : 300,
+        height: nonHeight
+      }}
+    >
+      <S.ItemWrapper
+        style={{
+          flexWrap: 'wrap',
+          border: 'none',
+          justifyContent: 'space-between'
+        }}
+      >
+        {products.map((product, key) => {
+          return (
+            <section
+              key={key}
+              style={{ width: isExpand === 1 ? '30%' : '45%' }}
+            >
+              {product}
+            </section>
+          );
+        })}
+      </S.ItemWrapper>
+    </S.ProductsContentWrapper>
+  );
+};

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

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { StyleCategory } from './style-category';
+import { StyleChooseProduct } from './choose-style';
+
+import { DoubleToolbarButtonWithPopup } from '../';
+
+const CabinetDoorStyleToolbarButton = ({
+  action,
+  chooseAction,
+  dataSource,
+  stepSource,
+  subData,
+  isOpen,
+  currentTexture,
+  recentStyle,
+  selectFromRecent,
+  step,
+  trigger,
+  categoryCollapse,
+  productCollapse,
+  collapseAction,
+  isExpand,
+  expandAction,
+  mode,
+  closeAction,
+  selected
+}) => {
+  let content = (
+    <StyleCategory
+      recentStyle={recentStyle}
+      selectFromRecent={selectFromRecent}
+      step={step}
+      action={action}
+      stepSource={stepSource}
+      dataSource={dataSource}
+      isExpand={!productCollapse}
+      currentTexture={currentTexture}
+    ></StyleCategory>
+  );
+  let content1 = (
+    <StyleChooseProduct
+      chooseAction={chooseAction}
+      dataSource={subData}
+      isExpand={isExpand}
+      selected={selected}
+      currentTexture={currentTexture}
+    ></StyleChooseProduct>
+  );
+  return (
+    <DoubleToolbarButtonWithPopup
+      isOpen={isOpen}
+      closeAction={closeAction}
+      mode={mode}
+      isExpand={isExpand}
+      expandAction={expandAction}
+      style={{ minWidth: step >= 1 && isExpand == 1 ? '800px' : '600px' }}
+      order={1}
+      isDouble={subData.length}
+      collapse1={categoryCollapse}
+      collapse2={productCollapse}
+      collapseAction={collapseAction}
+      trigger={trigger}
+      children1={content1}
+    >
+      {content}
+    </DoubleToolbarButtonWithPopup>
+  );
+};
+
+export default CabinetDoorStyleToolbarButton;

package/src/components/toolbar/popup/doorStyle/style-category/index.jsx

@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import ToolbarPanel from '../../../../sidebar/toolbar-panel';
+import * as S from '../../styles';
+
+import DoorStyle from '../../product/doorstyle';
+import PrimaryDoorStyle from '../../product/primary';
+export const StyleCategory = ({
+  step,
+  action,
+  dataSource,
+  stepSource,
+  isExpand,
+  currentTexture,
+  recentStyle,
+  selectFromRecent
+}) => {
+  const [selOption, setSelOption] = useState(-1);
+  const [selSubOption, setSelSbuOption] = useState(-1);
+
+  let miHeight = 0;
+  let nonHeight = 495 - miHeight + 'px';
+  let height = window.innerHeight * 0.6 - miHeight + 'px';
+  var result = <div></div>;
+
+  if (step === 0) {
+    // const recentDiv = [];
+    // recentStyle.map((el, key) => {
+    //   recentDiv.push(
+    //     <DoorStyle
+    //       key={key}
+    //       url={el.textureData.thumbnail}
+    //       name={el.textureData.name}
+    //       onClick={() => {selectFromRecent(key)}}
+    //     >
+    //     </DoorStyle>
+    //     );
+    // })
+    // // const categoryDiv = [];
+    // stepSource.forEach((el, key) => {
+    //   categoryDiv.push(
+    //     <ToolbarPanel
+    //       onClose={() => {action(key)}}
+    //       onOpen={() => {action(key)}}
+    //       isUrl={true}
+    //       key={key.toString()}
+    //       name={el.name}
+    //       url={el.thumbnail}>
+    //   </ToolbarPanel>
+    //   );
+    // })
+    result = (
+      // <ToolbarPanel
+      //   opened
+      //   onClose={() => {}}
+      //   onOpen={() => {}}
+      //   isUrl={false}
+      //   name={"Primary Door Style"}
+      //   url={null}>
+      <PrimaryDoorStyle
+        url={currentTexture !== null ? currentTexture.thumbnail : null}
+        title={currentTexture !== null ? currentTexture.name : null}
+        onClick={() => {
+          action(-1);
+        }}
+      />
+      // </ToolbarPanel>
+    );
+    {
+      /* {step === 1
+      ? (
+        <div>
+          {categoryDiv}
+        </div>
+        )
+      : ( <div></div>)} */
+    }
+    {
+      /* <ToolbarPanel
+        opened
+        onClose={() => {}}
+        onOpen={() => {}}
+        isUrl={false}
+        name={"Recently Used"}
+        url={null}>
+        <div style={{  width: 200, padding: 5, display:'flex', width: '100%',overflowX: "auto"} } >
+          {recentDiv}
+        </div>
+      </ToolbarPanel> */
+    }
+  } else {
+    result = [];
+    stepSource.forEach((el, key) => {
+      const toolbarChildren = [];
+      el.items.forEach((element, idx) => {
+        toolbarChildren.push(
+          <DoorStyle
+            key={idx}
+            idx={idx}
+            subOptionIdx={key}
+            selSubOption={selSubOption}
+            url={element.thumbnail}
+            name={element.name}
+            selOption={selOption}
+            onClick={() => {
+              action(el.name + '/' + element.name);
+              setSelOption(idx);
+              setSelSbuOption(key);
+            }}
+          ></DoorStyle>
+        );
+      });
+      result.push(
+        <S.ItemWrapper key={key.toString()}>
+          <ToolbarPanel
+            // onClose={() => {action(el.name)}}
+            // onOpen={() => {action(el.name)}}
+            onClose={() => {}}
+            onOpen={() => {}}
+            isUrl={true}
+            key={key.toString()}
+            idx={key}
+            selSubOption={selSubOption}
+            name={el.name}
+            url={el.thumbnail}
+          >
+            {toolbarChildren}
+          </ToolbarPanel>
+        </S.ItemWrapper>
+      );
+    });
+  }
+  return (
+    <S.CategoryContentWrapper
+      style={{ height: isExpand ? height : nonHeight, maxWidth: 185 }}
+    >
+      {result}
+    </S.CategoryContentWrapper>
+  );
+};

package/src/components/toolbar/popup/downloadsummary/downloadSummaryContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const DownloadSummaryContext = createContext(null);

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

@@ -0,0 +1,157 @@
+import React, { useContext } from 'react';
+import moment from 'moment';
+import { DownloadSummaryContext } from './downloadSummaryContext';
+
+const DownloadSummaryTemp = config => {
+  const summaryContextValue = useContext(DownloadSummaryContext);
+
+  const clientName = (
+    (summaryContextValue?.firstName ?? '') +
+    ' ' +
+    (summaryContextValue?.lastName ?? '')
+  ).trim();
+
+  const projectId = summaryContextValue?.projectId
+    ? `#${summaryContextValue?.projectId}`
+    : '';
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.header}>
+        <div style={styles.header_log}>
+          <div
+            style={{
+              height: '40px',
+              width: '40px',
+              backgroundColor: 'blueviolet'
+            }}
+          >
+            <img src={config?.config} width="100%" height="100%" />
+          </div>
+          <span style={{ padding: '0 10px' }}>
+            {summaryContextValue?.projectTitle ?? ''}
+          </span>
+        </div>
+        <span>
+          Created for:
+          <span
+            style={{
+              color: '#434D63',
+              fontWeight: '700',
+              marginLeft: 5
+            }}
+          >
+            {clientName}
+          </span>
+        </span>
+        <span>
+          Date:{' '}
+          <span style={{ color: '#434D63', fontWeight: '700', marginLeft: 5 }}>
+            {moment(new Date()).format('DD-MM-YYYY')}
+          </span>
+        </span>
+        <span>
+          ID:{' '}
+          <span
+            style={{
+              color: '#434D63',
+              fontWeight: '700',
+              marginLeft: 5
+            }}
+          >
+            {projectId}
+          </span>
+        </span>
+      </div>
+      {config.children}
+      <div
+        style={{
+          textAlign: 'justify',
+          margin: '0 0 40px 0',
+          fontSize: '7px',
+          color: '#565F77'
+        }}
+      >
+        <span
+          style={{
+            // fontSize: '8px',
+            fontFamily: 'Open Sans',
+            fontWeight: '700',
+            lineHeight: '13px',
+            wordWrap: 'break-word'
+          }}
+        >
+          Disclaimer:
+        </span>{' '}
+        <span
+          style={{
+            // fontSize: '8px',
+            fontFamily: 'Open Sans',
+            fontWeight: '400',
+            lineHeight: '13px',
+            wordWrap: 'break-word'
+          }}
+        >
+          DIY Design Space not take responsibility for the accuracy of
+          measurements or furniture arrangements. The prices displayed here
+          apply to items in stock at the time of the offer's issuance. All
+          delivery, assembly, and installation services required are billed are
+          billed separately and are not included in the price. While we strive
+          to ensure the accuracy of the information in this program, we
+          apologize for any errors that may occur.
+        </span>
+      </div>
+      <div style={styles.footer}>
+        <span>© DIY.DS v1.0/2024</span>
+        <span>DIY Design Space® 2024 All rights reserved</span>
+      </div>
+    </div>
+  );
+};
+
+const styles = {
+  container: {
+    // width: '454px',
+    // height: '784px',
+    // minHeight:'100%',
+    backgroundColor: '#fff',
+    padding: '30px 30px',
+    marginBottom: '10px',
+    borderRadius: '5px',
+    fontFamily: 'Open Sans'
+  },
+  header: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '5px 0',
+    borderBottom: '1px solid #EAEDFF',
+    color: '#565F77',
+    fontSize: '7px',
+    fontWeight: '400',
+    lineHeight: '13px',
+    wordWrap: 'break-word',
+    fontFamily: 'Open Sans'
+  },
+  header_log: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  footer: {
+    padding: '15px 0',
+    borderTop: '1px solid #EAEDFF',
+    display: 'flex',
+    justifyContent: 'space-between',
+    fontFamily: 'Inter',
+    color: '#565F77',
+    fontSize: '7px',
+    lineHeight: '11.2px',
+    wordWrap: 'break-word'
+  }
+};
+
+export default DownloadSummaryTemp;