ayobami/Ergo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ISSUE 11: add sign up validation. and ensure users open and read T & C and privacy policy

Browse Source
This commit is contained in:
Ayobami
2025-07-01 20:44:25 +01:00
parent 9867509259
commit 7cf8caf9da
3 changed files with 356 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Common/SignUp/TermsAndConditionsModal.jsx
+50 -42
View File
@@ -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'
>
&#x2715;
</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>