ISSUE 11: add sign up validation. and ensure users open and read T & C and privacy policy
This commit is contained in:
Ayobami
@@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
import { GlobalContext } from "@/globalContext";
|
||||
import { callCustomAPI } from "@/utils/callCustomAPI";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
@@ -8,19 +8,28 @@ import { useState } from "react";
|
||||
import { Fragment } from "react";
|
||||
import MkdSDK from "@/utils/MkdSDK";
|
||||
|
||||
const PrivacyAndPolicyModal = ({ isOpen, closeModal }) => {
|
||||
const PrivacyAndPolicyModal = ({ isOpen, closeModal, onReadToEnd }) => {
|
||||
const [privacy, setPrivacy] = useState("");
|
||||
const { dispatch: globalDispatch } = useContext(GlobalContext);
|
||||
const [hasReadToEnd, setHasReadToEnd] = useState(false);
|
||||
|
||||
async function fetchPrivacyPolicy() {
|
||||
globalDispatch({ type: "START_LOADING" });
|
||||
const sdk = new MkdSDK();
|
||||
sdk.setTable("cms");
|
||||
try {
|
||||
const result = await callCustomAPI("cms", "post", { payload: { content_key: "privacy_policy" }, limit: 1000, page: 1 }, "PAGINATE");
|
||||
const result = await callCustomAPI(
|
||||
"cms",
|
||||
"post",
|
||||
{ payload: { content_key: "privacy_policy" }, limit: 1000, page: 1 },
|
||||
"PAGINATE"
|
||||
);
|
||||
|
||||
if (Array.isArray(result.list) && result.list.length > 0) {
|
||||
setPrivacy(result.list.find((stg) => stg.content_key == "privacy_policy")?.content_value);
|
||||
setPrivacy(
|
||||
result.list.find((stg) => stg.content_key == "privacy_policy")
|
||||
?.content_value
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
globalDispatch({
|
||||
@@ -36,64 +45,69 @@ const PrivacyAndPolicyModal = ({ isOpen, closeModal }) => {
|
||||
|
||||
useEffect(() => {
|
||||
fetchPrivacyPolicy();
|
||||
}, []);
|
||||
setHasReadToEnd(false);
|
||||
}, [isOpen]);
|
||||
|
||||
function handleScroll(e) {
|
||||
const { scrollTop, scrollHeight, clientHeight } = e.target;
|
||||
if (!hasReadToEnd && scrollTop + clientHeight >= scrollHeight - 10) {
|
||||
setHasReadToEnd(true);
|
||||
if (onReadToEnd) onReadToEnd();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`${isOpen ? "flex" : "hidden"} fixed inset-0 items-center justify-center`}></div>
|
||||
<div
|
||||
className={`${
|
||||
isOpen ? "flex" : "hidden"
|
||||
} fixed inset-0 items-center justify-center`}
|
||||
></div>
|
||||
|
||||
<Transition
|
||||
appear
|
||||
show={isOpen}
|
||||
as={Fragment}
|
||||
>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="relative z-10"
|
||||
onClose={closeModal}
|
||||
>
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as='div' className='relative z-10' onClose={closeModal}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
enter='ease-out duration-300'
|
||||
enterFrom='opacity-0'
|
||||
enterTo='opacity-100'
|
||||
leave='ease-in duration-200'
|
||||
leaveFrom='opacity-100'
|
||||
leaveTo='opacity-0'
|
||||
>
|
||||
<div className="fixed inset-0 bg-black bg-opacity-25" />
|
||||
<div className='fixed inset-0 bg-black bg-opacity-25' />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<div className='fixed inset-0 overflow-y-auto'>
|
||||
<div className='flex min-h-full items-center justify-center p-4 text-center'>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
enter='ease-out duration-300'
|
||||
enterFrom='opacity-0 scale-95'
|
||||
enterTo='opacity-100 scale-100'
|
||||
leave='ease-in duration-200'
|
||||
leaveFrom='opacity-100 scale-100'
|
||||
leaveTo='opacity-0 scale-95'
|
||||
>
|
||||
<Dialog.Panel className="w-full max-w-6xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
|
||||
<Dialog.Panel className='w-full max-w-6xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-medium leading-6 text-gray-900 flex justify-between items-center"
|
||||
as='h3'
|
||||
className='text-lg flex items-center justify-between font-medium leading-6 text-gray-900'
|
||||
>
|
||||
{" "}
|
||||
{" "}
|
||||
<button
|
||||
type="button"
|
||||
type='button'
|
||||
onClick={closeModal}
|
||||
className="py-2 border hover:bg-gray-200 active:bg-gray-300 duration-100 px-3 text-2xl font-normal rounded-full flex justify-end"
|
||||
className='flex justify-end rounded-full border px-3 py-2 text-2xl font-normal duration-100 hover:bg-gray-200 active:bg-gray-300'
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<div className='mt-2'>
|
||||
<article
|
||||
className="sun-editor-editable text-sm max-h-[600px] overflow-y-auto my-8"
|
||||
className='sun-editor-editable my-8 max-h-[600px] overflow-y-auto text-sm'
|
||||
dangerouslySetInnerHTML={{ __html: privacy }}
|
||||
onScroll={handleScroll}
|
||||
></article>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
@@ -103,7 +117,7 @@ const PrivacyAndPolicyModal = ({ isOpen, closeModal }) => {
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default PrivacyAndPolicyModal
|
||||
export default PrivacyAndPolicyModal;
|
||||
|
||||
@@ -16,6 +16,7 @@ import TermsAndConditionsModal from "./TermsAndConditionsModal";
|
||||
import DatePickerV2 from "@/components/frontend/DatePickerV2";
|
||||
import { LoadingButton } from "@/components/frontend";
|
||||
import PrivacyAndPolicyModal from "./PrivacyAndPolicyModal";
|
||||
import commonPasswords from "@/assets/json/common-passwords.json";
|
||||
|
||||
export default function SignUpDetailsForm() {
|
||||
const navigate = useNavigate();
|
||||
@@ -28,6 +29,9 @@ export default function SignUpDetailsForm() {
|
||||
const [modalOpen, setModalOpen] = React.useState(false);
|
||||
const [privacyOpen, setPrivacyModalOpen] = React.useState(false);
|
||||
const initialDate = useRef(new Date());
|
||||
const [agreedToTerms, setAgreedToTerms] = React.useState(false);
|
||||
const [privacyRead, setPrivacyRead] = React.useState(false);
|
||||
const [passwordErrors, setPasswordErrors] = React.useState([]);
|
||||
|
||||
function closeModal() {
|
||||
setModalOpen(false);
|
||||
@@ -36,11 +40,67 @@ export default function SignUpDetailsForm() {
|
||||
setPrivacyModalOpen(false);
|
||||
}
|
||||
|
||||
// --- DOB must be at least 18 years ---
|
||||
function isAtLeast18YearsOld(date) {
|
||||
if (!date) return false;
|
||||
const now = new Date();
|
||||
const dob = new Date(date);
|
||||
let age = now.getFullYear() - dob.getFullYear();
|
||||
const m = now.getMonth() - dob.getMonth();
|
||||
if (m < 0 || (m === 0 && now.getDate() < dob.getDate())) {
|
||||
age--;
|
||||
}
|
||||
return age >= 18;
|
||||
}
|
||||
|
||||
// --- Password validation ---
|
||||
function validatePassword(password, firstName, lastName, dob) {
|
||||
const errors = [];
|
||||
if (!password) errors.push("Password is required.");
|
||||
if (password && password.length < 10)
|
||||
errors.push("Password must be at least 10 characters long.");
|
||||
if (password && !/[a-z]/.test(password))
|
||||
errors.push("Password must contain at least one lowercase letter.");
|
||||
if (password && !/[A-Z]/.test(password))
|
||||
errors.push("Password must contain at least one uppercase letter.");
|
||||
if (password && !/[0-9]/.test(password))
|
||||
errors.push("Password must contain at least one digit.");
|
||||
if (password && !/[^A-Za-z0-9]/.test(password))
|
||||
errors.push("Password must contain at least one symbol.");
|
||||
if (
|
||||
password &&
|
||||
firstName &&
|
||||
password.toLowerCase().includes(firstName.toLowerCase())
|
||||
)
|
||||
errors.push("Password must not contain your first name.");
|
||||
if (
|
||||
password &&
|
||||
lastName &&
|
||||
password.toLowerCase().includes(lastName.toLowerCase())
|
||||
)
|
||||
errors.push("Password must not contain your last name.");
|
||||
if (password && dob) {
|
||||
const dobStr = new Date(dob).toISOString().slice(0, 10).replace(/-/g, "");
|
||||
if (dobStr && password.includes(dobStr))
|
||||
errors.push("Password must not contain your date of birth.");
|
||||
}
|
||||
if (
|
||||
password &&
|
||||
commonPasswords.some((w) => password.toLowerCase().includes(w))
|
||||
)
|
||||
errors.push("Password must not contain common password words.");
|
||||
return errors;
|
||||
}
|
||||
|
||||
// --- Validation schema ---
|
||||
const schema = yup.object({
|
||||
firstName: yup.string(),
|
||||
lastName: yup.string(),
|
||||
dob: yup.date(),
|
||||
password: yup.string()
|
||||
firstName: yup.string().required("First name is required."),
|
||||
lastName: yup.string().required("Last name is required."),
|
||||
dob: yup
|
||||
.date()
|
||||
.required("Date of birth is required.")
|
||||
.test("age", "You must be at least 18 years old.", isAtLeast18YearsOld),
|
||||
password: yup.string().required("Password is required."),
|
||||
});
|
||||
|
||||
const {
|
||||
@@ -65,6 +125,34 @@ export default function SignUpDetailsForm() {
|
||||
|
||||
const data = watch();
|
||||
|
||||
// --- Password error display ---
|
||||
React.useEffect(() => {
|
||||
setPasswordErrors(
|
||||
validatePassword(data.password, data.firstName, data.lastName, data.dob)
|
||||
);
|
||||
}, [data.password, data.firstName, data.lastName, data.dob]);
|
||||
|
||||
// --- Terms and Privacy Modal handlers ---
|
||||
function handleAgreeTerms() {
|
||||
setAgreedToTerms(true);
|
||||
setModalOpen(false);
|
||||
}
|
||||
function handlePrivacyRead() {
|
||||
setPrivacyRead(true);
|
||||
setPrivacyModalOpen(false);
|
||||
}
|
||||
|
||||
// --- Disable submit logic ---
|
||||
const canSubmit =
|
||||
data.firstName &&
|
||||
data.lastName &&
|
||||
data.dob &&
|
||||
isAtLeast18YearsOld(data.dob) &&
|
||||
data.password &&
|
||||
passwordErrors.length === 0 &&
|
||||
agreedToTerms &&
|
||||
privacyRead;
|
||||
|
||||
async function onSubmit() {
|
||||
setLoading(true);
|
||||
try {
|
||||
@@ -74,7 +162,15 @@ export default function SignUpDetailsForm() {
|
||||
|
||||
// register device
|
||||
sdk.setTable("device");
|
||||
await sdk.callRestAPI({ active: 1, user_id: result.user_id, last_login_time: new Date().toISOString().split("T")[0], uid: localStorage.getItem("device-uid") }, "POST");
|
||||
await sdk.callRestAPI(
|
||||
{
|
||||
active: 1,
|
||||
user_id: result.user_id,
|
||||
last_login_time: new Date().toISOString().split("T")[0],
|
||||
uid: localStorage.getItem("device-uid"),
|
||||
},
|
||||
"POST"
|
||||
);
|
||||
|
||||
await callCustomAPI(
|
||||
"edit-self",
|
||||
@@ -85,11 +181,13 @@ export default function SignUpDetailsForm() {
|
||||
last_name: data.lastName,
|
||||
},
|
||||
profile: {
|
||||
dob: isSameDay(data.dob, initialDate.current) ? undefined : moment(data.dob).format("yyyy-MM-DD"),
|
||||
dob: isSameDay(data.dob, initialDate.current)
|
||||
? undefined
|
||||
: moment(data.dob).format("yyyy-MM-DD"),
|
||||
},
|
||||
},
|
||||
"",
|
||||
result.token,
|
||||
result.token
|
||||
);
|
||||
|
||||
localStorage.removeItem("token");
|
||||
@@ -108,11 +206,9 @@ export default function SignUpDetailsForm() {
|
||||
type: "manual",
|
||||
message: result.validation[field],
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
setLoading(false);
|
||||
setError("firstName", {
|
||||
@@ -126,43 +222,60 @@ export default function SignUpDetailsForm() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="flex flex-col items-center justify-center bg-white md:w-1/2">
|
||||
<section className='flex flex-col items-center justify-center bg-white md:w-1/2'>
|
||||
<form
|
||||
className="flex w-full max-w-md flex-col px-6"
|
||||
className='flex w-full max-w-md flex-col px-6'
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
autoComplete="off"
|
||||
autoComplete='off'
|
||||
>
|
||||
<h1 className="mb-8 text-center text-5xl font-bold">Finish Signing Up</h1>
|
||||
<div className="mb-8">
|
||||
<h1 className='mb-8 text-center text-5xl font-bold'>
|
||||
Finish Signing Up
|
||||
</h1>
|
||||
<div className='mb-8'>
|
||||
<input
|
||||
type="text"
|
||||
type='text'
|
||||
{...register("firstName")}
|
||||
className="w-full resize-none rounded-md border bg-transparent py-2 px-4 focus:outline-none active:outline-none"
|
||||
placeholder="First name"
|
||||
autoComplete="off"
|
||||
className='w-full resize-none rounded-md border bg-transparent px-4 py-2 focus:outline-none active:outline-none'
|
||||
placeholder='First name'
|
||||
autoComplete='off'
|
||||
/>
|
||||
<p className="text-red-500 text-xs italic mt-2 block">{errors.firstName?.message}</p>
|
||||
<p className='mt-2 block text-xs italic text-red-500'>
|
||||
{errors.firstName?.message}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<div className='mb-8'>
|
||||
<input
|
||||
type="text"
|
||||
type='text'
|
||||
{...register("lastName")}
|
||||
className="w-full resize-none rounded-md border bg-transparent py-2 px-4 focus:outline-none active:outline-none"
|
||||
placeholder="Last name"
|
||||
autoComplete="off"
|
||||
className='w-full resize-none rounded-md border bg-transparent px-4 py-2 focus:outline-none active:outline-none'
|
||||
placeholder='Last name'
|
||||
autoComplete='off'
|
||||
/>
|
||||
<p className="text-red-500 text-xs italic mt-2 block">{errors.lastName?.message}</p>
|
||||
<p className='mt-2 block text-xs italic text-red-500'>
|
||||
{errors.lastName?.message}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<DatePickerV2
|
||||
control={control}
|
||||
name="dob"
|
||||
name='dob'
|
||||
min={new Date("1950-01-01")}
|
||||
max={initialDate.current}
|
||||
setValue={(v) => setValue("dob", v)}
|
||||
/>
|
||||
<div className={`${errors.password?.message && dirtyFields.password ? "border rounded-md border-[#C42945]" : "borde"} relative mb-4 flex justify-between rounded-md bg-transparent`}>
|
||||
<p className='mt-2 block text-xs italic text-red-500'>
|
||||
{errors.dob?.message}
|
||||
</p>
|
||||
|
||||
<div
|
||||
className={`${
|
||||
passwordErrors.length > 0 && dirtyFields.password
|
||||
? "rounded-md border border-[#C42945]"
|
||||
: "borde"
|
||||
} relative mb-4 flex flex-col rounded-md bg-transparent`}
|
||||
>
|
||||
<div className='flex items-center justify-between'>
|
||||
<input
|
||||
autoComplete={showPassword ? "off" : "new-password"}
|
||||
type={showPassword ? "text" : "password"}
|
||||
@@ -171,76 +284,97 @@ export default function SignUpDetailsForm() {
|
||||
trigger("password");
|
||||
},
|
||||
})}
|
||||
className="flex-grow rounded-md border p-2 px-4 focus:outline-none active:outline-none "
|
||||
placeholder="Password"
|
||||
/>{" "}
|
||||
className='flex-grow rounded-md border p-2 px-4 focus:outline-none active:outline-none '
|
||||
placeholder='Password'
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
type='button'
|
||||
onClick={() => setShowPassword((prev) => !prev)}
|
||||
className="absolute right-1 top-[20%]"
|
||||
className='absolute right-1 top-[20%]'
|
||||
>
|
||||
{" "}
|
||||
{showPassword ? (
|
||||
<img
|
||||
src="/show.png"
|
||||
alt=""
|
||||
className="mr-2 w-6"
|
||||
/>
|
||||
<img src='/show.png' alt='' className='mr-2 w-6' />
|
||||
) : (
|
||||
<img
|
||||
src="/invisible.png"
|
||||
alt=""
|
||||
className="mr-2 w-6"
|
||||
/>
|
||||
<img src='/invisible.png' alt='' className='mr-2 w-6' />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{dirtyFields.password && passwordErrors.length > 0 && (
|
||||
<ul className='ml-6 mt-2 list-disc text-xs text-red-500'>
|
||||
{passwordErrors.map((err, idx) => (
|
||||
<li key={idx}>{err}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<p className="mb-4 text-sm normal-case text-gray-500">
|
||||
Select and agree to {" "}
|
||||
<p className='mb-4 text-sm normal-case text-gray-500'>
|
||||
Select and agree to{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>setModalOpen(true)}
|
||||
className="underline"
|
||||
type='button'
|
||||
onClick={() => setModalOpen(true)}
|
||||
className='underline'
|
||||
// target={"_blank"}
|
||||
>
|
||||
{" "} Terms and Conditions
|
||||
</button>
|
||||
{" "}
|
||||
to continue.
|
||||
{" "}
|
||||
{" "}
|
||||
Terms and Conditions
|
||||
</button>{" "}
|
||||
to continue.{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>setPrivacyModalOpen(true)}
|
||||
className="underline"
|
||||
type='button'
|
||||
onClick={() => setPrivacyModalOpen(true)}
|
||||
className='underline'
|
||||
>
|
||||
Privacy Policy
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<div className='mb-1 flex flex-col'>
|
||||
{" "}
|
||||
{!agreedToTerms && (
|
||||
<span className='text-xs text-red-500'>
|
||||
You must agree to the Terms and Conditions.
|
||||
</span>
|
||||
)}
|
||||
{!privacyRead && (
|
||||
<span className='text-xs text-red-500'>
|
||||
You must read the Privacy Policy to the end.
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<LoadingButton
|
||||
loading={loading}
|
||||
type="submit"
|
||||
className={`disabled:cursor-not-allowed login-btn-gradient rounded tracking-wide text-white outline-none focus:outline-none ${loading ? "py-1" : "py-2"}`}
|
||||
// disabled={!recaptchaValidated}
|
||||
type='submit'
|
||||
className={`login-btn-gradient rounded tracking-wide text-white outline-none focus:outline-none disabled:cursor-not-allowed ${
|
||||
loading ? "py-1" : "py-2"
|
||||
}`}
|
||||
disabled={!canSubmit}
|
||||
>
|
||||
Continue
|
||||
</LoadingButton>
|
||||
</form>
|
||||
</section>
|
||||
<section
|
||||
style={{ backgroundImage: `url(${role == "host" ? "/host-sign-up.jpg" : "/sign-up-bg.jpg"})`, backgroundSize: "cover", backgroundRepeat: "no-repeat", backgroundPosition: "center" }}
|
||||
className="hidden w-1/2 md:block"
|
||||
>
|
||||
</section>
|
||||
style={{
|
||||
backgroundImage: `url(${
|
||||
role == "host" ? "/host-sign-up.jpg" : "/sign-up-bg.jpg"
|
||||
})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
className='hidden w-1/2 md:block'
|
||||
></section>
|
||||
<TermsAndConditionsModal
|
||||
isOpen={modalOpen}
|
||||
closeModal={closeModal}
|
||||
closeModal={() => setModalOpen(false)}
|
||||
setIsAgreed={handleAgreeTerms}
|
||||
/>
|
||||
<PrivacyAndPolicyModal
|
||||
isOpen={privacyOpen}
|
||||
closeModal={closePrivacyModal}
|
||||
closeModal={() => setPrivacyModalOpen(false)}
|
||||
onReadToEnd={handlePrivacyRead}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -7,14 +7,23 @@ import { useContext } from "react";
|
||||
import { useState } from "react";
|
||||
import { Fragment } from "react";
|
||||
|
||||
export default function TermsAndConditionsModal({ isOpen, closeModal, setIsAgreed }) {
|
||||
export default function TermsAndConditionsModal({
|
||||
isOpen,
|
||||
closeModal,
|
||||
setIsAgreed,
|
||||
}) {
|
||||
const [termsAndConditions, setTermsAndCondition] = useState("");
|
||||
const [agreed, setAgreed] = useState(false);
|
||||
const { dispatch: globalDispatch } = useContext(GlobalContext);
|
||||
|
||||
async function fetchTermsAndConditions() {
|
||||
try {
|
||||
const result = await callCustomAPI("cms", "post", { where: [`content_key = 'terms_and_conditions'`], limit: 1, page: 1 }, "PAGINATE");
|
||||
const result = await callCustomAPI(
|
||||
"cms",
|
||||
"post",
|
||||
{ where: [`content_key = 'terms_and_conditions'`], limit: 1, page: 1 },
|
||||
"PAGINATE"
|
||||
);
|
||||
|
||||
if (Array.isArray(result.list) && result.list.length > 0) {
|
||||
setTermsAndCondition(result.list[0].content_value);
|
||||
@@ -35,73 +44,72 @@ export default function TermsAndConditionsModal({ isOpen, closeModal, setIsAgree
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<div className={`${isOpen ? "flex" : "hidden"} fixed inset-0 items-center justify-center`}></div>
|
||||
<div
|
||||
className={`${
|
||||
isOpen ? "flex" : "hidden"
|
||||
} fixed inset-0 items-center justify-center`}
|
||||
></div>
|
||||
|
||||
<Transition
|
||||
appear
|
||||
show={isOpen}
|
||||
as={Fragment}
|
||||
>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="relative z-10"
|
||||
onClose={closeModal}
|
||||
>
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as='div' className='relative z-10' onClose={closeModal}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
enter='ease-out duration-300'
|
||||
enterFrom='opacity-0'
|
||||
enterTo='opacity-100'
|
||||
leave='ease-in duration-200'
|
||||
leaveFrom='opacity-100'
|
||||
leaveTo='opacity-0'
|
||||
>
|
||||
<div className="fixed inset-0 bg-black bg-opacity-25" />
|
||||
<div className='fixed inset-0 bg-black bg-opacity-25' />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<div className='fixed inset-0 overflow-y-auto'>
|
||||
<div className='flex min-h-full items-center justify-center p-4 text-center'>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
enter='ease-out duration-300'
|
||||
enterFrom='opacity-0 scale-95'
|
||||
enterTo='opacity-100 scale-100'
|
||||
leave='ease-in duration-200'
|
||||
leaveFrom='opacity-100 scale-100'
|
||||
leaveTo='opacity-0 scale-95'
|
||||
>
|
||||
<Dialog.Panel className="w-full max-w-6xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
|
||||
<Dialog.Panel className='w-full max-w-6xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-medium leading-6 text-gray-900 flex justify-between items-center"
|
||||
as='h3'
|
||||
className='text-lg flex items-center justify-between font-medium leading-6 text-gray-900'
|
||||
>
|
||||
{" "}
|
||||
{" "}
|
||||
<button
|
||||
type="button"
|
||||
type='button'
|
||||
onClick={closeModal}
|
||||
className="py-2 border hover:bg-gray-200 active:bg-gray-300 duration-100 px-3 text-2xl font-normal rounded-full flex justify-end"
|
||||
className='flex justify-end rounded-full border px-3 py-2 text-2xl font-normal duration-100 hover:bg-gray-200 active:bg-gray-300'
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<div className='mt-2'>
|
||||
<article
|
||||
className="sun-editor-editable text-sm max-h-[600px] overflow-y-auto my-8"
|
||||
className='sun-editor-editable my-8 max-h-[600px] overflow-y-auto text-sm'
|
||||
dangerouslySetInnerHTML={{ __html: termsAndConditions }}
|
||||
></article>
|
||||
</div>
|
||||
<div className="checkbox-container">
|
||||
<div className='checkbox-container'>
|
||||
<input
|
||||
type={"checkbox"}
|
||||
name="i-agree"
|
||||
id="i-agree"
|
||||
name='i-agree'
|
||||
id='i-agree'
|
||||
checked={agreed}
|
||||
onChange={() => {setAgreed((prev) => !prev); setIsAgreed((prev) => !prev); closeModal()}}
|
||||
onChange={() => {
|
||||
setAgreed((prev) => !prev);
|
||||
setIsAgreed((prev) => !prev);
|
||||
closeModal();
|
||||
}}
|
||||
/>
|
||||
<label
|
||||
htmlFor="i-agree"
|
||||
className="items-center cursor-pointer remove-select"
|
||||
htmlFor='i-agree'
|
||||
className='remove-select cursor-pointer items-center'
|
||||
>
|
||||
Yeah, I agree to everything
|
||||
</label>
|
||||
|
||||
Reference in New Issue
Block a user