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

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

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

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

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

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

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

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

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

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