kitchen-simulator 5.0.0-test.7 → 5.0.0-test.70

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>
-  );
-};