feat: redesign bank selector with popular banks, search, and one-click connect

Replace the external Enable Banking widget with a custom component that fetches banks from our API, shows popular Swedish banks in a grid, provides search filtering, and connects on click without an intermediate selection step. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-04 21:20:32 +01:00
parent 17eecfdb71
commit bd12e2aaf5
2 changed files with 180 additions and 108 deletions
@@ -1,9 +1,10 @@
 'use client'

-import { useCallback, useEffect, useRef, useState } from 'react'
-import { Loader2 } from 'lucide-react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Loader2, Search, RefreshCw } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import Script from 'next/script'

 export interface Bank {
  name: string
@@ -13,104 +14,197 @@ export interface Bank {
 }

 interface BankSelectorProps {
-  onSelect: (bank: Bank) => void
-  selectedBank?: Bank | null
-  isLoading?: boolean
+  onConnect: (bank: Bank) => void
+  isConnecting?: boolean
+  connectingBankName?: string | null
  className?: string
-  country?: string
-  sandbox?: boolean
 }

+const POPULAR_BANK_NAMES = [
+  'Nordea',
+  'SEB',
+  'Swedbank',
+  'Handelsbanken',
+  'Länsförsäkringar',
+  'Skandia',
+  'Danske Bank',
+]
+
 export function BankSelector({
-  onSelect,
-  isLoading = false,
+  onConnect,
+  isConnecting = false,
+  connectingBankName = null,
  className,
-  country = 'SE',
-  sandbox = process.env.NEXT_PUBLIC_ENABLE_BANKING_SANDBOX === 'true',
 }: BankSelectorProps) {
-  const widgetRef = useRef<HTMLElement | null>(null)
-  const [scriptReady, setScriptReady] = useState(false)
+  const [banks, setBanks] = useState<Bank[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')

-  // Stable ref for onSelect so the event listener never goes stale
-  const onSelectRef = useRef(onSelect)
-  useEffect(() => {
-    onSelectRef.current = onSelect
-  }, [onSelect])
-
-  const handleSelected = useCallback((e: Event) => {
-    const customEvent = e as CustomEvent
-    const detail = customEvent.detail as {
-      name: string
-      country: string
-      psuType: string
-      sandbox: boolean
+  const fetchBanks = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await fetch('/api/extensions/ext/enable-banking/banks')
+      if (!res.ok) throw new Error('Kunde inte hämta banklistan')
+      const data = await res.json()
+      setBanks(data.banks || [])
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Något gick fel')
+    } finally {
+      setLoading(false)
    }
-
-    onSelectRef.current({
-      name: detail.name,
-      country: detail.country,
-    })
  }, [])

-  // Attach the event listener once the script is ready and the widget is in the DOM.
-  // Using onReady instead of onLoad ensures the script has fully executed and
-  // the custom element has been defined/upgraded before we interact with it.
  useEffect(() => {
-    if (!scriptReady) return
+    fetchBanks()
+  }, [fetchBanks])

-    const widget = widgetRef.current
-    if (!widget) return
+  const popularBanks = useMemo(
+    () =>
+      POPULAR_BANK_NAMES.map((name) =>
+        banks.find((b) => b.name === name)
+      ).filter((b): b is Bank => b !== undefined),
+    [banks]
+  )

-    widget.addEventListener('selected', handleSelected)
-
-    return () => {
-      widget.removeEventListener('selected', handleSelected)
+  const filteredBanks = useMemo(() => {
+    if (!searchQuery.trim()) {
+      // Show all banks except popular ones
+      const popularSet = new Set(POPULAR_BANK_NAMES)
+      return banks
+        .filter((b) => !popularSet.has(b.name))
+        .sort((a, b) => a.name.localeCompare(b.name, 'sv'))
    }
-  }, [scriptReady, handleSelected])
+    const q = searchQuery.toLowerCase()
+    return banks
+      .filter((b) => b.name.toLowerCase().includes(q))
+      .sort((a, b) => a.name.localeCompare(b.name, 'sv'))
+  }, [banks, searchQuery])

-  if (isLoading) {
+  if (loading) {
    return (
-      <div className={cn('flex items-center justify-center p-8', className)}>
-        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-        <span className="ml-2 text-sm text-muted-foreground">Ansluter...</span>
+      <div className={cn('space-y-3', className)}>
+        {/* Popular banks skeleton */}
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2">
+          {Array.from({ length: 7 }).map((_, i) => (
+            <div
+              key={i}
+              className="h-11 rounded-lg bg-muted animate-pulse"
+            />
+          ))}
+        </div>
+        <div className="h-9 rounded-md bg-muted animate-pulse" />
+        <div className="space-y-1.5">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div
+              key={i}
+              className="h-10 rounded-lg bg-muted animate-pulse"
+            />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className={cn('flex flex-col items-center gap-3 py-8', className)}>
+        <p className="text-sm text-muted-foreground">{error}</p>
+        <Button variant="outline" size="sm" onClick={fetchBanks}>
+          <RefreshCw className="mr-2 h-3.5 w-3.5" />
+          Försök igen
+        </Button>
      </div>
    )
  }

  return (
    <div className={cn('space-y-3', className)}>
-      <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"
-      />
-
-      {/* Only render the custom element after the script has defined it,
-          so the browser can upgrade it immediately with full interactivity */}
-      {scriptReady ? (
-        // @ts-expect-error - Enable Banking custom element
-        <enablebanking-aspsp-list
-          ref={widgetRef}
-          country={country}
-          psu-type="business"
-          service="AIS"
-          {...(sandbox ? { sandbox: true } : {})}
-          style={{ minHeight: '200px' }}
-        />
-      ) : (
-        <div className="flex items-center justify-center" style={{ minHeight: '200px' }}>
-          <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-          <span className="ml-2 text-sm text-muted-foreground">Laddar bankwidget...</span>
+      {/* Popular banks grid */}
+      {popularBanks.length > 0 && !searchQuery.trim() && (
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2">
+          {popularBanks.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" />
+                ) : bank.logo ? (
+                  <img
+                    src={bank.logo}
+                    alt=""
+                    className="h-4 w-4 object-contain"
+                  />
+                ) : null}
+                <span className="truncate">{bank.name}</span>
+              </button>
+            )
+          })}
        </div>
      )}

-      <p className="text-xs text-muted-foreground text-center">
-        {sandbox ? 'Sandbox-läge: Använd testbanker för utveckling' : 'Välj din bank för att fortsätta'}
-      </p>
+      {/* Search */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Sök bland alla banker..."
+          className="pl-9 h-9"
+        />
+      </div>
+
+      {/* Bank list */}
+      <div className="max-h-[280px] overflow-auto space-y-1 rounded-lg border p-1">
+        {filteredBanks.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-6">
+            {searchQuery.trim() ? 'Inga banker matchar sökningen' : 'Inga banker tillgängliga'}
+          </p>
+        ) : (
+          filteredBanks.map((bank) => {
+            const connecting = isConnecting && connectingBankName === bank.name
+            return (
+              <button
+                key={bank.name}
+                type="button"
+                disabled={isConnecting}
+                onClick={() => onConnect(bank)}
+                className={cn(
+                  'flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors text-left',
+                  'hover:bg-muted/50',
+                  connecting && 'bg-primary/5',
+                  isConnecting && !connecting && 'opacity-50 cursor-not-allowed'
+                )}
+              >
+                {connecting ? (
+                  <Loader2 className="h-4 w-4 animate-spin flex-shrink-0" />
+                ) : bank.logo ? (
+                  <img
+                    src={bank.logo}
+                    alt=""
+                    className="h-4 w-4 object-contain flex-shrink-0"
+                  />
+                ) : (
+                  <div className="h-4 w-4 flex-shrink-0" />
+                )}
+                <span>{bank.name}</span>
+              </button>
+            )
+          })
+        )}
+      </div>
    </div>
  )
 }
