Added checkbox for accepted terms

src/hooks/useAcceptedTerms.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import Link from "next/link";
+import Checkbox from "@/components/Low/Checkbox";
+
+const useAcceptedTerms = () => {
+  const [acceptedTerms, setAcceptedTerms] = React.useState(false);
+
+  const renderCheckbox = () => (
+    <Checkbox isChecked={acceptedTerms} onChange={setAcceptedTerms}>
+      I agree to the
+      <Link
+        href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/terms`}
+        className="text-blue-500"
+      >
+        {" "}
+        Terms and Conditions
+      </Link>{" "}
+      and
+      <Link
+        href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/privacy-policy`}
+        className="text-blue-500"
+      >
+        {" "}
+        Privacy Policy
+      </Link>
+    </Checkbox>
+  );
+
+  return { acceptedTerms, renderCheckbox };
+};
+
+export default useAcceptedTerms;

src/pages/(register)/RegisterCorporate.tsx

@@ -10,6 +10,7 @@ import { toast } from "react-toastify";
 import { KeyedMutator } from "swr";
 import Select from "react-select";
 import moment from "moment";
+import useAcceptedTerms from "@/hooks/useAcceptedTerms";
 
 interface Props {
   isLoading: boolean;
@@ -40,6 +41,7 @@ export default function RegisterCorporate({
   const [companyName, setCompanyName] = useState("");
   const [companyUsers, setCompanyUsers] = useState(0);
   const [subscriptionDuration, setSubscriptionDuration] = useState(1);
+  const {acceptedTerms, renderCheckbox} = useAcceptedTerms();
 
   const { users } = useUsers();
 
@@ -257,7 +259,9 @@ export default function RegisterCorporate({
           />
         </div>
       </div>
-
+      <div className="flex w-full flex-col items-start gap-4">
+            {renderCheckbox()}
+      </div>
       <Button
         className="w-full lg:mt-8"
         color="purple"

src/pages/(register)/RegisterIndividual.tsx

@@ -4,9 +4,10 @@ import Input from "@/components/Low/Input";
 import { User } from "@/interfaces/user";
 import { sendEmailVerification } from "@/utils/email";
 import axios from "axios";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { toast } from "react-toastify";
 import { KeyedMutator } from "swr";
+import useAcceptedTerms from "@/hooks/useAcceptedTerms";
 
 interface Props {
   queryCode?: string;
@@ -35,6 +36,7 @@ export default function RegisterIndividual({
   const [confirmPassword, setConfirmPassword] = useState("");
   const [code, setCode] = useState(queryCode || "");
   const [hasCode, setHasCode] = useState<boolean>(!!queryCode);
+  const {acceptedTerms, renderCheckbox} = useAcceptedTerms();
 
   const onSuccess = () =>
     toast.success(
@@ -146,7 +148,9 @@ export default function RegisterIndividual({
           />
         )}
       </div>
-
+      <div className="flex w-full flex-col items-start gap-4">
+        {renderCheckbox()}
+      </div>
       <Button
         className="w-full lg:mt-8"
         color="purple"
@@ -156,6 +160,7 @@ export default function RegisterIndividual({
           !name ||
           !password ||
           !confirmPassword ||
+          !acceptedTerms ||
           password !== confirmPassword ||
           (hasCode ? !code : false)
         }