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

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

'use strict';

exports.__esModule = true;

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _materialUi = require('material-ui');

var _Modal = require('ui/Modal');

var _Modal2 = _interopRequireDefault(_Modal);

var _Component = require('Component');

var _Component2 = _interopRequireDefault(_Component);

var _Input = require('ui/Input');

var _Input2 = _interopRequireDefault(_Input);

var _Textarea = require('ui/Input/Textarea');

var _Textarea2 = _interopRequireDefault(_Textarea);

var _query = require('query');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var styles = {};

var JoinRequestForm = function (_CustomComponent) {
  _inherits(JoinRequestForm, _CustomComponent);

  function JoinRequestForm() {
    _classCallCheck(this, JoinRequestForm);

    var _this = _possibleConstructorReturn(this, _CustomComponent.call(this));

    _this.state = _extends({}, _this.state, {
      // opened: false,
      joinFormOpened: false,
      successOpened: false,
      // joinFormVisible: true,
      captchaPassed: false,
      fullname: "",
      email: "",
      info: ""
    });
    return _this;
  }

  // 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>

  // }

  JoinRequestForm.prototype.onChange = function onChange(event) {
    var _setState;

    var _event$target = event.target,
        name = _event$target.name,
        value = _event$target.value;


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

  JoinRequestForm.prototype.submit = function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
      var _this2 = this;

      var _state, email, fullname, info;

      return _regenerator2.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _state = this.state, email = _state.email, fullname = _state.fullname, info = _state.info;


              this.setState({
                sending: true
              });

              _context.next = 4;
              return this.mutate({
                mutation: _query.requestJoinUserProcessor,
                variables: {
                  data: {
                    email: email,
                    fullname: fullname,
                    info: info
                  }
                }
              }).then(function (r) {

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

                setTimeout(function () {
                  _this2.setState({
                    successOpened: true
                  });
                }, 200);
              }).catch(console.error);

            case 4:

              this.setState({
                sending: false
              });

            case 5:
            case 'end':
              return _context.stop();
          }
        }
      }, _callee, this);
    }));

    function submit() {
      return _ref.apply(this, arguments);
    }

    return submit;
  }();

  JoinRequestForm.prototype.render = function render() {
    var _this3 = this;

    var classes = this.props.classes;
    var _state2 = this.state,
        joinFormOpened = _state2.joinFormOpened,
        successOpened = _state2.successOpened,
        fullname = _state2.fullname,
        email = _state2.email,
        captchaPassed = _state2.captchaPassed,
        sending = _state2.sending;


    return _CustomComponent.prototype.render.call(this, _react2.default.createElement(
      _react.Fragment,
      null,
      _react2.default.createElement(
        'div',
        { className: 'open_modal-wrapper' },
        _react2.default.createElement(
          'div',
          { className: 'open_modal-block' },
          '\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0434\u043E\u0441\u0442\u0443\u043F \u0432 \u043B\u0438\u0447\u043D\u044B\u0439 \u043A\u0430\u0431\u0438\u043D\u0435\u0442, ',
          _react2.default.createElement(
            'span',
            {
              className: 'open_modal',
              onClick: function onClick(event) {
                return _this3.setState({
                  joinFormOpened: true
                });
              }
            },
            '\u043E\u0442\u043F\u0440\u0430\u0432\u0438\u0432 \u043D\u0430\u043C \u0437\u0430\u043F\u0440\u043E\u0441'
          ),
          '.'
        )
      ),
      _react2.default.createElement(
        _Modal2.default,
        {
          opened: joinFormOpened,
          handleClose: function handleClose(event) {
            return _this3.setState({
              joinFormOpened: false
            });
          },
          title: '\u0414\u043E\u0441\u0442\u0443\u043F \u0432 \u043B\u0438\u0447\u043D\u044B\u0439 \u043A\u0430\u0431\u0438\u043D\u0435\u0442',
          className: 'popup'
        },
        _react2.default.createElement(
          'form',
          {
            onSubmit: function onSubmit(event) {
              event.preventDefault();
              _this3.submit();
            }
          },
          this.renderField(_react2.default.createElement(_Input2.default, {
            type: 'text',
            required: true,
            placeholder: '\u0418\u043C\u044F',
            name: 'fullname',
            key: 'sdfsdf'
          })),
          this.renderField(_react2.default.createElement(_Input2.default, {
            type: 'email',
            placeholder: 'E-mail',
            required: true,
            name: 'email'
          })),
          this.renderField(_react2.default.createElement(_Textarea2.default, {
            name: 'info',
            placeholder: '\u041A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u0439',
            rows: '10'
          })),
          _react2.default.createElement(
            'label',
            null,
            _react2.default.createElement('input', {
              type: 'checkbox',
              checked: captchaPassed,
              onChange: function onChange(event) {
                var checked = event.target.checked;


                _this3.setState({
                  captchaPassed: checked
                });
              }
            }),
            '\u042F \u043D\u0435 \u0440\u043E\u0431\u043E\u0442'
          ),
          _react2.default.createElement('input', {
            type: 'submit',
            className: 'button',
            value: '\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C',
            disabled: !(captchaPassed && fullname && email) || sending,
            name: 'btnsend'
          })
        )
      ),
      _react2.default.createElement(
        _Modal2.default,
        {
          opened: successOpened,
          handleClose: function handleClose(event) {
            return _this3.setState({
              successOpened: false
            });
          },
          title: '\u0417\u0410\u041F\u0420\u041E\u0421 \u041E\u0422\u041F\u0420\u0410\u0412\u041B\u0415\u041D'
        },
        _react2.default.createElement(
          'div',
          { className: 'close_modal' },
          'x'
        ),
        _react2.default.createElement(
          'div',
          { className: 'window' },
          _react2.default.createElement(
            'div',
            { className: 'insText' },
            _react2.default.createElement(
              'p',
              null,
              '\u0412\u0430\u0448 \u0437\u0430\u043F\u0440\u043E\u0441 \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D.',
              _react2.default.createElement('br', null),
              '\u041D\u0430\u0448 \u043C\u0435\u043D\u0435\u0434\u0436\u0435\u0440 \u0441\u0432\u044F\u0436\u0435\u0442\u0441\u044F \u0441 \u0432\u0430\u043C\u0438 \u0432 \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043C\u044F!'
            )
          )
        )
      )
    ));
  };

  return JoinRequestForm;
}(_Component2.default);

exports.default = (0, _materialUi.withStyles)(styles)(JoinRequestForm);
module.exports = exports['default'];