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

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

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

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

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