From 66e4386027d4c091e569341d4b4b43505f05de18 Mon Sep 17 00:00:00 2001
From: Kevin Koech <koechkevin92@gmail.com>
Date: Tue, 12 Nov 2024 15:37:06 +0300
Subject: [PATCH] chore: Update Hero Map component zoom levels

Adjust the zoom levels for the Hero Map component in the Climatemapped Africa app based on the device type on payloadcms. On desktop, set the zoom level to 3, and on mobile, set it to 2. This ensures that the map appears correctly on different devices.
---
 .../src/components/Hero/Hero.js               |  6 ++--
 .../src/components/Hero/Hero.test.js          |  4 +++
 .../src/lib/data/blockify/hero.js             |  3 +-
 .../payload/globals/HURUMap/RootGeography.js  | 36 +++++++++++++++++++
 4 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.js b/apps/climatemappedafrica/src/components/Hero/Hero.js
index 7567f8c4f..e2304b48f 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.js
@@ -24,12 +24,12 @@ function Hero({
   level,
   explorePageSlug,
   averageTemperature,
+  zoom: zoomProp,
   ...props
 }) {
   const isUpLg = useMediaQuery((theme) => theme.breakpoints.up("lg"));
-  const continentLevelZoom = isUpLg ? 3.05 : 2.1; // We have to reduce the zoom level for continent so that all countries(Including islands) are visible within the designs
-  const countryLevelZoom = isUpLg ? 6 : 5.25;
-  const zoom = level === "continent" ? continentLevelZoom : countryLevelZoom;
+  const { desktop, mobile } = zoomProp;
+  const zoom = isUpLg ? desktop : mobile;
   return (
     <Box
       sx={{
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.test.js b/apps/climatemappedafrica/src/components/Hero/Hero.test.js
index 2f50687e7..575f97b36 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.test.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.test.js
@@ -57,6 +57,10 @@ const defaultProps = {
     { min: 25, max: 28, color: "#F96264" },
     { min: 28, max: 31, color: "#F80701" },
   ],
+  zoom: {
+    desktop: 3,
+    mobile: 2,
+  },
 };
 
 describe("<Hero />", () => {
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/hero.js b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
index f225159d4..580ba8032 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/hero.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
@@ -13,7 +13,7 @@ import {
 export default async function hero(block, _api, _context, { hurumap }) {
   const {
     profilePage,
-    rootGeography: { center, code, hasData: pinRootGeography },
+    rootGeography: { center, code, hasData: pinRootGeography, zoom },
     profile: hurumapProfile,
   } = hurumap ?? { rootGeography: {} };
   const { geometries } = await fetchProfileGeography(code.toLowerCase());
@@ -51,5 +51,6 @@ export default async function hero(block, _api, _context, { hurumap }) {
     slug: "hero",
     choropleth,
     legend,
+    zoom,
   };
 }
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
index d0b44ae0f..5e5fe4e47 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
@@ -44,6 +44,42 @@ const RootGeography = {
               "Indicates whether the root geography itself has data that can be used for comparison with its children",
           },
         },
+        {
+          name: "zoom",
+          type: "group",
+          fields: [
+            {
+              type: "row",
+              fields: [
+                {
+                  name: "desktop",
+                  label: "Zoom Level for Desktop",
+                  type: "number",
+                  defaultValue: 3.05,
+                  required: true,
+                  admin: {
+                    description:
+                      "Indicates how the map should appear on desktop devices",
+                  },
+                },
+                {
+                  name: "mobile",
+                  label: "Zoom Level for Mobile",
+                  type: "number",
+                  required: true,
+                  defaultValue: 2.7,
+                  admin: {
+                    description:
+                      "Indicates how the map should appear on small devices",
+                  },
+                },
+              ],
+            },
+          ],
+          admin: {
+            hideGutter: true,
+          },
+        },
       ],
     },
   ],