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

package/src/components/toolbar/button/ControlButton.jsx

@@ -1,41 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../../shared-style';
-import * as S from './styles';
-
-export default class ControlButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = { hover: false };
-  }
-
-  render() {
-    let { state, props } = this;
-    let overlayStyle = {};
-    if (state.hover) overlayStyle = { ...overlayStyle, display: 'block' };
-
-    return (
-      <S.Control
-        onMouseOver={event => this.setState({ hover: true })}
-        onMouseOut={event => this.setState({ hover: false })}
-        onClick={props.onClick}
-      >
-        {[
-          props.title !== undefined ? (
-            <S.ControlTitle key={props.title}>{props.title}</S.ControlTitle>
-          ) : null,
-          props.icon !== undefined ? (
-            <S.ControlIcon key={props.icon}>{props.icon}</S.ControlIcon>
-          ) : null
-        ]}
-      </S.Control>
-    );
-  }
-}
-
-ControlButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func
-};

package/src/components/toolbar/button/DirectionButton.jsx

@@ -1,34 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../../shared-style';
-import * as S from './styles';
-
-export default class DirectionButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-  }
-
-  render() {
-    let { props } = this;
-    let overlayStyle = {};
-    overlayStyle = props.active
-      ? { ...overlayStyle, background: SharedStyle.TOOLBAR_COLOR.active }
-      : { ...overlayStyle };
-    return (
-      <S.DirectionIcon
-        style={props.style}
-        onClick={props.onClick}
-        key={props.icon}
-      >
-        {props.icon}
-      </S.DirectionIcon>
-    );
-  }
-}
-
-DirectionButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func
-};

package/src/components/toolbar/button/RightButton.jsx

@@ -1,103 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as S from './styles';
-
-export default class RightButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = { hover: false };
-  }
-
-  render() {
-    let { state, props } = this;
-    let overlayStyle = {};
-    if (state.hover) overlayStyle = { ...overlayStyle, display: 'block' };
-    if (props.active) overlayStyle = { ...overlayStyle, display: 'block' };
-    return (
-      <S.rMain
-        onMouseOver={event => this.setState({ hover: true })}
-        onMouseOut={event => this.setState({ hover: false })}
-        onClick={props.onClick}
-      >
-        <S.rightIcon>{props.icon}</S.rightIcon>
-
-        <S.rOverlay style={{ ...overlayStyle }}>
-          <img width="40px" src={props.src} />
-          <S.rTitle>{props.title}</S.rTitle>
-        </S.rOverlay>
-        {/* {
-          state.active ?
-          <div style={STYLE_TOOLTIP}>
-            <span style={STYLE_TOOLTIP_PIN} />
-            {props.tooltip}
-          </div>
-          : null
-        } */}
-      </S.rMain>
-    );
-  }
-}
-
-RightButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  onClick: PropTypes.func
-};
-
-export class RightTextButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = { hover: false };
-  }
-
-  render() {
-    let { state, props } = this;
-    return (
-      <S.rMain
-        onMouseOver={event => this.setState({ hover: true })}
-        onMouseOut={event => this.setState({ hover: false })}
-        onClick={props.onClick}
-      >
-        <S.rightIcon>{props.icon}</S.rightIcon>
-
-        {state.hover ? (
-          <S.rOverlay style={{ display: 'block' }}>
-            <img width="40px" src={props.src} />
-            <S.rTitle
-              style={{ top: '20px', paddingTop: '7px', paddingBottom: '7px' }}
-            >
-              {props.title}
-            </S.rTitle>
-          </S.rOverlay>
-        ) : (
-          <S.rOverlay style={{ display: 'block' }}>
-            <S.rTitle
-              style={{
-                color: 'black',
-                top: '20px',
-                paddingTop: '7px',
-                paddingBottom: '7px'
-              }}
-            >
-              {props.title}
-            </S.rTitle>
-          </S.rOverlay>
-        )}
-        {/* {
-          state.active ?
-          <div style={STYLE_TOOLTIP}>
-            <span style={STYLE_TOOLTIP_PIN} />
-            {props.tooltip}
-          </div>
-          : null
-        } */}
-      </S.rMain>
-    );
-  }
-}
-
-RightTextButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  onClick: PropTypes.func
-};

