Ajoute modale vers les simulateurs budget

src/lib/components/tutorial/BudgetButtonModal.svelte

+<script lang="ts">
+  import Icon from "@iconify/svelte"
+  import {
+    Dialog,
+    DialogDescription,
+    DialogOverlay,
+    DialogTitle,
+    Transition,
+    TransitionChild,
+  } from "@rgossiaux/svelte-headlessui"
+  import deepCopy from "rfdc/default"
+  import { createEventDispatcher, getContext } from "svelte"
+  import type { Writable } from "svelte/store"
+
+  import type { EvaluationByName } from "$lib/decompositions"
+  import type { Situation } from "$lib/situations"
+  import type { ValuesByCalculationNameByVariableName } from "$lib/variables"
+
+  export let isOpen = false
+
+  function closeModal() {
+    isOpen = false
+  }
+</script>
+
+<Transition appear show={isOpen}>
+  <Dialog
+    as="div"
+    class="fixed inset-0 z-20 overflow-y-auto"
+    on:close={closeModal}
+  >
+    <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-[33vh]" aria-hidden="true"> &#8203; </span>
+
+      <TransitionChild
+        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="my-8 inline-block w-full max-w-md transform overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all"
+        >
+          <div class="flex items-center justify-between text-black">
+            <DialogTitle as="h3" class="text-2xl font-bold text-black">
+              Estimer les impacts budgétaires
+            </DialogTitle>
+
+            <button
+              class="text-gray-400 hover:text-black"
+              on:click={closeModal}
+              type="button"
+            >
+              <Icon class="ml-2 h-9 w-9" icon="ri-close-line" /></button
+            >
+          </div>
+          <DialogDescription as="div" class=" mt-2">
+            <Icon class="ml-2 h-5 w-5" icon="ri-ri-close-line" />
+            <p class="text-lg">
+              LexImpact permet l'évaluation budgétaire de deux dispositifs :
+            </p>
+
+            <div class="mt-4 flex flex-wrap gap-2">
+              <div
+                class="mx-4 grow-0 items-center rounded-lg bg-gray-300 text-base uppercase text-black shadow-md hover:bg-le-bleu hover:text-white focus:outline-none md:mx-0"
+              >
+                <a
+                  href="https://leximpact.an.fr/ir?popin=connection"
+                  title="Vers le simulateur CSG Budget de la Sécurité sociale"
+                >
+                  <div class="flex items-center p-1">
+                    <svg
+                      class="ml-2"
+                      width="30"
+                      height="30"
+                      viewBox="0 0 40 40"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      ><path
+                        fill="#2A6797"
+                        d="M2 11c-2 0-2 2-2 2v21s0 2 2 2h32c2 0 2-2 2-2V13s0-2-2-2H2z"
+                      /><path
+                        fill="#5DADEC"
+                        d="M2 6C0 6 0 8 0 8v20s0 2 2 2h32c2 0 2-2 2-2V8s0-2-2-2H2z"
+                      /><circle fill="#4289C1" cx="25" cy="18" r="6.5" /><path
+                        fill="#2A6797"
+                        d="M33 28.5H3c-.827 0-1.5-.673-1.5-1.5V9c0-.827.673-1.5 1.5-1.5h30c.827 0 1.5.673 1.5 1.5v18c0 .827-.673 1.5-1.5 1.5zM3 8.5a.5.5 0 0 0-.5.5v18c0 .275.225.5.5.5h30c.275 0 .5-.225.5-.5V9a.5.5 0 0 0-.5-.5H3z"
+                      /><path fill="#FFE8B6" d="M14 6h8v24.062h-8z" /><path
+                        fill="#FFAC33"
+                        d="M14 30h8v6h-8z"
+                      /><path
+                        fill="#2A6797"
+                        d="M12.764 21.84c0 .658-1.474 1.447-3.301 1.447c-2.42 0-3.877-1.681-4.361-3.742H3.808a.57.57 0 1 1 0-1.139h1.129c-.008-.136-.029-.27-.029-.406c0-.3.026-.597.063-.89H3.808a.57.57 0 1 1 0-1.14h1.416c.593-1.835 2.03-3.257 4.313-3.257c1.84 0 3.008.993 3.008 1.519c0 .336-.205.612-.526.612c-.584 0-.876-1.022-2.482-1.022c-1.51 0-2.428.942-2.891 2.147h3.327a.57.57 0 1 1 0 1.14H6.351a6.246 6.246 0 0 0-.072.891c0 .134.016.27.025.405h3.668a.57.57 0 1 1 0 1.139H6.485c.389 1.43 1.346 2.631 2.978 2.631c1.563 0 2.25-.934 2.79-.934c.307.001.511.235.511.599z"
+                      /></svg
+                    >
+                    <div class="ml-2 inline-block text-center">
+                      Impôt sur le revenu
+                    </div>
+                    <!-- Material icon: key fill-->
+                    <svg
+                      class="mx-2 inline-flex rounded fill-current"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      width="18"
+                      height="18"
+                      ><path fill="none" d="M0 0h24v24H0z" /><path
+                        d="M17 14h-4.341a6 6 0 1 1 0-4H23v4h-2v4h-4v-4zM7 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
+                      /></svg
+                    >
+                  </div>
+                </a>
+              </div>
+              <div
+                class="mx-4 grow-0 items-center rounded-lg bg-gray-300 text-base uppercase text-black shadow-md hover:bg-le-bleu hover:text-white focus:outline-none md:mx-0"
+              >
+                <a
+                  href="https://budget.leximpact.an.fr/authentication/signin/leximpact?redirect=/budget"
+                  title="Vers le simulateur CSG Budget de la Sécurité sociale"
+                >
+                  <div class="flex items-center p-1">
+                    <svg
+                      class="ml-2"
+                      width="30"
+                      height="30"
+                      viewBox="0 0 40 40"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      ><path
+                        fill="#2A6797"
+                        d="M2 11c-2 0-2 2-2 2v21s0 2 2 2h32c2 0 2-2 2-2V13s0-2-2-2H2z"
+                      /><path
+                        fill="#5DADEC"
+                        d="M2 6C0 6 0 8 0 8v20s0 2 2 2h32c2 0 2-2 2-2V8s0-2-2-2H2z"
+                      /><circle fill="#4289C1" cx="25" cy="18" r="6.5" /><path
+                        fill="#2A6797"
+                        d="M33 28.5H3c-.827 0-1.5-.673-1.5-1.5V9c0-.827.673-1.5 1.5-1.5h30c.827 0 1.5.673 1.5 1.5v18c0 .827-.673 1.5-1.5 1.5zM3 8.5a.5.5 0 0 0-.5.5v18c0 .275.225.5.5.5h30c.275 0 .5-.225.5-.5V9a.5.5 0 0 0-.5-.5H3z"
+                      /><path fill="#FFE8B6" d="M14 6h8v24.062h-8z" /><path
+                        fill="#FFAC33"
+                        d="M14 30h8v6h-8z"
+                      /><path
+                        fill="#2A6797"
+                        d="M12.764 21.84c0 .658-1.474 1.447-3.301 1.447c-2.42 0-3.877-1.681-4.361-3.742H3.808a.57.57 0 1 1 0-1.139h1.129c-.008-.136-.029-.27-.029-.406c0-.3.026-.597.063-.89H3.808a.57.57 0 1 1 0-1.14h1.416c.593-1.835 2.03-3.257 4.313-3.257c1.84 0 3.008.993 3.008 1.519c0 .336-.205.612-.526.612c-.584 0-.876-1.022-2.482-1.022c-1.51 0-2.428.942-2.891 2.147h3.327a.57.57 0 1 1 0 1.14H6.351a6.246 6.246 0 0 0-.072.891c0 .134.016.27.025.405h3.668a.57.57 0 1 1 0 1.139H6.485c.389 1.43 1.346 2.631 2.978 2.631c1.563 0 2.25-.934 2.79-.934c.307.001.511.235.511.599z"
+                      /></svg
+                    >
+                    <div class="ml-2 inline-block text-center">
+                      CSG salaires
+                    </div>
+                    <!-- Material icon: key fill-->
+                    <svg
+                      class="mx-2 inline-flex rounded fill-current"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      width="18"
+                      height="18"
+                      ><path fill="none" d="M0 0h24v24H0z" /><path
+                        d="M17 14h-4.341a6 6 0 1 1 0-4H23v4h-2v4h-4v-4zM7 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
+                      /></svg
+                    >
+                  </div>
+                </a>
+              </div>
+              <p class="mt-5 text-xs text-gray-700">
+                * Les simulateurs budgétaires sont accessibles sous <a
+                  class="link"
+                  href="https://leximpact.an.fr/cgu-simulateur-acces-restreint"
+                  >certaines conditions</a
+                >, après authentification.
+              </p>
+            </div>
+          </DialogDescription>
+        </div>
+      </TransitionChild>
+    </div>
+  </Dialog>
+</Transition>

