From 1abd9dd5f55f074af1353d244085e59ceca29533 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 5 Nov 2024 16:40:21 +0300
Subject: [PATCH 01/25] Add ability to select profile from admin

---
 .../src/lib/hurumap/index.js                  | 10 +++++--
 .../hurumap/{profiles.js => profiles/[id].js} |  3 ++-
 .../src/pages/api/hurumap/profiles/index.js   | 25 +++++++++++++++++
 .../src/payload/fields/LocationSelect.js      | 27 +++++++++++++------
 .../src/payload/fields/ProfileSelect.js       | 21 +++++++++++++++
 .../src/payload/globals/HURUMap/Profile.js    | 16 +++++++++++
 .../payload/globals/HURUMap/RootGeography.js  |  3 +++
 7 files changed, 94 insertions(+), 11 deletions(-)
 rename apps/climatemappedafrica/src/pages/api/hurumap/{profiles.js => profiles/[id].js} (87%)
 create mode 100644 apps/climatemappedafrica/src/pages/api/hurumap/profiles/index.js
 create mode 100644 apps/climatemappedafrica/src/payload/fields/ProfileSelect.js

diff --git a/apps/climatemappedafrica/src/lib/hurumap/index.js b/apps/climatemappedafrica/src/lib/hurumap/index.js
index 550c5cb56..822398f8d 100644
--- a/apps/climatemappedafrica/src/lib/hurumap/index.js
+++ b/apps/climatemappedafrica/src/lib/hurumap/index.js
@@ -5,9 +5,9 @@ import formatNumericalValue from "@/climatemappedafrica/utils/formatNumericalVal
 
 const apiUrl = process.env.HURUMAP_API_URL || hurumap?.api?.url;
 
