React

/** Points at the routes you mounted from `domainkit/server`. No credential reaches the browser. */
const transport = Transport.fromFetch("/api/domainkit");

const requirements = [
  DnsRecord.cname({
    name: "app.example.com",
    target: "edge.acme.dev",
    purpose: "Serve your site",
  }),
  DnsRecord.txt({
    name: "_acme.app.example.com",
    value: "acme-verify=7f3a",
    purpose: "Prove ownership",
  }),
];

/**
 * One hook. `Domain.useFlow` connects a provider, plans the changes, takes the customer's approval
 * or refusal, applies the plan, observes the records, and cleans them up against the receipt. It
 * reports only the capability groups the transport declares, and your markup renders it.
 */
function DomainSetup() {
  const flow = Domain.useFlow({ domain: "app.example.com", requirements });
  const writes = flow.plan === null ? [] : Plan.writes(flow.plan);
  return (
    <section>
      <p>{flow.state.connected ? `Connected to ${flow.state.provider}` : "Not connected"}</p>
      {writes.length === 0 ? null : (
        <button onClick={() => flow.provisioning.approve()} type="button">
          Add {writes.length} records
        </button>
      )}
    </section>
  );
}

export function DomainSettings() {
  return (
    <DomainKit.Root transport={transport}>
      <DomainSetup />
    </DomainKit.Root>
  );
}

/** Finished steps arrive as events, for your notifications, analytics, and audit trail. */
export function DomainSettingsWithEvents() {
  return (
    <DomainKit.Root
      onEvent={(event) => {
        if (event._tag === "Applied") track("dns.applied", { receiptId: event.receipt.id });
      }}
      transport={transport}
    >
      <DomainSetup />
    </DomainKit.Root>
  );
}

/**
 * A customer who may read the domain but not change it. Every command that would start a write
 * refuses to run, and `flow.state.readOnly` is what your surface reads to say who may connect.
 */
function MemberRow({ domain }: { readonly domain: string }) {
  const flow = Domain.useFlow({ domain, requirements });
  const host = Connect.hostProvider(flow.connection);
  if (!flow.state.readOnly || host === null) return null;
  return <p>An administrator can connect {host.name}</p>;
}

export function MemberView() {
  return (
    <DomainKit.Root readOnly transport={transport}>
      <MemberRow domain="app.example.com" />
    </DomainKit.Root>
  );
}

/** One domain among several, when the rest of the page is writable. */
function DomainRow({ domain, mine }: { readonly domain: string; readonly mine: boolean }) {
  const flow = Domain.useFlow({ domain, readOnly: !mine, requirements });
  return <p>{flow.state.connection}</p>;
}

export function DomainList() {
  return (
    <DomainKit.Root transport={transport}>
      {domains.map((domain) => (
        <DomainRow domain={domain.name} key={domain.name} mine={domain.mine} />
      ))}
    </DomainKit.Root>
  );
}

/**
 * Observation stays available, because checking DNS reads the world rather than changing the
 * domain, and it does not wait for a connection: the controller observes the requirements it was
 * given, so a domain with no provider attached still reports which records are in place.
 */
export function UnattachedStatus({ domain }: { readonly domain: string }) {
  const controller = Verify.useController({ domain, requirements });
  return <p>{controller.readiness?.overall ?? "checking"}</p>;
}

/**
 * An interactive provider returns the customer to the page they started from, read when they
 * connect rather than when the flow renders. Name a different destination, or pass `null` to leave
 * the server's `defaultReturnTo` in charge.
 */
function DomainSetupWithReturn() {
  const flow = Domain.useFlow({
    domain: "app.example.com",
    requirements,
    returnTo: "/settings/domains?connected=1",
  });
  return <p>{flow.state.connection}</p>;
}

export function DomainSettingsWithReturn() {
  return (
    <DomainKit.Root transport={transport}>
      <DomainSetupWithReturn />
    </DomainKit.Root>
  );
}