Headless CMS & Client Website Integration Guides

// src/lib/breeder-api.ts
const BASE_URL = "https://breeder.cloud/api/v1";

export async function getOrganizationTemplate(orgSlug: string) {
  const res = await fetch(`${BASE_URL}/organizations/${orgSlug}/template`, {
    next: { revalidate: 300 },
  });
  if (!res.ok) throw new Error("Failed to load organization template");
  const json = await res.json();
  return json.data;
}

export async function getCmsPage(orgSlug: string, pageSlug: string) {
  const res = await fetch(`${BASE_URL}/organizations/${orgSlug}/pages/${pageSlug}`, {
    next: { revalidate: 60 },
  });
  if (!res.ok) return null;
  const json = await res.json();
  return json.data;
}

// React Contact Form Component
"use client";

import { useState } from "react";

export function ContactForm({ organizationId, animalId }: { organizationId: string; animalId?: string }) {
  const [status, setStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");
  const [errorMessage, setErrorMessage] = useState("");

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("submitting");
    setErrorMessage("");

    const formData = new FormData(e.currentTarget);
    const payload = {
      organizationId,
      animalId,
      name: formData.get("name") as string,
      email: formData.get("email") as string,
      phone: (formData.get("phone") as string) || undefined,
      subject: (formData.get("subject") as string) || "General Inquiry",
      message: formData.get("message") as string,
      language: "en",
    };

    try {
      const res = await fetch("https://breeder.cloud/api/v1/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      const data = await res.json();
      if (!res.ok) {
        throw new Error(data.message || "Failed to submit contact inquiry");
      }

      setStatus("success");
    } catch (err: any) {
      setStatus("error");
      setErrorMessage(err.message || "An unexpected error occurred.");
    }
  }

  if (status === "success") {
    return (
      <div className="rounded-xl bg-emerald-50 p-6 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200">
        <h4 className="font-bold">Thank you for your message!</h4>
        <p className="mt-1 text-sm">The breeder will get back to you shortly.</p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      {status === "error" && (
        <div className="rounded-lg bg-red-50 p-3 text-sm text-red-700 dark:bg-red-950 dark:text-red-300">
          {errorMessage}
        </div>
      )}
      <div>
        <label className="block text-xs font-semibold uppercase">Your Name</label>
        <input name="name" required className="mt-1 w-full rounded-lg border p-2 text-base" />
      </div>
      <div>
        <label className="block text-xs font-semibold uppercase">Email Address</label>
        <input name="email" type="email" required className="mt-1 w-full rounded-lg border p-2 text-base" />
      </div>
      <div>
        <label className="block text-xs font-semibold uppercase">Phone (Optional)</label>
        <input name="phone" type="tel" className="mt-1 w-full rounded-lg border p-2 text-base" />
      </div>
      <div>
        <label className="block text-xs font-semibold uppercase">Message</label>
        <textarea name="message" rows={4} required className="mt-1 w-full rounded-lg border p-2 text-base" />
      </div>
      <button
        type="submit"
        disabled={status === "submitting"}
        className="rounded-lg bg-emerald-600 px-5 py-2 text-sm font-semibold text-white hover:bg-emerald-500"
      >
        {status === "submitting" ? "Sending..." : "Send Message"}
      </button>
    </form>
  );
}