Ajoute une modale d'introduction qui avertit qu'il y a un PLF et qui s'affiche...

Ajoute une modale d'introduction qui avertit qu'il y a un PLF et qui s'affiche au bout de 10 secondes

src/lib/components/IntroWarningBillModale.svelte

+<script lang="ts">
+  import {
+    Dialog,
+    DialogDescription,
+    DialogOverlay,
+    Transition,
+    TransitionChild,
+  } from "@rgossiaux/svelte-headlessui"
+  import { getContext } from "svelte"
+  import type { Writable } from "svelte/types/runtime/store"
+
+  import { page } from "$app/stores"
+  import CopyClipboard from "$lib/components/CopyClipboard.svelte"
+  import type { ParametricReform } from "$lib/reforms"
+
+  export let isOpen = false
+
+  let clipboardElement: HTMLElement
+
+  const parametricReform = getContext(
+    "parametricReform",
+  ) as Writable<ParametricReform>
+  let url = ""
+
+  function copyLink() {
+    const copyClipboard = new CopyClipboard({
+      target: clipboardElement,
+      props: { value: url },
+    })
+    copyClipboard.$destroy()
+  }
+
+  async function onChange({ target }: Event) {
+    if ((target as HTMLInputElement).checked) {
+      const urlString = "/simulations_budget"
+      const res = await fetch(urlString, {
+        body: JSON.stringify({
+          parametricReform: $parametricReform,
+        }),
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json; charset=utf-8",
+        },
+        method: "POST",
+      })
+      if (!res.ok) {
+        console.error(
+          `Error ${
+            res.status
+          } while creating a share link at ${urlString}\n\n${await res.text()}`,
+        )
+        return
+      }
+      const { token } = await res.json()
+      url = new URL(
+        `/simulations_budget/${token}`,
+        $page.data.baseUrl,
+      ).toString()
+      console.log(url)
+    }
+  }
+
+  function onClose() {
+    isOpen = false
+  }
+
+  setTimeout(() => {
+    isOpen = true
+  }, 10000) // Affiche la modale après 30 secondes
+</script>
+
+<Transition appear show={isOpen}>
+  <Dialog
+    as="div"
+    class="fixed inset-0 z-40 overflow-y-auto"
+    on:close={onClose}
+  >
+    <div class="min-h-screen px-4 text-center">
+      <TransitionChild
+        enter="ease-out duration-300"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <DialogOverlay
+          class="fixed inset-0 bg-gray-500 opacity-50 transition-opacity"
+        />
+      </TransitionChild>
+
+      <!-- This element is to trick the browser into centering the modal contents. -->
+      <span class="inline-block h-screen align-middle" aria-hidden="true">
+        &#8203;
+      </span>
+
+      <TransitionChild
+        class="inline-block align-middle my-8"
+        enter="ease-out duration-300"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
+      >
+        <div
+          class="w-screen max-w-4xl p-4 transform overflow-hidden rounded-md bg-white text-left shadow-xl transition-all"
+        >
+          <div class="flex items-center justify-between">
+            <button
+              type="button"
+              class="focus:outline-none whitespace-normal m-0.5 rounded-lg focus:ring-2 p-1.5 focus:ring-gray-400 hover:bg-gray-100 active:bg-gray-200 ml-auto"
+              aria-label="Close modal"
+              on:click={onClose}
+              ><span class="sr-only">Close modal</span>
+              <iconify-icon class="block text-2xl" icon="ri-close-line" />
+            </button>
+          </div>
+          <DialogDescription as="div" class="flex flex-col gap-5 px-5 py-3">
+            <h1 class="w-full text-left text-2xl font-bold">
+              Le simulateur configuré en vue du PLF* et du PLFSS** !
+            </h1>
+
+            <p class="w-full text-left text-lg">
+              Le simulateur a été configuré en vue de la période budgétaire de
+              début octobre :
+            </p>
+            <div
+              class="grid grid-cols-1 md:grid-cols-3 justify-between items-start gap-8"
+            >
+              <div class="flex flex-col col-span-1 text-center justify-center">
+                <p>
+                  <iconify-icon
+                    class="text-6xl text-le-gris-dispositif-dark text-center scale-x-[-1]"
+                    icon="ri-history-fill"
+                  />
+                </p>
+                <p>
+                  <span class="font-bold"
+                    >Les réformes estiment une situation en 2024</span
+                  > <br />(et non plus en 2023).
+                </p>
+              </div>
+              <div class="col-span-1 text-center">
+                <p>
+                  <iconify-icon
+                    class="text-6xl text-le-gris-dispositif-dark text-center"
+                    icon="ri-funds-line"
+                  />
+                </p>
+                <p>
+                  <span class="font-bold"
+                    >Les paramètres sont revalorisés
+                  </span> <br />lorsqu'il est d'usage que leurs montants soient
+                  indexés sur l'inflation. Une note explicative est disponible
+                  pour chacun.
+                </p>
+              </div>
+              <div class="col-span-1 text-center">
+                <p>
+                  <iconify-icon
+                    class="text-6xl text-le-gris-dispositif-dark text-center"
+                    icon="ri-file-list-3-line"
+                  />
+                </p>
+                <p>
+                  <span class="font-bold">
+                    ⚠️ Un <span class="text-le-rouge-bill">faux PLF</span> est introduit
+                  </span><br />
+                  pour visualiser comment les PLF et PLFSS apparaîtront en octobre.
+                </p>
+              </div>
+            </div>
+            <p class="text-xs text-gray-600">
+              *PLF : Projet de loi de finances<br />**PLFSS : Projet de loi de
+              financement de la sécurité sociale
+            </p>
+          </DialogDescription>
+        </div>
+      </TransitionChild>
+    </div>
+  </Dialog>
+</Transition>

src/routes/+page.svelte

@@ -33,6 +33,7 @@
   import CsgGagnantsPerdantsView from "$lib/components/CsgGagnantsPerdantsView.svelte"
   import IrBudgetView from "$lib/components/IrBudgetView.svelte"
   import IrGagnantsPerdantsView from "$lib/components/IrGagnantsPerdantsView.svelte"
+  import IntroWarningBillModale from "$lib/components/IntroWarningBillModale.svelte"
   import PersistentPopover from "$lib/components/PersistentPopover.svelte"
   import ReformsChanges from "$lib/components/ReformsChanges.svelte"
   import ReplaceTestCaseModal from "$lib/components/ReplaceTestCaseModal.svelte"
@@ -835,6 +836,8 @@
   class:after:content-none={!$isSearchActive}
   class:overflow-hidden={$isSearchActive}
 >
+  <IntroWarningBillModale />
+
   <div
     class="flex flex-[1_0_100%] flex-col overflow-x-clip transition-transform duration-500 ease-in-out-quart md:overflow-hidden"
     class:!translate-x-[-33.3%]={displayMode.edit !== undefined}