whisper-money/resources/js/components/open-banking/upgrade-connection-dialog.tsx

59 lines
1.9 KiB
TypeScript

import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { billing } from '@/routes/settings';
import { __ } from '@/utils/i18n';
import { router } from '@inertiajs/react';
import { Zap } from 'lucide-react';
interface UpgradeConnectionDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
}
export function UpgradeConnectionDialog({
open,
onOpenChange,
}: UpgradeConnectionDialogProps) {
function handleUpgrade() {
router.visit(billing.url());
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[400px]">
<DialogHeader>
<div className="mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/40">
<Zap className="h-5 w-5 text-blue-600 dark:text-blue-400" />
</div>
<DialogTitle>{__('Standard Plan required')}</DialogTitle>
<DialogDescription>
{__(
'Bank connections automatically sync your transactions directly from your bank. This feature requires the Standard Plan.',
)}
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button
type="button"
variant="outline"
onClick={() => onOpenChange(false)}
>
{__('Maybe later')}
</Button>
<Button type="button" onClick={handleUpgrade}>
{__('Upgrade to Standard Plan')}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}