From 17ec004a5955bb92fcbf944e2ef2eefe6aa48600 Mon Sep 17 00:00:00 2001
From: Joao Ramos <joaomframos.1@gmail.com>
Date: Mon, 12 Feb 2024 21:45:37 +0000
Subject: [PATCH] Added checkbox for accepted terms

---
 src/hooks/useAcceptedTerms.tsx              | 32 +++++++++++++++++++++
 src/pages/(register)/RegisterCorporate.tsx  |  6 +++-
 src/pages/(register)/RegisterIndividual.tsx |  9 ++++--
 3 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 src/hooks/useAcceptedTerms.tsx

diff --git a/src/hooks/useAcceptedTerms.tsx b/src/hooks/useAcceptedTerms.tsx
new file mode 100644
index 00000000..c77c0067
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/pages/(register)/RegisterCorporate.tsx b/src/pages/(register)/RegisterCorporate.tsx
index 46d6a54b..1992e667 100644
--- a/src/pages/(register)/RegisterCorporate.tsx
+++ b/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"
diff --git a/src/pages/(register)/RegisterIndividual.tsx b/src/pages/(register)/RegisterIndividual.tsx
index d8efca7f..92de6611 100644
--- a/src/pages/(register)/RegisterIndividual.tsx
+++ b/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)
         }