Edit.js

import React from 'react';
import PropTypes from 'prop-types';
import ModalPage from 'containers/modal-page';
import Form from '../Form';

const Edit = ({ handleSubmit, handleDelete, form, ...props }) => (
  <ModalPage title="Редактировать сотрудника" onOk={handleSubmit} onDelete={handleDelete} {...props}>
    <Form handleSubmit={handleSubmit} form={form} />
  </ModalPage>
);

Edit.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
  handleDelete: PropTypes.func.isRequired,
  form: PropTypes.object.isRequired,
};

export default Edit;

enhance.js

import { Form } from 'antd';
import { compose } from 'recompact';
import withInitialFormValues from 'hoc/withInitialFormValues';
import withSimpleUpdate from 'hoc/withSimpleUpdate';
import withSimpleDelete from 'hoc/withSimpleDelete';
import gql from 'graphql-tag';
import * as query from '../query';
import fragment from './fragment';

const UPDATE_CLIENT_CATEGORY = gql`
  mutation UpdateClientCategory($input: UpdateClientCategoryInput!) {
    updateClientCategory(input: $input) {
      clientCategory {
        ${fragment}
      }
    }
  }
`;

const DELETE_CLIENT_CATEGORY = gql`
  mutation DeleteClientCategory($input: DeleteClientCategoryInput!) {
    deleteClientCategory(input: $input) {
      deletedClientCategoryId
    }
  }
`;

// TODO: change redirect path
const toIndex = props => props.router.push(`/crm/chain/${props.params.chainId}/client-categories`);

export default compose(
  Form.create(),
  withInitialFormValues,
  withSimpleUpdate({
    mutation: UPDATE_CLIENT_CATEGORY,
    patchKey: 'clientCategoryPatch',
    getSuccessDescription: (props, data) =>
      `Данные cотрудника ${data.updateClientCategory.clientCategory.name} успешно изменены.`,
    onSuccess: toIndex,
  }),
  withSimpleDelete({
    mutation: DELETE_CLIENT_CATEGORY,
    refetchQueries: [query],
    getSuccessDescription: props => `Данные cотрудника ${props.data.node.name} успешно удалены.`,
    onSuccess: toIndex,
  })
);

Form.js

import React from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Row, Col, Checkbox, InputNumber } from 'antd';
import ColorSelect from 'components/ColorSelect';
import SubTitle from 'components/SubTitle';