package/src/components/toolbar/button/ToggleButton.jsx

@@ -1,41 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../../shared-style';
-import { MODE_IDLE_3D } from '../../../constants';
-import * as S from './styles';
-
-export default class ToggleButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-  }
-
-  render() {
-    let { props } = this;
-    let overlayStyle = {};
-    let activeStyle =
-      props.settingMode === MODE_IDLE_3D || props.active
-        ? { paddingRight: '30px', paddingBottom: '2px' }
-        : { paddingLeft: '30px', paddingBottom: '2px' };
-    return (
-      <S.Toggle style={{ ...overlayStyle }} onClick={props.onClick}>
-        {[
-          props.title !== undefined ? (
-            <S.ControlTitle key={props.title}>{props.title}</S.ControlTitle>
-          ) : null,
-          props.icon !== undefined ? (
-            <S.ToggleIcon style={{ ...activeStyle }} key={props.icon}>
-              {props.icon}
-            </S.ToggleIcon>
-          ) : null
-        ]}
-      </S.Toggle>
-    );
-  }
-}
-
-ToggleButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func
-};

package/src/components/toolbar/button/index.jsx

@@ -1,55 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import * as S from './styles';
-
-//http://www.cssportal.com/css-tooltip-generator/
-
-export default class ToolbarButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = { hover: false };
-  }
-
-  render() {
-    let { state, props } = this;
-    const { active, onClick, children, src, title, ...otherProps } = props;
-    let overlayStyle = {};
-    if (state.hover) overlayStyle = { ...overlayStyle, display: 'block' };
-    // overlayStyle = { ...overlayStyle, 'display': 'block', 'background': SharedStyle.TOOLBAR_COLOR.focus }
-
-    if (props.active) overlayStyle = { ...overlayStyle, display: 'block' };
-    // overlayStyle = { ...overlayStyle, 'display': 'block', 'background': SharedStyle.TOOLBAR_COLOR.active }
-    return (
-      <S.Main
-        {...otherProps}
-        onMouseOver={event => this.setState({ hover: true })}
-        onMouseOut={event => this.setState({ hover: false })}
-        onClick={props.onClick}
-      >
-        <div>{props.children}</div>
-
-        <S.Overlay style={{ ...overlayStyle }}>
-          <img width="75px" src={props.src} />
-          <S.Title>{props.title}</S.Title>
-        </S.Overlay>
-        {/* {
-          state.active ?
-          <div style={STYLE_TOOLTIP}>
-            <span style={STYLE_TOOLTIP_PIN} />
-            {props.tooltip}
-          </div>
-          : null
-        } */}
-      </S.Main>
-    );
-  }
-}
-
-ToolbarButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  active: PropTypes.bool.isRequired,
-  tooltip: PropTypes.string.isRequired,
-  onClick: PropTypes.func
-};

package/src/components/toolbar/button/styles.js

