2023-10-23 15:06:26 +03:00
|
|
|
import { useQuery } from "@tanstack/react-query";
|
2023-10-18 16:21:15 +03:00
|
|
|
import Link from "next/link";
|
|
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { LuChevronRight, LuShieldCheck } from "react-icons/lu";
|
|
|
|
|
2023-10-23 15:06:26 +03:00
|
|
|
import { SECURITY_QUESTIONS_DATA_KEY } from "@/lib/api/cms/config";
|
|
|
|
import { useCmsApi } from "@/lib/api/cms/useCmsApi";
|
2023-10-18 16:21:15 +03:00
|
|
|
import {
|
|
|
|
Accordion,
|
|
|
|
AccordionContent,
|
|
|
|
AccordionItem,
|
|
|
|
AccordionTrigger,
|
|
|
|
} from "@/lib/components/ui/Accordion";
|
|
|
|
import Button from "@/lib/components/ui/Button";
|
2023-10-23 15:06:26 +03:00
|
|
|
import Spinner from "@/lib/components/ui/Spinner";
|
2023-10-18 16:21:15 +03:00
|
|
|
|
2023-10-24 14:55:42 +03:00
|
|
|
import { useHomepageTracking } from "../../hooks/useHomepageTracking";
|
|
|
|
|
2023-10-18 16:21:15 +03:00
|
|
|
export const SecuritySection = (): JSX.Element => {
|
|
|
|
const { t } = useTranslation("home", {
|
|
|
|
keyPrefix: "security",
|
|
|
|
});
|
2023-10-24 14:55:42 +03:00
|
|
|
const { onLinkClick } = useHomepageTracking();
|
2023-10-18 16:21:15 +03:00
|
|
|
|
2023-10-23 15:06:26 +03:00
|
|
|
const { getSecurityQuestions } = useCmsApi();
|
|
|
|
|
|
|
|
const { data: securityQuestions = [] } = useQuery({
|
|
|
|
queryKey: [SECURITY_QUESTIONS_DATA_KEY],
|
|
|
|
queryFn: getSecurityQuestions,
|
|
|
|
});
|
|
|
|
|
|
|
|
if (securityQuestions.length === 0) {
|
|
|
|
return <Spinner />;
|
|
|
|
}
|
2023-10-18 16:21:15 +03:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className="flex flex-1 w-full mb-10 p-6">
|
|
|
|
<div className="hidden md:flex flex-1 items-center justify-center">
|
|
|
|
<LuShieldCheck className="text-[150px]" />
|
|
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
|
|
<Accordion type="multiple">
|
|
|
|
{securityQuestions.map((question) => {
|
|
|
|
return (
|
|
|
|
<AccordionItem
|
|
|
|
value={question.question}
|
|
|
|
key={question.question}
|
|
|
|
>
|
|
|
|
<AccordionTrigger>{question.question}</AccordionTrigger>
|
|
|
|
<AccordionContent>{question.answer}</AccordionContent>
|
|
|
|
</AccordionItem>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</Accordion>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="flex md:justify-end w-full">
|
2023-10-24 14:55:42 +03:00
|
|
|
<Link
|
|
|
|
href="/signup"
|
|
|
|
onClick={(event) => {
|
|
|
|
onLinkClick({
|
|
|
|
href: "/signup",
|
|
|
|
label: "SIGN_UP",
|
|
|
|
event,
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
>
|
2023-10-18 16:21:15 +03:00
|
|
|
<Button className="rounded-full">
|
|
|
|
{t("cta")}
|
|
|
|
<LuChevronRight size={24} />
|
|
|
|
</Button>
|
|
|
|
</Link>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|