kitchen-simulator 5.0.0-test.7 → 5.0.0-test.8

package/src/components/toolbar/popup/product/floorproduct.jsx

@@ -1,42 +0,0 @@
-import React, { useState } from 'react';
-
-import * as S from './styles';
-import * as MS from '../styles';
-const STYLE_TITLE = {
-  fontSize: '12px',
-  color: '#fff',
-  padding: '5px 7px 8px 8px',
-  backgroundColor: '#3e3e3f',
-  display: 'flex',
-  height: '90px',
-  justifyContent: 'start',
-  alignItems: 'center'
-};
-
-export default function FloorProduct({ url, title, onClick, name }) {
-  return (
-    <S.FloorPlanContentWraper
-      style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}
-      onClick={onClick}
-    >
-      <h3 style={{ ...STYLE_TITLE }}>
-        <img name={name} src={url} width={40} height={60} />
-      </h3>
-      <div style={{ ...STYLE_TITLE }}>
-        <div style={{ width: '60px' }}>
-          <span>{title}</span>
-        </div>
-        <S.Control style={{ paddingLeft: 5 }}>
-          <S.ControlIcon key={name}>
-            <img
-              width={'60px'}
-              name={name}
-              src={'/assets/img/svg/toolbar/add_button.svg'}
-            />
-            <MS.ButtonTitle style={{ top: '40%' }}>ADD</MS.ButtonTitle>
-          </S.ControlIcon>
-        </S.Control>
-      </div>
-    </S.FloorPlanContentWraper>
-  );
-}

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

@@ -1,36 +0,0 @@
-import React, { useState } from 'react';
-
-import * as S from './styles';
-
-const STYLE_TITLE = {
-  fontSize: '12px',
-  color: '#fff',
-  padding: '10px',
-  // backgroundColor: '#3e3e3f',
-  margin: '0px',
-  cursor: 'pointer',
-  display: 'flex',
-  height: '85px',
-  justifyContent: 'start',
-  alignItems: 'center'
-};
-// const STYLE_CONTENT = {
-//   fontSize: '10px',
-//   color: 'rgba(222, 222, 222, 1)',
-//   padding: '0px',
-//   backgroundColor: '#28292d',
-// };
-// const STYLE_ARROW = {
-//   float: 'right'
-// };
-
-export default function Product({ url, title, onClick, name }) {
-  return (
-    <S.PlanWraper onClick={onClick}>
-      <h3 style={{ ...STYLE_TITLE, paddingLeft: url ? 15 : 0 }}>
-        {url !== null && <img name={name} src={url} height={60} />}
-        <span style={{ marginLeft: 23 }}> {title} </span>
-      </h3>
-    </S.PlanWraper>
-  );
-}

package/src/components/toolbar/popup/product/primary.jsx

@@ -1,77 +0,0 @@
-import React, { useState } from 'react';
-
-import * as S from './styles';
-import * as MS from '../styles';
-
-export default function PrimaryDoorStyle({ url, title, onClick }) {
-  if (title !== null) title = title.charAt(0).toUpperCase() + title.substr(1);
-
-  return (
-    <div style={{ height: '100%' }}>
-      <h3
-        style={{
-          fontSize: 12,
-          padding: '8px 15px',
-          backgroundColor: 'rgb(47, 47, 47)',
-          margin: 0,
-          display: 'flex',
-          height: 30,
-          justifyContent: 'start',
-          color: 'rgb(255, 255, 255)'
-        }}
-      >
-        <span> Current Door Style </span>
-      </h3>
-      <S.PrimayDoorStyleLineWrapper
-        id="primarywrapper"
-        style={{ padding: '5px 15px 8px', display: 'grid' }}
-      >
-        {title != null && (
-          <h4
-            style={{
-              marginTop: '3px',
-              marginBottom: '9px',
-              justifySelf: 'center'
-            }}
-          >
-            <strong>{title}</strong>
-          </h4>
-        )}
-        {title != null && (
-          <img
-            style={{ justifySelf: 'center' }}
-            name={title}
-            width={'90px'}
-            height={'155px'}
-            src={url}
-          />
-        )}
-        {/* <p> <strong>Collection :</strong> Brilliant White </p> */}
-        <div>
-          <p>
-            {' '}
-            <strong>Description: </strong>
-          </p>
-          <p>
-            Door selection for all cabinets. <br />
-            To browse the entire collection of doors see below.
-          </p>
-        </div>
-      </S.PrimayDoorStyleLineWrapper>
-      <div style={{ marginTop: title == null ? 125 : 40 }}>
-        <S.Control onClick={onClick}>
-          <S.ControlIcon key={title}>
-            <img
-              width={'100px'}
-              name={title}
-              src={'/assets/img/svg/toolbar/style_change_button.svg'}
-            />
-            <MS.ButtonTitle style={{ top: '42%', fontSize: 11 }}>
-              CHANGE
-            </MS.ButtonTitle>
-          </S.ControlIcon>
-        </S.Control>
-      </div>
-    </div>
-  );
-}

