User feedback implementations (#21)
* feat: enhance bank selector with search functionality and error handling * feat: enhance invoice item layout and add mobile delete functionality
This commit is contained in:
Mattsson
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { createClient } from '@/lib/supabase/client'
|
||||
import { useForm, useFieldArray, Controller } from 'react-hook-form'
|
||||
@@ -69,6 +69,7 @@ export default function NewInvoicePage() {
|
||||
const [, setDefaultNotes] = useState<string | null>(null)
|
||||
const [isCreateCustomerOpen, setIsCreateCustomerOpen] = useState(false)
|
||||
const [isCreatingCustomer, setIsCreatingCustomer] = useState(false)
|
||||
const pendingCustomerRef = useRef<Customer | null>(null)
|
||||
|
||||
const {
|
||||
register,
|
||||
@@ -107,6 +108,16 @@ export default function NewInvoicePage() {
|
||||
const watchCustomerId = watch('customer_id')
|
||||
const watchDocumentType = watch('document_type') as InvoiceDocumentType
|
||||
|
||||
// After customers state updates with the new customer, select it
|
||||
useEffect(() => {
|
||||
const pending = pendingCustomerRef.current
|
||||
if (pending && customers.some((c) => c.id === pending.id)) {
|
||||
setValue('customer_id', pending.id, { shouldValidate: true, shouldDirty: true })
|
||||
setSelectedCustomer(pending)
|
||||
pendingCustomerRef.current = null
|
||||
}
|
||||
}, [customers, setValue])
|
||||
|
||||
useEffect(() => {
|
||||
fetchCustomers()
|
||||
fetchDefaultNotes()
|
||||
@@ -189,8 +200,8 @@ export default function NewInvoicePage() {
|
||||
title: 'Kund skapad',
|
||||
description: `${data.name} har lagts till`,
|
||||
})
|
||||
setCustomers([...customers, result.data])
|
||||
setValue('customer_id', result.data.id)
|
||||
pendingCustomerRef.current = result.data
|
||||
setCustomers(prev => [...prev, result.data])
|
||||
setIsCreateCustomerOpen(false)
|
||||
}
|
||||
|
||||
@@ -426,11 +437,14 @@ export default function NewInvoicePage() {
|
||||
const lineTotal = (watchItems[index]?.quantity || 0) * (watchItems[index]?.unit_price || 0)
|
||||
const lineVat = Math.round(lineTotal * (watchItems[index]?.vat_rate ?? 25) / 100 * 100) / 100
|
||||
return (
|
||||
<div key={field.id}>
|
||||
{/* Desktop: 12-col grid */}
|
||||
<div className="hidden md:grid gap-4 md:grid-cols-12 items-start">
|
||||
<div className="md:col-span-3 space-y-2">
|
||||
<Label>Beskrivning</Label>
|
||||
<div
|
||||
key={field.id}
|
||||
className="rounded-lg border bg-card p-4 space-y-3 relative md:rounded-none md:border-0 md:bg-transparent md:p-0 md:space-y-0 md:grid md:grid-cols-12 md:gap-4 md:items-start"
|
||||
>
|
||||
{/* Description + mobile delete button */}
|
||||
<div className="flex items-start gap-2 md:contents">
|
||||
<div className="flex-1 space-y-1 md:col-span-3 md:space-y-2">
|
||||
<Label className="text-xs text-muted-foreground md:text-sm md:text-foreground">Beskrivning</Label>
|
||||
<Input
|
||||
placeholder="T.ex. Instagram-kampanj"
|
||||
{...register(`items.${index}.description`)}
|
||||
@@ -441,16 +455,31 @@ export default function NewInvoicePage() {
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="md:col-span-2 space-y-2">
|
||||
<Label>Antal</Label>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="shrink-0 min-h-[44px] min-w-[44px] -mr-2 -mt-1 md:hidden"
|
||||
onClick={() => remove(index)}
|
||||
disabled={fields.length === 1}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Antal, Enhet, à-pris */}
|
||||
<div className="grid grid-cols-3 gap-2 md:contents">
|
||||
<div className="space-y-1 md:col-span-2 md:space-y-2">
|
||||
<Label className="text-xs text-muted-foreground md:text-sm md:text-foreground">Antal</Label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
inputMode="decimal"
|
||||
{...register(`items.${index}.quantity`, { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 space-y-2">
|
||||
<Label>Enhet</Label>
|
||||
<div className="space-y-1 md:col-span-2 md:space-y-2">
|
||||
<Label className="text-xs text-muted-foreground md:text-sm md:text-foreground">Enhet</Label>
|
||||
<Controller
|
||||
name={`items.${index}.unit`}
|
||||
control={control}
|
||||
@@ -470,156 +499,61 @@ export default function NewInvoicePage() {
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 space-y-2">
|
||||
<Label>à-pris</Label>
|
||||
<div className="space-y-1 md:col-span-2 md:space-y-2">
|
||||
<Label className="text-xs text-muted-foreground md:text-sm md:text-foreground">à-pris</Label>
|
||||
<Input
|
||||
type="number"
|
||||
step="any"
|
||||
inputMode="decimal"
|
||||
{...register(`items.${index}.unit_price`, { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 space-y-2">
|
||||
<Label>Moms</Label>
|
||||
<Controller
|
||||
name={`items.${index}.vat_rate`}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
value={String(field.value ?? 25)}
|
||||
onValueChange={(v) => field.onChange(Number(v))}
|
||||
disabled={isRateLocked}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableRates.map((opt) => (
|
||||
<SelectItem key={opt.rate} value={String(opt.rate)}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-1 flex items-end">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => remove(index)}
|
||||
disabled={fields.length === 1}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile: compact card layout */}
|
||||
<div className="md:hidden rounded-lg border bg-card p-4 space-y-3 relative">
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="flex-1 space-y-1">
|
||||
<Label className="text-xs text-muted-foreground">Beskrivning</Label>
|
||||
<Input
|
||||
placeholder="T.ex. Instagram-kampanj"
|
||||
{...register(`items.${index}.description`)}
|
||||
/>
|
||||
{errors.items?.[index]?.description && (
|
||||
<p className="text-sm text-destructive">
|
||||
{errors.items[index].description?.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="shrink-0 min-h-[44px] min-w-[44px] -mr-2 -mt-1"
|
||||
onClick={() => remove(index)}
|
||||
disabled={fields.length === 1}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs text-muted-foreground">Antal</Label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
inputMode="decimal"
|
||||
{...register(`items.${index}.quantity`, { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs text-muted-foreground">Enhet</Label>
|
||||
<Controller
|
||||
name={`items.${index}.unit`}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{units.map((unit) => (
|
||||
<SelectItem key={unit} value={unit}>
|
||||
{unit}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs text-muted-foreground">à-pris</Label>
|
||||
<Input
|
||||
type="number"
|
||||
step="any"
|
||||
inputMode="decimal"
|
||||
{...register(`items.${index}.unit_price`, { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{isRateLocked ? (
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs text-muted-foreground">Moms</Label>
|
||||
<p className="text-sm py-2">
|
||||
{availableRates.find(r => r.rate === (watchItems[index]?.vat_rate ?? 25))?.label ?? `${watchItems[index]?.vat_rate ?? 25}%`}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs text-muted-foreground">Moms</Label>
|
||||
<Controller
|
||||
name={`items.${index}.vat_rate`}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
value={String(field.value ?? 25)}
|
||||
onValueChange={(v) => field.onChange(Number(v))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableRates.map((opt) => (
|
||||
<SelectItem key={opt.rate} value={String(opt.rate)}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between text-sm pt-1 border-t border-border/40">
|
||||
<span className="text-muted-foreground">Rad {index + 1}</span>
|
||||
<span className="font-medium tabular-nums">{formatCurrency(lineTotal + lineVat, watchCurrency)}</span>
|
||||
</div>
|
||||
{/* Moms */}
|
||||
<div className="space-y-1 md:col-span-2 md:space-y-2">
|
||||
<Label className="text-xs text-muted-foreground md:text-sm md:text-foreground">Moms</Label>
|
||||
<Controller
|
||||
name={`items.${index}.vat_rate`}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
value={String(field.value ?? 25)}
|
||||
onValueChange={(v) => field.onChange(Number(v))}
|
||||
disabled={isRateLocked}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableRates.map((opt) => (
|
||||
<SelectItem key={opt.rate} value={String(opt.rate)}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Desktop delete button */}
|
||||
<div className="hidden md:flex md:col-span-1 md:items-end">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => remove(index)}
|
||||
disabled={fields.length === 1}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Mobile summary row */}
|
||||
<div className="flex justify-between text-sm pt-1 border-t border-border/40 md:hidden">
|
||||
<span className="text-muted-foreground">Rad {index + 1}</span>
|
||||
<span className="font-medium tabular-nums">{formatCurrency(lineTotal + lineVat, watchCurrency)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -317,6 +317,16 @@ h1, h2, h3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide number input spinners */
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
/* Selection color */
|
||||
::selection {
|
||||
background: hsl(var(--primary) / 0.15);
|
||||
|
||||
@@ -42,6 +42,8 @@ export default function Step1EntityType({ initialData, onNext, isSaving }: Step1
|
||||
if (selected) {
|
||||
onNext({ entity_type: selected })
|
||||
}
|
||||
console.warn("Something went wrong")
|
||||
console.warn("Selected: ", selected)
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { Loader2 } from 'lucide-react'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import Script from 'next/script'
|
||||
|
||||
export interface Bank {
|
||||
name: string
|
||||
@@ -12,6 +10,14 @@ export interface Bank {
|
||||
bic?: string
|
||||
}
|
||||
|
||||
const POPULAR_SWEDISH_BANKS = [
|
||||
'Swedbank',
|
||||
'SEB',
|
||||
'Nordea',
|
||||
'Handelsbanken',
|
||||
'Danske Bank',
|
||||
]
|
||||
|
||||
interface BankSelectorProps {
|
||||
onConnect: (bank: Bank) => void
|
||||
isConnecting?: boolean
|
||||
@@ -19,19 +25,67 @@ interface BankSelectorProps {
|
||||
className?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Popular Swedish banks shown as quick-access buttons above the full widget.
|
||||
* Country is always 'SE' since we only support Swedish banks.
|
||||
*/
|
||||
const POPULAR_BANKS: Bank[] = [
|
||||
{ name: 'Nordea', country: 'SE' },
|
||||
{ name: 'SEB', country: 'SE' },
|
||||
{ name: 'Swedbank', country: 'SE' },
|
||||
{ name: 'Handelsbanken', country: 'SE' },
|
||||
{ name: 'Länsförsäkringar', country: 'SE' },
|
||||
{ name: 'Skandia', country: 'SE' },
|
||||
{ name: 'Danske Bank', country: 'SE' },
|
||||
]
|
||||
function BankCard({ bank, isConnecting, connectingBankName, onConnect }: {
|
||||
bank: Bank
|
||||
isConnecting: boolean
|
||||
connectingBankName: string | null
|
||||
onConnect: (bank: Bank) => void
|
||||
}) {
|
||||
const connecting = isConnecting && connectingBankName === bank.name
|
||||
|
||||
return (
|
||||
<button
|
||||
key={bank.name}
|
||||
type="button"
|
||||
disabled={isConnecting}
|
||||
onClick={() => onConnect(bank)}
|
||||
className={cn(
|
||||
'group flex items-center gap-3 p-4 border border-border rounded-lg bg-card text-left transition-all',
|
||||
'hover:border-primary hover:bg-muted',
|
||||
connecting && 'border-primary bg-muted',
|
||||
isConnecting && !connecting && 'opacity-50 cursor-not-allowed',
|
||||
)}
|
||||
>
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-lg border border-border bg-white dark:bg-gray-300 flex items-center justify-center overflow-hidden">
|
||||
{connecting ? (
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary" />
|
||||
) : bank.logo ? (
|
||||
<img
|
||||
src={bank.logo}
|
||||
alt={bank.name}
|
||||
className="w-12 h-12 object-contain p-1"
|
||||
/>
|
||||
) : (
|
||||
<svg
|
||||
className="h-6 w-6 text-muted-foreground"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<span className="flex-1 font-medium text-foreground group-hover:text-primary truncate">
|
||||
{bank.name}
|
||||
</span>
|
||||
<svg
|
||||
className="flex-shrink-0 h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export function BankSelector({
|
||||
onConnect,
|
||||
@@ -39,111 +93,130 @@ export function BankSelector({
|
||||
connectingBankName = null,
|
||||
className,
|
||||
}: BankSelectorProps) {
|
||||
const widgetRef = useRef<HTMLElement | null>(null)
|
||||
const [scriptReady, setScriptReady] = useState(false)
|
||||
const [banks, setBanks] = useState<Bank[]>([])
|
||||
const [isSandbox, setIsSandbox] = useState(true)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const searchRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
// Stable ref so the event listener never goes stale
|
||||
const onConnectRef = useRef(onConnect)
|
||||
useEffect(() => {
|
||||
onConnectRef.current = onConnect
|
||||
}, [onConnect])
|
||||
|
||||
const handleSelected = useCallback((e: Event) => {
|
||||
const detail = (e as CustomEvent).detail as {
|
||||
name: string
|
||||
country: string
|
||||
psuType: string
|
||||
sandbox: boolean
|
||||
async function fetchBanks() {
|
||||
try {
|
||||
const res = await fetch('/api/extensions/ext/enable-banking/banks')
|
||||
const data = await res.json()
|
||||
if (data.banks) {
|
||||
setBanks(data.banks as Bank[])
|
||||
}
|
||||
if (data.sandbox !== undefined) {
|
||||
setIsSandbox(data.sandbox)
|
||||
}
|
||||
} catch {
|
||||
setError('Kunde inte ladda banker')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
onConnectRef.current({
|
||||
name: detail.name,
|
||||
country: detail.country,
|
||||
})
|
||||
fetchBanks()
|
||||
}, [])
|
||||
|
||||
// Attach event listener once the script is ready and the widget is in the DOM
|
||||
useEffect(() => {
|
||||
if (!scriptReady) return
|
||||
const widget = widgetRef.current
|
||||
if (!widget) return
|
||||
const filteredBanks = banks.filter((bank) =>
|
||||
bank.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
)
|
||||
|
||||
widget.addEventListener('selected', handleSelected)
|
||||
return () => {
|
||||
widget.removeEventListener('selected', handleSelected)
|
||||
}
|
||||
}, [scriptReady, handleSelected])
|
||||
const showPopular = !isSandbox && !searchQuery
|
||||
const popularBanks = showPopular
|
||||
? filteredBanks.filter((bank) => POPULAR_SWEDISH_BANKS.includes(bank.name))
|
||||
: []
|
||||
const otherBanks = showPopular
|
||||
? filteredBanks.filter((bank) => !POPULAR_SWEDISH_BANKS.includes(bank.name))
|
||||
: filteredBanks
|
||||
|
||||
return (
|
||||
<div className={cn('space-y-4', className)}>
|
||||
{/* Popular banks — one-click connect */}
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted-foreground mb-2">Populära banker</p>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2">
|
||||
{POPULAR_BANKS.map((bank) => {
|
||||
const connecting = isConnecting && connectingBankName === bank.name
|
||||
return (
|
||||
<button
|
||||
key={bank.name}
|
||||
type="button"
|
||||
disabled={isConnecting}
|
||||
onClick={() => onConnect(bank)}
|
||||
className={cn(
|
||||
'flex items-center justify-center gap-2 rounded-lg border px-3 py-2.5 text-sm font-medium transition-colors',
|
||||
'hover:bg-muted/50 hover:border-primary/30',
|
||||
connecting && 'border-primary bg-primary/5',
|
||||
isConnecting && !connecting && 'opacity-50 cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
{connecting && (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
)}
|
||||
<span className="truncate">{bank.name}</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
{/* Search input */}
|
||||
<div className="relative">
|
||||
<svg
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
<input
|
||||
ref={searchRef}
|
||||
type="text"
|
||||
placeholder="Sök efter din bank..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10 pr-3 py-3 border border-border rounded-lg bg-background text-foreground text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Loading state */}
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Full bank list via Enable Banking widget — includes logos and search */}
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted-foreground mb-2">Alla banker</p>
|
||||
<Script
|
||||
src="https://tilisy.enablebanking.com/lib/widgets.umd.min.js"
|
||||
onReady={() => setScriptReady(true)}
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
<link
|
||||
href="https://tilisy.enablebanking.com/lib/widgets.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
{/* Error state */}
|
||||
{error && (
|
||||
<div className="rounded-lg border border-destructive/30 bg-destructive/10 p-4">
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{scriptReady ? (
|
||||
<div className={cn(
|
||||
'rounded-lg border overflow-hidden',
|
||||
isConnecting && 'pointer-events-none opacity-50'
|
||||
)}>
|
||||
{/* @ts-expect-error - Enable Banking custom element */}
|
||||
<enablebanking-aspsp-list
|
||||
ref={widgetRef}
|
||||
country="SE"
|
||||
psu-type="business"
|
||||
service="AIS"
|
||||
style={{ minHeight: '200px' }}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center rounded-lg border" style={{ minHeight: '200px' }}>
|
||||
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||
<span className="ml-2 text-sm text-muted-foreground">Laddar banker...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Bank grid */}
|
||||
{!isLoading && !error && (
|
||||
<>
|
||||
{filteredBanks.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{searchQuery
|
||||
? `Inga banker matchar "${searchQuery}"`
|
||||
: 'Inga banker tillgängliga'}
|
||||
</p>
|
||||
{searchQuery && (
|
||||
<p className="mt-1 text-xs text-muted-foreground/70">
|
||||
Försök med ett annat sökord
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-[400px] overflow-y-auto space-y-4">
|
||||
{popularBanks.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">Populära banker</h3>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{popularBanks.map((bank) => (
|
||||
<BankCard key={bank.name} bank={bank} isConnecting={isConnecting} connectingBankName={connectingBankName} onConnect={onConnect} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{popularBanks.length > 0 && otherBanks.length > 0 && (
|
||||
<h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider px-1">Alla banker</h3>
|
||||
)}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{otherBanks.map((bank) => (
|
||||
<BankCard key={bank.name} bank={bank} isConnecting={isConnecting} connectingBankName={connectingBankName} onConnect={onConnect} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Connecting overlay */}
|
||||
{isConnecting && connectingBankName && (
|
||||
<div className="flex items-center justify-center gap-2 p-3 rounded-lg bg-primary/5 border border-primary/20">
|
||||
<Loader2 className="h-4 w-4 animate-spin text-primary" />
|
||||
<span className="text-sm font-medium">Ansluter till {connectingBankName}...</span>
|
||||
<div className="flex items-center justify-center gap-2 p-3 rounded-lg bg-primary/10 border border-primary/30">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary" />
|
||||
<span className="text-sm font-medium text-foreground">Ansluter till {connectingBankName}...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,7 @@ import {
|
||||
startAuthorization,
|
||||
getASPSPs,
|
||||
deleteSession,
|
||||
isSandboxMode,
|
||||
type ASPSP,
|
||||
} from './lib/api-client'
|
||||
import { syncAccountTransactions } from './lib/sync'
|
||||
@@ -45,7 +46,7 @@ export const enableBankingExtension: Extension = {
|
||||
logo: aspsp.logo,
|
||||
bic: aspsp.bic,
|
||||
}))
|
||||
return NextResponse.json({ banks })
|
||||
return NextResponse.json({ banks, sandbox: isSandboxMode() })
|
||||
} catch (error) {
|
||||
log.error('Error fetching banks:', error)
|
||||
return NextResponse.json({
|
||||
@@ -54,7 +55,8 @@ export const enableBankingExtension: Extension = {
|
||||
{ name: 'SEB', country: 'SE', bic: 'ESSESESS' },
|
||||
{ name: 'Swedbank', country: 'SE', bic: 'SWEDSESS' },
|
||||
{ name: 'Handelsbanken', country: 'SE', bic: 'HANDSESS' },
|
||||
]
|
||||
],
|
||||
sandbox: isSandboxMode(),
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
@@ -168,7 +168,14 @@ async function authenticatedFetch(
|
||||
* Get list of supported banks (ASPSPs) for a country
|
||||
*/
|
||||
export async function getASPSPs(country: string = 'SE'): Promise<ASPSP[]> {
|
||||
const response = await authenticatedFetch(`/aspsps?country=${country}`)
|
||||
const psuType = process.env.ENABLE_BANKING_PSU_TYPE || 'business'
|
||||
const isSandbox = ENABLE_BANKING_API_URL.includes('tilisy')
|
||||
const params = new URLSearchParams({
|
||||
country,
|
||||
sandbox: String(isSandbox),
|
||||
psu_type: psuType,
|
||||
})
|
||||
const response = await authenticatedFetch(`/aspsps?${params.toString()}`)
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.text()
|
||||
@@ -446,6 +453,13 @@ export async function getTransactions(
|
||||
return transactions.map(tx => convertTransaction(tx, accountCurrency))
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the current configuration targets the sandbox API
|
||||
*/
|
||||
export function isSandboxMode(): boolean {
|
||||
return ENABLE_BANKING_API_URL.includes('tilisy')
|
||||
}
|
||||
|
||||
// Utility functions
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user