103 lines
2.5 KiB
TypeScript
103 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useRef, useState } from 'react'
|
|
import { Loader2 } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import Script from 'next/script'
|
|
|
|
export interface Bank {
|
|
name: string
|
|
country: string
|
|
logo?: string
|
|
bic?: string
|
|
}
|
|
|
|
interface BankSelectorProps {
|
|
onSelect: (bank: Bank) => void
|
|
selectedBank?: Bank | null
|
|
isLoading?: boolean
|
|
className?: string
|
|
country?: string
|
|
sandbox?: boolean
|
|
}
|
|
|
|
export function BankSelector({
|
|
onSelect,
|
|
isLoading = false,
|
|
className,
|
|
country = 'SE',
|
|
sandbox = true, // Default to sandbox for development
|
|
}: BankSelectorProps) {
|
|
const widgetRef = useRef<HTMLElement | null>(null)
|
|
const [scriptLoaded, setScriptLoaded] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (!scriptLoaded) return
|
|
|
|
const widget = widgetRef.current
|
|
if (!widget) return
|
|
|
|
const handleSelected = (e: Event) => {
|
|
const customEvent = e as CustomEvent
|
|
const detail = customEvent.detail as {
|
|
name: string
|
|
country: string
|
|
psuType: string
|
|
sandbox: boolean
|
|
}
|
|
|
|
onSelect({
|
|
name: detail.name,
|
|
country: detail.country,
|
|
})
|
|
}
|
|
|
|
widget.addEventListener('selected', handleSelected)
|
|
|
|
return () => {
|
|
widget.removeEventListener('selected', handleSelected)
|
|
}
|
|
}, [onSelect, scriptLoaded])
|
|
|
|
const handleScriptLoad = () => {
|
|
setScriptLoaded(true)
|
|
}
|
|
|
|
if (isLoading) {
|
|
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>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={cn('space-y-3', className)}>
|
|
<Script
|
|
src="https://tilisy.enablebanking.com/lib/widgets.umd.min.js"
|
|
onLoad={handleScriptLoad}
|
|
strategy="afterInteractive"
|
|
/>
|
|
<link
|
|
href="https://tilisy.enablebanking.com/lib/widgets.css"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
{/* @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' }}
|
|
/>
|
|
|
|
<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>
|
|
</div>
|
|
)
|
|
}
|