kitchen-simulator 5.0.0-test.5 → 5.0.0-test.6

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

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

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