const CategoryForm = ({ handleSubmit, form }) => (
  <Form onSubmit={handleSubmit}>
    <Row gutter={24}>
      <Col span={12}>
        <Form.Item label="Название">
          {form.getFieldDecorator('name', {
            rules: [{ required: true, message: 'Введите название' }],
          })(<Input placeholder="Введите название" />)}
        </Form.Item>
        <Form.Item label="Стилизация цвета">{form.getFieldDecorator('color')(<ColorSelect />)}</Form.Item>
      </Col>
      <Col span={12}>
        <Form.Item
          label="Важность"
          help="Если клиенту присвоено несколько категорий, то скидки будут применены из категории у которой это значение больше."
        >
          {form.getFieldDecorator('priority')(<InputNumber />)}
        </Form.Item>
        <Form.Item>
          {form.getFieldDecorator('isDefault', { valuePropName: 'checked' })(
            <Checkbox>Добавлять всех новых клиентов к эту категорию</Checkbox>
          )}
        </Form.Item>
      </Col>
    </Row>
    <SubTitle>Автоматическое добавление и удаление из категории</SubTitle>
    Сумма чеков
    <Row gutter={24}>
      <Col span={8}>
        <Form.Item>
          {form.getFieldDecorator('sumConditionFrom')(<Input placeholder="00" addonBefore="От" addonAfter="P" />)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item>
          {form.getFieldDecorator('sumConditionTo')(<Input placeholder="00" addonBefore="До" addonAfter="P" />)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item>
          {form.getFieldDecorator('sumConditionInterval')(<Input placeholder="00" addonAfter="Дней" />)}
        </Form.Item>
      </Col>
    </Row>
    Количество посещений
    <Row gutter={24}>
      <Col span={8}>
        <Form.Item>
          {form.getFieldDecorator('visitCountConditionFrom')(
            <Input placeholder="00" addonBefore="От" addonAfter="P" />
          )}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item>
          {form.getFieldDecorator('visitCountConditionTo')(<Input placeholder="00" addonBefore="До" addonAfter="P" />)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item>
          {form.getFieldDecorator('visitCountConditionInterval')(<Input placeholder="00" addonAfter="Дней" />)}
        </Form.Item>
      </Col>
    </Row>
    Записей со стасусом &quot;не пришел&quot;
    <Row gutter={24}>
      <Col span={8}>
        <Form.Item>
          {form.getFieldDecorator('missCountConditionFrom')(<Input placeholder="00" addonBefore="От" addonAfter="P" />)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item>
          {form.getFieldDecorator('missCountConditionTo')(<Input placeholder="00" addonBefore="До" addonAfter="P" />)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item>
          {form.getFieldDecorator('missCountConditionInterval')(<Input placeholder="00" addonAfter="Дней" />)}
        </Form.Item>
      </Col>
    </Row>
    <SubTitle>Скидка на услуги</SubTitle>
    <Row gutter={24}>
      <Col span={12}>
        <Form.Item label="Общая скидка" help="Сначала вычетаем общую скидку, затем считаем комиссию сотрудника">
          {form.getFieldDecorator('discount')(<Input placeholder="00" addonAfter="%" />)}
        </Form.Item>
      </Col>
      <Col span={12}>
        <Form.Item label="Скидка салона" help="Скидка вычетается из прибыли салона">
          {form.getFieldDecorator('salonDiscount')(<Input placeholder="00" addonAfter="%" />)}
        </Form.Item>
      </Col>
    </Row>
    <Row gutter={24}>
      <Col span={12}>
        <Form.Item label="Скидка с сотрудника" help="Скидка вычетается из комиссии сотрудника">
          {form.getFieldDecorator('employeeDiscount')(<Input placeholder="00" addonAfter="%" />)}
        </Form.Item>
      </Col>
    </Row>
    <SubTitle />
    <Row gutter={24}>
      <Col span={12}>
        <Form.Item label="Скидка на товары">
          {form.getFieldDecorator('goodsDiscount')(<Input placeholder="00" addonAfter="%" />)}
        </Form.Item>
      </Col>
      <Col span={12}>
        <Form.Item label="Бонусы с услуг">
          {form.getFieldDecorator('serviceBonus')(<Input placeholder="00" addonAfter="%" />)}
        </Form.Item>
      </Col>
    </Row>
    <Row gutter={24}>
      <Col span={12}>
        <Form.Item label="Бонусы с товаров">
          {form.getFieldDecorator('goodsBonus')(<Input placeholder="00" addonAfter="%" />)}
        </Form.Item>
      </Col>
    </Row>
    <button type="submit" hidden />
  </Form>
);

CategoryForm.propTypes = {
  form: PropTypes.object.isRequired,
  handleSubmit: PropTypes.func.isRequired,
};

export default CategoryForm;

fragment.js

export default `
  id
  name
  priority
  color
  isDefault

  sumConditionFrom
  sumConditionTo
  sumConditionInterval

  visitCountConditionFrom
  visitCountConditionTo
  visitCountConditionInterval

  missCountConditionFrom
  missCountConditionTo
  missCountConditionInterval

  discount
  employeeDiscount
`;

index.js

import Edit from './Edit';
import * as query from './query';
import enhance from './enhance';

export const chainClientCategoriesEditQuery = query;
export default enhance(Edit);

query.js

import gql from 'graphql-tag';
import fragment from './fragment';

export const query = gql`
  query chainClientCategoriesEditQuery($clientCategoryId: ID!) {
    node(id: $clientCategoryId) {
      ... on ClientCategory {
        ${fragment}
      }
    }
  }
`;