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

package/src/components/firstsetting/firstsetting.jsx

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