110 lines
3.4 KiB
TypeScript
110 lines
3.4 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { ShieldHalf } from "lucide-react";
|
|
import { api, clearToken } from "@/lib/api";
|
|
|
|
export default function Onboarding() {
|
|
const r = useRouter();
|
|
const [form, setForm] = useState({ name: "", gstin: "", phone: "",address: "" });
|
|
const [err, setErr] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
const [ready, setReady] = useState(false);
|
|
|
|
// If the user already has an org (or is a product admin), don't show onboarding.
|
|
useEffect(() => {
|
|
api("/me")
|
|
.then((me) => {
|
|
if (me.is_product_admin) r.replace("/admin");
|
|
else if (me.has_org) r.replace("/dashboard");
|
|
else setReady(true);
|
|
})
|
|
.catch(() => { clearToken(); r.replace("/login"); });
|
|
}, [r]);
|
|
|
|
async function submit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!form.name.trim()) { setErr("Organization name is required."); return; }
|
|
setErr(""); setBusy(true);
|
|
try {
|
|
await api("/organization", { method: "POST", body: JSON.stringify(form) });
|
|
r.push("/dashboard");
|
|
} catch (e: any) {
|
|
// Already has an org → just go to the dashboard.
|
|
if (e.status === 409) { r.replace("/dashboard"); return; }
|
|
setErr(typeof e.detail === "string" ? e.detail : "Failed to create organization");
|
|
} finally { setBusy(false); }
|
|
}
|
|
const set = (k: string) => (e: any) => setForm({ ...form, [k]: e.target.value });
|
|
|
|
if (!ready)
|
|
return <div className="min-h-screen grid place-items-center text-slate-400">Loading…</div>;
|
|
|
|
return (
|
|
<div className="min-h-screen grid place-items-center bg-slate-50 px-4">
|
|
<div className="w-full max-w-md">
|
|
<div className="flex items-center justify-center gap-2 font-extrabold text-xl mb-2">
|
|
<span className="h-9 w-9 rounded-lg bg-brand-600 text-white grid place-items-center">
|
|
<ShieldHalf className="h-5 w-5" />
|
|
</span>
|
|
VerifyPack
|
|
</div>
|
|
<div className="card p-8">
|
|
<h1 className="text-2xl font-extrabold text-center">Create your organization</h1>
|
|
<p className="text-slate-500 text-sm text-center mt-1">
|
|
Set up your brand workspace to get started.
|
|
</p>
|
|
<form onSubmit={submit} className="mt-6 space-y-4">
|
|
<Field
|
|
label="Organization name"
|
|
value={form.name}
|
|
onChange={set("name")}
|
|
required
|
|
placeholder="e.g. ABC Pharma Pvt Ltd"
|
|
/>
|
|
|
|
<Field
|
|
label="GSTIN (optional)"
|
|
value={form.gstin}
|
|
onChange={set("gstin")}
|
|
placeholder="29ABCDE1234F1Z5"
|
|
/>
|
|
|
|
<Field
|
|
label="Phone (optional)"
|
|
value={form.phone}
|
|
onChange={set("phone")}
|
|
/>
|
|
|
|
<Field
|
|
label="Address (optional)"
|
|
value={form.address}
|
|
onChange={set("address")}
|
|
placeholder="Enter organization address"
|
|
/>
|
|
|
|
{err && <p className="text-sm text-rose-600">{err}</p>}
|
|
|
|
<button
|
|
disabled={busy}
|
|
className="w-full bg-brand-600 text-white py-3 rounded-full font-semibold disabled:opacity-60"
|
|
>
|
|
{busy ? "Creating…" : "Create & continue"}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Field({ label, ...props }: any) {
|
|
return (
|
|
<label className="block">
|
|
<span className="text-sm font-medium text-slate-700">{label}</span>
|
|
<input {...props}
|
|
className="mt-1 w-full px-3 py-2.5 rounded-lg border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500/30" />
|
|
</label>
|
|
);
|
|
}
|