-export async function fetchProfile() {
+export async function fetchProfile(id) {
   const { configuration } = await fetchJson(
-    new URL("/api/v1/profiles/1/?format=json", apiUrl),
+    new URL(`/api/v1/profiles/${id}/?format=json`, apiUrl),
   );
 
   const locations = configuration?.featured_locations?.map(
@@ -24,6 +24,12 @@ export async function fetchProfile() {
   };
 }
 
+export async function fetchProfiles() {
+  const { results } = await fetchJson(new URL("/api/v1/profiles", apiUrl));
+  const profiles = results.map(({ name, id }) => ({ name, id }));
+  return profiles;
+}
+
 function formatProfileGeographyData(data, parent) {
   if (!data) {
     return null;
diff --git a/apps/climatemappedafrica/src/pages/api/hurumap/profiles.js b/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js
similarity index 87%
rename from apps/climatemappedafrica/src/pages/api/hurumap/profiles.js
rename to apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js
index ae3ff17a5..def3e9b0d 100644
--- a/apps/climatemappedafrica/src/pages/api/hurumap/profiles.js
+++ b/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js
@@ -4,6 +4,7 @@ let cache = null;
 let cacheExpiry = 0;
 
 export default async function handler(req, res) {
+  const { id } = req.query;
   if (req.method === "GET") {
     const now = Date.now();
 
@@ -12,7 +13,7 @@ export default async function handler(req, res) {
     }
 
     try {
-      const result = await fetchProfile();
+      const result = await fetchProfile(id);
       cache = result;
       cacheExpiry = now + 5 * 60 * 1000;
       return res.status(200).json(result);
diff --git a/apps/climatemappedafrica/src/pages/api/hurumap/profiles/index.js b/apps/climatemappedafrica/src/pages/api/hurumap/profiles/index.js
new file mode 100644
index 000000000..f985eabca
--- /dev/null
+++ b/apps/climatemappedafrica/src/pages/api/hurumap/profiles/index.js
@@ -0,0 +1,25 @@
+import { fetchProfiles } from "@/climatemappedafrica/lib/hurumap";
+
+let cache = null;
+let cacheExpiry = 0;
+
+export default async function handler(req, res) {
+  if (req.method === "GET") {
+    const now = Date.now();
+
+    if (cache && now < cacheExpiry) {
+      return res.status(200).json(cache);
+    }
+
+    try {
+      const result = await fetchProfiles();
+      cache = result;
+      cacheExpiry = now + 5 * 60 * 1000;
+      return res.status(200).json(result);
+    } catch (err) {
+      return res.status(500).json(err.message);
+    }
+  }
+
+  return res.status(405).end();
+}
diff --git a/apps/climatemappedafrica/src/payload/fields/LocationSelect.js b/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
index 293f4b762..b5917beea 100644
--- a/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
+++ b/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
@@ -1,4 +1,8 @@
-import { Select } from "payload/components/forms";
+import {
+  Select,
+  useAllFormFields,
+  reduceFieldsToValues,
+} from "payload/components/forms";
 import { select } from "payload/dist/fields/validations";
 import { createElement, useMemo } from "react";
 import useSWR from "swr";
@@ -14,17 +18,24 @@ const getOptions = (locations) =>
       value: location.code,
     })) || [];
 
-export async function validateLocation(value, { hasMany, required, t }) {
-  const data = await fetcher(`${apiUrl}/api/hurumap/profiles`);
-  const options = getOptions(data.locations);
+export async function validateLocation(value, { data, hasMany, required, t }) {
+  const { profile } = data;
+  const res = await fetcher(`${apiUrl}/api/hurumap/profiles/${profile}`);
+  const options = getOptions(res.locations);
   return select(value, { hasMany, options, required, t });
 }
 
 function LocationSelect(props) {
-  const { data } = useSWR(`${apiUrl}/api/hurumap/profiles`, fetcher, {
-    dedupingInterval: 60000,
-    revalidateOnFocus: false,
-  });
+  const [fields] = useAllFormFields();
+  const formData = reduceFieldsToValues(fields, true);
+  const { data } = useSWR(
+    `${apiUrl}/api/hurumap/profiles/${formData.profile}`,
+    fetcher,
+    {
+      dedupingInterval: 60000,
+      revalidateOnFocus: false,
+    },
+  );
 
   const options = useMemo(
     () =>
diff --git a/apps/climatemappedafrica/src/payload/fields/ProfileSelect.js b/apps/climatemappedafrica/src/payload/fields/ProfileSelect.js
new file mode 100644
index 000000000..de8928c83
--- /dev/null
+++ b/apps/climatemappedafrica/src/payload/fields/ProfileSelect.js
@@ -0,0 +1,21 @@
+import { Select } from "payload/components/forms";
+import { createElement, useMemo } from "react";
+import useSWR from "swr";
+
+const apiUrl = process.env.PAYLOAD_PUBLIC_APP_URL;
+const fetcher = (url) => fetch(url).then((res) => res.json());
+
+function ProfileSelect(props) {
+  const { data } = useSWR(`${apiUrl}/api/hurumap/profiles`, fetcher, {
+    dedupingInterval: 60000,
+    revalidateOnFocus: false,
+  });
+
+  const options = useMemo(
+    () => data?.map(({ name, id }) => ({ label: name, value: id })) || [],
+    [data],
+  );
+  return createElement(Select, { ...props, options });
+}
+
+export default ProfileSelect;
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
index 7f33ea355..2b6569c91 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
@@ -1,6 +1,22 @@
+import ProfileSelect from "../../fields/ProfileSelect";
+
 const Profile = {
   label: "Profile",
   fields: [
+    {
+      name: "profile",
+      type: "number",
+      label: {
+        en: "Profile to Use",
+      },
+      required: true,
+      hasMany: false,
+      admin: {
+        components: {
+          Field: ProfileSelect,
+        },
+      },
+    },
     {
       name: "page",
       label: {
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
index d0b44ae0f..9c993d787 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
@@ -9,6 +9,9 @@ const RootGeography = {
         en: "Root Geography",
       },
       type: "group",
+      admin: {
+        condition: (data) => Boolean(data?.profile),
+      },
       fields: [
         {
           name: "code",

From ade7d40d4ed986f9ea28622180024609b94d05d8 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Wed, 6 Nov 2024 08:42:42 +0300
Subject: [PATCH 02/25] Fix profile

---
 apps/climatemappedafrica/src/lib/data/common/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index b784c3552..5120f2920 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -118,7 +118,7 @@ export async function getPageProps(api, context) {
   const hurumapSettings = await api.findGlobal("settings-hurumap");
   if (hurumapSettings?.enabled) {
     // TODO(koech): Handle cases when fetching profile fails?
-    const profile = await fetchProfile();
+    const profile = await fetchProfile(hurumapSettings.profile);
     const { page: hurumapPage, ...otherHurumapSettings } = hurumapSettings;
     const { value: profilePage } = hurumapPage;
     if (slug === profilePage.slug) {

From 1aca83b11652c4ecd725892536d833c782ff9066 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 7 Nov 2024 12:24:42 +0300
Subject: [PATCH 03/25] Use profile id

---
 apps/climatemappedafrica/src/lib/data/blockify/hero.js | 3 ++-
 apps/climatemappedafrica/src/lib/data/common/index.js  | 9 +++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/climatemappedafrica/src/lib/data/blockify/hero.js b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
index 0f4cf6684..5cdfc331d 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/hero.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
@@ -10,6 +10,7 @@ import {
  */
 export default async function hero(block, _api, _context, { hurumap }) {
   const {
+    profileId,
     profilePage,
     rootGeography: { center, code, hasData: pinRootGeography },
   } = hurumap ?? { rootGeography: {} };
@@ -20,7 +21,7 @@ export default async function hero(block, _api, _context, { hurumap }) {
     country: "region",
   };
   const childLevel = childLevelMaps[level];
-  const { locations, preferredChildren } = await fetchProfile();
+  const { locations, preferredChildren } = await fetchProfile(profileId);
   const preferredChildrenPerLevel = preferredChildren[level];
   const { children } = geometries;
   const preferredLevel =
diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index 5120f2920..a85cf13b0 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -118,8 +118,12 @@ export async function getPageProps(api, context) {
   const hurumapSettings = await api.findGlobal("settings-hurumap");
   if (hurumapSettings?.enabled) {
     // TODO(koech): Handle cases when fetching profile fails?
-    const profile = await fetchProfile(hurumapSettings.profile);
-    const { page: hurumapPage, ...otherHurumapSettings } = hurumapSettings;
+    const {
+      page: hurumapPage,
+      profile: profileId,
+      ...otherHurumapSettings
+    } = hurumapSettings;
+    const profile = await fetchProfile(profileId);
     const { value: profilePage } = hurumapPage;
     if (slug === profilePage.slug) {
       variant = "explore";
@@ -136,6 +140,7 @@ export async function getPageProps(api, context) {
     settings.hurumap = {
       ...otherHurumapSettings,
       profile,
+      profileId,
       profilePage,
     };
   }

From 18d69e60cfcecb6f72cc4b5049a3d9ceda8b3de2 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 7 Nov 2024 16:17:33 +0300
Subject: [PATCH 04/25] Custom input for URL

---
 .../src/payload/fields/HURUMapURL/index.js    | 89 +++++++++++++++++++
 .../src/payload/globals/HURUMap/index.js      | 19 +++-
 2 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js

diff --git a/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js b/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
new file mode 100644
index 000000000..f586ee610
--- /dev/null
+++ b/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
@@ -0,0 +1,89 @@
+import { Button } from "payload/components/elements";
+import { Label, TextInput, useField } from "payload/components/forms";
+import { createElement, useState, useEffect } from "react";
+
+function HURUMapURL(props) {
+  const {
+    admin: { description },
+    name,
+    path,
+  } = props;
+  const { value, setValue } = useField({ path });
+  const [isValid, setIsValid] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [isButtonDisabled, setIsButtonDisabled] = useState(true);
+
+  const validateURL = async () => {
+    if (!value) return;
+    setLoading(true);
+    try {
+      const response = await fetch(value);
+      setIsValid(response.ok);
+    } catch (error) {
+      setIsValid(false);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const isURLValid = (url) => {
+    const urlPattern = new RegExp(
+      "^(https?:\\/\\/)" + // protocol
+        "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|" + // domain name
+        "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
+        "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
+        "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
+        "(\\#[-a-z\\d_]*)?$",
+      "i", // fragment locator
+    );
+    return !!urlPattern.test(url);
+  };
+
+  const handleInputChange = (e) => {
+    const newUrl = e.target.value;
+    setValue(newUrl);
+    setIsValid(null);
+    setIsButtonDisabled(!isURLValid(newUrl));
+  };
+
+  useEffect(() => {
+    setIsButtonDisabled(!isURLValid(value));
+  }, [value]);
+
+  return createElement(
+    "div",
+    {
+      id: "hurumap-url-wrapper",
+    },
+    createElement(TextInput, {
+      ...props,
+      value,
+      onChange: handleInputChange,
+    }),
+    description &&
+      createElement(
+        "span",
+        {
+          className: "field-description",
+        },
+        description,
+      ),
+    createElement(
+      Button,
+      {
+        type: "button",
+        onClick: () => validateURL(),
+        className: "btn btn--style-primary",
+        disabled: loading || isButtonDisabled,
+      },
+      loading ? "Checking..." : "Validate URL",
+    ),
+    isValid !== null &&
+      createElement(Label, {
+        label: isValid ? "✓ URL is valid" : "✗ Invalid URL",
+        htmlFor: `field-${name}`,
+      }),
+  );
+}
+
+export default HURUMapURL;
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
index b91ebb6a1..0659f8c18 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
@@ -1,3 +1,5 @@
+import HURUMapURL from "../../fields/HURUMapURL";
+
 import DataPanels from "./DataPanels";
 import Profile from "./Profile";
 import RootGeography from "./RootGeography";
@@ -21,11 +23,26 @@ const HURUMap = {
       type: "checkbox",
       defaultValue: false,
     },
+    {
+      name: "hurumapAPIURL",
+      label: "HURUMap API BASE URL",
+      type: "text",
+      admin: {
+        condition: (_, siblingData) => !!siblingData?.enableHURUMap,
+        components: {
+          Field: HURUMapURL,
+        },
+        description:
+          "The base URL for the HURUmap API. For example, https://hurumap.org/api/v1",
+      },
+      required: true,
+    },
     {
       type: "tabs",
       tabs: [Profile, DataPanels, RootGeography, Tutorial],
       admin: {
-        condition: (_, siblingData) => !!siblingData?.enableHURUMap,
+        condition: (_, siblingData) =>
+          !!siblingData?.enableHURUMap && !!siblingData?.hurumapAPIURL,
       },
     },
   ],

From 7cd7bf9cc511ce90ace6e7736669b1b6bd2ecee4 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 7 Nov 2024 17:05:47 +0300
Subject: [PATCH 05/25] Validate HURUMAp url

---
 .../src/payload/fields/HURUMapURL/index.js    | 23 +++++++++++++++++--
 .../src/payload/globals/HURUMap/index.js      | 11 ++++++++-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js b/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
index f586ee610..148141579 100644
--- a/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
+++ b/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
@@ -1,5 +1,10 @@
 import { Button } from "payload/components/elements";
-import { Label, TextInput, useField } from "payload/components/forms";
+import {
+  Label,
+  TextInput,
+  useField,
+  useFormFields,
+} from "payload/components/forms";
 import { createElement, useState, useEffect } from "react";
 
 function HURUMapURL(props) {
@@ -12,15 +17,29 @@ function HURUMapURL(props) {
   const [isValid, setIsValid] = useState(null);
   const [loading, setLoading] = useState(false);
   const [isButtonDisabled, setIsButtonDisabled] = useState(true);
+  // eslint-disable-next-line no-unused-vars
+  const isHURUMapAPIURLValid = useFormFields(([_, dispatch]) => dispatch);
 
   const validateURL = async () => {
     if (!value) return;
     setLoading(true);
     try {
-      const response = await fetch(value);
+      // For now we can use the profiles endpoint to check if the URL is validate
+      // Ideally we should have a dedicated endpoint for this
+      const response = await fetch(`${value}/profiles`);
       setIsValid(response.ok);
+      isHURUMapAPIURLValid({
+        type: "UPDATE",
+        path: "isHURUMapAPIURLValid",
+        value: response.ok,
+      });
     } catch (error) {
       setIsValid(false);
+      isHURUMapAPIURLValid({
+        type: "UPDATE",
+        path: "isHURUMapAPIURLValid",
+        value: false,
+      });
     } finally {
       setLoading(false);
     }
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
index 0659f8c18..74d66226d 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
@@ -37,12 +37,21 @@ const HURUMap = {
       },
       required: true,
     },
+    {
+      name: "isHURUMapAPIURLValid",
+      type: "checkbox",
+      admin: {
+        hidden: true,
+        readOnly: true,
+        condition: (_, siblingData) => !!siblingData?.enableHURUMap,
+      },
+    },
     {
       type: "tabs",
       tabs: [Profile, DataPanels, RootGeography, Tutorial],
       admin: {
         condition: (_, siblingData) =>
-          !!siblingData?.enableHURUMap && !!siblingData?.hurumapAPIURL,
+          !!siblingData?.enableHURUMap && !!siblingData?.isHURUMapAPIURLValid,
       },
     },
   ],

From 7cbea7387eb9859cf2bea17a6a77151052d7f8a0 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 7 Nov 2024 17:18:11 +0300
Subject: [PATCH 06/25] Fix dropdown search color and padding

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../src/components/DropdownSearch/DownloadSearch.js           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js
index b1f4b04ff..95f78e90a 100644
--- a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js
+++ b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js
@@ -115,12 +115,12 @@ function DropdownSearch({
         value={query}
         sx={({ typography, palette }) => ({
           borderRadius: typography.pxToRem(10),
-          color: palette.primary.main,
+          color: palette.text.primary,
           border: `2px solid ${palette.text.hint}`,
           width: typography.pxToRem(278),
           backgroundColor: "inherit",
           height: typography.pxToRem(48),
-          padding: 0,
+          padding: `0 0 0 ${typography.pxToRem(20)}`,
           "&.MuiInputBase-input": {
             backgroundColor: "inherit",
             height: typography.pxToRem(48),

From de4fd474887703cc97395900a8959856c472fd50 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 7 Nov 2024 17:26:23 +0300
Subject: [PATCH 07/25] Hide tutorial icon if tutorial is not enabled

---
 .../Navigation/ExploreNavigation/index.js     | 46 +++++++++++--------
 .../src/lib/data/common/index.js              |  3 ++
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js
index 45fb42112..31a9f4a2e 100644
--- a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js
+++ b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js
@@ -41,7 +41,13 @@ const useStyles = makeStyles(({ palette, typography }) => ({
   },
 }));
 
-function ExploreNavigation({ explorePagePath, locations, logo, variant }) {
+function ExploreNavigation({
+  explorePagePath,
+  locations,
+  logo,
+  tutorialEnabled,
+  variant,
+}) {
   const classes = useStyles();
   const { setIsOpen } = useTour();
 
@@ -83,24 +89,26 @@ function ExploreNavigation({ explorePagePath, locations, logo, variant }) {
                 menuItem: classes.searchMenuItem,
               }}
             />
-            <Typography
-              component="div"
-              id="nav-help"
-              onClick={openTooltip}
-              variant="h3"
-              sx={(theme) => ({
-                color: "#666666",
-                textAlign: "center",
-                backgroundColor: "#EBEBEB",
-                borderRadius: theme.typography.pxToRem(60),
-                marginLeft: theme.typography.pxToRem(20),
-                width: theme.typography.pxToRem(48),
-                height: theme.typography.pxToRem(48),
-                cursor: "pointer",
-              })}
-            >
-              ?
-            </Typography>
+            {tutorialEnabled && (
+              <Typography
+                component="div"
+                id="nav-help"
+                onClick={openTooltip}
+                variant="h3"
+                sx={(theme) => ({
+                  color: "#666666",
+                  textAlign: "center",
+                  backgroundColor: "#EBEBEB",
+                  borderRadius: theme.typography.pxToRem(60),
+                  marginLeft: theme.typography.pxToRem(20),
+                  width: theme.typography.pxToRem(48),
+                  height: theme.typography.pxToRem(48),
+                  cursor: "pointer",
+                })}
+              >
+                ?
+              </Typography>
+            )}
           </Grid>
           <Grid />
         </Grid>
diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index a85cf13b0..2fd23ad29 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -50,11 +50,13 @@ async function getNavBar(variant, settings) {
   const socialLinks = links?.filter((link) => connect.includes(link.platform));
   let explorePagePath = null;
   let locations = null;
+  let tutorialEnabled;
   if (hurumap?.enabled) {
     explorePagePath = hurumap.profilePage.slug;
     if (hurumap.profile) {
       locations = hurumap.profile.locations;
     }
+    tutorialEnabled = hurumap.tutorial?.enabled;
   }
 
   return {
@@ -64,6 +66,7 @@ async function getNavBar(variant, settings) {
     logo: imageFromMedia(title, primaryLogo.url),
     menus,
     socialLinks,
+    tutorialEnabled,
     variant,
   };
 }

From a67c2beeaa0214e8655b81cd9a59077224369388 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 7 Nov 2024 17:36:47 +0300
Subject: [PATCH 08/25] regenerate snapshots

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../src/components/DropdownSearch/DropdownSearch.snap.js        | 2 +-
 apps/climatemappedafrica/src/components/Hero/Hero.snap.js       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
index 06576c3fb..c4897ddd9 100644
--- a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
+++ b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
@@ -12,7 +12,7 @@ exports[`<DropdownSearch /> renders unchanged 1`] = `
       Search for a location
     </p>
     <div
-      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1f7prdq-MuiInputBase-root"
+      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-49e042-MuiInputBase-root"
     >
       <input
         aria-label="search"
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
index 6b4302a5f..05d98c2b8 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -58,7 +58,7 @@ exports[`<Hero /> renders unchanged 1`] = `
               Search for a location
             </p>
             <div
-              class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1f7prdq-MuiInputBase-root"
+              class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-49e042-MuiInputBase-root"
             >
               <input
                 aria-label="search"

From e3e5815dab4fef2d1c3074fa859ba574201b61a3 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 8 Nov 2024 10:32:40 +0300
Subject: [PATCH 09/25] Use Set API

---
 .../src/lib/data/blockify/hero.js             |  6 +++++-
 .../src/lib/data/common/index.js              |  3 ++-
 .../src/lib/hurumap/index.js                  |  8 +++----
 .../src/pages/api/hurumap/profiles/[id].js    |  3 ++-
 .../src/pages/api/hurumap/profiles/index.js   |  3 ++-
 .../src/payload/fields/HURUMapURL/index.js    | 10 ++++-----
 .../src/payload/fields/LocationSelect.js      | 11 ++--------
 .../src/payload/fields/ProfileSelect.js       | 21 ++++++++++++++-----
 .../payload/globals/HURUMap/RootGeography.js  |  3 +--
 .../src/payload/globals/HURUMap/index.js      |  4 ++--
 10 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/apps/climatemappedafrica/src/lib/data/blockify/hero.js b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
index 5cdfc331d..e9d2fa12a 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/hero.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
@@ -10,6 +10,7 @@ import {
  */
 export default async function hero(block, _api, _context, { hurumap }) {
   const {
+    hurumapAPIURL,
     profileId,
     profilePage,
     rootGeography: { center, code, hasData: pinRootGeography },
@@ -21,7 +22,10 @@ export default async function hero(block, _api, _context, { hurumap }) {
     country: "region",
   };
   const childLevel = childLevelMaps[level];
-  const { locations, preferredChildren } = await fetchProfile(profileId);
+  const { locations, preferredChildren } = await fetchProfile(
+    hurumapAPIURL,
+    profileId,
+  );
   const preferredChildrenPerLevel = preferredChildren[level];
   const { children } = geometries;
   const preferredLevel =
diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index 2fd23ad29..93e641d5d 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -122,11 +122,12 @@ export async function getPageProps(api, context) {
   if (hurumapSettings?.enabled) {
     // TODO(koech): Handle cases when fetching profile fails?
     const {
+      hurumapAPIURL,
       page: hurumapPage,
       profile: profileId,
       ...otherHurumapSettings
     } = hurumapSettings;
-    const profile = await fetchProfile(profileId);
+    const profile = await fetchProfile(hurumapAPIURL, profileId);
     const { value: profilePage } = hurumapPage;
     if (slug === profilePage.slug) {
       variant = "explore";
diff --git a/apps/climatemappedafrica/src/lib/hurumap/index.js b/apps/climatemappedafrica/src/lib/hurumap/index.js
index 822398f8d..b814414be 100644
--- a/apps/climatemappedafrica/src/lib/hurumap/index.js
+++ b/apps/climatemappedafrica/src/lib/hurumap/index.js
@@ -5,9 +5,9 @@ import formatNumericalValue from "@/climatemappedafrica/utils/formatNumericalVal
 
 const apiUrl = process.env.HURUMAP_API_URL || hurumap?.api?.url;
 
-export async function fetchProfile(id) {
+export async function fetchProfile(BASE_URL, id) {
   const { configuration } = await fetchJson(
-    new URL(`/api/v1/profiles/${id}/?format=json`, apiUrl),
+    new URL(`/api/v1/profiles/${id}/?format=json`, BASE_URL),
   );
 
   const locations = configuration?.featured_locations?.map(
@@ -24,8 +24,8 @@ export async function fetchProfile(id) {
   };
 }
 
-export async function fetchProfiles() {
-  const { results } = await fetchJson(new URL("/api/v1/profiles", apiUrl));
+export async function fetchProfiles(BASE_URL) {
+  const { results } = await fetchJson(new URL("/api/v1/profiles", BASE_URL));
   const profiles = results.map(({ name, id }) => ({ name, id }));
   return profiles;
 }
diff --git a/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js b/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js
index def3e9b0d..cc294e77f 100644
--- a/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js
+++ b/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js
@@ -5,6 +5,7 @@ let cacheExpiry = 0;
 
 export default async function handler(req, res) {
   const { id } = req.query;
+  const { BASE_URL } = req.query;
   if (req.method === "GET") {
     const now = Date.now();
 
@@ -13,7 +14,7 @@ export default async function handler(req, res) {
     }
 
     try {
-      const result = await fetchProfile(id);
+      const result = await fetchProfile(BASE_URL, id);
       cache = result;
       cacheExpiry = now + 5 * 60 * 1000;
       return res.status(200).json(result);
diff --git a/apps/climatemappedafrica/src/pages/api/hurumap/profiles/index.js b/apps/climatemappedafrica/src/pages/api/hurumap/profiles/index.js
index f985eabca..8c360be85 100644
--- a/apps/climatemappedafrica/src/pages/api/hurumap/profiles/index.js
+++ b/apps/climatemappedafrica/src/pages/api/hurumap/profiles/index.js
@@ -4,6 +4,7 @@ let cache = null;
 let cacheExpiry = 0;
 
 export default async function handler(req, res) {
+  const { BASE_URL } = req.query;
   if (req.method === "GET") {
     const now = Date.now();
 
@@ -12,7 +13,7 @@ export default async function handler(req, res) {
     }
 
     try {
-      const result = await fetchProfiles();
+      const result = await fetchProfiles(BASE_URL);
       cache = result;
       cacheExpiry = now + 5 * 60 * 1000;
       return res.status(200).json(result);
diff --git a/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js b/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
index 148141579..a41986c5c 100644
--- a/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
+++ b/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
@@ -18,7 +18,7 @@ function HURUMapURL(props) {
   const [loading, setLoading] = useState(false);
   const [isButtonDisabled, setIsButtonDisabled] = useState(true);
   // eslint-disable-next-line no-unused-vars
-  const isHURUMapAPIURLValid = useFormFields(([_, dispatch]) => dispatch);
+  const HURUMapAPIURLValid = useFormFields(([_, dispatch]) => dispatch);
 
   const validateURL = async () => {
     if (!value) return;
@@ -28,16 +28,16 @@ function HURUMapURL(props) {
       // Ideally we should have a dedicated endpoint for this
       const response = await fetch(`${value}/profiles`);
       setIsValid(response.ok);
-      isHURUMapAPIURLValid({
+      HURUMapAPIURLValid({
         type: "UPDATE",
-        path: "isHURUMapAPIURLValid",
+        path: "HURUMapAPIURLValid",
         value: response.ok,
       });
     } catch (error) {
       setIsValid(false);
-      isHURUMapAPIURLValid({
+      HURUMapAPIURLValid({
         type: "UPDATE",
-        path: "isHURUMapAPIURLValid",
+        path: "HURUMapAPIURLValid",
         value: false,
       });
     } finally {
diff --git a/apps/climatemappedafrica/src/payload/fields/LocationSelect.js b/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
index b5917beea..9dcb4ae06 100644
--- a/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
+++ b/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
@@ -3,7 +3,6 @@ import {
   useAllFormFields,
   reduceFieldsToValues,
 } from "payload/components/forms";
-import { select } from "payload/dist/fields/validations";
 import { createElement, useMemo } from "react";
 import useSWR from "swr";
 
@@ -18,18 +17,12 @@ const getOptions = (locations) =>
       value: location.code,
     })) || [];
 
-export async function validateLocation(value, { data, hasMany, required, t }) {
-  const { profile } = data;
-  const res = await fetcher(`${apiUrl}/api/hurumap/profiles/${profile}`);
-  const options = getOptions(res.locations);
-  return select(value, { hasMany, options, required, t });
-}
-
 function LocationSelect(props) {
   const [fields] = useAllFormFields();
   const formData = reduceFieldsToValues(fields, true);
+  const BASE_URL = formData.hurumapAPIURL;
   const { data } = useSWR(
-    `${apiUrl}/api/hurumap/profiles/${formData.profile}`,
+    `${apiUrl}/api/hurumap/profiles/${formData.profile}?BASE_URL=${BASE_URL}`,
     fetcher,
     {
       dedupingInterval: 60000,
diff --git a/apps/climatemappedafrica/src/payload/fields/ProfileSelect.js b/apps/climatemappedafrica/src/payload/fields/ProfileSelect.js
index de8928c83..d3a652c95 100644
--- a/apps/climatemappedafrica/src/payload/fields/ProfileSelect.js
+++ b/apps/climatemappedafrica/src/payload/fields/ProfileSelect.js
@@ -1,4 +1,8 @@
-import { Select } from "payload/components/forms";
+import {
+  Select,
+  useAllFormFields,
+  reduceFieldsToValues,
+} from "payload/components/forms";
 import { createElement, useMemo } from "react";
 import useSWR from "swr";
 
@@ -6,10 +10,17 @@ const apiUrl = process.env.PAYLOAD_PUBLIC_APP_URL;
 const fetcher = (url) => fetch(url).then((res) => res.json());
 
 function ProfileSelect(props) {
-  const { data } = useSWR(`${apiUrl}/api/hurumap/profiles`, fetcher, {
-    dedupingInterval: 60000,
-    revalidateOnFocus: false,
-  });
+  const [fields] = useAllFormFields();
+  const formData = reduceFieldsToValues(fields, true);
+  const BASE_URL = formData.hurumapAPIURL;
+  const { data } = useSWR(
+    `${apiUrl}/api/hurumap/profiles?BASE_URL=${BASE_URL}`,
+    fetcher,
+    {
+      dedupingInterval: 60000,
+      revalidateOnFocus: false,
+    },
+  );
 
   const options = useMemo(
     () => data?.map(({ name, id }) => ({ label: name, value: id })) || [],
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
index 9c993d787..3dd7abfe2 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
@@ -1,4 +1,4 @@
-import LocationSelect, { validateLocation } from "../../fields/LocationSelect";
+import LocationSelect from "../../fields/LocationSelect";
 
 const RootGeography = {
   label: "Root Geography",
@@ -22,7 +22,6 @@ const RootGeography = {
           required: true,
           hasMany: false,
           defaultValue: "af",
-          validate: validateLocation,
           admin: {
             components: {
               Field: LocationSelect,
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
index 74d66226d..2a81ba311 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
@@ -38,7 +38,7 @@ const HURUMap = {
       required: true,
     },
     {
-      name: "isHURUMapAPIURLValid",
+      name: "HURUMapAPIURLValid",
       type: "checkbox",
       admin: {
         hidden: true,
@@ -51,7 +51,7 @@ const HURUMap = {
       tabs: [Profile, DataPanels, RootGeography, Tutorial],
       admin: {
         condition: (_, siblingData) =>
-          !!siblingData?.enableHURUMap && !!siblingData?.isHURUMapAPIURLValid,
+          !!siblingData?.enableHURUMap && !!siblingData?.HURUMapAPIURLValid,
       },
     },
   ],

From 16ff009fefbe0db060d6fa65973994ea4e74db03 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 8 Nov 2024 10:56:52 +0300
Subject: [PATCH 10/25] Use named params

---
 .../src/lib/data/blockify/hero.js                  |  6 +++---
 .../src/lib/data/common/index.js                   |  2 +-
 apps/climatemappedafrica/src/lib/hurumap/index.js  |  4 ++--
 .../src/pages/api/hurumap/index.js                 | 14 --------------
 .../src/pages/api/hurumap/profiles/[id].js         |  2 +-
 .../src/payload/fields/HURUMapURL/index.js         |  4 ++--
 .../src/payload/globals/HURUMap/DataPanels.js      |  5 +++++
 7 files changed, 14 insertions(+), 23 deletions(-)
 delete mode 100644 apps/climatemappedafrica/src/pages/api/hurumap/index.js

diff --git a/apps/climatemappedafrica/src/lib/data/blockify/hero.js b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
index e9d2fa12a..21d2140da 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/hero.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
@@ -22,10 +22,10 @@ export default async function hero(block, _api, _context, { hurumap }) {
     country: "region",
   };
   const childLevel = childLevelMaps[level];
-  const { locations, preferredChildren } = await fetchProfile(
-    hurumapAPIURL,
+  const { locations, preferredChildren } = await fetchProfile({
+    BASE_URL: hurumapAPIURL,
     profileId,
-  );
+  });
   const preferredChildrenPerLevel = preferredChildren[level];
   const { children } = geometries;
   const preferredLevel =
diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index 93e641d5d..571f7f973 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -127,7 +127,7 @@ export async function getPageProps(api, context) {
       profile: profileId,
       ...otherHurumapSettings
     } = hurumapSettings;
-    const profile = await fetchProfile(hurumapAPIURL, profileId);
+    const profile = await fetchProfile({ BASE_URL: hurumapAPIURL, profileId });
     const { value: profilePage } = hurumapPage;
     if (slug === profilePage.slug) {
       variant = "explore";
diff --git a/apps/climatemappedafrica/src/lib/hurumap/index.js b/apps/climatemappedafrica/src/lib/hurumap/index.js
index b814414be..1d1c78660 100644
--- a/apps/climatemappedafrica/src/lib/hurumap/index.js
+++ b/apps/climatemappedafrica/src/lib/hurumap/index.js
@@ -5,9 +5,9 @@ import formatNumericalValue from "@/climatemappedafrica/utils/formatNumericalVal
 
 const apiUrl = process.env.HURUMAP_API_URL || hurumap?.api?.url;
 
-export async function fetchProfile(BASE_URL, id) {
+export async function fetchProfile({ BASE_URL, profileId }) {
   const { configuration } = await fetchJson(
-    new URL(`/api/v1/profiles/${id}/?format=json`, BASE_URL),
+    new URL(`/api/v1/profiles/${profileId}/?format=json`, BASE_URL),
   );
 
   const locations = configuration?.featured_locations?.map(
diff --git a/apps/climatemappedafrica/src/pages/api/hurumap/index.js b/apps/climatemappedafrica/src/pages/api/hurumap/index.js
deleted file mode 100644
index 857f87b2b..000000000
--- a/apps/climatemappedafrica/src/pages/api/hurumap/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { fetchProfile } from "@/climatemappedafrica/lib/hurumap";
-
-export default async function index(req, res) {
-  if (req.method === "GET") {
-    try {
-      const result = await fetchProfile();
-      return res.status(200).json(result);
-    } catch (err) {
-      return res.status(500).json(err.message);
-    }
-  }
-
-  return res.status(405).end();
-}
diff --git a/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js b/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js
index cc294e77f..cc81e2542 100644
--- a/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js
+++ b/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js
@@ -14,7 +14,7 @@ export default async function handler(req, res) {
     }
 
     try {
-      const result = await fetchProfile(BASE_URL, id);
+      const result = await fetchProfile({ BASE_URL, profileId: id });
       cache = result;
       cacheExpiry = now + 5 * 60 * 1000;
       return res.status(200).json(result);
diff --git a/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js b/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
index a41986c5c..9c65fa381 100644
--- a/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
+++ b/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
@@ -24,8 +24,8 @@ function HURUMapURL(props) {
     if (!value) return;
     setLoading(true);
     try {
-      // For now we can use the profiles endpoint to check if the URL is validate
-      // Ideally we should have a dedicated endpoint for this
+      // For now we can use the profiles endpoint to check if the URL is valid
+      // Ideally we should have a dedicated endpoint for this, like /api/v1/validate or /api/v1/health
       const response = await fetch(`${value}/profiles`);
       setIsValid(response.ok);
       HURUMapAPIURLValid({
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/DataPanels.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/DataPanels.js
index cf60493c5..450ef677e 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/DataPanels.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/DataPanels.js
@@ -8,6 +8,11 @@ const DataPanels = {
       type: "array",
       label: "Panel Items",
       required: true,
+      admin: {
+        components: {
+          RowLabel: ({ data }) => data?.value,
+        },
+      },
       fields: [
         {
           type: "select",

From cede73e4e08d9c2cd41679a81665a633e96bc3cc Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 8 Nov 2024 11:10:41 +0300
Subject: [PATCH 11/25] Pass HURUMAPAPIURL

---
 apps/climatemappedafrica/src/lib/data/common/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index 571f7f973..1a753147e 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -143,6 +143,7 @@ export async function getPageProps(api, context) {
     }
     settings.hurumap = {
       ...otherHurumapSettings,
+      hurumapAPIURL,
       profile,
       profileId,
       profilePage,

From fa316572305348bd914472ec8b14088035bf430b Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 8 Nov 2024 13:10:10 +0300
Subject: [PATCH 12/25] fully use user provided api url

---
 .../src/components/ExplorePage/index.js          |  7 ++++++-
 .../ExplorePage/useProfileGeography.js           |  7 +++++--
 .../src/lib/data/blockify/explore-page.js        | 16 ++++++++++++++--
 .../src/lib/data/blockify/hero.js                |  5 ++++-
 .../climatemappedafrica/src/lib/hurumap/index.js | 16 ++++++++--------
 .../pages/api/hurumap/geographies/[geoCode].js   |  6 +++++-
 .../src/pages/api/hurumap/index.js               | 14 ++++++++++++++
 .../src/pages/api/hurumap/profiles/[id].js       |  3 +--
 8 files changed, 57 insertions(+), 17 deletions(-)
 create mode 100644 apps/climatemappedafrica/src/pages/api/hurumap/index.js

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
index 35cc52c07..17313b26c 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/index.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -33,6 +33,7 @@ function initialState(
 function ExplorePage({
   rootGeography,
   explorePagePath,
+  hurumapConfig,
   panel: PanelProps = {},
   profile: profileProp,
   ...props
@@ -92,7 +93,7 @@ function ExplorePage({
     (state.primary.shouldFetch && state.primary.code) ||
     (state.secondary?.shouldFetch && state.secondary?.code);
 
-  const { data, error } = useProfileGeography(shouldFetch);
+  const { data, error } = useProfileGeography(shouldFetch, hurumapConfig);
   useEffect(() => {
     if (data) {
       dispatch({
@@ -235,6 +236,10 @@ ExplorePage.propTypes = {
       }),
     ),
   ]),
+  hurumapConfig: PropTypes.shape({
+    hurumapAPIURL: PropTypes.string,
+    profileId: PropTypes.number,
+  }),
 };
 
 export default ExplorePage;
diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js b/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js
index 108fa7542..bbee038d2 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js
@@ -2,9 +2,12 @@ import useSWR from "swr";
 
 import fetchJson from "@/climatemappedafrica/utils/fetchJson";
 
-function useProfileGeography(shouldFetch) {
+function useProfileGeography(shouldFetch, hurumapConfig) {
+  const { BASE_URL, profileId } = hurumapConfig;
   const fetcher = (code) => {
-    return fetchJson(`/api/hurumap/geographies/${code}`);
+    return fetchJson(
+      `/api/hurumap/geographies/${code}?profileId=${profileId}&BASE_URL=${BASE_URL}`,
+    );
   };
   const { data, error } = useSWR(shouldFetch, fetcher);
 
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
index 2f2179445..d5c5f9ae8 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
@@ -6,9 +6,11 @@ import { fetchProfileGeography } from "@/climatemappedafrica/lib/hurumap";
  */
 async function explorePage(block, _api, _context, { hurumap }) {
   const {
+    hurumapAPIURL,
     items: panelItems,
     labels: { dataNotAvailable, scrollToTop: scrollToTopLabel },
     profile: hurumapProfile,
+    profileId,
     profilePage,
     rootGeography,
   } = hurumap;
@@ -30,10 +32,16 @@ async function explorePage(block, _api, _context, { hurumap }) {
   }
 
   const [primaryCode, secondaryCode] = geoCodes;
-  const primaryProfile = await fetchProfileGeography(primaryCode);
+  const primaryProfile = await fetchProfileGeography(primaryCode, {
+    BASE_URL: hurumapAPIURL,
+    profileId,
+  });
   const profile = [primaryProfile];
   if (secondaryCode) {
-    const secondaryProfile = await fetchProfileGeography(secondaryCode);
+    const secondaryProfile = await fetchProfileGeography(secondaryCode, {
+      BASE_URL: hurumapAPIURL,
+      profileId,
+    });
     profile.push(secondaryProfile);
   }
 
@@ -46,6 +54,10 @@ async function explorePage(block, _api, _context, { hurumap }) {
     id: "explore-page",
     blockType: "explore-page",
     choropleth,
+    hurumapConfig: {
+      hurumapAPIURL,
+      profileId,
+    },
     rootGeography,
     explorePagePath: profilePage.slug,
     locations,
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/hero.js b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
index 21d2140da..a69f0a24c 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/hero.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
@@ -15,7 +15,10 @@ export default async function hero(block, _api, _context, { hurumap }) {
     profilePage,
     rootGeography: { center, code, hasData: pinRootGeography },
   } = hurumap ?? { rootGeography: {} };
-  const { geometries } = await fetchProfileGeography(code.toLowerCase());
+  const { geometries } = await fetchProfileGeography(code.toLowerCase(), {
+    BASE_URL: hurumapAPIURL,
+    profileId,
+  });
   const { level } = geometries.boundary?.properties ?? {};
   const childLevelMaps = {
     continent: "country",
diff --git a/apps/climatemappedafrica/src/lib/hurumap/index.js b/apps/climatemappedafrica/src/lib/hurumap/index.js
index 1d1c78660..29a93ce36 100644
--- a/apps/climatemappedafrica/src/lib/hurumap/index.js
+++ b/apps/climatemappedafrica/src/lib/hurumap/index.js
@@ -1,10 +1,7 @@
 import defaultIcon from "@/climatemappedafrica/assets/icons/eye-white.svg";
-import { hurumap } from "@/climatemappedafrica/config";
 import fetchJson from "@/climatemappedafrica/utils/fetchJson";
 import formatNumericalValue from "@/climatemappedafrica/utils/formatNumericalValue";
 
-const apiUrl = process.env.HURUMAP_API_URL || hurumap?.api?.url;
-
 export async function fetchProfile({ BASE_URL, profileId }) {
   const { configuration } = await fetchJson(
     new URL(`/api/v1/profiles/${profileId}/?format=json`, BASE_URL),
@@ -91,12 +88,15 @@ function formatProfileGeographyData(data, parent) {
     .filter((category) => category.children.length);
 }
 
-export async function fetchProfileGeography(geoCode) {
+export async function fetchProfileGeography(
+  geoCode,
+  { BASE_URL, profileId, version = "Climate" },
+) {
   // HURUmap codes are uppercased in the API
   const json = await fetchJson(
     new URL(
-      `/api/v1/all_details/profile/1/geography/${geoCode.toUpperCase()}/?version=Climate`,
-      apiUrl,
+      `/api/v1/all_details/profile/${profileId}/geography/${geoCode.toUpperCase()}/?version=${version}`,
+      BASE_URL,
     ),
   );
   const { boundary, children, parent_layers: parents } = json;
@@ -141,8 +141,8 @@ export async function fetchProfileGeography(geoCode) {
   if (parentCode) {
     const parentJson = await fetchJson(
       new URL(
-        `/api/v1/all_details/profile/1/geography/${parentCode.toUpperCase()}/?version=Climate`,
-        apiUrl,
+        `/api/v1/all_details/profile/${profileId}/geography/${parentCode.toUpperCase()}/?version=${version}`,
+        BASE_URL,
       ),
     );
     parent.data = parentJson.profile.profile_data;
diff --git a/apps/climatemappedafrica/src/pages/api/hurumap/geographies/[geoCode].js b/apps/climatemappedafrica/src/pages/api/hurumap/geographies/[geoCode].js
index fe7619246..966f13e66 100644
--- a/apps/climatemappedafrica/src/pages/api/hurumap/geographies/[geoCode].js
+++ b/apps/climatemappedafrica/src/pages/api/hurumap/geographies/[geoCode].js
@@ -1,10 +1,14 @@
 import { fetchProfileGeography } from "@/climatemappedafrica/lib/hurumap";
 
 export default async function index(req, res) {
+  const { profileId, BASE_URL } = req.query;
   if (req.method === "GET") {
     try {
       const { geoCode } = req.query;
-      const result = await fetchProfileGeography(geoCode);
+      const result = await fetchProfileGeography(geoCode, {
+        BASE_URL,
+        profileId,
+      });
       return res.status(200).json(result);
     } catch (err) {
       return res.status(500).json(err.message);
diff --git a/apps/climatemappedafrica/src/pages/api/hurumap/index.js b/apps/climatemappedafrica/src/pages/api/hurumap/index.js
new file mode 100644
index 000000000..857f87b2b
--- /dev/null
+++ b/apps/climatemappedafrica/src/pages/api/hurumap/index.js
@@ -0,0 +1,14 @@
+import { fetchProfile } from "@/climatemappedafrica/lib/hurumap";
+
+export default async function index(req, res) {
+  if (req.method === "GET") {
+    try {
+      const result = await fetchProfile();
+      return res.status(200).json(result);
+    } catch (err) {
+      return res.status(500).json(err.message);
+    }
+  }
+
+  return res.status(405).end();
+}
diff --git a/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js b/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js
index cc81e2542..2fcd65340 100644
--- a/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js
+++ b/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js
@@ -4,8 +4,7 @@ let cache = null;
 let cacheExpiry = 0;
 
 export default async function handler(req, res) {
-  const { id } = req.query;
-  const { BASE_URL } = req.query;
+  const { id, BASE_URL } = req.query;
   if (req.method === "GET") {
     const now = Date.now();
 

From 7d4e02c594cd8fd85115ccf8f8abc9787fdadad1 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 8 Nov 2024 13:50:35 +0300
Subject: [PATCH 13/25] Tiny fix

---
 .../climatemappedafrica/src/payload/fields/HURUMapURL/index.js | 1 +
 .../src/payload/globals/HURUMap/RootGeography.js               | 3 ---
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js b/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
index 9c65fa381..2d6f7b8e5 100644
--- a/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
+++ b/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
@@ -7,6 +7,7 @@ import {
 } from "payload/components/forms";
 import { createElement, useState, useEffect } from "react";
 
+// TODO: @kelvinkipruto Handle i18n
 function HURUMapURL(props) {
   const {
     admin: { description },
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
index 3dd7abfe2..56856d2b0 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
@@ -9,9 +9,6 @@ const RootGeography = {
         en: "Root Geography",
       },
       type: "group",
-      admin: {
-        condition: (data) => Boolean(data?.profile),
-      },
       fields: [
         {
           name: "code",

From d2c44632b6c66d1854d5c7d865ad16154707b7e3 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 12 Nov 2024 08:48:27 +0300
Subject: [PATCH 14/25] Move root Geography

---
 .../src/payload/globals/HURUMap/Profile.js    | 67 +++++++++++++++++++
 .../payload/globals/HURUMap/RootGeography.js  | 51 --------------
 .../src/payload/globals/HURUMap/index.js      | 31 +--------
 3 files changed, 69 insertions(+), 80 deletions(-)
 delete mode 100644 apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js

diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
index 2b6569c91..6b8b60ab4 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
@@ -1,8 +1,33 @@
+import HURUMapURL from "../../fields/HURUMapURL";
+import LocationSelect from "../../fields/LocationSelect";
 import ProfileSelect from "../../fields/ProfileSelect";
 
 const Profile = {
   label: "Profile",
   fields: [
+    {
+      name: "hurumapAPIURL",
+      label: "HURUMap API BASE URL",
+      type: "text",
+      admin: {
+        condition: (_, siblingData) => !!siblingData?.enableHURUMap,
+        components: {
+          Field: HURUMapURL,
+        },
+        description:
+          "The base URL for the HURUmap API. For example, https://hurumap.org/api/v1",
+      },
+      required: true,
+    },
+    {
+      name: "HURUMapAPIURLValid",
+      type: "checkbox",
+      admin: {
+        hidden: true,
+        readOnly: true,
+        condition: (_, siblingData) => !!siblingData?.enableHURUMap,
+      },
+    },
     {
       name: "profile",
       type: "number",
@@ -17,6 +42,48 @@ const Profile = {
         },
       },
     },
+    {
+      name: "rootGeography",
+      label: {
+        en: "Root Geography",
+      },
+      type: "group",
+      fields: [
+        {
+          name: "code",
+          type: "text",
+          label: {
+            en: "Location Code",
+          },
+          required: true,
+          hasMany: false,
+          defaultValue: "af",
+          admin: {
+            components: {
+              Field: LocationSelect,
+            },
+          },
+        },
+        {
+          name: "center",
+          label: "Center Point",
+          type: "point",
+          defaultValue: [20.0, 4.25],
+        },
+        {
+          name: "hasData",
+          type: "checkbox",
+          label: {
+            en: "Root geography has data",
+          },
+          defaultValue: false,
+          admin: {
+            description:
+              "Indicates whether the root geography itself has data that can be used for comparison with its children",
+          },
+        },
+      ],
+    },
     {
       name: "page",
       label: {
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
deleted file mode 100644
index 56856d2b0..000000000
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import LocationSelect from "../../fields/LocationSelect";
-
-const RootGeography = {
-  label: "Root Geography",
-  fields: [
-    {
-      name: "rootGeography",
-      label: {
-        en: "Root Geography",
-      },
-      type: "group",
-      fields: [
-        {
-          name: "code",
-          type: "text",
-          label: {
-            en: "Location Code",
-          },
-          required: true,
-          hasMany: false,
-          defaultValue: "af",
-          admin: {
-            components: {
-              Field: LocationSelect,
-            },
-          },
-        },
-        {
-          name: "center",
-          label: "Center Point",
-          type: "point",
-          defaultValue: [20.0, 4.25],
-        },
-        {
-          name: "hasData",
-          type: "checkbox",
-          label: {
-            en: "Root geography has data",
-          },
-          defaultValue: false,
-          admin: {
-            description:
-              "Indicates whether the root geography itself has data that can be used for comparison with its children",
-          },
-        },
-      ],
-    },
-  ],
-};
-
-export default RootGeography;
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
index 2a81ba311..96c06e537 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
@@ -1,8 +1,5 @@
-import HURUMapURL from "../../fields/HURUMapURL";
-
 import DataPanels from "./DataPanels";
 import Profile from "./Profile";
-import RootGeography from "./RootGeography";
 import Tutorial from "./Tutorial";
 
 const HURUMap = {
@@ -23,35 +20,11 @@ const HURUMap = {
       type: "checkbox",
       defaultValue: false,
     },
-    {
-      name: "hurumapAPIURL",
-      label: "HURUMap API BASE URL",
-      type: "text",
-      admin: {
-        condition: (_, siblingData) => !!siblingData?.enableHURUMap,
-        components: {
-          Field: HURUMapURL,
-        },
-        description:
-          "The base URL for the HURUmap API. For example, https://hurumap.org/api/v1",
-      },
-      required: true,
-    },
-    {
-      name: "HURUMapAPIURLValid",
-      type: "checkbox",
-      admin: {
-        hidden: true,
-        readOnly: true,
-        condition: (_, siblingData) => !!siblingData?.enableHURUMap,
-      },
-    },
     {
       type: "tabs",
-      tabs: [Profile, DataPanels, RootGeography, Tutorial],
+      tabs: [Profile, DataPanels, Tutorial],
       admin: {
-        condition: (_, siblingData) =>
-          !!siblingData?.enableHURUMap && !!siblingData?.HURUMapAPIURLValid,
+        condition: (_, siblingData) => !!siblingData?.enableHURUMap,
       },
     },
   ],

From 56ee358084ddf86bba8d659362632d56fb0f7315 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 12 Nov 2024 08:50:30 +0300
Subject: [PATCH 15/25] Ensure URL is always valid

---
 .../src/payload/globals/HURUMap/Profile.js                    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
index 6b8b60ab4..12b498df1 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
@@ -40,6 +40,7 @@ const Profile = {
         components: {
           Field: ProfileSelect,
         },
+        condition: (_, siblingData) => !!siblingData?.HURUMapAPIURLValid,
       },
     },
     {
@@ -48,6 +49,9 @@ const Profile = {
         en: "Root Geography",
       },
       type: "group",
+      admin: {
+        condition: (_, siblingData) => !!siblingData?.HURUMapAPIURLValid,
+      },
       fields: [
         {
           name: "code",

From 97b97e4547fd002b4e2e19710f28b1e6819cd3ce Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 12 Nov 2024 10:15:27 +0300
Subject: [PATCH 16/25] Improve validation

---
 .../src/payload/fields/HURUMapURL/index.js    | 36 +++++++------------
 1 file changed, 13 insertions(+), 23 deletions(-)

diff --git a/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js b/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
index 2d6f7b8e5..43a5efd8a 100644
--- a/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
+++ b/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
@@ -1,7 +1,7 @@
 import { Button } from "payload/components/elements";
 import {
-  Label,
   TextInput,
+  reduceFieldsToValues,
   useField,
   useFormFields,
 } from "payload/components/forms";
@@ -11,15 +11,16 @@ import { createElement, useState, useEffect } from "react";
 function HURUMapURL(props) {
   const {
     admin: { description },
-    name,
     path,
   } = props;
   const { value, setValue } = useField({ path });
-  const [isValid, setIsValid] = useState(null);
   const [loading, setLoading] = useState(false);
   const [isButtonDisabled, setIsButtonDisabled] = useState(true);
-  // eslint-disable-next-line no-unused-vars
-  const HURUMapAPIURLValid = useFormFields(([_, dispatch]) => dispatch);
+  const [formFields, updateFormField] = useFormFields(([fields, dispatch]) => [
+    fields,
+    dispatch,
+  ]);
+  const { HURUMapAPIURLValid } = reduceFieldsToValues(formFields, true);
 
   const validateURL = async () => {
     if (!value) return;
@@ -28,15 +29,13 @@ function HURUMapURL(props) {
       // For now we can use the profiles endpoint to check if the URL is valid
       // Ideally we should have a dedicated endpoint for this, like /api/v1/validate or /api/v1/health
       const response = await fetch(`${value}/profiles`);
-      setIsValid(response.ok);
-      HURUMapAPIURLValid({
+      updateFormField({
         type: "UPDATE",
         path: "HURUMapAPIURLValid",
         value: response.ok,
       });
     } catch (error) {
-      setIsValid(false);
-      HURUMapAPIURLValid({
+      updateFormField({
         type: "UPDATE",
         path: "HURUMapAPIURLValid",
         value: false,
@@ -62,7 +61,6 @@ function HURUMapURL(props) {
   const handleInputChange = (e) => {
     const newUrl = e.target.value;
     setValue(newUrl);
-    setIsValid(null);
     setIsButtonDisabled(!isURLValid(newUrl));
   };
 
@@ -79,15 +77,12 @@ function HURUMapURL(props) {
       ...props,
       value,
       onChange: handleInputChange,
+      description,
+      errorMessage:
+        !HURUMapAPIURLValid &&
+        "Invalid URL. Please enter a valid URL to continue configuration.",
+      showError: !HURUMapAPIURLValid,
     }),
-    description &&
-      createElement(
-        "span",
-        {
-          className: "field-description",
-        },
-        description,
-      ),
     createElement(
       Button,
       {
@@ -98,11 +93,6 @@ function HURUMapURL(props) {
       },
       loading ? "Checking..." : "Validate URL",
     ),
-    isValid !== null &&
-      createElement(Label, {
-        label: isValid ? "✓ URL is valid" : "✗ Invalid URL",
-        htmlFor: `field-${name}`,
-      }),
   );
 }
 

From efbb8b4a78b8fb10efe0f35e5baa1f205818707b Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 12 Nov 2024 13:29:07 +0300
Subject: [PATCH 17/25] Review fixes

---
 .../src/lib/data/common/index.js              |  2 +-
 .../src/payload/fields/HURUMapURL/index.js    | 37 +++++--------------
 .../src/payload/fields/LocationSelect.js      |  5 +--
 .../src/payload/fields/ProfileSelect.js       |  5 +--
 .../src/payload/globals/HURUMap/Profile.js    | 18 ++++-----
 .../src/payload/globals/HURUMap/index.js      |  4 +-
 6 files changed, 25 insertions(+), 46 deletions(-)

diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index 1a753147e..ddc417db3 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -122,7 +122,7 @@ export async function getPageProps(api, context) {
   if (hurumapSettings?.enabled) {
     // TODO(koech): Handle cases when fetching profile fails?
     const {
-      hurumapAPIURL,
+      url: hurumapAPIURL,
       page: hurumapPage,
       profile: profileId,
       ...otherHurumapSettings
diff --git a/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js b/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
index 43a5efd8a..8399d2198 100644
--- a/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
+++ b/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
@@ -5,22 +5,21 @@ import {
   useField,
   useFormFields,
 } from "payload/components/forms";
-import { createElement, useState, useEffect } from "react";
+import { createElement, useState } from "react";
 
 // TODO: @kelvinkipruto Handle i18n
-function HURUMapURL(props) {
+function HURUmapURL(props) {
   const {
     admin: { description },
     path,
   } = props;
   const { value, setValue } = useField({ path });
   const [loading, setLoading] = useState(false);
-  const [isButtonDisabled, setIsButtonDisabled] = useState(true);
   const [formFields, updateFormField] = useFormFields(([fields, dispatch]) => [
     fields,
     dispatch,
   ]);
-  const { HURUMapAPIURLValid } = reduceFieldsToValues(formFields, true);
+  const { urlValid } = reduceFieldsToValues(formFields, true);
 
   const validateURL = async () => {
     if (!value) return;
@@ -31,13 +30,13 @@ function HURUMapURL(props) {
       const response = await fetch(`${value}/profiles`);
       updateFormField({
         type: "UPDATE",
-        path: "HURUMapAPIURLValid",
+        path: "urlValid",
         value: response.ok,
       });
     } catch (error) {
       updateFormField({
         type: "UPDATE",
-        path: "HURUMapAPIURLValid",
+        path: "urlValid",
         value: false,
       });
     } finally {
@@ -45,29 +44,11 @@ function HURUMapURL(props) {
     }
   };
 
-  const isURLValid = (url) => {
-    const urlPattern = new RegExp(
-      "^(https?:\\/\\/)" + // protocol
-        "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|" + // domain name
-        "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
-        "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
-        "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
-        "(\\#[-a-z\\d_]*)?$",
-      "i", // fragment locator
-    );
-    return !!urlPattern.test(url);
-  };
-
   const handleInputChange = (e) => {
     const newUrl = e.target.value;
     setValue(newUrl);
-    setIsButtonDisabled(!isURLValid(newUrl));
   };
 
-  useEffect(() => {
-    setIsButtonDisabled(!isURLValid(value));
-  }, [value]);
-
   return createElement(
     "div",
     {
@@ -79,9 +60,9 @@ function HURUMapURL(props) {
       onChange: handleInputChange,
       description,
       errorMessage:
-        !HURUMapAPIURLValid &&
+        !urlValid &&
         "Invalid URL. Please enter a valid URL to continue configuration.",
-      showError: !HURUMapAPIURLValid,
+      showError: !urlValid,
     }),
     createElement(
       Button,
@@ -89,11 +70,11 @@ function HURUMapURL(props) {
         type: "button",
         onClick: () => validateURL(),
         className: "btn btn--style-primary",
-        disabled: loading || isButtonDisabled,
+        disabled: loading,
       },
       loading ? "Checking..." : "Validate URL",
     ),
   );
 }
 
-export default HURUMapURL;
+export default HURUmapURL;
diff --git a/apps/climatemappedafrica/src/payload/fields/LocationSelect.js b/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
index 9dcb4ae06..19e9c36db 100644
--- a/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
+++ b/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
@@ -19,10 +19,9 @@ const getOptions = (locations) =>
 
 function LocationSelect(props) {
   const [fields] = useAllFormFields();
-  const formData = reduceFieldsToValues(fields, true);
-  const BASE_URL = formData.hurumapAPIURL;
+  const { profile, url } = reduceFieldsToValues(fields, true);
   const { data } = useSWR(
-    `${apiUrl}/api/hurumap/profiles/${formData.profile}?BASE_URL=${BASE_URL}`,
+    `${apiUrl}/api/hurumap/profiles/${profile}?BASE_URL=${url}`,
     fetcher,
     {
       dedupingInterval: 60000,
diff --git a/apps/climatemappedafrica/src/payload/fields/ProfileSelect.js b/apps/climatemappedafrica/src/payload/fields/ProfileSelect.js
index d3a652c95..780716ba8 100644
--- a/apps/climatemappedafrica/src/payload/fields/ProfileSelect.js
+++ b/apps/climatemappedafrica/src/payload/fields/ProfileSelect.js
@@ -11,10 +11,9 @@ const fetcher = (url) => fetch(url).then((res) => res.json());
 
 function ProfileSelect(props) {
   const [fields] = useAllFormFields();
-  const formData = reduceFieldsToValues(fields, true);
-  const BASE_URL = formData.hurumapAPIURL;
+  const { url } = reduceFieldsToValues(fields, true);
   const { data } = useSWR(
-    `${apiUrl}/api/hurumap/profiles?BASE_URL=${BASE_URL}`,
+    `${apiUrl}/api/hurumap/profiles?BASE_URL=${url}`,
     fetcher,
     {
       dedupingInterval: 60000,
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
index 12b498df1..03a3eb595 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
@@ -1,4 +1,4 @@
-import HURUMapURL from "../../fields/HURUMapURL";
+import HURUmapURL from "../../fields/HURUmapURL";
 import LocationSelect from "../../fields/LocationSelect";
 import ProfileSelect from "../../fields/ProfileSelect";
 
@@ -6,13 +6,13 @@ const Profile = {
   label: "Profile",
   fields: [
     {
-      name: "hurumapAPIURL",
-      label: "HURUMap API BASE URL",
+      name: "url",
+      label: "HURUMap NG URL",
       type: "text",
       admin: {
-        condition: (_, siblingData) => !!siblingData?.enableHURUMap,
+        condition: (_, siblingData) => !!siblingData?.enabled,
         components: {
-          Field: HURUMapURL,
+          Field: HURUmapURL,
         },
         description:
           "The base URL for the HURUmap API. For example, https://hurumap.org/api/v1",
@@ -20,12 +20,12 @@ const Profile = {
       required: true,
     },
     {
-      name: "HURUMapAPIURLValid",
+      name: "urlValid",
       type: "checkbox",
       admin: {
         hidden: true,
         readOnly: true,
-        condition: (_, siblingData) => !!siblingData?.enableHURUMap,
+        condition: (_, siblingData) => !!siblingData?.enabled,
       },
     },
     {
@@ -40,7 +40,7 @@ const Profile = {
         components: {
           Field: ProfileSelect,
         },
-        condition: (_, siblingData) => !!siblingData?.HURUMapAPIURLValid,
+        condition: (_, siblingData) => !!siblingData?.urlValid,
       },
     },
     {
@@ -50,7 +50,7 @@ const Profile = {
       },
       type: "group",
       admin: {
-        condition: (_, siblingData) => !!siblingData?.HURUMapAPIURLValid,
+        condition: (_, siblingData) => !!siblingData?.urlValid,
       },
       fields: [
         {
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
index 96c06e537..2314d90f3 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
@@ -15,7 +15,7 @@ const HURUMap = {
   },
   fields: [
     {
-      name: "enableHURUMap",
+      name: "enabled",
       label: "Enable HURUMap",
       type: "checkbox",
       defaultValue: false,
@@ -24,7 +24,7 @@ const HURUMap = {
       type: "tabs",
       tabs: [Profile, DataPanels, Tutorial],
       admin: {
-        condition: (_, siblingData) => !!siblingData?.enableHURUMap,
+        condition: (_, siblingData) => !!siblingData?.enabled,
       },
     },
   ],

From d5e3d516ee72c6ab0129c0ee03424cf19164ce09 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 12 Nov 2024 13:30:56 +0300
Subject: [PATCH 18/25] Refractor HURUmapURL

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../src/payload/fields/{HURUMapURL/index.js => HURUmapURL.js}     | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename apps/climatemappedafrica/src/payload/fields/{HURUMapURL/index.js => HURUmapURL.js} (100%)

diff --git a/apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js b/apps/climatemappedafrica/src/payload/fields/HURUmapURL.js
similarity index 100%
rename from apps/climatemappedafrica/src/payload/fields/HURUMapURL/index.js
rename to apps/climatemappedafrica/src/payload/fields/HURUmapURL.js

From f5e76707fe18af29a85f1b28b4b971f848081971 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 12 Nov 2024 13:40:23 +0300
Subject: [PATCH 19/25] Use button in Explore nav

---
 .../Navigation/ExploreNavigation/index.js           | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js
index 31a9f4a2e..76c0265d7 100644
--- a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js
+++ b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js
@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid, Button } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import { useTour } from "@reactour/tour";
 import PropTypes from "prop-types";
@@ -90,24 +90,23 @@ function ExploreNavigation({
               }}
             />
             {tutorialEnabled && (
-              <Typography
-                component="div"
+              <Button
+                component="button"
                 id="nav-help"
                 onClick={openTooltip}
-                variant="h3"
                 sx={(theme) => ({
                   color: "#666666",
-                  textAlign: "center",
                   backgroundColor: "#EBEBEB",
-                  borderRadius: theme.typography.pxToRem(60),
+                  borderRadius: "50%",
                   marginLeft: theme.typography.pxToRem(20),
                   width: theme.typography.pxToRem(48),
                   height: theme.typography.pxToRem(48),
+                  minWidth: theme.typography.pxToRem(48),
                   cursor: "pointer",
                 })}
               >
                 ?
-              </Typography>
+              </Button>
             )}
           </Grid>
           <Grid />

From c030c49325d0faef570f9ba72df186100072ec69 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 12 Nov 2024 14:50:52 +0300
Subject: [PATCH 20/25] Pass HurumapAPi URL

---
 .../src/components/ExplorePage/index.js            | 14 +++++++++-----
 .../components/ExplorePage/useProfileGeography.js  |  5 ++---
 .../src/lib/data/blockify/explore-page.js          |  6 ++----
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
index 17313b26c..6737f09e2 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/index.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -34,8 +34,10 @@ function ExplorePage({
   rootGeography,
   explorePagePath,
   hurumapConfig,
+  hurumapAPIURL,
   panel: PanelProps = {},
   profile: profileProp,
+  profileId,
   ...props
 }) {
   const {
@@ -93,7 +95,11 @@ function ExplorePage({
     (state.primary.shouldFetch && state.primary.code) ||
     (state.secondary?.shouldFetch && state.secondary?.code);
 
-  const { data, error } = useProfileGeography(shouldFetch, hurumapConfig);
+  const { data, error } = useProfileGeography(
+    shouldFetch,
+    hurumapAPIURL,
+    profileId,
+  );
   useEffect(() => {
     if (data) {
       dispatch({
@@ -236,10 +242,8 @@ ExplorePage.propTypes = {
       }),
     ),
   ]),
-  hurumapConfig: PropTypes.shape({
-    hurumapAPIURL: PropTypes.string,
-    profileId: PropTypes.number,
-  }),
+  hurumapAPIURL: PropTypes.string,
+  profileId: PropTypes.number,
 };
 
 export default ExplorePage;
diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js b/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js
index bbee038d2..7cedffd21 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js
@@ -2,11 +2,10 @@ import useSWR from "swr";
 
 import fetchJson from "@/climatemappedafrica/utils/fetchJson";
 
-function useProfileGeography(shouldFetch, hurumapConfig) {
-  const { BASE_URL, profileId } = hurumapConfig;
+function useProfileGeography(shouldFetch, hurumapAPIURL, profileId) {
   const fetcher = (code) => {
     return fetchJson(
-      `/api/hurumap/geographies/${code}?profileId=${profileId}&BASE_URL=${BASE_URL}`,
+      `/api/hurumap/geographies/${code}?profileId=${profileId}&BASE_URL=${hurumapAPIURL}`,
     );
   };
   const { data, error } = useSWR(shouldFetch, fetcher);
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
index d5c5f9ae8..e1845ca53 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
@@ -54,10 +54,8 @@ async function explorePage(block, _api, _context, { hurumap }) {
     id: "explore-page",
     blockType: "explore-page",
     choropleth,
-    hurumapConfig: {
-      hurumapAPIURL,
-      profileId,
-    },
+    hurumapAPIURL,
+    profileId,
     rootGeography,
     explorePagePath: profilePage.slug,
     locations,

From 0ce09b9beca773029dc563d237c54efb2877e509 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 12 Nov 2024 14:53:45 +0300
Subject: [PATCH 21/25] Rename hurumapUrl

---
 .../src/components/ExplorePage/index.js                   | 6 +++---
 .../src/components/ExplorePage/useProfileGeography.js     | 4 ++--
 .../src/lib/data/blockify/explore-page.js                 | 8 ++++----
 apps/climatemappedafrica/src/lib/data/blockify/hero.js    | 6 +++---
 apps/climatemappedafrica/src/lib/data/common/index.js     | 6 +++---
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
index 6737f09e2..d7c74afe2 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/index.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -34,7 +34,7 @@ function ExplorePage({
   rootGeography,
   explorePagePath,
   hurumapConfig,
-  hurumapAPIURL,
+  hurumapUrl,
   panel: PanelProps = {},
   profile: profileProp,
   profileId,
@@ -97,7 +97,7 @@ function ExplorePage({
 
   const { data, error } = useProfileGeography(
     shouldFetch,
-    hurumapAPIURL,
+    hurumapUrl,
     profileId,
   );
   useEffect(() => {
@@ -242,7 +242,7 @@ ExplorePage.propTypes = {
       }),
     ),
   ]),
-  hurumapAPIURL: PropTypes.string,
+  hurumapUrl: PropTypes.string,
   profileId: PropTypes.number,
 };
 
diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js b/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js
index 7cedffd21..c19589c55 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js
@@ -2,10 +2,10 @@ import useSWR from "swr";
 
 import fetchJson from "@/climatemappedafrica/utils/fetchJson";
 
-function useProfileGeography(shouldFetch, hurumapAPIURL, profileId) {
+function useProfileGeography(shouldFetch, hurumapUrl, profileId) {
   const fetcher = (code) => {
     return fetchJson(
-      `/api/hurumap/geographies/${code}?profileId=${profileId}&BASE_URL=${hurumapAPIURL}`,
+      `/api/hurumap/geographies/${code}?profileId=${profileId}&BASE_URL=${hurumapUrl}`,
     );
   };
   const { data, error } = useSWR(shouldFetch, fetcher);
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
index e1845ca53..afc246751 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
@@ -6,7 +6,7 @@ import { fetchProfileGeography } from "@/climatemappedafrica/lib/hurumap";
  */
 async function explorePage(block, _api, _context, { hurumap }) {
   const {
-    hurumapAPIURL,
+    hurumapUrl,
     items: panelItems,
     labels: { dataNotAvailable, scrollToTop: scrollToTopLabel },
     profile: hurumapProfile,
@@ -33,13 +33,13 @@ async function explorePage(block, _api, _context, { hurumap }) {
 
   const [primaryCode, secondaryCode] = geoCodes;
   const primaryProfile = await fetchProfileGeography(primaryCode, {
-    BASE_URL: hurumapAPIURL,
+    BASE_URL: hurumapUrl,
     profileId,
   });
   const profile = [primaryProfile];
   if (secondaryCode) {
     const secondaryProfile = await fetchProfileGeography(secondaryCode, {
-      BASE_URL: hurumapAPIURL,
+      BASE_URL: hurumapUrl,
       profileId,
     });
     profile.push(secondaryProfile);
@@ -54,7 +54,7 @@ async function explorePage(block, _api, _context, { hurumap }) {
     id: "explore-page",
     blockType: "explore-page",
     choropleth,
-    hurumapAPIURL,
+    hurumapUrl,
     profileId,
     rootGeography,
     explorePagePath: profilePage.slug,
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/hero.js b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
index 561f44f2a..980b31d5e 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/hero.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
@@ -12,14 +12,14 @@ import {
  */
 export default async function hero(block, _api, _context, { hurumap }) {
   const {
-    hurumapAPIURL,
+    hurumapUrl,
     profileId,
     profilePage,
     rootGeography: { center, code, hasData: pinRootGeography },
     profile: hurumapProfile,
   } = hurumap ?? { rootGeography: {} };
   const { geometries } = await fetchProfileGeography(code.toLowerCase(), {
-    BASE_URL: hurumapAPIURL,
+    BASE_URL: hurumapUrl,
     profileId,
   });
   const { level } = geometries.boundary?.properties ?? {};
@@ -29,7 +29,7 @@ export default async function hero(block, _api, _context, { hurumap }) {
   };
   const childLevel = childLevelMaps[level];
   const { locations, preferredChildren } = await fetchProfile({
-    BASE_URL: hurumapAPIURL,
+    BASE_URL: hurumapUrl,
     profileId,
   });
   const chloropleth = hurumapProfile?.choropleth ?? null;
diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index ddc417db3..c1bf99bdf 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -122,12 +122,12 @@ export async function getPageProps(api, context) {
   if (hurumapSettings?.enabled) {
     // TODO(koech): Handle cases when fetching profile fails?
     const {
-      url: hurumapAPIURL,
+      url: hurumapUrl,
       page: hurumapPage,
       profile: profileId,
       ...otherHurumapSettings
     } = hurumapSettings;
-    const profile = await fetchProfile({ BASE_URL: hurumapAPIURL, profileId });
+    const profile = await fetchProfile({ BASE_URL: hurumapUrl, profileId });
     const { value: profilePage } = hurumapPage;
     if (slug === profilePage.slug) {
       variant = "explore";
@@ -143,7 +143,7 @@ export async function getPageProps(api, context) {
     }
     settings.hurumap = {
       ...otherHurumapSettings,
-      hurumapAPIURL,
+      hurumapUrl,
       profile,
       profileId,
       profilePage,

From 053e20695709e18e6c3a039f1cc7ce4dc826abbe Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 12 Nov 2024 14:56:50 +0300
Subject: [PATCH 22/25] Rename BASE_URL to baseUrl

---
 .../components/ExplorePage/useProfileGeography.js  |  2 +-
 .../src/lib/data/blockify/explore-page.js          |  4 ++--
 .../src/lib/data/blockify/hero.js                  |  4 ++--
 .../src/lib/data/common/index.js                   |  2 +-
 apps/climatemappedafrica/src/lib/hurumap/index.js  | 14 +++++++-------
 .../src/pages/api/hurumap/geographies/[geoCode].js |  4 ++--
 .../src/pages/api/hurumap/profiles/[id].js         |  4 ++--
 .../src/pages/api/hurumap/profiles/index.js        |  4 ++--
 .../src/payload/fields/LocationSelect.js           |  2 +-
 .../src/payload/fields/ProfileSelect.js            |  2 +-
 10 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js b/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js
index c19589c55..0c7b4b786 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js
@@ -5,7 +5,7 @@ import fetchJson from "@/climatemappedafrica/utils/fetchJson";
 function useProfileGeography(shouldFetch, hurumapUrl, profileId) {
   const fetcher = (code) => {
     return fetchJson(
-      `/api/hurumap/geographies/${code}?profileId=${profileId}&BASE_URL=${hurumapUrl}`,
+      `/api/hurumap/geographies/${code}?profileId=${profileId}&baseUrl=${hurumapUrl}`,
     );
   };
   const { data, error } = useSWR(shouldFetch, fetcher);
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
index afc246751..ddeb740a2 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
@@ -33,13 +33,13 @@ async function explorePage(block, _api, _context, { hurumap }) {
 
   const [primaryCode, secondaryCode] = geoCodes;
   const primaryProfile = await fetchProfileGeography(primaryCode, {
-    BASE_URL: hurumapUrl,
+    baseUrl: hurumapUrl,
     profileId,
   });
   const profile = [primaryProfile];
   if (secondaryCode) {
     const secondaryProfile = await fetchProfileGeography(secondaryCode, {
-      BASE_URL: hurumapUrl,
+      baseUrl: hurumapUrl,
       profileId,
     });
     profile.push(secondaryProfile);
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/hero.js b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
index 980b31d5e..651d6c687 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/hero.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
@@ -19,7 +19,7 @@ export default async function hero(block, _api, _context, { hurumap }) {
     profile: hurumapProfile,
   } = hurumap ?? { rootGeography: {} };
   const { geometries } = await fetchProfileGeography(code.toLowerCase(), {
-    BASE_URL: hurumapUrl,
+    baseUrl: hurumapUrl,
     profileId,
   });
   const { level } = geometries.boundary?.properties ?? {};
@@ -29,7 +29,7 @@ export default async function hero(block, _api, _context, { hurumap }) {
   };
   const childLevel = childLevelMaps[level];
   const { locations, preferredChildren } = await fetchProfile({
-    BASE_URL: hurumapUrl,
+    baseUrl: hurumapUrl,
     profileId,
   });
   const chloropleth = hurumapProfile?.choropleth ?? null;
diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index c1bf99bdf..e909cc913 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -127,7 +127,7 @@ export async function getPageProps(api, context) {
       profile: profileId,
       ...otherHurumapSettings
     } = hurumapSettings;
-    const profile = await fetchProfile({ BASE_URL: hurumapUrl, profileId });
+    const profile = await fetchProfile({ baseUrl: hurumapUrl, profileId });
     const { value: profilePage } = hurumapPage;
     if (slug === profilePage.slug) {
       variant = "explore";
diff --git a/apps/climatemappedafrica/src/lib/hurumap/index.js b/apps/climatemappedafrica/src/lib/hurumap/index.js
index 29a93ce36..6ce4ec6f8 100644
--- a/apps/climatemappedafrica/src/lib/hurumap/index.js
+++ b/apps/climatemappedafrica/src/lib/hurumap/index.js
@@ -2,9 +2,9 @@ import defaultIcon from "@/climatemappedafrica/assets/icons/eye-white.svg";
 import fetchJson from "@/climatemappedafrica/utils/fetchJson";
 import formatNumericalValue from "@/climatemappedafrica/utils/formatNumericalValue";
 
-export async function fetchProfile({ BASE_URL, profileId }) {
+export async function fetchProfile({ baseUrl, profileId }) {
   const { configuration } = await fetchJson(
-    new URL(`/api/v1/profiles/${profileId}/?format=json`, BASE_URL),
+    new URL(`/api/v1/profiles/${profileId}/?format=json`, baseUrl),
   );
 
   const locations = configuration?.featured_locations?.map(
@@ -21,8 +21,8 @@ export async function fetchProfile({ BASE_URL, profileId }) {
   };
 }
 
-export async function fetchProfiles(BASE_URL) {
-  const { results } = await fetchJson(new URL("/api/v1/profiles", BASE_URL));
+export async function fetchProfiles(baseUrl) {
+  const { results } = await fetchJson(new URL("/api/v1/profiles", baseUrl));
   const profiles = results.map(({ name, id }) => ({ name, id }));
   return profiles;
 }
@@ -90,13 +90,13 @@ function formatProfileGeographyData(data, parent) {
 
 export async function fetchProfileGeography(
   geoCode,
-  { BASE_URL, profileId, version = "Climate" },
+  { baseUrl, profileId, version = "Climate" },
 ) {
   // HURUmap codes are uppercased in the API
   const json = await fetchJson(
     new URL(
       `/api/v1/all_details/profile/${profileId}/geography/${geoCode.toUpperCase()}/?version=${version}`,
-      BASE_URL,
+      baseUrl,
     ),
   );
   const { boundary, children, parent_layers: parents } = json;
@@ -142,7 +142,7 @@ export async function fetchProfileGeography(
     const parentJson = await fetchJson(
       new URL(
         `/api/v1/all_details/profile/${profileId}/geography/${parentCode.toUpperCase()}/?version=${version}`,
-        BASE_URL,
+        baseUrl,
       ),
     );
     parent.data = parentJson.profile.profile_data;
diff --git a/apps/climatemappedafrica/src/pages/api/hurumap/geographies/[geoCode].js b/apps/climatemappedafrica/src/pages/api/hurumap/geographies/[geoCode].js
index 966f13e66..34e41689f 100644
--- a/apps/climatemappedafrica/src/pages/api/hurumap/geographies/[geoCode].js
+++ b/apps/climatemappedafrica/src/pages/api/hurumap/geographies/[geoCode].js
@@ -1,12 +1,12 @@
 import { fetchProfileGeography } from "@/climatemappedafrica/lib/hurumap";
 
 export default async function index(req, res) {
-  const { profileId, BASE_URL } = req.query;
+  const { profileId, baseUrl } = req.query;
   if (req.method === "GET") {
     try {
       const { geoCode } = req.query;
       const result = await fetchProfileGeography(geoCode, {
-        BASE_URL,
+        baseUrl,
         profileId,
       });
       return res.status(200).json(result);
diff --git a/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js b/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js
index 2fcd65340..e8c246ae4 100644
--- a/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js
+++ b/apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js
@@ -4,7 +4,7 @@ let cache = null;
 let cacheExpiry = 0;
 
 export default async function handler(req, res) {
-  const { id, BASE_URL } = req.query;
+  const { id, baseUrl } = req.query;
   if (req.method === "GET") {
     const now = Date.now();
 
@@ -13,7 +13,7 @@ export default async function handler(req, res) {
     }
 
     try {
-      const result = await fetchProfile({ BASE_URL, profileId: id });
+      const result = await fetchProfile({ baseUrl, profileId: id });
       cache = result;
       cacheExpiry = now + 5 * 60 * 1000;
       return res.status(200).json(result);
diff --git a/apps/climatemappedafrica/src/pages/api/hurumap/profiles/index.js b/apps/climatemappedafrica/src/pages/api/hurumap/profiles/index.js
index 8c360be85..54f044379 100644
--- a/apps/climatemappedafrica/src/pages/api/hurumap/profiles/index.js
+++ b/apps/climatemappedafrica/src/pages/api/hurumap/profiles/index.js
@@ -4,7 +4,7 @@ let cache = null;
 let cacheExpiry = 0;
 
 export default async function handler(req, res) {
-  const { BASE_URL } = req.query;
+  const { baseUrl } = req.query;
   if (req.method === "GET") {
     const now = Date.now();
 
@@ -13,7 +13,7 @@ export default async function handler(req, res) {
     }
 
     try {
-      const result = await fetchProfiles(BASE_URL);
+      const result = await fetchProfiles(baseUrl);
       cache = result;
       cacheExpiry = now + 5 * 60 * 1000;
       return res.status(200).json(result);
diff --git a/apps/climatemappedafrica/src/payload/fields/LocationSelect.js b/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
index 19e9c36db..9f6c24c66 100644
--- a/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
+++ b/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
@@ -21,7 +21,7 @@ function LocationSelect(props) {
   const [fields] = useAllFormFields();
   const { profile, url } = reduceFieldsToValues(fields, true);
   const { data } = useSWR(
-    `${apiUrl}/api/hurumap/profiles/${profile}?BASE_URL=${url}`,
+    `${apiUrl}/api/hurumap/profiles/${profile}?baseUrl=${url}`,
     fetcher,
     {
       dedupingInterval: 60000,
diff --git a/apps/climatemappedafrica/src/payload/fields/ProfileSelect.js b/apps/climatemappedafrica/src/payload/fields/ProfileSelect.js
index 780716ba8..843b5507d 100644
--- a/apps/climatemappedafrica/src/payload/fields/ProfileSelect.js
+++ b/apps/climatemappedafrica/src/payload/fields/ProfileSelect.js
@@ -13,7 +13,7 @@ function ProfileSelect(props) {
   const [fields] = useAllFormFields();
   const { url } = reduceFieldsToValues(fields, true);
   const { data } = useSWR(
-    `${apiUrl}/api/hurumap/profiles?BASE_URL=${url}`,
+    `${apiUrl}/api/hurumap/profiles?baseUrl=${url}`,
     fetcher,
     {
       dedupingInterval: 60000,

From d06ca27d6b767a3e10457a09a799c24b2f0c8d4f Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Wed, 13 Nov 2024 12:37:24 +0300
Subject: [PATCH 23/25] Use row to improve fields layout

---
 .../src/payload/fields/HURUmapURL.js          |  5 +++
 .../src/payload/globals/HURUMap/Profile.js    | 43 +++++++++++--------
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/apps/climatemappedafrica/src/payload/fields/HURUmapURL.js b/apps/climatemappedafrica/src/payload/fields/HURUmapURL.js
index 8399d2198..666b9a20a 100644
--- a/apps/climatemappedafrica/src/payload/fields/HURUmapURL.js
+++ b/apps/climatemappedafrica/src/payload/fields/HURUmapURL.js
@@ -53,6 +53,11 @@ function HURUmapURL(props) {
     "div",
     {
       id: "hurumap-url-wrapper",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+      },
     },
     createElement(TextInput, {
       ...props,
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
index 03a3eb595..3f00e390e 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
@@ -41,6 +41,7 @@ const Profile = {
           Field: ProfileSelect,
         },
         condition: (_, siblingData) => !!siblingData?.urlValid,
+        width: "50%",
       },
     },
     {
@@ -54,25 +55,30 @@ const Profile = {
       },
       fields: [
         {
-          name: "code",
-          type: "text",
-          label: {
-            en: "Location Code",
-          },
-          required: true,
-          hasMany: false,
-          defaultValue: "af",
-          admin: {
-            components: {
-              Field: LocationSelect,
+          type: "row",
+          fields: [
+            {
+              name: "code",
+              type: "text",
+              label: {
+                en: "Location Code",
+              },
+              required: true,
+              hasMany: false,
+              defaultValue: "af",
+              admin: {
+                components: {
+                  Field: LocationSelect,
+                },
+              },
             },
-          },
-        },
-        {
-          name: "center",
-          label: "Center Point",
-          type: "point",
-          defaultValue: [20.0, 4.25],
+            {
+              name: "center",
+              label: "Center Point",
+              type: "point",
+              defaultValue: [20.0, 4.25],
+            },
+          ],
         },
         {
           name: "hasData",
@@ -100,6 +106,7 @@ const Profile = {
       required: true,
       admin: {
         description: "The page to show the HURUmap profile on.",
+        width: "50%",
       },
     },
   ],

From 2c7de4205a9615ed6c5814f680290f2e5553b072 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Wed, 13 Nov 2024 12:41:36 +0300
Subject: [PATCH 24/25] Remove unused var

---
 apps/climatemappedafrica/src/components/ExplorePage/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
index d7c74afe2..251402ca5 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/index.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -33,7 +33,6 @@ function initialState(
 function ExplorePage({
   rootGeography,
   explorePagePath,
-  hurumapConfig,
   hurumapUrl,
   panel: PanelProps = {},
   profile: profileProp,

From f43a69a576f052d3a9883da0e97efb57d53c1f76 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Wed, 13 Nov 2024 17:14:04 +0300
Subject: [PATCH 25/25] Regenerate snapshots

---
 .../src/components/Hero/Hero.snap.js          | 66 ++++++++++---------
 1 file changed, 35 insertions(+), 31 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
index 28ddab415..458b3e886 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -50,43 +50,47 @@ exports[`<Hero /> renders unchanged 1`] = `
           </header>
           <div
             class="MuiBox-root css-0"
-            id="location-search"
           >
-            <p
-              class="MuiTypography-root MuiTypography-body1 css-1u0kiq2-MuiTypography-root"
-            >
-              Search for a location
-            </p>
             <div
-              class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-49e042-MuiInputBase-root"
+              class="MuiBox-root css-19idom"
+              id="location-search"
             >
-              <input
-                aria-label="search"
-                class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
-                placeholder="Search for a location"
-                type="text"
-                value=""
-              />
-              <button
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-oru44q-MuiButtonBase-root-MuiIconButton-root"
-                root="[object Object]"
-                tabindex="0"
-                type="button"
+              <p
+                class="MuiTypography-root MuiTypography-body1 css-1u0kiq2-MuiTypography-root"
               >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
-                  focusable="false"
-                  viewBox="0 0 48 48"
-                />
-                <span
-                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                Search for a location
+              </p>
+              <div
+                class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-49e042-MuiInputBase-root"
+              >
+                <input
+                  aria-label="search"
+                  class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
+                  placeholder="Search for a location"
+                  type="text"
+                  value=""
                 />
-              </button>
+                <button
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-oru44q-MuiButtonBase-root-MuiIconButton-root"
+                  root="[object Object]"
+                  tabindex="0"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 48 48"
+                  />
+                  <span
+                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                  />
+                </button>
+              </div>
+              <div
+                class="MuiBox-root css-79elbk"
+              />
             </div>
-            <div
-              class="MuiBox-root css-79elbk"
-            />
           </div>
         </div>
         <div