88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
import { Billing, LogOut, ProfileBlock, ProfileInformation } from "@/components/domains/profile"
|
|
import { Card, Modal, Typography } from "@/components/ui";
|
|
import { ROUTES } from "@/shared/constants/client-routes";
|
|
|
|
import styles from "./page.module.scss"
|
|
|
|
export default function ProfilePage() {
|
|
const t = useTranslations('Profile');
|
|
const router = useRouter();
|
|
const [logoutModal, setLogoutModal] = useState(false);
|
|
|
|
const handleLogout = () => {
|
|
router.replace(ROUTES.home());
|
|
// logout();
|
|
};
|
|
|
|
const handleLogoutModal = () => {
|
|
setLogoutModal(true);
|
|
};
|
|
|
|
const handleBilling = () => {
|
|
router.push(ROUTES.profileSubscriptions())
|
|
}
|
|
|
|
const profileBlocks = [
|
|
{
|
|
title: t("profile_information.title"),
|
|
description: t("profile_information.description"),
|
|
children: <ProfileInformation />
|
|
},
|
|
{
|
|
title: t("billing.title"),
|
|
description: t("billing.description"),
|
|
children: <Billing onBilling={handleBilling} />
|
|
},
|
|
{
|
|
title: t("log_out.title"),
|
|
children: <LogOut onLogout={handleLogoutModal} />
|
|
}
|
|
]
|
|
|
|
return (
|
|
<>
|
|
<Card className={styles.card}>
|
|
{profileBlocks.map((block, index) => (
|
|
<div key={block.title}>
|
|
<ProfileBlock {...block}>
|
|
{block.children}
|
|
</ProfileBlock>
|
|
{index !== profileBlocks.length - 1 && <hr className={styles.line} />}
|
|
</div>
|
|
))}
|
|
</Card>
|
|
{logoutModal && <Modal
|
|
isCloseButtonVisible={false}
|
|
open={!!logoutModal}
|
|
onClose={() => setLogoutModal(false)}
|
|
className={styles.modal}
|
|
modalClassName={styles["modal-container"]}
|
|
>
|
|
<Typography as="h4" className={styles["modal-title"]}>
|
|
{t("log_out.modal.title")}
|
|
</Typography>
|
|
<p className={styles["modal-description"]}>
|
|
{t("log_out.modal.description")}
|
|
</p>
|
|
<div className={styles["modal-answers"]}>
|
|
<div className={styles["modal-answer"]} onClick={handleLogout}>
|
|
<p className={styles["modal-answer-text"]}>
|
|
{t("log_out.modal.log_out_button")}
|
|
</p>
|
|
</div>
|
|
<div className={styles["modal-answer"]} onClick={() => setLogoutModal(false)}>
|
|
<p className={styles["modal-answer-text"]}>
|
|
{t("log_out.modal.stay_button")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Modal>}
|
|
</>
|
|
)
|
|
} |