package/src/components/toolbar/popup/product/productline.jsx

@@ -1,93 +0,0 @@
-import React, { useState } from 'react';
-
-import * as S from './styles';
-import * as MS from '../styles';
-
-export default function ProductLine({
-  url,
-  title,
-  info,
-  onClick,
-  name,
-  hascds
-}) {
-  const [newstate, setNewstate] = useState(false);
-  title = title.charAt(0).toUpperCase() + title.substr(1);
-  let spanStyle = { fontSize: 11 };
-
-  return (
-    <S.LineWrapper style={{ padding: '5px 15px 8px' }}>
-      {hascds === true ? (
-        <S.Control onClick={onClick} style={{ marginTop: 3 }}>
-          <div style={{ width: '100%', display: 'flex' }}>
-            <S.LineImage>
-              <img
-                width={90}
-                height={90}
-                name={name}
-                src={url}
-                style={{ objectFit: 'contain' }}
-              />
-            </S.LineImage>
-            <div style={{ display: 'grid', marginLeft: '10px' }}>
-              <h4
-                style={{
-                  marginTop: '3px',
-                  marginBottom: '9px',
-                  overflowWrap: 'anywhere'
-                }}
-              >
-                <span style={{ fontSize: 12 }}>{title}</span>
-              </h4>
-              <span style={spanStyle}>Width: {info.width}"</span>
-              <span style={spanStyle}>Depth: {info.height}"</span>
-              <span style={spanStyle}>Height: {info.tall}"</span>
-
-              <S.ControlIcon key={name}>
-                <img
-                  width={72}
-                  name={name}
-                  src={'/assets/img/svg/toolbar/add_button.svg'}
-                />
-                <MS.ButtonTitle style={{ top: '37%', fontSize: 12 }}>
-                  ADD
-                </MS.ButtonTitle>
-              </S.ControlIcon>
-            </div>
-          </div>
-        </S.Control>
-      ) : (
-        <S.UnControl
-          // onClick={onClick}
-          style={{ marginTop: 3 }}
-        >
-          <div style={{ width: '100%', display: 'flex' }}>
-            <S.LineImage>
-              <img
-                width={90}
-                height={90}
-                name={name}
-                src={url}
-                style={{ objectFit: 'contain' }}
-              />
-            </S.LineImage>
-            <div style={{ display: 'grid', marginLeft: '10px' }}>
-              <h4
-                style={{
-                  marginTop: '3px',
-                  marginBottom: '9px',
-                  overflowWrap: 'anywhere'
-                }}
-              >
-                <span style={{ fontSize: 12 }}>{title}</span>
-              </h4>
-              <span style={spanStyle}>Width: {info.width}"</span>
-              <span style={spanStyle}>Depth: {info.height}"</span>
-              <span style={spanStyle}>Height: {info.tall}"</span>
-            </div>
-          </div>
-        </S.UnControl>
-      )}
-    </S.LineWrapper>
-  );
-}

package/src/components/toolbar/popup/product/reviewItem.jsx

