// Solo staff admin area — Price List: one unit price per (product, tier,
// currency) combination, edited inline as a grid. Reached via the
// sidebar nav in AdminShell (see admin-shell.jsx). Reuses MiniField/
// ActionButton/SectionLabel/EmptyNote/adminInputStyle/adminSelectStyle
// from admin-assets-page.jsx (loaded earlier — see index.html).
const TIER_LABELS_PRICING = { gold: "Gold", platinum: "Platinum", regional_reseller: "Regional Reseller" };
function AdminPricingPage({ onNavigate }) {
const [state, setState] = useState({ status: "loading", admin: null, grid: [], tiers: [], currencies: [] });
const [savingKey, setSavingKey] = useState(null);
const [savedKey, setSavedKey] = useState(null);
const [error, setError] = useState("");
const load = () => {
Promise.all([
fetch("/api/admin/me", { credentials: "same-origin" }).then((r) => (r.ok ? r.json() : Promise.reject())),
fetch("/api/admin/price-list", { credentials: "same-origin" }).then((r) => (r.ok ? r.json() : Promise.reject())),
])
.then(([me, priceList]) => {
setState({
status: "ready", admin: me.admin,
grid: priceList.grid || [], tiers: priceList.tiers || [], currencies: priceList.currencies || [],
});
})
.catch(() => onNavigate("admin-login"));
};
useEffect(load, []); // eslint-disable-line react-hooks/exhaustive-deps -- mount-only
const saveCell = async (productId, tier, currency, unitPrice) => {
const key = `${productId}:${tier}:${currency}`;
setSavingKey(key);
setError("");
try {
const res = await fetch("/api/admin/price-list", {
method: "PUT", credentials: "same-origin",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ productId, tier, currency, unitPrice }),
});
const data = await res.json().catch(() => ({}));
if (!res.ok) { setError(data.error || "Something went wrong."); return; }
setSavedKey(key);
await load();
setTimeout(() => setSavedKey((k) => (k === key ? null : k)), 1800);
} catch {
setError("Couldn't reach the server. Check your connection and try again.");
} finally {
setSavingKey(null);
}
};
const isReadOnly = state.admin && state.admin.role !== "super_admin";
if (state.status === "loading") {
return ;
}
return (
One base price per product, per tier, per currency. This is the default price used when raising a new order — individual orders can still override the unit price or apply a discount on top.
{error && {error} }
Products ({state.grid.length})
{state.grid.length === 0 ? (
No products in the catalogue yet.
) : (
{state.grid.map((row) => (
))}
);
}
function PriceProductRow({ row, savingKey, savedKey, isReadOnly, onSave }) {
return (
{row.product.name}
{row.prices.map((tierRow) => (
{TIER_LABELS_PRICING[tierRow.tier] || tierRow.tier}
{tierRow.currencies.map((c) => (
onSave(row.product.id, tierRow.tier, c.currency, value)}
/>
))}
))}
);
}
function PriceCell({ currency, unitPrice, saving, saved, isReadOnly, onSave }) {
const [value, setValue] = useState(unitPrice === null || unitPrice === undefined ? "" : String(unitPrice));
useEffect(() => {
setValue(unitPrice === null || unitPrice === undefined ? "" : String(unitPrice));
}, [unitPrice]);
const dirty = value !== "" && Number(value) !== unitPrice;
const commit = () => {
if (!dirty) return;
const num = Number(value);
if (!Number.isFinite(num) || num < 0) return;
onSave(num);
};
return (
{currency}
Saving… }
{saved && !saving && Saved ✓ }
);
}
Object.assign(window, { AdminPricingPage });