@@ -2,10 +2,9 @@

 import { useState, useEffect } from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
 import { useToast } from '@/components/ui/use-toast'
 import { DestructiveConfirmDialog, useDestructiveConfirm } from '@/components/ui/destructive-confirm-dialog'
-import { Loader2, Landmark } from 'lucide-react'
+import { Loader2 } from 'lucide-react'
 import { createClient } from '@/lib/supabase/client'
 import { BankSelector, type Bank } from './BankSelector'
 import { BankConnectionStatus } from './BankConnectionStatus'
@@ -24,8 +23,8 @@ export default function BankingSettingsPanel() {
  const [bankConnections, setBankConnections] = useState<BankConnection[]>([])
  const [syncingConnectionId, setSyncingConnectionId] = useState<string | null>(null)
  const [isConnecting, setIsConnecting] = useState(false)
+  const [connectingBankName, setConnectingBankName] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(true)
-  const [selectedBank, setSelectedBank] = useState<Bank | null>(null)

  useEffect(() => {
    fetchConnections()
@@ -46,14 +45,15 @@ export default function BankingSettingsPanel() {
    setIsLoading(false)
  }

-  async function handleConnectBank(bankName: string, bankCountry: string) {
+  async function handleConnectBank(bank: Bank) {
    setIsConnecting(true)
+    setConnectingBankName(bank.name)

    try {
      const response = await fetch('/api/extensions/ext/enable-banking/connect', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ aspsp_name: bankName, aspsp_country: bankCountry }),
+        body: JSON.stringify({ aspsp_name: bank.name, aspsp_country: bank.country }),
      })

      const data = await response.json()
@@ -70,6 +70,7 @@ export default function BankingSettingsPanel() {
        variant: 'destructive',
      })
      setIsConnecting(false)
+      setConnectingBankName(null)
    }
  }

@@ -183,35 +184,12 @@ export default function BankingSettingsPanel() {
            Välj din bank nedan för att koppla ditt konto via PSD2.
          </CardDescription>
        </CardHeader>
-        <CardContent className="space-y-4">
+        <CardContent>
          <BankSelector
-            onSelect={setSelectedBank}
-            isLoading={isConnecting}
+            onConnect={handleConnectBank}
+            isConnecting={isConnecting}
+            connectingBankName={connectingBankName}
          />
-          {selectedBank && (
-            <div className="flex items-center justify-between p-4 border rounded-lg bg-muted/50">
-              <div className="flex items-center gap-3">
-                <Landmark className="h-5 w-5 text-primary" />
-                <div>
-                  <p className="text-sm font-medium">{selectedBank.name}</p>
-                  <p className="text-xs text-muted-foreground">{selectedBank.country}</p>
-                </div>
-              </div>
-              <Button
-                onClick={() => handleConnectBank(selectedBank.name, selectedBank.country)}
-                disabled={isConnecting}
-              >
-                {isConnecting ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Ansluter...
-                  </>
-                ) : (
-                  'Anslut bank'
-                )}
-              </Button>
-            </div>
-          )}
        </CardContent>
      </Card>