src/lib/components/tutorial/StartTutorial.svelte

@@ -3,6 +3,7 @@
   import type Fuse from "fuse.js"
 
   import { browser } from "$app/env"
+  import BudgetButtonModal from "../tutorial/BudgetButtonModal.svelte"
   import type { DisplayMode } from "$lib/displays"
   import { newSimulationUrl } from "$lib/urls"
   import VariablesSearchWorker from "$lib/variables_search_worker?worker"
@@ -27,6 +28,7 @@
   let pendingTerm: string | null = null
   let searchInProgress = false
   let term = ""
+  let isBudgetButtonModalOpen = false
 
   $: if (browser) {
     if (searchInProgress) {
@@ -138,107 +140,8 @@
         <span>CSG salaires imposable</span>
       </a>
     </div>
-    <div class="mt-36 flex flex-wrap border-t pt-4">
-      <h3 class="text-gray-700">Pour les impacts deux simulateurs :</h3>
 
-      <div
-        class="rounded-full border-4 border-white bg-gray-300 px-3 py-1 hover:bg-le-gris-dispositif hover:bg-opacity-60"
-      >
-        <a
-          href="https://leximpact.an.fr/ir?popin=connection"
-          title="Vers le simulateur CSG Budget de la Sécurité sociale"
-        >
-          <div class="flex items-center">
-            <svg
-              class="ml-2"
-              width="30"
-              height="30"
-              viewBox="0 0 40 40"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              ><path
-                fill="#2A6797"
-                d="M2 11c-2 0-2 2-2 2v21s0 2 2 2h32c2 0 2-2 2-2V13s0-2-2-2H2z"
-              /><path
-                fill="#5DADEC"
-                d="M2 6C0 6 0 8 0 8v20s0 2 2 2h32c2 0 2-2 2-2V8s0-2-2-2H2z"
-              /><circle fill="#4289C1" cx="25" cy="18" r="6.5" /><path
-                fill="#2A6797"
-                d="M33 28.5H3c-.827 0-1.5-.673-1.5-1.5V9c0-.827.673-1.5 1.5-1.5h30c.827 0 1.5.673 1.5 1.5v18c0 .827-.673 1.5-1.5 1.5zM3 8.5a.5.5 0 0 0-.5.5v18c0 .275.225.5.5.5h30c.275 0 .5-.225.5-.5V9a.5.5 0 0 0-.5-.5H3z"
-              /><path fill="#FFE8B6" d="M14 6h8v24.062h-8z" /><path
-                fill="#FFAC33"
-                d="M14 30h8v6h-8z"
-              /><path
-                fill="#2A6797"
-                d="M12.764 21.84c0 .658-1.474 1.447-3.301 1.447c-2.42 0-3.877-1.681-4.361-3.742H3.808a.57.57 0 1 1 0-1.139h1.129c-.008-.136-.029-.27-.029-.406c0-.3.026-.597.063-.89H3.808a.57.57 0 1 1 0-1.14h1.416c.593-1.835 2.03-3.257 4.313-3.257c1.84 0 3.008.993 3.008 1.519c0 .336-.205.612-.526.612c-.584 0-.876-1.022-2.482-1.022c-1.51 0-2.428.942-2.891 2.147h3.327a.57.57 0 1 1 0 1.14H6.351a6.246 6.246 0 0 0-.072.891c0 .134.016.27.025.405h3.668a.57.57 0 1 1 0 1.139H6.485c.389 1.43 1.346 2.631 2.978 2.631c1.563 0 2.25-.934 2.79-.934c.307.001.511.235.511.599z"
-              /></svg
-            >
-            <div class="ml-2 inline-block text-center">
-              Budget impôt sur le revenu
-            </div>
-            <!-- Material icon: key fill-->
-            <svg
-              class="mx-2 inline-flex rounded fill-current"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              width="18"
-              height="18"
-              ><path fill="none" d="M0 0h24v24H0z" /><path
-                d="M17 14h-4.341a6 6 0 1 1 0-4H23v4h-2v4h-4v-4zM7 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
-              /></svg
-            >
-          </div>
-        </a>
-      </div>
-      <div
-        class="rounded-full border-4 border-white bg-gray-300 px-3 py-1 hover:bg-le-gris-dispositif hover:bg-opacity-60"
-      >
-        <a
-          href="https://budget.leximpact.an.fr/authentication/signin/leximpact?redirect=/budget"
-          title="Vers le simulateur CSG Budget de la Sécurité sociale"
-        >
-          <div class="flex items-center">
-            <svg
-              class="ml-2"
-              width="30"
-              height="30"
-              viewBox="0 0 40 40"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              ><path
-                fill="#2A6797"
-                d="M2 11c-2 0-2 2-2 2v21s0 2 2 2h32c2 0 2-2 2-2V13s0-2-2-2H2z"
-              /><path
-                fill="#5DADEC"
-                d="M2 6C0 6 0 8 0 8v20s0 2 2 2h32c2 0 2-2 2-2V8s0-2-2-2H2z"
-              /><circle fill="#4289C1" cx="25" cy="18" r="6.5" /><path
-                fill="#2A6797"
-                d="M33 28.5H3c-.827 0-1.5-.673-1.5-1.5V9c0-.827.673-1.5 1.5-1.5h30c.827 0 1.5.673 1.5 1.5v18c0 .827-.673 1.5-1.5 1.5zM3 8.5a.5.5 0 0 0-.5.5v18c0 .275.225.5.5.5h30c.275 0 .5-.225.5-.5V9a.5.5 0 0 0-.5-.5H3z"
-              /><path fill="#FFE8B6" d="M14 6h8v24.062h-8z" /><path
-                fill="#FFAC33"
-                d="M14 30h8v6h-8z"
-              /><path
-                fill="#2A6797"
-                d="M12.764 21.84c0 .658-1.474 1.447-3.301 1.447c-2.42 0-3.877-1.681-4.361-3.742H3.808a.57.57 0 1 1 0-1.139h1.129c-.008-.136-.029-.27-.029-.406c0-.3.026-.597.063-.89H3.808a.57.57 0 1 1 0-1.14h1.416c.593-1.835 2.03-3.257 4.313-3.257c1.84 0 3.008.993 3.008 1.519c0 .336-.205.612-.526.612c-.584 0-.876-1.022-2.482-1.022c-1.51 0-2.428.942-2.891 2.147h3.327a.57.57 0 1 1 0 1.14H6.351a6.246 6.246 0 0 0-.072.891c0 .134.016.27.025.405h3.668a.57.57 0 1 1 0 1.139H6.485c.389 1.43 1.346 2.631 2.978 2.631c1.563 0 2.25-.934 2.79-.934c.307.001.511.235.511.599z"
-              /></svg
-            >
-            <div class="ml-2 inline-block text-center">Budget CSG</div>
-            <!-- Material icon: key fill-->
-            <svg
-              class="mx-2 inline-flex rounded fill-current"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              width="18"
-              height="18"
-              ><path fill="none" d="M0 0h24v24H0z" /><path
-                d="M17 14h-4.341a6 6 0 1 1 0-4H23v4h-2v4h-4v-4zM7 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
-              /></svg
-            >
-          </div>
-        </a>
-      </div>
-    </div>
-    <button on:click={() => (isTestCaseSelectModalOpen = true)}>
+    <button on:click={() => (isBudgetButtonModalOpen = true)}>
       <div
         class="border-1 absolute bottom-8 left-8 flex items-center rounded-full bg-gray-300 p-3 px-4 uppercase shadow-lg"
       >
@@ -268,5 +171,6 @@
         >Impacts budgétaires
       </div>
     </button>
+    <BudgetButtonModal bind:isOpen={isBudgetButtonModalOpen} />
   {/if}
 </div>