bodyshop/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx

import { useMutation } from "@apollo/client";
import {
  Button,
  Form,
  Input,
  notification,
  Popover,
  Select,
  Space,
  Switch,
} from "antd";
import axios from "axios";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { CONVERT_JOB_TO_RO } from "../../graphql/jobs.queries";
import { insertAuditTrail } from "../../redux/application/application.actions";
import { selectJobReadOnly } from "../../redux/application/application.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import AuditTrailMapping from "../../utils/AuditTrailMappings";
const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
  jobRO: selectJobReadOnly,
});
const mapDispatchToProps = (dispatch) => ({
  insertAuditTrail: ({ jobid, operation }) =>
    dispatch(insertAuditTrail({ jobid, operation })),
});

export function JobsConvertButton({
  bodyshop,
  job,
  refetch,
  jobRO,
  insertAuditTrail,
  parentFormIsFieldsTouched,
}) {
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [mutationConvertJob] = useMutation(CONVERT_JOB_TO_RO);
  const { t } = useTranslation();
  const [form] = Form.useForm();

  const handleConvert = async (values) => {
    if (parentFormIsFieldsTouched()) {
      alert(t("jobs.labels.savebeforeconversion"));
      return;
    }
    setLoading(true);
    const res = await mutationConvertJob({
      variables: { jobId: job.id, ...values },
    });

    if (values.ca_gst_registrant) {
      await axios.post("/job/totalsssu", {
        id: job.id,
      });
    }

    if (!res.errors) {
      refetch();
      notification["success"]({
        message: t("jobs.successes.converted"),
      });

      insertAuditTrail({
        jobid: job.id,
        operation: AuditTrailMapping.jobconverted(
          res.data.update_jobs.returning[0].ro_number
        ),
      });

      setVisible(false);
    }
    setLoading(false);
  };

  const popMenu = (
    <div>
      <Form
        layout="vertical"
        form={form}
        onFinish={handleConvert}
        initialValues={{
          driveable: true,
          towin: false,
          employee_csr: job.employee_csr,
        }}
      >
        <Form.Item
          name={["ins_co_nm"]}
          label={t("jobs.fields.ins_co_nm")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <Select>
            {bodyshop.md_ins_cos.map((s) => (
              <Select.Option key={s.name} value={s.name}>
                {s.name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        {bodyshop.enforce_class && (
          <Form.Item
            name={"class"}
            label={t("jobs.fields.class")}
            rules={[
              {
                required: bodyshop.enforce_class,
                //message: t("general.validation.required"),
              },
            ]}
          >
            <Select>
              {bodyshop.md_classes.map((s) => (
                <Select.Option key={s} value={s}>
                  {s}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
        )}
        {bodyshop.enforce_referral && (
          <>
            <Form.Item
              name={"referral_source"}
              label={t("jobs.fields.referralsource")}
              rules={[
                {
                  required: bodyshop.enforce_referral,
                  //message: t("general.validation.required"),
                },
              ]}
            >
              <Select>
                {bodyshop.md_referral_sources.map((s) => (
                  <Select.Option key={s} value={s}>
                    {s}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item
              label={t("jobs.fields.referral_source_extra")}
              name="referral_source_extra"
            >
              <Input />
            </Form.Item>
          </>
        )}
        {bodyshop.enforce_conversion_csr && (
          <Form.Item
            name={"employee_csr"}
            label={t("jobs.fields.employee_csr")}
            rules={[
              {
                required: bodyshop.enforce_conversion_csr,
                //message: t("general.validation.required"),
              },
            ]}
          >
            <Select
              showSearch
              style={{ width: 200 }}
              optionFilterProp="children"
              filterOption={(input, option) =>
                option.props.children
                  .toLowerCase()
                  .indexOf(input.toLowerCase()) >= 0
              }
            >
              {bodyshop.employees
                .filter((emp) => emp.active)
                .map((emp) => (
                  <Select.Option
                    value={emp.id}
                    key={emp.id}
                    name={`${emp.first_name} ${emp.last_name}`}
                  >
                    {`${emp.first_name} ${emp.last_name}`}
                  </Select.Option>
                ))}
            </Select>
          </Form.Item>
        )}
        <Form.Item
          label={t("jobs.fields.ca_gst_registrant")}
          name="ca_gst_registrant"
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Form.Item
          label={t("jobs.fields.driveable")}
          name="driveable"
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Form.Item
          label={t("jobs.fields.towin")}
          name="towin"
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Space wrap>
          <Button type="danger" onClick={() => form.submit()} loading={loading}>
            {t("jobs.actions.convert")}
          </Button>
          <Button onClick={() => setVisible(false)}>
            {t("general.actions.close")}
          </Button>
        </Space>
      </Form>
    </div>
  );

  if (job.converted) return <></>;

  return (
    <Popover open={visible} content={popMenu}>
      <Button
        key="convert"
        type="danger"
        // style={{ display: job.converted ? "none" : "" }}
        disabled={job.converted || jobRO}
        loading={loading}
        onClick={() => {
          setVisible(true);
          form.setFieldsValue({
            driveable: true,
            towin: false,
            employee_csr: job.employee_csr,
          });
        }}
      >
        {t("jobs.actions.convert")}
      </Button>
    </Popover>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(JobsConvertButton);