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

package/src/KitchenConfiguratorApp.jsx

@@ -22,7 +22,7 @@ import {
   Models as PlannerModels,
   Plugins as PlannerPlugins,
   reducer as PlannerReducer
-} from '../src/_index';
+} from '../src/index';
 import { Map } from 'immutable';
 import ReactGA from 'react-ga4';
 import { hotjar } from 'react-hotjar';

package/src/_KitchenConfigurator.jsx

@@ -1,75 +1,22 @@
-import Dialog from '@material-ui/core/Dialog';
 import axios from 'axios';
 import convert from 'convert-units';
-import { Plugins as PlannerPlugins } from './_index';
+import { Plugins as PlannerPlugins } from './index';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import ReactGA from 'react-ga4';
 import { hotjar } from 'react-hotjar';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import styled from 'styled-components';
-import SnackBar from './components/atoms/Snackbar';
 import * as constants from './constants';
-import {
-  BG_COLOR_HOVER,
-  CLIENTS_NAME,
-  DEFAULT_FONT_FAMILY,
-  PRIMARY_GREEN_COLOR,
-  SECONDARY_PURPLE_COLOR,
-  TEXT_COLOR_NEUTRAL_1
-} from './constants';
 import { base64Decode, getPath } from './utils/helper';
-import actions from './actions/_export';
+import actions from './actions/export';
 import Catalog from './catalog/catalog';
-import { Content } from './components/_export';
+import { Content } from './components/export';
 import Translator from './translator/translator';
 import { objectsMap } from './utils/objects-utils';
 import { VERSION } from './version';
 
