extract AlertMessage to its own file

core/static/bundled/utils/alert-message.ts

@@ -0,0 +1,38 @@
+interface AlertParams {
+  success?: boolean;
+  duration?: number;
+}
+
+export class AlertMessage {
+  public open: boolean;
+  public success: boolean;
+  public content: string;
+  private timeoutId?: number;
+  private readonly defaultDuration: number;
+
+  constructor(params?: { defaultDuration: number }) {
+    this.open = false;
+    this.content = "";
+    this.timeoutId = null;
+    this.defaultDuration = params?.defaultDuration ?? 2000;
+  }
+
+  public display(message: string, params: AlertParams) {
+    this.clear();
+    this.open = true;
+    this.content = message;
+    this.success = params.success ?? true;
+    this.timeoutId = setTimeout(() => {
+      this.open = false;
+      this.timeoutId = null;
+    }, params.duration ?? this.defaultDuration);
+  }
+
+  public clear() {
+    if (this.timeoutId !== null) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+    this.open = false;
+  }
+}

counter/static/bundled/counter/counter-click-index.ts

@@ -1,18 +1,14 @@
 import { BasketItem } from "#counter:counter/basket";
 import type { CounterConfig, ErrorMessage } from "#counter:counter/types";
 import type { CounterProductSelect } from "./components/counter-product-select-index.ts";
+import { AlertMessage } from "#core:utils/alert-message";
 
 document.addEventListener("alpine:init", () => {
   Alpine.data("counter", (config: CounterConfig) => ({
     basket: {} as Record<string, BasketItem>,
-    errors: [],
     customerBalance: config.customerBalance,
     codeField: null as CounterProductSelect | null,
-    alertMessage: {
+    alertMessage: new AlertMessage({ defaultDuration: 2000 }),
-      content: "",
-      show: false,
-      timeout: null,
-    },
 
     init() {
       // Fill the basket with the initial data
@@ -77,22 +73,10 @@ document.addEventListener("alpine:init", () => {
       return total;
     },
 
-    showAlertMessage(message: string) {
-      if (this.alertMessage.timeout !== null) {
-        clearTimeout(this.alertMessage.timeout);
-      }
-      this.alertMessage.content = message;
-      this.alertMessage.show = true;
-      this.alertMessage.timeout = setTimeout(() => {
-        this.alertMessage.show = false;
-        this.alertMessage.timeout = null;
-      }, 2000);
-    },
-
     addToBasketWithMessage(id: string, quantity: number) {
       const message = this.addToBasket(id, quantity);
       if (message.length > 0) {
-        this.showAlertMessage(message);
+        this.alertMessage.display(message, { success: false });
       }
     },
 
@@ -109,7 +93,9 @@ document.addEventListener("alpine:init", () => {
 
     finish() {
       if (this.getBasketSize() === 0) {
-        this.showAlertMessage(gettext("You can't send an empty basket."));
+        this.alertMessage.display(gettext("You can't send an empty basket."), {
+          success: false,
+        });
         return;
       }
       this.$refs.basketForm.submit();

counter/static/bundled/counter/product-type-index.ts

@@ -1,15 +1,11 @@
 import Alpine from "alpinejs";
 import { producttypeReorder } from "#openapi";
+import { AlertMessage } from "#core:utils/alert-message";
 
 document.addEventListener("alpine:init", () => {
   Alpine.data("productTypesList", () => ({
     loading: false,
-    alertMessage: {
+    alertMessage: new AlertMessage({ defaultDuration: 2000 }),
-      open: false,
-      success: true,
-      content: "",
-      timeout: null,
-    },
 
     async reorder(itemId: number, newPosition: number) {
       // The sort plugin of Alpine doesn't manage dynamic lists with x-sort
@@ -41,23 +37,14 @@ document.addEventListener("alpine:init", () => {
     },
 
     openAlertMessage(response: Response) {
-      if (response.ok) {
+      const success = response.ok;
-        this.alertMessage.success = true;
+      const content = response.ok
-        this.alertMessage.content = gettext("Products types reordered!");
+        ? gettext("Products types reordered!")
-      } else {
+        : interpolate(
-        this.alertMessage.success = false;
+            gettext("Product type reorganisation failed with status code : %d"),
-        this.alertMessage.content = interpolate(
+            [response.status],
-          gettext("Product type reorganisation failed with status code : %d"),
+          );
-          [response.status],
+      this.alertMessage.display(content, { success: success });
-        );
-      }
-      this.alertMessage.open = true;
-      if (this.alertMessage.timeout !== null) {
-        clearTimeout(this.alertMessage.timeout);
-      }
-      this.alertMessage.timeout = setTimeout(() => {
-        this.alertMessage.open = false;
-      }, 2000);
       this.loading = false;
     },
   }));