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

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

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

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

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

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

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