bouton et modale simulation budget

src/lib/components/BudgetConnexionModal.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
+  let isSimulationShared = false
+  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
+  }
+</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-center text-3xl font-bold mb-8">
+              Estimations budgétaires de votre réforme
+            </h1>
+            <div class="flex flex-col px-5">
+              <h2 class="w-full text-left text-xl font-bold">
+                Vous êtes parlementaire ou habilité* ? Utilisez le
+                simulateur&nbsp;:
+                <br />
+                <span class="w-full text-base font-normal">
+                  Identifiez-vous pour obtenir l'impact de votre réforme en
+                  moins d'une minute.
+                </span>
+              </h2>
+              <div class="mb-8 mt-4 grow-0 place-self-center">
+                <a
+                  class="rounded-md bg-le-bleu px-4 py-2 text-center uppercase text-white drop-shadow-md hover:bg-blue-900 tracking-wider"
+                  data-sveltekit-reload
+                  href={`/auth/login?redirect=${encodeURIComponent(
+                    $page.url.toString(),
+                  )}`}
+                  title="Vers le simulateur budgétaire de l'impôt sur le revenu"
+                >
+                  Se&nbsp;connecter<iconify-icon
+                    class="ml-2 align-[-0.4rem] text-2xl"
+                    icon="ri-key-fill"
+                  />
+                </a>
+              </div>
+              <span class="text-xs text-gray-500"
+                >*Le simulateur budgétaire LexImpact s’appuie sur des données
+                représentatives de la population française et protégées. Son
+                accès est donc limité aux seules personnes habilitées. Pour plus
+                d’informations, veuillez consulter <a
+                  target="_blank"
+                  class="underline"
+                  href="https://leximpact.an.fr/cgu-simulateur-acces-restreint"
+                  >nos conditions générales d’utilisation<iconify-icon
+                    class="align-[-0.1rem] text-xs"
+                    icon="ri-external-link-line"
+                  /></a
+                >.</span
+              >
+            </div>
+            <div class="bg-gray-100 px-5 pb-10 pt-5 border-t mt-10">
+              <div>
+                <h2 class="w-full text-left text-xl font-bold mb-5">
+                  Demandez le calcul de votre réforme au service
+                  LexImpact&nbsp;:
+                  <br />
+                  <span class="w-full text-base font-normal leading-6">
+                    Après vérification par nos services, si elle est calculable
+                    avec les données dont nous disposons et répond au secret
+                    statistique, la simulation sera rendue publique. Vous serez
+                    alors informé par e-mail :
+                  </span>
+                </h2>
+                <span class="font-bold text-sm py-2 pl-10"
+                  >Votre adresse e-mail :</span
+                >
+                <div class="flex w-full px-10 items-center gap-5">
+                  <div
+                    class="flex rounded-t-md border-b-2 border-b-black bg-white px-2 grow max-w-lg"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="w-full px-3 py-2 border-none bg-transparent text-sm text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-base"
+                      id="search"
+                      placeholder="e-mail@email.fr"
+                      type="search"
+                    />
+                  </div>
+                  <div>
+                    <a
+                      class="rounded-md bg-white px-4 py-2 text-center tracking-wider uppercase text-le-bleu border-le-bleu border-2 drop-shadow-md hover:text-blue-900 hover:border-blue-900 hover:bg-gray-50 text-sm"
+                      data-sveltekit-reload
+                      href={`/auth/login?redirect=${encodeURIComponent(
+                        $page.url.toString(),
+                      )}`}
+                      title="Envoyer votre réforme budgétaire avec cet e-mail"
+                    >
+                      Demander&nbsp;le&nbsp;calcul <iconify-icon
+                        class="ml-2 align-[-0.25rem] text-xl"
+                        icon="ri-send-plane-2-line"
+                      />
+                    </a>
+                  </div>
+                </div>
+              </div>
+              <!--
+            <div class="">
+              <h2 class="w-full text-left text-xl font-bold">
+                Consultez la liste des simulations budgétaires déjà
+                disponibles&nbsp;:
+                <br />
+                <span class="w-full text-base font-normal">
+                  Après vérification par nos services, si elle est calculable
+                  avec les données dont nous disposons et répond au secret
+                  statistique, la simulation sera rendue publique. Vous serez
+                  alors informé par e-mail :
+                </span>
+              </h2>
+            </div>
+            -->
+            </div>
+          </DialogDescription>
+        </div>
+      </TransitionChild>
+    </div>
+  </Dialog>
+</Transition>

src/routes/+page.svelte

@@ -27,6 +27,7 @@
     requestAllTestCasesCalculations,
     type RequestedCalculations,
   } from "$lib/calculations"
+  import BudgetConnexionModal from "$lib/components/BudgetConnexionModal.svelte"
   import CopyClipboard from "$lib/components/CopyClipboard.svelte"
   import CsgBudgetView from "$lib/components/CsgBudgetView.svelte"
   import CsgGagnantsPerdantsView from "$lib/components/CsgGagnantsPerdantsView.svelte"
@@ -77,6 +78,8 @@
 
   export let data: PageData
 
+  let isBudgetConnexionModalOpen = false
+
   let animationEndedTimeoutId = undefined
   const billName = getContext("billName") as Writable<string | undefined>
   const budgetSimulation = getContext("budgetSimulation") as Writable<
@@ -1346,6 +1349,26 @@
           {#if displayMode.budget}
             {#if displayMode.parametersVariableName !== undefined}
               <div class="mb-6 flex flex-col px-2 lg:px-5">
+                <div
+                  class="fixed top-0 right-5 bg-le-jaune-light z-40 rounded-b-lg shadow-md p-5 flex-col justify-center"
+                >
+                  <p>
+                    Pour voir l'<strong>impact de votre réforme</strong>&nbsp;:
+                  </p>
+
+                  <div class="w-full flex itemps-center justify-center">
+                    <a
+                      class="mt-4 rounded-lg bg-le-jaune px-4 py-2 text-center text-base tracking-wider uppercase text-black drop-shadow-md active:bg-le-vert-800 hover:bg-le-jaune-very-dark hover:text-white font-medium"
+                      on:click={() => (isBudgetConnexionModalOpen = true)}
+                    >
+                      Calculer l'impact budgétaire
+                    </a>
+                  </div>
+                </div>
+                <BudgetConnexionModal
+                  bind:isOpen={isBudgetConnexionModalOpen}
+                />
+
                 {#if $budgetSimulation === undefined}
                   {#if user !== undefined && displayMode.parametersVariableName !== undefined}
                     <div class="z-10 bg-le-jaune bg-opacity-20">