Fix/invoice delivery and payment accounts (#1116)
* fix: reconcile annual reports with final closing entries * test: cover annual report depreciation and VAT balances * Merge remote-tracking branch 'origin/main' into fix/usr-fdbck-ch * fix: show exact invoice delivery details * fix: use currency account in invoice emails * fix: address invoice delivery review feedback * fix: harden invoice delivery and payment accounts * test: assert RLS-denied zero-row updates * fix: close remaining invoice compliance gaps * fix: harden invoice archive authorization * fix: close invoice delivery review findings * fix: verify delivery finalization results * fix: cap combined invoice email recipients * fix: close final invoice compliance findings * fix: prevent stale payment account saves * test: prove invoice delivery isolation * fix: close invoice privacy review findings * test: normalize delivery retention dates
This commit is contained in:
Mattsson
@@ -0,0 +1,150 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import {
|
||||
EMAIL_PATTERN,
|
||||
MAX_INVOICE_EMAIL_COPY_RECIPIENTS,
|
||||
parseInvoiceRecipientText,
|
||||
} from '@/lib/invoices/email-recipients'
|
||||
import { getErrorMessage as getUserErrorMessage } from '@/lib/errors/get-error-message'
|
||||
import { useCompany } from '@/contexts/CompanyContext'
|
||||
import type { CompanySettings } from '@/types'
|
||||
|
||||
interface InvoiceEmailRecipientsSettingsProps {
|
||||
settings: CompanySettings
|
||||
onUpdate: (updates: Partial<CompanySettings>) => void
|
||||
}
|
||||
|
||||
function listText(addresses: readonly string[]): string {
|
||||
return addresses.join('\n')
|
||||
}
|
||||
|
||||
export function InvoiceEmailRecipientsSettings({
|
||||
settings,
|
||||
onUpdate,
|
||||
}: InvoiceEmailRecipientsSettingsProps) {
|
||||
const t = useTranslations('settings_invoice_email_recipients')
|
||||
const { toast } = useToast()
|
||||
const { role } = useCompany()
|
||||
const effectiveCc = settings.invoice_email_cc_addresses ?? (
|
||||
settings.email ? [settings.email] : []
|
||||
)
|
||||
const effectiveBcc = settings.invoice_email_bcc_addresses ?? []
|
||||
const serverCcText = listText(effectiveCc)
|
||||
const serverBccText = listText(effectiveBcc)
|
||||
const [ccText, setCcText] = useState(serverCcText)
|
||||
const [bccText, setBccText] = useState(serverBccText)
|
||||
const [isSaving, setIsSaving] = useState(false)
|
||||
const previousServerText = useRef({ cc: serverCcText, bcc: serverBccText })
|
||||
|
||||
useEffect(() => {
|
||||
const previous = previousServerText.current
|
||||
setCcText((current) => current === previous.cc ? serverCcText : current)
|
||||
setBccText((current) => current === previous.bcc ? serverBccText : current)
|
||||
previousServerText.current = { cc: serverCcText, bcc: serverBccText }
|
||||
}, [serverBccText, serverCcText])
|
||||
|
||||
if (role !== 'owner' && role !== 'admin') return null
|
||||
|
||||
async function save() {
|
||||
const cc = parseInvoiceRecipientText(ccText)
|
||||
const bcc = parseInvoiceRecipientText(bccText)
|
||||
const invalid = [...cc, ...bcc].find((address) => !EMAIL_PATTERN.test(address))
|
||||
|
||||
if (invalid) {
|
||||
toast({
|
||||
title: t('invalid_title'),
|
||||
description: t('invalid_description', { address: invalid }),
|
||||
variant: 'destructive',
|
||||
})
|
||||
return
|
||||
}
|
||||
if (cc.length + bcc.length > MAX_INVOICE_EMAIL_COPY_RECIPIENTS) {
|
||||
toast({
|
||||
title: t('too_many_title'),
|
||||
description: t('too_many_description', { count: MAX_INVOICE_EMAIL_COPY_RECIPIENTS }),
|
||||
variant: 'destructive',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
setIsSaving(true)
|
||||
try {
|
||||
const response = await fetch('/api/settings', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
invoice_email_cc_addresses: cc,
|
||||
invoice_email_bcc_addresses: bcc,
|
||||
}),
|
||||
})
|
||||
if (!response.ok) {
|
||||
const result = await response.json()
|
||||
throw new Error(typeof result.error === 'string' ? result.error : t('save_failed'))
|
||||
}
|
||||
|
||||
onUpdate({
|
||||
invoice_email_cc_addresses: cc,
|
||||
invoice_email_bcc_addresses: bcc,
|
||||
})
|
||||
setCcText(listText(cc))
|
||||
setBccText(listText(bcc))
|
||||
toast({ title: t('saved_title'), description: t('saved_description') })
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: t('save_failed_title'),
|
||||
description: error instanceof Error ? getUserErrorMessage(error) : t('save_failed'),
|
||||
variant: 'destructive',
|
||||
})
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{t('heading')}
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">{t('description')}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="invoice-email-cc">{t('cc_label')}</Label>
|
||||
<Textarea
|
||||
id="invoice-email-cc"
|
||||
value={ccText}
|
||||
onChange={(event) => setCcText(event.target.value)}
|
||||
placeholder={t('cc_placeholder')}
|
||||
rows={3}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t('cc_hint')}</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="invoice-email-bcc">{t('bcc_label')}</Label>
|
||||
<Textarea
|
||||
id="invoice-email-bcc"
|
||||
value={bccText}
|
||||
onChange={(event) => setBccText(event.target.value)}
|
||||
placeholder={t('bcc_placeholder')}
|
||||
rows={3}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t('bcc_hint')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="button" onClick={save} disabled={isSaving}>
|
||||
{isSaving ? t('saving') : t('save')}
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,450 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { BankNameCombobox } from '@/components/settings/BankNameCombobox'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import { useCompany } from '@/contexts/CompanyContext'
|
||||
import { validateBankgiroNumber, validatePlusgiroNumber } from '@/lib/bankgiro/luhn'
|
||||
import { getErrorMessage as getUserErrorMessage } from '@/lib/errors/get-error-message'
|
||||
import {
|
||||
INVOICE_PAYMENT_ACCOUNT_CURRENCIES,
|
||||
legacySekInvoicePaymentAccount,
|
||||
normalizeInvoicePaymentAccount,
|
||||
} from '@/lib/invoices/payment-accounts'
|
||||
import { isValidSwish, normaliseSwish } from '@/lib/payments/swish'
|
||||
import { ENABLED_EXTENSION_IDS } from '@/lib/extensions/_generated/enabled-extensions'
|
||||
import type {
|
||||
CompanySettings,
|
||||
Currency,
|
||||
InvoicePaymentAccount,
|
||||
} from '@/types'
|
||||
|
||||
interface InvoicePaymentAccountsSettingsProps {
|
||||
settings: CompanySettings
|
||||
onUpdate: (updates: Partial<CompanySettings>) => void
|
||||
}
|
||||
|
||||
const EMPTY_ACCOUNT: InvoicePaymentAccount = {
|
||||
bank_name: null,
|
||||
clearing_number: null,
|
||||
account_number: null,
|
||||
bankgiro: null,
|
||||
plusgiro: null,
|
||||
swish: null,
|
||||
iban: null,
|
||||
bic: null,
|
||||
}
|
||||
|
||||
function initialAccounts(
|
||||
paymentAccounts: CompanySettings['invoice_payment_accounts'],
|
||||
legacySekAccount: InvoicePaymentAccount,
|
||||
): Partial<Record<Currency, InvoicePaymentAccount>> {
|
||||
const configured = Object.fromEntries(
|
||||
Object.entries(paymentAccounts ?? {}).map(([currency, account]) => [
|
||||
currency,
|
||||
normalizeInvoicePaymentAccount(account),
|
||||
]),
|
||||
) as Partial<Record<Currency, InvoicePaymentAccount>>
|
||||
|
||||
if (!configured.SEK) configured.SEK = legacySekAccount
|
||||
return configured
|
||||
}
|
||||
|
||||
function value(account: InvoicePaymentAccount, field: keyof InvoicePaymentAccount): string {
|
||||
return account[field] ?? ''
|
||||
}
|
||||
|
||||
function accountsKey(accounts: Partial<Record<Currency, InvoicePaymentAccount>>): string {
|
||||
return JSON.stringify(INVOICE_PAYMENT_ACCOUNT_CURRENCIES.map((currency) => [
|
||||
currency,
|
||||
accounts[currency] ? normalizeInvoicePaymentAccount(accounts[currency]) : null,
|
||||
]))
|
||||
}
|
||||
|
||||
export function InvoicePaymentAccountsSettings({
|
||||
settings,
|
||||
onUpdate,
|
||||
}: InvoicePaymentAccountsSettingsProps) {
|
||||
const t = useTranslations('settings_invoice_payment_accounts')
|
||||
const { toast } = useToast()
|
||||
const { role } = useCompany()
|
||||
const legacySekAccount = useMemo(
|
||||
() => legacySekInvoicePaymentAccount({
|
||||
bank_name: settings.bank_name,
|
||||
clearing_number: settings.clearing_number,
|
||||
account_number: settings.account_number,
|
||||
bankgiro: settings.bankgiro,
|
||||
plusgiro: settings.plusgiro,
|
||||
swish: settings.swish,
|
||||
iban: settings.iban,
|
||||
bic: settings.bic,
|
||||
}),
|
||||
[
|
||||
settings.bank_name,
|
||||
settings.clearing_number,
|
||||
settings.account_number,
|
||||
settings.bankgiro,
|
||||
settings.plusgiro,
|
||||
settings.swish,
|
||||
settings.iban,
|
||||
settings.bic,
|
||||
],
|
||||
)
|
||||
const serverAccounts = useMemo(
|
||||
() => initialAccounts(settings.invoice_payment_accounts, legacySekAccount),
|
||||
[settings.invoice_payment_accounts, legacySekAccount],
|
||||
)
|
||||
const serverAccountsKey = accountsKey(serverAccounts)
|
||||
const [accounts, setAccounts] = useState(serverAccounts)
|
||||
const [activeCurrency, setActiveCurrency] = useState<Currency>('SEK')
|
||||
const [currencyToAdd, setCurrencyToAdd] = useState<Currency | ''>('')
|
||||
const [isSaving, setIsSaving] = useState(false)
|
||||
const [hasExternalUpdate, setHasExternalUpdate] = useState(false)
|
||||
const accountsRef = useRef(accounts)
|
||||
const previousServerAccountsKey = useRef(serverAccountsKey)
|
||||
accountsRef.current = accounts
|
||||
const hasBankingExtension = ENABLED_EXTENSION_IDS.has('enable-banking')
|
||||
|
||||
useEffect(() => {
|
||||
const previousKey = previousServerAccountsKey.current
|
||||
if (serverAccountsKey === previousKey) return
|
||||
|
||||
const currentKey = accountsKey(accountsRef.current)
|
||||
if (currentKey === serverAccountsKey) {
|
||||
setHasExternalUpdate(false)
|
||||
} else if (currentKey === previousKey) {
|
||||
accountsRef.current = serverAccounts
|
||||
setAccounts(serverAccounts)
|
||||
setHasExternalUpdate(false)
|
||||
} else {
|
||||
setHasExternalUpdate(true)
|
||||
}
|
||||
previousServerAccountsKey.current = serverAccountsKey
|
||||
}, [serverAccounts, serverAccountsKey])
|
||||
|
||||
const configuredCurrencies = useMemo(
|
||||
() => INVOICE_PAYMENT_ACCOUNT_CURRENCIES.filter((currency) => !!accounts[currency]),
|
||||
[accounts],
|
||||
)
|
||||
const availableCurrencies = INVOICE_PAYMENT_ACCOUNT_CURRENCIES.filter(
|
||||
(currency) => !accounts[currency],
|
||||
)
|
||||
const activeAccount = accounts[activeCurrency] ?? EMPTY_ACCOUNT
|
||||
|
||||
if (role !== 'owner' && role !== 'admin') return null
|
||||
|
||||
function updateField(field: keyof InvoicePaymentAccount, nextValue: string) {
|
||||
setAccounts((current) => ({
|
||||
...current,
|
||||
[activeCurrency]: {
|
||||
...(current[activeCurrency] ?? EMPTY_ACCOUNT),
|
||||
[field]: nextValue || null,
|
||||
},
|
||||
}))
|
||||
}
|
||||
|
||||
function addCurrency() {
|
||||
if (!currencyToAdd) return
|
||||
setAccounts((current) => ({
|
||||
...current,
|
||||
[currencyToAdd]: { ...EMPTY_ACCOUNT },
|
||||
}))
|
||||
setActiveCurrency(currencyToAdd)
|
||||
setCurrencyToAdd('')
|
||||
}
|
||||
|
||||
function removeActiveCurrency() {
|
||||
if (activeCurrency === 'SEK') return
|
||||
setAccounts((current) => {
|
||||
const next = { ...current }
|
||||
delete next[activeCurrency]
|
||||
return next
|
||||
})
|
||||
setActiveCurrency('SEK')
|
||||
}
|
||||
|
||||
function reloadServerAccounts() {
|
||||
accountsRef.current = serverAccounts
|
||||
setAccounts(serverAccounts)
|
||||
if (!serverAccounts[activeCurrency]) setActiveCurrency('SEK')
|
||||
setHasExternalUpdate(false)
|
||||
}
|
||||
|
||||
function validationError(): string | null {
|
||||
// An added foreign-currency tab is a real configuration immediately. It
|
||||
// must have an IBAN before save; the Remove action discards placeholders.
|
||||
for (const currency of configuredCurrencies) {
|
||||
const account = normalizeInvoicePaymentAccount(accounts[currency] ?? EMPTY_ACCOUNT)
|
||||
if (account.clearing_number && !/^\d{4,5}$/.test(account.clearing_number)) {
|
||||
return t('validation_clearing', { currency })
|
||||
}
|
||||
if (account.account_number && !/^\d{6,12}$/.test(account.account_number)) {
|
||||
return t('validation_account_number', { currency })
|
||||
}
|
||||
if (account.bankgiro && !validateBankgiroNumber(account.bankgiro)) {
|
||||
return t('validation_bankgiro', { currency })
|
||||
}
|
||||
if (account.plusgiro && !validatePlusgiroNumber(account.plusgiro)) {
|
||||
return t('validation_plusgiro', { currency })
|
||||
}
|
||||
if (account.swish && !isValidSwish(normaliseSwish(account.swish))) {
|
||||
return t('validation_swish', { currency })
|
||||
}
|
||||
if (account.iban && !/^[A-Z]{2}\d{2}[A-Z0-9]{11,30}$/.test(account.iban)) {
|
||||
return t('validation_iban', { currency })
|
||||
}
|
||||
if (account.bic && !/^[A-Z]{6}[A-Z0-9]{2}([A-Z0-9]{3})?$/.test(account.bic)) {
|
||||
return t('validation_bic', { currency })
|
||||
}
|
||||
if (currency !== 'SEK' && !account.iban) {
|
||||
return t('validation_foreign_iban', { currency })
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (hasExternalUpdate) {
|
||||
toast({
|
||||
title: t('conflict_title'),
|
||||
description: t('conflict_description'),
|
||||
variant: 'destructive',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const error = validationError()
|
||||
if (error) {
|
||||
toast({ title: t('validation_title'), description: error, variant: 'destructive' })
|
||||
return
|
||||
}
|
||||
|
||||
const normalized = Object.fromEntries([
|
||||
[
|
||||
'SEK',
|
||||
normalizeInvoicePaymentAccount(accounts.SEK ?? EMPTY_ACCOUNT),
|
||||
],
|
||||
...configuredCurrencies.filter((currency) => currency !== 'SEK').map((currency) => [
|
||||
currency,
|
||||
normalizeInvoicePaymentAccount(accounts[currency] ?? EMPTY_ACCOUNT),
|
||||
]),
|
||||
]) as Partial<Record<Currency, InvoicePaymentAccount>>
|
||||
const sek = normalized.SEK!
|
||||
const updates: Partial<CompanySettings> = {
|
||||
invoice_payment_accounts: normalized,
|
||||
// The legacy fields are an exact nullable SEK mirror. Clearing SEK is
|
||||
// intentional and must not leave stale payment instructions behind.
|
||||
bank_name: sek.bank_name,
|
||||
clearing_number: sek.clearing_number,
|
||||
account_number: sek.account_number,
|
||||
bankgiro: sek.bankgiro,
|
||||
plusgiro: sek.plusgiro,
|
||||
swish: sek.swish,
|
||||
iban: sek.iban,
|
||||
bic: sek.bic,
|
||||
}
|
||||
|
||||
setIsSaving(true)
|
||||
try {
|
||||
const response = await fetch('/api/settings', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(updates),
|
||||
})
|
||||
if (!response.ok) {
|
||||
const result = await response.json()
|
||||
throw new Error(typeof result.error === 'string' ? result.error : t('save_failed'))
|
||||
}
|
||||
accountsRef.current = normalized
|
||||
setAccounts(normalized)
|
||||
onUpdate(updates)
|
||||
toast({ title: t('saved_title'), description: t('saved_description') })
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: t('save_failed_title'),
|
||||
description: error instanceof Error ? getUserErrorMessage(error) : t('save_failed'),
|
||||
variant: 'destructive',
|
||||
})
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{t('heading')}
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">{t('description')}</p>
|
||||
</div>
|
||||
|
||||
{hasExternalUpdate && (
|
||||
<div
|
||||
role="alert"
|
||||
className="flex flex-col gap-3 rounded-lg border border-border bg-muted/40 p-4 sm:flex-row sm:items-center sm:justify-between"
|
||||
>
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium">{t('conflict_title')}</p>
|
||||
<p className="text-sm text-muted-foreground">{t('conflict_description')}</p>
|
||||
</div>
|
||||
<Button type="button" variant="outline" size="sm" onClick={reloadServerAccounts}>
|
||||
{t('reload_server_values')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap gap-2" aria-label={t('currency_tabs_label')}>
|
||||
{configuredCurrencies.map((currency) => (
|
||||
<Button
|
||||
key={currency}
|
||||
type="button"
|
||||
size="sm"
|
||||
variant={activeCurrency === currency ? 'default' : 'outline'}
|
||||
onClick={() => setActiveCurrency(currency)}
|
||||
>
|
||||
{currency}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{availableCurrencies.length > 0 && (
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-end">
|
||||
<div className="w-full space-y-2 sm:max-w-52">
|
||||
<Label>{t('add_currency_label')}</Label>
|
||||
<Select
|
||||
value={currencyToAdd}
|
||||
onValueChange={(next) => setCurrencyToAdd(next as Currency)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={t('add_currency_placeholder')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableCurrencies.map((currency) => (
|
||||
<SelectItem key={currency} value={currency}>{currency}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Button type="button" variant="outline" onClick={addCurrency} disabled={!currencyToAdd}>
|
||||
{t('add_currency')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4 rounded-lg border border-border p-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h3 className="font-medium">{t('account_heading', { currency: activeCurrency })}</h3>
|
||||
{activeCurrency !== 'SEK' && (
|
||||
<p className="text-xs text-muted-foreground">{t('foreign_account_hint')}</p>
|
||||
)}
|
||||
</div>
|
||||
{activeCurrency !== 'SEK' && (
|
||||
<Button type="button" variant="ghost" size="sm" onClick={removeActiveCurrency}>
|
||||
{t('remove_currency')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
<div className="space-y-2">
|
||||
<Label>{t('bank_label')}</Label>
|
||||
<BankNameCombobox
|
||||
value={value(activeAccount, 'bank_name')}
|
||||
onChange={(next) => updateField('bank_name', next)}
|
||||
enableBankingEnabled={hasBankingExtension}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`payment-clearing-${activeCurrency}`}>{t('clearing_label')}</Label>
|
||||
<Input
|
||||
id={`payment-clearing-${activeCurrency}`}
|
||||
inputMode="numeric"
|
||||
maxLength={5}
|
||||
value={value(activeAccount, 'clearing_number')}
|
||||
onChange={(event) => updateField('clearing_number', event.target.value.replace(/\D/g, ''))}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`payment-account-${activeCurrency}`}>{t('account_number_label')}</Label>
|
||||
<Input
|
||||
id={`payment-account-${activeCurrency}`}
|
||||
inputMode="numeric"
|
||||
maxLength={12}
|
||||
value={value(activeAccount, 'account_number')}
|
||||
onChange={(event) => updateField('account_number', event.target.value.replace(/\D/g, ''))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`payment-bankgiro-${activeCurrency}`}>{t('bankgiro_label')}</Label>
|
||||
<Input
|
||||
id={`payment-bankgiro-${activeCurrency}`}
|
||||
value={value(activeAccount, 'bankgiro')}
|
||||
onChange={(event) => updateField('bankgiro', event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`payment-plusgiro-${activeCurrency}`}>{t('plusgiro_label')}</Label>
|
||||
<Input
|
||||
id={`payment-plusgiro-${activeCurrency}`}
|
||||
value={value(activeAccount, 'plusgiro')}
|
||||
onChange={(event) => updateField('plusgiro', event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`payment-swish-${activeCurrency}`}>{t('swish_label')}</Label>
|
||||
<Input
|
||||
id={`payment-swish-${activeCurrency}`}
|
||||
value={value(activeAccount, 'swish')}
|
||||
onChange={(event) => updateField('swish', event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
<div className="space-y-2 sm:col-span-2">
|
||||
<Label htmlFor={`payment-iban-${activeCurrency}`}>
|
||||
{t('iban_label')}{activeCurrency !== 'SEK' ? ` ${t('required_suffix')}` : ''}
|
||||
</Label>
|
||||
<Input
|
||||
id={`payment-iban-${activeCurrency}`}
|
||||
value={value(activeAccount, 'iban')}
|
||||
onChange={(event) => updateField('iban', event.target.value.toUpperCase())}
|
||||
placeholder="SE00 0000 0000 0000 0000 0000"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`payment-bic-${activeCurrency}`}>{t('bic_label')}</Label>
|
||||
<Input
|
||||
id={`payment-bic-${activeCurrency}`}
|
||||
maxLength={11}
|
||||
value={value(activeAccount, 'bic')}
|
||||
onChange={(event) => updateField('bic', event.target.value.toUpperCase())}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="button" onClick={save} disabled={isSaving || hasExternalUpdate}>
|
||||
{isSaving ? t('saving') : t('save')}
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,52 +1,26 @@
|
||||
'use client'
|
||||
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { BankDetailsForm, validateBankFields } from '@/components/settings/BankDetailsForm'
|
||||
import { InvoiceSettingsForm } from '@/components/settings/InvoiceSettingsForm'
|
||||
import { InvoicePaymentLinkSettings } from '@/components/settings/InvoicePaymentLinkSettings'
|
||||
import { InvoicePaymentAccountsSettings } from '@/components/settings/InvoicePaymentAccountsSettings'
|
||||
import { InvoiceEmailTextsSettings } from '@/components/settings/InvoiceEmailTextsSettings'
|
||||
import { InvoiceEmailRecipientsSettings } from '@/components/settings/InvoiceEmailRecipientsSettings'
|
||||
import { InvoicePreviewCard } from '@/components/settings/InvoicePreviewCard'
|
||||
import { PdfPrintSettings } from '@/components/settings/PdfPrintSettings'
|
||||
import { SettingsFormWrapper } from '@/components/settings/SettingsFormWrapper'
|
||||
import { SettingsLoadError } from '@/components/settings/SettingsLoadError'
|
||||
import { SettingsLoadingSkeleton } from '@/components/settings/SettingsLoadingSkeleton'
|
||||
import { useSettings } from '@/components/settings/useSettings'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import { normaliseSwish } from '@/lib/payments/swish'
|
||||
import { formatPlusgiroNumber } from '@/lib/bankgiro/luhn'
|
||||
import type { CompanySettings } from '@/types'
|
||||
import { getErrorMessage as getUserErrorMessage } from '@/lib/errors/get-error-message'
|
||||
|
||||
export function InvoicingSettingsContent() {
|
||||
const t = useTranslations('settings_invoicing')
|
||||
const { settings, isLoading, updateSettings, refetch } = useSettings()
|
||||
const { toast } = useToast()
|
||||
|
||||
if (isLoading) return <SettingsLoadingSkeleton />
|
||||
if (!settings) return <SettingsLoadError onRetry={refetch} />
|
||||
|
||||
function handleSave(formData: FormData) {
|
||||
const bankErrors = validateBankFields(formData)
|
||||
if (bankErrors.length > 0) {
|
||||
toast({
|
||||
title: t('bank_validation_title'),
|
||||
description: bankErrors.map(e => getUserErrorMessage(e)).join(', '),
|
||||
variant: 'destructive',
|
||||
})
|
||||
return {}
|
||||
}
|
||||
|
||||
const updates: Record<string, unknown> = {
|
||||
bank_name: formData.get('bank_name') as string,
|
||||
clearing_number: formData.get('clearing_number') as string,
|
||||
account_number: formData.get('account_number') as string,
|
||||
bankgiro: (formData.get('bankgiro') as string) || null,
|
||||
plusgiro: (formData.get('plusgiro') as string)?.trim()
|
||||
? formatPlusgiroNumber((formData.get('plusgiro') as string).trim())
|
||||
: null,
|
||||
swish: normaliseSwish(formData.get('swish') as string) || null,
|
||||
iban: (formData.get('iban') as string || '').replace(/\s/g, '').toUpperCase() || null,
|
||||
bic: (formData.get('bic') as string || '').replace(/\s/g, '').toUpperCase() || null,
|
||||
invoice_prefix: (formData.get('invoice_prefix') as string) || null,
|
||||
next_invoice_number: parseInt(formData.get('next_invoice_number') as string) || 1,
|
||||
next_arrival_number: parseInt(formData.get('next_arrival_number') as string) || 1,
|
||||
@@ -74,11 +48,10 @@ export function InvoicingSettingsContent() {
|
||||
<InvoicePreviewCard settings={settings} />
|
||||
</div>
|
||||
|
||||
<InvoicePaymentAccountsSettings settings={settings} onUpdate={updateSettings} />
|
||||
|
||||
<SettingsFormWrapper onSave={handleSave} className="space-y-8">
|
||||
<BankDetailsForm settings={settings} />
|
||||
<div className="border-t border-border pt-8">
|
||||
<InvoiceSettingsForm settings={settings} />
|
||||
</div>
|
||||
<InvoiceSettingsForm settings={settings} />
|
||||
</SettingsFormWrapper>
|
||||
|
||||
{/* Payment link opt-in: saves individually via toggle switch */}
|
||||
@@ -91,6 +64,11 @@ export function InvoicingSettingsContent() {
|
||||
<PdfPrintSettings settings={settings} onUpdate={updateSettings} />
|
||||
</div>
|
||||
|
||||
{/* Fixed invoice email recipients: explicit save */}
|
||||
<div className="border-t border-border pt-8">
|
||||
<InvoiceEmailRecipientsSettings settings={settings} onUpdate={updateSettings} />
|
||||
</div>
|
||||
|
||||
{/* Invoice email texts: autosaves on blur */}
|
||||
<div className="border-t border-border pt-8">
|
||||
<InvoiceEmailTextsSettings settings={settings} onUpdate={updateSettings} />
|
||||
|
||||
Reference in New Issue
Block a user