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 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,
}) {
  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) => {
    setLoading(true);
    const res = await mutationConvertJob({
      variables: { jobId: job.id, ...values },
    });

    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 }}
      >
        <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>
          </>
        )}
        <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 visible={visible} content={popMenu}>
      <Button
        key="convert"
        type="danger"
        // style={{ display: job.converted ? "none" : "" }}
        disabled={job.converted || jobRO}
        loading={loading}
        onClick={() => setVisible(true)}
      >
        {t("jobs.actions.convert")}
      </Button>
    </Popover>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(JobsConvertButton);