kitchen-simulator 5.0.0-test.1 → 5.0.0-test.12

package/src/components/toolbar/components/ReviewForQuote.jsx

@@ -1,635 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import * as S from '../../../../src/components/toolbar/main/styles';
-import {
-  DECIMAL_PLACES_2,
-  LOCAL_STORAGE_TOKEN_VALUE,
-  STATUS_POSITIVE_COLOR,
-  SUBMIT_ADD_CART,
-  SUBMIT_REQUEST_ASSIST,
-  TEXT_COLOR_NEUTRAL_2,
-  TOE_KICK_MOLDING
-} from '../../../../src/constants';
-import {
-  getToeKickMoldingThumbnail,
-  makeSKUForMagento
-} from '../../../../src/components/viewer2d/utils';
-import ReviewItem from '../../../../src/components/toolbar/popup/product/reviewItem';
-import ReviewMolding from '../../../../src/components/toolbar/popup/product/reviewMolding';
-import { formatNumber } from '../../../../src/utils/math';
-import {
-  refineMoldingForSummaryPdf,
-  refineProductForSummaryPdf
-} from '../../../utils/helper';
-import { useGetPricesBySku } from '../../../../src/hooks/useGetPricesBySku';
-import Skeleton from '@material-ui/lab/Skeleton';
-import ls from 'localstorage-slim';
-import InfoIcon from '@material-ui/icons/Info';
-import Tooltip from '@material-ui/core/Tooltip';
-import { useValidateToken } from '../../../../src/hooks/useValidateToken';
-
-export const ReviewForQuote = ({
-  accessToken,
-  currentTexture,
-  userInfo,
-  doorStyles,
-  catalog,
-  categoryData,
-  handleSubmitPrompt,
-  handleSubmitForQuote,
-  setDownloadPopupVisible,
-  moldingData,
-  items,
-  measurementUnit,
-  isTokenPresent
-}) => {
-  const getSkus = useCallback(
-    data => {
-      if (data && typeof data.entrySeq === 'function') {
-        return data
-          .entrySeq()
-          .map(([itemID, item]) =>
-            makeSKUForMagento(item, catalog, categoryData)
-          )
-          .filter(sku => sku && !sku.startsWith('#'))
-          .filter(Boolean)
-          .toJS();
-      }
-      if (Array.isArray(data)) {
-        return data
-          .map(item => makeSKUForMagento(item, catalog, categoryData))
-          .filter(sku => sku && !sku.startsWith('#'))
-          .filter(Boolean);
-      }
-      return [];
-    },
-    [catalog]
-  );
-
-  const { data } = useValidateToken(accessToken);
-
-  const {
-    data: { prices = [] },
-    isFetching
-  } = useGetPricesBySku(
-    data?.source === 'none' ? [] : [...getSkus(items), ...getSkus(moldingData)]
-  );
-
-  const products = React.useMemo(() => {
-    const _products = {};
-
-    if (!prices || isFetching || data?.source === 'none') return _products;
-
-    prices.forEach(data => {
-      _products[data.sku] = {
-        description: data.description,
-        discounted_price: data.discounted_price,
-        name: data.name,
-        qty: parseInt(data.qty),
-        regular_price: data.regular_price,
-        tier: data.tier
-      };
-    });
-
-    return _products;
-  }, [prices, isFetching, data]);
-
-  const downloadToFile = useCallback(
-    event => {
-      event.preventDefault();
-      event.stopPropagation();
-
-      setDownloadPopupVisible(true);
-
-      const productsInReview = [];
-
-      const tmpProduct = [];
-      Object.keys(usedObjects).forEach(internalSKU => {
-        const item = items.find(
-          item => makeSKUForMagento(item, catalog, categoryData) === internalSKU
-        );
-        const molding = moldingData.find(
-          molding =>
-            makeSKUForMagento(molding, catalog, categoryData) === internalSKU
-        );
-
-        if (item) {
-          const prodCount = usedObjects[internalSKU]?.count ?? 1;
-          tmpProduct.push(
-            <ReviewItem
-              key={item.id}
-              downLoad={true}
-              catalog={catalog}
-              categoryData={categoryData}
-              internalSKU={internalSKU}
-              product={products[internalSKU]}
-              suffix={currentTexture?.install}
-              item={item}
-              measurementUnit={measurementUnit}
-              count={prodCount}
-              loading={isFetching || data?.source === 'none'}
-            />
-          );
-          refineProductForSummaryPdf(
-            productsInReview,
-            catalog,
-            categoryData,
-            internalSKU,
-            currentTexture?.install,
-            item,
-            products[internalSKU],
-            measurementUnit,
-            prodCount
-          );
-        } else if (molding) {
-          tmpProduct.push(
-            <ReviewMolding
-              key={molding.id}
-              downLoad={true}
-              molding={molding}
-              internalSKU={internalSKU}
-              product={products[internalSKU]}
-              loading={isFetching || data?.source === 'none'}
-            />
-          );
-          refineMoldingForSummaryPdf(
-            productsInReview,
-            molding,
-            products[internalSKU],
-            internalSKU
-          );
-        }
-      });
-
-      window.productData = tmpProduct;
-      window.totalPrice = formatNumber(allDiscountedPrices, DECIMAL_PLACES_2);
-      window.productsInReview = productsInReview;
-    },
-    [
-      currentTexture,
-      moldingData,
-      products,
-      catalog,
-      categoryData,
-      measurementUnit,
-      isFetching,
-      data
-    ]
-  );
-
-  const {
-    allCount,
-    usedObjects,
-    allDiscountedPrices,
-    allRegularPrices,
-    allPrices
-  } = React.useMemo(() => {
-    let allCount = 0,
-      usedObjects = {},
-      allDiscountedPrices = 0,
-      allRegularPrices = 0,
-      allPrices = 0;
-
-    function processData(data, getSKU, getCount) {
-      data.forEach(element => {
-        const sku = getSKU(element);
-        if (!sku || sku.startsWith('#')) return;
-        const count = getCount(element);
-        const currentProduct = products[sku];
-
-        if (!usedObjects[sku]) {
-          usedObjects[sku] = {
-            count,
-            regularPrice: currentProduct
-              ? currentProduct.regular_price * count
-              : 0,
-            disCountPrice: currentProduct
-              ? currentProduct.discounted_price * count
-              : 0
-          };
-        } else {
-          usedObjects[sku].count += count;
-          if (currentProduct) {
-            usedObjects[sku].regularPrice +=
-              currentProduct.regular_price * count;
-            usedObjects[sku].disCountPrice +=
-              currentProduct.discounted_price * count;
-          }
-        }
-        if (currentProduct) {
-          allRegularPrices += currentProduct.regular_price * count;
-          allDiscountedPrices += currentProduct.discounted_price * count;
-          allPrices +=
-            (currentProduct.discounted_price || currentProduct.regular_price) *
-            count;
-        }
-        allCount += count;
-        if (currentTexture) {
-          usedObjects[sku].installation_type = currentTexture.install;
-        }
-      });
-    }
-
-    // Process cabinet items
-    processData(
-      items.filter(e => e.itemID !== undefined),
-      element => makeSKUForMagento(element, catalog, categoryData),
-      () => 1
-    );
-
-    // Process molding data
-    processData(
-      moldingData,
-      molding => makeSKUForMagento(molding, catalog, categoryData),
-      molding => molding.count
-    );
-
-    return {
-      allCount,
-      usedObjects,
-      allDiscountedPrices: parseFloat(allDiscountedPrices.toFixed(2)),
-      allRegularPrices: parseFloat(allRegularPrices.toFixed(2)),
-      allPrices: parseFloat(allPrices.toFixed(2))
-    };
-  }, [prices, catalog, moldingData, products]);
-
-  useEffect(() => {
-    if (!isFetching && data?.source !== 'none') {
-      sessionStorage.setItem('usedObjects', JSON.stringify(usedObjects));
-    }
-  }, [usedObjects, isFetching, data]);
-
-  const discountType = () => {
-    switch (ls.get('DISCOUNT_TYPE')?.toUpperCase()) {
-      case 'CUSTOM':
-        return 'Account';
-      case 'GENERAL':
-        return 'Active Sale';
-      default:
-        return 'Tier';
-    }
-  };
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center'
-        }}
-      >
-        <S.SubCategoryTitle style={{ margin: '0 0 10px 15px' }}>
-          Review & Quote
-        </S.SubCategoryTitle>
-        <div
-          style={{
-            display: 'flex',
-            gap: '1rem',
-            alignItems: 'center'
-          }}
-        >
-          <div
-            style={{
-              background: '#FAFAFF',
-              padding: '5px 10px',
-              borderRadius: 5,
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              height: 'fit-content'
-            }}
-          >
-            <img
-              src={
-                doorStyles &&
-                currentTexture &&
-                doorStyles.filter(
-                  item =>
-                    item.name.toLowerCase() ===
-                    currentTexture.install?.toLowerCase()
-                )[0]?.thumbnail
-              }
-              style={{ height: 24 }}
-            />
-            <S.ReviewQuoteItemLabel
-              style={{
-                fontWeight: 'bold'
-              }}
-            >
-              {currentTexture && currentTexture.install}
-            </S.ReviewQuoteItemLabel>
-          </div>
-          <div
-            style={{
-              background: '#FAFAFF',
-              padding: '5px 10px',
-              borderRadius: 5,
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              height: 'fit-content'
-            }}
-          >
-            <img
-              src={
-                doorStyles &&
-                currentTexture &&
-                doorStyles
-                  .filter(item => item.name === currentTexture.install)[0]
-                  ?.items.filter(
-                    i => i.name === currentTexture.door_style_name
-                  )[0]?.thumbnail
-              }
-              style={{ height: 24 }}
-            />
-            <S.ReviewQuoteItemLabel
-              style={{
-                fontWeight: 'bold'
-              }}
-            >
-              {currentTexture && currentTexture.name}
-            </S.ReviewQuoteItemLabel>
-          </div>
-        </div>
-      </div>
-      <S.ReviewQuoteTable>
-        <S.ReviewQuoteThead style={{ backgroundColor: '#FAFAFF' }}>
-          <S.ReviewQuoteTh
-            style={{
-              width: 310,
-              textAlign: 'left',
-              marginLeft: 15,
-              color: '#565F77'
-            }}
-          >
-            Product
-          </S.ReviewQuoteTh>
-          <S.ReviewQuoteTh style={{ width: 80, color: '#565F77' }}>
-            Door
-          </S.ReviewQuoteTh>
-          <S.ReviewQuoteTh style={{ width: 50, color: '#565F77' }}>
-            Qty
-          </S.ReviewQuoteTh>
-          <S.ReviewQuoteTh style={{ width: 100, color: '#565F77' }}>
-            Retail Price
-          </S.ReviewQuoteTh>
-          <S.ReviewQuoteTh style={{ width: 100, color: '#565F77' }}>
-            Discounted Price
-          </S.ReviewQuoteTh>
-          <S.ReviewQuoteTh
-            style={{
-              width: 80,
-              marginRight: 15,
-              color: '#565F77'
-            }}
-          >
-            Subtotal
-          </S.ReviewQuoteTh>
-        </S.ReviewQuoteThead>
-        <div
-          style={{
-            overflowY: 'scroll',
-            maxHeight: 'calc(100vh - 420px)',
-            minHeight: 100
-          }}
-        >
-          {Object.keys(usedObjects).map(internalSKU => {
-            const item = items.find(
-              item =>
-                makeSKUForMagento(item, catalog, categoryData) === internalSKU
-            );
-
-            const molding = moldingData.find(
-              molding =>
-                makeSKUForMagento(molding, catalog, categoryData) ===
-                internalSKU
-            );
-
-            if (item) {
-              return (
-                <ReviewItem
-                  key={internalSKU}
-                  downLoad={false}
-                  catalog={catalog}
-                  categoryData={categoryData}
-                  internalSKU={internalSKU}
-                  suffix={currentTexture?.install}
-                  item={item}
-                  measurementUnit={measurementUnit}
-                  count={
-                    usedObjects[internalSKU] !== undefined
-                      ? usedObjects[internalSKU].count
-                      : 1
-                  }
-                  product={products[internalSKU]}
-                  loading={isFetching || data?.source === 'none'}
-                />
-              );
-            }
-            if (molding) {
-              return (
-                <ReviewMolding
-                  key={internalSKU}
-                  downLoad={false}
-                  molding={molding}
-                  internalSKU={internalSKU}
-                  product={products[internalSKU]}
-                  loading={isFetching || data?.source === 'none'}
-                />
-              );
-            }
-
-            return <></>;
-          })}
-        </div>
-        <S.ReviewQuoteThead
-          style={{ backgroundColor: '#FAFAFF', marginBottom: 15 }}
-        >
-          <S.ReviewQuoteTh2
-            style={{
-              width: 310,
-              textAlign: 'left',
-              marginLeft: 15
-            }}
-          >
-            Grand Total
-            {ls.get('DISCOUNT_TYPE') &&
-              ls.get('DISCOUNT_TYPE') !== 'retail' && (
-                <span
-                  style={{
-                    marginLeft: '0.5rem',
-                    fontSize: '12px'
-                  }}
-                >
-                  *Discounts based on your {discountType()}
-                </span>
-              )}
-          </S.ReviewQuoteTh2>
-          <S.ReviewQuoteTh2 style={{ width: 80 }} />
-          <S.ReviewQuoteTh2 style={{ width: 50 }}>
-            {isFetching || data?.source === 'none' ? (
-              <Skeleton variant="text" width={30} height={18} />
-            ) : (
-              allCount
-            )}
-          </S.ReviewQuoteTh2>
-          <S.ReviewQuoteTh2 style={{ width: 100 }}>
-            {isFetching || data?.source === 'none' ? (
-              <Skeleton variant="text" width={50} height={18} />
-            ) : (
-              `$${formatNumber(allRegularPrices, DECIMAL_PLACES_2)}`
-            )}
-          </S.ReviewQuoteTh2>
-          <S.ReviewQuoteTh2
-            style={{
-              width: 100,
-              color:
-                allDiscountedPrices !== allRegularPrices
-                  ? STATUS_POSITIVE_COLOR
-                  : TEXT_COLOR_NEUTRAL_2
-            }}
-          >
-            {isFetching || data?.source === 'none' ? (
-              <Skeleton variant="text" width={50} height={18} />
-            ) : allDiscountedPrices !== allRegularPrices ? (
-              `$${formatNumber(allDiscountedPrices, DECIMAL_PLACES_2)}`
-            ) : (
-              `-`
-            )}
-          </S.ReviewQuoteTh2>
-          <S.ReviewQuoteTh2
-            style={{
-              width: 80,
-              marginRight: 15,
-              color: '#4C12A1'
-            }}
-          >
-            {isFetching || data?.source === 'none' ? (
-              <Skeleton variant="text" width={50} height={18} />
-            ) : (
-              `$${formatNumber(allDiscountedPrices, DECIMAL_PLACES_2)}`
-            )}
-          </S.ReviewQuoteTh2>
-        </S.ReviewQuoteThead>
-      </S.ReviewQuoteTable>
-
-      <div
-        style={{
-          display: 'flex',
-          marginTop: 15,
-          justifyContent: 'flex-start'
-        }}
-      >
-        <Tooltip
-          title={
-            !isTokenPresent ? (
-              <span
-                style={{
-                  fontSize: 14
-                }}
-              >
-                You need to <b>save the project</b> before requesting Designer
-                Assistance.
-              </span>
-            ) : (
-              ''
-            )
-          }
-        >
-          <S.Button
-            style={{ fontSize: 16 }}
-            onClick={() => {
-              if (userInfo.pid === undefined)
-                handleSubmitPrompt(SUBMIT_REQUEST_ASSIST);
-              else handleSubmitForQuote(true, SUBMIT_REQUEST_ASSIST);
-            }}
-          >
-            <img
-              style={{ marginRight: 10 }}
-              src="\assets\img\svg\headerbar\assist.svg"
-            />
-            Designer Assistance
-            {!isTokenPresent && (
-              <div
-                style={{
-                  width: '5px',
-                  height: '5px',
-                  position: 'relative'
-                }}
-              >
-                <InfoIcon
-                  style={{
-                    position: 'absolute',
-                    width: '15px',
-                    height: '15px',
-                    bottom: '8px',
-                    right: '-20px'
-                  }}
-                />
-              </div>
-            )}
-          </S.Button>
-        </Tooltip>
-
-        <Tooltip
-          key="test"
-          title={
-            !isTokenPresent ? (
-              <span
-                style={{
-                  fontSize: 14
-                }}
-              >
-                You need to <b>save the project</b> before Adding to Cart
-              </span>
-            ) : (
-              ''
-            )
-          }
-        >
-          <S.Button
-            onClick={() => {
-              if (userInfo.pid === undefined)
-                handleSubmitPrompt(SUBMIT_ADD_CART);
-              else handleSubmitForQuote(true, SUBMIT_ADD_CART);
-            }}
-          >
-            <img
-              style={{ marginRight: 10 }}
-              src="\assets\img\svg\toolbar\shopping-cart.svg"
-            />
-            Add to Cart
-            {!isTokenPresent && (
-              <div
-                style={{
-                  width: '5px',
-                  height: '5px',
-                  position: 'relative'
-                }}
-              >
-                <InfoIcon
-                  style={{
-                    position: 'absolute',
-                    width: '15px',
-                    height: '15px',
-                    bottom: '8px',
-                    right: '-20px'
-                  }}
-                />
-              </div>
-            )}
-          </S.Button>
-        </Tooltip>
-
-        {/*<S.Button onClick={downloadToFile}>*/}
-        {/*  <img*/}
-        {/*    style={{ marginRight: 10 }}*/}
-        {/*    src="\assets\img\svg\toolbar\download.svg"*/}
-        {/*  />*/}
-        {/*  Download Summary*/}
-        {/*</S.Button>*/}
-      </div>
-    </div>
-  );
-};

package/src/components/toolbar/export.js

@@ -1,21 +0,0 @@
-import ToolbarButton from './button/ToggleButton';
-import RightButton from './button/RightButton';
-import ToolbarSaveButton from './toolbar-save-button';
-import ToolbarLoadButton from './toolbar-load-button';
-import Toolbar from './main';
-
-export {
-  ToolbarButton,
-  RightButton,
-  ToolbarSaveButton,
-  ToolbarLoadButton,
-  Toolbar
-};
-
-export default {
-  ToolbarButton,
-  RightButton,
-  ToolbarSaveButton,
-  ToolbarLoadButton,
-  Toolbar
-};