Ouvrir les préférences de zone dans une modale

public/mobile-app/src/lib/ConnectedHomepage.svelte

@@ -5,6 +5,8 @@
   import { buildAgenda } from '$lib/agenda';
   import AgendaItem from '$lib/components/AgendaItem.svelte';
   import Icon from '$lib/components/Icon.svelte';
+  import Logout from '$lib/components/modal/Logout.svelte';
+  import Modal from '$lib/components/modal/Modal.svelte';
   import RequestItem from '$lib/components/RequestItem.svelte';
   import type { FollowUp } from '$lib/follow-up';
   import { buildFollowUp } from '$lib/follow-up';
@@ -14,6 +16,12 @@
   } from '$lib/notifications';
   import { userStore } from '$lib/state/User.svelte';
 
+  type ModalInstance = {
+    open: () => Promise<void>;
+  };
+
+  let logoutModal: ModalInstance;
+
   let unreadNotificationsCount: number = $state(0);
   let initials: string = $state('');
   let isMenuDisplayed: boolean = $state(false);
@@ -76,19 +84,9 @@
     goto('/#/contact');
   };
 
-  const logoutModal = () => {
+  const openLogoutModal = () => {
     isMenuDisplayed = false;
-    const modal = document.querySelector('#modal-logout');
-    if (modal && typeof window.dsfr === 'function') {
-      window.dsfr(modal).modal.disclose();
-    }
-  };
-
-  const logoutModalClose = () => {
-    const modal = document.querySelector('#modal-logout');
-    if (modal && typeof window.dsfr === 'function') {
-      window.dsfr(modal).modal.conceal();
-    }
+    logoutModal.open();
   };
 </script>
 
@@ -154,7 +152,7 @@
         Nous contacter
       </button>
 
-      <button class="fr-connect-logout" type="button" onclick={logoutModal}>
+      <button class="fr-connect-logout" type="button" onclick={openLogoutModal}>
         <Icon
           className="fr-mr-2v"
           color="var(--text-active-blue-france)"
@@ -266,56 +264,14 @@
   </div>
 </div>
 
-<dialog
+<Modal
+  bind:this={logoutModal}
   id="modal-logout"
-  class="fr-modal"
-  aria-labelledby="modal-logout-title"
-  data-fr-concealing-backdrop="true"
->
-  <div class="fr-container">
-    <div class="fr-grid-row fr-grid-row--center">
-      <div class="fr-col-12">
-        <div class="fr-modal__body">
-          <div class="fr-modal__header"></div>
-          <div class="fr-modal__content">
-            <h2 id="modal-logout-title" class="fr-modal__title">
-              Suppression de vos données
-            </h2>
-            <p>
-              En vous déconnectant, toutes les données enregistrées localement sur cet
-              appareil (informations saisies, modifications et paramètres de
-              personnalisation) seront supprimées.
-            </p>
-          </div>
-          <div class="fr-modal__footer">
-            <ul class="fr-btns-group action-buttons">
-              <li>
-                <button
-                  class="fr-btn fr-btn--secondary cancel-button"
-                  type="button"
-                  onclick={logoutModalClose}
-                  data-testid="logout-cancel-button"
-                >
-                  Annuler
-                </button>
-              </li>
-              <li>
-                <button
-                  class="fr-btn submit-button"
-                  type="button"
-                  onclick={userStore.logout}
-                  data-testid="logout-submit-button"
-                >
-                  Confirmer
-                </button>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</dialog>
+  title="Suppression de vos données"
+  closeButton={false}
+  centered={true}
+  component={Logout}
+/>
 
 <style>
   .is-hidden {
@@ -486,36 +442,4 @@
       }
     }
   }
-
-  .fr-modal {
-    &:after,
-    &:before {
-      flex: 1 0 10%;
-      height: 10%;
-      width: 0;
-    }
-    &:after {
-      content: "";
-    }
-    .fr-modal__body {
-      border-radius: 1.75rem;
-      .fr-modal__footer {
-        .action-buttons {
-          background-color: var(--background-default-grey);
-          display: flex;
-          gap: 1rem;
-          margin: 0;
-          padding: 1rem 0.5rem;
-          li {
-            flex: 1;
-            button {
-              display: block;
-              width: 100%;
-              margin: 0;
-            }
-          }
-        }
-      }
-    }
-  }
 </style>

public/mobile-app/src/lib/ConnectedHomepage.svelte.test.ts

@@ -391,42 +391,4 @@ describe('/ConnectedHomepage.svelte', () => {
       expect(followUpBlock).toHaveTextContent('Retrouvez et suivez vos démarches ici.');
     });
   });
