83 lines
2.0 KiB
TypeScript
83 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
import { Button, Typography } from "@/components/ui";
|
|
import { ROUTES } from "@/shared/constants/client-routes";
|
|
|
|
import styles from "./Billing.module.scss";
|
|
|
|
function Billing() {
|
|
const t = useTranslations("Profile.billing");
|
|
const router = useRouter();
|
|
|
|
const onBilling = () => {
|
|
router.push(ROUTES.profileSubscriptions());
|
|
};
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Button className={styles.button} onClick={onBilling}>
|
|
<Typography size="xl" color="white">
|
|
{t("billing_button")}
|
|
</Typography>
|
|
</Button>
|
|
<div className={styles.credits}>
|
|
<Typography as="p" weight="bold" color="white" align="left">
|
|
{t("credits.title", {
|
|
credits: String(0),
|
|
})}
|
|
</Typography>
|
|
<Typography
|
|
className={styles.creditsDescription}
|
|
as="p"
|
|
size="sm"
|
|
color="white"
|
|
align="left"
|
|
>
|
|
{t("credits.description")}
|
|
</Typography>
|
|
</div>
|
|
<Typography
|
|
as="p"
|
|
weight="bold"
|
|
align="left"
|
|
className={styles.anyQuestions}
|
|
>
|
|
{t.rich("any_questions", {
|
|
link: chunks => (
|
|
<Link
|
|
href="https://witlab.us"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{chunks}
|
|
</Link>
|
|
),
|
|
linkText: t("any_questions_link"),
|
|
})}
|
|
</Typography>
|
|
<Typography
|
|
as="p"
|
|
align="left"
|
|
color="secondary"
|
|
className={styles.subscriptionUpdate}
|
|
>
|
|
{t.rich("subscription_update", {
|
|
bold: chunks => (
|
|
<Typography weight="bold" color="secondary">
|
|
{chunks}
|
|
</Typography>
|
|
),
|
|
subscriptionUpdateBold: t("subscription_update_bold"),
|
|
br: () => <br />,
|
|
})}
|
|
</Typography>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Billing;
|