-const AWS = require('aws-sdk');
-
-const StyledDialog = styled(Dialog)`
-  .MuiDialog-paperWidthSm {
-    border-radius: 10px;
-  }
-`;
-
-export const StyledDialogContent = styled.span`
-  font-family: ${DEFAULT_FONT_FAMILY};
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  padding: 10px 30px;
-  padding-top: 30px;
-`;
-
-export const StyledDialogAction = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  padding: 15px 30px 25px;
-`;
-
-export const StyledButton = styled.div`
-  padding: 10px 20px;
-  cursor: pointer;
-  margin-right: 10px;
-  color: ${SECONDARY_PURPLE_COLOR};
-  font-weight: bold;
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 16px;
-  border-radius: 20px;
-  :hover {
-    background-color: ${BG_COLOR_HOVER};
-  }
-`;
-
-const s3 = new AWS.S3({
-  accessKeyId: process.env.REACT_APP_AWS_ID,
-  secretAccessKey: process.env.REACT_APP_AWS_SECRET
-});
-
 const toolbarW = 0;
-const sidebarW = 250;
-const footerBarH = 20;
 
 const wrapperStyle = {
   display: 'flex',
@@ -549,41 +496,6 @@ class KitchenConfigurator extends Component {
 
     return (
       <section>
-        <SnackBar
-          isOpen={this.state.isSnackBarOpen}
-          message={this.state.snackBarMessage}
-          handleClose={() =>
-            this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
-          }
-          autoHideDuration={10000}
-        />
-        <SnackBar
-          style={{ marginTop: this.state.isSnackBarOpen ? 75 : 'unset' }}
-          isOpen={this.state.isSnackBar1Open}
-          message={`The items in your design have been added to your shopping cart at ${CLIENTS_NAME[sessionStorage.getItem('visualizerName')]}. <br />Please log in with the same email address.`}
-          autoHideDuration={20000}
-          action={
-            <div>
-              <a
-                href={this.state.redirectURL}
-                target="_blank"
-                style={{
-                  fontFamily: DEFAULT_FONT_FAMILY,
-                  color: PRIMARY_GREEN_COLOR,
-                  fontWeight: 700,
-                  marginRight: 10
-                }}
-              >
-                View Cart
-              </a>
-              <img
-                onClick={() => this.setState({ isSnackBar1Open: false })}
-                style={{ float: 'right', height: 24, cursor: 'pointer' }}
-                src="/assets/img/svg/close.svg"
-              />
-            </div>
-          }
-        />
         <div style={{ ...wrapperStyle, height }}>
           <Content
             width={contentW}

package/src/components/atoms/Snackbar/index.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Snackbar from '@material-ui/core/Snackbar';
+import { SnackbarContent } from '@material-ui/core/index';
+import Slide from '@material-ui/core/Slide';
+import { TEXT_COLOR_NEUTRAL_0 } from '../../../constants';
+
+const SnackBar = ({
+  message,
+  isOpen = false,
+  autoHideDuration = !!autoHideDuration ? autoHideDuration : 5000,
+  action = '',
+  handleClose,
+  snackBarColor = TEXT_COLOR_NEUTRAL_0,
+  style
+}) => {
+  return (
+    <Snackbar
+      style={style}
+      open={isOpen}
+      autoHideDuration={autoHideDuration}
+      handleClose={handleClose}
+      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      TransitionComponent={Slide}
+      onClose={handleClose}
+    >
+      <SnackbarContent
+        style={{ backgroundColor: snackBarColor }}
+        action={
+          action || (
+            <img
+              onClick={handleClose}
+              style={{ float: 'right', height: 24, cursor: 'pointer' }}
+              src="/assets/img/svg/close.svg"
+            />
+          )
+        }
+        message={<div dangerouslySetInnerHTML={{ __html: message }} />}
+      />
+    </Snackbar>
+  );
+};
+
+export default SnackBar;

package/src/components/atoms/radio-button/index.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { RadioWrapper } from './styles';
+
+const RadioButton = ({ label, checked = false, name, value, id, onChange }) => {
+  return (
+    <RadioWrapper onClick={() => onChange(value)}>
+      <input
+        type="radio"
+        id={id}
+        name={name}
+        defaultChecked={checked}
+        value={value}
+      />
+      <label htmlFor={id}>{label}</label>
+    </RadioWrapper>
+  );
+};
+
+export default RadioButton;

package/src/components/atoms/radio-button/styles.js

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+
+export const RadioWrapper = styled.div`
+  display: inline-block;
+  color: #fff;
+  margin-right: 10px;
+
+  [type='radio']:checked,
+  [type='radio']:not(:checked) {
+    position: absolute;
+    left: -9999px;
+  }
+  [type='radio']:checked + label,
+  [type='radio']:not(:checked) + label {
+    position: relative;
+    padding-left: 28px;
+    cursor: pointer;
+    line-height: 20px;
+    display: inline-block;
+  }
+  [type='radio']:checked + label:before,
+  [type='radio']:not(:checked) + label:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 18px;
+    height: 18px;
+    border: 1px solid #ddd;
+    border-radius: 100%;
+    background: #fff;
+  }
+  [type='radio']:checked + label:after,
+  [type='radio']:not(:checked) + label:after {
+    content: '';
+    width: 12px;
+    height: 12px;
+    background: #000;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    border-radius: 100%;
+    -webkit-transition: all 0.2s ease;
+    transition: all 0.2s ease;
+  }
+  [type='radio']:not(:checked) + label:after {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  [type='radio']:checked + label:after {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+`;

package/src/components/button/MainButton.jsx

@@ -0,0 +1,157 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import {
+  BG_COLOR_0,
+  BG_COLOR_1,
+  BG_COLOR_HOVER,
+  DEFAULT_FONT_FAMILY,
+  PRIMARY_GREEN_COLOR,
+  SECONDARY_PURPLE_COLOR,
+  SHADE_DARK_GREEN_COLOR,
+  SHADE_DARK_PURPLE_COLOR,
+  SHADE_LIGHT_GREEN_COLOR,
+  SHADE_LIGHT_PURPLE_COLOR,
+  TEXT_COLOR_NEUTRAL_4
+} from '../../constants';
+
+/*
+  variant: primary, secondary, tertiary(default), icon, close, pagenumber;
+  size: large, small(default);
+  disabled: true, false(default);
+  text: user definition;
+  icon: user definition;
+  endIcon: user definition;
+  onClick: user definition;
+  buttonStyle: user definition;
+  textStyle: user definition;
+  imgStyle: userdefinition;
+*/
+
+export default class MainButton extends Component {
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  render() {
+    const { variant, text, size, icon, endIcon, disabled } = this.props;
+    let padding = '10px 20px';
+
+    if (size === 'large') {
+      if (variant === 'icon' || variant === 'pagenumber') padding = '10px';
+    } else {
+      if (variant === 'icon' || variant === 'pagenumber') padding = '5px';
+      else padding = '5px 10px';
+    }
+
+    const StyledButton = styled.button`
+      /* width: max-content; */
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: ${padding};
+      border: ${variant === 'primary' ? '0px solid' : '1px solid'};
+      cursor: ${disabled ? 'no-drop' : 'pointer'};
+      user-select: none;
+      background-color: ${variant === 'primary'
+        ? SECONDARY_PURPLE_COLOR
+        : BG_COLOR_1};
+      border-color: ${variant === 'primary' || variant === 'secondary'
+        ? SECONDARY_PURPLE_COLOR
+        : BG_COLOR_1};
+      border-radius: ${variant === 'icon' ? '50%' : '5px'};
+      outline: 0;
+      height: ${size === 'large' ? '40px' : '35px'};
+      width: ${variant === 'icon' || variant === 'pagenumber'
+        ? size === 'large'
+          ? '40px'
+          : '35px'
+        : 'max-content'};
+      :focus {
+        box-shadow: ${!disabled &&
+        `0px 0px 5px 2px ${SHADE_LIGHT_PURPLE_COLOR}`};
+      }
+      :hover {
+        background-color: ${!disabled &&
+        (variant === 'primary' ? SHADE_LIGHT_PURPLE_COLOR : BG_COLOR_0)};
+      }
+      :active {
+        background-color: ${!disabled &&
+        (variant === 'primary' ? SHADE_DARK_PURPLE_COLOR : BG_COLOR_0)};
+      }
+    `;
+
+    const StyledLabel = styled.span`
+      color: ${disabled
+        ? TEXT_COLOR_NEUTRAL_4
+        : variant === 'primary'
+        ? BG_COLOR_1
+        : SECONDARY_PURPLE_COLOR};
+      font-family: ${DEFAULT_FONT_FAMILY};
+      font-size: 13px;
+      font-weight: 600;
+      line-height: 18px;
+      text-align: center;
+    `;
+
+    const StyledImage = styled.img`
+      height: ${size === 'large' ? '20px' : '15px'};
+      width: ${size === 'large' ? '20px' : '15px'};
+      background-color: ${disabled
+        ? TEXT_COLOR_NEUTRAL_4
+        : variant !== 'primary'
+        ? SECONDARY_PURPLE_COLOR
+        : BG_COLOR_1};
+      -webkit-mask-image: url(${props => props.maskImage + '?nocache=2025'});
+      -webkit-mask-size: 90%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+    `;
+
+    if (variant === 'icon' && text)
+      console.log('If your variant is icon, you cannnot use text');
+    if (variant === 'icon' && endIcon)
+      console.log('If your variant is icon, you cannnot use endIcon');
+    if (variant === 'icon' && (icon || endIcon))
+      console.log(
+        'If your variant is pagenumber, you cannnot use icon or endIcon'
+      );
+    if (variant === 'close' && icon)
+      console.log('If your variant is close, you cannnot use icon');
+
+    return (
+      <StyledButton
+        onClick={!disabled && this.props.onClick}
+        style={{ ...this.props.buttonStyle }}
+      >
+        {variant !== 'pagenumber' && variant !== 'close' && icon && (
+          <StyledImage
+            style={{
+              ...this.props.imgStyle,
+              marginRight: variant !== 'icon' && 10
+            }}
+            maskImage={icon}
+          />
+        )}
+        {variant !== 'icon' && (
+          <StyledLabel style={{ ...this.props.textStyle }}>
+            {variant === 'pagenumber'
+              ? parseInt(text)
+                ? parseInt(text)
+                : 0
+              : text}
+          </StyledLabel>
+        )}
+        {variant !== 'pagenumber' && variant !== 'icon' && endIcon && (
+          <StyledImage style={{ marginLeft: 10 }} maskImage={endIcon} />
+        )}
+      </StyledButton>
+    );
+  }
+}
+
+MainButton.propTypes = {
+  variant: PropTypes.string.isRequired,
+  size: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+};

package/src/components/button/ToggleMeasureButton.jsx

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+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;
+  }
+`;
+
+const ToggleIcon = styled.div`
+  ${'' /* transition-duration: .3s; */}
+  position: absolute;
+  top: 0px;
+  img {
+    font-size: 1.4rem;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+`;
+
+export default class ToggleMeasureButton extends Component {
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  render() {
+    let { props } = this;
+    let activeStyle = props.showMeasure === 0 ? { left: 0 } : { right: 0 };
+    return (
+      <Toggle onClick={props.onClick} style={{ ...props.style }}>
+        {props.backgroundImage}
+        {[
+          props.icon !== undefined ? (
+            <ToggleIcon style={{ ...activeStyle }} key={props.icon}>
+              {props.icon}
+            </ToggleIcon>
+          ) : null
+        ]}
+      </Toggle>
+    );
+  }
+}
+
+ToggleMeasureButton.propTypes = {
+  title: PropTypes.string,
+  hover: PropTypes.bool,
+  active: PropTypes.bool.isRequired,
+  onClick: PropTypes.func
+};

package/src/components/catalog-view/catalog-breadcrumb.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MdArrowBack as Arrow } from 'react-icons/md';
+import * as SharedStyle from '../../shared-style';
+
+const breadcrumbStyle = {
+  margin: '1.5em',
+  display: 'flex'
+};
+
+const breadcrumbTextStyle = {
+  fontSize: '20px',
+  cursor: 'pointer'
+};
+
+const breadcrumbLastTextStyle = {
+  ...breadcrumbTextStyle,
+  fontWeight: 'bolder',
+  color: SharedStyle.SECONDARY_COLOR.main
+};
+
+const breadcrumbTabStyle = {
+  fill: SharedStyle.COLORS.black,
+  fontSize: '24px',
+  marginLeft: '10px',
+  marginRight: '10px'
+};
+
+const CatalogBreadcrumb = ({ names }) => {
+  let labelNames = names.map((name, ind) => {
+    let lastElement = ind === names.length - 1;
+
+    return (
+      <div key={ind} style={{ display: 'flex' }}>
+        <div
+          style={!lastElement ? breadcrumbTextStyle : breadcrumbLastTextStyle}
+          onClick={name.action || null}
+        >
+          {name.name}
+        </div>
+        {!lastElement ? <Arrow style={breadcrumbTabStyle} /> : null}
+      </div>
+    );
+  });
+
+  return <div style={breadcrumbStyle}>{labelNames}</div>;
+};
+
+CatalogBreadcrumb.propTypes = {
+  names: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default CatalogBreadcrumb;