-
-  test('should call userStore.logout', async () => {
-    // Given
-    vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response('', { status: 200 }));
-    const spyLogout = vi.spyOn(userStore, 'logout').mockResolvedValue();
-
-    // When
-    render(ConnectedHomepage);
-    const franceConnectLogoutButton = screen.getByRole('button', {
-      name: 'Me déconnecter',
-    });
-    await franceConnectLogoutButton.click();
-
-    const confirmButton = screen.getByTestId('logout-submit-button');
-    await confirmButton.click();
-
-    // Then
-    expect(spyLogout).toHaveBeenCalled();
-  });
-
-  test('should not call userStore.logout if cancel button is clicked', async () => {
-    // Given
-    vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response('', { status: 200 }));
-    const spyLogout = vi.spyOn(userStore, 'logout').mockResolvedValue();
-
-    // When
-    render(ConnectedHomepage);
-    const franceConnectLogoutButton = screen.getByRole('button', {
-      name: 'Me déconnecter',
-    });
-    await franceConnectLogoutButton.click();
-
-    const confirmButton = screen.getByTestId('logout-cancel-button');
-    await confirmButton.click();
-
-    // Then
-    expect(spyLogout).not.toHaveBeenCalled();
-  });
 });

public/mobile-app/src/lib/components/Toggle.svelte

@@ -41,7 +41,7 @@
 
 <style>
   .fr-toggle {
-    padding: 1rem;
+    padding: 1rem 0;
     &:has(.fr-tag) {
       padding-bottom: 0;
     }

public/mobile-app/src/lib/components/modal/Logout.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { mount, unmount } from 'svelte';
+  import LogoutFooter from './LogoutFooter.svelte';
+
+  interface Props {
+    footerTarget?: HTMLElement | null;
+    onClose?: (() => void) | null;
+  }
+
+  let { footerTarget = null, onClose = null }: Props = $props();
+
+  let footerInstance: Record<string, unknown> | null = null;
+
+  $effect(() => {
+    if (footerTarget) {
+      footerInstance = mount(LogoutFooter, {
+        target: footerTarget,
+        props: { onClose },
+      });
+    }
+    return () => {
+      if (footerInstance) {
+        unmount(footerInstance);
+        footerInstance = null;
+      }
+    };
+  });
+</script>
+
+<p>
+  En vous déconnectant, toutes les données enregistrées localement sur cet appareil
+  (informations saisies, modifications et paramètres de personnalisation) seront
+  supprimées.
+</p>

public/mobile-app/src/lib/components/modal/LogoutFooter.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { userStore } from '$lib/state/User.svelte';
+
+  interface Props {
+    onClose?: (() => void) | null;
+  }
+
+  let { onClose = null }: Props = $props();
+</script>
+
+<ul class="fr-btns-group action-buttons">
+  <li>
+    <button
+      class="fr-btn fr-btn--secondary cancel-button"
+      type="button"
+      onclick={onClose}
+      data-testid="logout-cancel-button"
+    >
+      Annuler
+    </button>
+  </li>
+  <li>
+    <button
+      class="fr-btn submit-button"
+      type="button"
+      onclick={userStore.logout}
+      data-testid="logout-submit-button"
+    >
+      Confirmer
+    </button>
+  </li>
+</ul>
+
+<style>
+  .action-buttons {
+    background-color: var(--background-default-grey);
+    display: flex;
+    gap: 1rem;
+    margin: 0;
+    li {
+      flex: 1;
+      button {
+        display: block;
+        width: 100%;
+        margin: 0;
+      }
+    }
+  }
+</style>

public/mobile-app/src/lib/components/modal/LogoutFooter.svelte.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, test, vi } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/svelte';
+import { userStore } from '$lib/state/User.svelte';
+import LogoutFooter from './LogoutFooter.svelte';
+
+describe('/LogoutFooter.svelte', () => {
+  test('should call userStore.logout', async () => {
+    // Given
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response('', { status: 200 }));
+    const spyLogout = vi.spyOn(userStore, 'logout').mockResolvedValue();
+    const onClose = vi.fn();
+
+    // When
+    render(LogoutFooter, { props: { onClose } });
+    const confirmButton = screen.getByTestId('logout-submit-button');
+    await confirmButton.click();
+
+    // Then
+    expect(spyLogout).toHaveBeenCalled();
+  });
+
+  test('should not call userStore.logout if cancel button is clicked', async () => {
+    // Given
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response('', { status: 200 }));
+    const spyLogout = vi.spyOn(userStore, 'logout').mockResolvedValue();
+    const onClose = vi.fn();
+
+    // When
+    render(LogoutFooter, { props: { onClose } });
+    const cancelButton = screen.getByTestId('logout-cancel-button');
+    await cancelButton.click();
+
+    // Then
+    expect(spyLogout).not.toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
+  });
+});