diff --git a/modules/ppcp-button/resources/js/button.js b/modules/ppcp-button/resources/js/button.js index 8dc519a6c..945003bd5 100644 --- a/modules/ppcp-button/resources/js/button.js +++ b/modules/ppcp-button/resources/js/button.js @@ -28,7 +28,10 @@ const cardsSpinner = new Spinner('#ppcp-hosted-fields'); const bootstrap = () => { const checkoutFormSelector = 'form.woocommerce-checkout'; - const errorHandler = new ErrorHandler(PayPalCommerceGateway.labels.error.generic); + const errorHandler = new ErrorHandler( + PayPalCommerceGateway.labels.error.generic, + document.querySelector(checkoutFormSelector) ?? document.querySelector('.woocommerce-notices-wrapper') + ); const spinner = new Spinner(); const creditCardRenderer = new CreditCardRenderer(PayPalCommerceGateway, errorHandler, spinner); diff --git a/modules/ppcp-button/resources/js/modules/ActionHandler/CheckoutActionHandler.js b/modules/ppcp-button/resources/js/modules/ActionHandler/CheckoutActionHandler.js index e743f2083..6f28e8a2f 100644 --- a/modules/ppcp-button/resources/js/modules/ActionHandler/CheckoutActionHandler.js +++ b/modules/ppcp-button/resources/js/modules/ActionHandler/CheckoutActionHandler.js @@ -62,9 +62,9 @@ class CheckoutActionHandler { if (data.data.errors?.length > 0) { errorHandler.messages(data.data.errors); } else if (data.data.details?.length > 0) { - errorHandler.message(data.data.details.map(d => `${d.issue} ${d.description}`).join('
'), true); + errorHandler.message(data.data.details.map(d => `${d.issue} ${d.description}`).join('
')); } else { - errorHandler.message(data.data.message, true); + errorHandler.message(data.data.message); } } diff --git a/modules/ppcp-button/resources/js/modules/ErrorHandler.js b/modules/ppcp-button/resources/js/modules/ErrorHandler.js index c402aa751..726ef2074 100644 --- a/modules/ppcp-button/resources/js/modules/ErrorHandler.js +++ b/modules/ppcp-button/resources/js/modules/ErrorHandler.js @@ -1,47 +1,41 @@ class ErrorHandler { - constructor(genericErrorText) + /** + * @param {String} genericErrorText + * @param {Element} wrapper + */ + constructor(genericErrorText, wrapper) { this.genericErrorText = genericErrorText; - this.wrapper = document.querySelector('.woocommerce-notices-wrapper'); - this.messagesList = document.querySelector('ul.woocommerce-error'); + this.wrapper = wrapper; } genericError() { - if (this.wrapper.classList.contains('ppcp-persist')) { - return; - } this.clear(); this.message(this.genericErrorText) } appendPreparedErrorMessageElement(errorMessageElement) { - if (this.messagesList === null) { - this._prepareMessagesList(); - } - - this.messagesList.replaceWith(errorMessageElement); + this._getMessageContainer().replaceWith(errorMessageElement); } /** * @param {String} text - * @param {Boolean} persist */ - message(text, persist = false) + message(text) { - this._addMessage(text, persist); + this._addMessage(text); this._scrollToMessages(); } /** * @param {Array} texts - * @param {Boolean} persist */ - messages(texts, persist = false) + messages(texts) { - texts.forEach(t => this._addMessage(t, persist)); + texts.forEach(t => this._addMessage(t)); this._scrollToMessages(); } @@ -49,26 +43,17 @@ class ErrorHandler { /** * @private * @param {String} text - * @param {Boolean} persist */ - _addMessage(text, persist = false) + _addMessage(text) { if(! typeof String || text.length === 0) { throw new Error('A new message text must be a non-empty string.'); } - if (this.messagesList === null){ - this._prepareMessagesList(); - } + const messageContainer = this._getMessageContainer(); - if (persist) { - this.wrapper.classList.add('ppcp-persist'); - } else { - this.wrapper.classList.remove('ppcp-persist'); - } - - let messageNode = this._prepareMessagesListItem(text); - this.messagesList.appendChild(messageNode); + let messageNode = this._prepareMessageElement(text); + messageContainer.appendChild(messageNode); } /** @@ -76,26 +61,28 @@ class ErrorHandler { */ _scrollToMessages() { - jQuery.scroll_to_notices(jQuery('.woocommerce-notices-wrapper')); + jQuery.scroll_to_notices(jQuery('.woocommerce-error')); } /** * @private */ - _prepareMessagesList() + _getMessageContainer() { - if (this.messagesList === null) { - this.messagesList = document.createElement('ul'); - this.messagesList.setAttribute('class', 'woocommerce-error'); - this.messagesList.setAttribute('role', 'alert'); - this.wrapper.appendChild(this.messagesList); + let messageContainer = document.querySelector('ul.woocommerce-error'); + if (messageContainer === null) { + messageContainer = document.createElement('ul'); + messageContainer.setAttribute('class', 'woocommerce-error'); + messageContainer.setAttribute('role', 'alert'); + jQuery(this.wrapper).prepend(messageContainer); } + return messageContainer; } /** * @private */ - _prepareMessagesListItem(message) + _prepareMessageElement(message) { const li = document.createElement('li'); li.innerHTML = message; @@ -105,11 +92,7 @@ class ErrorHandler { clear() { - if (this.messagesList === null) { - return; - } - - this.messagesList.innerHTML = ''; + jQuery( '.woocommerce-error, .woocommerce-message' ).remove(); } } diff --git a/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js b/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js index 3eefb59ac..0ddafdd15 100644 --- a/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js +++ b/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js @@ -234,15 +234,15 @@ class CreditCardRenderer { this.errorHandler.clear(); if (err.data?.details?.length) { - this.errorHandler.message(err.data.details.map(d => `${d.issue} ${d.description}`).join('
'), true); + this.errorHandler.message(err.data.details.map(d => `${d.issue} ${d.description}`).join('
')); } else if (err.details?.length) { - this.errorHandler.message(err.details.map(d => `${d.issue} ${d.description}`).join('
'), true); + this.errorHandler.message(err.details.map(d => `${d.issue} ${d.description}`).join('
')); } else if (err.data?.errors?.length > 0) { this.errorHandler.messages(err.data.errors); } else if (err.data?.message) { - this.errorHandler.message(err.data.message, true); + this.errorHandler.message(err.data.message); } else if (err.message) { - this.errorHandler.message(err.message, true); + this.errorHandler.message(err.message); } else { this.errorHandler.genericError(); }