280 lines
11 KiB
TypeScript
280 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useTranslations } from "next-intl";
|
|
import type { OrgBilling } from "@/types";
|
|
import { Card } from "@/components/ui/card";
|
|
|
|
interface Props {
|
|
/** Existing billing record, or null on first edit. */
|
|
initial: OrgBilling | null;
|
|
/**
|
|
* True if the caller is on a personal org. Personal customers
|
|
* (B2C — private individuals) don't have a company name or VAT
|
|
* number; the form re-labels the company-name field as "Full name"
|
|
* and hides VAT.
|
|
*/
|
|
isPersonal: boolean;
|
|
/** Default company name for company orgs on first edit. */
|
|
orgName: string;
|
|
/** Default full-name for personal orgs on first edit. */
|
|
userName: string;
|
|
/**
|
|
* Default billing email — the address the user registered with.
|
|
* Used on first edit (when `initial` is null). Customers can still
|
|
* type a different address (e.g. accounting@…) but the registration
|
|
* email is a sensible starting point.
|
|
*/
|
|
userEmail: string;
|
|
}
|
|
|
|
/**
|
|
* Editable billing form. Used by /settings/billing; the wizard's
|
|
* inline billing step (Bug 35 phase 2) reuses the same shape but is
|
|
* implemented separately because of its different submit semantics
|
|
* (one combined wizard submit, vs. this page's standalone PUT).
|
|
*
|
|
* The form does NOT do client-side VAT format validation — too many
|
|
* country variations to get right, and the API will reject empty
|
|
* VAT for company orgs anyway. The asterisk on the field plus the
|
|
* server error suffices.
|
|
*/
|
|
export function BillingSettingsForm({
|
|
initial,
|
|
isPersonal,
|
|
orgName,
|
|
userName,
|
|
userEmail,
|
|
}: Props) {
|
|
const t = useTranslations("settingsBilling");
|
|
const tCommon = useTranslations("common");
|
|
const router = useRouter();
|
|
|
|
const [companyName, setCompanyName] = useState(
|
|
initial?.companyName ?? (isPersonal ? userName : orgName)
|
|
);
|
|
const [streetAddress, setStreetAddress] = useState(
|
|
initial?.streetAddress ?? ""
|
|
);
|
|
const [postalCode, setPostalCode] = useState(initial?.postalCode ?? "");
|
|
const [city, setCity] = useState(initial?.city ?? "");
|
|
const [country, setCountry] = useState(initial?.country ?? "CH");
|
|
const [vatNumber, setVatNumber] = useState(initial?.vatNumber ?? "");
|
|
// Default billing email to the user's registration email when no
|
|
// record exists yet. They can change it (a separate accounting
|
|
// address is common); we just want sensible pre-fill on first edit.
|
|
const [billingEmail, setBillingEmail] = useState(
|
|
initial?.billingEmail ?? userEmail ?? ""
|
|
);
|
|
const [notes, setNotes] = useState(initial?.notes ?? "");
|
|
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const [success, setSuccess] = useState(false);
|
|
|
|
const onSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setSubmitting(true);
|
|
setError("");
|
|
setSuccess(false);
|
|
try {
|
|
const res = await fetch("/api/billing", {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
companyName,
|
|
streetAddress,
|
|
postalCode,
|
|
city,
|
|
country,
|
|
vatNumber: vatNumber.trim() || null,
|
|
billingEmail,
|
|
notes: notes.trim() || null,
|
|
}),
|
|
});
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}));
|
|
throw new Error(data.error || t("saveFailed"));
|
|
}
|
|
setSuccess(true);
|
|
// Refresh server props so the form re-renders with the saved
|
|
// record's timestamps. Subtle but useful: the "last updated"
|
|
// line below ticks forward.
|
|
router.refresh();
|
|
} catch (e: any) {
|
|
setError(e.message);
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card className="animate-in animate-in-delay-1">
|
|
<form onSubmit={onSubmit} className="space-y-4">
|
|
{/* Bug 35: this field stores `company_name` in the DB but
|
|
the label changes by customer type:
|
|
- Company (B2B): "Company name" — the legal entity.
|
|
- Personal (B2C): "Full name" — the individual's
|
|
invoice name (may differ from their session display
|
|
name; e.g. legal name vs friendly name).
|
|
Required for both. The DB column is NOT NULL either way. */}
|
|
<div>
|
|
<label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
|
|
{isPersonal ? t("fullName") : t("companyName")}{" "}
|
|
<span className="text-red-400">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={companyName}
|
|
onChange={(e) => setCompanyName(e.target.value)}
|
|
className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
|
|
{t("streetAddress")} <span className="text-red-400">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={streetAddress}
|
|
onChange={(e) => setStreetAddress(e.target.value)}
|
|
className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
|
<div>
|
|
<label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
|
|
{t("postalCode")} <span className="text-red-400">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={postalCode}
|
|
onChange={(e) => setPostalCode(e.target.value)}
|
|
className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
|
|
/>
|
|
</div>
|
|
<div className="sm:col-span-2">
|
|
<label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
|
|
{t("city")} <span className="text-red-400">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={city}
|
|
onChange={(e) => setCity(e.target.value)}
|
|
className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
|
|
{t("country")} <span className="text-red-400">*</span>
|
|
</label>
|
|
<select
|
|
required
|
|
value={country}
|
|
onChange={(e) => setCountry(e.target.value)}
|
|
className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
|
|
>
|
|
<option value="CH">Switzerland</option>
|
|
<option value="LI">Liechtenstein</option>
|
|
<option value="DE">Germany</option>
|
|
<option value="AT">Austria</option>
|
|
<option value="FR">France</option>
|
|
<option value="IT">Italy</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Bug 35: VAT visible only for company customers (B2B).
|
|
Personal customers (B2C — private individuals) don't have
|
|
a VAT number; the API likewise doesn't require one for
|
|
them. */}
|
|
{!isPersonal && (
|
|
<div>
|
|
<label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
|
|
{t("vatNumber")} <span className="text-red-400">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={vatNumber}
|
|
onChange={(e) => setVatNumber(e.target.value)}
|
|
placeholder="CHE-123.456.789 MWST"
|
|
className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
|
|
/>
|
|
<p className="text-xs text-text-muted mt-1">{t("vatHelp")}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
|
|
{t("billingEmail")} <span className="text-red-400">*</span>
|
|
</label>
|
|
<input
|
|
type="email"
|
|
required
|
|
value={billingEmail}
|
|
onChange={(e) => setBillingEmail(e.target.value)}
|
|
placeholder="invoices@example.com"
|
|
className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
|
|
/>
|
|
<p className="text-xs text-text-muted mt-1">{t("billingEmailHelp")}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
|
|
{t("notes")}{" "}
|
|
<span className="text-text-muted normal-case">
|
|
({tCommon("optional")})
|
|
</span>
|
|
</label>
|
|
<textarea
|
|
value={notes}
|
|
onChange={(e) => setNotes(e.target.value)}
|
|
rows={3}
|
|
className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
|
|
placeholder={t(
|
|
isPersonal ? "notesPlaceholderPersonal" : "notesPlaceholder"
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
|
|
{error}
|
|
</div>
|
|
)}
|
|
{success && !error && (
|
|
<div className="text-xs text-success bg-success/10 border border-success/20 rounded-lg px-3 py-2">
|
|
{t("saved")}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between gap-3">
|
|
{initial?.updatedAt && (
|
|
<div className="text-xs text-text-muted">
|
|
{t("lastUpdated", {
|
|
when: new Date(initial.updatedAt).toLocaleString(),
|
|
})}
|
|
</div>
|
|
)}
|
|
<button
|
|
type="submit"
|
|
disabled={submitting}
|
|
className="ml-auto text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
|
|
>
|
|
{submitting ? tCommon("loading") : t("save")}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</Card>
|
|
);
|
|
}
|