feat(webshop-orders): Orders page with per-store, per-payment-method booking (#1525)
* feat(webshop-orders): schema, types and error codes for the orders surface webshop_orders (order/refund rows, financial-freeze trigger, member select/update RLS, no DELETE) + webshop_store_settings (per-store payment method -> account map), source_type 'webshop_order', multi-store index drop, customer_country, and a one-time woo cursor reset so the switch-over backfills and cross-marks existing feed rows. Tables classified in the full-archive export; pg-real coverage for RLS, freeze and CHECK. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * feat(webshop-orders): core service (ingest, booking lines) upsertWebshopOrders: two-phase order/refund upsert with FX enrichment, legacy-feed cross-marking, frozen-row protection and field-wise jsonb comparisons (Postgres does not preserve object key order). Booking-line builder: per-rate VAT split with SIGNED buckets (discounts book as revenue reductions), refund mirroring, 3740 residual, per-store account prefill, and advisory export/EU + OSS warnings. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * feat(webshop-orders): API routes for list, booking, invoicing and mapping Booking is draft -> atomic claim -> commit (conditional link-back closes the concurrent double-book race; a lost claim cancels the voucher-free draft). Legacy-feed guard honors transactions.is_ignored on both the book and create-invoice paths. Invoice conversion reuses buildInvoiceWriteData for an unnumbered draft with dominant-rate fallback and drift-safe unit prices. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * feat(webshop-orders): Orders page, booking/invoice dialogs and gated nav /orders lists per-store orders with status tabs (server-side filters), exception chips and one action per row. Booking dialog prefills from the per-store payment-method mapping with an opt-in remember; invoice dialog converts to a draft kundfaktura. The Order nav item renders only for companies with an active WooCommerce connection or existing order rows (Shopify deliberately excluded until its sync writes webshop_orders). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * feat(woocommerce): switch the order sync to webshop_orders, multi-store The sync maps rich wc/v3 payloads (billing, line/shipping/fee taxes, refund allocations with parent-prorated VAT fallback) and upserts order rows instead of transactions-inbox rows; already-imported feed rows stay bookable and get cross-marked. Multi-store: several active connections per company, per-store panel cards with the account-mapping editor. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * docs(webshop-orders): decision log entries and ratchet baseline Baseline moves DOWN only: naive-ore-round 638 -> 637 via roundOre adoption; hand-rolled invariants stay at 115 (ACCOUNT_NUMBER_RE imported, not inlined). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(webshop-orders): resolve PR #1525 review findings and CI failures Review batch (Superagent, CodeRabbit, Swedish compliance review): - Mutual-exclusion claims: booking guards invoice_id, invoice link-back guards journal_entry_id AND treats zero matched rows as the conflict it is (409 + rollback), closing both TOCTOU races. - Freeze v2 migration (20260812124858): the link columns themselves are protected: invoice links immutable, journal links clearable only while the entry is still a draft (the booking rollback path). - Scraped orgnr no longer auto-written to customers.org_number; rate fallback applies only on single-VAT-bucket orders; refunds get their own WEBSHOP_ORDER_REFUND_NOT_CONVERTIBLE code; VAT advisories outrank the invoice-mode hint in the booking dialog. - Ingest compares every synced field (billing corrections no longer drop as unchanged); sync guards absent refunds arrays; /sync aggregates per-store results; panel disables all cards while a request runs; orders page separates load failure from empty; account field explains itself. CI: regenerated skills/accounted-api; pg tests restructured for transaction-abort/rollback semantics + freeze-link coverage; unresolvable- expression ceiling 375 -> 378 with documented reason (partial-update payloads in ingest, shapes covered by unit tests). Declined: CodeRabbit docstring-coverage advisory (house style: comments only where the code cannot say it). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Mattsson
co-authored by
Claude Fable 5
Claude Fable 5
parent
89cfa82f2f
commit
c35b2547fb
@@ -45,6 +45,7 @@ import {
|
||||
PanelLeftClose,
|
||||
Library,
|
||||
BookCheck,
|
||||
ShoppingCart,
|
||||
} from 'lucide-react'
|
||||
import { getBranding } from '@/lib/branding/service'
|
||||
import { ENABLED_EXTENSION_IDS as _ENABLED_EXTENSION_IDS } from '@/lib/extensions/_generated/enabled-extensions'
|
||||
@@ -81,6 +82,10 @@ interface DashboardNavProps {
|
||||
// switched on. Drives visibility of the Kostnadsställen & projekt row:
|
||||
// same mechanism as paysSalaries: fetched by the dashboard layout.
|
||||
dimensionsEnabled?: boolean
|
||||
// Whether the company has a webshop hooked up (active WooCommerce/Shopify
|
||||
// connection, or existing webshop_orders rows). Drives visibility of the
|
||||
// Order row: same mechanism as paysSalaries, fetched by the layout.
|
||||
hasWebshop?: boolean
|
||||
isSandbox?: boolean
|
||||
extensionNavItems?: ExtensionNavItem[]
|
||||
// Signed-in user's full name + email: drives the bottom-left account
|
||||
@@ -101,6 +106,7 @@ type NavLabelKey =
|
||||
| 'kpi'
|
||||
| 'invoice_inbox'
|
||||
| 'invoices'
|
||||
| 'sales_orders'
|
||||
| 'customers'
|
||||
| 'articles'
|
||||
| 'supplier_invoices'
|
||||
@@ -162,6 +168,10 @@ interface NavItem {
|
||||
// company_settings.dimensions_enabled (UI-visibility gate only; the pages
|
||||
// and APIs work regardless, dimensions plan §2).
|
||||
requiresDimensions?: boolean
|
||||
// Webshop surfaces: visible only when the company has an active
|
||||
// WooCommerce/Shopify connection or already-imported order rows.
|
||||
// UI-visibility gate only; the page and APIs work regardless.
|
||||
requiresWebshop?: boolean
|
||||
// Paywall surfaces: hidden unless the active company holds this paid
|
||||
// capability. Cosmetic only, the page and API gates are the real
|
||||
// enforcement; this just keeps the sidebar honest for non-payers.
|
||||
@@ -191,6 +201,11 @@ const navItems: NavItem[] = [
|
||||
{ href: '/transactions', labelKey: 'transactions', icon: ArrowLeftRight, group: 'arbeta' },
|
||||
{ href: '/pending', labelKey: 'review', icon: ClipboardCheck, group: 'arbeta' },
|
||||
{ href: '/invoices', labelKey: 'invoices', icon: ReceiptText, group: 'arbeta' },
|
||||
// Webshop orders: visible only for companies that actually have a webshop
|
||||
// hooked up (active WooCommerce/Shopify connection or existing order rows).
|
||||
// Deliberately NOT capability-gated: a company whose entitlement lapsed
|
||||
// must still reach its already-imported orders (accounting underlag).
|
||||
{ href: '/orders', labelKey: 'sales_orders', icon: ShoppingCart, group: 'arbeta', requiresWebshop: true },
|
||||
{ href: '/supplier-invoices', labelKey: 'supplier_invoices', icon: Wallet, group: 'arbeta' },
|
||||
{ href: '/salary', labelKey: 'salary', icon: HandCoins, group: 'arbeta', employerOnly: true },
|
||||
// Körjournal is deliberately hidden from the nav; the /mileage route stays live.
|
||||
@@ -268,7 +283,7 @@ const groupLabelKey: Record<Exclude<GroupKey, 'top'>, string> = {
|
||||
skatt: 'group_tax',
|
||||
}
|
||||
|
||||
export default function DashboardNav({ companyName: _companyName, entityType, paysSalaries = false, dimensionsEnabled = false, isSandbox = false, extensionNavItems = [], userName = null, userEmail = null, initialUiState }: DashboardNavProps) {
|
||||
export default function DashboardNav({ companyName: _companyName, entityType, paysSalaries = false, dimensionsEnabled = false, hasWebshop = false, isSandbox = false, extensionNavItems = [], userName = null, userEmail = null, initialUiState }: DashboardNavProps) {
|
||||
const pathname = usePathname()
|
||||
const router = useRouter()
|
||||
const supabase = useRealtimeSupabase()
|
||||
@@ -485,6 +500,9 @@ export default function DashboardNav({ companyName: _companyName, entityType, pa
|
||||
// Dimension surfaces are hidden until the company opts in via the
|
||||
// bookkeeping settings toggle (company_settings.dimensions_enabled).
|
||||
if (item.requiresDimensions && !dimensionsEnabled) return false
|
||||
// Webshop surfaces are hidden until a store is connected (or order rows
|
||||
// already exist from a since-disconnected store).
|
||||
if (item.requiresWebshop && !hasWebshop) return false
|
||||
// Paywalled surfaces (e.g. the AI-only Dokumentinkorg) are hidden unless
|
||||
// the active company holds the capability. The page + API gates enforce
|
||||
// the paywall; this keeps the sidebar from advertising a dead workspace.
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useLocale, useTranslations } from 'next-intl'
|
||||
import { getErrorMessage, type ErrorLocale } from '@/lib/errors/get-error-message'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import { VTD_CLASS, VTH_CLASS } from '@/components/ui/dry-table'
|
||||
import { cn, formatCurrency } from '@/lib/utils'
|
||||
import type { WebshopOrder } from '@/types'
|
||||
|
||||
interface CreateInvoiceFromOrderDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
order: WebshopOrder
|
||||
onCreated: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* Order -> DRAFT kundfaktura (confirm up front, convention 10): the dialog
|
||||
* states exactly what will happen, the user confirms, and lands in the draft
|
||||
* to review before sending. The customer is matched by e-mail or created from
|
||||
* the order's billing snapshot server-side; the scraped orgnr is shown here
|
||||
* for the user to eyeball since it never auto-lands on legal invoice fields.
|
||||
*/
|
||||
export default function CreateInvoiceFromOrderDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
order,
|
||||
onCreated,
|
||||
}: CreateInvoiceFromOrderDialogProps) {
|
||||
const t = useTranslations('webshop_orders')
|
||||
const locale = useLocale() as ErrorLocale
|
||||
const router = useRouter()
|
||||
const { toast } = useToast()
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
const customerLabel =
|
||||
order.customer_company || order.customer_name || t('invoice_no_customer')
|
||||
|
||||
async function handleCreate() {
|
||||
setSubmitting(true)
|
||||
try {
|
||||
const res = await fetch(`/api/webshop-orders/${order.id}/create-invoice`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({}),
|
||||
})
|
||||
const json = (await res.json()) as { invoice_id?: string }
|
||||
if (!res.ok || !json.invoice_id) {
|
||||
toast({
|
||||
title: t('invoice_create_failed'),
|
||||
description: getErrorMessage(json, { statusCode: res.status, locale }),
|
||||
variant: 'destructive',
|
||||
})
|
||||
return
|
||||
}
|
||||
toast({ title: t('invoice_created') })
|
||||
onCreated()
|
||||
router.push(`/invoices/${json.invoice_id}`)
|
||||
} catch {
|
||||
toast({ title: t('invoice_create_failed'), variant: 'destructive' })
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('invoice_title', { number: order.order_number })}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t('invoice_description', { customer: customerLabel })}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 text-sm">
|
||||
<div className="space-y-1">
|
||||
<div>{customerLabel}</div>
|
||||
{order.customer_email && (
|
||||
<div className="text-muted-foreground">{order.customer_email}</div>
|
||||
)}
|
||||
{order.customer_orgnr && (
|
||||
<div className="text-muted-foreground">
|
||||
{t('invoice_orgnr_hint', { orgnr: order.customer_orgnr })}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{order.line_items.length > 0 && (
|
||||
<table className="w-full border-collapse text-[13px]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className={VTH_CLASS}>{t('invoice_col_item')}</th>
|
||||
<th className={cn(VTH_CLASS, 'text-right')}>{t('invoice_col_amount')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{order.line_items.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td className={VTD_CLASS}>
|
||||
{item.quantity} × {item.name}
|
||||
</td>
|
||||
<td className={cn(VTD_CLASS, 'text-right tabular-nums')}>
|
||||
{formatCurrency(item.total + item.total_tax, order.currency)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between text-[13px]">
|
||||
<span className="text-muted-foreground">{t('invoice_total')}</span>
|
||||
<span className="tabular-nums">{formatCurrency(order.total, order.currency)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={submitting}>
|
||||
{t('cancel')}
|
||||
</Button>
|
||||
<Button onClick={handleCreate} disabled={submitting}>
|
||||
{submitting ? t('invoice_creating') : t('invoice_confirm')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
'use client'
|
||||
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import JournalEntryForm, { type FormLine } from '@/components/bookkeeping/JournalEntryForm'
|
||||
import {
|
||||
buildOrderBookingLines,
|
||||
resolveBookingWarnings,
|
||||
resolvePaymentAccount,
|
||||
} from '@/lib/webshop-orders/booking-lines'
|
||||
import { formatCurrency, formatDate } from '@/lib/utils'
|
||||
import { ACCOUNT_NUMBER_RE } from '@/lib/invariants/account-number'
|
||||
import type { WebshopOrder, WebshopStoreSettings } from '@/types'
|
||||
|
||||
interface OrderBookingDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
order: WebshopOrder
|
||||
storeSettings: WebshopStoreSettings | null
|
||||
onBooked: () => void
|
||||
onSettingsSaved: (settings: WebshopStoreSettings) => void
|
||||
}
|
||||
|
||||
/**
|
||||
* Books one order/refund row: prefilled lines from the per-store payment-
|
||||
* method mapping, fully editable in the shared JournalEntryForm (manual-base
|
||||
* doctrine: prefill never auto-books). The "remember" opt-in writes the
|
||||
* chosen counter-account back to the store mapping AFTER a successful
|
||||
* booking, mirroring the prefill-plus-explicit-override editor pattern.
|
||||
*/
|
||||
export default function OrderBookingDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
order,
|
||||
storeSettings,
|
||||
onBooked,
|
||||
onSettingsSaved,
|
||||
}: OrderBookingDialogProps) {
|
||||
const t = useTranslations('webshop_orders')
|
||||
const resolved = useMemo(
|
||||
() => resolvePaymentAccount(order, storeSettings),
|
||||
[order, storeSettings],
|
||||
)
|
||||
const [paymentAccount, setPaymentAccount] = useState(resolved.account)
|
||||
const [remember, setRemember] = useState(false)
|
||||
|
||||
const isRefund = order.row_type === 'refund'
|
||||
const fxUnresolved = order.currency.toUpperCase() !== 'SEK' && order.total_sek === null
|
||||
const accountValid = ACCOUNT_NUMBER_RE.test(paymentAccount)
|
||||
|
||||
const initialLines = useMemo<FormLine[] | null>(() => {
|
||||
if (fxUnresolved || !accountValid) return null
|
||||
try {
|
||||
return buildOrderBookingLines({
|
||||
order,
|
||||
settings: storeSettings,
|
||||
paymentAccount,
|
||||
}).map((line) => ({
|
||||
account_number: line.account_number,
|
||||
debit_amount: line.debit_amount ? line.debit_amount.toFixed(2) : '',
|
||||
credit_amount: line.credit_amount ? line.credit_amount.toFixed(2) : '',
|
||||
line_description: line.line_description ?? '',
|
||||
...(line.currency
|
||||
? {
|
||||
currency: line.currency,
|
||||
amount_in_currency: line.amount_in_currency,
|
||||
exchange_rate: line.exchange_rate,
|
||||
}
|
||||
: {}),
|
||||
}))
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}, [order, storeSettings, paymentAccount, fxUnresolved, accountValid])
|
||||
|
||||
const methodLabel = order.payment_method_title || order.payment_method || ''
|
||||
|
||||
async function persistMapping() {
|
||||
if (!order.payment_method) return
|
||||
const map = {
|
||||
...(storeSettings?.payment_method_account_map ?? {}),
|
||||
[order.payment_method]: { mode: 'book' as const, account: paymentAccount },
|
||||
}
|
||||
try {
|
||||
const res = await fetch('/api/webshop-orders/settings', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
platform: order.platform,
|
||||
store_scope: order.store_scope,
|
||||
payment_method_account_map: map,
|
||||
}),
|
||||
})
|
||||
if (res.ok) {
|
||||
const json = (await res.json()) as { data: WebshopStoreSettings }
|
||||
onSettingsSaved(json.data)
|
||||
}
|
||||
} catch {
|
||||
// Remember is best-effort; the booking itself already succeeded.
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-h-[90vh] max-w-3xl overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{isRefund
|
||||
? t('book_refund_title', { number: order.order_number })
|
||||
: t('book_title', { number: order.order_number })}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{formatDate(order.paid_date ?? order.order_date)}
|
||||
{' · '}
|
||||
{formatCurrency(order.total, order.currency)}
|
||||
{methodLabel ? ` · ${methodLabel}` : ''}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{fxUnresolved ? (
|
||||
<p className="text-sm text-muted-foreground">{t('fx_unresolved')}</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* One attn line (convention 6), priority order: a VAT compliance
|
||||
warning always outranks the invoice-mode convenience hint
|
||||
(Swedish review: the hint must never suppress a real
|
||||
cross-border VAT advisory). */}
|
||||
{(() => {
|
||||
const warnings = resolveBookingWarnings(order)
|
||||
if (warnings.length > 0) {
|
||||
return (
|
||||
<p className="attn text-[12.5px]">{t(`warning_${warnings[0]}`)}</p>
|
||||
)
|
||||
}
|
||||
if (resolved.invoiceMode && !isRefund) {
|
||||
return <p className="attn text-[12.5px]">{t('invoice_mode_hint')}</p>
|
||||
}
|
||||
return null
|
||||
})()}
|
||||
<div className="flex flex-wrap items-end gap-4">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="order-payment-account" className="text-xs">
|
||||
{t('payment_account_label')}
|
||||
</Label>
|
||||
<Input
|
||||
id="order-payment-account"
|
||||
value={paymentAccount}
|
||||
onChange={(e) => setPaymentAccount(e.target.value.trim())}
|
||||
inputMode="numeric"
|
||||
maxLength={4}
|
||||
className="w-28 tabular-nums"
|
||||
aria-invalid={!accountValid}
|
||||
aria-describedby={!accountValid ? 'order-payment-account-error' : undefined}
|
||||
/>
|
||||
{!accountValid && (
|
||||
<p
|
||||
id="order-payment-account-error"
|
||||
className="text-xs text-destructive"
|
||||
role="alert"
|
||||
>
|
||||
{t('invalid_account')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{order.payment_method && (
|
||||
<label className="flex items-center gap-2 pb-2 text-[12.5px] text-muted-foreground">
|
||||
<Checkbox
|
||||
checked={remember}
|
||||
onCheckedChange={(v) => setRemember(v === true)}
|
||||
/>
|
||||
{t('remember_account', { method: methodLabel })}
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{initialLines && (
|
||||
<JournalEntryForm
|
||||
key={`${order.id}-${paymentAccount}`}
|
||||
bare
|
||||
initialLines={initialLines}
|
||||
initialDate={order.paid_date ?? order.order_date}
|
||||
initialDescription={
|
||||
isRefund
|
||||
? `Återbetalning order ${order.order_number}`
|
||||
: methodLabel
|
||||
? `Order ${order.order_number} (${methodLabel})`
|
||||
: `Order ${order.order_number}`
|
||||
}
|
||||
sourceType="webshop_order"
|
||||
sourceId={order.id}
|
||||
submitUrl={`/api/webshop-orders/${order.id}/book`}
|
||||
onEntryCreated={() => {
|
||||
if (remember) void persistMapping()
|
||||
onBooked()
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import {
|
||||
SettingsGroup,
|
||||
SettingsRow,
|
||||
SettingsRowEnd,
|
||||
SettingsRowNote,
|
||||
SettingsInput,
|
||||
} from '@/components/settings/SettingsRows'
|
||||
import { ACCOUNT_NUMBER_RE } from '@/lib/invariants/account-number'
|
||||
import type { WebshopPaymentMethodPolicy, WebshopPlatform, WebshopStoreSettings } from '@/types'
|
||||
|
||||
interface PaymentMethodMappingFormProps {
|
||||
platform: WebshopPlatform
|
||||
storeScope: string
|
||||
/**
|
||||
* Payment methods observed on this store's orders. Omitted: derived from a
|
||||
* sample of the store's synced orders.
|
||||
*/
|
||||
methods?: Array<{ method: string; title: string | null }>
|
||||
}
|
||||
|
||||
type DraftPolicy = { mode: 'book'; account: string } | { mode: 'invoice' }
|
||||
|
||||
/**
|
||||
* Per-store payment-method -> account mapping (prefill only; never books).
|
||||
* Fönster language: flat hairline rows, save appears only when dirty.
|
||||
* "Faktureras" marks a method as invoice-flow: the booking dialog then nudges
|
||||
* toward Skapa faktura for those orders.
|
||||
*/
|
||||
export function PaymentMethodMappingForm({
|
||||
platform,
|
||||
storeScope,
|
||||
methods,
|
||||
}: PaymentMethodMappingFormProps) {
|
||||
const t = useTranslations('webshop_orders')
|
||||
const { toast } = useToast()
|
||||
const [saved, setSaved] = useState<Record<string, WebshopPaymentMethodPolicy>>({})
|
||||
const [draft, setDraft] = useState<Record<string, DraftPolicy>>({})
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [derivedMethods, setDerivedMethods] = useState<
|
||||
Array<{ method: string; title: string | null }>
|
||||
>([])
|
||||
|
||||
useEffect(() => {
|
||||
if (methods !== undefined) return
|
||||
let cancelled = false
|
||||
fetch(
|
||||
`/api/webshop-orders?platform=${platform}&store_scope=${encodeURIComponent(storeScope)}&limit=200`,
|
||||
)
|
||||
.then((r) => (r.ok ? r.json() : { data: [] }))
|
||||
.then(
|
||||
(json: {
|
||||
data: Array<{ payment_method: string | null; payment_method_title: string | null }>
|
||||
}) => {
|
||||
if (cancelled) return
|
||||
const seen = new Map<string, string | null>()
|
||||
for (const row of json.data ?? []) {
|
||||
if (row.payment_method && !seen.has(row.payment_method)) {
|
||||
seen.set(row.payment_method, row.payment_method_title)
|
||||
}
|
||||
}
|
||||
setDerivedMethods(
|
||||
Array.from(seen.entries()).map(([method, title]) => ({ method, title })),
|
||||
)
|
||||
},
|
||||
)
|
||||
.catch(() => undefined)
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [methods, platform, storeScope])
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
fetch(
|
||||
`/api/webshop-orders/settings?platform=${platform}&store_scope=${encodeURIComponent(storeScope)}`,
|
||||
)
|
||||
.then((r) => (r.ok ? r.json() : { data: [] }))
|
||||
.then((json: { data: WebshopStoreSettings[] }) => {
|
||||
if (cancelled) return
|
||||
const map = json.data[0]?.payment_method_account_map ?? {}
|
||||
setSaved(map)
|
||||
setDraft(map as Record<string, DraftPolicy>)
|
||||
})
|
||||
.catch(() => undefined)
|
||||
.finally(() => {
|
||||
if (!cancelled) setLoading(false)
|
||||
})
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [platform, storeScope])
|
||||
|
||||
// Methods seen on orders plus any mapped-but-no-longer-seen leftovers.
|
||||
const rows = useMemo(() => {
|
||||
const source = methods ?? derivedMethods
|
||||
const known = new Map(source.map((m) => [m.method, m.title]))
|
||||
for (const method of Object.keys(saved)) {
|
||||
if (!known.has(method)) known.set(method, null)
|
||||
}
|
||||
return Array.from(known.entries()).map(([method, title]) => ({ method, title }))
|
||||
}, [methods, derivedMethods, saved])
|
||||
|
||||
const dirty = useMemo(() => JSON.stringify(draft) !== JSON.stringify(saved), [draft, saved])
|
||||
|
||||
const setMode = (method: string, mode: 'book' | 'invoice') => {
|
||||
setDraft((prev) => {
|
||||
const current = prev[method]
|
||||
if (mode === 'invoice') return { ...prev, [method]: { mode: 'invoice' } }
|
||||
return {
|
||||
...prev,
|
||||
[method]: {
|
||||
mode: 'book',
|
||||
account: current?.mode === 'book' ? current.account : '1680',
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const setAccount = (method: string, account: string) => {
|
||||
setDraft((prev) => ({ ...prev, [method]: { mode: 'book', account } }))
|
||||
}
|
||||
|
||||
const invalid = Object.values(draft).some(
|
||||
(p) => p.mode === 'book' && !ACCOUNT_NUMBER_RE.test(p.account),
|
||||
)
|
||||
|
||||
async function save() {
|
||||
setSaving(true)
|
||||
try {
|
||||
const res = await fetch('/api/webshop-orders/settings', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
platform,
|
||||
store_scope: storeScope,
|
||||
payment_method_account_map: draft,
|
||||
}),
|
||||
})
|
||||
if (!res.ok) throw new Error(`save failed: ${res.status}`)
|
||||
const json = (await res.json()) as { data: WebshopStoreSettings }
|
||||
setSaved(json.data.payment_method_account_map)
|
||||
setDraft(json.data.payment_method_account_map as Record<string, DraftPolicy>)
|
||||
toast({ title: t('mapping_saved') })
|
||||
} catch {
|
||||
toast({ title: t('mapping_save_failed'), variant: 'destructive' })
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading || rows.length === 0) return null
|
||||
|
||||
return (
|
||||
<SettingsGroup label={t('mapping_title')}>
|
||||
<p className="px-1 pb-1 text-xs leading-relaxed text-muted-foreground">
|
||||
{t('mapping_intro')}
|
||||
</p>
|
||||
{rows.map(({ method, title }) => {
|
||||
const policy = draft[method]
|
||||
const mode = policy?.mode ?? 'book'
|
||||
const account = policy?.mode === 'book' ? policy.account : ''
|
||||
return (
|
||||
<SettingsRow key={method} label={title || method}>
|
||||
<SettingsRowEnd>
|
||||
<select
|
||||
value={policy ? mode : 'unmapped'}
|
||||
onChange={(e) => {
|
||||
if (e.target.value === 'unmapped') {
|
||||
setDraft((prev) => {
|
||||
const next = { ...prev }
|
||||
delete next[method]
|
||||
return next
|
||||
})
|
||||
} else {
|
||||
setMode(method, e.target.value as 'book' | 'invoice')
|
||||
}
|
||||
}}
|
||||
className="rounded-full border border-border bg-transparent px-3 py-[5px] text-[13px]"
|
||||
aria-label={t('mapping_mode_aria', { method: title || method })}
|
||||
>
|
||||
<option value="unmapped">{t('mapping_mode_unmapped')}</option>
|
||||
<option value="book">{t('mapping_mode_book')}</option>
|
||||
<option value="invoice">{t('mapping_mode_invoice')}</option>
|
||||
</select>
|
||||
{policy?.mode === 'book' && (
|
||||
<SettingsInput
|
||||
value={account}
|
||||
onChange={(e) => setAccount(method, e.target.value.trim())}
|
||||
inputMode="numeric"
|
||||
maxLength={4}
|
||||
className="w-20 text-right tabular-nums"
|
||||
aria-label={t('mapping_account_aria', { method: title || method })}
|
||||
/>
|
||||
)}
|
||||
</SettingsRowEnd>
|
||||
</SettingsRow>
|
||||
)
|
||||
})}
|
||||
<div className="flex items-center justify-between px-1 pt-3">
|
||||
<SettingsRowNote>{t('mapping_note')}</SettingsRowNote>
|
||||
{dirty && (
|
||||
<Button size="sm" onClick={save} disabled={saving || invalid}>
|
||||
{saving ? t('mapping_saving') : t('mapping_save')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
)
|
||||
}
|
||||
@@ -34,6 +34,7 @@ const VISIBLE_SOURCE_TYPES: Array<{ key: JournalEntrySourceType; labelKey: strin
|
||||
{ key: 'salary_payment', labelKey: 'salary_payment' },
|
||||
{ key: 'bank_transaction', labelKey: 'bank_transaction' },
|
||||
{ key: 'reminder_fee', labelKey: 'reminder_fee' },
|
||||
{ key: 'webshop_order', labelKey: 'webshop_order' },
|
||||
{ key: 'vat_settlement', labelKey: 'vat_settlement' },
|
||||
{ key: 'opening_balance', labelKey: 'opening_balance' },
|
||||
{ key: 'year_end', labelKey: 'year_end' },
|
||||
@@ -58,6 +59,7 @@ const SV_LABELS: Record<string, string> = {
|
||||
salary_payment: 'Lön',
|
||||
bank_transaction: 'Banktransaktioner',
|
||||
reminder_fee: 'Påminnelseavgifter',
|
||||
webshop_order: 'Webshopordrar',
|
||||
vat_settlement: 'Momsredovisning',
|
||||
opening_balance: 'Ingående balanser',
|
||||
year_end: 'Bokslut',
|
||||
|
||||
Reference in New Issue
Block a user