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

import { useMutation } from "@apollo/client/react";
import { Button, Divider, Form, Input, Modal, Select, Space, Switch } from "antd";
import axios from "axios";
import { some } from "lodash";
import { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
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 { DMS_MAP, getDmsMode } from "../../utils/dmsUtils";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
import { useSocket } from "../../contexts/SocketIO/useSocket.js";
import RREarlyROForm from "../dms-post-form/rr-early-ro-form";

const mapStateToProps = createStructuredSelector({
  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 [earlyRoCreated, setEarlyRoCreated] = useState(!!job?.dms_id);
  const [earlyRoCreatedThisSession, setEarlyRoCreatedThisSession] = 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 { socket } = useSocket();

  const {
    treatments: { Fortellis }
  } = useTreatmentsWithConfig({
    attributes: {},
    names: ["Fortellis"],
    splitKey: bodyshop?.imexshopid
  });

  const dmsMode = getDmsMode(bodyshop, Fortellis.treatment);
  const isReynoldsMode = dmsMode === DMS_MAP.reynolds;

  const insuranceOptions = useMemo(
    () =>
      (bodyshop?.md_ins_cos ?? []).map((s) => ({
        value: s.name,
        label: s.name
      })),
    [bodyshop?.md_ins_cos]
  );

  const classOptions = useMemo(
    () =>
      (bodyshop?.md_classes ?? []).map((s) => ({
        value: s,
        label: s
      })),
    [bodyshop?.md_classes]
  );

  const referralOptions = useMemo(
    () =>
      (bodyshop?.md_referral_sources ?? []).map((s) => ({
        value: s,
        label: s
      })),
    [bodyshop?.md_referral_sources]
  );

  const csrOptions = useMemo(
    () =>
      (bodyshop?.employees ?? [])
        .filter((emp) => emp.active)
        .map((emp) => ({
          value: emp.id,
          label: `${emp.first_name} ${emp.last_name}`
        })),
    [bodyshop?.employees]
  );

  const categoryOptions = useMemo(
    () =>
      (bodyshop?.md_categories ?? []).map((s) => ({
        value: s,
        label: s
      })),
    [bodyshop?.md_categories]
  );

  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({
        title: 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 handleEarlyROSuccess = (result) => {
    setEarlyRoCreated(true);
    setEarlyRoCreatedThisSession(true);
    notification.success({
      title: t("jobs.successes.early_ro_created"),
      description: `RO Number: ${result.roNumber || "N/A"}`
    });

    setTimeout(() => {
      refetch?.();
    }, 2000);
  };

  const handleModalClose = () => {
    setOpen(false);
  };

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

  return (
    <>
      <Button
        key="convert"
        type="primary"
        danger
        disabled={job.converted || jobRO}
        loading={loading}
        onClick={() => {
          setEarlyRoCreated(!!job?.dms_id);
          setEarlyRoCreatedThisSession(false);
          setOpen(true);
        }}
      >
        {t("jobs.actions.convert")}
      </Button>

      <Modal
        open={open}
        onCancel={handleModalClose}
        closable={!(earlyRoCreatedThisSession && !job.converted)}
        mask={{ closable: !(earlyRoCreatedThisSession && !job.converted) }}
        title={t("jobs.actions.convert")}
        footer={null}
        width={700}
        destroyOnHidden
      >
        <Form
          layout="vertical"
          form={form}
          preserve={false}
          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 ?? ""
          }}
        >
          {isReynoldsMode && !job.dms_id && !earlyRoCreated && (
            <>
              <RREarlyROForm
                bodyshop={bodyshop}
                socket={socket}
                job={job}
                onSuccess={handleEarlyROSuccess}
                showCancelButton={false}
              />
              <Divider />
            </>
          )}

          <Form.Item
            name={["ins_co_nm"]}
            label={t("jobs.fields.ins_co_nm")}
            rules={[{ required: true }]}
          >
            <Select
              showSearch={{
                optionFilterProp:'label'
              }}
              options={insuranceOptions}
            />
          </Form.Item>

          {bodyshop.enforce_class && (
            <Form.Item name="class" label={t("jobs.fields.class")} rules={[{ required: bodyshop.enforce_class }]}>
              <Select options={classOptions} />
            </Form.Item>
          )}

          {bodyshop.enforce_referral && (
            <>
              <Form.Item
                name="referral_source"
                label={t("jobs.fields.referralsource")}
                rules={[{ required: bodyshop.enforce_referral }]}
              >
                <Select options={referralOptions} />
              </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 }]}
            >
              <Select
                showSearch={{
                  optionFilterProp: 'label',
                  filterOption: (input, option) =>
                    (option?.label ?? "").toLowerCase().includes(input.toLowerCase())
                }}
                style={{ width: 200 }}

                options={csrOptions}
              />
            </Form.Item>
          )}

          {bodyshop.enforce_conversion_category && (
            <Form.Item name="category" label={t("jobs.fields.category")} rules={[{ required: bodyshop.enforce_conversion_category }]}>
              <Select allowClear options={categoryOptions} />
            </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 style={{ marginTop: 16 }}>
            <Button
              disabled={submitDisabled() || (isReynoldsMode && !job.dms_id && !earlyRoCreated)}
              type="primary"
              danger
              onClick={() => form.submit()}
              loading={loading}
            >
              {t("jobs.actions.convert")}
            </Button>

            <Button onClick={handleModalClose} disabled={earlyRoCreatedThisSession && !job.converted}>
              {t("general.actions.close")}
            </Button>
          </Space>
        </Form>
      </Modal>
    </>
  );
}

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