@@ -1,127 +0,0 @@
-import styled from 'styled-components';
-
-export const Main = styled.div`
-  z-index: 6;
-  width: 75px;
-  height: 75px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0px;
-  position: relative;
-  cursor: pointer;
-  background: #d3e7e5;
-  box-shadow: 3px 1px 3px 0px rgba(0, 0, 0, 0.2),
-    -1px -1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
-`;
-export const rightIcon = styled.div`
-  img {
-    box-shadow: 3px 1px 3px 0px rgba(0, 0, 0, 0.2),
-      -1px -1px 1px 0px rgba(0, 0, 0, 0.14),
-      0px 2px 1px -1px rgba(0, 0, 0, 0.12);
-    border-radius: 8%;
-  }
-`;
-export const Overlay = styled.div`
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  bottom: 0px;
-  width: 100%;
-  text-align: center;
-  background: rgba(0, 0, 0, 0.5);
-  display: none;
-`;
-export const Title = styled.span`
-  position: absolute;
-  top: 51%;
-  left: 0px;
-  width: 100%;
-  color: #fff;
-  text-transform: uppercase;
-  transform: translate(0%, -50%);
-  font-size: 11px;
-`;
-export const rMain = styled.div`
-  width: 40px;
-  display: inline-block;
-  align-items: center;
-  justify-content: center;
-  margin-right: 14px;
-  position: relative;
-  cursor: pointer;
-`;
-export const rOverlay = styled.div`
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  bottom: 0px;
-  width: 100%;
-  text-align: center;
-  display: none;
-`;
-export const rTitle = styled.span`
-  position: absolute;
-  top: 45%;
-  left: 1px;
-  width: 100%;
-  color: #fff;
-  text-transform: uppercase;
-  transform: translate(0%, -50%);
-
-  @media screen and (min-width: 1024) {
-    font-size: 11px;
-  }
-  @media screen and (max-width: 1024) {
-    font-size: 11px;
-  }
-  @media screen and (min-width: 1366) {
-    font-size: 13px;
-  }
-  @media screen and (max-width: 1366) {
-    font-size: 13px;
-  }
-  @media screen and (min-width: 1440) {
-    font-size: 16px;
-  }
-  @media screen and (max-width: 1440) {
-    font-size: 16px;
-  }
-`;
-
-export const Toggle = styled.div`
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: 36px;
-  margin-left: 20px;
-  justify-content: center;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  :hover {
-    box-shadow: 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);
-    border-radius: 18px;
-  }
-`;
-
-export const ToggleIcon = styled.div`
-  ${'' /* transition-duration: .3s; */}
-  position: absolute;
-  top: 0px;
-  img {
-    font-size: 1.4rem;
-    box-sizing: border-box;
-    border-radius: 50%;
-  }
-`;
-
-export const ControlTitle = styled.span`
-  margin: 10px;
-  font-size: 12px;
-`;

package/src/components/toolbar/components/DoorStyleMenu.jsx

@@ -1,103 +0,0 @@
-import React from 'react';
-import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles({
-  selectRoot: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.5rem',
-    color: 'rgb(76, 18, 161)',
-    fontWeight: 600,
-    fontSize: '14px'
-  },
-  inputLabel: {
-    color: 'black'
-  }
-});
-
-const DoorStyleMenu = ({
-  selected,
-  data,
-  onChange,
-  getValue,
-  placeholder,
-  iconStyle
-}) => {
-  const classes = useStyles();
-
-  if (!data || !data.length) return null;
-
-  return (
-    <FormControl fullWidth variant="outlined">
-      {placeholder && (
-        <InputLabel className={classes.inputLabel}>{placeholder}</InputLabel>
-      )}
-      <Select
-        value={selected}
-        onChange={e => onChange(e.target.value)}
-        label={placeholder}
-        classes={{ root: classes.selectRoot }}
-        renderValue={value => {
-          if (!value) {
-            return <span style={{ color: 'rgba(86, 95, 119, 1)' }}>Any</span>;
-          }
-          const selectedItem = data.find(item => getValue(item) === value.name);
-          if (!selectedItem)
-            return <span style={{ color: 'rgba(86, 95, 119, 1)' }}>Any</span>;
-          return (
-            <span
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: '0.5rem',
-                width: '100%'
-              }}
-            >
-              <span>{selectedItem.name}</span>
-              <img
-                style={
-                  iconStyle && {
-                    ...iconStyle
-                  }
-                }
-                height="20"
-                src={selectedItem.thumbnail}
-                alt=""
-              />
-            </span>
-          );
-        }}
-      >
-        <MenuItem value={''}>
-          <span style={{ color: 'rgba(86, 95, 119, 1)' }}>Any</span>
-        </MenuItem>
-        {data.map((item, key) => (
-          <MenuItem
-            classes={{ root: classes.selectRoot }}
-            key={key}
-            value={getValue(item)}
-          >
-            <font size="2">{item.name}</font>
-            <img
-              style={
-                iconStyle && {
-                  ...iconStyle
-                }
-              }
-              height="20"
-              src={item.thumbnail}
-              alt=""
-            />
-          </MenuItem>
-        ))}
-      </Select>
-    </FormControl>
-  );
-};
-
-DoorStyleMenu.defaultProps = {
-  getValue: it => it.name
-};
-
-export default DoorStyleMenu;

