Add macro to refresh messages from htmx swap

core/templates/core/base/notifications.jinja

@@ -13,10 +13,10 @@
              }"
      @quick-notification-add="(e) => messages.push(e?.detail)"
      @quick-notification-delete="messages = []">
-  <template x-for="message in messages">
-    <div x-data="{show: true}" class="alert" :class="`alert-${message.tag}`" x-show="show" x-transition>
+  <template x-for="(message, index) in messages">
+    <div class="alert" :class="`alert-${message.tag}`" x-transition>
       <span class="alert-main" x-text="message.text"></span>
-      <span class="clickable" @click="show = false">
+      <span class="clickable" @click="messages = messages.filter((item, i) => i !== index)">
         <i class="fa fa-close"></i>
       </span>
     </div>

core/templates/core/macros.jinja

@@ -245,3 +245,26 @@
   <button type="button" onclick="checkbox_{{form_id}}(true);">{% trans %}Select All{% endtrans %}</button>
   <button type="button" onclick="checkbox_{{form_id}}(false);">{% trans %}Unselect All{% endtrans %}</button>
 {% endmacro %}
+
+{% macro update_notifications(messages, clear) %}
+  {# Update notification area from new messages sent by django backend
+     This is useful when performing fragment swaps to keep messages up to date
+     Without this, the fragment would need to take control of the notification area and
+     this would be an issue when having more than one fragment
+
+     Parameters:
+      messages: messages from django.contrib
+      clear   : optional boolean that controls if notifications should be cleared first. True is the default
+  #}
+  {% set clear = clear|default(true) %}
+  {% if messages %}
+    <div x-init="() => {
+                 {% if clear %}
+                   $notifications.clear()
+                 {% endif %}
+                 {% for message in messages %}
+                   $notifications.{{ message.tags }}('{{ message }}')
+                 {% endfor %}
+                 }"></div>
+  {% endif %}
+{% endmacro %}

eboutic/templates/eboutic/eboutic_billing_info.jinja

@@ -1,3 +1,5 @@
+{% from 'core/macros.jinja' import update_notifications %}
+
 <div id=billing-infos-fragment>
   <div
     class="collapse"
@@ -29,7 +31,6 @@
       >
     </form>
   </div>
-
   <br>
-  {% include "core/base/notifications.jinja" %}
+  {{ update_notifications(messages) }}
 </div>

eboutic/templates/eboutic/eboutic_checkout.jinja

@@ -1,7 +1,7 @@
 {% extends "core/base.jinja" %}
 
 {% block notifications %}
-  {# Notifications are moved inside the billing info fragment #}
+  {# Notifications are moved under the billing form #}
 {% endblock %}
 
 {% block title %}
@@ -60,6 +60,7 @@
       <div @htmx:after-request="fill">
         {{ billing_infos_form }}
       </div>
+      {% include "core/base/notifications.jinja" %}
       <form
         method="post"
         action="{{ settings.SITH_EBOUTIC_ET_URL }}"