evoleasing-account/pages/components/ContractStatus/index.js

import React from "react"
import { connect } from "react-redux"

const SingleContractModal = (props) => {
  const { open, close } = props

  return (
    <div className={open ? "fade opened" : "fade"}>
      <div className="contractStatus_modal">
        <div className="modal_header">
          <p className="modal_title">Статус сделки</p>
          <button className="modal_close" onClick={close}></button>
        </div>

        <div className="modal_body single_status">
          <div>
            <p>Сделка 1</p>
            <span></span>
            <i className="status_1"></i>

            <p>Выбор КП</p>
          </div>
          <div>
            <p>Сделка 1</p>
            <span></span>
            <i className="status_2"></i>

            <p>Программа финансирования</p>
          </div>
          <div>
            <p>Сделка 1</p>
            <span></span>
            <i className="status_3"></i>

            <p>Сборка пакета документов</p>
          </div>
          <div className="current">
            <p>Сделка 1</p>
            <span></span>
            <i className="status_4"></i>

            <p>Проверка документов</p>
          </div>
          <div>
            <p>Сделка 1</p>
            <span></span>
            <i className="status_5"></i>

            <p>Принятие решения по заявке</p>
          </div>
          <div>
            <p>Сделка 1</p>
            <span></span>
            <i className="status_6"></i>

            <p>Оформление лизинга</p>
          </div>
          <div>
            <p>Сделка 1</p>
            <span></span>
            <i className="status_7"></i>

            <p>Выбор типа подписания</p>
          </div>
        </div>
      </div>
    </div>
  )
}

