feature/IO-3499-React-19: Bug Fixes / Checkpoint

client/src/components/card-payment-modal/card-payment-modal.component.jsx

@@ -46,6 +46,8 @@ const CardPaymentModalComponent = ({
 
   const [form] = Form.useForm();
   const [paymentLink, setPaymentLink] = useState();
+  const isMountedRef = useRef(true);
+
   const [loading, setLoading] = useState(false);
   const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
   const { t } = useTranslation();
@@ -69,6 +71,16 @@ const CardPaymentModalComponent = ({
     [called, loadRoAndOwnerByJobPks, refetch]
   );
 
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  const setLoadingSafe = useCallback((value) => {
+    if (isMountedRef.current) setLoading(value);
+  }, []);
+
   // Watch form payments so we can query jobs when all jobids are filled (without side effects during render)
   const payments = Form.useWatch(["payments"], form);
 
@@ -106,45 +118,74 @@ const CardPaymentModalComponent = ({
   const SetIntellipayCallbackFunctions = () => {
     console.log("*** Set IntelliPay callback functions.");
 
+    const isLikelyUserCancel = (response) => {
+      const reason = String(response?.declinereason ?? "").toLowerCase();
+      // Heuristics: adjust if IntelliPay gives you a known cancel code/message
+      return (
+        reason.includes("cancel") ||
+        reason.includes("canceled") ||
+        reason.includes("closed") ||
+        // many gateways won't have a paymentid if user cancels before submitting
+        !response?.paymentid
+      );
+    };
+
     window.intellipay.runOnClose(() => {
-      //window.intellipay.initialize();
+      // This is the path for Cancel / X
+      try {
+        // If IntelliPay uses this flag, clear it so initialize() won't reopen unexpectedly
+        window.intellipay.isAutoOpen = false;
+      } catch {
+        // ignore
+      }
+
+      // Optional: if IntelliPay needs re-init after close, uncomment:
+      // try { window.intellipay.initialize?.(); } catch {}
+
+      setLoadingSafe(false);
     });
 
     window.intellipay.runOnApproval(() => {
-      // 2024-04-25: Nothing is going to happen here anymore. We'll completely rely on the callback.
-      // Add a slight delay to allow the refetch to properly get the data.
+      // keep your existing behavior
       setTimeout(() => {
         if (actions?.refetch) actions.refetch();
-        setLoading(false);
+        setLoadingSafe(false);
         toggleModalVisible();
       }, 750);
     });
 
     window.intellipay.runOnNonApproval(async (response) => {
-      // Mutate unsuccessful payment
+      try {
+        // If cancel is reported as "non-approval", don't record it as a failed payment
+        if (isLikelyUserCancel(response)) return;
 
-      const { payments } = form.getFieldsValue();
-      await insertPaymentResponse({
-        variables: {
-          paymentResponse: payments.map((payment) => ({
-            amount: payment.amount,
-            bodyshopid: bodyshop.id,
+        const { payments } = form.getFieldsValue();
+
+        await insertPaymentResponse({
+          variables: {
+            paymentResponse: payments.map((payment) => ({
+              amount: payment.amount,
+              bodyshopid: bodyshop.id,
+              jobid: payment.jobid,
+              declinereason: response.declinereason,
+              ext_paymentid: response.paymentid?.toString?.() ?? null,
+              successful: false,
+              response
+            }))
+          }
+        });
+
+        payments.forEach((payment) =>
+          insertAuditTrail({
             jobid: payment.jobid,
-            declinereason: response.declinereason,
-            ext_paymentid: response.paymentid.toString(),
-            successful: false,
-            response
-          }))
-        }
-      });
-
-      payments.forEach((payment) =>
-        insertAuditTrail({
-          jobid: payment.jobid,
-          operation: AuditTrailMapping.failedpayment(),
-          type: "failedpayment"
-        })
-      );
+            operation: AuditTrailMapping.failedpayment(),
+            type: "failedpayment"
+          })
+        );
+      } finally {
+        // IMPORTANT: always clear loading, even on errors
+        setLoadingSafe(false);
+      }
     });
   };
 
@@ -154,7 +195,7 @@ const CardPaymentModalComponent = ({
     try {
       await form.validateFields();
     } catch {
-      setLoading(false);
+      setLoadingSafe(false);
       return;
     }
 
@@ -185,7 +226,7 @@ const CardPaymentModalComponent = ({
         document.documentElement.appendChild(node);
         pollForIntelliPay(() => {
           SetIntellipayCallbackFunctions();
-          // eslint-disable-next-line react-compiler/react-compiler
+
           window.intellipay.isAutoOpen = true;
           window.intellipay.initialize();
         });
@@ -194,7 +235,7 @@ const CardPaymentModalComponent = ({
       notification.error({
         title: t("job_payments.notifications.error.openingip")
       });
-      setLoading(false);
+      setLoadingSafe(false);
     }
   };
 
@@ -204,7 +245,7 @@ const CardPaymentModalComponent = ({
     try {
       await form.validateFields();
     } catch {
-      setLoading(false);
+      setLoadingSafe(false);
       return;
     }
 
@@ -227,12 +268,12 @@ const CardPaymentModalComponent = ({
         await navigator.clipboard.writeText(response.data.shorUrl);
         message.success(t("general.actions.copied"));
       }
-      setLoading(false);
+      setLoadingSafe(false);
     } catch {
       notification.error({
         title: t("job_payments.notifications.error.openingip")
       });
-      setLoading(false);
+      setLoadingSafe(false);
     }
   };