kitchen-simulator 5.0.0-test.4 → 5.0.0-test.5

package/src/components/firstsetting/firstsetting.jsx

@@ -1,814 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as S from './button/styles';
-import * as rectangleData from '../toolbar/main/rectangle.json';
-import * as lShaped from '../toolbar/main/lShaped.json';
-import * as oRectangle from '../toolbar/main/oRectangle.json';
-import * as longNarrow from '../toolbar/main/longNarrow.json';
-import { MODE_IDLE, MODE_2D_PAN } from '../../constants';
-
-export default class FirstSetting extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = {
-      step: 1,
-      roomShape: {
-        name: '',
-        data: {}
-      },
-      doorColor: {
-        name: '',
-        url: '',
-        color: ''
-      },
-      installation: '',
-      doorCategory: {
-        name: '',
-        url: ''
-      },
-      doorStyle: ''
-    };
-  }
-
-  loadProject(data) {
-    this.context.projectActions.loadProject(data, this.props.categoryData);
-  }
-
-  _confirm() {
-    this.props.close();
-    if (this.state.roomShape.name === '') return;
-    if (this.state.roomShape.name === 'custom')
-      this.context.linesActions.selectToolDrawingLine('wall');
-    else this.loadProject(this.state.roomShape.data, this.props.categoryData);
-    this.context.itemsActions.setDoorStyle(this.state.doorStyle);
-  }
-
-  componentDidMount() {}
-
-  componentWillReceiveProps(nextProps) {}
-
-  render() {
-    const {
-      step,
-      roomShape,
-      doorColor,
-      installation,
-      doorCategory,
-      doorStyle
-    } = this.state;
-
-    let roomShapeData = [
-      {
-        type: 'square',
-        name: 'Square',
-        url: '/assets/img/svg/firstsetting/Square.svg',
-        data: rectangleData
-      },
-      {
-        type: 'l-shape',
-        name: 'L-Shaped',
-        url: '/assets/img/svg/firstsetting/L.svg',
-        data: lShaped
-      },
-      {
-        type: 'irregular',
-        name: 'Irregular',
-        url: '/assets/img/svg/firstsetting/L2.svg',
-        data: longNarrow
-      },
-      {
-        type: 'open',
-        name: 'Open',
-        url: '/assets/img/svg/firstsetting/Open.svg',
-        data: oRectangle
-      }
-    ];
-
-    const stepBar = [
-      {
-        index: 1,
-        title: 'ROOM SHAPE',
-        description: 'Select from the predefined shapes or draw your own.',
-        content: (
-          <S.ContentWrapper>
-            <S.ContentWrapper1>
-              {roomShapeData.map(item => {
-                return (
-                  <S.ContentItem
-                    onClick={() =>
-                      this.setState({
-                        roomShape: { name: item.type, data: item.data }
-                      })
-                    }
-                  >
-                    <S.RoomContentImage
-                      src={item.url}
-                      style={{
-                        backgroundColor:
-                          roomShape.name === item.type && 'rgb(217, 232, 255)'
-                      }}
-                    />
-                    <S.ContentCheckImage
-                      id="check"
-                      src="/assets/img/svg/firstsetting/check-normal.svg"
-                    />
-                    {roomShape.name === item.type && (
-                      <S.ContentCheckImage src="/assets/img/svg/firstsetting/check-active.svg" />
-                    )}
-                    {item.name}
-                  </S.ContentItem>
-                );
-              })}
-            </S.ContentWrapper1>
-            <S.ContentWrapper1>
-              <S.ContentItem
-                onClick={() =>
-                  this.setState({ roomShape: { name: 'custom', data: {} } })
-                }
-              >
-                <S.RoomContentImage
-                  src="/assets/img/svg/firstsetting/Square.svg"
-                  style={{
-                    backgroundColor:
-                      roomShape.name === 'custom' && 'rgb(217, 232, 255)'
-                  }}
-                />
-                <img
-                  src="/assets/img/svg/firstsetting/pencil.svg"
-                  style={{
-                    position: 'absolute',
-                    top: 10,
-                    right: 10,
-                    height: 35,
-                    zIndex: 2
-                  }}
-                />
-                <S.ContentCheckImage
-                  id="check"
-                  src="/assets/img/svg/firstsetting/check-normal.svg"
-                />
-                {roomShape.name === 'custom' && (
-                  <S.ContentCheckImage src="/assets/img/svg/firstsetting/check-active.svg" />
-                )}
-                Custom
-              </S.ContentItem>
-            </S.ContentWrapper1>
-          </S.ContentWrapper>
-        )
-      },
-      {
-        index: 2,
-        title: 'CABINET COLOR',
-        description: 'Select a preferred color first.',
-        content: (
-          <S.ContentWrapper>
-            <span style={{ fontSize: 20, fontWeight: 'bold' }}>Color</span>
-            <S.ContentWrapper1>
-              <S.ColorContentItem
-                onClick={() =>
-                  this.setState({
-                    doorColor: { name: 'White', color: '#ffffff' }
-                  })
-                }
-              >
-                <S.ColorContentImage
-                  style={{
-                    backgroundColor: '#ffffff',
-                    border: doorColor.color === '#ffffff' && '5px solid #4C12A1'
-                  }}
-                />
-                White
-              </S.ColorContentItem>
-              <S.ColorContentItem
-                onClick={() =>
-                  this.setState({
-                    doorColor: { name: 'Black', color: '#000F33' }
-                  })
-                }
-              >
-                <S.ColorContentImage
-                  style={{
-                    backgroundColor: '#000F33',
-                    border: doorColor.color === '#000F33' && '5px solid #4C12A1'
-                  }}
-                />
-                Black
-              </S.ColorContentItem>
-              <S.ColorContentItem
-                onClick={() =>
-                  this.setState({
-                    doorColor: { name: 'Grey', color: '#8791AB' }
-                  })
-                }
-              >
-                <S.ColorContentImage
-                  style={{
-                    backgroundColor: '#8791AB',
-                    border: doorColor.color === '#8791AB' && '5px solid #4C12A1'
-                  }}
-                />
-                Grey
-              </S.ColorContentItem>
-              <S.ColorContentItem
-                onClick={() =>
-                  this.setState({
-                    doorColor: { name: 'Blue', color: '#0A339E' }
-                  })
-                }
-              >
-                <S.ColorContentImage
-                  style={{
-                    backgroundColor: '#0A339E',
-                    border: doorColor.color === '#0A339E' && '5px solid #4C12A1'
-                  }}
-                />
-                Blue
-              </S.ColorContentItem>
-              <S.ColorContentItem
-                onClick={() =>
-                  this.setState({
-                    doorColor: { name: 'Green', color: '#00491D' }
-                  })
-                }
-              >
-                <S.ColorContentImage
-                  style={{
-                    backgroundColor: '#00491D',
-                    border: doorColor.color === '#00491D' && '5px solid #4C12A1'
-                  }}
-                />
-                Green
-              </S.ColorContentItem>
-              <S.ColorContentItem
-                onClick={() =>
-                  this.setState({
-                    doorColor: { name: 'Brown', color: '#624100' }
-                  })
-                }
-              >
-                <S.ColorContentImage
-                  style={{
-                    backgroundColor: '#624100',
-                    border: doorColor.color === '#624100' && '5px solid #4C12A1'
-                  }}
-                />
-                Brown
-              </S.ColorContentItem>
-              <S.ColorContentItem
-                onClick={() =>
-                  this.setState({
-                    doorColor: {
-                      name: 'Wood',
-                      url: '/assets/img/svg/color/wood2.jpg'
-                    }
-                  })
-                }
-              >
-                <S.ColorContentImage
-                  style={{
-                    backgroundImage: 'url("/assets/img/svg/color/wood2.jpg")',
-                    border: doorColor.name === 'Wood' && '5px solid #4C12A1'
-                  }}
-                />
-                Wood
-              </S.ColorContentItem>
-              <S.ColorContentItem
-                onClick={() =>
-                  this.setState({
-                    doorColor: {
-                      name: 'Stone',
-                      url: '/assets/img/svg/color/stone2.jpg'
-                    }
-                  })
-                }
-              >
-                <S.ColorContentImage
-                  style={{
-                    backgroundImage: 'url("/assets/img/svg/color/stone2.jpg")',
-                    border: doorColor.name === 'Stone' && '5px solid #4C12A1'
-                  }}
-                />
-                Stone
-              </S.ColorContentItem>
-            </S.ContentWrapper1>
-          </S.ContentWrapper>
-        )
-      },
-      {
-        index: 3,
-        title: 'INSTALLATION',
-        description: 'Select from the door collection for all cabinets.',
-        content: (
-          <S.ContentWrapper>
-            <span style={{ fontSize: 20, fontWeight: 'bold' }}>Color</span>
-            <S.ContentWrapper1>
-              <S.ColorContentItem>
-                <S.ColorContentImage
-                  style={{
-                    backgroundColor: 'white',
-                    cursor: 'auto',
-                    border: doorColor.color === '#ffffff' && '5px solid #4C12A1'
-                  }}
-                />
-                White
-              </S.ColorContentItem>
-              <S.ColorContentItem>
-                <S.ColorContentImage
-                  style={{
-                    backgroundColor: '#000F33',
-                    cursor: 'auto',
-                    border: doorColor.color === '#000F33' && '5px solid #4C12A1'
-                  }}
-                />
-                Black
-              </S.ColorContentItem>
-              <S.ColorContentItem>
-                <S.ColorContentImage
-                  style={{
-                    backgroundColor: '#8791AB',
-                    cursor: 'auto',
-                    border: doorColor.color === '#8791AB' && '5px solid #4C12A1'
-                  }}
-                />
-                Grey
-              </S.ColorContentItem>
-              <S.ColorContentItem>
-                <S.ColorContentImage
-                  style={{
-                    backgroundColor: '#0A339E',
-                    cursor: 'auto',
-                    border: doorColor.color === '#0A339E' && '5px solid #4C12A1'
-                  }}
-                />
-                Blue
-              </S.ColorContentItem>
-              <S.ColorContentItem>
-                <S.ColorContentImage
-                  style={{
-                    backgroundColor: '#00491D',
-                    cursor: 'auto',
-                    border: doorColor.color === '#00491D' && '5px solid #4C12A1'
-                  }}
-                />
-                Green
-              </S.ColorContentItem>
-              <S.ColorContentItem>
-                <S.ColorContentImage
-                  style={{
-                    backgroundColor: '#624100',
-                    cursor: 'auto',
-                    border: doorColor.color === '#624100' && '5px solid #4C12A1'
-                  }}
-                />
-                Brown
-              </S.ColorContentItem>
-              <S.ColorContentItem>
-                <S.ColorContentImage
-                  style={{
-                    backgroundImage: 'url("/assets/img/svg/color/wood2.jpg")',
-                    cursor: 'auto',
-                    border: doorColor.name === 'Wood' && '5px solid #4C12A1'
-                  }}
-                />
-                Wood
-              </S.ColorContentItem>
-              <S.ColorContentItem>
-                <S.ColorContentImage
-                  style={{
-                    backgroundImage: 'url("/assets/img/svg/color/stone2.jpg")',
-                    cursor: 'auto',
-                    border: doorColor.name === 'Stone' && '5px solid #4C12A1'
-                  }}
-                />
-                Stone
-              </S.ColorContentItem>
-            </S.ContentWrapper1>
-            <span style={{ fontSize: 20, fontWeight: 'bold', marginTop: 30 }}>
-              Installation
-            </span>
-            <S.ContentWrapper1>
-              {this.props.categoryData.data.doorStyles.items.map(item => {
-                return (
-                  <S.DoorStyleContentItem
-                    onClick={() =>
-                      this.setState({
-                        installation: item.name
-                      })
-                    }
-                  >
-                    <S.DoorStyleContentImage
-                      src={item.thumbnail}
-                      style={{
-                        backgroundColor:
-                          installation === item.name && 'rgb(217, 232, 255)'
-                      }}
-                    />
-                    <S.ContentCheckImage
-                      id="check"
-                      src="/assets/img/svg/firstsetting/check-normal.svg"
-                    />
-                    {installation === item.name && (
-                      <S.ContentCheckImage src="/assets/img/svg/firstsetting/check-active.svg" />
-                    )}
-                    {item.name}
-                  </S.DoorStyleContentItem>
-                );
-              })}
-            </S.ContentWrapper1>
-          </S.ContentWrapper>
-        )
-      },
-      {
-        index: 4,
-        title: 'STYLE',
-        description: 'Select from the door collection for all cabinets.',
-        content: (
-          <S.ContentWrapper>
-            <span style={{ fontSize: 20, fontWeight: 'bold' }}>
-              {installation}
-            </span>
-            <S.ContentWrapper1>
-              {installation &&
-                this.props.categoryData.data.doorStyles.items
-                  .filter(item => item.name === installation)[0]
-                  .items.map(element => {
-                    return (
-                      <S.DoorStyleContentItem
-                        onClick={() =>
-                          this.setState({
-                            doorCategory: {
-                              name: element.name,
-                              url: element.thumbnail
-                            }
-                          })
-                        }
-                      >
-                        <S.DoorCategoryContentImage
-                          style={{
-                            backgroundColor:
-                              doorCategory.name === element.name &&
-                              'rgb(217, 232, 255)',
-                            height: doorCategory.name === element.name && 150,
-                            margin:
-                              doorCategory.name === element.name && 'unset',
-                            padding: doorCategory.name === element.name && 30
-                          }}
-                          src={element.thumbnail}
-                        />
-                        <S.ContentCheckImage
-                          id="check"
-                          src="/assets/img/svg/firstsetting/check-normal.svg"
-                        />
-                        {doorCategory.name === element.name && (
-                          <S.ContentCheckImage src="/assets/img/svg/firstsetting/check-active.svg" />
-                        )}
-                        {element.name}
-                      </S.DoorStyleContentItem>
-                    );
-                  })}
-            </S.ContentWrapper1>
-          </S.ContentWrapper>
-        )
-      },
-      {
-        index: 5,
-        title: 'FINISH',
-        description: 'Select from the door collection for all cabinets.',
-        content: (
-          <S.ContentWrapper>
-            <span style={{ fontSize: 20, fontWeight: 'bold' }}>
-              {installation}/{doorCategory.name}
-            </span>
-            <S.DoorStyleWrapper>
-              {doorCategory.name &&
-                this.props.categoryData.data.doorStyles.items
-                  .filter(item => item.name === installation)[0]
-                  .items.filter(item1 => item1.name === doorCategory.name)[0]
-                  .items.map(element => {
-                    if (doorColor.color) {
-                      return (
-                        element.color === doorColor.color && (
-                          <S.DoorStyleContentItem
-                            onClick={() =>
-                              this.setState({
-                                doorStyle: element
-                              })
-                            }
-                          >
-                            <S.DoorCategoryContentImage
-                              src={element.thumbnail}
-                              style={{
-                                padding:
-                                  doorStyle.name === element.name
-                                    ? '10px 40px'
-                                    : '0px 40px',
-                                backgroundColor:
-                                  doorStyle.name === element.name &&
-                                  'rgb(217, 232, 255)',
-                                height: doorStyle.name === element.name && 150,
-                                margin:
-                                  doorStyle.name === element.name && 'unset'
-                              }}
-                            />
-                            <S.ContentCheckImage
-                              id="check"
-                              src="/assets/img/svg/firstsetting/check-normal.svg"
-                            />
-                            {doorStyle.name === element.name && (
-                              <S.ContentCheckImage src="/assets/img/svg/firstsetting/check-active.svg" />
-                            )}
-                            {element.name}
-                          </S.DoorStyleContentItem>
-                        )
-                      );
-                    } else {
-                      return (
-                        <S.DoorStyleContentItem
-                          style={{
-                            width: '15.7%'
-                          }}
-                          onClick={() =>
-                            this.setState({
-                              doorStyle: element
-                            })
-                          }
-                        >
-                          <S.DoorCategoryContentImage
-                            src={element.thumbnail}
-                            style={{
-                              padding:
-                                doorStyle.name === element.name
-                                  ? '10px 40px'
-                                  : '0px 40px',
-                              backgroundColor:
-                                doorStyle.name === element.name &&
-                                'rgb(217, 232, 255)',
-                              height: doorStyle.name === element.name && 150,
-                              margin: doorStyle.name === element.name && 'unset'
-                            }}
-                          />
-                          <S.ContentCheckImage
-                            id="check"
-                            src="/assets/img/svg/firstsetting/check-normal.svg"
-                          />
-                          {doorStyle.name === element.name && (
-                            <S.ContentCheckImage src="/assets/img/svg/firstsetting/check-active.svg" />
-                          )}
-                          {element.name}
-                        </S.DoorStyleContentItem>
-                      );
-                    }
-                  })}
-            </S.DoorStyleWrapper>
-          </S.ContentWrapper>
-        )
-      },
-      {
-        index: 6,
-        description: 'Select from the door collection for all cabinets.',
-        content: (
-          <S.ContentWrapper>
-            <span
-              style={{ fontSize: 20, fontWeight: 'bold', marginBottom: '15px' }}
-            >
-              Room Shape
-            </span>
-            <S.ContentWrapper1>
-              {roomShapeData
-                .filter(element => element.type === roomShape.name)
-                .map(item => {
-                  return (
-                    <S.ContentItem>
-                      <S.RoomContentImage
-                        src={item.url}
-                        style={{ backgroundColor: 'rgb(217, 232, 255)' }}
-                      />
-                      <S.ContentCheckImage src="/assets/img/svg/firstsetting/check-active.svg" />
-                      {item.name}
-                    </S.ContentItem>
-                  );
-                })}
-              {roomShape.name === 'custom' && (
-                <S.ContentItem>
-                  <S.RoomContentImage
-                    src="/assets/img/svg/firstsetting/Square.svg"
-                    style={{ backgroundColor: 'rgb(217, 232, 255)' }}
-                  />
-                  <img
-                    src="/assets/img/svg/firstsetting/pencil.svg"
-                    style={{
-                      position: 'absolute',
-                      top: 10,
-                      right: 10,
-                      height: 35
-                    }}
-                  />
-                  <S.ContentCheckImage src="/assets/img/svg/firstsetting/check-active.svg" />
-                  Custom
-                </S.ContentItem>
-              )}
-            </S.ContentWrapper1>
-            <S.ContentWrapper1>
-              {doorColor.name && (
-                <S.ContentWrapper2>
-                  <span
-                    style={{
-                      fontSize: 20,
-                      fontWeight: 'bold',
-                      marginBottom: '25px'
-                    }}
-                  >
-                    Color
-                  </span>
-                  <S.ColorContentItem>
-                    <S.ColorContentImage
-                      style={{
-                        backgroundColor: doorColor.color,
-                        backgroundImage: `url(${doorColor.url})`,
-                        border: '5px solid #4C12A1'
-                      }}
-                    />
-                    {doorColor.name}
-                  </S.ColorContentItem>
-                </S.ContentWrapper2>
-              )}
-              {installation && doorCategory.name && (
-                <S.ContentWrapper2>
-                  <span
-                    style={{
-                      fontSize: 20,
-                      fontWeight: 'bold',
-                      marginBottom: '25px'
-                    }}
-                  >
-                    {installation}
-                  </span>
-                  <S.DoorStyleContentItem>
-                    <S.DoorCategoryContentImageWrapper
-                      style={{
-                        backgroundColor: 'rgb(217, 232, 255'
-                      }}
-                    >
-                      <S.DoorCategoryContentImage src={doorCategory.url} />
-                    </S.DoorCategoryContentImageWrapper>
-                    <S.ContentCheckImage src="/assets/img/svg/firstsetting/check-active.svg" />
-                    {doorCategory.name}
-                  </S.DoorStyleContentItem>
-                </S.ContentWrapper2>
-              )}
-              {installation && doorCategory.name && doorStyle.name && (
-                <S.ContentWrapper2>
-                  <span
-                    style={{
-                      fontSize: 20,
-                      fontWeight: 'bold',
-                      marginBottom: '25px'
-                    }}
-                  >
-                    Finish
-                  </span>
-                  <S.DoorStyleContentItem>
-                    <S.DoorCategoryContentImage
-                      src={doorStyle.thumbnail}
-                      style={{
-                        padding: '10px 40px',
-                        backgroundColor: 'rgb(217, 232, 255)',
-                        height: 150,
-                        margin: 'unset'
-                      }}
-                    />
-                    <S.ContentCheckImage src="/assets/img/svg/firstsetting/check-active.svg" />
-                    {doorStyle.name}
-                  </S.DoorStyleContentItem>
-                </S.ContentWrapper2>
-              )}
-            </S.ContentWrapper1>
-          </S.ContentWrapper>
-        )
-      }
-    ];
-
-    return (
-      <S.FirstSettingWrapper>
-        <S.TitleBarWrapper>
-          <S.TitleBar>
-            {step === 1
-              ? 'Choose your room shape'
-              : step === 6
-                ? 'Summary'
-                : 'Choose your door style'}
-          </S.TitleBar>
-          <S.TitleBarButtonWrapper>
-            <S.TitleBarButton
-              style={{ border: 'none' }}
-              onClick={() => {
-                step > 1 && this.setState({ step: step - 1 });
-                switch (step) {
-                  case 6:
-                    this.setState({ doorStyle: '' });
-                    break;
-                  case 5:
-                    this.setState({
-                      doorCategory: { name: '', url: '' },
-                      doorStyle: ''
-                    });
-                    break;
-                  case 4:
-                    this.setState({
-                      installation: '',
-                      doorCategory: { name: '', url: '' }
-                    });
-                    break;
-                  case 3:
-                    this.setState({ installation: '' });
-                    break;
-                  case 2:
-                    this.setState({
-                      doorColor: { name: '', url: '', color: '' }
-                    });
-                  default:
-                    break;
-                }
-              }}
-            >
-              Cancel
-            </S.TitleBarButton>
-            <S.TitleBarButton
-              style={{ backgroundColor: 'rgb(0,185,185)' }}
-              onClick={() => {
-                step < 6 ? this.setState({ step: step + 1 }) : this._confirm();
-              }}
-            >
-              <img height="25px" src="/assets/img/svg/headerbar/check.svg" />
-              {step > 5 ? 'Confirm' : 'OK'}
-            </S.TitleBarButton>
-          </S.TitleBarButtonWrapper>
-        </S.TitleBarWrapper>
-        <S.StepBarWrapper>
-          {stepBar.map(element => {
-            switch (element.index) {
-              case 1:
-                return (
-                  <S.StepBullet>
-                    <S.StepBulletLabel>{element.title}</S.StepBulletLabel>
-                    <S.StepBulletIcon
-                      src={
-                        step === element.index
-                          ? '/assets/img/svg/firstsetting/bullet-current.svg'
-                          : '/assets/img/svg/firstsetting/bullet-done.svg'
-                      }
-                    />
-                  </S.StepBullet>
-                );
-              case 6:
-                return null;
-              default:
-                return (
-                  <S.StepBullet>
-                    <S.StepBarIcon
-                      src={
-                        step >= element.index - 1
-                          ? '/assets/img/svg/firstsetting/bar-active.svg'
-                          : '/assets/img/svg/firstsetting/bar-normal.svg'
-                      }
-                    />
-                    <S.StepBulletLabel>{element.title}</S.StepBulletLabel>
-                    <S.StepBulletIcon
-                      src={
-                        step === element.index
-                          ? '/assets/img/svg/firstsetting/bullet-current.svg'
-                          : step > element.index
-                            ? '/assets/img/svg/firstsetting/bullet-done.svg'
-                            : '/assets/img/svg/firstsetting/bullet-not-done.svg'
-                      }
-                    />
-                  </S.StepBullet>
-                );
-            }
-          })}
-        </S.StepBarWrapper>
-        <div>
-          {stepBar[step - 1].description}
-          <br />
-          To get professional help, click on the{' '}
-          <strong>Designer Assistance</strong> button.
-        </div>
-        {stepBar[step - 1].content}
-      </S.FirstSettingWrapper>
-    );
-  }
-}
-
-FirstSetting.propTypes = {
-  state: PropTypes.object.isRequired,
-  content: PropTypes.number.isRequired
-};
-
-FirstSetting.contextTypes = {
-  projectActions: PropTypes.object.isRequired,
-  viewer2DActions: PropTypes.object.isRequired,
-  viewer3DActions: PropTypes.object.isRequired,
-  linesActions: PropTypes.object.isRequired,
-  itemsActions: PropTypes.object.isRequired,
-  catalog: PropTypes.object.isRequired
-};