From fa8a673207d553e37eb6ec965581c078526ec4c1 Mon Sep 17 00:00:00 2001
From: Alexandre Garbe <alexandre.garbe@gmail.com>
Date: Fri, 30 Aug 2024 13:23:18 +0200
Subject: [PATCH] feat(admin): added remote zones to agencies settings v3
 remote agency summary card

---
 .../_components/agenciesSettings.hook.ts      |  2 +
 .../app/(aap)/agencies-settings-v3/page.tsx   | 52 +++++++++++++++----
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/packages/reva-admin-react/src/app/(aap)/agencies-settings-v3/_components/agenciesSettings.hook.ts b/packages/reva-admin-react/src/app/(aap)/agencies-settings-v3/_components/agenciesSettings.hook.ts
index 7a56c4850..465581a6f 100644
--- a/packages/reva-admin-react/src/app/(aap)/agencies-settings-v3/_components/agenciesSettings.hook.ts
+++ b/packages/reva-admin-react/src/app/(aap)/agencies-settings-v3/_components/agenciesSettings.hook.ts
@@ -11,6 +11,7 @@ const AgenciesSettingsInfoQuery = graphql(`
         isOnSite
         isRemote
         isVisibleInCandidateSearchResults
+        remoteZones
         accounts {
           id
           firstname
@@ -23,6 +24,7 @@ const AgenciesSettingsInfoQuery = graphql(`
             id
             isRemote
             isVisibleInCandidateSearchResults
+            remoteZones
           }
         }
       }
diff --git a/packages/reva-admin-react/src/app/(aap)/agencies-settings-v3/page.tsx b/packages/reva-admin-react/src/app/(aap)/agencies-settings-v3/page.tsx
index 84842c860..1a0ca2a54 100644
--- a/packages/reva-admin-react/src/app/(aap)/agencies-settings-v3/page.tsx
+++ b/packages/reva-admin-react/src/app/(aap)/agencies-settings-v3/page.tsx
@@ -4,6 +4,7 @@ import { SmallNotice } from "@/components/small-notice/SmallNotice";
 import { useAgenciesSettings } from "./_components/agenciesSettings.hook";
 import { useAuth } from "@/components/auth/auth";
 import Badge from "@codegouvfr/react-dsfr/Badge";
+import { RemoteZone } from "@/graphql/generated/graphql";
 
 const AgenciesSettingsPage = () => {
   const { maisonMereAAP, organism } = useAgenciesSettings();
@@ -17,6 +18,27 @@ const AgenciesSettingsPage = () => {
     ? organism
     : maisonMereAAP?.organisms.find((o) => o.isRemote);
 
+  const getRemoteZoneLabel = (remoteZone: RemoteZone) => {
+    switch (remoteZone) {
+      case "FRANCE_METROPOLITAINE":
+        return "France métropolitaine (UTC+2)";
+      case "GUADELOUPE":
+        return "Guadeloupe (UTC-4)";
+      case "GUYANE":
+        return "Guyane (UTC-3)";
+      case "LA_REUNION":
+        return "La Réunion (UTC+4)";
+      case "MARTINIQUE":
+        return "Martinique (UTC-4)";
+      case "MAYOTTE":
+        return "Mayotte (UTC+3)";
+      case "SAINTE_LUCIE_SAINT_MARTIN":
+        return "Saint-Pierre-et-Miquelon (UTC-2)";
+      case "SAINT_PIERRE_ET_MIQUELON":
+        return "Sainte-Lucie / Saint-Martin (UTC-4)";
+    }
+  };
+
   return (
     <div className="flex flex-col w-full">
       <h1>Paramètres</h1>
@@ -43,17 +65,25 @@ const AgenciesSettingsPage = () => {
               isEditable={true}
               titleIconClass="fr-icon-headphone-fill"
             >
-              <Badge
-                severity={
-                  remoteAgency.isVisibleInCandidateSearchResults
-                    ? "success"
-                    : "error"
-                }
-              >
-                {remoteAgency.isVisibleInCandidateSearchResults
-                  ? "Visible"
-                  : "Invisible"}
-              </Badge>
+              <div className="pl-10 flex flex-col gap-4">
+                <Badge
+                  small
+                  severity={
+                    remoteAgency.isVisibleInCandidateSearchResults
+                      ? "success"
+                      : "error"
+                  }
+                >
+                  {remoteAgency.isVisibleInCandidateSearchResults
+                    ? "Visible"
+                    : "Invisible"}
+                </Badge>
+                <ul className="list-none pl-0 flex flex-col gap-2">
+                  {remoteAgency.remoteZones.map((r) => (
+                    <li key={r}>{getRemoteZoneLabel(r)}</li>
+                  ))}
+                </ul>
+              </div>
             </EnhancedSectionCard>
           )}