Build a React Signing Component with Signbee API

"use client";
import { useState } from "react";

type SigningStatus = "idle" | "sending" | "sent" | "error";

export function SigningButton({
  markdown,
  recipientName,
  recipientEmail,
}: {
  markdown: string;
  recipientName: string;
  recipientEmail: string;
}) {
  const [status, setStatus] = useState<SigningStatus>("idle");
  const [docId, setDocId] = useState<string | null>(null);

  async function handleSend() {
    setStatus("sending");
    try {
      const res = await fetch("https://signb.ee/api/v1/send", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${process.env.NEXT_PUBLIC_SIGNBEE_KEY}`,
        },
        body: JSON.stringify({
          markdown,
          recipient_name: recipientName,
          recipient_email: recipientEmail,
        }),
      });

      if (!res.ok) throw new Error(await res.text());

      const data = await res.json();
      setDocId(data.id);
      setStatus("sent");
    } catch {
      setStatus("error");
    }
  }

  return (
    <div>
      <button
        onClick={handleSend}
        disabled={status === "sending" || status === "sent"}
        className="px-4 py-2 bg-amber-500 text-black rounded disabled:opacity-50"
      >
        {status === "idle" && "Send for Signing"}
        {status === "sending" && "Sending..."}
        {status === "sent" && "✓ Sent"}
        {status === "error" && "Retry"}
      </button>
      {docId && (
        <p className="text-sm text-gray-500 mt-2">
          Document ID: {docId}
        </p>
      )}
    </div>
  );
}

import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const payload = await req.json();

  // Verify the webhook signature (recommended)
  const signature = req.headers.get("x-signbee-signature");

  switch (payload.event) {
    case "document.viewed":
      // Signer opened the document
      await db.documents.update({
        where: { id: payload.document_id },
        data: { status: "viewed", viewedAt: new Date() },
      });
      break;

    case "document.signed":
      // Signer completed signing
      await db.documents.update({
        where: { id: payload.document_id },
        data: {
          status: "signed",
          signedAt: new Date(),
          pdfUrl: payload.pdf_url,
        },
      });
      break;

    case "document.declined":
      await db.documents.update({
        where: { id: payload.document_id },
        data: { status: "declined" },
      });
      break;
  }

  return NextResponse.json({ received: true });
}

import { useEffect, useState } from "react";

export function useSigningStatus(documentId: string | null) {
  const [status, setStatus] = useState<string>("pending");

  useEffect(() => {
    if (!documentId) return;

    const interval = setInterval(async () => {
      const res = await fetch(`/api/documents/${documentId}/status`);
      const data = await res.json();
      setStatus(data.status);

      if (data.status === "signed" || data.status === "declined") {
        clearInterval(interval);
      }
    }, 5000);

    return () => clearInterval(interval);
  }, [documentId]);

  return status;
}

import { SigningButton } from "@/components/SigningButton";

export default function ContractsPage() {
  const contractMarkdown = `
# Service Agreement

**Client:** Acme Corp
**Date:** ${new Date().toLocaleDateString()}
**Amount:** $5,000/month

## Terms

1. Services will begin on the effective date
2. Payment is due within 30 days of invoice
3. Either party may terminate with 30 days notice

## Signatures

By signing below, both parties agree to these terms.
`;

  return (
    <div className="p-8">
      <h1>Send Contract</h1>
      <SigningButton
        markdown={contractMarkdown}
        recipientName="Jane Smith"
        recipientEmail="jane@acme.com"
      />
    </div>
  );
}