Merge remote-tracking branch 'origin/staging' into ft/lang-support-is…

…sue#2479

k8s/platform/values-prod.yaml

@@ -2,7 +2,7 @@ replicaCount: 1
 image:
   repository: eu.gcr.io/airqo-250220/airqo-next-platform
   pullPolicy: Always
-  tag: prod-16e65200-1739133930
+  tag: prod-6a098ecd-1740727843
 imagePullSecrets: []
 nameOverride: ''
 fullnameOverride: ''

k8s/platform/values-stage.yaml

@@ -2,7 +2,7 @@ replicaCount: 1
 image:
   repository: eu.gcr.io/airqo-250220/airqo-stage-next-platform
   pullPolicy: Always
-  tag: stage-07e1532b-1740386563
+  tag: stage-93a63a9e-1740727732
 imagePullSecrets: []
 nameOverride: ''
 fullnameOverride: ''

src/platform/package.json

@@ -30,6 +30,7 @@
     "fuse.js": "^7.0.0",
     "html2canvas": "^1.4.1",
     "i18n-iso-countries": "^7.7.0",
+    "js-cookie": "^3.0.5",
     "json2csv": "^6.0.0-alpha.2",
     "jspdf": "^2.5.2",
     "jspdf-autotable": "^3.8.4",

src/platform/src/pages/account/creation/index.jsx

@@ -4,68 +4,73 @@ 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;
+    },
   },
 ];
 
 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">
             {userRoles.map((role, index) => (
               <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,39 +84,35 @@ 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>
     </div>
   );
 };
 
-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;

src/platform/yarn.lock

@@ -5252,6 +5252,11 @@ js-cookie@^2.2.1:
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
   integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"

src/website2/next.config.mjs

@@ -50,6 +50,21 @@ const nextConfig = {
         destination: '/clean-air-forum/about',
         permanent: true,
       },
+      {
+        source: '/clean-air-network',
+        destination: '/clean-air-network/about',
+        permanent: true,
+      },
+      {
+        source: '/clean-air/about',
+        destination: '/clean-air-network/about',
+        permanent: true,
+      },
+      {
+        source: '/clean-air',
+        destination: '/clean-air-network/about',
+        permanent: true,
+      },
     ];
   },
 };

src/website2/public/assets/icons/Icon1.tsx

@@ -1,4 +1,4 @@
-// components/icons/Icon1.tsx
+
 import React from 'react';
 
 interface IconProps {

src/website2/public/assets/icons/Icon2.tsx

@@ -1,4 +1,4 @@
-// components/icons/Icon2.tsx
+
 import React from 'react';
 
 interface IconProps {

src/website2/public/assets/icons/Icon3.tsx

@@ -1,4 +1,4 @@
-// components/icons/Icon3.tsx
+
 import React from 'react';
 
 interface IconProps {

src/website2/public/assets/icons/Icon4.tsx

@@ -1,4 +1,4 @@
-// components/icons/Icon4.tsx
+
 import React from 'react';
 
 interface IconProps {

src/website2/public/assets/icons/Icon5.tsx

@@ -1,4 +1,4 @@
-// components/icons/Icon5.tsx
+
 import React from 'react';
 
 interface IconProps {

src/website2/public/assets/icons/Icon6.tsx

@@ -1,4 +1,4 @@
-// components/icons/Icon6.tsx
+
 import React from 'react';
 
 interface IconProps {

src/website2/public/assets/icons/Icon7.tsx

@@ -1,4 +1,4 @@
-// components/icons/Icon6.tsx
+
 import React from 'react';
 
 interface IconProps {

src/website2/public/assets/icons/Icon8.tsx

@@ -1,4 +1,4 @@
-// components/icons/Icon6.tsx
+
 import React from 'react';
 
 interface IconProps {

src/website2/public/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "AirQo Website",
+  "short_name": "AirQo",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

src/website2/src/app/[locale]/clean-air-forum/about/page.tsx

@@ -1,13 +1,19 @@
-import React from 'react';
+import { Metadata } from 'next';
 
-import AboutPage from '@/views/Forum/AboutPage';
+import AboutPage from '@/views/cleanairforum/about/AboutPage';
 
-const page = () => {
+export const metadata: Metadata = {
+  title: 'About Clean Air Forum | AirQo',
+  description:
+    'Discover the Clean Air Forum – learn about our mission, vision, and how we foster collaboration to advance clean air solutions and improve air quality.',
+};
+
+const Page = () => {
   return (
     <div>
       <AboutPage />
     </div>
   );
 };
 
-export default page;
+export default Page;