Form Filling SDK Basic Usage

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

function FormFillingStatus() {
  const { isSessionActive, error } = useFormFilling();

  // Prefer session state. The provider keeps the last error until the next
  // form-filling:error, so do not return early on error alone after a retry.
  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;
}

export function NursingEncounterPage({ encounterId }) {
  const client = useMemo(() => {
    const authManager = new SukiAuthManager({
      partnerId: "YOUR_PARTNER_ID", // required
      partnerToken: "YOUR_PARTNER_TOKEN", // required
      environment: "staging",
      loginOnInitialize: true,
      autoRegister: false, // optional (default true); when true, provider fields below are often required
      providerId: "YOUR_PROVIDER_ID", // required
      providerName: "Dr. Jane Smith",
    });
    return new FormFillingClient({ authManager });
  }, []);

  const [showForms, setShowForms] = useState(false);

  const handleSubmit = (result) => {
    for (const form of result.structured_data.generated_values) {
      console.log(form.form_template_id, form.data);
    }
    setShowForms(false);
  };

  return (
    <FormFillingProvider client={client}>
      <h1>Encounter {encounterId}</h1>
      <FormFillingStatus />
      <button type="button" onClick={() => setShowForms(true)} disabled={showForms}>
        Start Form filling
      </button>
      {showForms && (
        <FormFilling
          form_template_ids={["YOUR_TEMPLATE_ID_A", "YOUR_TEMPLATE_ID_B"]}
          correlation_id={encounterId}
          onSubmit={handleSubmit}
          onCancel={() => setShowForms(false)}
          onBackgroundSubmit={handleSubmit}
        />
      )}
    </FormFillingProvider>
  );
}