diff --git a/assets/css/admin/facebook-for-woocommerce-whatsapp-utility.css b/assets/css/admin/facebook-for-woocommerce-whatsapp-utility.css index 5d3377513..ee48e3d32 100644 --- a/assets/css/admin/facebook-for-woocommerce-whatsapp-utility.css +++ b/assets/css/admin/facebook-for-woocommerce-whatsapp-utility.css @@ -200,8 +200,10 @@ } /* Modal footer */ .warning-modal-footer { + display: flex; + flex-direction: row-reverse; + gap: 10px; padding: 10px 0; - text-align: right; } /* Close button */ .warning-modal-close { @@ -251,3 +253,26 @@ display: flex; position: relative; } +.fbwa-spinner { + width: 8px; + height: 8px; + border: 2px solid white; + border-top: 2px solid transparent; + border-radius: 50%; + margin-right: 4px; + animation: spin 0.6s linear infinite; +} +@keyframes spin { + 100% { + transform: rotate(360deg); + } +} +.fbwa-button { + display: flex !important; /* Overrides wordpress button flex property */ + flex-direction: row; + align-items: center; +} +.fbwa-button-disabled { + cursor: not-allowed !important; /* Overrides wordpress cursor property */ + opacity: 0.7; +} diff --git a/assets/js/admin/whatsapp-disconnect.js b/assets/js/admin/whatsapp-disconnect.js index 91cbde3de..e3fbc491a 100644 --- a/assets/js/admin/whatsapp-disconnect.js +++ b/assets/js/admin/whatsapp-disconnect.js @@ -32,6 +32,12 @@ jQuery( document ).ready( function( $ ) { if (confirmButton) { // Handle confirm action confirmButton.onclick = function() { + var spinnerState = $('#wc-fb-disconnect-warning-modal-confirm-loading-state'); + var disconnectButton = $('#wc-fb-disconnect-warning-modal-confirm'); + var disconnectCancelBtn = $('#wc-fb-disconnect-warning-modal-cancel'); + spinnerState.show(); + disconnectButton.addClass('fbwa-button-disabled'); + disconnectCancelBtn.addClass('fbwa-button-disabled'); $.post( facebook_for_woocommerce_whatsapp_disconnect.ajax_url, { action: 'wc_facebook_disconnect_whatsapp', nonce: facebook_for_woocommerce_whatsapp_disconnect.nonce @@ -44,12 +50,14 @@ jQuery( document ).ready( function( $ ) { window.location.href = url.toString(); console.log( 'Whatsapp Disconnect Success', response ); } else { + spinnerState.hide(); + disconnectButton.removeClass('fbwa-button-disabled'); + disconnectCancelBtn.removeClass('fbwa-button-disabled'); console.log("Whatsapp Disconnect Failure!!!",response); } + // Close the modal + modal.style.display = "none"; } ); - - // Close the modal - modal.style.display = "none"; }; } diff --git a/assets/js/admin/whatsapp-events.js b/assets/js/admin/whatsapp-events.js index e83dfa202..f10aae2ce 100644 --- a/assets/js/admin/whatsapp-events.js +++ b/assets/js/admin/whatsapp-events.js @@ -44,6 +44,9 @@ jQuery(document).ready(function ($) { orderRefundedInactiveStatus.show(); } + var saveEventBtn = $('#woocommerce-whatsapp-save-order-confirmation'); + var cancelEventBtn = $('#woocommerce-whatsapp-cancel-order-confirmation'); + $('#woocommerce-whatsapp-manage-order-placed, #woocommerce-whatsapp-manage-order-fulfilled, #woocommerce-whatsapp-manage-order-refunded').click(function (event) { var clickedButtonId = $(event.target).attr("id"); let view = clickedButtonId.replace("woocommerce-whatsapp-", ""); @@ -131,10 +134,13 @@ jQuery(document).ready(function ($) { }); }); - $('#woocommerce-whatsapp-save-order-confirmation').click(function (event) { + saveEventBtn.click(function (event) { var languageValue = $("#manage-event-language").val(); var statusValue = $('input[name="template-status"]:checked').val(); - console.log('Save confirmation clicked: ', languageValue, statusValue); + var spinnerState = $('#woocommerce-whatsapp-save-loading-state'); + saveEventBtn.addClass('fbwa-button-disabled'); + cancelEventBtn.addClass('fbwa-button-disabled'); + spinnerState.show(); $.post(facebook_for_woocommerce_whatsapp_events.ajax_url, { action: 'wc_facebook_whatsapp_upsert_event_config', nonce: facebook_for_woocommerce_whatsapp_events.nonce, @@ -151,6 +157,9 @@ jQuery(document).ready(function ($) { console.log('Whatsapp Event Config has been updated', response); } else { + spinnerState.hide(); + saveEventBtn.removeClass('fbwa-button-disabled'); + cancelEventBtn.removeClass('fbwa-button-disabled'); console.log('Whatsapp Event Config Update failure', response); const message = facebook_for_woocommerce_whatsapp_finish.i18n.generic_error; const errorNoticeHtml = ` diff --git a/assets/js/admin/whatsapp-finish.js b/assets/js/admin/whatsapp-finish.js index 98d22e8ea..f43e94e76 100644 --- a/assets/js/admin/whatsapp-finish.js +++ b/assets/js/admin/whatsapp-finish.js @@ -8,8 +8,13 @@ */ jQuery( document ).ready( function( $ ) { + var doneBtn = $('#wc-whatsapp-onboarding-finish'); + // handle the whatsapp finish button click - $( '#wc-whatsapp-onboarding-finish' ).click( function( event ) { + doneBtn.click( function( event ) { + var spinnerState = $('#wc-whatsapp-onboarding-finish-loading-state'); + doneBtn.addClass('fbwa-button-disabled'); + spinnerState.show(); // call the connect API to create configs and check payment $.post( facebook_for_woocommerce_whatsapp_finish.ajax_url, { action: 'wc_facebook_whatsapp_finish_onboarding', @@ -46,6 +51,8 @@ jQuery( document ).ready( function( $ ) { `; $( '#payment-method-error-notice' ).html( errorNoticeHtml ).show(); + spinnerState.hide(); + doneBtn.removeClass('fbwa-button-disabled'); } } ); }); diff --git a/includes/Admin/Settings_Screens/Whatsapp_Utility.php b/includes/Admin/Settings_Screens/Whatsapp_Utility.php index 20684500c..fd7b3037e 100644 --- a/includes/Admin/Settings_Screens/Whatsapp_Utility.php +++ b/includes/Admin/Settings_Screens/Whatsapp_Utility.php @@ -335,10 +335,12 @@ class="button"
@@ -518,8 +520,11 @@ class="button button-primary" @@ -648,14 +653,16 @@ public function render_manage_events_view() {