From 18b033527adcd99d3643074e2aec6e130481b5d1 Mon Sep 17 00:00:00 2001
From: tblivet <thibault.blivet@prestashop.com>
Date: Fri, 13 Dec 2024 16:47:06 +0100
Subject: [PATCH] feat: alert refacto

---
 storybook/stories/components/Alert.stories.js | 24 +++++++++++-
 .../components/alert-action-form.html.twig    | 13 +++++++
 .../components/alert-action-link.html.twig    |  9 +++++
 views/templates/components/alert.html.twig    | 39 +++++--------------
 .../components/check-requirements.html.twig   |  2 -
 .../components/local-archive.html.twig        |  8 +---
 views/templates/steps/post-restore.html.twig  |  2 -
 views/templates/steps/post-update.html.twig   |  2 -
 8 files changed, 56 insertions(+), 43 deletions(-)
 create mode 100644 views/templates/components/alert-action-form.html.twig
 create mode 100644 views/templates/components/alert-action-link.html.twig

diff --git a/storybook/stories/components/Alert.stories.js b/storybook/stories/components/Alert.stories.js
index 0951e5282..de50e7135 100644
--- a/storybook/stories/components/Alert.stories.js
+++ b/storybook/stories/components/Alert.stories.js
@@ -35,7 +35,6 @@ export default {
       options: ["info", "success", "warning", "danger"],
     },
   },
-  includeStories: ["Default"],
 };
 
 export const Default = {
@@ -43,9 +42,30 @@ export const Default = {
     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",
   },
 };
 
diff --git a/views/templates/components/alert-action-form.html.twig b/views/templates/components/alert-action-form.html.twig
new file mode 100644
index 000000000..85598bbb7
--- /dev/null
+++ b/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>
diff --git a/views/templates/components/alert-action-link.html.twig b/views/templates/components/alert-action-link.html.twig
new file mode 100644
index 000000000..ecf36741c
--- /dev/null
+++ b/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>
diff --git a/views/templates/components/alert.html.twig b/views/templates/components/alert.html.twig
index ce7ba2bd6..d590374c1 100644
--- a/views/templates/components/alert.html.twig
+++ b/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 %}
diff --git a/views/templates/components/check-requirements.html.twig b/views/templates/components/check-requirements.html.twig
index 9d9cbf09a..d85d5fdea 100644
--- a/views/templates/components/check-requirements.html.twig
+++ b/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 %}
diff --git a/views/templates/components/local-archive.html.twig b/views/templates/components/local-archive.html.twig
index bef33f35c..a1f0b40ee 100644
--- a/views/templates/components/local-archive.html.twig
+++ b/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 %}
diff --git a/views/templates/steps/post-restore.html.twig b/views/templates/steps/post-restore.html.twig
index 7184dca79..0374f0d13 100644
--- a/views/templates/steps/post-restore.html.twig
+++ b/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">
diff --git a/views/templates/steps/post-update.html.twig b/views/templates/steps/post-update.html.twig
index bbb4215ca..8eb762215 100644
--- a/views/templates/steps/post-update.html.twig
+++ b/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">