Webhooks and Data Management

export default function QuoteOffer({ event, clientId }: Props) {
  const config = useMemo<Config>(/* see step 2 */);

  const eventHandlers = useMemo(
    () => ({
      onOfferStateChange: (state: OfferStateChangeEvent) => {
        // In this case, we are only expecting one quote, so just get the first
        const [quote] = state.quotes;
        if (quote) recordQuoteAction(event.id, quote.quote_id).catch(console.error);
      },
    }),
    [event.id],
  );

  return <VerticalInsure config={config} eventHandlers={eventHandlers} />;
}

"use server";

export async function recordQuoteAction(eventId: number, quoteId: string) {
  if (!data.getEvent(eventId)) throw new Error("Event not found");
  // In a real app, also check that the signed-in user owns this event ID.
  data.recordQuote(eventId, quoteId);
}

const config = useMemo<Config>(
  () => ({
    client_id: clientId,
    unique_offer_id: `event-${event.id}`,
    payments: { enabled: true, button: true },
    product_config: {
      "registration-cancellation": [
        {
          customer: {
            email_address: event.customer_email,
            first_name: event.participant_first_name,
            last_name: event.participant_last_name,
            state: event.customer_state as StateType,
            postal_code: event.customer_postal_code,
          },
          policy_attributes: {
            event_start_date: event.start_date,
            event_end_date: event.end_date,
            insurable_amount: event.registration_cost_cents, // in cents
            participant: {
              first_name: event.participant_first_name,
              last_name: event.participant_last_name,
            },
          },
          metadata: {
            // Core metadata fields for analytics and customer emails
            context_name: event.organization_name,
            context_event: event.event_name,
            // Included in webhooks, so they can be matched to this item.
            registration_event_id: String(event.id),
          },
        },
      ],
    },
  }),
  [event, clientId],
);

const auth = Buffer.from(`${process.env.VI_CLIENT_ID}:${process.env.VI_CLIENT_SECRET}`).toString("base64");

const res = await fetch("https://api.verticalinsure.com/v1/webhooks", {
  method: "POST",
  headers: { Authorization: `Basic ${auth}`, "Content-Type": "application/json" },
  body: JSON.stringify({
    webhook: "https://www.example.com/api/webhooks/vertical-insure",
    events: [
      "policy_bind_complete",
      "policy_bind_failed",
      "policy_payment_failed",
      "policy_purchase_invalid",
      "policy_canceled",
      "policy_endorsed",
      "policy_documents_generated",
    ],
  }),
});

const webhook = await res.json();
console.log(`Store this securely: VI_WEBHOOK_SIGNATURE_KEY=${webhook.signature_key}`);

import { createHmac, timingSafeEqual } from "node:crypto";

export function verifyWebhookSignature(rawBody: string, signatureHeader: string | null) {
  const key = process.env.VI_WEBHOOK_SIGNATURE_KEY;
  if (!key || !signatureHeader) return false;
  const expected = createHmac("sha256", key).update(rawBody, "utf8").digest("hex");
  const received = signatureHeader.trim().toLowerCase();
  return (
    received.length === expected.length &&
    timingSafeEqual(Buffer.from(received, "utf8"), Buffer.from(expected, "utf8"))
  );
}

export async function POST(request: Request) {
  // Read the raw body first; verify before parsing.
  const rawBody = await request.text();
  if (!verifyWebhookSignature(rawBody, request.headers.get("VerticalInsure-Signature"))) {
    return Response.json({ error: "invalid signature" }, { status: 401 });
  }

  const payload: { event: string; data: unknown } = JSON.parse(rawBody);
  // ...handle the event (step 5)

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

function eventIdFromMetadata(policy: Policy) {
  const id = Number(policy.metadata?.registration_event_id);
  return Number.isInteger(id) && id > 0 ? id : null;
}

function recordPolicy(policy: Policy) {
  // Stores the latest state on the quote's item, following the rules above
  savePolicy({
    quote_id: policy.quote_id,
    event_id: eventIdFromMetadata(policy), // only used if we haven't linked this quote yet
    policy_number: policy.policy_number,
    policy_status: policy.policy_status,
    total: policy.total,
    currency: policy.currency,
    is_test: policy.is_test,
  });
}

// Inside POST, after verifying the signature:
const policy =
  payload.event === "policy_endorsed"
    ? (payload.data as { current_policy: Policy }).current_policy
    : (payload.data as Policy | null);

switch (payload.event) {
  case "policy_bind_complete": // policy issued (ACTIVE)
  case "policy_bind_failed": // purchase went through but binding failed (BIND_FAILED)
  case "policy_payment_failed": // card declined (REQUIRES_PAYMENT)
  case "policy_purchase_invalid": // batch purchase with failures (PENDING)
  case "policy_canceled": // CANCELED
  case "policy_endorsed": // policy changed; current_policy is the new version
  case "policy_documents_generated": // the policy document can now be viewed
    if (policy) recordPolicy(policy);
    break;
  default:
    // payout_* and any future events: acknowledge and ignore.
    break;
}

export default async function EventsPage() {
  const events = listEvents().map((event) => ({ event, policy: getPolicyForEvent(event.id) }));

  return (
    <table>
      <tbody>
        {events.map(({ event, policy }) => {
          const insured = policy?.policy_status === "ACTIVE";
          return (
            <tr key={event.id}>
              <td>{event.event_name}</td>
              <td>
                {insured ? (
                  <Link href={`/events/${event.id}/policy`}>View policy</Link>
                ) : (
                  <>
                    {policy && <span>{policy.policy_status.replace(/_/g, " ")}</span>}{" "}
                    <Link href={`/events/${event.id}/quote`}>Get a quote</Link>
                  </>
                )}
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

export default async function PolicyPage({ params }: PageProps<"/events/[id]/policy">) {
  const { id } = await params;
  const policy = getPolicyForEvent(Number(id));

  let documentUrl: string | null = null;
  if (policy?.policy_number) {
    try {
      // GET /v1/policies/{policy_number}/document with your API credentials
      documentUrl = await getPolicyDocumentUrl(policy.policy_number);
    } catch {
      // Not generated yet; ask the user to check back shortly.
    }
  }

  return documentUrl ? (
    <iframe src={documentUrl} title={`Policy ${policy?.policy_number}`} />
  ) : (
    <p>The policy document isn't available yet.</p>
  );
}