From 467658fcebc073b1dd2fb0ee2c0a21d87057ac0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20Ste=CC=A8pien=CC=81?= <igor@istepien.dev>
Date: Mon, 30 Oct 2023 23:35:48 +0100
Subject: [PATCH] Mailalerts jQuery removed

---
 modules/ps_emailalerts/js/mailalerts.js       | 212 ++++++++++--------
 .../front/mailalerts-account-line.tpl         |  13 +-
 .../views/templates/hook/product-modal.tpl    |   6 +-
 3 files changed, 124 insertions(+), 107 deletions(-)

diff --git a/modules/ps_emailalerts/js/mailalerts.js b/modules/ps_emailalerts/js/mailalerts.js
index ba003bfd..3a435b32 100644
--- a/modules/ps_emailalerts/js/mailalerts.js
+++ b/modules/ps_emailalerts/js/mailalerts.js
@@ -1,124 +1,138 @@
-/**
- * 2007-2020 PrestaShop.
- *
- * NOTICE OF LICENSE
- *
- * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
- * that is bundled with this package in the file LICENSE.txt.
- * It is also available through the world-wide-web at this URL:
- * https://opensource.org/licenses/AFL-3.0
- * If you did not receive a copy of the license and are unable to
- * obtain it through the world-wide-web, please send an email
- * to license@prestashop.com so we can send you a copy immediately.
- *
- * DISCLAIMER
- *
- * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
- * versions in the future. If you wish to customize PrestaShop for your
- * needs please refer to http://www.prestashop.com for more information.
- *
- * @author    PrestaShop SA <contact@prestashop.com>
- * @copyright 2007-2020 PrestaShop SA
- * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
- * International Registered Trademark & Property of PrestaShop SA
- */
-
-$(document).ready(function() {
-
-  $('#email-alert-modal').on('hidden.bs.modal', function() {
-    resetForm();
-    clearAlert();
-  })
 
-  $(document).on('click', '.js-mailalert-submit', function(e) {
-    e.preventDefault();
-    addNotification(e);
-  });
+DOMReady(() => {
+  const DOM_SELECTORS = {
+    ALERT_BLOCK: '.js-mailalert-alert-box',
+    FORM: '.js-mailalert',
+    SUBMIT_BTN: '.js-mailalert-submit',
+    EMAIL_INPUT: '.js-mailalert-email',
+    MODAL: '#email-alert-modal',
+    MODAL_BTN: '.js-mailalert-modal-btn',
+    REMOVE_BTN: '.js-remove-email-alert',
+    INPUT_ID_PRODUCT: '.js-mailalert-id-product',
+    INPUT_ID_PRODUCT_ATTRIBUTE: '.js-mailalert-id-product-attribute',
+    PRODUCT_MINIATURE: '.js-mailalert-product-miniature',
+  };
+
+  const clearAlert = () => {
+    each(DOM_SELECTORS.ALERT_BLOCK, (el) => el.innerHTML = '');
+  }
 
-  $('.js-remove-email-alert').on('click', function(e){
-    e.preventDefault();
+  const resetForm = () => {
+    each(DOM_SELECTORS.EMAIL_INPUT, (el) => el.value = '');
+    each(`${DOM_SELECTORS.FORM} [name=psgdpr_consent_checkbox]`, (el) => el.checked = false);
+  }
 
-    var $self = $(this);
-    var ids = $self.attr('rel').replace('js-id-emailalerts-', '');
-    ids = ids.split('-');
-    var id_product_mail_alert = ids[0];
-    var id_product_attribute_mail_alert = ids[1];
-    var $parent = $self.closest('.js-mailalert-product-miniature');
-
-    $.ajax({
-      url: $self.data('url'),
-      type: "POST",
-      data: {
-        'id_product': id_product_mail_alert,
-        'id_product_attribute': id_product_attribute_mail_alert
-      },
-      success: function(result)
-      {
-        if (result == '0')
-        {
-          $parent.fadeOut("normal", function()
-          {
-            $parent.remove();
-          });
-        }
-      }
-    });
-  });
+  const setAlert = (message, type) => {
+    const alertBox = document.querySelector(DOM_SELECTORS.ALERT_BLOCK);
+    const alert = parseToHtml(`<div class="alert alert-${type}">${message}</div>`);
 
-  function resetForm() {
-    $('.js-mailalert-email').val('');
-    $('.js-mailalert [name=psgdpr_consent_checkbox]').prop('checked', false);
-  }
+    if (type === 'success') {
+      alert.classList.add('alert-success');
+    } else if (type === 'danger') {
+      alert.classList.add('alert-danger');
+    }
 
-  function  addNotification(e) {
-    var $idInputs = $('.js-mailalert-id-input');
-    var $emailInput = $('.js-mailalert-email');
-    var $btn = $(e.currentTarget);
-    var $modal = $('#email-alert-modal');
+    alert.innerText = message;
 
-    $btn.attr('disabled', true);
+    alertBox?.append(alert);
+  }
+
+  const handleAddNotification = (email, idProduct, idProductAttribute) => {
+    const submitBtn = document.querySelector(DOM_SELECTORS.SUBMIT_BTN);
+    const form = document.querySelector(DOM_SELECTORS.FORM);
+    const url = form?.dataset.url;
 
+    submitBtn.setAttribute('disabled', true);
     clearAlert();
 
-    $.ajax({
-      type: 'POST',
-      url: $('.js-mailalert').data('url'),
-      data: 'id_product=' + $idInputs[0].value + '&id_product_attribute=' + $idInputs[1].value + '&customer_email=' + $emailInput.val(),
-      success: function (resp) {
-        resp = JSON.parse(resp);
-        var alertType = resp.error ? 'danger' : 'success';
 
-        setAlert(resp.message, alertType);
+    if (!url) {
+      return;
+    }
 
+    const { request } = useHttpRequest(url);
+
+    request
+      .query({
+        id_product: idProduct,
+        id_product_attribute: idProductAttribute,
+        customer_email: email,
+      })
+      .post()
+      .json((resp) => {
+        const alertType = resp.error ? 'danger' : 'success';
+
+        setAlert(resp.message, alertType);
 
         if (resp.error) {
-          $btn.removeAttr('disabled');
+          submitBtn.removeAttribute('disabled');
         } else {
-          setTimeout(function() {
-            $modal.modal('hide');
-            $('.js-mailalert-modal-btn').hide();
+          const modal = document.querySelector(DOM_SELECTORS.MODAL);
+
+          eventHandlerOff(modal, 'hidden.bs.modal', handleModalClose);
+          eventHandlerOn(modal, 'hidden.bs.modal', handleModalClose);
+
+          setTimeout(() => {
+            const modalInstance = bootstrap.Modal.getInstance(modal);
+            const modalBtn = document.querySelector(DOM_SELECTORS.MODAL_BTN);
+
+            modalInstance?.hide();
+            modalBtn?.classList.add('d-none');
           }, 2500);
         }
-      }
-    });
+      });
   }
 
-  function setAlert(message, type) {
-    var $alertBox = $('.js-mailalert-alert-box');
-    var $alert = $('<div>').addClass('alert');
+  const handleSubmitClick = (e) => {
+    e.preventDefault();
 
-    if (type == 'success') {
-      $alert.addClass('alert-success');
-    } else if (type == 'danger') {
-      $alert.addClass('alert-danger');
-    }
+    const inputIdProduct = document.querySelector(DOM_SELECTORS.INPUT_ID_PRODUCT);
+    const inputIdProductAttribute = document.querySelector(DOM_SELECTORS.INPUT_ID_PRODUCT_ATTRIBUTE);
+    const emailInput = document.querySelector(DOM_SELECTORS.EMAIL_INPUT);
+    const idProduct = inputIdProduct?.value;
+    const idProductAttribute = inputIdProductAttribute?.value || 0;
+    const email = emailInput?.value;
+
+    handleAddNotification(email, idProduct, idProductAttribute);
+  }
+
+  const handelRemoveNotification = (url, idProduct, idProductAttribute, elementToRemove) => {
+    const { request } = useHttpRequest(url);
+
+    request
+      .query({
+        id_product: idProduct,
+        id_product_attribute: idProductAttribute,
+      })
+      .post()
+      .json((resp) => {
+        if (resp != '0') {
+          return;
+        }
 
-    $alert.text(message);
+        if (elementToRemove) {
+          elementToRemove?.remove();
+        }
+      })
+  }
+
+  const handleRemoveClick = (e) => {
+    e.preventDefault();
+    const btn = e.delegateTarget;
 
-    $alertBox.html($alert)
+    const idProduct = btn.dataset.idProduct;
+    const idProductAttribute = btn.dataset.idProductAttribute;
+    const url = btn.dataset.url;
+    const elementToRemove = btn.closest(DOM_SELECTORS.PRODUCT_MINIATURE);
+
+    handelRemoveNotification(url, idProduct, idProductAttribute, elementToRemove);
   }
 
-  function clearAlert() {
-    $('.js-mailalert-alert-box').html('');
+  const handleModalClose = (e) => {
+    resetForm();
+    clearAlert();
   }
+
+  eventHandlerOn(document, 'click', DOM_SELECTORS.SUBMIT_BTN, handleSubmitClick);
+  eventHandlerOn(document, 'click', DOM_SELECTORS.REMOVE_BTN, handleRemoveClick);
 });
diff --git a/modules/ps_emailalerts/views/templates/front/mailalerts-account-line.tpl b/modules/ps_emailalerts/views/templates/front/mailalerts-account-line.tpl
index c142763c..90e24051 100644
--- a/modules/ps_emailalerts/views/templates/front/mailalerts-account-line.tpl
+++ b/modules/ps_emailalerts/views/templates/front/mailalerts-account-line.tpl
@@ -37,11 +37,14 @@
       <span class="font-size-sm">{$mailAlert.attributes_small}</span>
     </div>
     <div class="col-auto">
-      <a href="#"
-        title="{l s='Remove mail alert' d='Modules.Mailalerts.Shop'}"
-        class="js-remove-email-alert btn btn-link"
-        rel="js-id-emailalerts-{$mailAlert.id_product|intval}-{$mailAlert.id_product_attribute|intval}"
-        data-url="{url entity='module' name='ps_emailalerts' controller='actions' params=['process' => 'remove']}">
+      <a  href="#"
+          role="button"
+          title="{l s='Remove mail alert' d='Modules.Mailalerts.Shop'}"
+          class="js-remove-email-alert btn btn-link"
+          data-id-product="{$mailAlert.id_product|intval}"
+          data-id-product-attribute="{$mailAlert.id_product_attribute|intval}"
+          rel="js-id-emailalerts-{$mailAlert.id_product|intval}-{$mailAlert.id_product_attribute|intval}"
+          data-url="{url entity='module' name='ps_emailalerts' controller='actions' params=['process' => 'remove']}">
         <i class="material-icons">delete</i>
       </a>
     </div>
diff --git a/modules/ps_emailalerts/views/templates/hook/product-modal.tpl b/modules/ps_emailalerts/views/templates/hook/product-modal.tpl
index 03cc6188..8114e9a0 100644
--- a/modules/ps_emailalerts/views/templates/hook/product-modal.tpl
+++ b/modules/ps_emailalerts/views/templates/hook/product-modal.tpl
@@ -11,7 +11,7 @@
         {/block}
         {block name='modal_close'}
           <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
+            <span aria-hidden="true"></span>
           </button>
         {/block}
       </div>
@@ -40,8 +40,8 @@
         {if isset($id_module)}
           {hook h='displayGDPRConsent' id_module=$id_module}
         {/if}
-        <input class="js-mailalert-id-input" type="hidden" value="{$id_product}"/>
-        <input class="js-mailalert-id-input" type="hidden" value="{$id_product_attribute}"/>
+        <input class="js-mailalert-id-product" type="hidden" value="{$id_product}"/>
+        <input class="js-mailalert-id-product-attribute" type="hidden" value="{$id_product_attribute}"/>
       </div>
     {/block}
     {block name='modal_footer'}