@@ -1,427 +0,0 @@
-import React from 'react';
-import Tooltip from '@material-ui/core/Tooltip';
-import { withStyles } from '@material-ui/core/styles';
-import convert from 'convert-units';
-import {
-  BG_COLOR_1,
-  DEFAULT_FONT_FAMILY,
-  INSTALLATION_SUFFIX_TYPE,
-  STATUS_NEGATIVE_COLOR,
-  STATUS_NEGATIVE_LIGHT_COLOR,
-  STATUS_POSITIVE_COLOR,
-  STATUS_WARNING_COLOR,
-  STATUS_WARNING_LIGHT_COLOR,
-  TEXT_COLOR_NEUTRAL_0,
-  TEXT_COLOR_NEUTRAL_2
-} from '../../../../constants';
-import * as S from '../../main/styles';
-import {
-  getInstallationSuffix,
-  returnReplaceableDeepSearchType
-} from '../../../../components/viewer2d/utils';
-import Skeleton from '@material-ui/lab/Skeleton';
-
-const StyledTooltip = withStyles(theme => ({
-  tooltip: {
-    backgroundColor: TEXT_COLOR_NEUTRAL_0,
-    color: BG_COLOR_1,
-    maxWidth: 180,
-    fontSize: 9,
-    fontFamily: DEFAULT_FONT_FAMILY,
-    boxShadow:
-      '0px 3px 5px -1px rgba(156, 154, 154, 0.2), 0px 6px 10px 0px rgba(156, 154, 154, 0.39), 0px 1px 18px 0px rgba(156, 154, 154, 0.12)',
-    padding: '2px 15px'
-  }
-}))(Tooltip);
-
-export default function ReviewItem({
-  downLoad,
-  catalog,
-  internalSKU,
-  categoryData,
-  product,
-  item,
-  count,
-  measurementUnit,
-  suffix,
-  loading
-}) {
-  if (loading) {
-    return (
-      <div
-        style={{
-          height: 120,
-          display: 'flex',
-          justifyContent: 'space-between'
-        }}
-      >
-        {downLoad ? (
-          <div
-            style={{
-              width: '100%',
-              display: 'inline-flex',
-              justifyContent: 'space-between'
-            }}
-          >
-            <S.ReviewQuoteItem style={{ justifyContent: 'left' }}>
-              <Skeleton variant="rect" width={50} height={50} />
-              <Skeleton variant="text" width={80} height={15} />
-            </S.ReviewQuoteItem>
-            <S.ReviewQuoteItem style={{ justifyContent: 'right' }}>
-              <Skeleton variant="text" width={50} height={18} />
-            </S.ReviewQuoteItem>
-          </div>
-        ) : (
-          <>
-            <S.ReviewQuoteItem
-              style={{
-                justifyContent: 'unset',
-                width: 310,
-                marginLeft: 15,
-                gap: '1rem'
-              }}
-            >
-              <Skeleton variant="rect" width={100} height={100} />
-              <Skeleton variant="text" width={120} height={30} />
-            </S.ReviewQuoteItem>
-            <S.ReviewQuoteItem style={{ width: 80 }}>
-              <Skeleton variant="rect" width={60} height={30} />
-            </S.ReviewQuoteItem>
-            <S.ReviewQuoteItem style={{ width: 50 }}>
-              <Skeleton variant="text" width={30} height={15} />
-            </S.ReviewQuoteItem>
-            <S.ReviewQuoteItem style={{ width: 100 }}>
-              <Skeleton variant="text" width={50} height={18} />
-            </S.ReviewQuoteItem>
-            <S.ReviewQuoteItem style={{ width: 100 }}>
-              <Skeleton variant="text" width={50} height={18} />
-            </S.ReviewQuoteItem>
-            <S.ReviewQuoteItem style={{ width: 80, marginRight: 13 }}>
-              <Skeleton variant="text" width={50} height={18} />
-            </S.ReviewQuoteItem>
-          </>
-        )}
-      </div>
-    );
-  }
-
-  let review;
-  let doorColor = item.doorStyle;
-  if (doorColor.size) {
-    doorColor = doorColor.toJS();
-  }
-
-  let doorStyleName = doorColor?.name;
-  if (catalog !== undefined) {
-    doorColor = {
-      ...doorColor,
-      install: getInstallationSuffix(
-        INSTALLATION_SUFFIX_TYPE.NAME,
-        doorColor
-      ).toLowerCase()
-    };
-    const installation = categoryData.data.doorStyles.items.filter(
-      it => it.name.toLowerCase() === doorColor?.install?.toLowerCase()
-    )[0];
-    const doorCategory = installation.items.filter(
-      item => (item.name = doorColor.door_style_name)
-    )[0];
-    review = catalog.elements[item.type];
-    if (!review)
-      review = catalog.elements[returnReplaceableDeepSearchType(item.type)];
-
-    const showPositive =
-      product?.regular_price &&
-      product?.discounted_price &&
-      product?.discounted_price !== product?.regular_price;
-
-    const showWarning =
-      product?.regular_price &&
-      product?.discounted_price &&
-      product?.discounted_price === product?.regular_price &&
-      product.tier !== 'retail';
-
-    const showError =
-      !product ||
-      (product?.regular_price === 0 && product?.discounted_price === 0);
-
-    const isDiscounted =
-      product?.discounted_price &&
-      product?.discounted_price !== product?.regular_price;
-
-    const getDiscountColor = () => {
-      if (showPositive) {
-        return STATUS_POSITIVE_COLOR;
-      } else if (showWarning) {
-        return STATUS_WARNING_COLOR;
-      } else if (showError) {
-        return STATUS_NEGATIVE_COLOR;
-      }
-      return TEXT_COLOR_NEUTRAL_2;
-    };
-
-    const getDiscountBackgroundColor = () => {
-      if (showWarning) {
-        return STATUS_WARNING_LIGHT_COLOR;
-      } else if (showError) {
-        return STATUS_NEGATIVE_LIGHT_COLOR;
-      }
-      return BG_COLOR_1;
-    };
-
-    const getDiscountBorderColor = () => {
-      if (showWarning) {
-        return STATUS_WARNING_COLOR;
-      } else if (showError) {
-        return STATUS_NEGATIVE_COLOR;
-      }
-      return BG_COLOR_1;
-    };
-
-    const DiscountedPrice = () => {
-      return (
-        <S.DistcountedPriceWrapper
-          bgColor={getDiscountBackgroundColor()}
-          borderHoverColor={getDiscountBorderColor()}
-        >
-          <S.ReviewQuoteItemLabel
-            style={{
-              margin: 'unset',
-              color: getDiscountColor()
-            }}
-          >
-            {showError && `$0.00`}
-            {!showError && !showWarning && !showPositive && <span>-</span>}
-            {product?.discounted_price > 0 &&
-              product?.discounted_price !== product?.regular_price &&
-              `$${product?.discounted_price?.toFixed(2)}`}
-          </S.ReviewQuoteItemLabel>
-          {showWarning && (
-            <StyledTooltip
-              style={{ backgroundColor: TEXT_COLOR_NEUTRAL_0 }}
-              title="Please contact us for Sale price"
-            >
-              <img
-                style={{ height: 12, marginLeft: 7 }}
-                src="\assets\img\svg\lefttoolbar\warning_icon.svg"
-              />
-            </StyledTooltip>
-          )}
-          {showError && (
-            <StyledTooltip title="This item is not available in the finish you have selected. Please contact us for alternate options in the finish you want.">
-              <img
-                style={{ height: 12, marginLeft: 7 }}
-                src="\assets\img\svg\lefttoolbar\error_icon.svg"
-              />
-            </StyledTooltip>
-          )}
-        </S.DistcountedPriceWrapper>
-      );
-    };
-
-    return (
-      <div
-        style={{
-          height: 120,
-          display: 'flex',
-          justifyContent: 'space-between'
-        }}
-      >
-        {downLoad ? (
-          <div
-            style={{
-              width: '100%',
-              display: 'inline-flex',
-              justifyContent: 'space-between'
-            }}
-          >
-            <S.ReviewQuoteItem style={{ justifyContent: 'left' }}>
-              <img
-                style={{
-                  height: 50,
-                  width: 50
-                  // boxShadow: '0px 1px 4px rgba(0, 15, 51, 0.30)',
-                  // marginRight: '10px'
-                }}
-                src={review.img}
-              />
-              <S.ReviewQuoteItemLabel
-                style={{
-                  textAlign: 'left',
-                  color: '#565F77',
-                  fontSize: '7px'
-                }}
-              >
-                {internalSKU}
-                <br />
-                W:{' '}
-                {Math.round(
-                  convert(review.info.sizeinfo.width)
-                    .from('in')
-                    .to(measurementUnit._unit) * 100
-                ) / 100}
-                {measurementUnit._unit !== 'in'
-                  ? measurementUnit._unit
-                  : '"' + ' '}
-                D:{' '}
-                {Math.round(
-                  convert(review.info.sizeinfo.depth)
-                    .from('in')
-                    .to(measurementUnit._unit) * 100
-                ) / 100}
-                {measurementUnit._unit !== 'in'
-                  ? measurementUnit._unit
-                  : '"' + ' '}
-                H:{' '}
-                {Math.round(
-                  convert(review.info.sizeinfo.height)
-                    .from('in')
-                    .to(measurementUnit._unit) * 100
-                ) / 100}
-                {measurementUnit._unit !== 'in' ? measurementUnit._unit : '"'}
-              </S.ReviewQuoteItemLabel>
-            </S.ReviewQuoteItem>
-            <S.ReviewQuoteItem style={{ justifyContent: 'right' }}>
-              <S.ReviewQuoteItemLabel
-                style={{
-                  fontSize: '7px',
-                  color:
-                    product?.discounted_price === 0
-                      ? STATUS_NEGATIVE_COLOR
-                      : '#565F77'
-                }}
-              >
-                {isDiscounted
-                  ? `$${(product?.discounted_price * (count || 1))?.toFixed(2)}`
-                  : product?.regular_price?.toFixed(2)
-                    ? `$${(product?.regular_price * (count || 1))?.toFixed(2)}`
-                    : '$0.00'}
-              </S.ReviewQuoteItemLabel>
-            </S.ReviewQuoteItem>
-          </div>
-        ) : (
-          <>
-            <S.ReviewQuoteItem
-              style={{ justifyContent: 'unset', width: 310, marginLeft: 15 }}
-            >
-              <img
-                style={{
-                  width: 100,
-                  height: 100
-                }}
-                src={review.img}
-              />
-              <S.ReviewQuoteItemLabel style={{ textAlign: 'left' }}>
-                SKU: {internalSKU} <br />
-                Width:{' '}
-                {Math.round(
-                  convert(review.info.sizeinfo.width)
-                    .from('in')
-                    .to(measurementUnit._unit) * 100
-                ) / 100}
-                {measurementUnit._unit !== 'in'
-                  ? measurementUnit._unit
-                  : '"' + ' '}
-                Depth:{' '}
-                {Math.round(
-                  convert(review.info.sizeinfo.depth)
-                    .from('in')
-                    .to(measurementUnit._unit) * 100
-                ) / 100}
-                {measurementUnit._unit !== 'in'
-                  ? measurementUnit._unit
-                  : '"' + ' '}
-                Height:{' '}
-                {Math.round(
-                  convert(review.info.sizeinfo.height)
-                    .from('in')
-                    .to(measurementUnit._unit) * 100
-                ) / 100}
-                {measurementUnit._unit !== 'in' ? measurementUnit._unit : '"'}
-              </S.ReviewQuoteItemLabel>
-            </S.ReviewQuoteItem>
-            <S.ReviewQuoteItem style={{ width: 80 }}>
-              <div
-                style={{
-                  width: '100%',
-                  display: 'flex',
-                  justifyContent: 'space-evenly'
-                }}
-              >
-                <StyledTooltip
-                  style={{
-                    backgroundColor: TEXT_COLOR_NEUTRAL_0,
-                    fontSize: 18
-                  }}
-                  title={
-                    <span>
-                      Installation: <strong>{installation.name}</strong>
-                    </span>
-                  }
-                >
-                  <img
-                    style={{ width: 30, height: 30, padding: 3 }}
-                    src={installation?.thumbnail}
-                  />
-                </StyledTooltip>
-                <StyledTooltip
-                  style={{
-                    backgroundColor: TEXT_COLOR_NEUTRAL_0,
-                    fontSize: 18
-                  }}
-                  title={
-                    <span>
-                      Door Style: <strong>{doorStyleName}</strong>
-                    </span>
-                  }
-                >
-                  <img
-                    style={{ width: 30, height: 30 }}
-                    src={doorCategory?.thumbnail}
-                  />
-                </StyledTooltip>
-              </div>
-            </S.ReviewQuoteItem>
-            <S.ReviewQuoteItem style={{ width: 50 }}>
-              <S.ReviewQuoteItemLabel style={{ margin: 'unset' }}>
-                {count || 1}
-              </S.ReviewQuoteItemLabel>
-            </S.ReviewQuoteItem>
-            <S.ReviewQuoteItem style={{ width: 100 }}>
-              <S.ReviewQuoteItemLabel
-                style={{
-                  margin: 'unset',
-                  color: TEXT_COLOR_NEUTRAL_2
-                }}
-              >
-                {product?.regular_price
-                  ? `$${product?.regular_price?.toFixed(2)}`
-                  : '$0.00'}
-              </S.ReviewQuoteItemLabel>
-            </S.ReviewQuoteItem>
-            <S.ReviewQuoteItem style={{ width: 100 }}>
-              <DiscountedPrice />
-            </S.ReviewQuoteItem>
-            <S.ReviewQuoteItem style={{ width: 80, marginRight: 13 }}>
-              <S.ReviewQuoteItemLabel
-                style={{
-                  margin: 'unset',
-                  color:
-                    product?.discounted_price === 0 && STATUS_NEGATIVE_COLOR
-                }}
-              >
-                {isDiscounted
-                  ? `$${(product?.discounted_price * (count || 1))?.toFixed(2)}`
-                  : product?.regular_price?.toFixed(2)
-                    ? `$${(product?.regular_price * (count || 1))?.toFixed(2)}`
-                    : '$0.00'}
-              </S.ReviewQuoteItemLabel>
-            </S.ReviewQuoteItem>
-          </>
-        )}
-      </div>
-    );
-  } else {
-    null;
-  }
-}