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

import { useMutation } from "@apollo/client";
import { Button, Form, Input, Popover, Select, Space, Switch } from "antd";
import axios from "axios";
import { some } from "lodash";
import React, { useCallback, 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";
import InstanceRenderManager from "../../utils/instanceRenderMgr";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
  jobRO: selectJobReadOnly
});
const mapDispatchToProps = (dispatch) => ({
  insertAuditTrail: ({ jobid, operation, type }) =>
    dispatch(
      insertAuditTrail({
        jobid,
        operation,
        type
      })
    )
});

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

  const handleConvert = async ({ employee_csr, category, ...values }) => {
    if (parentFormIsFieldsTouched()) {
      alert(t("jobs.labels.savebeforeconversion"));
      return;
    }
    setLoading(true);
    const res = await mutationConvertJob({
      variables: {
        jobId: job.id,
        job: {
          converted: true,
          ...(bodyshop.enforce_conversion_csr ? { employee_csr } : {}),
          ...(bodyshop.enforce_conversion_category ? { category } : {}),
          ...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),
        type: "jobconverted"
      });

      setOpen(false);
    }
    setLoading(false);
  };

  const submitDisabled = useCallback(() => some(allFormValues, (v) => v === undefined), [allFormValues]);

  const popMenu = (
    <div>
      <Form
        layout="vertical"
        form={form}
        onFinish={handleConvert}
        initialValues={{
          driveable: true,
          towin: job.towin,
          ca_gst_registrant: job.ca_gst_registrant,
          employee_csr: job.employee_csr,
          category: job.category,
          referral_source: job.referral_source,
          referral_source_extra: job.referral_source_extra ?? ""
        }}
      >
        <Form.Item
          name={["ins_co_nm"]}
          label={t("jobs.fields.ins_co_nm")}
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <Select showSearch>
            {bodyshop.md_ins_cos.map((s, i) => (
              <Select.Option key={i} 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(
              InstanceRenderManager({
                imex: "jobs.fields.employee_csr",
                rome: "jobs.fields.employee_csr_writer"
              })
            )}
            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>
        )}
        {bodyshop.enforce_conversion_category && (
          <Form.Item
            name={"category"}
            label={t("jobs.fields.category")}
            rules={[
              {
                required: bodyshop.enforce_conversion_category
                //message: t("general.validation.required"),
              }
            ]}
          >
            <Select allowClear>
              {bodyshop.md_categories.map((s) => (
                <Select.Option key={s} value={s}>
                  {s}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
        )}
        {bodyshop.region_config.toLowerCase().startsWith("ca") && (
          <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 disabled={submitDisabled()} type="primary" danger onClick={() => form.submit()} loading={loading}>
            {t("jobs.actions.convert")}
          </Button>
          <Button onClick={() => setOpen(false)}>{t("general.actions.close")}</Button>
        </Space>
      </Form>
    </div>
  );

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

  return (
    <Popover open={open} content={popMenu}>
      <Button
        key="convert"
        type="primary"
        danger
        // style={{ display: job.converted ? "none" : "" }}
        disabled={job.converted || jobRO}
        loading={loading}
        onClick={() => {
          setOpen(true);
        }}
      >
        {t("jobs.actions.convert")}
      </Button>
    </Popover>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(JobsConvertButton);