103 lines
2.7 KiB
TypeScript
103 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import type { Locale } from "@/config/i18n";
|
|
import type { Dictionary } from "@allai/i18n/server";
|
|
import { useMockAuth } from "@/providers/auth/MockAuthProvider";
|
|
import { AccountOverview } from "@/features/account/AccountOverview";
|
|
import {
|
|
AppShell,
|
|
AppShellNavigationItem,
|
|
AppShellStatusPill
|
|
} from "@/components/layouts/app-shell";
|
|
import { Button } from "@allai/ui";
|
|
|
|
type AccountClientProps = {
|
|
locale: Locale;
|
|
dictionaryAccount: Dictionary["account"];
|
|
fullDictionary: Dictionary;
|
|
};
|
|
|
|
export function AccountClient({ locale, dictionaryAccount, fullDictionary }: AccountClientProps) {
|
|
const router = useRouter();
|
|
const { user } = useMockAuth();
|
|
|
|
useEffect(() => {
|
|
if (!user) {
|
|
router.replace(`/${locale}/login`);
|
|
}
|
|
}, [user, router, locale]);
|
|
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
|
|
const navigation: AppShellNavigationItem[] = [
|
|
{ key: "generator", label: fullDictionary.navigation.imageGenerator, icon: "Sparkles" },
|
|
{ key: "veo", label: "Veo workbench", icon: "Film" },
|
|
{ key: "account", label: dictionaryAccount.title, icon: "UserRound", active: true },
|
|
{ key: "pricing", label: fullDictionary.navigation.pricing, icon: "CreditCard" }
|
|
];
|
|
|
|
const statusPills: AppShellStatusPill[] = [
|
|
{
|
|
key: "balance",
|
|
label: `${dictionaryAccount.balanceLabel}: ${user.balance} cr`,
|
|
icon: { name: "Wallet" }
|
|
},
|
|
{
|
|
key: "email",
|
|
label: user.email,
|
|
icon: { name: "Mail" }
|
|
}
|
|
];
|
|
|
|
const footerHighlight = {
|
|
label: dictionaryAccount.balanceLabel,
|
|
helper: dictionaryAccount.balanceHint,
|
|
value: `${user.balance} cr`,
|
|
cta: (
|
|
<Button size="sm" variant="primary">
|
|
{dictionaryAccount.topUpCta}
|
|
</Button>
|
|
)
|
|
};
|
|
|
|
function handlePrimarySelect(key: string) {
|
|
if (key === "account") return;
|
|
if (key === "generator") {
|
|
router.push(`/${locale}`);
|
|
return;
|
|
}
|
|
if (key === "veo") {
|
|
router.push(`/${locale}/veo`);
|
|
return;
|
|
}
|
|
if (key === "pricing") {
|
|
router.push(`/${locale}/pricing`);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<AppShell
|
|
title={dictionaryAccount.title}
|
|
description={dictionaryAccount.subtitle}
|
|
primaryNavigation={navigation}
|
|
statusPills={statusPills}
|
|
footerHighlight={footerHighlight}
|
|
user={{ name: user.email, email: user.email }}
|
|
onPrimarySelect={handlePrimarySelect}
|
|
showSearch={false}
|
|
>
|
|
<AccountOverview
|
|
email={user.email}
|
|
balance={user.balance}
|
|
history={user.history}
|
|
dictionary={dictionaryAccount}
|
|
locale={locale}
|
|
/>
|
|
</AppShell>
|
|
);
|
|
}
|