2026-04-23

web/app/themes/haiku-atelier-2024/assets/css/main.css

@@ -252,6 +252,11 @@ em {
   font-style: italic;
 }
 
+code {
+  font-family: "monospace";
+  font-size: 0.9rem;
+}
+
 /* Mixins Sass */
 /*
  * Réinitialisation des styles des <button>.
@@ -339,6 +344,51 @@ button.bouton-retour-haut[data-actif] {
   }
 }
 
+dialog {
+  background: white;
+  z-index: 999;
+  justify-self: center;
+  align-self: center;
+  padding: var(--espace-l);
+  flex-flow: column nowrap;
+  opacity: 0;
+  transition: display 0.3s, opacity 0.3s, overlay 0.3s;
+  transition-behavior: allow-discrete;
+}
+dialog::backdrop {
+  background-color: transparent;
+  transition: background-color 0.3s, display 0.3s, overlay 0.3s;
+  transition-behavior: allow-discrete;
+}
+dialog:open {
+  display: flex;
+  opacity: 1;
+}
+dialog:open::backdrop {
+  background-color: var(--couleur-fond);
+}
+dialog * + * {
+  margin-block-start: var(--espace-m);
+}
+dialog p {
+  max-inline-size: 50ch;
+}
+dialog button {
+  inline-size: fit-content;
+  align-self: end;
+  padding: var(--espace-s);
+}
+
+@starting-style {
+  dialog:open {
+    opacity: 0;
+  }
+}
+@starting-style {
+  dialog:open::backdrop {
+    background-color: transparent;
+  }
+}
 fieldset {
   all: initial;
   display: flex;

web/app/themes/haiku-atelier-2024/src/sass/base/_typographie.scss

@@ -26,5 +26,10 @@ em {
   font-style: italic;
 }
 
+code {
+  font-family: "monospace";
+  font-size: 0.9rem;
+}
+
 /* Mixins Sass */
 // TODO: Créer une mixin pour le style "gris avec lettres espacées"

web/app/themes/haiku-atelier-2024/src/sass/base/elements/_dialogs.scss

@@ -0,0 +1,52 @@
+dialog {
+  background: white;
+  z-index: 999;
+  justify-self: center;
+  align-self: center;
+  padding: var(--espace-l);
+  flex-flow: column nowrap;
+  opacity: 0;
+  transition: display 0.3s, opacity 0.3s, overlay 0.3s;
+  transition-behavior: allow-discrete;
+
+  &::backdrop {
+    background-color: transparent;
+    transition: background-color 0.3s, display 0.3s, overlay 0.3s;
+    transition-behavior: allow-discrete;
+  }
+
+  &:open {
+    display: flex;
+    opacity: 1;
+
+    &::backdrop {
+      background-color: var(--couleur-fond);
+    }
+  }
+
+  * + * {
+    margin-block-start: var(--espace-m);
+  }
+
+  p {
+    max-inline-size: 50ch;
+  }
+
+  button {
+    inline-size: fit-content;
+    align-self: end;
+    padding: var(--espace-s);
+  }
+}
+
+@starting-style {
+  dialog:open {
+    opacity: 0;
+  }
+}
+
+@starting-style {
+  dialog:open::backdrop {
+    background-color: transparent;
+  }
+}

web/app/themes/haiku-atelier-2024/src/sass/main.scss

@@ -8,6 +8,7 @@
 
 // 1.2 Éléments
 @use "base/elements/boutons" as boutons;
+@use "base/elements/dialogs" as dialogs;
 @use "base/elements/formulaires" as formulaires;
 @use "base/elements/images" as images;
 @use "base/elements/liens" as liens;

web/app/themes/haiku-atelier-2024/src/scripts/page-produit/service-dom.ts

@@ -16,7 +16,7 @@ import {
 } from "effect";
 import type { SchemaError } from "effect/Schema";
 import { APIClient } from "../../scripts-effect/lib/api.ts";
-import type { APIError, APIRequestError } from "../../scripts-effect/lib/api.ts";
+import type { APIError } from "../../scripts-effect/lib/api.ts";
 import { CartProduct } from "../../scripts-effect/schemas/api.ts";
 import { WooCommerceCart } from "../../scripts-effect/schemas/cart.ts";
 import { Product, ProductVariation, ProductVariationAttribute } from "../../scripts-effect/schemas/product.ts";
@@ -181,12 +181,16 @@ class ProductPageDOM extends Context.Service<ProductPageDOM>()(
       });
 
       // TODO: Faire une véritable gestion des erreurs.
-      const recoverFromBackendFailure = Effect.fn("recoverFromBackendFailure")(function*(_error: APIError) {
+      const recoverFromBackendFailure = Effect.fn("recoverFromBackendFailure")(function*(error: APIError) {
         AddToCartButton.toggleAttribute(ATTRIBUT_DESACTIVE, false);
         AddToCartButton.toggleAttribute(ATTRIBUT_CHARGEMENT, false);
 
         // Affiche un message d'erreur sommaire à l'utilisateur puis réinitialise le texte.
         yield* SubscriptionRef.set(AddToCartButtonText, "Error!");
+
+        document.querySelector("#cart-error").showModal();
+        document.querySelector("#cart-error code").textContent = `${error.name} ${error.message}`;
+
         yield* SubscriptionRef.set(AddToCartButtonText, "Add to cart").pipe(Effect.delay("5  seconds"));
 
         return yield* Effect.void;

web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-produit.ts

@@ -26,6 +26,10 @@ document.addEventListener("DOMContentLoaded", (): void => {
 
     yield* effects.pipe(Effect.tapCause(cause => Console.error(Cause.pretty(cause))));
   }).pipe(ProductPageRuntime.runFork);
+
+  document.querySelector("#cart-error button").addEventListener("click", (): void => {
+    document.querySelector("#cart-error").close();
+  });
 });
 
 // const ajouteProduitAuPanier = (event: MouseEvent): void => {

web/app/themes/haiku-atelier-2024/views/parts/pages/produit/informations-produit.twig

@@ -87,3 +87,11 @@
     {% endif %}
   </div>
 </aside>
+
+<dialog id="cart-error">
+  <p>An error happened! Please retry.</p>
+  <code></code>
+  <p>If that happens again, please contact us with the content or a capture of the error.</p>
+
+  <button class="bouton-blanc-sur-noir" autofocus>Close</button>
+</dialog>