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

package/src/components/wizardstep/index.jsx

@@ -0,0 +1,1372 @@
+import React, { Component } from 'react';
+import PropTypes, { element, elementType } from 'prop-types';
+import convert from 'convert-units';
+import * as S from './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 {
+  TEXT_COLOR_NEUTRAL_5,
+  TEXT_COLOR_NEUTRAL_0,
+  TEXT_COLOR_NEUTRAL_2,
+  STATUS_NEGATIVE_COLOR,
+  BG_COLOR_HOVER,
+  BG_COLOR_1,
+  TEXT_COLOR_NEUTRAL_3,
+  SECONDARY_PURPLE_COLOR,
+  DEFAULT_FONT_FAMILY,
+  SHADE_LIGHT_PURPLE_COLOR,
+  TEXT_COLOR_NEUTRAL_1,
+  TEXT_COLOR_NEUTRAL_4,
+  DECIMAL_PLACES_2
+} from '../../constants';
+import Dialog from '@material-ui/core/Dialog';
+import styled from 'styled-components';
+import { formatNumber, toFixedFloat } from '../../utils/math';
+
+const StyledDialog = styled(Dialog)`
+  .MuiDialog-paperWidthSm {
+    border-radius: 10px;
+  }
+`;
+
+let roomShapeData = [
+  {
+    type: 'square',
+    name: 'Square',
+    url: '/assets/img/svg/wizardstep/Square.svg',
+    data: rectangleData,
+    key: 1
+  },
+  {
+    type: 'l-shape',
+    name: 'L-Shaped',
+    url: '/assets/img/svg/wizardstep/L.svg',
+    data: lShaped,
+    key: 2
+  },
+  {
+    type: 'irregular',
+    name: 'Irregular',
+    url: '/assets/img/svg/wizardstep/L2.svg',
+    data: longNarrow,
+    key: 3
+  },
+  {
+    type: 'open',
+    name: 'Open',
+    url: '/assets/img/svg/wizardstep/Open.svg',
+    data: oRectangle,
+    key: 4
+  }
+];
+
+let unitData = [
+  {
+    _name: 'inch',
+    _unit: 'in'
+  },
+  {
+    _name: 'centimeter',
+    _unit: 'cm'
+  },
+  {
+    _name: 'millimeter',
+    _unit: 'mm'
+  },
+  {
+    _name: 'meter',
+    _unit: 'm'
+  },
+  {
+    _name: 'feet',
+    _unit: 'ft'
+  }
+];
+
+export default class WizardStep extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    const getDoorStyle = items => {
+      if (!items || items.length === 0) return undefined;
+
+      const brilliantWhiteShaker = items.find(
+        item => item.name === 'Brilliant White Shaker'
+      );
+
+      if (brilliantWhiteShaker) {
+        return brilliantWhiteShaker;
+      }
+
+      return items[0];
+    };
+
+    this.state = {
+      type: 1, //1: wizard, 2: retrieve
+      step: 0,
+      measurementUnit: {
+        _name: 'inch',
+        _unit: 'in'
+      },
+      ceilingHeight: 96,
+      roomShape: {
+        type: '',
+        data: {}
+      },
+      colorFamily: {},
+      installation: this.props.categoryData.data.doorStyles.items.filter(
+        item =>
+          item.items.filter(item1 => item1.items.length !== 0).length !== 0
+      )[0],
+      doorCategory: this.props.categoryData.data.doorStyles.items
+        .filter(
+          item =>
+            item.items.filter(item1 => item1.items.length !== 0).length !== 0
+        )[0]
+        .items.filter(item => item.items.length !== 0)[0],
+      doorStyle: getDoorStyle(
+        this.props.categoryData.data.doorStyles.items
+          .filter(
+            item =>
+              item.items.filter(item1 => item1.items.length !== 0).length !== 0
+          )[0]
+          .items.filter(item => item.items.length !== 0)[0].items
+      ),
+      cancelDialogVisible: false,
+      hover: 0
+    };
+  }
+
+  loadProject(data) {
+    this.context.projectActions.loadProject(data, this.props.categoryData);
+  }
+
+  _confirm(type) {
+    this.props.close();
+    if (this.state.roomShape.type === 'custom')
+      this.context.linesActions.selectToolDrawingLine('wall');
+    else if (this.state.roomShape.type === '') {
+    } else this.loadProject(this.state.roomShape.data, this.props.categoryData);
+    this.context.viewer2DActions.updateCeilHeight(
+      toFixedFloat(this.state.ceilingHeight)
+    );
+    this.context.viewer2DActions.updateCeilHeightUnit(
+      this.state.measurementUnit._unit
+    );
+    this.context.viewer3DActions.update3DCeilHeight(
+      toFixedFloat(this.state.ceilingHeight)
+    );
+    this.context.viewer3DActions.update3DCeilHeightUnit(
+      this.state.measurementUnit._unit
+    );
+    let doorStyle = {
+      ...this.state.doorStyle,
+      install: this.state.installation.name
+    };
+    !!type && this.context.itemsActions.setDoorStyle(doorStyle);
+  }
+
+  _ok() {
+    if (this.state.step === 1 && this.state.roomShape.type === '') {
+      roomShapeData.map(item => {
+        document.getElementById(
+          `roomshape&${item.type}`
+        ).style.backgroundColor = STATUS_NEGATIVE_COLOR;
+        document.getElementById(`roomlabel&${item.type}`).style.color =
+          TEXT_COLOR_NEUTRAL_0;
+      });
+      document.getElementById('roomshape&custom').style.backgroundColor =
+        STATUS_NEGATIVE_COLOR;
+      document.getElementById('roomshape&pencil').style.backgroundColor =
+        STATUS_NEGATIVE_COLOR;
+      document.getElementById('roomlabel&custom').style.color =
+        TEXT_COLOR_NEUTRAL_0;
+      document.getElementById('description').style.color =
+        STATUS_NEGATIVE_COLOR;
+    } else this.setState({ step: this.state.step + 1 });
+  }
+
+  onStepChange(e) {
+    if (this.state.step === 1 && this.state.roomShape.type === '') {
+      roomShapeData.map(item => {
+        document.getElementById(
+          `roomshape&${item.type}`
+        ).style.backgroundColor = STATUS_NEGATIVE_COLOR;
+        document.getElementById(`roomlabel&${item.type}`).style.color =
+          TEXT_COLOR_NEUTRAL_0;
+      });
+      document.getElementById('roomshape&custom').style.backgroundColor =
+        STATUS_NEGATIVE_COLOR;
+      document.getElementById('roomshape&pencil').style.backgroundColor =
+        STATUS_NEGATIVE_COLOR;
+      document.getElementById('roomlabel&custom').style.color =
+        TEXT_COLOR_NEUTRAL_0;
+      document.getElementById('description').style.color =
+        STATUS_NEGATIVE_COLOR;
+    } else {
+      this.setState({ step: e });
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    const img = document.querySelector(
+      'img[src="/assets/img/svg/wizardstep/check-active.svg"]'
+    );
+    if (img) {
+      img.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }
+
+  render() {
+    const {
+      step,
+      roomShape,
+      installation,
+      doorCategory,
+      doorStyle,
+      measurementUnit,
+      ceilingHeight,
+      cancelDialogVisible,
+      colorFamily,
+      hover,
+      type
+    } = this.state;
+    let regexp = new RegExp(`^-?([0-9]+)?\\.?([0-9]{0,2})?$`);
+
+    const stepBar = [
+      {
+        index: 1,
+        title: 'ROOM SHAPE',
+        description: (
+          <div>
+            Select units, add ceiling height and a predefined shape or draw your
+            own.
+            <br />
+            To get professional help, click on the Help button.
+          </div>
+        ),
+        content: (
+          <S.ContentWrapper>
+            <S.ContentWrapper1 style={{ marginBottom: 25 }}>
+              <div
+                style={{
+                  position: 'relative',
+                  display: 'flex',
+                  alignItems: 'center'
+                }}
+              >
+                <S.MeasurementUnitLabel>
+                  Measurement Unit
+                </S.MeasurementUnitLabel>
+                <S.MeasurementUnitSelect
+                  id="measurement_select"
+                  onClick={() => {
+                    document.getElementById(
+                      'measurement_option'
+                    ).style.display =
+                      document.getElementById('measurement_option').style
+                        .display === 'none'
+                        ? 'block'
+                        : 'none';
+                    document.getElementById(
+                      'measurement_select'
+                    ).style.borderColor = SECONDARY_PURPLE_COLOR;
+                    document.getElementById('arrow-down').style.display =
+                      document.getElementById('arrow-down').style.display ===
+                      'none'
+                        ? 'block'
+                        : 'none';
+                    document.getElementById('arrow-up').style.display =
+                      document.getElementById('arrow-up').style.display ===
+                      'block'
+                        ? 'none'
+                        : 'block';
+                  }}
+                >
+                  {`${measurementUnit._name}(${measurementUnit._unit})`}
+                </S.MeasurementUnitSelect>
+                <S.SelectArrow
+                  id="arrow-down"
+                  style={{ display: 'block' }}
+                  maskImage="/assets/img/svg/bottombar/arrow-down.svg"
+                />
+                <S.SelectArrow
+                  id="arrow-up"
+                  style={{ display: 'none' }}
+                  maskImage="/assets/img/svg/bottombar/arrow-up.svg"
+                />
+                <div
+                  id="measurement_option"
+                  style={{
+                    display: 'none',
+                    width: '100%',
+                    zIndex: 3,
+                    top: 55,
+                    position: 'absolute',
+                    borderRadius: 5,
+                    backgroundColor: 'white',
+                    boxShadow:
+                      '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)'
+                  }}
+                >
+                  {unitData.map((unit, key) => {
+                    return (
+                      <S.MeasurementUnitOption
+                        onClick={() => {
+                          document.getElementById(
+                            'measurement_option'
+                          ).style.display = 'none';
+                          document.getElementById('arrow-down').style.display =
+                            'block';
+                          document.getElementById('arrow-up').style.display =
+                            'none';
+                          this.setState({
+                            ceilingHeight: formatNumber(
+                              convert(ceilingHeight)
+                                .from(measurementUnit._unit)
+                                .to(unit._unit),
+                              DECIMAL_PLACES_2
+                            ),
+                            measurementUnit: unit
+                          });
+                        }}
+                        key={key}
+                      >
+                        {`${unit._name}(${unit._unit})`}
+                      </S.MeasurementUnitOption>
+                    );
+                  })}
+                </div>
+              </div>
+              <div
+                style={{
+                  position: 'relative',
+                  display: 'flex',
+                  alignItems: 'center',
+                  marginLeft: 40
+                }}
+              >
+                <S.MeasurementUnitLabel>Ceiling Height</S.MeasurementUnitLabel>
+                <input
+                  style={{
+                    width: 167,
+                    textAlign: 'left',
+                    padding: '15px 15px',
+                    color: '#000f33',
+                    fontSize: '13px',
+                    lineHeight: '18px',
+                    border: '2px solid #8791ab',
+                    borderRadius: '5px',
+                    outline: 0,
+                    fontWeight: 600,
+                    paddingRight: 90
+                  }}
+                  value={ceilingHeight}
+                  onChange={evt => {
+                    if (regexp.test(evt.target.value))
+                      this.setState({
+                        ceilingHeight: evt.target.value
+                      });
+                    else this.setState({ ceilingHeight: ceilingHeight });
+                  }}
+                />
+                <span
+                  style={{
+                    position: 'absolute',
+                    color: TEXT_COLOR_NEUTRAL_1,
+                    fontSize: 16,
+                    fontFamily: DEFAULT_FONT_FAMILY,
+                    fontWeight: 400,
+                    lineHeight: '22px',
+                    textAlign: 'right',
+                    right: 10
+                  }}
+                >
+                  {measurementUnit._unit === 'in'
+                    ? `${measurementUnit._unit}(default)`
+                    : measurementUnit._unit}
+                </span>
+              </div>
+            </S.ContentWrapper1>
+            <S.ContentWrapper1>
+              {roomShapeData.map((item, key) => {
+                return (
+                  <S.ContentItem
+                    onClick={() => {
+                      this.setState({ roomShape: item });
+                      document.getElementById('description').style.color =
+                        TEXT_COLOR_NEUTRAL_0;
+                    }}
+                    key={item.key}
+                  >
+                    <S.MaskImageWrapper
+                      style={{
+                        backgroundColor:
+                          roomShape.type === item.type && BG_COLOR_HOVER
+                      }}
+                    >
+                      <S.RoomContentImage
+                        id={`roomshape&${item.type}`}
+                        maskImage={item.url}
+                        style={{
+                          backgroundColor:
+                            roomShape.type === item.type
+                              ? SECONDARY_PURPLE_COLOR
+                              : roomShape.type
+                                ? TEXT_COLOR_NEUTRAL_3
+                                : TEXT_COLOR_NEUTRAL_0
+                        }}
+                      />
+                    </S.MaskImageWrapper>
+                    <S.ContentCheckImage
+                      id="check"
+                      src="/assets/img/svg/wizardstep/check-normal.svg"
+                    />
+                    {roomShape.type === item.type && (
+                      <S.ContentCheckImage src="/assets/img/svg/wizardstep/check-active.svg" />
+                    )}
+                    <S.ContentItemLabel
+                      id={`roomlabel&${item.type}`}
+                      style={{
+                        fontWeight: roomShape.type === item.type && 400,
+                        color:
+                          roomShape.type === item.type
+                            ? SECONDARY_PURPLE_COLOR
+                            : roomShape.type
+                              ? TEXT_COLOR_NEUTRAL_3
+                              : TEXT_COLOR_NEUTRAL_0
+                      }}
+                    >
+                      {item.name}
+                    </S.ContentItemLabel>
+                  </S.ContentItem>
+                );
+              })}
+            </S.ContentWrapper1>
+            <S.ContentWrapper1>
+              <S.ContentItem
+                onClick={() => {
+                  this.setState({ roomShape: { type: 'custom', data: {} } });
+                  document.getElementById('description').style.color =
+                    TEXT_COLOR_NEUTRAL_0;
+                }}
+              >
+                <S.MaskImageWrapper
+                  style={{
+                    backgroundColor:
+                      roomShape.type === 'custom' && BG_COLOR_HOVER
+                  }}
+                >
+                  <S.RoomContentImage
+                    id="roomshape&custom"
+                    maskImage="/assets/img/svg/wizardstep/Custom.svg"
+                    style={{
+                      backgroundColor:
+                        roomShape.type === 'custom'
+                          ? SECONDARY_PURPLE_COLOR
+                          : roomShape.type
+                            ? TEXT_COLOR_NEUTRAL_3
+                            : TEXT_COLOR_NEUTRAL_0
+                    }}
+                  />
+                  <S.RoomContentImage
+                    id="roomshape&pencil"
+                    maskImage="/assets/img/svg/wizardstep/pencil.svg"
+                    style={{
+                      position: 'absolute',
+                      top: 10,
+                      right: 10,
+                      height: 25,
+                      width: 25,
+                      backgroundColor:
+                        roomShape.type === 'custom'
+                          ? SECONDARY_PURPLE_COLOR
+                          : roomShape.type
+                            ? TEXT_COLOR_NEUTRAL_3
+                            : TEXT_COLOR_NEUTRAL_0
+                    }}
+                  />
+                </S.MaskImageWrapper>
+                <S.ContentCheckImage
+                  id="check"
+                  src="/assets/img/svg/wizardstep/check-normal.svg"
+                />
+                {roomShape.type === 'custom' && (
+                  <S.ContentCheckImage src="/assets/img/svg/wizardstep/check-active.svg" />
+                )}
+                <S.ContentItemLabel
+                  id="roomlabel&custom"
+                  style={{
+                    fontWeight: roomShape.type === 'custom' && 600,
+                    color:
+                      roomShape.type === 'custom'
+                        ? SECONDARY_PURPLE_COLOR
+                        : roomShape.type
+                          ? TEXT_COLOR_NEUTRAL_3
+                          : TEXT_COLOR_NEUTRAL_0
+                  }}
+                >
+                  Draw Custom
+                </S.ContentItemLabel>
+                <span
+                  id="hint"
+                  style={{
+                    position: 'absolute',
+                    fontFamily: DEFAULT_FONT_FAMILY,
+                    fontSize: 16,
+                    lineHeight: '20px',
+                    textAlign: 'left',
+                    backgroundColor: TEXT_COLOR_NEUTRAL_1,
+                    opacity: 0.8,
+                    color: BG_COLOR_1,
+                    borderRadius: 3,
+                    zIndex: 3,
+                    width: 'max-content',
+                    top: -30,
+                    left: -10,
+                    padding: '3px 8px'
+                  }}
+                >
+                  You will be able to draw your own space
+                </span>
+              </S.ContentItem>
+            </S.ContentWrapper1>
+          </S.ContentWrapper>
+        )
+      },
+      {
+        index: 2,
+        title: 'COLOR & STYLE',
+        description:
+          'Customize your door style. To get professional help, click on the Help button.',
+        content: (
+          <S.ContentWrapper>
+            <S.Title>Installation</S.Title>
+            <S.ContentWrapper1>
+              {this.props.categoryData.data.doorStyles.items.map(
+                (item, key) => {
+                  return (
+                    <S.DoorStyleContentItem
+                      onClick={() =>
+                        this.setState({
+                          installation: item,
+                          doorCategory: item.items[0]
+                        })
+                      }
+                      key={key}
+                    >
+                      <S.DoorStyleContentImageWrapper
+                        id="item"
+                        style={{
+                          backgroundColor:
+                            installation.name === item.name &&
+                            TEXT_COLOR_NEUTRAL_5,
+                          borderColor:
+                            installation.name === item.name &&
+                            SECONDARY_PURPLE_COLOR
+                        }}
+                      >
+                        <S.DoorStyleContentImage
+                          id={`doorstyle&${item.name}&image`}
+                          maskImage={item.thumbnail}
+                          style={{
+                            backgroundColor:
+                              installation.name === item.name &&
+                              SECONDARY_PURPLE_COLOR
+                          }}
+                        />
+                      </S.DoorStyleContentImageWrapper>
+                      <S.ContentItemLabel
+                        style={{
+                          color:
+                            installation.name === item.name &&
+                            SECONDARY_PURPLE_COLOR,
+                          fontSize: 15,
+                          fontWeight: installation.name === item.name && 700
+                        }}
+                      >
+                        {item.name}
+                      </S.ContentItemLabel>
+                    </S.DoorStyleContentItem>
+                  );
+                }
+              )}
+            </S.ContentWrapper1>
+            <S.Title style={{ marginTop: 20 }}>Door Style</S.Title>
+            <S.ContentWrapper1>
+              {this.props.categoryData.data.doorStyles.items
+                .filter(item => item.name === installation.name)[0]
+                .items.map((element, key) => {
+                  return (
+                    <S.DoorStyleContentItem
+                      onClick={() => this.setState({ doorCategory: element })}
+                      key={key}
+                    >
+                      <S.DoorStyleContentImageWrapper
+                        id="item"
+                        style={{
+                          backgroundColor:
+                            doorCategory.name === element.name &&
+                            TEXT_COLOR_NEUTRAL_5,
+                          borderColor:
+                            doorCategory.name === element.name &&
+                            SECONDARY_PURPLE_COLOR
+                        }}
+                      >
+                        <S.DoorCategoryContentImage
+                          style={{
+                            margin:
+                              doorCategory.name === element.name && 'unset',
+                            backgroundColor:
+                              doorCategory.name === element.name &&
+                              SECONDARY_PURPLE_COLOR
+                          }}
+                          maskImage={element.thumbnail}
+                        />
+                      </S.DoorStyleContentImageWrapper>
+                      <S.ContentItemLabel
+                        id={`doorcategory&${element.name}&label`}
+                        style={{
+                          color:
+                            doorCategory.name === element.name
+                              ? SECONDARY_PURPLE_COLOR
+                              : TEXT_COLOR_NEUTRAL_0,
+                          fontSize: 15,
+                          fontWeight: doorCategory.name === element.name && 700
+                        }}
+                      >
+                        {element.name}
+                      </S.ContentItemLabel>
+                    </S.DoorStyleContentItem>
+                  );
+                })}
+            </S.ContentWrapper1>
+            <div
+              style={{
+                display: 'flex',
+                gap: '1rem',
+                alignItems: 'center',
+                marginTop: 20,
+                height: 30
+              }}
+            >
+              <S.Title>Color family</S.Title>
+              {Object.keys(this.state.colorFamily).length !== 0 && (
+                <S.Button
+                  style={{
+                    fontSize: 12,
+                    padding: '5px 10px',
+                    border: '1px solid'
+                  }}
+                  onClick={() => this.setState({ colorFamily: {} })}
+                >
+                  Clear filter
+                </S.Button>
+              )}
+            </div>
+            <S.ContentWrapper1>
+              <div
+                style={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: '0.5rem'
+                }}
+              >
+                {this.props.categoryData.data.doorColorFamily &&
+                  this.props.categoryData.data.doorColorFamily.map(
+                    (element, key) => {
+                      return (
+                        <S.ColorContentItem
+                          onClick={() =>
+                            this.setState({ colorFamily: element })
+                          }
+                          key={key}
+                        >
+                          <S.ColorContentImage src={element.thumbnail} />
+                          <S.ContentCheckImage
+                            id="check"
+                            src="/assets/img/svg/wizardstep/check-normal.svg"
+                            style={{
+                              height: 70,
+                              width: 70,
+                              borderRadius: '50%',
+                              backgroundColor: 'unset',
+                              zIndex: 2,
+                              padding: 16
+                            }}
+                          />
+                          {colorFamily.id === element.id && (
+                            <S.ContentCheckImage
+                              src="/assets/img/svg/wizardstep/check-active.svg"
+                              style={{
+                                height: 70,
+                                width: 70,
+                                borderRadius: '50%',
+                                backgroundColor: 'unset',
+                                zIndex: 2,
+                                padding: 16,
+                                border: `2px solid ${SECONDARY_PURPLE_COLOR}`
+                              }}
+                            />
+                          )}
+                        </S.ColorContentItem>
+                      );
+                    }
+                  )}
+              </div>
+            </S.ContentWrapper1>
+          </S.ContentWrapper>
+        )
+      },
+      {
+        index: 3,
+        title: 'SUMMARY',
+        description: (
+          <div>
+            <div>Select from the door collection for all cabinets.</div>
+            <div>To get professional help, click on the Help button.</div>
+          </div>
+        ),
+        content: (
+          <S.ContentWrapper>
+            <S.ContentWrapper1>
+              <S.ContentWrapper2>
+                <S.Title>Room Shape</S.Title>
+                {roomShapeData.map((item, key) => {
+                  return (
+                    roomShape.type === item.type && (
+                      <S.ContentItem
+                        style={{ margin: 'unset', marginTop: 20 }}
+                        key={key}
+                      >
+                        <S.MaskImageWrapper>
+                          <S.RoomContentImage
+                            maskImage={item.url}
+                            style={{ backgroundColor: SECONDARY_PURPLE_COLOR }}
+                          />
+                        </S.MaskImageWrapper>
+                        <S.ContentCheckImage src="/assets/img/svg/wizardstep/check-active.svg" />
+                        <S.ContentItemLabel
+                          style={{ color: SECONDARY_PURPLE_COLOR }}
+                        >
+                          {item.name}
+                        </S.ContentItemLabel>
+                      </S.ContentItem>
+                    )
+                  );
+                })}
+                {roomShape.type === 'custom' && (
+                  <S.ContentItem style={{ margin: 'unset', marginTop: 20 }}>
+                    <S.MaskImageWrapper>
+                      <S.RoomContentImage
+                        maskImage="/assets/img/svg/wizardstep/Custom.svg"
+                        style={{ backgroundColor: SECONDARY_PURPLE_COLOR }}
+                      />
+                      <S.RoomContentImage
+                        maskImage="/assets/img/svg/wizardstep/pencil.svg"
+                        style={{
+                          position: 'absolute',
+                          top: 10,
+                          right: 25,
+                          height: 25,
+                          width: 25,
+                          backgroundColor: SECONDARY_PURPLE_COLOR
+                        }}
+                      />
+                    </S.MaskImageWrapper>
+                    <S.ContentCheckImage src="/assets/img/svg/wizardstep/check-active.svg" />
+                    <S.ContentItemLabel
+                      style={{ color: SECONDARY_PURPLE_COLOR }}
+                    >
+                      Draw Custom
+                    </S.ContentItemLabel>
+                    <span
+                      id="hint"
+                      style={{
+                        position: 'absolute',
+                        fontFamily: DEFAULT_FONT_FAMILY,
+                        fontSize: 16,
+                        lineHeight: '20px',
+                        textAlign: 'left',
+                        backgroundColor: TEXT_COLOR_NEUTRAL_1,
+                        opacity: 0.8,
+                        color: BG_COLOR_1,
+                        borderRadius: 3,
+                        zIndex: 3,
+                        width: 'max-content',
+                        top: -30,
+                        left: -10,
+                        padding: '3px 8px'
+                      }}
+                    >
+                      You will be able to draw your own space
+                    </span>
+                  </S.ContentItem>
+                )}
+              </S.ContentWrapper2>
+              <S.ContentWrapper2>
+                <S.Title>Installation</S.Title>
+                <S.DoorStyleContentItem
+                  style={{ margin: 'unset', marginTop: 20 }}
+                >
+                  <S.DoorStyleContentImageWrapper
+                    style={{
+                      borderColor: SECONDARY_PURPLE_COLOR,
+                      backgroundColor: TEXT_COLOR_NEUTRAL_5
+                    }}
+                  >
+                    <S.DoorStyleContentImage
+                      maskImage={installation.thumbnail}
+                      style={{ backgroundColor: SECONDARY_PURPLE_COLOR }}
+                    />
+                  </S.DoorStyleContentImageWrapper>
+                  <S.ContentItemLabel style={{ color: SECONDARY_PURPLE_COLOR }}>
+                    {installation.name}
+                  </S.ContentItemLabel>
+                </S.DoorStyleContentItem>
+              </S.ContentWrapper2>
+              <S.ContentWrapper2>
+                <S.Title>Color Family</S.Title>
+                <S.ColorContentItem style={{ margin: 'unset', marginTop: 20 }}>
+                  {colorFamily.thumbnail && (
+                    <S.ColorContentImage
+                      src={colorFamily.thumbnail}
+                      style={{ height: 120, width: 120, borderRadius: '100%' }}
+                    />
+                  )}
+                  <S.ContentCheckImage
+                    src="/assets/img/svg/wizardstep/check-active.svg"
+                    style={{
+                      height: 120,
+                      width: 120,
+                      borderRadius: '50%',
+                      backgroundColor: 'unset',
+                      zIndex: 2,
+                      padding: 41,
+                      border: `2px solid ${SECONDARY_PURPLE_COLOR}`
+                    }}
+                  />
+                  <S.ContentItemLabel style={{ color: SECONDARY_PURPLE_COLOR }}>
+                    {colorFamily.name}
+                  </S.ContentItemLabel>
+                </S.ColorContentItem>
+              </S.ContentWrapper2>
+              <S.ContentWrapper2>
+                <S.Title>Style</S.Title>
+                <S.DoorStyleContentItem
+                  style={{ margin: 'unset', marginTop: 20 }}
+                >
+                  <S.DoorStyleContentImageWrapper
+                    style={{
+                      backgroundColor: TEXT_COLOR_NEUTRAL_5,
+                      borderColor: SECONDARY_PURPLE_COLOR
+                    }}
+                  >
+                    <S.DoorCategoryContentImage
+                      style={{
+                        margin: 'unset',
+                        backgroundColor: SECONDARY_PURPLE_COLOR
+                      }}
+                      maskImage={doorCategory.thumbnail}
+                    />
+                  </S.DoorStyleContentImageWrapper>
+                  <S.ContentItemLabel style={{ color: SECONDARY_PURPLE_COLOR }}>
+                    {doorCategory.name}
+                  </S.ContentItemLabel>
+                </S.DoorStyleContentItem>
+              </S.ContentWrapper2>
+              <S.ContentWrapper2>
+                <S.Title>Finish</S.Title>
+                <S.DoorStyleContentItem
+                  style={{ margin: 'unset', marginTop: 20 }}
+                >
+                  <S.FinishContentImageWrapper
+                    style={{
+                      border: `2px solid ${SECONDARY_PURPLE_COLOR}`,
+                      backgroundColor: 'unset',
+                      minHeight: 120,
+                      height: 120,
+                      width: 120
+                    }}
+                  >
+                    <S.FinishContentImage
+                      src={doorStyle.thumbnail}
+                      style={{
+                        height: '70%',
+                        width: '100%',
+                        objectFit: 'contain'
+                      }}
+                    />
+                  </S.FinishContentImageWrapper>
+                  <S.ContentItemLabel
+                    style={{
+                      color: SECONDARY_PURPLE_COLOR,
+                      marginBottom: 15,
+                      width: 120
+                    }}
+                  >
+                    {doorStyle.name}
+                  </S.ContentItemLabel>
+                </S.DoorStyleContentItem>
+              </S.ContentWrapper2>
+            </S.ContentWrapper1>
+          </S.ContentWrapper>
+        )
+      }
+    ];
+
+    return (
+      <div>
+        {step === 0 ? (
+          <S.WizardIntro>
+            <S.IntroPlane>
+              <S.IntroMark>
+                <img src="/assets/img/loading/loading_1.svg" width={80} />
+              </S.IntroMark>
+              <S.IntroTitle>Welcome to DIY Design Space</S.IntroTitle>
+              <S.IntroDescription>
+                Let's start designing your kitchen. Select the type of project
+                you want to start.
+              </S.IntroDescription>
+              <S.IntroSelect>
+                <S.IntroItem
+                  onClick={() => {
+                    this.setState({ step: 1 });
+                  }}
+                >
+                  <img
+                    src={`/assets/img/svg/intro/1-start-with-floorplan${
+                      hover === 1 ? '-whole' : ''
+                    }.svg`}
+                    onMouseOut={() => {
+                      this.setState({ hover: 0 });
+                    }}
+                    onMouseOver={() => {
+                      this.setState({ hover: 1 });
+                    }}
+                    width={140}
+                  />
+                  <S.IntroItemText>Start with Floorplan</S.IntroItemText>
+                </S.IntroItem>
+                <S.IntroItem
+                  onClick={() => {
+                    this.props.close();
+                    this.context.viewer2DActions.updateCeilHeight(96);
+                    this.context.viewer2DActions.updateCeilHeightUnit('in');
+                    this.context.viewer3DActions.update3DCeilHeight(96);
+                    this.context.viewer3DActions.update3DCeilHeightUnit('in');
+                  }}
+                >
+                  <img
+                    src={`/assets/img/svg/intro/2-start-from-scratch${
+                      hover === 2 ? '-whole' : ''
+                    }.svg`}
+                    onMouseOut={() => {
+                      this.setState({ hover: 0 });
+                    }}
+                    onMouseOver={() => {
+                      this.setState({ hover: 2 });
+                    }}
+                    width={140}
+                  />
+                  <S.IntroItemText>Start from Scratch</S.IntroItemText>
+                </S.IntroItem>
+                {/* <S.IntroItem
+                  style={{
+                    position: 'relative'
+                  }}
+                  onClick={() => {
+                    if (!this.props.match.params.token) {
+                      this.props.setSignOpen(true);
+                      this.props.setMyProjectsToLogin(true);
+                    } else {
+                      this.props.setMyProjectsOpen(true);
+                    }
+                  }}
+                >
+                  <img
+                    src={`/assets/img/svg/intro/3-retrieve-project${
+                      hover === 3 ? '-whole' : ''
+                    }.svg`}
+                    onMouseOut={() => {
+                      this.setState({ hover: 0 });
+                    }}
+                    onMouseOver={() => {
+                      this.setState({ hover: 3 });
+                    }}
+                    width={140}
+                  />
+                  <S.IntroItemText>Retrieve a saved project</S.IntroItemText>
+                  <div
+                    id="scratch_hint"
+                    style={{
+                      position: 'absolute',
+                      display: this.state.hover === 3 ? 'block' : 'none',
+                      fontFamily: DEFAULT_FONT_FAMILY,
+                      fontSize: 16,
+                      lineHeight: '20px',
+                      textAlign: 'left',
+                      backgroundColor: TEXT_COLOR_NEUTRAL_1,
+                      opacity: 0.8,
+                      color: BG_COLOR_1,
+                      borderRadius: 3,
+                      zIndex: 3,
+                      width: 'max-content',
+                      top: -30,
+                      left: -10,
+                      padding: '3px 8px'
+                    }}
+                  >
+                    We need to log you in to retrieve your saved projects.
+                  </div>
+                </S.IntroItem> */}
+              </S.IntroSelect>
+            </S.IntroPlane>
+          </S.WizardIntro>
+        ) : (
+          <S.WizardStepWrapper>
+            <S.TitleBarWrapper>
+              <S.TitleBar>
+                {step === 1
+                  ? 'Choose your room shape'
+                  : step === 3
+                    ? 'Summary'
+                    : 'Choose your door style'}
+              </S.TitleBar>
+              <S.TitleBarButtonWrapper>
+                <S.TitleBarButton
+                  style={{
+                    border: `3px solid ${BG_COLOR_1}`,
+                    cursor: step === 1 && 'no-drop',
+                    backgroundColor: step === 1 && BG_COLOR_1,
+                    color: step === 1 && TEXT_COLOR_NEUTRAL_4
+                  }}
+                  onClick={() =>
+                    step !== 1 && this.setState({ cancelDialogVisible: true })
+                  }
+                >
+                  Cancel
+                </S.TitleBarButton>
+                {step > 1 && (
+                  <S.TitleBarButton
+                    onClick={() => {
+                      this.setState({ step: step - 1 });
+                      // switch (step) {
+                      //   case 5:
+                      //     this.setState({ doorStyle: '' });
+                      //     break;
+                      //   case 4:
+                      //     this.setState({ doorCategory: { name: '', url: '' }});
+                      //     break;
+                      //   case 3:
+                      //     this.setState({ installation: '', doorCategory: { name: '', url: '' } });
+                      //     break;
+                      //   case 2:
+                      //     this.setState({ installation: '' });
+                      //     this.setState({ doorColor: { name: '', url: '', color: '' } });
+                      //   default:
+                      //     break;
+                      // }
+                    }}
+                  >
+                    <img
+                      style={{ paddingRight: 10 }}
+                      height="10px"
+                      src="/assets/img/svg/toolbar/undo_button.svg"
+                    />
+                    Back
+                  </S.TitleBarButton>
+                )}
+                <S.ConfirmButton
+                  style={{ minWidth: 89 }}
+                  onClick={() => (step < 3 ? this._ok() : this._confirm(1))}
+                >
+                  <img
+                    style={{
+                      marginRight: 10,
+                      height: 18,
+                      width: 18,
+                      WebkitMaskImage:
+                        'url(/assets/img/svg/headerbar/check.svg)',
+                      backgroundColor: BG_COLOR_1,
+                      WebkitMaskSize: '100%',
+                      WebkitMaskPosition: 'center'
+                    }}
+                  />
+                  {step > 2 ? 'Confirm' : 'OK'}
+                </S.ConfirmButton>
+              </S.TitleBarButtonWrapper>
+            </S.TitleBarWrapper>
+            <div
+              style={{
+                display: 'flex',
+                gap: '2rem'
+              }}
+            >
+              <div style={{ display: 'flex', flexDirection: 'column' }}>
+                <S.StepBarWrapper>
+                  {stepBar.map((element, key) => {
+                    switch (element.index) {
+                      case 1:
+                        return (
+                          <S.StepBullet key={key}>
+                            <S.StepBulletLabel
+                              style={{
+                                color:
+                                  step === element.index &&
+                                  SHADE_LIGHT_PURPLE_COLOR,
+                                fontWeight: step >= element.index && 700
+                              }}
+                            >
+                              {element.title}
+                            </S.StepBulletLabel>
+                            <S.StepBulletIcon
+                              src={
+                                step === element.index
+                                  ? '/assets/img/svg/wizardstep/bullet-current.svg'
+                                  : '/assets/img/svg/wizardstep/bullet-done.svg'
+                              }
+                              onClick={() =>
+                                this.setState({ step: element.index })
+                              }
+                            />
+                          </S.StepBullet>
+                        );
+                      default:
+                        return (
+                          <S.StepBullet key={key}>
+                            <S.StepBulletLabel
+                              style={{
+                                color:
+                                  step === element.index &&
+                                  SHADE_LIGHT_PURPLE_COLOR,
+                                fontWeight: step >= element.index && 700
+                              }}
+                            >
+                              {element.title}
+                            </S.StepBulletLabel>
+                            <div
+                              style={{
+                                display: 'flex',
+                                position: 'relative',
+                                width: '100%',
+                                right: 'calc((100% - 10px) / 2)'
+                              }}
+                            >
+                              <S.StepBarIcon
+                                src={
+                                  step >= element.index - 1
+                                    ? '/assets/img/svg/wizardstep/bar-active.svg'
+                                    : '/assets/img/svg/wizardstep/bar-normal.svg'
+                                }
+                              />
+                              <S.StepBulletIcon
+                                src={
+                                  step === element.index
+                                    ? '/assets/img/svg/wizardstep/bullet-current.svg'
+                                    : step > element.index
+                                      ? '/assets/img/svg/wizardstep/bullet-done.svg'
+                                      : '/assets/img/svg/wizardstep/bullet-not-done.svg'
+                                }
+                                onClick={() => this.onStepChange(element.index)}
+                              />
+                            </div>
+                          </S.StepBullet>
+                        );
+                    }
+                  })}
+                </S.StepBarWrapper>
+                <div>
+                  <S.Description>
+                    <span id="description">
+                      {stepBar[step - 1].description}
+                    </span>
+                  </S.Description>
+                </div>
+                {stepBar[step - 1].content}
+              </div>
+              {step === 2 && (
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: '100%'
+                  }}
+                >
+                  <S.DoorStyleWrapper>
+                    {this.props.categoryData.data.doorStyles.items
+                      .filter(item => item.name === installation.name)[0]
+                      .items.filter(
+                        item1 => item1.name === doorCategory.name
+                      )[0].items.length === 0 ? (
+                      <span
+                        style={{
+                          fontFamily: DEFAULT_FONT_FAMILY,
+                          fontSize: 22,
+                          lineHeight: '28px',
+                          fontWeight: 700,
+                          margin: 'auto',
+                          marginTop: 50,
+                          color: STATUS_NEGATIVE_COLOR,
+                          padding: '2rem'
+                        }}
+                      >
+                        There is no door style with current dealer
+                      </span>
+                    ) : colorFamily.id &&
+                      this.props.categoryData.data.doorStyles.items
+                        .filter(item => item.name === installation.name)[0]
+                        .items.filter(
+                          item1 => item1.name === doorCategory.name
+                        )[0]
+                        .items.filter(
+                          element =>
+                            element.color_family.search(
+                              `,${colorFamily.id},`
+                            ) === 0
+                        ).length === 0 ? (
+                      <span
+                        style={{
+                          fontFamily: DEFAULT_FONT_FAMILY,
+                          fontSize: 22,
+                          lineHeight: '28px',
+                          fontWeight: 700,
+                          margin: 'auto',
+                          marginTop: 50,
+                          color: STATUS_NEGATIVE_COLOR,
+                          padding: '2rem'
+                        }}
+                      >
+                        There is no door style with current door color family
+                      </span>
+                    ) : (
+                      this.props.categoryData.data.doorStyles.items
+                        .filter(item => item.name === installation.name)[0]
+                        .items.filter(
+                          item1 => item1.name === doorCategory.name
+                        )[0]
+                        .items.map((element, key) => {
+                          return !colorFamily.id ||
+                            element.color_family.search(
+                              `,${colorFamily.id},`
+                            ) === 0 ? (
+                            <S.DoorStyleContentItem
+                              style={{
+                                margin: 0,
+                                height: 340,
+                                width: 160,
+                                backgroundColor:
+                                  doorStyle.name === element.name && '#EDF1FB',
+                                borderRadius: 6
+                              }}
+                              onClick={() =>
+                                this.setState({ doorStyle: element })
+                              }
+                              key={key}
+                            >
+                              <S.FinishContentImageWrapper
+                                id={`door&${element.name}&item`}
+                                style={{
+                                  marginTop: 15,
+                                  border:
+                                    doorStyle.name === element.name &&
+                                    `2px solid ${SECONDARY_PURPLE_COLOR}`,
+                                  backgroundColor:
+                                    doorStyle.name === element.name &&
+                                    TEXT_COLOR_NEUTRAL_5
+                                }}
+                              >
+                                <S.FinishContentImage
+                                  src={element.thumbnail}
+                                  style={{ width: '100%', height: '100%' }}
+                                />
+                                <S.ContentCheckImage
+                                  id="check"
+                                  src="/assets/img/svg/wizardstep/check-normal.svg"
+                                  style={{
+                                    height: 160,
+                                    width: 120,
+                                    borderRadius: 10,
+                                    backgroundColor: 'unset',
+                                    zIndex: 2
+                                  }}
+                                />
+                                {doorStyle.name === element.name && (
+                                  <S.ContentCheckImage
+                                    src="/assets/img/svg/wizardstep/check-active.svg"
+                                    style={{
+                                      height: 160,
+                                      width: 120,
+                                      borderRadius: 10,
+                                      backgroundColor: 'unset'
+                                    }}
+                                  />
+                                )}
+                              </S.FinishContentImageWrapper>
+                              <S.ContentItemLabel
+                                id={`door&${element.name}&label`}
+                                style={{
+                                  fontWeight:
+                                    doorStyle.name === element.name && 700,
+                                  color:
+                                    doorStyle.name === element.name
+                                      ? SECONDARY_PURPLE_COLOR
+                                      : TEXT_COLOR_NEUTRAL_0,
+                                  maxWidth: '130px'
+                                }}
+                              >
+                                {element.name}
+                              </S.ContentItemLabel>
+                            </S.DoorStyleContentItem>
+                          ) : null;
+                        })
+                    )}
+                  </S.DoorStyleWrapper>
+                </div>
+              )}
+            </div>
+            <StyledDialog
+              open={cancelDialogVisible}
+              onClose={() => this.setState({ cancelDialogVisible: false })}
+            >
+              <S.DialogContent>
+                Do you want to apply your current selections or start from
+                scratch?
+              </S.DialogContent>
+              <S.DialogAction>
+                <S.Button
+                  onClick={() => {
+                    this.props.close();
+                    this.context.viewer2DActions.updateCeilHeight(96);
+                    this.context.viewer2DActions.updateCeilHeightUnit('in');
+                    this.context.viewer3DActions.update3DCeilHeight(96);
+                    this.context.viewer3DActions.update3DCeilHeightUnit('in');
+                  }}
+                >
+                  Discard
+                </S.Button>
+                <S.Button onClick={() => this._confirm(0)}>Apply</S.Button>
+              </S.DialogAction>
+            </StyledDialog>
+          </S.WizardStepWrapper>
+        )}
+      </div>
+    );
+  }
+}
+
+WizardStep.propTypes = {
+  state: PropTypes.object.isRequired,
+  content: PropTypes.number.isRequired
+};
+
+WizardStep.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
+};