const AllContractsModal = (props) => {
  const { open, close, activeContract, handleContractSelected } = props

  return (
    <div className={open ? "fade opened" : "fade"}>
      <div className="contractStatus_modal all_contracts_modal">
        <div className="modal_header">
          <p className="modal_title">Статусы сделок</p>
          <button className="modal_close" onClick={close}></button>
        </div>
        <div className="modal_body">
          <div className="contractStatus_list">
            {activeContract !== 1 ? (
              <div className="list_item">
                <div>
                  <p>Сделка 1</p>
                </div>
                <div className="step active">
                  <img src="/assets/images/status/3.svg" width="50" height="50" />
                  <p>Сбор пакета документов</p>
                </div>
                <div className="step">
                  <img src="/assets/images/status/3_inactive.svg" width="50" height="50" />
                  <p>Сбор пакета документов</p>
                </div>
                <div>
                  <p
                    onClick={() => {
                      handleContractSelected(1)
                    }}
                  >
                    и еще 4 этапа
                    <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
                      <path
                        stroke="#1C01A9"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M14.625 6.75 9 12.375 3.375 6.75"
                      />
                    </svg>
                  </p>
                </div>
              </div>
            ) : (
              <div className="single_status">
                <div>
                  <p>Сделка 1</p>
                  <span></span>
                  <i className="status_1"></i>

                  <p>Выбор КП</p>
                </div>
                <div>
                  <p>Сделка 1</p>
                  <span></span>
                  <i className="status_2"></i>

                  <p>Программа финансирования</p>
                </div>
                <div>
                  <p>Сделка 1</p>
                  <span></span>
                  <i className="status_3"></i>

                  <p>Сборка пакета документов</p>
                </div>
                <div className="current">
                  <p>Сделка 1</p>
                  <span></span>
                  <i className="status_4"></i>

                  <p>Проверка документов</p>
                </div>
                <div>
                  <p>Сделка 1</p>
                  <span></span>
                  <i className="status_5"></i>

                  <p>Принятие решения по заявке</p>
                </div>
                <div>
                  <p>Сделка 1</p>
                  <span></span>
                  <i className="status_6"></i>

                  <p>Оформление лизинга</p>
                </div>
                <div>
                  <p>Сделка 1</p>
                  <span></span>
                  <i className="status_7"></i>

                  <p>Выбор типа подписания</p>

                  <button
                    className="toggle_status"
                    onClick={() => {
                      handleContractSelected(null)
                    }}
                  >
                    Свернуть
                    <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
                      <path
                        stroke="#1C01A9"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M14.625 6.75 9 12.375 3.375 6.75"
                      />
                    </svg>
                  </button>
                </div>
              </div>
            )}

            <div className="list_item">
              <div>
                <p>Сделка 2</p>
              </div>
              <div className="step active">
                <img src="/assets/images/status/3.svg" width="50" height="50" />
                <p>Сбор пакета документов</p>
              </div>
              <div className="step">
                <img src="/assets/images/status/3_inactive.svg" width="50" height="50" />
                <p>Сбор пакета документов</p>
              </div>
              <div>
                <p
                  onClick={() => {
                    handleContractSelected(null)
                  }}
                >
                  и еще 2 этапа
                  <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
                    <path
                      stroke="#1C01A9"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M14.625 6.75 9 12.375 3.375 6.75"
                    />
                  </svg>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

class ContractStatus extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      currentContractModalOpened: false,
      allContractModalOpened: false,
      currentSelected: null
    }
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    return {}
  }

  componentDidMount() {}

  componentDidUpdate(prevProps, prevState) {}

  _handleModalToggle = (modal) => {
    if (modal === "current") {
      this.setState({
        currentContractModalOpened: !this.state.currentContractModalOpened
      })
    } else {
      this.setState({
        allContractModalOpened: !this.state.allContractModalOpened
      })
    }
  }

  _handleContractSelected = (index) => {
    this.setState({
      currentSelected: index
    })
  }

  render() {
    const { currentContractModalOpened, allContractModalOpened, currentSelected } = this.state

    return (
      <>
        <div className="contractStatus_list">
          <div className="list_item">
            <div>
              <p>Сделка 1</p>
            </div>
            <div>
              <p>
                2 этапа пройдено
                <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
                  <path
                    stroke="#8E94A7"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M14.625 6.75 9 12.375 3.375 6.75"
                  />
                </svg>
              </p>
            </div>
            <div>
              <img src="/assets/images/status/1.svg" width="50" height="50" />
              <p>Сбор пакета документов</p>
            </div>
            <div>
              <p>
                еще 4 этапа
                <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
                  <path
                    stroke="#8E94A7"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M14.625 6.75 9 12.375 3.375 6.75"
                  />
                </svg>
              </p>
            </div>
            <div>
              <button
                className="button"
                onClick={() => {
                  this._handleModalToggle("all")
                }}
              >
                Все сделки
                <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
                  <path
                    stroke="#1C01A9"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M14.625 6.75 9 12.375 3.375 6.75"
                  />
                </svg>
              </button>
            </div>
          </div>

          <div className="list_item">
            <div>
              <p>Сделка 1</p>
            </div>
            <div>
              <p
                onClick={() => {
                  this._handleModalToggle("current")
                }}
              >
                2 этапа пройдено
                <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
                  <path
                    stroke="#8E94A7"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M14.625 6.75 9 12.375 3.375 6.75"
                  />
                </svg>
              </p>
            </div>
            <div>
              <img src="/assets/images/status/3.svg" width="50" height="50" />
              <p>Сбор пакета документов</p>
            </div>
            <div>
              <p
                onClick={() => {
                  this._handleModalToggle("current")
                }}
              >
                еще 4 этапа
                <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
                  <path
                    stroke="#8E94A7"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M14.625 6.75 9 12.375 3.375 6.75"
                  />
                </svg>
              </p>
            </div>
            <div>
              <button
                className="button"
                onClick={() => {
                  this._handleModalToggle("all")
                }}
              >
                Все сделки
                <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
                  <path
                    stroke="#1C01A9"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M14.625 6.75 9 12.375 3.375 6.75"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>

        <SingleContractModal
          open={currentContractModalOpened}
          close={() => {
            this._handleModalToggle("current")
          }}
        />
        <AllContractsModal
          open={allContractModalOpened}
          close={() => {
            this._handleModalToggle("all")
          }}
          activeContract={currentSelected}
          handleContractSelected={this._handleContractSelected}
        />
      </>
    )
  }
}

function mapStateToProps(state, ownProps) {
  return {}
}

export default connect(mapStateToProps)(ContractStatus)