554 lines
30 KiB
TypeScript
554 lines
30 KiB
TypeScript
import { ConnectAccountDialog } from '@/components/open-banking/connect-account-dialog';
|
|
import { ConnectionStatusBadge } from '@/components/open-banking/connection-status-badge';
|
|
import { DisconnectDialog } from '@/components/open-banking/disconnect-dialog';
|
|
import { UpdateCredentialsDialog } from '@/components/open-banking/update-credentials-dialog';
|
|
import { UpgradeDialog } from '@/components/subscription/upgrade-dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card';
|
|
import { CreateButton } from '@/components/ui/create-button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { Spinner } from '@/components/ui/spinner';
|
|
import AppLayout from '@/layouts/app-layout';
|
|
import SettingsLayout from '@/layouts/settings/layout';
|
|
import { CONNECT_PROVIDERS } from '@/lib/connect-providers';
|
|
import { getCsrfToken } from '@/lib/csrf';
|
|
import type { SharedData } from '@/types';
|
|
import type { BankingConnection } from '@/types/banking';
|
|
import { __ } from '@/utils/i18n';
|
|
import { Head, router, usePage, usePoll } from '@inertiajs/react';
|
|
import {
|
|
AlertCircle,
|
|
ArrowRight,
|
|
KeyRound,
|
|
MoreHorizontal,
|
|
RefreshCw,
|
|
RotateCcw,
|
|
Unplug,
|
|
Wallet,
|
|
} from 'lucide-react';
|
|
import { useEffect, useState } from 'react';
|
|
import { toast } from 'sonner';
|
|
|
|
interface Props {
|
|
connections: BankingConnection[];
|
|
}
|
|
|
|
export default function ConnectionsPage({ connections }: Props) {
|
|
const { auth, flash, subscriptionsEnabled } = usePage<SharedData>().props;
|
|
const isDemoAccount = auth?.isDemoAccount ?? false;
|
|
const isFreePlan = subscriptionsEnabled && !auth?.hasProPlan;
|
|
const [connectDialogOpen, setConnectDialogOpen] = useState(false);
|
|
const [upgradeDialogOpen, setUpgradeDialogOpen] = useState(false);
|
|
const [disconnectConnection, setDisconnectConnection] =
|
|
useState<BankingConnection | null>(null);
|
|
const [updateCredentialsConnection, setUpdateCredentialsConnection] =
|
|
useState<BankingConnection | null>(null);
|
|
const [reconnectingId, setReconnectingId] = useState<string | null>(null);
|
|
|
|
const hasSyncing = connections.some(
|
|
(c) => c.status === 'active' && !c.last_synced_at,
|
|
);
|
|
|
|
const { start, stop } = usePoll(5000, {}, { autoStart: false });
|
|
|
|
useEffect(() => {
|
|
if (flash?.error) {
|
|
toast.error(flash.error);
|
|
}
|
|
if (flash?.success) {
|
|
toast.success(flash.success);
|
|
}
|
|
}, [flash?.error, flash?.success]);
|
|
|
|
useEffect(() => {
|
|
if (hasSyncing) {
|
|
start();
|
|
} else {
|
|
stop();
|
|
}
|
|
}, [hasSyncing, start, stop]);
|
|
|
|
function handleSync(connection: BankingConnection) {
|
|
router.post(`/settings/connections/${connection.id}/sync`);
|
|
}
|
|
|
|
async function handleReconnect(connection: BankingConnection) {
|
|
setReconnectingId(connection.id);
|
|
try {
|
|
const response = await fetch(
|
|
`/open-banking/connections/${connection.id}/reauthorize`,
|
|
{
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Accept: 'application/json',
|
|
'X-XSRF-TOKEN': getCsrfToken(),
|
|
},
|
|
},
|
|
);
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json().catch(() => ({}));
|
|
|
|
if (typeof data.redirect === 'string') {
|
|
window.location.href = data.redirect;
|
|
return;
|
|
}
|
|
|
|
throw new Error(
|
|
data.error || __('Failed to start re-authorization.'),
|
|
);
|
|
}
|
|
|
|
const data = await response.json();
|
|
window.location.href = data.redirect_url;
|
|
} catch (e) {
|
|
toast.error(
|
|
e instanceof Error
|
|
? e.message
|
|
: __('Failed to reconnect. Please try again.'),
|
|
);
|
|
setReconnectingId(null);
|
|
}
|
|
}
|
|
|
|
function isApiKeyProvider(connection: BankingConnection): boolean {
|
|
return CONNECT_PROVIDERS.some(
|
|
(provider) => provider.providerKey === connection.provider,
|
|
);
|
|
}
|
|
|
|
function hasAuthError(connection: BankingConnection): boolean {
|
|
return (
|
|
connection.status === 'error' &&
|
|
isApiKeyProvider(connection) &&
|
|
(connection.error_message?.includes('Authentication failed') ??
|
|
false)
|
|
);
|
|
}
|
|
|
|
function isEnableBankingAuthError(connection: BankingConnection): boolean {
|
|
return (
|
|
connection.status === 'error' &&
|
|
connection.provider === 'enablebanking' &&
|
|
(connection.error_message?.includes('Authentication failed') ??
|
|
false)
|
|
);
|
|
}
|
|
|
|
function canReconnect(connection: BankingConnection): boolean {
|
|
return (
|
|
connection.provider === 'enablebanking' &&
|
|
(connection.status === 'expired' ||
|
|
isEnableBankingAuthError(connection))
|
|
);
|
|
}
|
|
|
|
function canManageAccounts(connection: BankingConnection): boolean {
|
|
return (
|
|
connection.provider === 'enablebanking' &&
|
|
['active', 'expired', 'error'].includes(connection.status)
|
|
);
|
|
}
|
|
|
|
function formatDate(dateString: string | null): string {
|
|
if (!dateString) return __('Never');
|
|
return new Date(dateString).toLocaleDateString(undefined, {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
});
|
|
}
|
|
|
|
return (
|
|
<AppLayout>
|
|
<Head title={__('Connections')} />
|
|
|
|
<SettingsLayout>
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div>
|
|
<h3 className="text-lg font-medium">
|
|
{__('Bank Connections')}
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
{__(
|
|
'Manage your connected bank accounts for automatic transaction syncing.',
|
|
)}
|
|
</p>
|
|
</div>
|
|
<CreateButton
|
|
onClick={() =>
|
|
isFreePlan
|
|
? setUpgradeDialogOpen(true)
|
|
: setConnectDialogOpen(true)
|
|
}
|
|
disabled={isDemoAccount}
|
|
>
|
|
{__('Connect Bank')}
|
|
</CreateButton>
|
|
</div>
|
|
|
|
{connections.length === 0 ? (
|
|
<Card>
|
|
<CardContent className="flex flex-col items-center justify-center py-12">
|
|
<p className="text-sm text-muted-foreground">
|
|
{__(
|
|
'No bank connections yet. Connect a bank to automatically sync your transactions.',
|
|
)}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{connections.map((connection) => (
|
|
<Card key={connection.id}>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<div className="space-y-1">
|
|
<CardTitle className="text-base">
|
|
{connection.aspsp_name}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{connection.aspsp_country}{' '}
|
|
·{' '}
|
|
{connection.accounts_count}{' '}
|
|
{connection.accounts_count === 1
|
|
? __('account')
|
|
: __('accounts')}
|
|
</CardDescription>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<ConnectionStatusBadge
|
|
status={connection.status}
|
|
lastSyncedAt={
|
|
connection.last_synced_at
|
|
}
|
|
/>
|
|
{connection.status === 'expired' &&
|
|
canReconnect(connection) && (
|
|
<Button
|
|
size="sm"
|
|
disabled={
|
|
reconnectingId ===
|
|
connection.id
|
|
}
|
|
onClick={() =>
|
|
handleReconnect(
|
|
connection,
|
|
)
|
|
}
|
|
>
|
|
{reconnectingId ===
|
|
connection.id ? (
|
|
<Spinner className="mr-1.5 size-3" />
|
|
) : (
|
|
<RotateCcw className="mr-1.5 h-3 w-3" />
|
|
)}
|
|
{__('Reconnect')}
|
|
</Button>
|
|
)}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{connection.status ===
|
|
'awaiting_mapping' && (
|
|
<DropdownMenuItem
|
|
onClick={() =>
|
|
router.visit(
|
|
`/open-banking/connections/${connection.id}/map-accounts`,
|
|
)
|
|
}
|
|
>
|
|
<ArrowRight className="mr-2 h-4 w-4" />
|
|
{__('Map Accounts')}
|
|
</DropdownMenuItem>
|
|
)}
|
|
{canManageAccounts(
|
|
connection,
|
|
) && (
|
|
<DropdownMenuItem
|
|
onClick={() =>
|
|
router.visit(
|
|
`/open-banking/connections/${connection.id}/accounts`,
|
|
)
|
|
}
|
|
>
|
|
<Wallet className="mr-2 h-4 w-4" />
|
|
{__(
|
|
'Manage Accounts',
|
|
)}
|
|
</DropdownMenuItem>
|
|
)}
|
|
{hasAuthError(
|
|
connection,
|
|
) && (
|
|
<DropdownMenuItem
|
|
onClick={() =>
|
|
setUpdateCredentialsConnection(
|
|
connection,
|
|
)
|
|
}
|
|
>
|
|
<KeyRound className="mr-2 h-4 w-4" />
|
|
{__(
|
|
'Update Credentials',
|
|
)}
|
|
</DropdownMenuItem>
|
|
)}
|
|
{canReconnect(
|
|
connection,
|
|
) && (
|
|
<DropdownMenuItem
|
|
onClick={() =>
|
|
handleReconnect(
|
|
connection,
|
|
)
|
|
}
|
|
disabled={
|
|
reconnectingId ===
|
|
connection.id
|
|
}
|
|
>
|
|
<RotateCcw className="mr-2 h-4 w-4" />
|
|
{__('Reconnect')}
|
|
</DropdownMenuItem>
|
|
)}
|
|
{(connection.status ===
|
|
'active' ||
|
|
(connection.status ===
|
|
'error' &&
|
|
!isEnableBankingAuthError(
|
|
connection,
|
|
))) && (
|
|
<DropdownMenuItem
|
|
onClick={() =>
|
|
handleSync(
|
|
connection,
|
|
)
|
|
}
|
|
>
|
|
<RefreshCw className="mr-2 h-4 w-4" />
|
|
{connection.status ===
|
|
'error'
|
|
? __('Retry')
|
|
: __(
|
|
'Sync Now',
|
|
)}
|
|
</DropdownMenuItem>
|
|
)}
|
|
<DropdownMenuItem
|
|
onClick={() =>
|
|
setDisconnectConnection(
|
|
connection,
|
|
)
|
|
}
|
|
className="text-destructive"
|
|
>
|
|
<Unplug className="mr-2 h-4 w-4" />
|
|
{__('Disconnect')}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex gap-6 text-sm text-muted-foreground">
|
|
{connection.status ===
|
|
'awaiting_mapping' ? (
|
|
<span>
|
|
{__(
|
|
'Accounts need to be mapped before syncing can begin.',
|
|
)}
|
|
</span>
|
|
) : connection.status ===
|
|
'active' &&
|
|
!connection.last_synced_at ? (
|
|
<span className="flex items-center gap-1.5">
|
|
<Spinner className="size-3" />
|
|
{[
|
|
'indexacapital',
|
|
'interactivebrokers',
|
|
].includes(
|
|
connection.provider,
|
|
)
|
|
? __(
|
|
'Syncing balances…',
|
|
)
|
|
: __(
|
|
'Syncing transactions and balances…',
|
|
)}
|
|
</span>
|
|
) : (
|
|
<span>
|
|
{__('Last synced')}:{' '}
|
|
{formatDate(
|
|
connection.last_synced_at,
|
|
)}
|
|
</span>
|
|
)}
|
|
{connection.valid_until && (
|
|
<span>
|
|
{__('Expires')}:{' '}
|
|
{formatDate(
|
|
connection.valid_until,
|
|
)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{connection.status === 'error' && (
|
|
<div className="mt-3 rounded-lg border border-destructive/30 bg-destructive/5 p-3 dark:bg-destructive/10">
|
|
<div className="flex items-start gap-2">
|
|
<AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-destructive dark:text-destructive-foreground" />
|
|
<div className="space-y-2">
|
|
<p className="text-sm text-destructive dark:text-foreground">
|
|
{connection.error_message ??
|
|
__(
|
|
'An unexpected error occurred during sync.',
|
|
)}
|
|
</p>
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
{hasAuthError(
|
|
connection,
|
|
) && (
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
className="h-7 text-xs"
|
|
onClick={() =>
|
|
setUpdateCredentialsConnection(
|
|
connection,
|
|
)
|
|
}
|
|
>
|
|
<KeyRound className="mr-1.5 h-3 w-3" />
|
|
{__(
|
|
'Update Credentials',
|
|
)}
|
|
</Button>
|
|
)}
|
|
{isEnableBankingAuthError(
|
|
connection,
|
|
) ? (
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
className="h-7 text-xs"
|
|
disabled={
|
|
reconnectingId ===
|
|
connection.id
|
|
}
|
|
onClick={() =>
|
|
handleReconnect(
|
|
connection,
|
|
)
|
|
}
|
|
>
|
|
{reconnectingId ===
|
|
connection.id ? (
|
|
<Spinner className="mr-1.5 size-3" />
|
|
) : (
|
|
<RotateCcw className="mr-1.5 h-3 w-3" />
|
|
)}
|
|
{__(
|
|
'Reconnect',
|
|
)}
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
className="h-7 text-xs"
|
|
onClick={() =>
|
|
handleSync(
|
|
connection,
|
|
)
|
|
}
|
|
>
|
|
<RefreshCw className="mr-1.5 h-3 w-3" />
|
|
{__(
|
|
'Retry',
|
|
)}
|
|
</Button>
|
|
)}
|
|
<a
|
|
href="https://discord.gg/m8hUhx6D9D"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground"
|
|
>
|
|
{__(
|
|
'Need help? Join our Discord',
|
|
)}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<ConnectAccountDialog
|
|
open={connectDialogOpen}
|
|
onOpenChange={setConnectDialogOpen}
|
|
connections={connections}
|
|
/>
|
|
|
|
<UpgradeDialog
|
|
open={upgradeDialogOpen}
|
|
onOpenChange={setUpgradeDialogOpen}
|
|
title={__('Bank connections are a paid feature')}
|
|
description={__(
|
|
'Subscribe to a plan to automatically sync your transactions and balances straight from your bank.',
|
|
)}
|
|
source="connections"
|
|
/>
|
|
|
|
{disconnectConnection && (
|
|
<DisconnectDialog
|
|
connection={disconnectConnection}
|
|
open={!!disconnectConnection}
|
|
onOpenChange={(open) => {
|
|
if (!open) setDisconnectConnection(null);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{updateCredentialsConnection && (
|
|
<UpdateCredentialsDialog
|
|
connection={updateCredentialsConnection}
|
|
open={!!updateCredentialsConnection}
|
|
onOpenChange={(open) => {
|
|
if (!open) setUpdateCredentialsConnection(null);
|
|
}}
|
|
/>
|
|
)}
|
|
</SettingsLayout>
|
|
</AppLayout>
|
|
);
|
|
}
|