import { Button, Card, Chip, Input, Separator, toast } from "@heroui/react"; import { Icon } from "@iconify/react"; import axios from "axios"; import AdminLayout from "components/layout/AdminLayout"; import Link from "next/link"; import { useCallback, useEffect, useRef, useState } from "react"; import EditModal from "./EditModal"; import DeleteModal from "./DeleteModal"; import ImportModal from "./ImportModal"; import { CATEGORY_LABELS, formatPrice, indexRegistrars, registrarName, TLD_CATEGORIES, } from "@/lib/tld-pricing"; import { ADMIN_SELECT_SM } from "./styles"; const PER_PAGE = 25; const SORTS = [ { value: "popularity", label: "Popularity" }, { value: "tld", label: "A-Z" }, { value: "registration.price", label: "Registration price" }, { value: "renewal.price", label: "Renewal price" }, { value: "transfer.price", label: "Transfer price" }, ]; // Admin editor for the TLD price comparison table. Rows are paginated straight // from the API — the table holds ~1,400 extensions, so nothing is ever loaded // into the browser in bulk. export default function TldPricing() { const [rows, setRows] = useState([]); const [registrars, setRegistrars] = useState({}); const [symbol, setSymbol] = useState("$"); const [total, setTotal] = useState(0); const [totalPages, setTotalPages] = useState(1); const [fetching, setFetching] = useState(true); const [search, setSearch] = useState(""); const [debouncedSearch, setDebouncedSearch] = useState(""); const [category, setCategory] = useState("all"); const [sort, setSort] = useState("popularity"); const [page, setPage] = useState(1); const [editOpen, setEditOpen] = useState(false); const [editRow, setEditRow] = useState(null); const [saving, setSaving] = useState(false); const [deleteOpen, setDeleteOpen] = useState(false); const [deleteTld, setDeleteTld] = useState(""); const [deleting, setDeleting] = useState(false); const [importOpen, setImportOpen] = useState(false); const [importing, setImporting] = useState(false); const requestId = useRef(0); useEffect(() => { axios .get("/api/tld-pricing/config") .then((res) => { setRegistrars(indexRegistrars(res.data?.registrars)); setSymbol(res.data?.settings?.symbol || "$"); }) .catch((err) => console.log(err)); }, []); useEffect(() => { const id = setTimeout(() => setDebouncedSearch(search), 300); return () => clearTimeout(id); }, [search]); useEffect(() => { setPage(1); }, [debouncedSearch, category, sort]); const load = useCallback(() => { const id = ++requestId.current; setFetching(true); axios .get("/api/tld-pricing", { params: { search: debouncedSearch, category, sort, dir: sort === "popularity" ? "desc" : "asc", page, limit: PER_PAGE, includeDisabled: 1, }, }) .then((res) => { if (id !== requestId.current) return; setRows(Array.isArray(res.data?.rows) ? res.data.rows : []); setTotal(res.data?.total || 0); setTotalPages(res.data?.totalPages || 1); }) .catch((err) => { if (id !== requestId.current) return; console.log(err); setRows([]); }) .finally(() => { if (id === requestId.current) setFetching(false); }); }, [debouncedSearch, category, sort, page]); useEffect(() => { load(); }, [load]); const handleSave = (form) => { setSaving(true); axios .post("/api/tld-pricing", { row: form }) .then((res) => { toast.success(res.data?.message || "Saved"); setEditOpen(false); load(); }) .catch((err) => { console.log(err); toast.error(err?.response?.data?.message || "Some error occurred."); }) .finally(() => setSaving(false)); }; const handleDelete = () => { setDeleting(true); axios .delete("/api/tld-pricing", { params: { tld: deleteTld } }) .then((res) => { toast.success(res.data?.message || "Deleted"); setDeleteOpen(false); load(); }) .catch((err) => { console.log(err); toast.error("Some error occurred."); }) .finally(() => setDeleting(false)); }; const handleImport = (mode) => { setImporting(true); axios .post("/api/tld-pricing/seed", { mode }) .then((res) => { toast.success(res.data?.message || "Imported"); setImportOpen(false); setPage(1); load(); }) .catch((err) => { console.log(err); toast.error(err?.response?.data?.message || "Import failed."); }) .finally(() => setImporting(false)); }; // Flip a row's visibility without opening the editor. const toggleEnabled = (row) => { const next = { ...row, enabled: !row.enabled }; setRows((prev) => prev.map((r) => (r.tld === row.tld ? next : r))); axios.post("/api/tld-pricing", { row: next }).catch((err) => { console.log(err); toast.error("Could not update visibility."); setRows((prev) => prev.map((r) => (r.tld === row.tld ? row : r))); }); }; const priceCell = (offer) => { const price = formatPrice(offer?.price, symbol); if (!price) return —; return (
{price} {registrarName(registrars, offer?.registrar) || "—"}
); }; return (

TLD Pricing

Registration, renewal and transfer prices shown in the price comparison table on the home page.

setSearch(e.target.value)} placeholder="Search extension…" />
{TLD_CATEGORIES.map((c) => ( ))}
{fetching && rows.length === 0 ? (
Loading TLD pricing…
) : rows.length === 0 ? (

{debouncedSearch || category !== "all" ? "No extension matches this search." : "The pricing table is empty. Use Import TLDs to load every extension from the IANA root zone with seed pricing you can edit."}

{!debouncedSearch && category === "all" && ( )}
) : (
{rows.map((row) => ( ))}
TLD Registration Renewal Transfer Best value Visible Actions
.{row.unicode || row.tld} {CATEGORY_LABELS[row.category] || row.category}
{priceCell(row.registration)} {priceCell(row.renewal)} {priceCell(row.transfer)}
{registrarName(registrars, row.bestValue?.registrar) || ( — )} {formatPrice(row.bestValue?.registration, symbol) || "—"}{" "} /{" "} {formatPrice(row.bestValue?.renewal, symbol) || "—"}
)} {total.toLocaleString()} extension{total === 1 ? "" : "s"} · page{" "} {page} of {totalPages}
); }