feat: alert refacto

storybook/stories/components/Alert.stories.js

@@ -35,17 +35,37 @@ export default {
       options: ["info", "success", "warning", "danger"],
     },
   },
-  includeStories: ["Default"],
 };
 
 export const Default = {
   args: {
     title: "Backup completed",
     message: "It’s available at admin/autoupgrade/backup. You're ready to start the update now.",
     alertStatus: "success",
+  },
+};
+
+export const AlertWithForm = {
+  args: {
+    title: "Update failed",
+    message: "Your store may not work properly anymore. Select the backup you want to use and restore it to avoid any data loss.",
+    alertStatus: "warning",
+    // Required for form
+    buttonLabel: "Restore",
+    formRoute: "/",
+    formName: "alert-form",
+  },
+};
+
+export const AlertWithLink = {
+  args: {
+    title: "Backup completed",
+    message: "It’s available at /your-admin-directory/autoupgrade/backup. You're ready to start the update now.",
+    alertStatus: "success",
+    buttonDownload: "backup.log",
+    // Required for link
     buttonLabel: "Download backup logs",
     buttonUrl: "#",
-    buttonDownload: "backup.log",
   },
 };
 

views/templates/components/alert-action-form.html.twig

@@ -0,0 +1,13 @@
+<form
+  class="alert__action"
+  data-route-to-submit="{{ formRoute }}"
+  id="{{ formName }}"
+  name="{{ formName }}"
+>
+  <button
+    class="alert__link btn btn-{% if alertStatus is defined and alertStatus is not empty %}{{ alertStatus }}{% else %}info{% endif %}"
+    type="submit"
+  >
+    {{ buttonLabel }}
+  </button>
+</form>

views/templates/components/alert-action-link.html.twig

@@ -0,0 +1,9 @@
+<div class="alert__action">
+  <a
+    class="alert__link btn btn-{% if alertStatus is defined and alertStatus is not empty %}{{ alertStatus }}{% else %}info{% endif %}"
+    href="{{ buttonUrl }}"
+    {% if buttonDownload is defined and buttonDownload is not empty %}download="{{ buttonDownload }}"{% endif %}
+  >
+    {{ buttonLabel }}
+  </a>
+</div>

views/templates/components/alert.html.twig

@@ -1,43 +1,24 @@
-{% if title or message %}
+{% if title is defined or message is defined %}
   <div
-    class="
-      alert
-      alert-{% if alertStatus is defined and alertStatus is not empty %}{{ alertStatus }}{% else %}info{% endif %}
-      {% if hidden is defined and hidden == true %}hidden{% endif %}
-    "
-    {% if id is defined %}id="{{ id }}"{% endif %}
+    class="alert alert-{% if alertStatus is defined and alertStatus is not empty %}{{ alertStatus }}{% else %}info{% endif %} {% if hidden is defined and hidden %}hidden{% endif %}"
+    {% if id is defined and id is not empty %}id="{{ id }}"{% endif %}
   >
     <div class="alert__infos">
-      {% if title %}
+      {% if title is defined and title is not empty %}
         <p class="alert__title">{{ title }}</p>
       {% endif %}
 
-      {% if message %}
+      {% if message is defined and message is not empty %}
         <p class="alert__message">{{ message|raw }}</p>
       {% endif %}
     </div>
 
     {% if buttonLabel is defined and buttonLabel is not empty %}
-      <{{ formRoute is defined and formRoute ? 'form' : 'div' }}
-        class="alert__action"
-        {% if formRoute is defined and formRoute is not empty %}
-          data-route-to-submit="{{ formRoute }}"
-          action=""
-        {% endif %}
-        {% if formName is defined and formName is not empty %}
-          id="{{ formName }}"
-          name="{{ formName }}"
-        {% endif %}
-      >
-        <{{ formRoute is defined and formRoute is not empty ? 'button' : 'a' }}
-        class="alert__link btn btn-{% if alertStatus is defined and alertStatus is not empty %}{{ alertStatus }}{% else %}info{% endif %}"
-        {% if buttonUrl is defined and buttonUrl is not empty %}href="{{ buttonUrl }}"{% endif %}
-        {% if buttonDownload is defined and buttonDownload is not empty %}download="{{ buttonDownload }}"{% endif %}
-        {% if formRoute is defined and formRoute is not empty %}type="submit"{% endif %}
-        >
-          {{ buttonLabel }}
-        </{{ formRoute is defined and formRoute is not empty ? 'button' : 'a' }}>
-      </{{ formRoute is defined and formRoute is not empty ? 'form' : 'div' }}>
+      {% if formRoute is defined and formRoute is not empty %}
+        {% include '@ModuleAutoUpgrade/components/alert-action-form.html.twig' %}
+      {% else %}
+        {% include '@ModuleAutoUpgrade/components/alert-action-link.html.twig' %}
+      {% endif %}
     {% endif %}
   </div>
 {% endif %}

views/templates/components/check-requirements.html.twig

@@ -41,8 +41,6 @@
       title: '',
       message: 'The requirements check is complete, you can update your store to this version of PrestaShop.'|trans({}),
       alertStatus: 'success',
-      buttonLabel: '',
-      buttonUrl: '',
     } %}
   </div>
 {% endif %}

views/templates/components/local-archive.html.twig

@@ -68,11 +68,9 @@
       {% if errors['global'] %}
         <div class="local-archive__alert">
           {% include "@ModuleAutoUpgrade/components/alert.html.twig" with {
-            title: "",
+            title: '',
             message: errors['global'],
-            alertStatus: "warning",
-            buttonLabel: "",
-            buttonUrl: "",
+            alertStatus: 'warning',
           } %}
         </div>
       {% endif %}
@@ -83,7 +81,5 @@
     title: '',
     message: 'No archive found in the following directory: /your-admin-directory/autoupgrade/download/'|trans({}),
     alertStatus: 'warning',
-    buttonLabel: '',
-    buttonUrl: '',
   } %}
 {% endif %}

views/templates/steps/post-restore.html.twig

@@ -12,8 +12,6 @@
       title: 'Your restoration is complete'|trans({}),
       message: 'Before continuing with your tasks, please review the following checklist to ensure smooth operation after recent recovery.'|trans({}),
       alertStatus: 'success',
-      buttonLabel: '',
-      buttonUrl: '',
     } %}
 
     <div class="content__section">

views/templates/steps/post-update.html.twig

@@ -12,8 +12,6 @@
       title: 'Your store is up to date'|trans({}),
       message: 'Before continuing with your tasks, please review the following checklist to ensure smooth operation after recent updates.'|trans({}),
       alertStatus: 'success',
-      buttonLabel: '',
-      buttonUrl: '',
     } %}
 
     <div class="content__section">