// Reseller portal — Staff. The reseller's OWN company's teammates (see
// routes/portal-staff.ts) — entirely separate from Solo's internal
// admin_users (admin-staff-page.jsx). Confirmed with the customer:
// "keep this simple for now" + "this is customer staff only".
//
// Any signed-in reseller (member or company_admin) can VIEW the list;
// only a company_admin (or is_solo_staff "viewing as" this company) can
// invite or remove — matches routes/portal-staff.ts's
// companyAdminGateError exactly. A plain member sees a clean read-only
// list with no controls at all.
//
// v1 has no invite email (see backend header comment) — inviting a
// teammate creates a `pending` user row that lands in Solo staff's
// existing admin Users approval queue, exactly like a public signup.
//
// Reuses FieldBlock/DarkInput (reseller-login-page.jsx) and the same
// loadMe/handleSwitchCompany pattern as every other reseller page.
function ResellerStaffPage({ onNavigate }) {
const [state, setState] = useState({ status: "loading", user: null, company: null, isSoloStaff: false });
const [companies, setCompanies] = useState([]);
const [staff, setStaff] = useState({ status: "loading", items: [], myUserId: null, myRole: "member" });
const [showInvite, setShowInvite] = useState(false);
const [busyId, setBusyId] = useState(null);
const loadStaff = () => {
fetch("/api/portal/staff", { credentials: "same-origin" })
.then((r) => (r.ok ? r.json() : { staff: [] }))
.then((data) => setStaff({
status: "ready", items: data.staff || [],
myUserId: data.myUserId, myRole: data.myRole || "member",
}))
.catch(() => setStaff({ status: "ready", items: [], myUserId: null, myRole: "member" }));
};
const loadMe = (onDone) => {
fetch("/api/portal/me", { credentials: "same-origin" })
.then(async (r) => {
if (!r.ok) throw new Error("not signed in");
return r.json();
})
.then((data) => {
setState({ status: "ready", user: data.user, company: data.company, isSoloStaff: !!data.isSoloStaff });
if (data.isSoloStaff) {
fetch("/api/portal/companies", { credentials: "same-origin" })
.then((r) => (r.ok ? r.json() : { companies: [] }))
.then((d) => setCompanies(d.companies || []))
.catch(() => setCompanies([]));
}
if (onDone) onDone();
})
.catch(() => onNavigate("reseller-login"));
};
const handleSwitchCompany = (companyId) => {
fetch("/api/portal/switch-company", {
method: "POST", credentials: "same-origin",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ companyId }),
})
.then((r) => (r.ok ? r.json() : Promise.reject()))
.then(() => loadMe(loadStaff))
.catch(() => { /* switch failed silently */ });
};
useEffect(() => {
loadMe();
loadStaff();
}, []); // eslint-disable-line react-hooks/exhaustive-deps -- mount-only
const removeStaff = async (row) => {
if (!window.confirm(`Remove ${row.name} from your team? Their access will be suspended.`)) return;
setBusyId(row.id);
try {
const res = await fetch(`/api/portal/staff/${row.id}/remove`, { method: "POST", credentials: "same-origin" });
const data = await res.json().catch(() => ({}));
if (!res.ok) { window.alert(data.error || "Something went wrong."); return; }
loadStaff();
} finally { setBusyId(null); }
};
if (state.status === "loading") {
return ;
}
const { user, company, isSoloStaff } = state;
const canManage = isSoloStaff || staff.myRole === "company_admin";
return (
setShowInvite(true)} data-testid="staff-invite-btn"
style={{
background: "var(--pt-accent-bg)", color: "var(--pt-accent-fg)",
border: "1px solid var(--pt-accent-bg)", padding: "12px 20px", cursor: "pointer",
fontFamily: "var(--font-body)", fontSize: 11.5, fontWeight: 500,
letterSpacing: "0.14em", textTransform: "uppercase",
}}
>+ Invite teammate
) : undefined}
>
{canManage
? "Manage who at your company can sign in to the portal."
: "Your teammates with portal access. Only your company admin can invite or remove people."}