feature/IO-3558-Reynolds-Part-2 - Initial

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

@@ -1,18 +1,22 @@
 import { useMutation } from "@apollo/client/react";
-import { Button, Form, Input, Popover, Select, Space, Switch } from "antd";
+import { Button, Divider, Form, Input, Modal, Select, Space, Switch } from "antd";
 import axios from "axios";
 import { some } from "lodash";
 import { useCallback, 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({
   //currentUser: selectCurrentUser
@@ -33,11 +37,29 @@ const mapDispatchToProps = (dispatch) => ({
 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); // Track early RO creation state
   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(); // Extract socket from context
+
+  // Get Fortellis treatment for proper DMS mode detection
+  const {
+    treatments: { Fortellis }
+  } = useTreatmentsWithConfig({
+    attributes: {},
+    names: ["Fortellis"],
+    splitKey: bodyshop?.imexshopid
+  });
+
+  // Check if bodyshop has Reynolds integration using the proper getDmsMode function
+  const dmsMode = getDmsMode(bodyshop, Fortellis.treatment);
+  const isReynoldsMode = dmsMode === DMS_MAP.reynolds;
+
+  console.log(`2309-829038721093820938290382903`);
+  console.log(isReynoldsMode);
 
   const handleConvert = async ({ employee_csr, category, ...values }) => {
     if (parentFormIsFieldsTouched()) {
@@ -82,177 +104,216 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
 
   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 ?? ""
+  const handleEarlyROSuccess = (result) => {
+    console.log("Early RO Success - result:", result);
+    setEarlyRoCreated(true); // Mark early RO as created
+    notification.success({
+      title: t("jobs.successes.early_ro_created", "Early RO Created"),
+      message: `RO Number: ${result.roNumber || "N/A"}`
+    });
+    // Don't close the modal - just refetch so the form updates
+    refetch?.();
+  };
+
+  if (job.converted) return <></>;
+
+  return (
+    <>
+      <Button
+        key="convert"
+        type="primary"
+        danger
+        disabled={job.converted || jobRO}
+        loading={loading}
+        onClick={() => {
+          setEarlyRoCreated(!!job?.dms_id); // Initialize state based on current job
+          setOpen(true);
         }}
       >
-        <Form.Item
-          name={["ins_co_nm"]}
-          label={t("jobs.fields.ins_co_nm")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
+        {t("jobs.actions.convert")}
+      </Button>
+
+      {/* Convert Job Modal */}
+      <Modal
+        open={open}
+        onCancel={() => setOpen(false)}
+        title={t("jobs.actions.convert")}
+        footer={null}
+        width={700}
+        destroyOnHidden
+      >
+        {/* Standard Convert Form */}
+        <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 ?? ""
+          }}
         >
-          <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")}
+            name={["ins_co_nm"]}
+            label={t("jobs.fields.ins_co_nm")}
             rules={[
               {
-                required: bodyshop.enforce_class
+                required: true
                 //message: t("general.validation.required"),
               }
             ]}
           >
-            <Select>
-              {bodyshop.md_classes.map((s) => (
-                <Select.Option key={s} value={s}>
-                  {s}
+            <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_referral && (
-          <>
+          {bodyshop.enforce_class && (
             <Form.Item
-              name={"referral_source"}
-              label={t("jobs.fields.referralsource")}
+              name={"class"}
+              label={t("jobs.fields.class")}
               rules={[
                 {
-                  required: bodyshop.enforce_referral
+                  required: bodyshop.enforce_class
                   //message: t("general.validation.required"),
                 }
               ]}
             >
               <Select>
-                {bodyshop.md_referral_sources.map((s) => (
+                {bodyshop.md_classes.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={{
-                optionFilterProp: "children",
-                filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-              }}
-              style={{ width: 200 }}
+          )}
+          {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"),
+                }
+              ]}
             >
-              {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
+                showSearch={{
+                  optionFilterProp: "children",
+                  filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }}
+                style={{ width: 200 }}
+              >
+                {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.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">
+              </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>
-        )}
-        <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 <></>;
+          {/* Show Reynolds Early RO section if applicable */}
+          {isReynoldsMode && !job.dms_id && !earlyRoCreated && (
+            <>
+              <Divider />
+              <RREarlyROForm
+                bodyshop={bodyshop}
+                socket={socket}
+                job={job}
+                onSuccess={handleEarlyROSuccess}
+                showCancelButton={false}
+              />
+            </>
+          )}
 
-  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>
+          <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={() => setOpen(false)}>{t("general.actions.close")}</Button>
+          </Space>
+        </Form>
+      </Modal>
+    </>
   );
 }