Terms and Conditions Dialog

1"use client";
2 
3import { useRef, useState } from "react";
4 
5import { Button } from "@/components/ui/button";
6import {
7  ResponsiveDialog,
8  ResponsiveDialogClose,
9  ResponsiveDialogContent,
10  ResponsiveDialogDescription,
11  ResponsiveDialogFooter,
12  ResponsiveDialogHeader,
13  ResponsiveDialogTitle,
14  ResponsiveDialogTrigger,
15} from "@/components/ui/revola";
16 
17export default function TermsAndConditionsDialog() {
18  const [hasReadToBottom, setHasReadToBottom] = useState(false);
19  const contentRef = useRef<HTMLDivElement>(null);
20 
21  const handleScroll = () => {
22    const content = contentRef.current;
23    if (!content) return;
24 
25    const scrollPercentage = content.scrollTop / (content.scrollHeight - content.clientHeight);
26    if (scrollPercentage >= 0.99 && !hasReadToBottom) {
27      setHasReadToBottom(true);
28    }
29  };
30 
31  return (
32    <ResponsiveDialog>
33      <ResponsiveDialogTrigger asChild>
34        <Button
35          variant="outline"
36          className="h-12 rounded-full px-6 capitalize"
37          onClick={() => {
38            setHasReadToBottom(false);
39            if (contentRef.current) contentRef.current.scrollTop = 0;
40          }}
41        >
42          Terms & Conditions
43        </Button>
44      </ResponsiveDialogTrigger>
45      <ResponsiveDialogContent className="flex max-h-[min(640px,80dvh)] flex-col sm:gap-0">
46        <ResponsiveDialogHeader className="contents space-y-0 text-left">
47          <ResponsiveDialogTitle className="border-b px-6 pb-4 text-base sm:py-4">
48            Terms & Conditions
49          </ResponsiveDialogTitle>
50 
51          <div ref={contentRef} onScroll={handleScroll} className="overflow-y-auto">
52            <ResponsiveDialogDescription asChild>
53              <div className="px-6 py-4">
54                <div className="space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground">
55                  <div className="space-y-4">
56                    <div className="space-y-1">
57                      <p>
58                        <strong>Acceptance of Terms</strong>
59                      </p>
60                      <p>
61                        By accessing and using this website, users agree to comply with and be bound by these Terms of
62                        Service. Users who do not agree with these terms should discontinue use of the website
63                        immediately.
64                      </p>
65                    </div>
66 
67                    <div className="space-y-1">
68                      <p>
69// … truncated