feature/IO-3499-React-19: Manual Appointment in Schedule, Email Form console error

client/src/components/email-overlay/email-overlay.container.jsx

@@ -32,6 +32,7 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
   const [loading, setLoading] = useState(false);
   const [sending, setSending] = useState(false);
   const [rawHtml, setRawHtml] = useState("");
+  const [htmlSize, setHtmlSize] = useState(0);
   const [pdfCopytoAttach, setPdfCopytoAttach] = useState({
     filename: null,
     pdf: null
@@ -151,6 +152,13 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
     if (modalVisible) render();
   }, [modalVisible]);
 
+  useEffect(() => {
+    const html = form.getFieldValue("html");
+    if (html) {
+      setHtmlSize(new Blob([html]).size);
+    }
+  }, [form, rawHtml]);
+
   return (
     <Modal
       destroyOnHidden
@@ -169,7 +177,7 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
         disabled:
           selectedMedia &&
           (selectedMedia.filter((s) => s.isSelected).reduce((acc, val) => (acc = acc + val.size), 0) >=
-            10485760 - new Blob([form.getFieldValue("html")]).size ||
+            10485760 - htmlSize ||
             selectedMedia.filter((s) => s.isSelected).length > 10)
       }}
     >
@@ -195,7 +203,7 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
               disabled={
                 selectedMedia &&
                 (selectedMedia.filter((s) => s.isSelected).reduce((acc, val) => (acc = acc + val.size), 0) >=
-                  10485760 - new Blob([form.getFieldValue("html")]).size ||
+                  10485760 - htmlSize ||
                   selectedMedia.filter((s) => s.isSelected).length > 10)
               }
               type="primary"

client/src/components/job-at-change/schedule-event.component.jsx

@@ -120,6 +120,13 @@ export function ScheduleEventComponent({
   );
 
   const handleConvert = async (values) => {
+    if (!event.job?.id) {
+      notification.error({
+        title: t("appointments.errors.nojob")
+      });
+      return;
+    }
+
     const res = await mutationUpdateJob({
       variables: {
         jobId: event.job.id,
@@ -397,21 +404,21 @@ export function ScheduleEventComponent({
           (HasFeatureAccess({ featureName: "checklist", bodyshop }) ? (
             <Link
               to={{
-                pathname: `/manage/jobs/${event.job && event.job.id}/intake`,
+                pathname: `/manage/jobs/${event.job.id}/intake`,
                 search: `?appointmentId=${event.id}`
               }}
             >
               <Button disabled={event.arrived}>{t("appointments.actions.intake")}</Button>
             </Link>
           ) : (
-            <Popover //open={open}
+            <Popover
               content={popMenu}
               open={popOverVisible}
               onOpenChange={setPopOverVisible}
               onClick={(e) => {
                 if (event.job?.id) {
                   e.stopPropagation();
-                  getJobDetails({ id: event.job.id });
+                  getJobDetails({ variables: { id: event.job.id } });
                 }
               }}
               getPopupContainer={(trigger) => trigger.parentNode}
@@ -434,37 +441,36 @@ export function ScheduleEventComponent({
     return baseColor;
   };
 
-  const RegularEvent = event.isintake ? (
-    <Space
-      wrap
-      size="small"
-      style={{
-        backgroundColor: getEventBackground()
-      }}
-    >
-      {event.note && <AlertFilled className="production-alert" />}
-      <strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
-      <OwnerNameDisplay ownerObject={event.job} />
-      {`${(event.job && event.job.v_model_yr) || ""} ${
-        (event.job && event.job.v_make_desc) || ""
-      } ${(event.job && event.job.v_model_desc) || ""}`}
-      {`(${(event.job && event.job.labhrs.aggregate.sum.mod_lb_hrs) || "0"} / ${
-        (event.job && event.job.larhrs.aggregate.sum.mod_lb_hrs) || "0"
-      })`}
-      {event.job && event.job.alt_transport && <div style={{ margin: ".1rem" }}>{event.job.alt_transport}</div>}
-      {event?.job?.comment && `C: ${event.job.comment}`}
-    </Space>
-  ) : (
-    <div
-      style={{
-        height: "100%",
-        width: "100%",
-        backgroundColor: getEventBackground()
-      }}
-    >
-      <strong>{`${event.title || ""}`}</strong>
-    </div>
-  );
+  const RegularEvent =
+    event.isintake && event.job ? (
+      <Space
+        wrap
+        size="small"
+        style={{
+          backgroundColor: getEventBackground()
+        }}
+      >
+        {event.note && <AlertFilled className="production-alert" />}
+        <strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
+        <OwnerNameDisplay ownerObject={event.job} />
+        {`${event.job.v_model_yr || ""} ${event.job.v_make_desc || ""} ${event.job.v_model_desc || ""}`}
+        {`(${event.job.labhrs?.aggregate?.sum?.mod_lb_hrs || "0"} / ${
+          event.job.larhrs?.aggregate?.sum?.mod_lb_hrs || "0"
+        })`}
+        {event.job.alt_transport && <div style={{ margin: ".1rem" }}>{event.job.alt_transport}</div>}
+        {event.job.comment && `C: ${event.job.comment}`}
+      </Space>
+    ) : (
+      <div
+        style={{
+          height: "100%",
+          width: "100%",
+          backgroundColor: getEventBackground()
+        }}
+      >
+        <strong>{`${event.title || ""}`}</strong>
+      </div>
+    );
 
   return (
     <Popover