corvée(images) optimise les derniers téléversements

- créé une tâche justfile pour lancer le mode UI de Playwright.

composer.json

@@ -3,8 +3,7 @@
   "authors": [],
   "autoload": {
     "psr-4": {
-      "HaikuAtelier\\": "web/app/themes/haiku-atelier-2024/src/inc/",
+      "HaikuAtelier\\": "web/app/themes/haiku-atelier-2024/src/inc/"
-      "WooCommerce\\": "web/app/plugins/woocommerce"
     }
   },
   "config": {

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

@@ -292,9 +292,12 @@ button {
 button.bouton-case-pleine {
   width: 100%;
   height: 100%;
+  font-style: italic;
+  text-transform: uppercase;
+  letter-spacing: var(--espacement-inter-lettres-etendu-m);
 }
 @media (hover: hover) {
-  button.bouton-case-pleine:hover {
+  button.bouton-case-pleine:not(:disabled):hover {
     color: var(--couleur-noir);
     background: var(--arriere-plan-points);
   }
@@ -314,7 +317,7 @@ button.bouton-inverse:disabled {
   color: var(--couleur-blanc);
 }
 @media (hover: hover) {
-  button.bouton-inverse:hover {
+  button.bouton-inverse:not(:disabled):hover {
     color: var(--couleur-noir);
     background: var(--arriere-plan-points);
   }
@@ -344,13 +347,13 @@ button.bouton-retour-haut[data-actif] {
   opacity: 50%;
 }
 @media (hover: hover) {
-  button.bouton-retour-haut[data-actif]:hover {
+  button.bouton-retour-haut[data-actif]:not(:disabled):hover {
     opacity: 100%;
     background: var(--couleur-gris-fond);
   }
 }
 @media (hover: hover) {
-  button:hover {
+  button:not(:disabled):hover {
     color: var(--couleur-blanc);
     background: var(--couleur-gris-fonce);
   }
@@ -1474,8 +1477,6 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 }
 .details-produit__actions button {
   padding: var(--section-marges-internes);
-  font-style: italic;
-  text-transform: uppercase;
 }
 @media (hover: hover) {
   .details-produit__actions button:not([disabled]):hover {

web/app/themes/haiku-atelier-2024/assets/css/pages/page-boutique.css

@@ -4,12 +4,7 @@
   text-align: center;
 }
 #page-boutique .actions button {
-  height: initial;
-  margin: auto;
   padding: var(--espace-xl) 0;
-  font-style: italic;
-  text-transform: uppercase;
-  letter-spacing: var(--espacement-inter-lettres-etendu-m);
 }
 
 /* # sourceMappingURL=page-boutique.css.map */

web/app/themes/haiku-atelier-2024/assets/css/pages/page-boutique.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-boutique.scss"],"names":[],"mappings":"AAGE;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA","file":"page-boutique.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-boutique.scss"],"names":[],"mappings":"AAGE;EACE;EACA;EACA;;AAEA;EACE","file":"page-boutique.css"}

web/app/themes/haiku-atelier-2024/assets/css/pages/page-boutique.min.css

@@ -1 +1 @@
-#page-boutique .actions{text-align:center;align-content:center;width:100%}#page-boutique .actions button{height:initial;padding:var(--espace-xl) 0;text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-etendu-m);margin:auto;font-style:italic}
+#page-boutique .actions{text-align:center;align-content:center;width:100%}#page-boutique .actions button{padding:var(--espace-xl) 0}

web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css

@@ -385,11 +385,23 @@
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 2px;
-  background: var(--couleur-noir);
+  border-block: 1px solid var(--couleur-noir);
+  border-block-end: 0;
+  background: var(--arriere-plan-points);
+}
+#panneau-informations-client .panneau__pied-de-page:has(button[disabled]) {
+  background: var(--couleur-gris-fond);
 }
 #panneau-informations-client .panneau__pied-de-page button {
   padding: var(--espace-l) 0;
 }
+@media (hover: hover) {
+  #panneau-informations-client .panneau__pied-de-page button:not([disabled]):hover {
+    font-weight: 600;
+    color: var(--couleur-blanc);
+    background: var(--couleur-gris-fonce-fond);
+  }
+}
 @media (width <= 500px) {
   #panneau-informations-client .panneau__formulaires {
     padding: var(--espace-xl) 0;

web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/sass/layouts/_panneau-panier.scss","../../../src/sass/layouts/_panneau-informations-client.scss","../../../src/sass/pages/page-panier.scss"],"names":[],"mappings":";AAEA;EACE;;AAEA;EACE;;AAIF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAbJ;AAgBE;AAAA;AAAA;AAAA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AA9BN;AAkCE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAxCJ;AA2CE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAOR;EACE;EACA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKA;EACE;;AAEA;EACE;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;IACE;;EAGF;IACE;;EAEA;IACE;;EAIJ;IACE;;EAGE;IACE;;EAKN;IACE;;;;ACpRN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIF;EAEE;EACA;EACA;EAGA;EAEA;EACA;;AAEA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAMN;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAMR;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;IACE;;;;ACjKN;AAAA;AAAA;AAAA;AAIA;AACE;EACA;AAEA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;AAGF;EACE","file":"page-panier.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/sass/layouts/_panneau-panier.scss","../../../src/sass/layouts/_panneau-informations-client.scss","../../../src/sass/pages/page-panier.scss"],"names":[],"mappings":";AAEA;EACE;;AAEA;EACE;;AAIF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAbJ;AAgBE;AAAA;AAAA;AAAA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AA9BN;AAkCE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAxCJ;AA2CE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAOR;EACE;EACA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKA;EACE;;AAEA;EACE;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;IACE;;EAGF;IACE;;EAEA;IACE;;EAIJ;IACE;;EAGE;IACE;;EAKN;IACE;;;;ACpRN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIF;EAEE;EACA;EACA;EAGA;EAEA;EACA;;AAEA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAMN;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAMR;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAGF;EACE;;AAGE;EACE;IACE;IACA;IACA;;;AAOV;EACE;IACE;;;;AClLN;AAAA;AAAA;AAAA;AAIA;AACE;EACA;AAEA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;AAGF;EACE","file":"page-panier.css"}

web/app/themes/haiku-atelier-2024/src/inc/Data/Attribute.php

@@ -32,7 +32,7 @@ final readonly class Attribute {
 
     /** @var list<AttributeOption> */
     $options = Arr::map($terms, AttributeOption::new(...))
-      |> (static fn($options) => Arr::sort($options, static fn($attribute) => $attribute->id))
+      |> (static fn($options) => Arr::sort($options, static fn($attribute) => $attribute->name))
       |> array_values(...);
 
     return new self(name: $name, slug: $slug, options: $options);

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

@@ -31,13 +31,16 @@ button {
 
   /* Particularismes. */
 
-  // Bouton prenant toute l'espace disponible.
+  // Bouton occuputant tout l'espace disponible.
   &.bouton-case-pleine {
     width: 100%;
     height: 100%;
+    font-style: italic;
+    text-transform: uppercase;
+    letter-spacing: var(--espacement-inter-lettres-etendu-m);
 
     @media (hover: hover) {
-      &:hover {
+      &:not(:disabled):hover {
         color: var(--couleur-noir);
         background: var(--arriere-plan-points);
       }
@@ -63,7 +66,7 @@ button {
     }
 
     @media (hover: hover) {
-      &:hover {
+      &:not(:disabled):hover {
         color: var(--couleur-noir);
         background: var(--arriere-plan-points);
       }
@@ -97,7 +100,7 @@ button {
       opacity: 50%;
 
       @media (hover: hover) {
-        &:hover {
+        &:not(:disabled):hover {
           opacity: 100%;
           background: var(--couleur-gris-fond);
         }
@@ -106,7 +109,7 @@ button {
   }
 
   @media (hover: hover) {
-    &:hover {
+    &:not(:disabled):hover {
       color: var(--couleur-blanc);
       background: var(--couleur-gris-fonce);
     }

web/app/themes/haiku-atelier-2024/src/sass/layouts/_informations-produit.scss

@@ -216,17 +216,15 @@
     background: var(--arriere-plan-points);
     transition: 0.2s background;
 
-    // Indique un Bouton désactivé avec un fond gris en-dessous du fond à motif
+    // Indique un Bouton désactivé avec un fond gris en-dessous du fond à motif.
     &:has(button[disabled]) {
       background: var(--couleur-gris-fond);
     }
 
     button {
       padding: var(--section-marges-internes);
-      font-style: italic;
-      text-transform: uppercase;
 
-      // Change la casse de la police au survol quand le Bouton n'est pas désactivé
+      // Change la casse de la police au survol quand le Bouton n'est pas désactivé.
       &:not([disabled]) {
         @media (hover: hover) {
           &:hover {

web/app/themes/haiku-atelier-2024/src/sass/layouts/_panneau-informations-client.scss

@@ -155,10 +155,27 @@
     text-align: center;
     text-transform: uppercase;
     letter-spacing: 2px;
-    background: var(--couleur-noir);
+    border-block: 1px solid var(--couleur-noir);
+    border-block-end: 0;
+    background: var(--arriere-plan-points);
+
+    // Indique un Bouton désactivé avec un fond gris en-dessous du fond à motif
+    &:has(button[disabled]) {
+      background: var(--couleur-gris-fond);
+    }
 
     button {
       padding: var(--espace-l) 0;
+
+      &:not([disabled]) {
+        @media (hover: hover) {
+          &:hover {
+            font-weight: 600;
+            color: var(--couleur-blanc);
+            background: var(--couleur-gris-fonce-fond);
+          }
+        }
+      }
     }
   }
 

web/app/themes/haiku-atelier-2024/src/sass/pages/page-boutique.scss

@@ -7,12 +7,7 @@
     text-align: center;
 
     button {
-      height: initial;
-      margin: auto;
       padding: var(--espace-xl) 0;
-      font-style: italic;
-      text-transform: uppercase;
-      letter-spacing: var(--espacement-inter-lettres-etendu-m);
     }
   }
 }

web/app/themes/haiku-atelier-2024/src/scripts-effect/lib/api.ts

@@ -1,4 +1,4 @@
-import { Console, Context, Effect, Layer, Match, pipe, References, Schedule, Schema, SchemaIssue } from "effect";
+import { Console, Context, Effect, Layer, Match, pipe, Schedule, Schema, SchemaIssue } from "effect";
 import type { SchemaError } from "effect/Schema";
 import type {
   HttpClientError,
@@ -13,6 +13,7 @@ import { HttpClientErrorSchema } from "effect/unstable/http/HttpClientError";
 import type { CartProduct, GetProducts } from "../schemas/api.ts";
 import { Product } from "../schemas/api.ts";
 import { WooCommerceCart } from "../schemas/cart.ts";
+import { AppConfig, Provider } from "./config.ts";
 
 /** Le nombre maximal d'essais pour une Requête. */
 const MAX_RETRIES = 3;
@@ -81,6 +82,8 @@ class APIClient extends Context.Service<APIClient>()("haikuatelier.fr/APIClient"
       }),
     );
 
+    const config = yield* AppConfig.parse(Provider);
+
     const matchAPIError = (error: HttpClientError.HttpClientError | SchemaError): APIError => {
       if (error._tag === "SchemaError") {
         return new APIRequestError({
@@ -126,9 +129,6 @@ class APIClient extends Context.Service<APIClient>()("haikuatelier.fr/APIClient"
           Effect.flatMap(HttpClientResponse.schemaBodyJson(WooCommerceCart)),
           Effect.mapError(error => matchAPIError(error)),
           Effect.tapError(error => printErrorAsSuccinctMessage(error)),
-          // Effect.catchTag("APIResponseError", error => {
-          //   if (error.cause.)
-          // }),
         );
 
         return response;
@@ -142,8 +142,8 @@ class APIClient extends Context.Service<APIClient>()("haikuatelier.fr/APIClient"
           HttpClientRequest.setHeader("Nonce", nonce),
           // TODO: Utiliser l'environnement
           HttpClientRequest.basicAuth(
-            "ck_ed966a2265099a6dfe9915db692cbd2450cceed6",
+            config.WOOCOMMERCE_API_CONSUMER_KEY,
-            "cs_a046c91647af95188a3e39a736ebe02f2024e430",
+            config.WOOCOMMERCE_API_CONSUMER_SECRET,
           ),
           // Le corps de la Requête a été validée en amont, on peut utiliser Unsafe.
           HttpClientRequest.setUrlParams(queryParams),

web/app/themes/haiku-atelier-2024/src/scripts-effect/lib/config.ts

@@ -0,0 +1,17 @@
+/**
+ * `Config<A>` décrit la Configuration nécessaire. `ConfigProvider` est le _backend_ qui la charge. Par défault, la Configuration est lue depuis les variables d'environnement, mais d'autres sources peuvent être utilisées.
+ */
+
+import { Config, ConfigProvider } from "effect";
+
+const AppConfig = Config.all({
+  WOOCOMMERCE_API_CONSUMER_KEY: Config.redacted("WOOCOMMERCE_API_CONSUMER_KEY"),
+  WOOCOMMERCE_API_CONSUMER_SECRET: Config.redacted("WOOCOMMERCE_API_CONSUMER_SECRET"),
+});
+
+const Provider = ConfigProvider.fromUnknown({
+  WOOCOMMERCE_API_CONSUMER_KEY: "ck_329c944b248aa7cc837c7662d9c6e09d638802df",
+  WOOCOMMERCE_API_CONSUMER_SECRET: "cs_5687d0c694bd519b231145afa7177c0c987f7155",
+});
+
+export { AppConfig, Provider };

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

@@ -11,7 +11,7 @@ const ShopPageRuntime = ManagedRuntime.make(
     Layer.provideMerge(ShopPageMessages.Live),
     Layer.provideMerge(ShopPageElements.Live),
     Layer.provide(APIClient.Live),
-    Layer.tapError(error => Console.error("ProductPageRuntime", "Impossible de créer le Layer :", error)),
+    Layer.tapError(error => Console.error("ProductPageRuntime", "Impossible de créer le Layer :", error.message)),
   ),
 );
 export default ShopPageRuntime;

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

@@ -1,6 +1,5 @@
 import {
   Array as FxArray,
-  Console,
   Context,
   Effect,
   Layer,
@@ -118,8 +117,6 @@ class ShopPageDOM extends Context.Service<ShopPageDOM>()("haikuatelier.fr/Shop/S
     };
 
     const onMoreProductsWantedHandler = Effect.fn("onMoreProductsWantedHandler")(function*() {
-      yield* Console.debug("onMoreProductsWantedHandler");
-
       /** Le numéro de page souhaitée. */
       const newPageNumber = yield* Ref.updateAndGet(PageNumber, pageNumber => pageNumber + 1);
       /** L'ID de la Catégorie de Produits affichée dans la page si elle existe. */
@@ -137,7 +134,6 @@ class ShopPageDOM extends Context.Service<ShopPageDOM>()("haikuatelier.fr/Shop/S
       yield* SubscriptionRef.set(ShowMoreButtonText, "Getting Products...");
 
       const newProducts = yield* API.GetProducts(nonce, requestBody);
-      yield* Console.debug("onMoreProductsWantedHandler", newProducts);
 
       // Rétablis le texte du Bouton et réactive les interactions.
       yield* SubscriptionRef.set(ShowMoreButtonText, "Show more");

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

@@ -9,17 +9,14 @@ import ShopPageElements from "./page-boutique/service-elements.ts";
 import ShopPageMessages from "./page-boutique/service-messages.ts";
 
 document.addEventListener("DOMContentLoaded", (): void => {
-  console.debug("scripts-page-boutique");
   // initialisePageBoutique();
   ShopPageRuntime.runFork(Effect.gen(function*() {
     const Elements = yield* ShopPageElements;
     const DOM = yield* ShopPageDOM;
     const Messages = yield* ShopPageMessages;
 
-    yield* Effect.all([DOM.initLoadMoreProductsOnButtonClick(), Messages.initShowMoreButtonUpdates()], {
+    yield* Effect.all([DOM.initMoreProductsOnButtonClick(), Messages.initShowMoreButtonUpdates()], {
       concurrency: "unbounded",
     }).pipe(Effect.tapCause(Console.error));
-
-    console.debug(Elements.ProductsGrid);
   }));
 });

web/app/themes/haiku-atelier-2024/views/parts/pages/panier/panneau-informations-client.twig

@@ -260,7 +260,7 @@
 
   <footer class="panneau__pied-de-page">
     <button
-      class="bouton-case-pleine bouton-inverse" form="formulaire-commande"
+      class="bouton-case-pleine" form="formulaire-commande"
       type="submit"
     >
       Calculate shipping