// client.jsx — Client-facing onboarding portal
// ─────────────────────────────────────────────────────────────────────
// First-visit welcome tour — teaches the client how to navigate
// ─────────────────────────────────────────────────────────────────────
function ClientTour({ open, onClose, freelancer, steps }) {
const first = (freelancer.name || "your contact").split(" ")[0];
// Describe only the actions this client will actually do (respects skipped steps).
const ids = (steps || []).map(s => s.id);
const actions = [];
if (ids.includes("agree")) actions.push("review and sign your agreement");
if (ids.includes("invoice")) actions.push("pay your invoice");
if (ids.includes("files")) actions.push("share your brand assets");
if (ids.includes("kickoff")) actions.push("book a kickoff time");
const actionText = actions.length === 0
? "Work through each step right here — no email back-and-forth."
: actions.length === 1
? `You'll ${actions[0]}, right here — no email back-and-forth.`
: `You'll ${actions.slice(0, -1).join(", ")}, and ${actions[actions.length - 1]} — all in this one place. No email back-and-forth.`;
const slides = [
{ icon: Icon.layers, title: "Welcome to your portal", body: `This is your private space to get set up with ${freelancer.brand}. It only takes a few minutes — here's how it works.` },
{ icon: Icon.arrow, title: "Follow the steps on the left", body: "Your onboarding is split into a few short steps. Work through them top to bottom — the highlighted one is where you are now." },
{ icon: Icon.check, title: "Everything saves automatically", body: "Close the tab and come back whenever — your progress is saved. The green dot at the top means you're securely connected." },
{ icon: Icon.signature, title: "Everything in one place", body: actionText },
{ icon: Icon.mail, title: `Questions? Message ${first}`, body: `Use the “Send a message” button at the bottom-left anytime. Replies usually come within a few hours.` },
];
const [i, setI] = React.useState(0);
if (!open) return null;
const s = slides[i];
const last = i === slides.length - 1;
const Ico = s.icon;
const finish = () => { try { localStorage.setItem("relay_tour_seen", "1"); } catch {} setI(0); onClose(); };
return (
);
}
function ClientPortal({ clientId }) {
const { clients, template, freelancer, updateClient } = useApp();
// Strict match only — never fall back to clients[0]. If the slug in the URL
// doesn't resolve, the "Portal not available" screen below should render.
const client = clients.find(c => c.id === clientId) || null;
// Only show steps that are enabled in the template AND not skipped for this specific client
const steps = template.steps.filter(s => s.enabled !== false && !((client?.skippedSteps) || []).includes(s.id));
// Hooks must run unconditionally — use optional chaining so they're null-safe.
const [step, setStep] = React.useState(Math.min((client?.progress) || 0, steps.length));
const [showTour, setShowTour] = React.useState(() => {
try { return localStorage.getItem("relay_tour_seen") !== "1"; } catch { return true; }
});
React.useEffect(() => { setStep(Math.min((client?.progress) || 0, steps.length)); }, [clientId, steps.length]);
// Admin email notifications — fire once per event per client.
// "opened" runs on first mount; step completions run from `advance` below.
const notifyOnce = React.useCallback(async (event, extra) => {
if (!client) return;
const notified = client.notified || {};
if (notified[event]) return; // already sent — skip
if (!window.notifyAdminOfClientEvent) return;
// Merge any just-saved fields (e.g. signature) into the client object passed
// to the email builder, since React state hasn't refreshed within this tick.
const clientForEmail = extra ? { ...client, ...extra } : client;
const ok = await window.notifyAdminOfClientEvent({ client: clientForEmail, event, freelancer });
if (ok) {
updateClient(client.id, { notified: { ...notified, [event]: new Date().toISOString() } });
}
}, [client, freelancer, updateClient]);
React.useEffect(() => {
if (!client) return;
// Track portal visit (fires every time they load the portal)
const visits = client.portalVisits || [];
const lastVisit = visits.length > 0 ? visits[visits.length - 1] : null;
const now = new Date().toISOString();
// Only add new visit if last one was >5 min ago (debounce rapid refreshes)
if (!lastVisit || (new Date(now) - new Date(lastVisit.ts) > 5 * 60 * 1000)) {
updateClient(client.id, { portalVisits: [...visits, { ts: now }] });
}
// Notify admin of first portal open
if (!(client.notified && client.notified.opened)) notifyOnce("opened");
}, [client?.id]);
// No client to show (e.g. all deleted) — guard AFTER hooks
if (!client) {
return (
Portal not available
This onboarding link isn't active. Please contact {freelancer.name} for an updated link.
);
}
// `extraPatch` lets a step persist extra fields to the client at the same
// moment it advances (e.g. the Agreement step saves the signature record).
const advance = (extraPatch) => {
const completedId = steps[step]?.id;
const next = Math.min(steps.length, step + 1);
setStep(next);
const patch = { progress: Math.max(client.progress, next) };
if (extraPatch && typeof extraPatch === "object" && !extraPatch.nativeEvent) {
Object.assign(patch, extraPatch);
}
updateClient(client.id, patch);
// Map step id → notification event
const EVENT_FOR_STEP = { intake: "intake", agree: "signed", invoice: "paid" };
const evt = EVENT_FOR_STEP[completedId];
if (evt) notifyOnce(evt, extraPatch);
};
// Map current step index → step id, then render the right view
const currentId = steps[step]?.id;
return (