From b1a9bf47ade61a89fd59491a41c146d47f6c365b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Ta=C3=AFeb?= <raphael.taieb.fr@gmail.com>
Date: Tue, 3 Dec 2024 17:08:19 +0100
Subject: [PATCH 1/2] feat: add visibility toggle in sourcing side panel
 component

---
 .../common/projet-visibility-reduced.tsx      | 70 +++++++++++++++++++
 .../sourcing-user-projet-location.tsx         | 24 +++++--
 .../sourcing/sourcing-projet-visibility.tsx   | 35 +++++++---
 3 files changed, 114 insertions(+), 15 deletions(-)
 create mode 100644 src/components/common/projet-visibility-reduced.tsx

diff --git a/src/components/common/projet-visibility-reduced.tsx b/src/components/common/projet-visibility-reduced.tsx
new file mode 100644
index 00000000..72a68ec3
--- /dev/null
+++ b/src/components/common/projet-visibility-reduced.tsx
@@ -0,0 +1,70 @@
+import clsx from "clsx";
+import Image from "next/image";
+import ToggleSwitch from "@codegouvfr/react-dsfr/ToggleSwitch";
+
+type ProjetVisibilityReducedProps = {
+  isPublic?: boolean | null;
+  isLoading?: boolean;
+  onVisibilityChange: (_checked: boolean) => void;
+  disabled?: boolean;
+};
+
+export const ProjetVisibilityReduced = ({
+  isPublic,
+  isLoading,
+  onVisibilityChange,
+  disabled,
+}: ProjetVisibilityReducedProps) => {
+  return (
+    <div className="rounded-[20px] bg-dsfr-background-default-grey-hover px-4 pt-4">
+      <div className="mb-1 text-lg font-bold">
+        Souhaitez-vous rendre votre projet visible par les autres membres de la communauté Plus fraîche ma ville ?
+      </div>
+      <div className="flex items-center justify-between">
+        {!isLoading ? (
+          <p
+            className={clsx(
+              "fr-badge fr-badge--sm fr-badge--no-icon mb-2 h-fit",
+              isPublic ? "fr-badge--success" : "!text-dsfr-background-flat-red-marianne",
+            )}
+          >
+            {isPublic ? (
+              <Image
+                src="/images/sourcing/sourcing-france-visible.svg"
+                className="mr-1"
+                width={11}
+                height={11}
+                alt=""
+              />
+            ) : (
+              <svg xmlns="http://www.w3.org/2000/svg" className="mr-1 size-3" viewBox="0 0 24 24" fill="currentColor">
+                {/* eslint-disable-next-line max-len */}
+                <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z"></path>
+              </svg>
+            )}
+            {isPublic ? "Visible" : "Masqué"} {"sur l'annuaire"}
+          </p>
+        ) : (
+          <div className="mb-2 h-[1.3575rem] w-[265px] animate-pulse rounded bg-dsfr-contrast-grey"></div>
+        )}
+        {!isLoading ? (
+          <div className="[&>div]:-mr-8">
+            <ToggleSwitch
+              labelPosition="right"
+              label=""
+              inputTitle=""
+              showCheckedHint={false}
+              checked={isPublic ?? undefined}
+              disabled={disabled}
+              onChange={onVisibilityChange}
+            />
+          </div>
+        ) : (
+          <div className="-mr-8 h-6 w-[72px] rounded-full py-4">
+            <div className="h-6 w-10 rounded-full bg-dsfr-contrast-grey"></div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/sourcing/side-panel/sourcing-user-projet-location.tsx b/src/components/sourcing/side-panel/sourcing-user-projet-location.tsx
index 859ffc45..e48253c2 100644
--- a/src/components/sourcing/side-panel/sourcing-user-projet-location.tsx
+++ b/src/components/sourcing/side-panel/sourcing-user-projet-location.tsx
@@ -1,14 +1,24 @@
 import Image from "next/image";
+import { SourcingProjetVisibility } from "@/src/components/sourcing/sourcing-projet-visibility";
+import { useProjetsStore } from "@/src/stores/projets/provider";
+import { useIsLecteur } from "@/src/hooks/use-is-lecteur";
 
 export const SourcingUserProjetLocation = () => {
+  const currentProjet = useProjetsStore((state) => state.getCurrentProjet());
+  const isLecteur = useIsLecteur(currentProjet?.id);
   return (
-    <div className="flex h-full flex-col items-center justify-center px-9">
-      <Image src="/images/sourcing/sourcing-my-location.svg" width={80} height={80} alt="" className="mb-4" />
-      <h2 className="mb-4 text-lg">Votre projet</h2>
-      <p className="mb-7 text-center">Vous êtes sur le point de géolocalisation de votre projet.</p>
-      <p className="mb-1 text-center">
-        {"Pour découvrir d'autres prestataires, cliquez sur les autres projets à proximité."}
-      </p>
+    <div className="flex h-full flex-col justify-between">
+      <div className="m-auto flex flex-col items-center px-9">
+        <Image src="/images/sourcing/sourcing-my-location.svg" width={80} height={80} alt="" className="mb-4" />
+        <h2 className="mb-4 text-lg">Votre projet</h2>
+        <p className="mb-7 text-center">Vous êtes sur le point de géolocalisation de votre projet.</p>
+        <p className="mb-1 text-center">
+          {"Pour découvrir d'autres prestataires, cliquez sur les autres projets à proximité."}
+        </p>
+      </div>
+      <div className="px-4 pb-2">
+        <SourcingProjetVisibility isLecteur={isLecteur} reducedComponent />
+      </div>
     </div>
   );
 };
diff --git a/src/components/sourcing/sourcing-projet-visibility.tsx b/src/components/sourcing/sourcing-projet-visibility.tsx
index 36d4f7ea..c9f33372 100644
--- a/src/components/sourcing/sourcing-projet-visibility.tsx
+++ b/src/components/sourcing/sourcing-projet-visibility.tsx
@@ -3,9 +3,17 @@
 import { updateProjetVisibilityAction } from "@/src/actions/projets/update-projet-visibility-action";
 import { useProjetsStore } from "@/src/stores/projets/provider";
 import { notifications } from "../common/notifications";
-import { ProjetVisibility } from "../common/projet-visibility";
+import { ProjetVisibilityReduced } from "@/src/components/common/projet-visibility-reduced";
+import React from "react";
+import { ProjetVisibility } from "@/src/components/common/projet-visibility";
 
-export const SourcingProjetVisibility = ({ isLecteur }: { isLecteur: boolean }) => {
+export const SourcingProjetVisibility = ({
+  isLecteur,
+  reducedComponent = false,
+}: {
+  isLecteur: boolean;
+  reducedComponent?: boolean;
+}) => {
   const currentProjet = useProjetsStore((state) => state.getCurrentProjet());
   const isPublic = currentProjet?.is_public;
   const projetId = currentProjet?.id;
@@ -22,11 +30,22 @@ export const SourcingProjetVisibility = ({ isLecteur }: { isLecteur: boolean })
   };
 
   return (
-    <ProjetVisibility
-      isPublic={isPublic}
-      disabled={isLecteur}
-      isLoading={!currentProjet}
-      onVisibilityChange={handleVisibility}
-    />
+    <>
+      {reducedComponent ? (
+        <ProjetVisibilityReduced
+          isPublic={isPublic}
+          disabled={isLecteur}
+          isLoading={!currentProjet}
+          onVisibilityChange={handleVisibility}
+        />
+      ) : (
+        <ProjetVisibility
+          isPublic={isPublic}
+          disabled={isLecteur}
+          isLoading={!currentProjet}
+          onVisibilityChange={handleVisibility}
+        />
+      )}
+    </>
   );
 };

From 58533c2b2a37f904cdd045bf7e835e0e1ac5d774 Mon Sep 17 00:00:00 2001
From: mehdilouraoui <med.louraoui@gmail.com>
Date: Thu, 5 Dec 2024 11:04:57 +0100
Subject: [PATCH 2/2] feat: refacto projet visibility component

---
 .../common/projet-visibility-reduced.tsx      |  70 -----------
 src/components/common/projet-visibility.tsx   | 112 +++++++++++-------
 .../sourcing/map/sourcing-map-client.tsx      |   4 +
 .../sourcing-user-projet-location.tsx         |   2 +-
 .../sourcing/sourcing-projet-visibility.tsx   |  36 ++----
 5 files changed, 83 insertions(+), 141 deletions(-)
 delete mode 100644 src/components/common/projet-visibility-reduced.tsx

diff --git a/src/components/common/projet-visibility-reduced.tsx b/src/components/common/projet-visibility-reduced.tsx
deleted file mode 100644
index 72a68ec3..00000000
--- a/src/components/common/projet-visibility-reduced.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import clsx from "clsx";
-import Image from "next/image";
-import ToggleSwitch from "@codegouvfr/react-dsfr/ToggleSwitch";
-
-type ProjetVisibilityReducedProps = {
-  isPublic?: boolean | null;
-  isLoading?: boolean;
-  onVisibilityChange: (_checked: boolean) => void;
-  disabled?: boolean;
-};
-
-export const ProjetVisibilityReduced = ({
-  isPublic,
-  isLoading,
-  onVisibilityChange,
-  disabled,
-}: ProjetVisibilityReducedProps) => {
-  return (
-    <div className="rounded-[20px] bg-dsfr-background-default-grey-hover px-4 pt-4">
-      <div className="mb-1 text-lg font-bold">
-        Souhaitez-vous rendre votre projet visible par les autres membres de la communauté Plus fraîche ma ville ?
-      </div>
-      <div className="flex items-center justify-between">
-        {!isLoading ? (
-          <p
-            className={clsx(
-              "fr-badge fr-badge--sm fr-badge--no-icon mb-2 h-fit",
-              isPublic ? "fr-badge--success" : "!text-dsfr-background-flat-red-marianne",
-            )}
-          >
-            {isPublic ? (
-              <Image
-                src="/images/sourcing/sourcing-france-visible.svg"
-                className="mr-1"
-                width={11}
-                height={11}
-                alt=""
-              />
-            ) : (
-              <svg xmlns="http://www.w3.org/2000/svg" className="mr-1 size-3" viewBox="0 0 24 24" fill="currentColor">
-                {/* eslint-disable-next-line max-len */}
-                <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z"></path>
-              </svg>
-            )}
-            {isPublic ? "Visible" : "Masqué"} {"sur l'annuaire"}
-          </p>
-        ) : (
-          <div className="mb-2 h-[1.3575rem] w-[265px] animate-pulse rounded bg-dsfr-contrast-grey"></div>
-        )}
-        {!isLoading ? (
-          <div className="[&>div]:-mr-8">
-            <ToggleSwitch
-              labelPosition="right"
-              label=""
-              inputTitle=""
-              showCheckedHint={false}
-              checked={isPublic ?? undefined}
-              disabled={disabled}
-              onChange={onVisibilityChange}
-            />
-          </div>
-        ) : (
-          <div className="-mr-8 h-6 w-[72px] rounded-full py-4">
-            <div className="h-6 w-10 rounded-full bg-dsfr-contrast-grey"></div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/common/projet-visibility.tsx b/src/components/common/projet-visibility.tsx
index e945d1ab..094c54fb 100644
--- a/src/components/common/projet-visibility.tsx
+++ b/src/components/common/projet-visibility.tsx
@@ -7,64 +7,90 @@ type ProjetVisibilityProps = {
   isLoading?: boolean;
   onVisibilityChange: (_checked: boolean) => void;
   disabled?: boolean;
+  reduced?: boolean;
 };
 
-export const ProjetVisibility = ({ isPublic, isLoading, onVisibilityChange, disabled }: ProjetVisibilityProps) => {
-  return (
-    <div className="mb-14 mt-16 rounded-[20px] bg-dsfr-background-default-grey-hover p-8">
-      {!isLoading ? (
-        <p
-          className={clsx(
-            "fr-badge fr-badge--sm fr-badge--no-icon mb-2",
-            isPublic ? "fr-badge--success" : "!text-dsfr-background-flat-red-marianne",
-          )}
-        >
-          {isPublic ? (
-            <Image src="/images/sourcing/sourcing-france-visible.svg" className="mr-1" width={11} height={11} alt="" />
-          ) : (
-            <svg xmlns="http://www.w3.org/2000/svg" className="mr-1 size-3" viewBox="0 0 24 24" fill="currentColor">
-              {/* eslint-disable-next-line max-len */}
-              <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z"></path>
-            </svg>
-          )}
-          {isPublic ? "Visible" : "Masqué"} {"sur l'annuaire des projets"}
-        </p>
+export const ProjetVisibility = ({
+  isPublic,
+  isLoading,
+  onVisibilityChange,
+  disabled,
+  reduced = false,
+}: ProjetVisibilityProps) => {
+  const Badge = !isLoading ? (
+    <p
+      className={clsx(
+        "fr-badge fr-badge--sm fr-badge--no-icon mb-2",
+        isPublic ? "fr-badge--success" : "!text-dsfr-background-flat-red-marianne",
+        reduced && "h-fit",
+      )}
+    >
+      {isPublic ? (
+        <Image src="/images/sourcing/sourcing-france-visible.svg" className="mr-1" width={11} height={11} alt="" />
       ) : (
-        <div className="mb-2 h-[1.3575rem] w-[265px] animate-pulse rounded bg-dsfr-contrast-grey"></div>
+        <svg xmlns="http://www.w3.org/2000/svg" className="mr-1 size-3" viewBox="0 0 24 24" fill="currentColor">
+          {/* eslint-disable-next-line max-len */}
+          <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z"></path>
+        </svg>
       )}
+      {isPublic ? "Visible" : "Masqué"} {reduced ? "sur l'annuaire" : "sur l'annuaire des projets"}
+    </p>
+  ) : (
+    <div className="mb-2 h-[1.3575rem] w-[265px] animate-pulse rounded bg-dsfr-contrast-grey"></div>
+  );
+
+  const Toggle = !isLoading ? (
+    <div className="[&>div]:-mr-8">
+      <ToggleSwitch
+        labelPosition="right"
+        label=""
+        inputTitle=""
+        showCheckedHint={false}
+        checked={isPublic ?? undefined}
+        disabled={disabled}
+        onChange={onVisibilityChange}
+      />
+    </div>
+  ) : (
+    <div className="-mr-8 h-6 w-[72px] rounded-full py-4">
+      <div className="h-6 w-10 rounded-full bg-dsfr-contrast-grey"></div>
+    </div>
+  );
 
+  if (reduced) {
+    return (
+      <div className="rounded-[20px] bg-dsfr-background-default-grey-hover px-4 pt-4">
+        <div className="mb-1 text-lg font-bold">
+          Souhaitez-vous rendre votre projet visible par les autres membres de la communauté Plus fraîche ma ville ?
+        </div>
+        <div className="flex items-center justify-between">
+          {Badge}
+          {Toggle}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mb-14 mt-16 rounded-[20px] bg-dsfr-background-default-grey-hover p-8">
+      {Badge}
       <div className="flex justify-between">
         <div className="flex max-w-4xl flex-col gap-4 [&>p]:mb-0">
           <p className="max-w-2xl text-xl font-bold">
             Souhaitez-vous rendre votre projet visible par les autres membres de la communauté Plus fraîche ma ville ?
           </p>
           <p>
-            Rendez votre projet visible dans {"l'annuaire"} des projets pour partager son objet, sa localisation et son
-            état d’avancement aux autres membres de la communauté. Grâce à cette fonctionnalité, découvrez les
-            initiatives voisines, échangez avec d’autres porteurs de projet, et obtenez des contacts de prestataires.
+            Rendez votre projet visible dans {`l'annuaire`} des projets pour partager son objet, sa localisation et son
+            état {`d'avancement`} aux autres membres de la communauté. Grâce à cette fonctionnalité, découvrez les
+            initiatives voisines, échangez avec {`d'autres`} porteurs de projet, et obtenez des contacts de
+            prestataires.
           </p>
           <p>
-            En tant qu’administrateur d’un projet, vos prénom, nom et adresse mail seront partagés avec les utilisateurs
-            connectés.
+            En tant {`qu'administrateur`} {`d'un`} projet, vos prénom, nom et adresse mail seront partagés avec les
+            utilisateurs connectés.
           </p>
         </div>
-        {!isLoading ? (
-          <div className="[&>div]:-mr-8">
-            <ToggleSwitch
-              labelPosition="right"
-              label=""
-              inputTitle=""
-              showCheckedHint={false}
-              checked={isPublic ?? undefined}
-              disabled={disabled}
-              onChange={onVisibilityChange}
-            />
-          </div>
-        ) : (
-          <div className="-mr-8 h-6 w-[72px] rounded-full py-4">
-            <div className="h-6 w-10 rounded-full bg-dsfr-contrast-grey"></div>
-          </div>
-        )}
+        {Toggle}
       </div>
     </div>
   );
diff --git a/src/components/sourcing/map/sourcing-map-client.tsx b/src/components/sourcing/map/sourcing-map-client.tsx
index 150b1ec8..19dd6075 100644
--- a/src/components/sourcing/map/sourcing-map-client.tsx
+++ b/src/components/sourcing/map/sourcing-map-client.tsx
@@ -38,6 +38,10 @@ const SourcingMapClient = ({ markers, setSelectedMarker, selectedMarker, mapFocu
     setSelectedMarker(selectedMarker);
   };
 
+  if (!currentProjetCoordinates) {
+    return null;
+  }
+
   return (
     <div className="flex">
       <div className="h-[715px] w-full max-w-[50rem]">
diff --git a/src/components/sourcing/side-panel/sourcing-user-projet-location.tsx b/src/components/sourcing/side-panel/sourcing-user-projet-location.tsx
index e48253c2..dbd1e51e 100644
--- a/src/components/sourcing/side-panel/sourcing-user-projet-location.tsx
+++ b/src/components/sourcing/side-panel/sourcing-user-projet-location.tsx
@@ -17,7 +17,7 @@ export const SourcingUserProjetLocation = () => {
         </p>
       </div>
       <div className="px-4 pb-2">
-        <SourcingProjetVisibility isLecteur={isLecteur} reducedComponent />
+        <SourcingProjetVisibility isLecteur={isLecteur} reduced />
       </div>
     </div>
   );
diff --git a/src/components/sourcing/sourcing-projet-visibility.tsx b/src/components/sourcing/sourcing-projet-visibility.tsx
index c9f33372..9203acf4 100644
--- a/src/components/sourcing/sourcing-projet-visibility.tsx
+++ b/src/components/sourcing/sourcing-projet-visibility.tsx
@@ -3,17 +3,9 @@
 import { updateProjetVisibilityAction } from "@/src/actions/projets/update-projet-visibility-action";
 import { useProjetsStore } from "@/src/stores/projets/provider";
 import { notifications } from "../common/notifications";
-import { ProjetVisibilityReduced } from "@/src/components/common/projet-visibility-reduced";
-import React from "react";
-import { ProjetVisibility } from "@/src/components/common/projet-visibility";
+import { ProjetVisibility } from "../common/projet-visibility";
 
-export const SourcingProjetVisibility = ({
-  isLecteur,
-  reducedComponent = false,
-}: {
-  isLecteur: boolean;
-  reducedComponent?: boolean;
-}) => {
+export const SourcingProjetVisibility = ({ isLecteur, reduced = false }: { isLecteur: boolean; reduced?: boolean }) => {
   const currentProjet = useProjetsStore((state) => state.getCurrentProjet());
   const isPublic = currentProjet?.is_public;
   const projetId = currentProjet?.id;
@@ -30,22 +22,12 @@ export const SourcingProjetVisibility = ({
   };
 
   return (
-    <>
-      {reducedComponent ? (
-        <ProjetVisibilityReduced
-          isPublic={isPublic}
-          disabled={isLecteur}
-          isLoading={!currentProjet}
-          onVisibilityChange={handleVisibility}
-        />
-      ) : (
-        <ProjetVisibility
-          isPublic={isPublic}
-          disabled={isLecteur}
-          isLoading={!currentProjet}
-          onVisibilityChange={handleVisibility}
-        />
-      )}
-    </>
+    <ProjetVisibility
+      isPublic={isPublic}
+      disabled={isLecteur}
+      isLoading={!currentProjet}
+      onVisibilityChange={handleVisibility}
+      reduced={reduced}
+    />
   );
 };