Phase6: Customer Billing details

src/components/settings/billing-form.tsx

@@ -8,6 +8,16 @@ import type { OrgBilling } from "@/types";
 
 interface Props {
   initial: OrgBilling | null;
+  /**
+   * Personal-account (individual customer) flag from the session.
+   * Individuals get a "Full name" field instead of "Company name",
+   * and the VAT input is hidden entirely — they don't have one and
+   * showing the field would only confuse. The underlying column is
+   * still `company_name` in the DB and the invoice PDF; for an
+   * individual that field carries their full name, which is
+   * exactly what should print on the invoice.
+   */
+  isPersonal: boolean;
 }
 
 /**
@@ -22,7 +32,7 @@ interface Props {
  * On success we router.refresh() the page so the server component
  * re-fetches and any "create now" -> "edit" wording flips.
  */
-export function BillingSettingsForm({ initial }: Props) {
+export function BillingSettingsForm({ initial, isPersonal }: Props) {
   const t = useTranslations("settingsBilling");
   const router = useRouter();
   const [form, setForm] = useState({
@@ -78,7 +88,10 @@ export function BillingSettingsForm({ initial }: Props) {
           postalCode: form.postalCode.trim(),
           city: form.city.trim(),
           country: form.country.trim().toUpperCase(),
-          vatNumber: form.vatNumber.trim() || null,
+          // Personal accounts never have a VAT number — force null
+          // regardless of stale state, in case a value was stored
+          // before the account got flagged as personal.
+          vatNumber: isPersonal ? null : form.vatNumber.trim() || null,
           billingEmail: form.billingEmail.trim(),
           notes: form.notes.trim() || null,
         }),
@@ -99,7 +112,10 @@ export function BillingSettingsForm({ initial }: Props) {
   return (
     <Card>
       <div className="space-y-4">
-        <Field label={t("companyNameLabel")} required>
+        <Field
+          label={isPersonal ? t("fullNameLabel") : t("companyNameLabel")}
+          required
+        >
           <input
             type="text"
             value={form.companyName}
@@ -155,16 +171,18 @@ export function BillingSettingsForm({ initial }: Props) {
             />
           </Field>
         </div>
-        <Field label={t("vatNumberLabel")} hint={t("vatNumberHint")}>
-          <input
-            type="text"
-            value={form.vatNumber}
-            onChange={set("vatNumber")}
-            maxLength={40}
-            placeholder="CHE-123.456.789 MWST"
-            className="w-full px-3 py-2 rounded-md bg-surface-2 border border-border focus:border-accent focus:outline-none text-sm font-mono"
-          />
-        </Field>
+        {!isPersonal && (
+          <Field label={t("vatNumberLabel")} hint={t("vatNumberHint")}>
+            <input
+              type="text"
+              value={form.vatNumber}
+              onChange={set("vatNumber")}
+              maxLength={40}
+              placeholder="CHE-123.456.789 MWST"
+              className="w-full px-3 py-2 rounded-md bg-surface-2 border border-border focus:border-accent focus:outline-none text-sm font-mono"
+            />
+          </Field>
+        )}
         <Field label={t("billingEmailLabel")} required hint={t("billingEmailHint")}>
           <input
             type="email"