package/src/components/toolbar/components/Pricing.jsx

@@ -1,126 +0,0 @@
-import React from 'react';
-import Skeleton from '@material-ui/lab/Skeleton';
-import * as PS from '../popup/styles';
-import { TEXT_COLOR_NEUTRAL_0 } from '../../../../src/constants';
-import { useGetPricesBySku } from '../../../../src/hooks/useGetPricesBySku';
-import { useValidateToken } from '../../../../src/hooks/useValidateToken';
-
-export const Pricing = ({ internalSKU, accessToken }) => {
-  const { data } = useValidateToken(accessToken);
-
-  const {
-    data: { prices = [] },
-    isFetching
-  } = useGetPricesBySku(data?.source === 'none' ? [] : [internalSKU]);
-
-  if (isFetching || data?.source === 'none') {
-    return (
-      <React.Fragment>
-        <PS.DesignValue
-          style={{
-            fontSize: 16,
-            margin: '10px 0',
-            fontWeight: 600,
-            marginBottom: 0
-          }}
-        >
-          <Skeleton variant="text" width={80} height={24} />
-        </PS.DesignValue>
-        <span
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            marginBottom: 5
-          }}
-        >
-          <Skeleton variant="text" width={100} height={20} />
-          <Skeleton variant="text" width={60} height={20} />
-        </span>
-        <span
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between'
-          }}
-        >
-          <Skeleton variant="text" width={120} height={20} />
-          <Skeleton variant="text" width={60} height={20} />
-        </span>
-      </React.Fragment>
-    );
-  }
-
-  const product = prices && prices.length > 0 ? prices[0] : null;
-
-  if (!prices || prices.length === 0) {
-    return (
-      <PS.DesignValue
-        style={{
-          fontSize: 16,
-          margin: '10px 0',
-          fontWeight: 600,
-          marginBottom: 0
-        }}
-      >
-        No pricing information available
-      </PS.DesignValue>
-    );
-  }
-
-  return (
-    <React.Fragment>
-      <PS.DesignValue
-        style={{
-          fontSize: 16,
-          margin: '10px 0',
-          fontWeight: 600,
-          marginBottom: 0
-        }}
-      >
-        Pricing
-      </PS.DesignValue>
-      <span
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          marginBottom: 5
-        }}
-      >
-        <PS.PropteryValue2>Regular Price: </PS.PropteryValue2>
-        <PS.PropteryValue2
-          style={{
-            color: TEXT_COLOR_NEUTRAL_0,
-            textDecoration:
-              product?.discounted_price !== product?.regular_price
-                ? 'line-through'
-                : 'none',
-            width: 'unset',
-            fontWeight: 600
-          }}
-        >
-          {`$${product?.regular_price}`}
-        </PS.PropteryValue2>
-      </span>
-      {product?.discounted_price !== null ? (
-        <span
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between'
-          }}
-        >
-          <PS.PropteryValue2>Discounted Price: </PS.PropteryValue2>
-          <PS.PropteryValue2
-            style={{
-              color: 'green',
-              width: 'unset',
-              fontWeight: 600
-            }}
-          >
-            {product?.discounted_price !== product.regular_price
-              ? `$${product?.discounted_price}`
-              : '-'}
-          </PS.PropteryValue2>
-        </span>
-      ) : null}
-    </React.Fragment>
-  );
-};