@rnga/orders/src/components/Modal/joinRequest/index.js

## Get schema from @prisma-cms 1. yarn get-api-schema -e http://localhost:4000 2. yarn build-api-fragments

import React, { Component, Fragment } from 'react';
import { withStyles } from 'material-ui';

import Modal from "ui/Modal";

import CustomComponent from "Component";
import Input from 'ui/Input';
import Textarea from 'ui/Input/Textarea';


import {
  requestJoinUserProcessor,
} from "query";

const styles = {

}

class JoinRequestForm extends CustomComponent {


  constructor() {

    super()

    this.state = {
      ...this.state,
      // opened: false,
      joinFormOpened: false,
      successOpened: false,
      // joinFormVisible: true,
      captchaPassed: false,
      fullname: "",
      email: "",
      info: "",
    }
  }




  // openJoinForm(event) {

  //   this.setState({
  //     joinFormVisible: true,
  //   }, () => {
  //     // this.setState({
  //     //   //   joinFormVisible: true,
  //     //   joinFormOpened: true,
  //     // });
  //   })


  //   setTimeout(() => {
  //     this.setState({
  //       // joinFormVisible: true,
  //       joinFormOpened: true,
  //     });
  //   }, 50);

  // }

  // closeJoinForm(event) {

  //   this.setState({
  //     joinFormOpened: false,
  //   })

  //   setTimeout(() => {
  //     this.setState({
  //       joinFormVisible: false,
  //     });
  //   }, 500);

  // }


  // renderField(field) {

  //   return <Input>
  //     {field}
  //   </Input>

  // }

  onChange(event) {

    const {
      name,
      value,
    } = event.target;

    this.setState({
      [name]: value,
    });

  }


  async submit() {




    const {
      email,
      fullname,
      info,
    } = this.state;

    this.setState({
      sending: true,
    });

    await this.mutate({
      mutation: requestJoinUserProcessor,
      variables: {
        data: {
          email,
          fullname,
          info,
        },
      },
    })
      .then(r => {

        this.setState({
          email: "",
          fullname: "",
          info: "",
          joinFormOpened: false,
        });


        setTimeout(() => {
          this.setState({
            successOpened: true,
          });
        }, 200);

      })
      .catch(console.error);


    this.setState({
      sending: false,
    });

  }


  render() {


    const {
      classes,
    } = this.props;


    const {
      joinFormOpened,
      successOpened,
      fullname,
      email,
      // info,
      captchaPassed,
      sending,
    } = this.state;



    return super.render(
      <Fragment>

        <div className="open_modal-wrapper">
          <div className="open_modal-block">
            Вы можете получить доступ в личный кабинет, <span
              className="open_modal"
              onClick={event => this.setState({
                joinFormOpened: true,
              })}
            >отправив нам запрос</span>.
          </div>
        </div>

        <Modal
          opened={joinFormOpened}
          handleClose={event => this.setState({
            joinFormOpened: false,
          })}
          title="Доступ в личный кабинет"
          className="popup"
        >

          <form
            onSubmit={event => {
              event.preventDefault();
              this.submit();
            }}
          >

            {this.renderField(<Input
              type="text"
              required
              placeholder="Имя"
              name="fullname"
              key="sdfsdf"
            />)}


            {this.renderField(<Input
              type="email"
              placeholder="E-mail"
              required
              name="email"
            />)}

            {this.renderField(<Textarea
              name="info"
              placeholder="Комментарий"
              rows="10"
            ></Textarea>)}

            <label>
              <input
                type="checkbox"
                checked={captchaPassed}
                onChange={event => {
                  const {
                    checked,
                  } = event.target;

                  this.setState({
                    captchaPassed: checked,
                  });
                }}
              />
              Я не робот
              </label>
            <input
              type="submit"
              className="button"
              value="Отправить"
              disabled={!(captchaPassed && fullname && email) || sending}
              name="btnsend"
            />
          </form>

        </Modal>


        <Modal
          opened={successOpened}
          handleClose={event => this.setState({
            successOpened: false,
          })}
          title="ЗАПРОС ОТПРАВЛЕН"
        >

          <div className="close_modal">x</div>
          <div className="window">
            <div className="insText">
              <p>Ваш запрос отправлен.<br />Наш менеджер свяжется с вами в ближайшее время!</p>
            </div>
          </div>

        </Modal>


      </Fragment>
    );
  }
}

export default withStyles(styles)(JoinRequestForm);