feature/IO-3499-React-19 Checkpoint

2026-01-21 17:55:57 -05:00
parent f5a618319a
commit 49bfb0849d
3 changed files with 226 additions and 154 deletions
--- a/client/src/components/job-watcher-toggle/job-watcher-toggle.container.jsx
+++ b/client/src/components/job-watcher-toggle/job-watcher-toggle.container.jsx
@@ -8,6 +8,8 @@ import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import JobWatcherToggleComponent from "./job-watcher-toggle.component.jsx";
 import { useIsEmployee } from "../../utils/useIsEmployee.js";

+const EMPTY_ARRAY = Object.freeze([]);
+
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser
@@ -27,21 +29,24 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
  const [selectedWatcher, setSelectedWatcher] = useState(null);
  const [selectedTeam, setSelectedTeam] = useState(null);

-  const userEmail = currentUser.email;
-  const jobid = job.id;
+  const userEmail = currentUser?.email;
+  const jobid = job?.id;
+  const watcherVars = useMemo(() => ({ jobid }), [jobid]);

-  // Fetch current watchers with refetch capability
  const {
    data: watcherData,
    loading: watcherLoading,
    refetch
  } = useQuery(GET_JOB_WATCHERS, {
-    variables: { jobid },
-    fetchPolicy: "cache-and-network" // Ensure fresh data from server
+    variables: watcherVars,
+    skip: !jobid,
+    fetchPolicy: "cache-first",
+    notifiyOnNetworkStatusChange: true
  });

-  // Refetch jobWatchers when the popover opens (open changes to true)
+  // Refetch jobWatchers when the popover opens
  useEffect(() => {
+    if (!jobid) return;
    if (open) {
      refetch().catch((err) =>
        console.error(`Something went wrong fetching Notification Watchers on popover open: ${err?.message}`, {
@@ -49,18 +54,17 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
        })
      );
    }
-  }, [open, refetch]);
+  }, [open, refetch, jobid]);

