diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx index 59163cc..eb98cba 100644 --- a/components/checkout/PlanSummary.tsx +++ b/components/checkout/PlanSummary.tsx @@ -27,6 +27,7 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC const [currentInterval, setCurrentInterval] = useState(interval) const [vatResult, setVatResult] = useState(null) const [vatLoading, setVatLoading] = useState(false) + const [verifiedVatId, setVerifiedVatId] = useState('') const monthlyCents = PLAN_PRICES[plan]?.[limit] || 0 const isYearly = currentInterval === 'year' @@ -56,11 +57,28 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC } }, [plan, limit]) + // Auto-fetch when country or interval changes (using the already-verified VAT ID if any) useEffect(() => { if (!country) { setVatResult(null); return } - const timer = setTimeout(() => fetchVAT(country, vatId, currentInterval), vatId ? 400 : 0) - return () => clearTimeout(timer) - }, [country, vatId, currentInterval, fetchVAT]) + fetchVAT(country, verifiedVatId, currentInterval) + }, [country, currentInterval, fetchVAT, verifiedVatId]) + + // Clear verified state when VAT ID input changes + useEffect(() => { + if (vatId !== verifiedVatId) { + setVerifiedVatId('') + // Re-fetch without VAT ID to show the 21% rate + if (country) fetchVAT(country, '', currentInterval) + } + }, [vatId]) // eslint-disable-line react-hooks/exhaustive-deps + + const handleVerifyVatId = () => { + if (!vatId || !country) return + setVerifiedVatId(vatId) + fetchVAT(country, vatId, currentInterval) + } + + const isVatVerified = verifiedVatId !== '' && verifiedVatId === vatId return (
@@ -111,13 +129,35 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC - onVatIdChange(e.target.value)} - placeholder="e.g. BE0123456789" - className={inputClass} - /> +
+ onVatIdChange(e.target.value)} + placeholder="e.g. DE123456789" + className={inputClass} + /> + +
+ {/* Verified company info */} + {isVatVerified && vatResult?.company_name && ( +
+

{vatResult.company_name}

+ {vatResult.company_address && ( +

{vatResult.company_address}

+ )} +
+ )} + {isVatVerified && vatResult && !vatResult.vat_exempt && ( +

VAT ID could not be verified. 21% VAT will apply.

+ )}
{/* Price breakdown */} @@ -138,7 +178,7 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC ) : vatLoading ? (
- Calculating VAT... + {vatId ? 'Verifying VAT ID...' : 'Calculating VAT...'}
) : vatResult ? (
diff --git a/lib/api/billing.ts b/lib/api/billing.ts index 01f25b5..31fae61 100644 --- a/lib/api/billing.ts +++ b/lib/api/billing.ts @@ -109,6 +109,8 @@ export interface VATResult { total_amount: string vat_exempt: boolean vat_reason: string + company_name?: string + company_address?: string } export interface CalculateVATParams {