From 43b18dd5a0b9bee34f9aede444cf85ba10227c65 Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Fri, 13 Sep 2024 15:16:25 -0700 Subject: [PATCH 1/3] fix: make sure credit card fields aren't cleared --- includes/class-modal-checkout.php | 36 ++++++++++++++++++++++++- src/modal-checkout/index.js | 44 +++++++++++++++++++++++++++++++ 2 files changed, 79 insertions(+), 1 deletion(-) diff --git a/includes/class-modal-checkout.php b/includes/class-modal-checkout.php index a67f528b0..38fd427d9 100644 --- a/includes/class-modal-checkout.php +++ b/includes/class-modal-checkout.php @@ -100,6 +100,10 @@ public static function init() { add_filter( 'jetpack_active_modules', [ __CLASS__, 'jetpack_active_modules' ] ); add_filter( 'woocommerce_checkout_update_order_review_expired', [ __CLASS__, 'is_not_modal_checkout_filter' ] ); + // Make the current cart price available to the JavaScript. + add_action( 'wp_ajax_get_cart_total', [ __CLASS__, 'get_cart_total_js' ] ); + add_action( 'wp_ajax_nopriv_get_cart_total', [ __CLASS__, 'get_cart_total_js' ] ); + /** * Ensure that options to limit the number of subscriptions per product are respected. * Note: This is normally called only for regular checkout pages and REST API requests, @@ -591,6 +595,7 @@ public static function enqueue_scripts() { 'billing_details' => self::get_modal_checkout_labels( 'billing_details' ), 'shipping_details' => self::get_modal_checkout_labels( 'shipping_details' ), 'gift_recipient' => self::get_modal_checkout_labels( 'gift_recipient' ), + 'complete_button' => self::order_button_text_with_price(), ], ] ); @@ -1169,16 +1174,45 @@ public static function order_button_text( $text ) { if ( ! $cart || $cart->is_empty() ) { return $text; } + + return self::get_modal_checkout_labels( 'checkout_confirm' ); + } + + /** + * Get the updated "Place order" button text for JS updates. + */ + public static function order_button_text_with_price() { + $cart = \WC()->cart; + $is_donation = method_exists( 'Newspack\Donations', 'is_donation_cart' ) && \Newspack\Donations::is_donation_cart(); + + // If this isn't a cart, if the cart is empty, or if this is a donation product, bail. + if ( ! $cart || $cart->is_empty() || $is_donation ) { + return; + } + $total = \wp_strip_all_tags( \wc_price( $cart->total ) ); return sprintf( /* translators: 1: Checkout button confirmation text. 2: Order total. */ __( '%1$s: %2$s', 'newspack-blocks' ), self::get_modal_checkout_labels( 'checkout_confirm' ), - $total + '' . html_entity_decode( $total ) . '' ); } + /** + * Get the updated price for updating the "Place order" button. + */ + public static function get_cart_total_js() { + $cart = \WC()->cart; + if ( ! $cart || $cart->is_empty() ) { + return; + } + $total = \wp_strip_all_tags( \wc_price( $cart->total ) ); + echo esc_html( html_entity_decode( $total ) ); + wp_die(); + } + /** * Render before the checkout form. * diff --git a/src/modal-checkout/index.js b/src/modal-checkout/index.js index 008a5c3a8..58d56542b 100644 --- a/src/modal-checkout/index.js +++ b/src/modal-checkout/index.js @@ -128,6 +128,48 @@ domReady( $( '.payment_methods' ).after( $el ); } ); + /** + * Get updated cart total to update the "Place Order" button. + */ + function returnUpdatedCartTotal() { + let cartTotal; + $.ajax({ + url: newspackBlocksModalCheckout.ajax_url, + method: 'POST', + async: false, + data: { + action: 'get_cart_total', + }, + success: (response)=>{ + cartTotal = response; + } + }); + if ( cartTotal ) { + return cartTotal; + } + } + + $( document ).on( 'updated_checkout', function() { + // Update "Place Order" button to include current price. + let processOrderText = newspackBlocksModalCheckout.labels.complete_button; + if ( ! processOrderText ) { + return; + } + if ( $( '#place_order' ).hasClass( 'button-label-updated' ) ) { + // Modify button text to include updated price. + const tree = $( '
' + processOrderText + '
' ); + // Update the HTML in the .cart-price span with the new price, and return. + tree.find('.cart-price').html( returnUpdatedCartTotal, function() { + return this.childNodes; + } ); + processOrderText = tree.html(); + $( '#place_order' ).html( processOrderText ); + } else { + // Set default button label passed from PHP. + $( '#place_order' ).addClass( 'button-label-updated' ).html( processOrderText ); + } + } ); + /** * Handle gift options. */ @@ -292,6 +334,7 @@ domReady( }, } ); } + if ( $coupon.length ) { $coupon.on( 'submit', handleCouponSubmit ); $( document.body ).on( 'removed_coupon_in_checkout', () => { @@ -345,6 +388,7 @@ domReady( $nyp.find( 'h3, input[name="price"]' ).addClass( 'newspack-ui__field-error' ); } $( document.body ).trigger( 'update_checkout', { update_shipping_method: false } ); + }, complete: () => { unblockForm( $nyp ); From 24b0ee83f6097cf6d02feaf6bb74a088ac5aae05 Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Fri, 13 Sep 2024 15:19:27 -0700 Subject: [PATCH 2/3] fix: undo a couple code formatting changes --- src/modal-checkout/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/modal-checkout/index.js b/src/modal-checkout/index.js index 58d56542b..f9861d4bd 100644 --- a/src/modal-checkout/index.js +++ b/src/modal-checkout/index.js @@ -334,7 +334,6 @@ domReady( }, } ); } - if ( $coupon.length ) { $coupon.on( 'submit', handleCouponSubmit ); $( document.body ).on( 'removed_coupon_in_checkout', () => { @@ -388,7 +387,6 @@ domReady( $nyp.find( 'h3, input[name="price"]' ).addClass( 'newspack-ui__field-error' ); } $( document.body ).trigger( 'update_checkout', { update_shipping_method: false } ); - }, complete: () => { unblockForm( $nyp ); From 013161edda5b51a1aa8d32e4f0b5daafd5b50142 Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Wed, 18 Sep 2024 11:13:38 -0700 Subject: [PATCH 3/3] fix: improve function name for clarity --- src/modal-checkout/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/modal-checkout/index.js b/src/modal-checkout/index.js index f9861d4bd..7b9627e27 100644 --- a/src/modal-checkout/index.js +++ b/src/modal-checkout/index.js @@ -131,7 +131,7 @@ domReady( /** * Get updated cart total to update the "Place Order" button. */ - function returnUpdatedCartTotal() { + function getUpdatedCartTotal() { let cartTotal; $.ajax({ url: newspackBlocksModalCheckout.ajax_url, @@ -159,7 +159,7 @@ domReady( // Modify button text to include updated price. const tree = $( '
' + processOrderText + '
' ); // Update the HTML in the .cart-price span with the new price, and return. - tree.find('.cart-price').html( returnUpdatedCartTotal, function() { + tree.find('.cart-price').html( getUpdatedCartTotal, function() { return this.childNodes; } ); processOrderText = tree.html();