-  const jobWatchers = useMemo(() => (watcherData?.job_watchers ? [...watcherData.job_watchers] : []), [watcherData]);
-  const isWatching = jobWatchers.some((w) => w.user_email === userEmail);
+  // Do NOT clone arrays; keep referential stability for React Compiler and to reduce rerenders.
+  const jobWatchers = watcherData?.job_watchers ?? EMPTY_ARRAY;
+  const watcherEmailSet = useMemo(
+    () => new Set((jobWatchers ?? EMPTY_ARRAY).map((w) => w?.user_email).filter(Boolean)),
+    [jobWatchers]
+  );
+  const isWatching = !!userEmail && watcherEmailSet.has(userEmail);

  const [addWatcher, { loading: adding }] = useMutation(ADD_JOB_WATCHER, {
-    onCompleted: () =>
-      refetch().catch((err) =>
-        console.error(`Something went wrong fetching Notification Watchers after add: ${err?.message}`, {
-          stack: err?.stack
-        })
-      ),
    onError: (err) => {
      if (err.graphQLErrors && err.graphQLErrors.length > 0) {
        const errorMessage = err.graphQLErrors[0].message;
@@ -69,12 +73,13 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
          errorMessage.includes("idx_job_watchers_jobid_user_email_unique")
        ) {
          console.warn("Watcher already exists for this job and user.");
-          refetch().catch((err) =>
+          // Only refetch for this edge case to ensure UI is accurate
+          refetch().catch((e) =>
            console.error(
-              `Something went wrong fetching Notification Watchers after uniqueness violation: ${err?.message}`,
-              { stack: err?.stack }
+              `Something went wrong fetching Notification Watchers after uniqueness violation: ${e?.message}`,
+              { stack: e?.stack }
            )
-          ); // Sync with server to ensure UI reflects actual state
+          );
        } else {
          console.error(`Error adding job watcher: ${errorMessage}`);
        }
@@ -83,65 +88,41 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
      }
    },
    update(cache, { data }) {
-      if (!data || !data.insert_job_watchers_one) {
-        console.warn("No data or insert_job_watchers_one returned from mutation, skipping cache update.");
-        refetch().catch((err) =>
-          console.error(`Something went wrong updating Notification Watchers after add: ${err?.message}`, {
-            stack: err?.stack
-          })
-        );
-        return;
-      }
+      const inserted = data?.insert_job_watchers_one;
+      if (!inserted) return;

-      const insert_job_watchers_one = data.insert_job_watchers_one;
-      const existingData = cache.readQuery({
-        query: GET_JOB_WATCHERS,
-        variables: { jobid }
-      });
+      cache.updateQuery({ query: GET_JOB_WATCHERS, variables: watcherVars }, (existing) => {
+        const prev = existing?.job_watchers ?? [];
+        if (prev.some((w) => w.user_email === inserted.user_email)) return existing;

-      cache.writeQuery({
-        query: GET_JOB_WATCHERS,
-        variables: { jobid },
-        data: {
-          ...existingData,
-          job_watchers: [...(existingData?.job_watchers || []), insert_job_watchers_one]
-        }
+        return {
+          ...existing,
+          job_watchers: [...prev, inserted]
+        };
      });
    }
  });

  const [removeWatcher, { loading: removing }] = useMutation(REMOVE_JOB_WATCHER, {
-    onCompleted: () =>
-      refetch().catch((err) =>
-        console.error(`Something went wrong fetching Notification Watchers after remove: ${err?.message}`, {
-          stack: err?.stack
-        })
-      ), // Refetch to sync with server after success
    onError: (err) => console.error(`Error removing job watcher: ${err.message}`),
-    update(cache, { data: { delete_job_watchers } }) {
-      const existingData = cache.readQuery({
-        query: GET_JOB_WATCHERS,
-        variables: { jobid }
-      });
+    update(cache, { data }) {
+      const deleted = data?.delete_job_watchers?.returning?.[0];
+      if (!deleted?.user_email) return;

-      const deletedWatcher = delete_job_watchers.returning[0];
-      const updatedWatchers = deletedWatcher
-        ? (existingData?.job_watchers || []).filter((watcher) => watcher.user_email !== deletedWatcher.user_email)
-        : existingData?.job_watchers || [];
-
-      cache.writeQuery({
-        query: GET_JOB_WATCHERS,
-        variables: { jobid },
-        data: {
-          ...existingData,
-          job_watchers: updatedWatchers
-        }
+      cache.updateQuery({ query: GET_JOB_WATCHERS, variables: watcherVars }, (existing) => {
+        const prev = existing?.job_watchers ?? [];
+        return {
+          ...existing,
+          job_watchers: prev.filter((w) => w.user_email !== deleted.user_email)
+        };
      });
    }
  });

  const handleToggleSelf = useCallback(async () => {
+    if (!jobid || !userEmail) return;
    if (adding || removing || !isEmployee) return;
+
    if (isWatching) {
      await removeWatcher({ variables: { jobid, userEmail } });
    } else {
@@ -151,7 +132,9 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {

  const handleRemoveWatcher = useCallback(
    async (email) => {
+      if (!jobid) return;
      if (removing) return;
+      if (!email) return;
      await removeWatcher({ variables: { jobid, userEmail: email } });
    },
    [removeWatcher, jobid, removing]
@@ -159,36 +142,45 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {

  const handleWatcherSelect = useCallback(
    async (selectedUser) => {
+      if (!jobid) return;
      if (adding || removing) return;
-      const employee = bodyshop.employees.find((e) => e.id === selectedUser);
-      if (!employee) return;
+
+      const employee = bodyshop?.employees?.find((e) => e.id === selectedUser);
+      if (!employee?.user_email) return;

      const email = employee.user_email;
-      const isAlreadyWatching = jobWatchers.some((w) => w.user_email === email);
+      const isAlreadyWatching = watcherEmailSet.has(email);

      if (isAlreadyWatching) {
        await handleRemoveWatcher(email);
      } else {
        await addWatcher({ variables: { jobid, userEmail: email } });
      }
+
      setSelectedWatcher(null);
    },
-    [jobWatchers, addWatcher, handleRemoveWatcher, jobid, bodyshop, adding, removing]
+    [watcherEmailSet, addWatcher, handleRemoveWatcher, jobid, bodyshop, adding, removing]
  );

  const handleTeamSelect = useCallback(
    async (team) => {
+      if (!jobid) return;
      if (adding) return;
-      const selectedTeamMembers = JSON.parse(team);
-      const newWatchers = selectedTeamMembers.filter(
-        (email) => !jobWatchers.some((watcher) => watcher.user_email === email)
-      );

+      let selectedTeamMembers = [];
+      try {
+        selectedTeamMembers = Array.isArray(team) ? team : JSON.parse(team);
+      } catch {
+        selectedTeamMembers = [];
+      }
+
+      const newWatchers = (selectedTeamMembers ?? []).filter(Boolean).filter((email) => !watcherEmailSet.has(email));
      if (newWatchers.length === 0) {
        console.warn("All selected team members are already watchers.");
        setSelectedTeam(null);
        return;
      }
+
      await Promise.all(
        newWatchers.map((email) =>
          addWatcher({
@@ -199,8 +191,10 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
          })
        )
      );
+
+      setSelectedTeam(null);
    },
-    [jobWatchers, addWatcher, jobid, adding]
+    [watcherEmailSet, addWatcher, jobid, adding]
  );

  return (
@@ -223,7 +217,7 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
      handleWatcherSelect={handleWatcherSelect}
      handleTeamSelect={handleTeamSelect}
      currentUser={currentUser}
-      isEmployee={isEmployee} // Pass isEmployee to the component
+      isEmployee={isEmployee}
    />
  );
 }
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
@@ -1,10 +1,10 @@
 import { DownCircleFilled } from "@ant-design/icons";
-import { useApolloClient, useMutation } from "@apollo/client/react";
+import { useApolloClient, useMutation, useQuery } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Button, Card, Dropdown, Form, Input, Modal, Popconfirm, Popover, Select, Space } from "antd";
 import axios from "axios";
 import parsePhoneNumber from "libphonenumber-js";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
@@ -14,7 +14,7 @@ import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { auth, logImEXEvent } from "../../firebase/firebase.utils";
 import { CANCEL_APPOINTMENTS_BY_JOB_ID, INSERT_MANUAL_APPT } from "../../graphql/appointments.queries";
 import { GET_CURRENT_QUESTIONSET_ID, INSERT_CSI } from "../../graphql/csi.queries";
-import { DELETE_JOB, UPDATE_JOB, VOID_JOB } from "../../graphql/jobs.queries";
+import { DELETE_JOB, GET_JOB_WATCHERS, UPDATE_JOB, VOID_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setEmailOptions } from "../../redux/email/email.actions";
@@ -34,6 +34,8 @@ import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
 import JobsDetailHeaderActionsToggleProduction from "./jobs-detail-header-actions.toggle-production";

+const EMPTY_ARRAY = Object.freeze([]);
+
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  jobRO: selectJobReadOnly,
@@ -123,6 +125,14 @@ export function JobsDetailHeaderActions({
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [visibility, setVisibility] = useState(false);
+  const jobId = job?.id;
+  const watcherVars = useMemo(() => ({ jobid: jobId }), [jobId]);
+
+  // Option A: coordinated Dropdown + Popconfirm open state so the menu doesn't unmount before Popconfirm renders.
+  const [confirmKey, setConfirmKey] = useState(null);
+  const confirmKeyRef = useRef(null);
+
  const [isCancelScheduleModalVisible, setIsCancelScheduleModalVisible] = useState(false);
  const [insertAppointment] = useMutation(INSERT_MANUAL_APPT);
  const [deleteJob] = useMutation(DELETE_JOB);
@@ -143,6 +153,15 @@ export function JobsDetailHeaderActions({
  const hasValidEmail = (emails) => emails.some((email) => userEmail.endsWith(email));
  const canSubmitForTesting = (isDevEnv && hasValidEmail(devEmails)) || (isProdEnv && hasValidEmail(prodEmails));

+  const { data: jobWatchersData } = useQuery(GET_JOB_WATCHERS, {
+    variables: watcherVars,
+    skip: !jobId,
+    fetchPolicy: "cache-first",
+    notifyOnNetworkStatusChange: true
+  });
+
+  const jobWatchersCount = jobWatchersData?.job_watchers?.length ?? job?.job_watchers?.length ?? 0;
+
  const {
    treatments: { ImEXPay }
  } = useTreatmentsWithConfig({
@@ -151,18 +170,85 @@ export function JobsDetailHeaderActions({
    splitKey: bodyshop && bodyshop.imexshopid
  });

-  const jobInProduction = useMemo(() => {
-    return bodyshop.md_ro_statuses.production_statuses.includes(job.status);
-  }, [job, bodyshop.md_ro_statuses.production_statuses]);
-  const [visibility, setVisibility] = useState(false);
+  const productionStatuses = bodyshop?.md_ro_statuses?.production_statuses ?? EMPTY_ARRAY;
+  const preProductionStatuses = bodyshop?.md_ro_statuses?.pre_production_statuses ?? EMPTY_ARRAY;
+  const postProductionStatuses = bodyshop?.md_ro_statuses?.post_production_statuses ?? EMPTY_ARRAY;
+  const jobStatus = job?.status;

-  const jobInPreProduction = useMemo(() => {
-    return bodyshop.md_ro_statuses.pre_production_statuses.includes(job.status);
-  }, [job.status, bodyshop.md_ro_statuses.pre_production_statuses]);
+  const jobInProduction = productionStatuses.includes(jobStatus);
+  const jobInPreProduction = preProductionStatuses.includes(jobStatus);
+  const jobInPostProduction = postProductionStatuses.includes(jobStatus);

-  const jobInPostProduction = useMemo(() => {
-    return bodyshop.md_ro_statuses.post_production_statuses.includes(job.status);
-  }, [job.status, bodyshop.md_ro_statuses.post_production_statuses]);
+  const openConfirm = useCallback((key) => {
+    confirmKeyRef.current = key;
+    setConfirmKey(key);
+    setDropdownOpen(true);
+  }, []);
+
+  const closeConfirm = useCallback(() => {
+    confirmKeyRef.current = null;
+    setConfirmKey(null);
+  }, []);
+
+  const handleDropdownOpenChange = useCallback(
+    (nextOpen, info) => {
+      if (!nextOpen && info?.source === "menu" && confirmKeyRef.current) return;
+      setDropdownOpen(nextOpen);
+      if (!nextOpen) closeConfirm();
+    },
+    [closeConfirm]
+  );
+
+  const renderPopconfirmMenuLabel = ({
+    key,
+    text,
+    title,
+    okText,
+    cancelText,
+    showCancel = true,
+    closeDropdownOnConfirm = true,
+    onConfirm
+  }) => (
+    <Popconfirm
+      title={title}
+      okText={okText}
+      cancelText={cancelText}
+      showCancel={showCancel}
+      open={confirmKey === key}
+      onOpenChange={(nextOpen) => {
+        if (nextOpen) openConfirm(key);
+        else closeConfirm();
+      }}
+      onConfirm={(e) => {
+        e?.stopPropagation?.();
+        closeConfirm();
+
+        // Critical: for informational popconfirms, keep the dropdown open so the Popconfirm can cleanly close.
+        if (closeDropdownOnConfirm) {
+          setDropdownOpen(false);
+        }
+
+        onConfirm?.(e);
+      }}
+      onCancel={(e) => {
+        e?.stopPropagation?.();
+        closeConfirm();
+        // Keep dropdown open on cancel so the user can continue using the menu.
+      }}
+      getPopupContainer={() => document.body}
+    >
+      <div
+        style={{ width: "100%" }}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          openConfirm(key);
+        }}
+      >
+        {text}
+      </div>
+    </Popconfirm>
+  );

  // Function to show modal
  const showCancelScheduleModal = () => {
@@ -549,12 +635,6 @@ export function JobsDetailHeaderActions({
    });
  };

-  // Function to handle OK
-  const handleCancelScheduleOK = async () => {
-    await form.submit(); // Assuming 'form' is the Form instance from useForm()
-    setIsCancelScheduleModalVisible(false);
-  };
-
  const handleLostSaleFinish = async ({ lost_sale_reason }) => {
    const jobUpdate = await cancelAllAppointments({
      variables: {
@@ -884,34 +964,26 @@ export function JobsDetailHeaderActions({
        {
          key: "duplicate",
          id: "job-actions-duplicate",
-          label: (
-            <Popconfirm
-              title={t("jobs.labels.duplicateconfirm")}
-              okText="Yes"
-              cancelText="No"
-              onClick={(e) => e.stopPropagation()}
-              onConfirm={handleDuplicate}
-              getPopupContainer={(trigger) => trigger.parentNode}
-            >
-              {t("menus.jobsactions.duplicate")}
-            </Popconfirm>
-          )
+          label: renderPopconfirmMenuLabel({
+            key: "confirm-duplicate",
+            text: t("menus.jobsactions.duplicate"),
+            title: t("jobs.labels.duplicateconfirm"),
+            okText: t("general.labels.yes"),
+            cancelText: t("general.labels.no"),
+            onConfirm: handleDuplicate
+          })
        },
        {
          key: "duplicatenolines",
          id: "job-actions-duplicatenolines",
-          label: (
-            <Popconfirm
-              title={t("jobs.labels.duplicateconfirm")}
-              okText="Yes"
-              cancelText="No"
-              onClick={(e) => e.stopPropagation()}
-              onConfirm={handleDuplicateConfirm}
-              getPopupContainer={(trigger) => trigger.parentNode}
-            >
-              {t("menus.jobsactions.duplicatenolines")}
-            </Popconfirm>
-          )
+          label: renderPopconfirmMenuLabel({
+            key: "confirm-duplicate-nolines",
+            text: t("menus.jobsactions.duplicatenolines"),
+            title: t("jobs.labels.duplicateconfirm"),
+            okText: t("general.labels.yes"),
+            cancelText: t("general.labels.no"),
+            onConfirm: handleDuplicateConfirm
+          })
        }
      ]
    },
@@ -1085,21 +1157,25 @@ export function JobsDetailHeaderActions({
      key: "deletejob",
      id: "job-actions-deletejob",
      label:
-        job.job_watchers.length === 0 ? (
-          <Popconfirm
-            title={t("jobs.labels.deleteconfirm")}
-            okText={t("general.labels.yes")}
-            cancelText={t("general.labels.no")}
-            onClick={(e) => e.stopPropagation()}
-            onConfirm={handleDeleteJob}
-          >
-            {t("menus.jobsactions.deletejob")}
-          </Popconfirm>
-        ) : (
-          <Popconfirm title={t("jobs.labels.deletewatchers")} onClick={(e) => e.stopPropagation()} showCancel={false}>
-            {t("menus.jobsactions.deletejob")}
-          </Popconfirm>
-        )
+        jobWatchersCount === 0
+          ? renderPopconfirmMenuLabel({
+              key: "confirm-deletejob",
+              text: t("menus.jobsactions.deletejob"),
+              title: t("jobs.labels.deleteconfirm"),
+              okText: t("general.labels.yes"),
+              cancelText: t("general.labels.no"),
+              onConfirm: handleDeleteJob
+            })
+          : renderPopconfirmMenuLabel({
+              key: "confirm-deletejob-watchers",
+              text: t("menus.jobsactions.deletejob"),
+              title: t("jobs.labels.deletewatchers"),
+              showCancel: false,
+              closeDropdownOnConfirm: false, // <-- FIX: keep dropdown mounted so Popconfirm can close cleanly
+              onConfirm: () => {
+                // informational confirm only
+              }
+            })
    });
  }

@@ -1118,15 +1194,14 @@ export function JobsDetailHeaderActions({
      id: "job-actions-voidjob",
      label: (
        <RbacWrapper action="jobs:void" noauth>
-          <Popconfirm
-            title={t("jobs.labels.voidjob")}
-            okText={t("general.labels.yes")}
-            cancelText={t("general.labels.no")}
-            onClick={(e) => e.stopPropagation()}
-            onConfirm={handleVoidJob}
-          >
-            {t("menus.jobsactions.void")}
-          </Popconfirm>
+          {renderPopconfirmMenuLabel({
+            key: "confirm-voidjob",
+            text: t("menus.jobsactions.void"),
+            title: t("jobs.labels.voidjob"),
+            okText: t("general.labels.yes"),
+            cancelText: t("general.labels.no"),
+            onConfirm: handleVoidJob
+          })}
        </RbacWrapper>
      )
    });
@@ -1163,20 +1238,12 @@ export function JobsDetailHeaderActions({
      <Modal
        title={t("menus.jobsactions.cancelallappointments")}
        open={isCancelScheduleModalVisible}
-        onOk={handleCancelScheduleOK}
        onCancel={handleCancelScheduleModalCancel}
        footer={[
          <Button form="cancelScheduleForm" key="back" onClick={handleCancelScheduleModalCancel}>
            {t("general.actions.cancel")}
          </Button>,
-          <Button
-            form="cancelScheduleForm"
-            htmlType="submit"
-            key="submit"
-            type="primary"
-            loading={loading}
-            onClick={handleCancelScheduleOK}
-          >
+          <Button form="cancelScheduleForm" htmlType="submit" key="submit" type="primary" loading={loading}>
            {t("appointments.actions.cancel")}
          </Button>
        ]}
@@ -1184,9 +1251,12 @@ export function JobsDetailHeaderActions({
        <Form
          layout="vertical"
          id="cancelScheduleForm"
-          onFinish={(s) => {
-            console.log(s);
-            handleLostSaleFinish(s);
+          onFinish={async (s) => {
+            try {
+              await handleLostSaleFinish(s);
+            } finally {
+              setIsCancelScheduleModalVisible(false);
+            }
          }}
        >
          <Form.Item
@@ -1208,12 +1278,20 @@ export function JobsDetailHeaderActions({
          </Form.Item>
        </Form>
      </Modal>
-      <Dropdown menu={menu} trigger={["click"]} key="changestatus" open={dropdownOpen} onOpenChange={setDropdownOpen}>
+
+      <Dropdown
+        menu={menu}
+        trigger={["click"]}
+        key="changestatus"
+        open={dropdownOpen}
+        onOpenChange={handleDropdownOpenChange}
+      >
        <Button>
          <span>{t("general.labels.actions")}</span>
          <DownCircleFilled />
        </Button>
      </Dropdown>
+
      <Popover content={popOverContent} open={visibility} />
    </>
  );
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx
@@ -44,7 +44,7 @@ export function JobsDocumentsContainer({
    variables: { jobId: jobId },
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
-    skip: !!billId
+    skip: !jobId || !!billId
  });

  if (loading) return <LoadingSpinner />;