120 lines
4.9 KiB
TypeScript
120 lines
4.9 KiB
TypeScript
import { StepHeader } from '@/components/onboarding/step-header';
|
|
import { Button } from '@/components/ui/button';
|
|
import { CreatedAccount } from '@/hooks/use-onboarding-state';
|
|
import { formatAccountType } from '@/types/account';
|
|
import { __ } from '@/utils/i18n';
|
|
import { Check, CheckCircle2, Plus, Wallet } from 'lucide-react';
|
|
import { StepButton } from './step-button';
|
|
|
|
interface ExistingAccount {
|
|
id: string;
|
|
name: string;
|
|
name_iv: string;
|
|
type: string;
|
|
currency_code: string;
|
|
bank_id: string;
|
|
bank?: {
|
|
id: string;
|
|
name: string;
|
|
logo: string | null;
|
|
};
|
|
}
|
|
|
|
interface StepMoreAccountsProps {
|
|
createdAccounts: CreatedAccount[];
|
|
existingAccounts?: ExistingAccount[];
|
|
onAddMore: () => void;
|
|
onFinish: () => void;
|
|
}
|
|
|
|
export function StepMoreAccounts({
|
|
createdAccounts,
|
|
existingAccounts = [],
|
|
onAddMore,
|
|
onFinish,
|
|
}: StepMoreAccountsProps) {
|
|
const description = __(
|
|
'Would you like to add more accounts or continue to the dashboard?',
|
|
);
|
|
|
|
return (
|
|
<div className="flex animate-in flex-col items-center duration-500 fade-in slide-in-from-bottom-4">
|
|
<StepHeader
|
|
icon={Wallet}
|
|
iconContainerClassName="bg-gradient-to-br from-teal-400 to-cyan-500"
|
|
title={__('Great Progress!')}
|
|
description={description}
|
|
/>
|
|
|
|
<div className="mb-8 w-full max-w-md">
|
|
<h3 className="mb-3 text-sm font-medium text-muted-foreground">
|
|
{__('Your Accounts')}
|
|
</h3>
|
|
<div className="space-y-2">
|
|
{createdAccounts.map((account) => (
|
|
<div
|
|
key={account.id}
|
|
className="flex items-center gap-3 rounded-lg border bg-card p-4"
|
|
>
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-900/30">
|
|
<CheckCircle2 className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-medium">{account.name}</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{formatAccountType(account.type)} •{' '}
|
|
{account.currencyCode}
|
|
</p>
|
|
</div>
|
|
<Check className="h-5 w-5 text-emerald-500" />
|
|
</div>
|
|
))}
|
|
{existingAccounts.map((account) => (
|
|
<div
|
|
key={account.id}
|
|
className="flex items-center gap-3 rounded-lg border bg-card p-4"
|
|
>
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-900/30">
|
|
<CheckCircle2 className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-medium text-muted-foreground">
|
|
{account.bank?.name || 'Account'}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{formatAccountType(account.type)} •{' '}
|
|
{account.currency_code}
|
|
</p>
|
|
</div>
|
|
<Check className="h-5 w-5 text-emerald-500" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6 w-full max-w-md rounded-xl border-2 border-dashed border-muted-foreground/20 p-6">
|
|
<div className="text-center">
|
|
<h3 className="mb-1 font-semibold">
|
|
{__('Add More Accounts?')}
|
|
</h3>
|
|
<p className="mb-4 text-sm text-muted-foreground">
|
|
{__(
|
|
'Track all your finances in one place \u2014 checking,\n savings, credit cards, investments, and more.',
|
|
)}
|
|
</p>
|
|
<Button
|
|
variant="outline"
|
|
onClick={onAddMore}
|
|
className="w-full gap-2 !py-6"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
{__('Add Another Account')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<StepButton text={__('Finish Setup')} onClick={onFinish} />
|
|
</div>
|
|
);
|
|
}
|