From 3ee5b16917c369ee21049a532d442898c3133ba4 Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Fri, 28 Feb 2025 09:52:07 +0300
Subject: [PATCH] update organization step

---
 .../src/pages/account/creation/index.jsx      | 93 ++++++++++---------
 1 file changed, 47 insertions(+), 46 deletions(-)

diff --git a/src/platform/src/pages/account/creation/index.jsx b/src/platform/src/pages/account/creation/index.jsx
index 94a428bfc2..51c184a39e 100644
--- a/src/platform/src/pages/account/creation/index.jsx
+++ b/src/platform/src/pages/account/creation/index.jsx
@@ -4,18 +4,26 @@ import GoogleLogo from '@/icons/Common/google_logo.svg';
 import { getGoogleAuthDetails } from '@/core/apis/Account';
 import CheckComponent from '@/components/Account/CheckComponent';
 
+const FORM_URL = 'https://forms.gle/VX5p2s65n8U51iBc8';
+
 const userRoles = [
   {
     title: 'Individual',
     subText:
       'Empower yourself with real-time Air Pollution Location Data for research and personal use. Stay informed, stay healthy. Join the clean air revolution today.',
     disabled: false,
+    // Internal route for individuals.
+    route: (router) => router.push(`/account/creation/individual/register`),
   },
   {
     title: 'Organisation',
     subText:
       'Beyond data, gain access to network management tools. Drive meaningful change, one location at a time. Shape a cleaner future for all.',
-    disabled: true,
+    disabled: false,
+    // External route for organisations.
+    route: () => {
+      window.location.href = FORM_URL;
+    },
   },
 ];
 
@@ -23,24 +31,27 @@ const UserDesignation = () => {
   const [clickedRole, setClickedRole] = useState('');
   const router = useRouter();
 
-  const routeToCreation = () => {
-    if (clickedRole) {
-      router.push(`/account/creation/${clickedRole.toLowerCase()}/register`);
-    }
+  const handleRoleClick = (roleTitle, disabled) => {
+    if (disabled) return;
+    setClickedRole((prevRole) => (prevRole === roleTitle ? '' : roleTitle));
   };
 
-  const handleRoleClick = (roleTitle) => {
-    setClickedRole((prevRole) => (prevRole === roleTitle ? '' : roleTitle));
+  const routeToCreation = () => {
+    if (!clickedRole) return;
+    const selectedRole = userRoles.find((role) => role.title === clickedRole);
+    if (selectedRole && selectedRole.route) {
+      selectedRole.route(router);
+    }
   };
 
   return (
     <div className="relative w-screen h-screen bg-white overflow-x-hidden">
-      <div className="absolute left-0 right-0 top-0 bottom-0 mb-0 mt-14 sm:mt-20 lg:mt-44 mx-auto w-11/12 lg:w-7/12 h-auto flex flex-col items-center">
+      <div className="absolute left-0 right-0 top-0 bottom-0 mt-14 sm:mt-20 lg:mt-44 mx-auto w-11/12 lg:w-7/12 flex flex-col items-center">
         <h2 className="text-3xl text-black-700 font-semibold text-center">
           How are you planning to use AirQo Analytics?
         </h2>
         <p className="text-xl text-black-700 font-normal mt-3 text-center">
-          We'll streamline your setup experience accordingly
+          We&apos;ll streamline your setup experience accordingly
         </p>
         <div className="mt-10 flex justify-center items-center">
           <div className="flex flex-col lg:flex-row lg:items-stretch lg:ml-20">
@@ -48,24 +59,18 @@ const UserDesignation = () => {
               <div
                 key={index}
                 className="w-full cursor-pointer mb-8 lg:w-10/12 lg:mb-0 flex flex-col"
-                onClick={() => {
-                  if (role.disabled) {
-                    return;
-                  }
-                  handleRoleClick(role.title);
-                }}
+                role="button"
+                tabIndex={0}
+                onClick={() => handleRoleClick(role.title, role.disabled)}
                 onKeyUp={(e) => {
                   if (e.key === 'Enter' || e.key === ' ') {
-                    if (role.disabled) {
-                      return;
-                    }
-                    handleRoleClick(role.title);
+                    handleRoleClick(role.title, role.disabled);
                   }
                 }}
               >
                 <CheckComponent
                   text={role.title}
-                  width={'w-full lg:w-10/12'}
+                  width="w-full lg:w-10/12"
                   subText={role.subText}
                   checked={clickedRole === role.title}
                   disabled={role.disabled}
@@ -79,7 +84,7 @@ const UserDesignation = () => {
             onClick={routeToCreation}
             className="mt-6 w-[262px] flex justify-center items-center px-4 py-2 bg-blue-600 text-white rounded-[12px]"
           >
-            Continue
+            {clickedRole === 'Organisation' ? 'Get started' : 'Continue'}
           </button>
         )}
       </div>
@@ -87,31 +92,27 @@ const UserDesignation = () => {
   );
 };
 
-const GoogleAccountCreation = () => {
-  return (
-    <div className="w-full">
-      <div className="mt-6 grid grid-cols-3 items-center justify-center">
-        <span className="w-full border border-grey-200"></span>
-        <span className="justify-self-center w-fit">Or</span>
-        <span className="w-full border border-grey-200"></span>
-      </div>
-      <div className="mt-6">
-        <button
-          className="btn bg-form-input rounded-none w-full outline-none border-none flex flex-row items-center justify-center hover:bg-grey-200"
-          onClick={() => {
-            getGoogleAuthDetails();
-          }}
-        >
-          <span style={{ color: '#000000', fontWeight: '400', opacity: '0.5' }}>
-            Sign up with
-          </span>
-          <span className="pl-2">
-            <GoogleLogo />
-          </span>
-        </button>
-      </div>
+const GoogleAccountCreation = () => (
+  <div className="w-full mt-6">
+    <div className="grid grid-cols-3 items-center justify-center">
+      <span className="w-full border border-grey-200"></span>
+      <span className="justify-self-center w-fit">Or</span>
+      <span className="w-full border border-grey-200"></span>
     </div>
-  );
-};
+    <div className="mt-6">
+      <button
+        className="btn bg-form-input rounded-none w-full outline-none border-none flex flex-row items-center justify-center hover:bg-grey-200"
+        onClick={getGoogleAuthDetails}
+      >
+        <span style={{ color: '#000000', fontWeight: '400', opacity: '0.5' }}>
+          Sign up with
+        </span>
+        <span className="pl-2">
+          <GoogleLogo />
+        </span>
+      </button>
+    </div>
+  </div>
+);
 
 export default UserDesignation;