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

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

@@ -0,0 +1,310 @@
+import React from 'react';
+import Tooltip from '@material-ui/core/Tooltip';
+import { withStyles } from '@material-ui/core/styles';
+import {
+  BG_COLOR_1,
+  DEFAULT_FONT_FAMILY,
+  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 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 ReviewMolding({
+  downLoad,
+  molding,
+  internalSKU,
+  product,
+  loading
+}) {
+  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>
+    );
+  };
+
+  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>
+    );
+  }
+  if (molding) {
+    let review = {
+      img: molding.thumbnail,
+      name: internalSKU,
+      count: molding.count
+    };
+
+    return (
+      <div
+        style={{
+          height: 120,
+          display: 'flex',
+          padding: downLoad ? '' : '',
+          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' }}
+              >
+                {review.name}
+              </S.ReviewQuoteItemLabel>
+            </S.ReviewQuoteItem>
+            <S.ReviewQuoteItem style={{ justifyContent: 'right' }}>
+              <S.ReviewQuoteItemLabel
+                style={{
+                  fontSize: '7px',
+                  margin: 'unset',
+                  color:
+                    product && product.discounted_price === 0
+                      ? STATUS_NEGATIVE_COLOR
+                      : '#565F77'
+                }}
+              >
+                {isDiscounted
+                  ? `$${(product?.discounted_price * (review.count || 1))?.toFixed(2)}`
+                  : product?.regular_price?.toFixed(2)
+                    ? `$${(product?.regular_price * (review.count || 1))?.toFixed(2)}`
+                    : '$0.00'}
+              </S.ReviewQuoteItemLabel>
+            </S.ReviewQuoteItem>
+          </div>
+        ) : (
+          <>
+            <S.ReviewQuoteItem
+              style={{
+                justifyContent: 'unset',
+                width: 310,
+                marginLeft: 15
+              }}
+            >
+              <img
+                style={{
+                  height: 100,
+                  width: 100
+                }}
+                src={review.img}
+              />
+              <S.ReviewQuoteItemLabel style={{ textAlign: 'left' }}>
+                {review.name}
+              </S.ReviewQuoteItemLabel>
+            </S.ReviewQuoteItem>
+            <S.ReviewQuoteItem style={{ width: 80 }} />
+            <S.ReviewQuoteItem style={{ width: 50 }}>
+              <S.ReviewQuoteItemLabel style={{ margin: 'unset' }}>
+                {review.count}
+              </S.ReviewQuoteItemLabel>
+            </S.ReviewQuoteItem>
+            <S.ReviewQuoteItem style={{ width: 100 }}>
+              <S.ReviewQuoteItemLabel
+                style={{
+                  margin: 'unset',
+                  color: TEXT_COLOR_NEUTRAL_2
+                }}
+              >
+                {product && product.regular_price
+                  ? `$${product && 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: downLoad
+                    ? 'rgba(120,120,120,1)'
+                    : product &&
+                      product.discounted_price === 0 &&
+                      STATUS_NEGATIVE_COLOR
+                }}
+              >
+                {isDiscounted
+                  ? `$${(product?.discounted_price * (review.count || 1))?.toFixed(2)}`
+                  : product?.regular_price?.toFixed(2)
+                    ? `$${(product?.regular_price * (review.count || 1))?.toFixed(2)}`
+                    : '$0.00'}
+              </S.ReviewQuoteItemLabel>
+            </S.ReviewQuoteItem>
+          </>
+        )}
+      </div>
+    );
+  } else {
+    null;
+  }
+}

package/src/components/toolbar/popup/product/style.css

@@ -0,0 +1,54 @@
+.ant-layout-sider-children {
+  position: fixed;
+  height: 100%;
+  width: 255px;
+  transition: width 0.3s;
+}
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow {
+  display: none;
+}
+
+.ant-menu-inline,
+.ant-menu-vertical,
+.ant-menu-vertical-left {
+  border-right: none;
+}
+
+.ant-menu-light {
+  background: rgba(47, 47, 47, 0.7);
+}
+
+.menuLeft__icon {
+  opacity: 0.8;
+}
+
+.ant-menu-submenu-arrow {
+  opacity: 0.7;
+}
+
+.ant-menu-item:after {
+  right: auto;
+  left: 0;
+}
+
+.ant-menu-item,
+.ant-menu-submenu-title {
+  width: 100%;
+}
+
+.ant-menu-inline-collapsed-tooltip .menuLeft__icon {
+  display: none;
+}
+
+.ant-layout-sider-zero-width-trigger {
+  top: 10px !important;
+}
+
+.ant-menu-item,
+.ant-menu-submenu-title {
+  height: 60px !important;
+}
+
+/* .menuLeft {
+            background: rgba(47,47,47,0.7);
+        } */

package/src/components/toolbar/popup/product/styles.js

@@ -0,0 +1,260 @@
+import styled from 'styled-components';
+
+import * as SharedStyle from '../../../../shared-style';
+
+// export const Wrapper = styled.div`
+//   width: 66px;
+//   color: #FFF;
+//   margin: 10px 5px 0px 5px;
+//   :hover{
+//     color:${SharedStyle.TOOLBAR_COLOR.active};
+//   }
+// `
+
+// export const Image = styled.div`
+//   text-align: center;
+//   div{
+//     width: 70px;
+//     height: 90px;
+//   }
+//   img {
+//     width: 65px;
+//     height: 80px;
+//     margin-top: 10px;
+//     padding: 8px;
+//     cursor: pointer;
+//     transition: 0.3s;
+//   }
+//   :hover{
+//     img {
+//       margin-top: 0;
+//       width:70px;
+//       height: 90px;
+//     }
+//   }
+// `
+
+export const Wrapper = styled.div`
+  margin-top: 10px;
+  width: 80px;
+  color: #fff;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  cursor: pointer;
+  div:first-child {
+    height: 60px;
+    display: flex;
+    justify-content: space-around;
+    img {
+      height: 90%;
+      margin-top: 5%;
+      width: auto;
+      transition: 0.3s;
+    }
+  }
+  :hover {
+    color: ${SharedStyle.TOOLBAR_COLOR.active};
+    div img {
+      margin-top: 0px;
+      height: 100%;
+    }
+  }
+`;
+
+export const CabinetWrapper = styled.div`
+  width: 85px;
+  color: #fff;
+  display: flex;
+  justify-content: space-around;
+  flex-flow: column;
+  cursor: pointer;
+  div {
+    height: 60px;
+    display: flex;
+    justify-content: space-around;
+    img {
+      height: 90%;
+      margin-top: 5%;
+      width: auto;
+      transition: 0.3s;
+    }
+  }
+  :hover {
+    color: ${SharedStyle.TOOLBAR_COLOR.active};
+    div img {
+      margin-top: 0px;
+      height: 100%;
+    }
+  }
+`;
+
+export const PrimayDoorStyleLineWrapper = styled.div`
+  color: #fff;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  ${
+    '' /* :hover{
+    span {
+      color:${SharedStyle.SECONDARY_COLOR.main};
+    }
+  } */
+  }
+`;
+
+// export const LineWrapper = styled.div`
+//   color: #FFF;
+//   display: flex;
+//   align-items: center;
+//   cursor: pointer;
+// `
+
+export const LineWrapper = styled.div`
+  color: #fff;
+  display: flex;
+  align-items: center;
+  ${'' /* height: 160px; */}
+  cursor: pointer;
+  ${
+    '' /* span {
+    font-size:10px;
+  } */
+  }
+`;
+
+export const LineImage = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  img {
+    transition: 0.3s;
+  }
+`;
+
+export const Title = styled.p`
+  text-align: center;
+`;
+export const Category = styled.div`
+  text-align: center;
+  margin-top: 10px;
+  width: 66px;
+  height: 70px;
+  background: white;
+  margin: 10px 5px 0px 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  :hover {
+    color: ${SharedStyle.TOOLBAR_COLOR.active};
+  }
+`;
+export const CategoryTitle = styled.div`
+  text-align: center;
+  word-break: break-word;
+  min-width: 40px;
+`;
+export const ContentWraper = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+export const SubCollapse = styled.ul`
+  list-style: none;
+  display: none;
+  transition-duration: 3s;
+  padding: 0;
+  margin: 8px 0;
+`;
+export const NavItem = styled.li`
+  background: 0 0;
+  margin: 0;
+  color: #fff;
+  margin-top: 1px !important;
+  padding-left: 5.6rem;
+`;
+
+export const Control = styled.div`
+  height: fit-content;
+  justify-content: center;
+  display: flex;
+`;
+export const UnControl = styled.div`
+  height: fit-content;
+  justify-content: center;
+  display: flex;
+  cursor: no-drop;
+`;
+export const ControlIcon = styled.div`
+  ${'' /* padding: 10px 5px; */}
+  justify-self: center;
+  cursor: pointer;
+  position: relative;
+  :hover {
+    img {
+      box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+        0px 6px 10px 0px rgba(0, 0, 0, 0.39),
+        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+    }
+    background-color: ${SharedStyle.TOOLBAR_COLOR.focus};
+  }
+  :active {
+    img {
+      box-shadow: none !important;
+    }
+  }
+`;
+export const ControlIconMEdit = styled.div`
+  ${'' /* padding: 10px 5px; */}
+  cursor:pointer;
+  position: relative;
+  :hover {
+    img {
+      box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+        0px 6px 10px 0px rgba(0, 0, 0, 0.39),
+        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+    }
+    background-color: white;
+  }
+  :active {
+    img {
+      box-shadow: none !important;
+    }
+  }
+`;
+export const MEditLine = styled.div`
+  padding: 5px 0px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+`;
+
+export const FloorPlanContentWraper = styled.div`
+  ${'' /* padding-bottom: 1px; */}
+  ${'' /* margin-top: 1px; */}
+  user-select: none;
+  min-width: 185px;
+  max-width: 185px;
+`;
+
+export const FloorPlanWraper = styled.div`
+  ${'' /* border-bottom: 2px solid #2f2f2fb3; */}
+  padding-bottom: 1px;
+  margin-top: 1px;
+  user-select: none;
+  min-width: 185px;
+  max-width: 185px;
+`;
+
+export const PlanWraper = styled.div`
+  border-bottom: 2px solid #2f2f2f;
+  ${'' /* padding-bottom: 1px; */}
+  ${'' /* margin-top: 1px; */}
+  user-select: none;
+  min-width: 185px;
+  max-width:185px;
+  :hover{
+    span {
+      color:${SharedStyle.SECONDARY_COLOR.main};
+    }
+`;