Skip to content

Commit

Permalink
Mailalerts jQuery removed
Browse files Browse the repository at this point in the history
  • Loading branch information
@Oksydan
Oksydan committed Oct 30, 2023
1 parent 8dc66e2 commit 467658f
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 107 deletions.
212 changes: 113 additions & 99 deletions modules/ps_emailalerts/js/mailalerts.js
View file
Original file line number Diff line number Diff line change
@@ -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);
});
13 changes: 8 additions & 5 deletions modules/ps_emailalerts/views/templates/front/mailalerts-account-line.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions modules/ps_emailalerts/views/templates/hook/product-modal.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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'}
Expand Down

0 comments on commit 467658f

Please sign in to comment.