feat: MetLife Dental eligibility check with persistent session

Mirrors the DDMA flow: persistent Chrome profile + credential-change logout, PingOne login with email MFA selection and OTP from app or browser, Eligibility & Plan Details search (masked Subscriber ID/SSN), family member picked by DOB and re-verified on the plan details page, PDF saved to the patient's Eligibility folder and status set ACTIVE/INACTIVE. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-13 00:29:28 -04:00
parent 143319909f
commit db7ea8ef2f
17 changed files with 2475 additions and 12 deletions
@@ -0,0 +1,371 @@
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { CheckCircle, LoaderCircleIcon, X } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { useAppDispatch } from "@/redux/hooks";
+import { setTaskStatus } from "@/redux/slices/seleniumTaskSlice";
+import { formatLocalDate } from "@/utils/dateUtils";
+import { socket } from "@/lib/socket";
+import { QK_PATIENTS_BASE } from "@/components/patients/patient-table";
+
+// ─── OTP Modal ────────────────────────────────────────────────────────────────
+
+interface MetLifeOtpModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (otp: string) => Promise<void> | void;
+  isSubmitting: boolean;
+}
+
+function MetLifeOtpModal({ open, onClose, onSubmit, isSubmitting }: MetLifeOtpModalProps) {
+  const [otp, setOtp] = useState("");
+
+  useEffect(() => {
+    if (!open) setOtp("");
+  }, [open]);
+
+  if (!open) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!otp.trim()) return;
+    await onSubmit(otp.trim());
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+      <div className="bg-white dark:bg-slate-900 rounded-xl shadow-lg w-full max-w-md p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold">Enter OTP</h2>
+          <button type="button" onClick={onClose} className="text-slate-500 hover:text-slate-800">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+        <p className="text-sm text-slate-500 mb-4">
+          We need the one-time code sent by the MetLife Dental portal to complete this eligibility
+          check. If the portal asks how to send the code, choose it in the browser window first.
+        </p>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="metlife-otp">OTP</Label>
+            <Input
+              id="metlife-otp"
+              placeholder="Enter OTP code"
+              value={otp}
+              onChange={(e) => setOtp(e.target.value)}
+              autoFocus
+            />
+          </div>
+          <div className="flex justify-end gap-3">
+            <Button type="button" variant="outline" onClick={onClose} disabled={isSubmitting}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isSubmitting || !otp.trim()}>
+              {isSubmitting ? (
+                <>
+                  <LoaderCircleIcon className="w-4 h-4 mr-2 animate-spin" />
+                  Submitting...
+                </>
+              ) : (
+                "Submit OTP"
+              )}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+interface MetLifeEligibilityButtonProps {
+  memberId: string;
+  dateOfBirth: Date | null;
+  firstName?: string;
+  lastName?: string;
+  isFormIncomplete: boolean;
+  autoTrigger?: boolean;
+  onAutoTriggered?: () => void;
+  onPdfReady: (pdfId: number | string, fallbackFilename: string | null) => void;
+}
+
+export function MetLifeEligibilityButton({
+  memberId,
+  dateOfBirth,
+  firstName,
+  lastName,
+  isFormIncomplete,
+  autoTrigger,
+  onAutoTriggered,
+  onPdfReady,
+}: MetLifeEligibilityButtonProps) {
+  const { toast } = useToast();
+  const dispatch = useAppDispatch();
+
+  const sessionIdRef = useRef<string | null>(null);
+  const autoTriggeredRef = useRef(false);
+
+  const [otpModalOpen, setOtpModalOpen] = useState(false);
+  const [isStarting, setIsStarting] = useState(false);
+  const [isSubmittingOtp, setIsSubmittingOtp] = useState(false);
+
+  const handleMetLifeStart = async () => {
+    if (!memberId || !dateOfBirth) {
+      toast({
+        title: "Missing fields",
+        description: "Member ID (Subscriber ID or SSN) and Date of Birth are required.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const payload = {
+      memberId,
+      dateOfBirth: formatLocalDate(dateOfBirth),
+      firstName,
+      lastName,
+      insuranceSiteKey: "METLIFE",
+    };
+
+    setIsStarting(true);
+
+    try {
+      dispatch(
+        setTaskStatus({
+          key: "eligibilityCheck",
+          status: "pending",
+          message: "Starting MetLife eligibility check…",
+        })
+      );
+
+      // 1) POST to backend — returns { status: "queued", jobId }
+      const response = await apiRequest(
+        "POST",
+        "/api/insurance-status-metlife/metlife-eligibility",
+        { data: JSON.stringify(payload), socketId: socket.id }
+      );
+
+      const result = await response.json();
+      if (!response.ok || result.error) {
+        throw new Error(result.error || `Server error (${response.status})`);
+      }
+
+      const jobId: string = result.jobId;
+      if (!jobId) throw new Error("No jobId returned from server");
+
+      dispatch(
+        setTaskStatus({
+          key: "eligibilityCheck",
+          status: "pending",
+          message: "MetLife job queued. Waiting for browser session to start…",
+        })
+      );
+
+      // 2) Listen for job-lifecycle and MetLife-specific socket events.
+
+      const onSessionStarted = (data: any) => {
+        if (String(data?.jobId) !== String(jobId)) return;
+        sessionIdRef.current = data.session_id ?? null;
+        dispatch(
+          setTaskStatus({
+            key: "eligibilityCheck",
+            status: "pending",
+            message: "Browser session started. Waiting for OTP or result…",
+          })
+        );
+      };
+
+      const onOtpRequired = (data: any) => {
+        if (String(data?.jobId) !== String(jobId)) return;
+        if (data.session_id) sessionIdRef.current = data.session_id;
+        setOtpModalOpen(true);
+        dispatch(
+          setTaskStatus({
+            key: "eligibilityCheck",
+            status: "pending",
+            message: "OTP required for MetLife. Please enter the code.",
+          })
+        );
+      };
+
+      const onOtpSubmitted = (data: any) => {
+        if (data?.session_id && data.session_id !== sessionIdRef.current) return;
+        dispatch(
+          setTaskStatus({
+            key: "eligibilityCheck",
+            status: "pending",
+            message: "OTP submitted. Finishing MetLife eligibility check…",
+          })
+        );
+      };
+
+      const onJobUpdate = (data: any) => {
+        if (String(data?.jobId) !== String(jobId)) return;
+
+        if (data.status === "active") {
+          dispatch(
+            setTaskStatus({
+              key: "eligibilityCheck",
+              status: "pending",
+              message: data.message ?? "Selenium browser starting…",
+            })
+          );
+          return;
+        }
+
+        // Terminal states
+        cleanup();
+
+        if (data.status === "completed") {
+          dispatch(
+            setTaskStatus({
+              key: "eligibilityCheck",
+              status: "success",
+              message: "MetLife eligibility updated and PDF attached to patient documents.",
+            })
+          );
+          toast({
+            title: "MetLife eligibility complete",
+            description: "Patient status was updated and the eligibility PDF was saved.",
+          });
+          queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE });
+          const pdfId = data.result?.pdfFileId;
+          if (pdfId) {
+            onPdfReady(pdfId, data.result?.pdfFilename ?? `eligibility_metlife_${memberId}.pdf`);
+          }
+        } else if (data.status === "failed") {
+          const msg = data.error ?? "MetLife eligibility job failed.";
+          dispatch(setTaskStatus({ key: "eligibilityCheck", status: "error", message: msg }));
+          toast({ title: "MetLife selenium error", description: msg, variant: "destructive" });
+        }
+
+        setIsStarting(false);
+        setOtpModalOpen(false);
+      };
+
+      // Safety timeout — clean up listeners if no terminal event in 6 min
+      const safetyTimer = setTimeout(() => {
+        cleanup();
+        setIsStarting(false);
+        setOtpModalOpen(false);
+        dispatch(
+          setTaskStatus({
+            key: "eligibilityCheck",
+            status: "error",
+            message: "MetLife job timed out waiting for completion.",
+          })
+        );
+      }, 6 * 60 * 1000);
+
+      function cleanup() {
+        clearTimeout(safetyTimer);
+        socket.off("selenium:metlife_session_started", onSessionStarted);
+        socket.off("selenium:otp_required", onOtpRequired);
+        socket.off("selenium:otp_submitted", onOtpSubmitted);
+        socket.off("job:update", onJobUpdate);
+      }
+
+      socket.on("selenium:metlife_session_started", onSessionStarted);
+      socket.on("selenium:otp_required", onOtpRequired);
+      socket.on("selenium:otp_submitted", onOtpSubmitted);
+      socket.on("job:update", onJobUpdate);
+    } catch (err: any) {
+      console.error("MetLifeEligibilityButton error:", err);
+      dispatch(
+        setTaskStatus({
+          key: "eligibilityCheck",
+          status: "error",
+          message: err?.message || "Failed to start MetLife eligibility",
+        })
+      );
+      toast({
+        title: "MetLife selenium error",
+        description: err?.message || "Failed to start MetLife eligibility",
+        variant: "destructive",
+      });
+      setIsStarting(false);
+    }
+  };
+
+  // ── OTP submission ────────────────────────────────────────────────────────
+
+  const handleSubmitOtp = async (otp: string) => {
+    const sessionId = sessionIdRef.current;
+    if (!sessionId) {
+      toast({
+        title: "Session not ready",
+        description: "Cannot submit OTP — MetLife session ID is not available yet.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      setIsSubmittingOtp(true);
+      const resp = await apiRequest("POST", "/api/insurance-status-metlife/selenium/submit-otp", {
+        session_id: sessionId,
+        otp,
+        socketId: socket.id,
+      });
+      const data = await resp.json();
+      if (!resp.ok || data.error) {
+        throw new Error(data.error || "Failed to submit OTP");
+      }
+      setOtpModalOpen(false);
+    } catch (err: any) {
+      console.error("handleSubmitOtp error:", err);
+      toast({
+        title: "Failed to submit OTP",
+        description: err?.message || "Error forwarding OTP to selenium agent",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmittingOtp(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!autoTrigger) { autoTriggeredRef.current = false; return; }
+    if (autoTriggeredRef.current || isFormIncomplete) return;
+    autoTriggeredRef.current = true;
+    onAutoTriggered?.();
+    handleMetLifeStart();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoTrigger, isFormIncomplete]);
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  return (
+    <>
+      <Button
+        className="w-full"
+        variant="default"
+        disabled={isFormIncomplete || isStarting}
+        onClick={handleMetLifeStart}
+      >
+        {isStarting ? (
+          <>
+            <LoaderCircleIcon className="h-4 w-4 mr-2 animate-spin" />
+            Processing...
+          </>
+        ) : (
+          <>
+            <CheckCircle className="h-4 w-4 mr-2" />
+            Metlife Dental
+          </>
+        )}
+      </Button>
+
+      <MetLifeOtpModal
+        open={otpModalOpen}
+        onClose={() => setOtpModalOpen(false)}
+        onSubmit={handleSubmitOtp}
+        isSubmitting={isSubmittingOtp}
+      />
+    </>
+  );
+}
@@ -142,6 +142,7 @@ const INSURANCE_TYPE_OPTIONS: { value: string; label: string }[] = [
  { value: "tufts-sco", label: "Tufts SCO" },
  { value: "cca", label: "CCA" },
  { value: "bcbs-ma", label: "BCBS MA" },
+  { value: "metlife", label: "MetLife" },
 ];

 function getAutoCheck(_dobISO: string): "mh" {
@@ -25,6 +25,7 @@ const SITE_KEY_OPTIONS = [
  { value: "UNITED_UCARD", label: "United Ucard (UNITED_UCARD)" },
  { value: "CCA", label: "CCA (CCA)" },
  { value: "BCBS_MA", label: "BCBS MA (BCBS_MA)" },
+  { value: "METLIFE", label: "MetLife Dental (METLIFE)" },
 ];

 export function CredentialForm({ onClose, userId, defaultValues }: CredentialFormProps) {
@@ -1196,6 +1196,8 @@ export default function AppointmentsPage() {
      autoCheck = "tufts-sco";
    } else if (p.includes("commonwealth care alliance") || p.includes("cca")) {
      autoCheck = "cca";
+    } else if (p.includes("metlife") || p.includes("met life")) {
+      autoCheck = "metlife";
    }

    if (autoCheck === "other-providers") {
@@ -38,6 +38,7 @@ import { PdfPreviewModal } from "@/components/insurance-status/pdf-preview-modal
 import { DualPdfPreviewModal } from "@/components/insurance-status/dual-pdf-preview-modal";
 import { useLocation } from "wouter";
 import { DdmaEligibilityButton } from "@/components/insurance-status/ddma-buton-modal";
+import { MetLifeEligibilityButton } from "@/components/insurance-status/metlife-button-modal";
 import { DeltaIndivEligibilityButton } from "@/components/insurance-status/deltaindiv-button-modal";
 import { DeltaInsEligibilityButton } from "@/components/insurance-status/deltains-button-modal";
 import { TuftsSCOEligibilityButton } from "@/components/insurance-status/tufts-sco-button-modal";
@@ -175,7 +176,7 @@ export default function InsuranceStatusPage() {
  const [cmspAccumulatorPdfId, setCmspAccumulatorPdfId] = useState<number | string | null>(null);
  const [cmspAccumulatorFilename, setCmspAccumulatorFilename] = useState<string | null>(null);

-  const pendingAutoCheck = useRef<"mh" | "mh-history" | "cmsp" | "ddma" | "delta-ins" | "delta-indiv" | "united-sco" | "united-ucard" | "tufts-sco" | "cca" | "bcbs-ma" | null>(null);
+  const pendingAutoCheck = useRef<"mh" | "mh-history" | "cmsp" | "ddma" | "delta-ins" | "delta-indiv" | "united-sco" | "united-ucard" | "tufts-sco" | "cca" | "bcbs-ma" | "metlife" | null>(null);
  const [triggerTarget, setTriggerTarget] = useState<string | null>(null);
  const pendingScrollTo = useRef<string | null>(null);
  const [prefillTick, setPrefillTick] = useState(0);
@@ -916,7 +917,7 @@ export default function InsuranceStatusPage() {
    const autoCheck = params.get("autoCheck") as typeof pendingAutoCheck.current;
    const scrollTo = params.get("scrollTo");

-    const knownAutoChecks = ["mh", "mh-history", "cmsp", "ddma", "delta-ins", "delta-indiv", "united-sco", "united-ucard", "tufts-sco", "cca", "bcbs-ma"] as const;
+    const knownAutoChecks = ["mh", "mh-history", "cmsp", "ddma", "delta-ins", "delta-indiv", "united-sco", "united-ucard", "tufts-sco", "cca", "bcbs-ma", "metlife"] as const;
    if (autoCheck && (knownAutoChecks as readonly string[]).includes(autoCheck)) {
      pendingAutoCheck.current = autoCheck;
    } else if (scrollTo) {
@@ -1273,14 +1274,28 @@ export default function InsuranceStatusPage() {
                  <CheckCircle className="h-4 w-4 mr-2" />
                  Altus
                </Button>
-                <Button
-                  className="w-full"
-                  variant="outline"
-                  disabled={isFormIncomplete}
-                >
-                  <CheckCircle className="h-4 w-4 mr-2" />
-                  Metlife Dental
-                </Button>
+                <div title={!isLicensed ? "License required" : undefined} className={!isLicensed ? "opacity-40 pointer-events-none" : ""}>
+                  <MetLifeEligibilityButton
+                    memberId={memberId}
+                    dateOfBirth={dateOfBirth}
+                    firstName={firstName}
+                    lastName={lastName}
+                    isFormIncomplete={isFormIncomplete}
+                    autoTrigger={triggerTarget === "metlife"}
+                    onAutoTriggered={() => setTriggerTarget(null)}
+                    onPdfReady={async (pdfId, fallbackFilename) => {
+                      await queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE });
+                      const claimed = await tryClaimFromChatbot(selectedPatient?.id);
+                      void tryAppointmentFromChatbot();
+                      if (!claimed) {
+                        setPreviewPdfId(pdfId);
+                        setPreviewFallbackFilename(fallbackFilename ?? `eligibility_metlife_${memberId}.pdf`);
+                        setPreviewOpen(true);
+                      }
+                      processNextInQueue();
+                    }}
+                  />
+                </div>

                <Button
                  className="w-full"