4287 - FRA Kiosk: Map empty space & Back button (#4299)

* 4287 - Restrict map bounds

* 4287 - Add Kiosk back button

src/client/pages/Geo/Map/hooks/useGeoMap.ts

@@ -23,6 +23,10 @@ const baseMapOptions = {
   disableDefaultUI: true,
   fullscreenControl: false,
   mapTypeControl: false,
+  restriction: {
+    latLngBounds: { east: 180, north: 85, south: -85, west: -180 },
+    strictBounds: true,
+  },
   rotateControl: false,
   styles,
 }

src/client/pages/Kiosk/KioskLayout/SidePanel/SidePanel.scss

@@ -87,21 +87,38 @@ $title: #ef7a2d;
   }
 }
 
+.kiosk-side-panel__back-button,
 .kiosk-side-panel__home-button {
   all: unset;
   aspect-ratio: 1 / 1;
   cursor: pointer;
   height: auto;
-  width: 35%;
 
   .icon {
     color: $title;
     height: 100%;
-    margin-top: -10px;
     width: 100%;
   }
 }
 
+.kiosk-side-panel__back-button {
+  margin-left: auto;
+  visibility: hidden;
+  width: 20%;
+
+  &.visible {
+    visibility: visible;
+  }
+}
+
+.kiosk-side-panel__home-button {
+  width: 35%;
+
+  .icon {
+    margin-top: -10px;
+  }
+}
+
 .kiosk-side-panel {
   background-color: $side-panel-bg;
   display: flex;

src/client/pages/Kiosk/KioskLayout/SidePanel/SidePanel.tsx

@@ -1,15 +1,24 @@
 import './SidePanel.scss'
-import React, { useTransition } from 'react'
+import React, { useCallback, useTransition } from 'react'
 import { useNavigate } from 'react-router-dom'
 
+import classNames from 'classnames'
+
 import { Routes } from 'meta/routes'
 
+import { useIsRoute } from 'client/hooks/useIsRoute'
 import Icon from 'client/components/Icon'
 
 const SidePanel: React.FC = () => {
   const navigate = useNavigate()
   const [, startTransition] = useTransition()
 
+  const isKioskHomeRoute = useIsRoute({ path: Routes.Kiosk.path.absolute, exact: true })
+
+  const goBack = useCallback(() => {
+    navigate(-1)
+  }, [navigate])
+
   return (
     <div className="kiosk-side-panel">
       <div className="kiosk-side-panel__header">
@@ -36,6 +45,15 @@ const SidePanel: React.FC = () => {
         <div className="kiosk-side-panel__partners">
           <img alt="EU" className="kiosk-side-panel__partners-eu" src="/img/partners/EU.jpg" />
           <img alt="NICFI" className="kiosk-side-panel__partners-nicfi" src="/img/partners/NICFI.png" />
+
+          {/* No conditional rendering here to avoid layout shifting in certain screen sizes */}
+          <button
+            className={classNames('kiosk-side-panel__back-button', { visible: !isKioskHomeRoute })}
+            onClick={() => startTransition(() => goBack())}
+            type="button"
+          >
+            <Icon name="arrow-back" />
+          </button>
         </div>
       </div>
     </div>

src/client/pages/Kiosk/LatestActivities/Map/hooks/useLatestActivitiesMap.ts

@@ -22,6 +22,10 @@ const baseMapOptions = {
   mapTypeId: 'satellite',
   maxZoom: 15,
   minZoom: 3,
+  restriction: {
+    latLngBounds: { east: 180, north: 85, south: -85, west: -180 },
+    strictBounds: true,
+  },
   rotateControl: false,
   zoom: 3,
 }