1099 lines
51 KiB
TypeScript
1099 lines
51 KiB
TypeScript
|
// components/RegistrationWizard.tsx
|
||
|
|
// Client Component. New-company registration wizard.
|
||
|
|
|
||
|
|
"use client";
|
||
|
|
|
||
|
|
import { useState } from "react";
|
||
|
|
import type { DirectorInput, ShareholderInput, CompanyInput, WizardState } from "@/lib/wizard-types";
|
||
|
|
import DirectorStep from "@/components/DirectorStep";
|
||
|
|
import ActionButton from "@/components/ActionButton";
|
||
|
|
|
||
|
|
const SA_PROVINCES = [
|
||
|
|
"Eastern Cape", "Free State", "Gauteng", "KwaZulu-Natal",
|
||
|
|
"Limpopo", "Mpumalanga", "Northern Cape", "North West", "Western Cape",
|
||
|
|
];
|
||
|
|
|
||
|
|
const MONTHS = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
|
||
|
|
|
||
|
|
const STEPS = [
|
||
|
|
{ id: "directors", label: "Directors" },
|
||
|
|
{ id: "company", label: "Company" },
|
||
|
|
{ id: "shareholders",label: "Shareholders" },
|
||
|
|
{ id: "review", label: "Review" },
|
||
|
|
{ id: "step2", label: "Step 2" },
|
||
|
|
] as const;
|
||
|
|
type StepId = (typeof STEPS)[number]["id"];
|
||
|
|
|
||
|
|
function uid(): string {
|
||
|
|
return typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
|
||
|
|
? crypto.randomUUID()
|
||
|
|
: Math.random().toString(36).slice(2) + Date.now().toString(36);
|
||
|
|
}
|
||
|
|
|
||
|
|
function blankDirector(): DirectorInput {
|
||
|
|
return {
|
||
|
|
ui_key: uid(),
|
||
|
|
first_names: "", surname: "", id_no: "", date_of_birth: "",
|
||
|
|
residential_address_line_1: "", residential_address_line_2: "",
|
||
|
|
residential_town_city: "", residential_province: "", residential_postal_code: "",
|
||
|
|
postal_address_line_1: "", postal_address_line_2: "",
|
||
|
|
postal_town_city: "", postal_province: "", postal_postal_code: "",
|
||
|
|
cell_phone: "", email: "",
|
||
|
|
residential_address: "", postal_address: "",
|
||
|
|
section69: {
|
||
|
|
q1_probation: null, q2_court_prohibited: null,
|
||
|
|
q3_unrehabilitated_insolvent: null, q4_public_regulation: null,
|
||
|
|
q5_removed_from_office: null, q6_convicted_offence: null,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function blankShareholder(): ShareholderInput {
|
||
|
|
return { ui_key: uid(), is_director: false, director_index: null, name: "", id_or_entity_no: "", quantity_of_shares: 0, share_percent: 0 };
|
||
|
|
}
|
||
|
|
|
||
|
|
function emptyCompany(): CompanyInput {
|
||
|
|
return {
|
||
|
|
proposed_name_1: "", proposed_name_2: "", proposed_name_3: "", proposed_name_4: "",
|
||
|
|
company_type: "",
|
||
|
|
physical_address_line_1: "", physical_address_line_2: "",
|
||
|
|
physical_town_city: "", physical_province: "", physical_postal_code: "",
|
||
|
|
postal_address_line_1: "", postal_address_line_2: "",
|
||
|
|
postal_town_city: "", postal_province: "", postal_postal_code: "",
|
||
|
|
financial_year_end: 2, // February default
|
||
|
|
authorised_shares: "1000",
|
||
|
|
value_per_share: 1, // R1.00 default
|
||
|
|
company_cell: "", company_email: "",
|
||
|
|
public_officer: "", company_secretary: "",
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Company Step ──────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
function CompanyStep({
|
||
|
|
company,
|
||
|
|
directors,
|
||
|
|
onUpdate,
|
||
|
|
}: {
|
||
|
|
company: CompanyInput;
|
||
|
|
directors: DirectorInput[];
|
||
|
|
onUpdate: (p: Partial<CompanyInput>) => void;
|
||
|
|
}) {
|
||
|
|
const set = (p: Partial<CompanyInput>) => onUpdate(p);
|
||
|
|
|
||
|
|
const filledDirectors = directors.filter((d) => d.first_names.trim() && d.surname.trim());
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
{/* Proposed names */}
|
||
|
|
<div className="bg-surface-warm border border-border rounded-lg p-5 space-y-3">
|
||
|
|
<p className="text-sm font-semibold text-fg">Proposed company names</p>
|
||
|
|
{([
|
||
|
|
{ key: "proposed_name_1" as const, placeholder: "First choice" },
|
||
|
|
{ key: "proposed_name_2" as const, placeholder: "Second choice" },
|
||
|
|
{ key: "proposed_name_3" as const, placeholder: "Third choice" },
|
||
|
|
{ key: "proposed_name_4" as const, placeholder: "Fourth choice (optional)" },
|
||
|
|
]).map(({ key, placeholder }) => (
|
||
|
|
<div key={key}>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">{placeholder}</label>
|
||
|
|
<input
|
||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors"
|
||
|
|
placeholder="Company name"
|
||
|
|
value={company[key]}
|
||
|
|
onChange={(e) => set({ [key]: e.target.value })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Company type */}
|
||
|
|
<div className="bg-surface-warm border border-border rounded-lg p-5">
|
||
|
|
<label className="text-xs font-semibold text-muted mb-2 block">Type of company</label>
|
||
|
|
<select
|
||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg focus:outline-none focus:border-accent transition-colors cursor-pointer"
|
||
|
|
value={company.company_type}
|
||
|
|
onChange={(e) => set({ company_type: e.target.value as CompanyInput["company_type"] })}
|
||
|
|
>
|
||
|
|
<option value="">— Select type —</option>
|
||
|
|
<option value="pty_ltd">Private Company — (PTY) LTD</option>
|
||
|
|
<option value="npc">Non Profit Company — NPC</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Addresses */}
|
||
|
|
<div className="bg-surface-warm border border-border rounded-lg p-5 space-y-3">
|
||
|
|
<p className="text-sm font-semibold text-fg">Addresses</p>
|
||
|
|
|
||
|
|
{/* Physical / trading address */}
|
||
|
|
<div className="bg-surface border border-border rounded p-4 space-y-3">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<p className="text-xs font-bold text-accent uppercase tracking-wider">Physical / trading address</p>
|
||
|
|
{filledDirectors.length > 0 && (
|
||
|
|
<select
|
||
|
|
className="text-xs py-1 bg-surface-warm border border-border rounded px-2 text-accent focus:outline-none focus:border-accent cursor-pointer"
|
||
|
|
value=""
|
||
|
|
onChange={(e) => {
|
||
|
|
const idx = Number(e.target.value);
|
||
|
|
if (!isNaN(idx)) {
|
||
|
|
const d = directors[idx];
|
||
|
|
set({
|
||
|
|
physical_address_line_1: d.residential_address_line_1,
|
||
|
|
physical_address_line_2: d.residential_address_line_2,
|
||
|
|
physical_town_city: d.residential_town_city,
|
||
|
|
physical_province: d.residential_province,
|
||
|
|
physical_postal_code: d.residential_postal_code,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<option value="">Same as director ↓</option>
|
||
|
|
{directors.map((d, i) => (
|
||
|
|
<option key={d.ui_key} value={i}>
|
||
|
|
{d.first_names} {d.surname} — residential
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">Address line 1</label>
|
||
|
|
<input className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors" placeholder="Street number and name" value={company.physical_address_line_1} onChange={(e) => set({ physical_address_line_1: e.target.value })} />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">Address line 2 <span className="text-muted font-normal">(optional)</span></label>
|
||
|
|
<input className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors" placeholder="Suburb, building, unit" value={company.physical_address_line_2} onChange={(e) => set({ physical_address_line_2: e.target.value })} />
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">Town / City</label>
|
||
|
|
<input className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors" placeholder="e.g. Centurion" value={company.physical_town_city} onChange={(e) => set({ physical_town_city: e.target.value })} />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">Province</label>
|
||
|
|
<select
|
||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg focus:outline-none focus:border-accent transition-colors"
|
||
|
|
value={company.physical_province}
|
||
|
|
onChange={(e) => set({ physical_province: e.target.value })}
|
||
|
|
>
|
||
|
|
<option value="">— Select province —</option>
|
||
|
|
{SA_PROVINCES.map((p) => <option key={p} value={p}>{p}</option>)}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">Postal code</label>
|
||
|
|
<input className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors" placeholder="e.g. 0157" value={company.physical_postal_code} onChange={(e) => set({ physical_postal_code: e.target.value })} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Postal address */}
|
||
|
|
<div className="bg-surface border border-border rounded p-4 space-y-3">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<p className="text-xs font-bold text-accent uppercase tracking-wider">Postal address</p>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<button type="button" className="text-xs text-accent hover:underline"
|
||
|
|
onClick={() => set({
|
||
|
|
postal_address_line_1: company.physical_address_line_1,
|
||
|
|
postal_address_line_2: company.physical_address_line_2,
|
||
|
|
postal_town_city: company.physical_town_city,
|
||
|
|
postal_province: company.physical_province,
|
||
|
|
postal_postal_code: company.physical_postal_code,
|
||
|
|
})}>
|
||
|
|
Copy physical
|
||
|
|
</button>
|
||
|
|
{filledDirectors.length > 0 && (
|
||
|
|
<select
|
||
|
|
className="text-xs py-1 bg-surface-warm border border-border rounded px-2 text-accent focus:outline-none focus:border-accent cursor-pointer"
|
||
|
|
value=""
|
||
|
|
onChange={(e) => {
|
||
|
|
const idx = Number(e.target.value);
|
||
|
|
if (!isNaN(idx)) {
|
||
|
|
const d = directors[idx];
|
||
|
|
set({
|
||
|
|
postal_address_line_1: d.postal_address_line_1 || d.residential_address_line_1,
|
||
|
|
postal_address_line_2: d.postal_address_line_2 || d.residential_address_line_2,
|
||
|
|
postal_town_city: d.postal_town_city || d.residential_town_city,
|
||
|
|
postal_province: d.postal_province || d.residential_province,
|
||
|
|
postal_postal_code: d.postal_postal_code || d.residential_postal_code,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<option value="">Same as director ↓</option>
|
||
|
|
{directors.map((d, i) => (
|
||
|
|
<option key={d.ui_key} value={i}>
|
||
|
|
{d.first_names} {d.surname} — postal
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">Address line 1</label>
|
||
|
|
<input className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors" placeholder="PO Box or street" value={company.postal_address_line_1} onChange={(e) => set({ postal_address_line_1: e.target.value })} />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">Address line 2 <span className="text-muted font-normal">(optional)</span></label>
|
||
|
|
<input className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors" placeholder="PO Box number, suburb" value={company.postal_address_line_2} onChange={(e) => set({ postal_address_line_2: e.target.value })} />
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">Town / City</label>
|
||
|
|
<input className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors" placeholder="e.g. Pretoria" value={company.postal_town_city} onChange={(e) => set({ postal_town_city: e.target.value })} />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">Province</label>
|
||
|
|
<select
|
||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg focus:outline-none focus:border-accent transition-colors"
|
||
|
|
value={company.postal_province}
|
||
|
|
onChange={(e) => set({ postal_province: e.target.value })}
|
||
|
|
>
|
||
|
|
<option value="">— Select province —</option>
|
||
|
|
{SA_PROVINCES.map((p) => <option key={p} value={p}>{p}</option>)}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">Postal code</label>
|
||
|
|
<input className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors" placeholder="e.g. 0001" value={company.postal_postal_code} onChange={(e) => set({ postal_postal_code: e.target.value })} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Financial year end + share capital */}
|
||
|
|
<div className="bg-surface-warm border border-border rounded-lg p-5">
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">Financial year end</label>
|
||
|
|
<select
|
||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg focus:outline-none focus:border-accent transition-colors"
|
||
|
|
value={company.financial_year_end}
|
||
|
|
onChange={(e) => set({ financial_year_end: Number(e.target.value) })}
|
||
|
|
>
|
||
|
|
{MONTHS.map((m, i) => <option key={m} value={i + 1}>{m}</option>)}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">Authorised share capital</label>
|
||
|
|
<select
|
||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg focus:outline-none focus:border-accent transition-colors"
|
||
|
|
value={company.authorised_shares}
|
||
|
|
onChange={(e) => set({ authorised_shares: e.target.value as "100" | "1000" })}
|
||
|
|
>
|
||
|
|
<option value="100">100 Shares</option>
|
||
|
|
<option value="1000">1000 Shares</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">
|
||
|
|
Value per share (R)
|
||
|
|
</label>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-sm text-muted">R</span>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
min={0}
|
||
|
|
step={0.01}
|
||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg focus:outline-none focus:border-accent transition-colors"
|
||
|
|
placeholder="1.00"
|
||
|
|
value={company.value_per_share === 0 ? "" : company.value_per_share}
|
||
|
|
onChange={(e) => {
|
||
|
|
const v = parseFloat(e.target.value);
|
||
|
|
set({ value_per_share: isNaN(v) ? 0 : v });
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Contact + officers */}
|
||
|
|
<div className="bg-surface-warm border border-border rounded-lg p-5 space-y-4">
|
||
|
|
<p className="text-sm font-semibold text-fg">Company contact & officers</p>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
|
|
{/* Company cell */}
|
||
|
|
<div>
|
||
|
|
<div className="flex items-center justify-between mb-1">
|
||
|
|
<label className="text-xs font-semibold text-muted">Company cell</label>
|
||
|
|
{filledDirectors.length > 0 && (
|
||
|
|
<select
|
||
|
|
className="text-xs py-1 bg-surface border border-border rounded px-2 text-accent focus:outline-none focus:border-accent"
|
||
|
|
value=""
|
||
|
|
onChange={(e) => {
|
||
|
|
const idx = Number(e.target.value);
|
||
|
|
if (!isNaN(idx)) set({ company_cell: directors[idx]?.cell_phone || "" });
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<option value="">Use director cell ↓</option>
|
||
|
|
{directors.map((d, i) => (
|
||
|
|
<option key={d.ui_key} value={i}>{d.first_names} {d.surname}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<input
|
||
|
|
type="tel"
|
||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors"
|
||
|
|
placeholder="e.g. 0871234567"
|
||
|
|
value={company.company_cell}
|
||
|
|
onChange={(e) => set({ company_cell: e.target.value })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Company email */}
|
||
|
|
<div>
|
||
|
|
<div className="flex items-center justify-between mb-1">
|
||
|
|
<label className="text-xs font-semibold text-muted">Company email</label>
|
||
|
|
{filledDirectors.length > 0 && (
|
||
|
|
<select
|
||
|
|
className="text-xs py-1 bg-surface border border-border rounded px-2 text-accent focus:outline-none focus:border-accent"
|
||
|
|
value=""
|
||
|
|
onChange={(e) => {
|
||
|
|
const idx = Number(e.target.value);
|
||
|
|
if (!isNaN(idx)) set({ company_email: directors[idx]?.email || "" });
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<option value="">Use director email ↓</option>
|
||
|
|
{directors.map((d, i) => (
|
||
|
|
<option key={d.ui_key} value={i}>{d.first_names} {d.surname}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<input
|
||
|
|
type="email"
|
||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors"
|
||
|
|
placeholder="company@domain.co.za"
|
||
|
|
value={company.company_email}
|
||
|
|
onChange={(e) => set({ company_email: e.target.value })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Public officer + secretary (not compulsory) */}
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">
|
||
|
|
Public officer{" "}
|
||
|
|
<span className="text-muted font-normal">(optional)</span>
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors"
|
||
|
|
placeholder="Full name"
|
||
|
|
value={company.public_officer}
|
||
|
|
onChange={(e) => set({ public_officer: e.target.value })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">
|
||
|
|
Company secretary{" "}
|
||
|
|
<span className="text-muted font-normal">(optional)</span>
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors"
|
||
|
|
placeholder="Full name"
|
||
|
|
value={company.company_secretary}
|
||
|
|
onChange={(e) => set({ company_secretary: e.target.value })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Shareholder Step ─────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
function ShareholderStep({ state, onUpdate }: { state: WizardState; onUpdate: (s: WizardState) => void }) {
|
||
|
|
const updateSH = (i: number, patch: Partial<ShareholderInput>) => {
|
||
|
|
const shareholders = [...state.shareholders];
|
||
|
|
shareholders[i] = { ...shareholders[i], ...patch };
|
||
|
|
onUpdate({ ...state, shareholders });
|
||
|
|
};
|
||
|
|
|
||
|
|
const totalPct = state.shareholders.reduce((s, sh) => s + (sh.share_percent || 0), 0);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
<div className="bg-surface-warm border border-border rounded-lg p-5">
|
||
|
|
<p className="text-sm font-semibold text-fg mb-3">How many shareholders?</p>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
{[1, 2, 3, 4, 5].map((n) => (
|
||
|
|
<button
|
||
|
|
key={n}
|
||
|
|
type="button"
|
||
|
|
onClick={() => {
|
||
|
|
let shareholders = [...state.shareholders];
|
||
|
|
if (n > shareholders.length) {
|
||
|
|
while (shareholders.length < n) shareholders.push(blankShareholder());
|
||
|
|
} else {
|
||
|
|
shareholders = shareholders.slice(0, n);
|
||
|
|
}
|
||
|
|
onUpdate({ ...state, shareholders });
|
||
|
|
}}
|
||
|
|
className={
|
||
|
|
"w-10 h-10 rounded border font-semibold text-sm transition-colors " +
|
||
|
|
(state.shareholders.length === n ? "bg-accent text-accent-on border-transparent" : "bg-surface border-border text-muted hover:text-fg")
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{n}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<p className="text-sm mt-2">
|
||
|
|
Total: <strong className={totalPct === 100 ? "text-success" : "text-muted"}>{totalPct}%</strong>
|
||
|
|
{totalPct !== 100 && <span className="ml-1 text-muted text-xs">(100% recommended but optional)</span>}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{state.shareholders.map((sh, i) => (
|
||
|
|
<div key={sh.ui_key} className="border border-border rounded-lg overflow-hidden">
|
||
|
|
<div className="bg-surface-warm border-b border-border px-5 py-3">
|
||
|
|
<div className="flex items-center justify-between flex-wrap gap-2">
|
||
|
|
<p className="text-sm font-bold text-fg">Shareholder {i + 1}</p>
|
||
|
|
{state.directors.length > 0 && (
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-xs text-muted">Same as director:</span>
|
||
|
|
<select
|
||
|
|
className="text-xs py-1 bg-surface border border-border rounded px-2 text-fg focus:outline-none focus:border-accent"
|
||
|
|
value={sh.is_director ? String(sh.director_index ?? "") : ""}
|
||
|
|
onChange={(e) => {
|
||
|
|
const idx = Number(e.target.value);
|
||
|
|
if (!isNaN(idx) && state.directors[idx]) {
|
||
|
|
updateSH(i, {
|
||
|
|
is_director: true,
|
||
|
|
director_index: idx,
|
||
|
|
name: (state.directors[idx].first_names + " " + state.directors[idx].surname).trim(),
|
||
|
|
id_or_entity_no: state.directors[idx].id_no,
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
updateSH(i, { is_director: false, director_index: null, name: "", id_or_entity_no: "" });
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<option value="">— Not a director —</option>
|
||
|
|
{state.directors.map((d, j) => (
|
||
|
|
<option key={d.ui_key} value={j}>
|
||
|
|
{j + 1}. {d.first_names} {d.surname}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-5 space-y-4">
|
||
|
|
{!sh.is_director && (
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">Full name / Entity name</label>
|
||
|
|
<input
|
||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors"
|
||
|
|
placeholder="Shareholder name or entity"
|
||
|
|
value={sh.name}
|
||
|
|
onChange={(e) => updateSH(i, { name: e.target.value })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">ID or Company number</label>
|
||
|
|
<input
|
||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors"
|
||
|
|
placeholder="ID or CK/CC/PTY number"
|
||
|
|
value={sh.id_or_entity_no}
|
||
|
|
onChange={(e) => updateSH(i, { id_or_entity_no: e.target.value })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div>
|
||
|
|
<label className="text-xs font-semibold text-muted mb-1 block">Quantity of shares</label>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
min={0}
|
||
|
|
step={1}
|
||
|
|
className="w-24 bg-surface border border-border rounded px-3 py-2 text-sm text-fg focus:outline-none focus:border-accent transition-colors"
|
||
|
|
placeholder="0"
|
||
|
|
value={sh.quantity_of_shares || ""}
|
||
|
|
onChange={(e) => {
|
||
|
|
const qty = Math.max(0, Math.floor(Number(e.target.value) || 0));
|
||
|
|
updateSH(i, { quantity_of_shares: qty });
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<span className="text-sm text-muted">shares</span>
|
||
|
|
{sh.share_percent > 0 && (
|
||
|
|
<span className="text-xs text-muted ml-2">({sh.share_percent.toFixed(2)}%)</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Review Step ───────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
function ReviewStep({ state }: { state: WizardState }) {
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
<div className="bg-surface-warm border border-border rounded-lg p-5">
|
||
|
|
<p className="text-xs uppercase tracking-wider text-accent font-bold mb-3">Directors</p>
|
||
|
|
{state.directors.map((d, i) => (
|
||
|
|
<div key={d.ui_key} className="py-3 border-b border-border last:border-0">
|
||
|
|
<p className="text-sm font-semibold text-fg">{d.first_names} {d.surname}</p>
|
||
|
|
<p className="text-xs text-muted">ID: {d.id_no || "—"} · {d.cell_phone}</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-surface-warm border border-border rounded-lg p-5">
|
||
|
|
<p className="text-xs uppercase tracking-wider text-accent font-bold mb-3">Company</p>
|
||
|
|
<div className="grid grid-cols-2 gap-x-6 gap-y-1 text-sm">
|
||
|
|
<p className="text-muted">Type</p>
|
||
|
|
<p className="text-fg font-medium">
|
||
|
|
{state.company.company_type === "pty_ltd" ? "Private Company — (PTY) LTD"
|
||
|
|
: state.company.company_type === "npc" ? "Non Profit Company — NPC"
|
||
|
|
: "—"}
|
||
|
|
</p>
|
||
|
|
<p className="text-muted">Name 1</p><p className="text-fg font-medium">{state.company.proposed_name_1 || "—"}</p>
|
||
|
|
<p className="text-muted">Name 2</p><p className="text-fg font-medium">{state.company.proposed_name_2 || "—"}</p>
|
||
|
|
<p className="text-muted">Name 3</p><p className="text-fg font-medium">{state.company.proposed_name_3 || "—"}</p>
|
||
|
|
{state.company.proposed_name_4 ? <><p className="text-muted">Name 4</p><p className="text-fg font-medium">{state.company.proposed_name_4}</p></> : null}
|
||
|
|
<p className="text-muted">Physical address</p>
|
||
|
|
<p className="text-fg font-medium">
|
||
|
|
{state.company.physical_address_line_1
|
||
|
|
? `${state.company.physical_address_line_1}${state.company.physical_address_line_2 ? `, ${state.company.physical_address_line_2}` : ""}, ${state.company.physical_town_city} ${state.company.physical_postal_code}`
|
||
|
|
: "—"}
|
||
|
|
</p>
|
||
|
|
<p className="text-muted">Postal address</p>
|
||
|
|
<p className="text-fg font-medium">
|
||
|
|
{state.company.postal_address_line_1
|
||
|
|
? `${state.company.postal_address_line_1}${state.company.postal_address_line_2 ? `, ${state.company.postal_address_line_2}` : ""}, ${state.company.postal_town_city} ${state.company.postal_postal_code}`
|
||
|
|
: "—"}
|
||
|
|
</p>
|
||
|
|
<p className="text-muted">Year end</p><p className="text-fg font-medium">{MONTHS[state.company.financial_year_end - 1]}</p>
|
||
|
|
<p className="text-muted">Authorised shares</p><p className="text-fg font-medium">{state.company.authorised_shares}</p>
|
||
|
|
<p className="text-muted">Value per share</p><p className="text-fg font-medium">R{Number(state.company.value_per_share || 0).toFixed(2)}</p>
|
||
|
|
<p className="text-muted">Public officer</p><p className="text-fg font-medium">{state.company.public_officer || "—"}</p>
|
||
|
|
<p className="text-muted">Secretary</p><p className="text-fg font-medium">{state.company.company_secretary || "—"}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-surface-warm border border-border rounded-lg p-5">
|
||
|
|
<p className="text-xs uppercase tracking-wider text-accent font-bold mb-3">Shareholders</p>
|
||
|
|
{state.shareholders.map((sh, i) => (
|
||
|
|
<div key={sh.ui_key} className="py-2 border-b border-border last:border-0 flex justify-between items-start">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm font-semibold text-fg">{sh.name || "—"}</p>
|
||
|
|
<p className="text-xs text-muted">{sh.id_or_entity_no || "—"}</p>
|
||
|
|
</div>
|
||
|
|
<div className="text-right">
|
||
|
|
<p className="text-sm font-bold text-accent">{sh.quantity_of_shares.toLocaleString()} shares</p>
|
||
|
|
{sh.share_percent > 0 && (
|
||
|
|
<p className="text-xs text-muted">{sh.share_percent.toFixed(2)}%</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
<p className="text-xs text-muted mt-2">
|
||
|
|
Allocated: {state.shareholders.reduce((s, sh) => s + sh.quantity_of_shares, 0).toLocaleString()}
|
||
|
|
{" / "}
|
||
|
|
{state.company.authorised_shares} authorised
|
||
|
|
{state.shareholders.reduce((s, sh) => s + sh.share_percent, 0) > 0 && (
|
||
|
|
<> · {state.shareholders.reduce((s, sh) => s + sh.share_percent, 0).toFixed(2)}% total</>
|
||
|
|
)}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Validation ───────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
function canProceed(step: StepId, _state: WizardState, _isUpdate: boolean): boolean {
|
||
|
|
// All fields are optional — a blank application can be submitted.
|
||
|
|
// Continue is always enabled; Submit on Review does the actual write.
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Main component ────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
interface PrefillData {
|
||
|
|
directors: {
|
||
|
|
first_names: string;
|
||
|
|
surname: string;
|
||
|
|
id_no: string;
|
||
|
|
date_of_birth: string;
|
||
|
|
residential_address: string; // legacy PB field
|
||
|
|
residential_address_line_1: string;
|
||
|
|
residential_address_line_2: string;
|
||
|
|
residential_town_city: string;
|
||
|
|
residential_province: string;
|
||
|
|
residential_postal_code: string;
|
||
|
|
postal_address: string; // legacy PB field
|
||
|
|
postal_address_line_1: string;
|
||
|
|
postal_address_line_2: string;
|
||
|
|
postal_town_city: string;
|
||
|
|
postal_province: string;
|
||
|
|
postal_postal_code: string;
|
||
|
|
cell_phone: string;
|
||
|
|
email: string;
|
||
|
|
section69_answers?: string;
|
||
|
|
}[];
|
||
|
|
shareholders: {
|
||
|
|
name: string;
|
||
|
|
id_or_entity_no: string;
|
||
|
|
share_percent: string;
|
||
|
|
quantity_of_shares?: string;
|
||
|
|
is_director: string;
|
||
|
|
}[];
|
||
|
|
company: {
|
||
|
|
proposed_name_1: string;
|
||
|
|
proposed_name_2: string;
|
||
|
|
proposed_name_3: string;
|
||
|
|
proposed_name_4: string;
|
||
|
|
company_type: string;
|
||
|
|
trading_address: string; // legacy PB field
|
||
|
|
postal_address: string; // legacy PB field
|
||
|
|
physical_address_line_1: string;
|
||
|
|
physical_address_line_2: string;
|
||
|
|
physical_town_city: string;
|
||
|
|
physical_province: string;
|
||
|
|
physical_postal_code: string;
|
||
|
|
postal_address_line_1: string;
|
||
|
|
postal_address_line_2: string;
|
||
|
|
postal_town_city: string;
|
||
|
|
postal_province: string;
|
||
|
|
postal_postal_code: string;
|
||
|
|
financial_year_end: string;
|
||
|
|
authorised_shares: string;
|
||
|
|
value_per_share?: string;
|
||
|
|
company_cell: string;
|
||
|
|
company_email: string;
|
||
|
|
public_officer: string;
|
||
|
|
company_secretary: string;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function RegistrationWizard({
|
||
|
|
registrationId,
|
||
|
|
prefill,
|
||
|
|
token,
|
||
|
|
referenceName,
|
||
|
|
status,
|
||
|
|
}: {
|
||
|
|
registrationId: string;
|
||
|
|
prefill?: PrefillData;
|
||
|
|
token?: string;
|
||
|
|
referenceName?: string;
|
||
|
|
status?: string;
|
||
|
|
}) {
|
||
|
|
const [step, setStep] = useState<StepId>("directors");
|
||
|
|
const [submitting, setSubmitting] = useState(false);
|
||
|
|
const [submitted, setSubmitted] = useState(false);
|
||
|
|
const [submitError, setSubmitError] = useState<string | null>(null);
|
||
|
|
const isUpdate = !!prefill;
|
||
|
|
|
||
|
|
// Initialize state — either blank or from prefill data
|
||
|
|
const [state, setState] = useState<WizardState>(() => {
|
||
|
|
if (prefill && prefill.directors.length > 0) {
|
||
|
|
return {
|
||
|
|
director_count: prefill.directors.length,
|
||
|
|
directors: prefill.directors.map((d) => {
|
||
|
|
let section69 = {
|
||
|
|
q1_probation: null as boolean | null,
|
||
|
|
q2_court_prohibited: null as boolean | null,
|
||
|
|
q3_unrehabilitated_insolvent: null as boolean | null,
|
||
|
|
q4_public_regulation: null as boolean | null,
|
||
|
|
q5_removed_from_office: null as boolean | null,
|
||
|
|
q6_convicted_offence: null as boolean | null,
|
||
|
|
};
|
||
|
|
try {
|
||
|
|
const raw = typeof d.section69_answers === "string" ? JSON.parse(d.section69_answers) : d.section69_answers;
|
||
|
|
if (raw) {
|
||
|
|
section69 = {
|
||
|
|
q1_probation: raw.q1_probation ?? null,
|
||
|
|
q2_court_prohibited: raw.q2_court_prohibited ?? null,
|
||
|
|
q3_unrehabilitated_insolvent: raw.q3_unrehabilitated_insolvent ?? null,
|
||
|
|
q4_public_regulation: raw.q4_public_regulation ?? null,
|
||
|
|
q5_removed_from_office: raw.q5_removed_from_office ?? null,
|
||
|
|
q6_convicted_offence: raw.q6_convicted_offence ?? null,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
} catch { /* use defaults */ }
|
||
|
|
return {
|
||
|
|
ui_key: uid(),
|
||
|
|
first_names: d.first_names || "",
|
||
|
|
surname: d.surname || "",
|
||
|
|
id_no: d.id_no || "",
|
||
|
|
date_of_birth: d.date_of_birth || "",
|
||
|
|
residential_address_line_1: d.residential_address_line_1 || d.residential_address || "",
|
||
|
|
residential_address_line_2: d.residential_address_line_2 || "",
|
||
|
|
residential_town_city: d.residential_town_city || "",
|
||
|
|
residential_province: d.residential_province || "",
|
||
|
|
residential_postal_code: d.residential_postal_code || "",
|
||
|
|
postal_address_line_1: d.postal_address_line_1 || d.postal_address || "",
|
||
|
|
postal_address_line_2: d.postal_address_line_2 || "",
|
||
|
|
postal_town_city: d.postal_town_city || "",
|
||
|
|
postal_province: d.postal_province || "",
|
||
|
|
postal_postal_code: d.postal_postal_code || "",
|
||
|
|
cell_phone: d.cell_phone || "",
|
||
|
|
email: d.email || "",
|
||
|
|
section69,
|
||
|
|
};
|
||
|
|
}),
|
||
|
|
company: {
|
||
|
|
proposed_name_1: prefill.company?.proposed_name_1 || "",
|
||
|
|
proposed_name_2: prefill.company?.proposed_name_2 || "",
|
||
|
|
proposed_name_3: prefill.company?.proposed_name_3 || "",
|
||
|
|
proposed_name_4: prefill.company?.proposed_name_4 || "",
|
||
|
|
company_type: (prefill.company as Record<string,unknown>)?.company_type as string || "",
|
||
|
|
physical_address_line_1: prefill.company?.physical_address_line_1 || prefill.company?.trading_address || "",
|
||
|
|
physical_address_line_2: prefill.company?.physical_address_line_2 || "",
|
||
|
|
physical_town_city: prefill.company?.physical_town_city || "",
|
||
|
|
physical_province: prefill.company?.physical_province || "",
|
||
|
|
physical_postal_code: prefill.company?.physical_postal_code || "",
|
||
|
|
postal_address_line_1: prefill.company?.postal_address_line_1 || prefill.company?.postal_address || "",
|
||
|
|
postal_address_line_2: prefill.company?.postal_address_line_2 || "",
|
||
|
|
postal_town_city: prefill.company?.postal_town_city || "",
|
||
|
|
postal_province: prefill.company?.postal_province || "",
|
||
|
|
postal_postal_code: prefill.company?.postal_postal_code || "",
|
||
|
|
financial_year_end: (() => {
|
||
|
|
const v = parseInt(prefill.company?.financial_year_end || "2", 10);
|
||
|
|
return isNaN(v) ? 2 : (v as CompanyInput["financial_year_end"]);
|
||
|
|
})(),
|
||
|
|
authorised_shares: ((prefill.company?.authorised_shares || "1000") === "100" ? "100" : "1000") as CompanyInput["authorised_shares"],
|
||
|
|
value_per_share: parseFloat(prefill.company?.value_per_share || "1") || 1,
|
||
|
|
company_cell: prefill.company?.company_cell || "",
|
||
|
|
company_email: prefill.company?.company_email || "",
|
||
|
|
public_officer: prefill.company?.public_officer || "",
|
||
|
|
company_secretary: prefill.company?.company_secretary || "",
|
||
|
|
},
|
||
|
|
shareholders: prefill.shareholders.length > 0
|
||
|
|
? prefill.shareholders.map((s) => ({
|
||
|
|
ui_key: uid(),
|
||
|
|
is_director: s.is_director === "true",
|
||
|
|
director_index: null,
|
||
|
|
name: s.name || "",
|
||
|
|
id_or_entity_no: s.id_or_entity_no || "",
|
||
|
|
quantity_of_shares: parseInt(s.quantity_of_shares || "0", 10) || 0,
|
||
|
|
share_percent: parseFloat(s.share_percent) || 0,
|
||
|
|
}))
|
||
|
|
: [blankShareholder()],
|
||
|
|
} as WizardState;
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
director_count: 1,
|
||
|
|
directors: [blankDirector()],
|
||
|
|
company: emptyCompany(),
|
||
|
|
shareholders: [blankShareholder()],
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
const stepIndex = STEPS.findIndex((s) => s.id === step);
|
||
|
|
|
||
|
|
const handleSubmit = async () => {
|
||
|
|
setSubmitting(true);
|
||
|
|
setSubmitError(null);
|
||
|
|
try {
|
||
|
|
// Strip id_file (File) from payload before sending to JSON endpoint.
|
||
|
|
const payload = {
|
||
|
|
registrationId,
|
||
|
|
...state,
|
||
|
|
directors: state.directors.map(({ id_file, ...rest }) => rest),
|
||
|
|
isUpdate,
|
||
|
|
};
|
||
|
|
const res = await fetch("/api/register/submit", {
|
||
|
|
method: "POST",
|
||
|
|
headers: { "Content-Type": "application/json" },
|
||
|
|
body: JSON.stringify(payload),
|
||
|
|
});
|
||
|
|
if (!res.ok) throw new Error(await res.text());
|
||
|
|
const data = await res.json();
|
||
|
|
// After the reg is saved, upload each director's ID file (if any).
|
||
|
|
// The director's PB id isn't known to the wizard; we send the
|
||
|
|
// first_names+surname so the server can build the canonical filename.
|
||
|
|
for (const d of state.directors) {
|
||
|
|
if (!d.id_file) continue;
|
||
|
|
const fd = new FormData();
|
||
|
|
fd.append("type", "director_id");
|
||
|
|
fd.append("director_first_names", d.first_names || "");
|
||
|
|
fd.append("director_surname", d.surname || "");
|
||
|
|
fd.append("files", d.id_file);
|
||
|
|
try {
|
||
|
|
const up = await fetch(`/api/register/${registrationId}/upload`, {
|
||
|
|
method: "POST",
|
||
|
|
body: fd,
|
||
|
|
});
|
||
|
|
if (!up.ok) {
|
||
|
|
const txt = await up.text().catch(() => "");
|
||
|
|
console.error(`[register/upload] director_id failed: ${up.status} ${txt}`);
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
console.error("[register/upload] network error", err);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (isUpdate) {
|
||
|
|
alert("Registration saved. Your changes have been recorded.");
|
||
|
|
setSubmitted(true);
|
||
|
|
} else {
|
||
|
|
setSubmitted(true);
|
||
|
|
}
|
||
|
|
void data; // unused
|
||
|
|
} catch (err: unknown) {
|
||
|
|
setSubmitError(err instanceof Error ? err.message : "Submission failed");
|
||
|
|
} finally {
|
||
|
|
setSubmitting(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (submitted) {
|
||
|
|
return (
|
||
|
|
<div className="container-x py-16 text-center max-w-lg mx-auto">
|
||
|
|
<div className="w-16 h-16 bg-success/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
|
|
<svg className="w-8 h-8 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h2 className="text-fg font-semibold text-xl mb-2">
|
||
|
|
{isUpdate ? "Saved" : "Registration submitted"}
|
||
|
|
</h2>
|
||
|
|
<p className="text-muted text-sm">
|
||
|
|
{isUpdate
|
||
|
|
? "Your changes have been recorded. You can close this tab."
|
||
|
|
: "Your information has been received. Your registration agent will be in touch shortly."}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="container-x py-8 max-w-3xl mx-auto">
|
||
|
|
{/* Step indicator */}
|
||
|
|
<div className="flex items-center gap-0 mb-8 overflow-x-auto">
|
||
|
|
{STEPS.map((s, i) => {
|
||
|
|
const isActive = s.id === step;
|
||
|
|
const isPast = i < stepIndex;
|
||
|
|
return (
|
||
|
|
<div key={s.id} className="flex items-center flex-shrink-0">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => { if (i <= stepIndex) setStep(s.id); }}
|
||
|
|
disabled={!isActive && !isPast}
|
||
|
|
className={
|
||
|
|
"flex items-center gap-2 px-3 py-2 text-sm font-semibold border-b-2 transition-colors " +
|
||
|
|
(isActive ? "border-accent text-accent" : isPast ? "border-success text-success cursor-pointer" : "border-transparent text-muted cursor-not-allowed")
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<span className={
|
||
|
|
"w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold " +
|
||
|
|
(isActive ? "bg-accent text-accent-on" : isPast ? "bg-success text-success-on" : "bg-surface border border-border text-muted")
|
||
|
|
}>
|
||
|
|
{isPast ? "\u2713" : i + 1}
|
||
|
|
</span>
|
||
|
|
{s.label}
|
||
|
|
</button>
|
||
|
|
{i < STEPS.length - 1 && <div className="w-4 h-px bg-border mx-1" />}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Update-mode banner */}
|
||
|
|
{isUpdate && (
|
||
|
|
<div className="mb-6 px-4 py-3 rounded-lg bg-yellow-500/10 border border-yellow-500/30 text-sm text-yellow-700">
|
||
|
|
<strong>Continuing existing registration.</strong> Existing data has been loaded.
|
||
|
|
Fill in any missing fields below, then click <strong>Continue →</strong> to advance.
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Step content */}
|
||
|
|
<div className="mb-8">
|
||
|
|
{step === "directors" && (
|
||
|
|
<div>
|
||
|
|
<div className="mb-4">
|
||
|
|
<p className="text-xs uppercase tracking-wider text-accent font-bold">Step 1</p>
|
||
|
|
<h2 className="text-fg font-semibold text-xl">Director details</h2>
|
||
|
|
</div>
|
||
|
|
<div className="bg-surface-warm border border-border rounded-lg p-5 mb-6">
|
||
|
|
<p className="text-sm font-semibold text-fg mb-3">How many directors?</p>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
{[1, 2, 3, 4, 5].map((n) => (
|
||
|
|
<button
|
||
|
|
key={n}
|
||
|
|
type="button"
|
||
|
|
onClick={() => {
|
||
|
|
let directors = [...state.directors];
|
||
|
|
if (n > directors.length) {
|
||
|
|
while (directors.length < n) directors.push(blankDirector());
|
||
|
|
} else {
|
||
|
|
directors = directors.slice(0, n);
|
||
|
|
}
|
||
|
|
setState({ ...state, director_count: n, directors });
|
||
|
|
}}
|
||
|
|
className={
|
||
|
|
"w-10 h-10 rounded border font-semibold text-sm transition-colors " +
|
||
|
|
(state.director_count === n ? "bg-accent text-accent-on border-transparent" : "bg-surface border-border text-muted hover:text-fg")
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{n}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<p className="text-xs text-muted mt-2">All fields below are optional. You can leave anything blank and still submit.</p>
|
||
|
|
</div>
|
||
|
|
{state.directors.map((director, i) => (
|
||
|
|
<DirectorStep
|
||
|
|
key={director.ui_key}
|
||
|
|
director={director}
|
||
|
|
index={i}
|
||
|
|
onUpdate={(patch) => {
|
||
|
|
const directors = [...state.directors];
|
||
|
|
directors[i] = { ...directors[i], ...patch };
|
||
|
|
setState({ ...state, directors });
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{step === "company" && (
|
||
|
|
<div>
|
||
|
|
<div className="mb-4">
|
||
|
|
<p className="text-xs uppercase tracking-wider text-accent font-bold">Step 2</p>
|
||
|
|
<h2 className="text-fg font-semibold text-xl">Company information</h2>
|
||
|
|
</div>
|
||
|
|
<CompanyStep
|
||
|
|
company={state.company}
|
||
|
|
directors={state.directors}
|
||
|
|
onUpdate={(p) => setState({ ...state, company: { ...state.company, ...p } })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{step === "shareholders" && (
|
||
|
|
<div>
|
||
|
|
<div className="mb-4">
|
||
|
|
<p className="text-xs uppercase tracking-wider text-accent font-bold">Step 3</p>
|
||
|
|
<h2 className="text-fg font-semibold text-xl">Shareholders</h2>
|
||
|
|
</div>
|
||
|
|
<ShareholderStep state={state} onUpdate={setState} />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{step === "review" && (
|
||
|
|
<div>
|
||
|
|
<div className="mb-4">
|
||
|
|
<p className="text-xs uppercase tracking-wider text-accent font-bold">Step 4</p>
|
||
|
|
<h2 className="text-fg font-semibold text-xl">Review & submit</h2>
|
||
|
|
</div>
|
||
|
|
<ReviewStep state={state} />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{step === "step2" && (
|
||
|
|
<div>
|
||
|
|
<div className="mb-6">
|
||
|
|
<p className="text-xs uppercase tracking-wider text-accent font-bold">Step 5 — Actions</p>
|
||
|
|
<h2 className="text-2xl font-bold text-fg mt-1">BizPortal Actions</h2>
|
||
|
|
<p className="text-sm text-muted mt-1">Update the status as you work through BizPortal.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Action Buttons */}
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
|
|
<ActionButton
|
||
|
|
id={registrationId}
|
||
|
|
label="Name Reservation only"
|
||
|
|
description="Mark as: Name reservation only in progress"
|
||
|
|
status="Name reservation only in Progress"
|
||
|
|
variant="blue"
|
||
|
|
/>
|
||
|
|
<ActionButton
|
||
|
|
id={registrationId}
|
||
|
|
label="Apply for name reservation on BizPortal"
|
||
|
|
description="Mark as: Name reservation in progress"
|
||
|
|
status="Name reservation in Progress"
|
||
|
|
variant="blue"
|
||
|
|
/>
|
||
|
|
<ActionButton
|
||
|
|
id={registrationId}
|
||
|
|
label="Name Already Approved"
|
||
|
|
description="Mark as: Awaiting Client Approval"
|
||
|
|
status="Awaiting Client Approval"
|
||
|
|
variant="green"
|
||
|
|
/>
|
||
|
|
<ActionButton
|
||
|
|
id={registrationId}
|
||
|
|
label="K-number"
|
||
|
|
description="Mark as: K-number registration"
|
||
|
|
status="K-number registration"
|
||
|
|
variant="purple"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Navigation */}
|
||
|
|
<div className="mt-8 flex justify-between">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => setStep("review")}
|
||
|
|
className="px-4 py-2 border border-border rounded text-sm font-semibold text-muted hover:border-accent hover:text-accent transition-colors"
|
||
|
|
>
|
||
|
|
← Back to Review
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={handleSubmit}
|
||
|
|
className="px-6 py-2 rounded bg-accent text-accent-on text-sm font-semibold hover:opacity-90 transition-opacity"
|
||
|
|
>
|
||
|
|
Save & Continue
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{submitError && (
|
||
|
|
<div className="mb-4 p-4 bg-danger/10 border border-danger/30 rounded text-danger text-sm">{submitError}</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="flex items-center justify-between pt-4 border-t border-border">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => { if (stepIndex > 0) setStep(STEPS[stepIndex - 1].id); }}
|
||
|
|
disabled={stepIndex === 0}
|
||
|
|
className="px-5 py-2 text-sm font-semibold text-muted hover:text-fg disabled:opacity-30 transition-colors"
|
||
|
|
>
|
||
|
|
← Back
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{step !== "review" && step !== "step2" ? (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => { if (stepIndex < STEPS.length - 1) setStep(STEPS[stepIndex + 1].id); }}
|
||
|
|
disabled={!canProceed(step, state, isUpdate)}
|
||
|
|
className="px-6 py-2 bg-accent text-accent-on rounded font-semibold text-sm disabled:opacity-40 hover:opacity-90 transition-opacity"
|
||
|
|
>
|
||
|
|
Continue →
|
||
|
|
</button>
|
||
|
|
) : (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={step === "step2" ? () => alert("Step 2 — submit handler not yet built") : handleSubmit}
|
||
|
|
disabled={submitting}
|
||
|
|
className="px-6 py-2 bg-accent text-accent-on rounded font-semibold text-sm disabled:opacity-40 hover:opacity-90 transition-opacity"
|
||
|
|
>
|
||
|
|
{step === "step2" ? "Submit" : "Submit registration"}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|