Build a Form Filling Session with EHR Handoff

// Form filling SDK + EHR handoff tutorial (React)
// Copy this file into a React app, replace YOUR_* placeholders, then render <App />.
// Flow: FormFillingClient → FormFillingProvider → FormFilling → map structured_data → your EHR API
// Do not rely on browser onSubmit alone in production. Also register a partner webhook.

import { useMemo, useState } from "react";
import { SukiAuthManager } from "@suki-sdk/core";
import {
  FormFillingClient,
  FormFillingProvider,
  FormFilling,
  useFormFilling,
} from "@suki-sdk/form-filling-react";

// Optional: sibling status under the same provider.
// Prefer isSessionActive; the provider may keep the last error until the next form-filling:error.
function FormFillingStatus() {
  const { isSessionActive, error } = useFormFilling();
  if (isSessionActive) {
    return <p>Form session active: speak to fill fields.</p>;
  }
  if (error) {
    return (
      <p role="alert">
        Form filling error ({error.code}): {error.message}
      </p>
    );
  }
  return null;
}

// Map each filled template to an EHR-shaped payload. Adapt `fields` to your chart schema.
function mapResultToEhr(result) {
  return result.structured_data.generated_values.map((instance) => ({
    encounterId: result.correlation_id ?? "", // Your encounter key from correlation_id
    sessionId: result.ambient_session_id, // Use for idempotent saves
    templateId: instance.form_template_id,
    fields: instance.data,
  }));
}

function EncounterFormFilling({ encounterId }) {
  // 1) Build auth + client once for the encounter page.
  const client = useMemo(() => {
    const authManager = new SukiAuthManager({
      partnerId: "YOUR_PARTNER_ID", // Required: from partner onboarding
      partnerToken: "YOUR_PARTNER_TOKEN", // Required
      environment: "staging",
      loginOnInitialize: true,
      autoRegister: false, // Optional (default true); when true, providerName and providerOrgId are often required
      providerId: "YOUR_PROVIDER_ID", // Replace with your provider ID
      providerName: "Dr. Jane Smith", // Example only — replace with the provider's full name
    });
    return new FormFillingClient({ authManager });
  }, []);

  const [open, setOpen] = useState(false);

  // 2) Persist mapped results. Reuse this handler for onSubmit and onBackgroundSubmit.
  async function handleSubmit(result) {
    const missing = result.structured_data.non_generated_values.map(
      (v) => v.form_template_id,
    );
    if (missing.length > 0) {
      console.warn("No output for templates:", missing);
    }

    const payloads = mapResultToEhr(result);
    for (const payload of payloads) {
      // Replace with your EHR / charting API
      // Example EHR endpoint only — replace with your charting / EHR API
      await fetch("/api/ehr/forms", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
    }
    setOpen(false);
  }

  return (
    <FormFillingProvider client={client}>
      <h1>Encounter {encounterId}</h1>
      <FormFillingStatus />
      <button type="button" onClick={() => setOpen(true)} disabled={open}>
        Start Form filling
      </button>
      {/* 3) Mount Form filling only while the session should be open.
          Style .suki-form-filling with height first or the iframe looks blank. */}
      {open && (
        <FormFilling
          form_template_ids={["YOUR_TEMPLATE_ID_A", "YOUR_TEMPLATE_ID_B"]} // Example placeholders — replace with template IDs from Suki
          correlation_id={encounterId} // Ties results back to this encounter
          onSubmit={handleSubmit} // Required: receives FormFillingResult
          onCancel={() => setOpen(false)}
          onBackgroundSubmit={handleSubmit} // Late results after the clinician reopens or leaves
        />
      )}
    </FormFillingProvider>
  );
}

// 4) Demo root with a sample encounter id so this file is paste-ready.
function App() {
  // Example encounter id only — replace with your real encounter / chart key
  return <EncounterFormFilling encounterId="encounter-123" />;
}

export default App;