Merge pull request #1441 from woocommerce/PCP-1762-cart-paylater-amount

Update Pay Later amount on the cart page and checkout when total changes

modules/ppcp-button/resources/js/button.js

@@ -164,6 +164,7 @@ const bootstrap = () => {
         const cartBootstrap = new CartBootstrap(
             PayPalCommerceGateway,
             renderer,
+            messageRenderer,
             errorHandler,
         );
 

modules/ppcp-button/resources/js/modules/ContextBootstrap/CartBootstap.js

@@ -3,10 +3,12 @@ import BootstrapHelper from "../Helper/BootstrapHelper";
 import {setVisible} from "../Helper/Hiding";
 
 class CartBootstrap {
-    constructor(gateway, renderer, errorHandler) {
+    constructor(gateway, renderer, messages, errorHandler) {
         this.gateway = gateway;
         this.renderer = renderer;
+        this.messages = messages;
         this.errorHandler = errorHandler;
+        this.lastAmount = this.gateway.messages.amount;
 
         this.renderer.onButtonsInit(this.gateway.button.wrapper, () => {
             this.handleButtonStatus();
@@ -38,11 +40,16 @@ class CartBootstrap {
                     return;
                 }
 
-                const newParams = result.data;
+                const newParams = result.data.url_params;
                 const reloadRequired = this.gateway.url_params.intent !== newParams.intent;
 
                 // TODO: should reload the script instead
                 setVisible(this.gateway.button.wrapper, !reloadRequired)
+
+                if (this.lastAmount !== result.data.amount) {
+                    this.lastAmount = result.data.amount;
+                    this.messages.renderWithAmount(this.lastAmount);
+                }
             });
         });
     }
@@ -76,6 +83,8 @@ class CartBootstrap {
         this.renderer.render(
             actionHandler.configuration()
         );
+
+        this.messages.renderWithAmount(this.lastAmount);
     }
 }
 

modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js

@@ -15,6 +15,7 @@ class CheckoutBootstap {
         this.messages = messages;
         this.spinner = spinner;
         this.errorHandler = errorHandler;
+        this.lastAmount = this.gateway.messages.amount;
 
         this.standardOrderButtonSelector = ORDER_BUTTON_SELECTOR;
 
@@ -36,6 +37,27 @@ class CheckoutBootstap {
         jQuery(document.body).on('updated_checkout', () => {
             this.render()
             this.handleButtonStatus();
+
+            if (this.shouldRenderMessages()) { // currently we need amount only for Pay Later
+                fetch(
+                    this.gateway.ajax.cart_script_params.endpoint,
+                    {
+                        method: 'GET',
+                        credentials: 'same-origin',
+                    }
+                )
+                    .then(result => result.json())
+                    .then(result => {
+                        if (! result.success) {
+                            return;
+                        }
+
+                        if (this.lastAmount !== result.data.amount) {
+                            this.lastAmount = result.data.amount;
+                            this.updateUi();
+                        }
+                    });
+            }
         });
 
         jQuery(document.body).on('updated_checkout payment_method_selected', () => {
@@ -117,8 +139,8 @@ class CheckoutBootstap {
             setVisible(wrapper, gatewayId === currentPaymentMethod);
         }
 
-        if (isPaypal && !isFreeTrial) {
+        if (this.shouldRenderMessages()) {
-            this.messages.render();
+            this.messages.renderWithAmount(this.lastAmount);
         }
 
         if (isCard) {
@@ -130,6 +152,12 @@ class CheckoutBootstap {
         }
     }
 
+    shouldRenderMessages() {
+        return getCurrentPaymentMethod() === PaymentMethods.PAYPAL
+            && !PayPalCommerceGateway.is_free_trial_cart
+            && this.messages.shouldRender();
+    }
+
     disableCreditCardFields() {
         jQuery('label[for="ppcp-credit-card-gateway-card-number"]').addClass('ppcp-credit-card-gateway-form-field-disabled')
         jQuery('#ppcp-credit-card-gateway-card-number').addClass('ppcp-credit-card-gateway-form-field-disabled')

modules/ppcp-button/resources/js/modules/Renderer/MessageRenderer.js

@@ -5,28 +5,6 @@ class MessageRenderer {
         this.optionsFingerprint = null;
     }
 
-    render() {
-        if (! this.shouldRender()) {
-            return;
-        }
-
-        const options = {
-            amount: this.config.amount,
-            placement: this.config.placement,
-            style: this.config.style
-        };
-
-        if (this.optionsEqual(options)) {
-            return;
-        }
-
-        paypal.Messages(options).render(this.config.wrapper);
-
-        jQuery(document.body).on('updated_cart_totals', () => {
-            paypal.Messages(options).render(this.config.wrapper);
-        });
-    }
-
     renderWithAmount(amount) {
         if (! this.shouldRender()) {
             return;

modules/ppcp-button/src/Endpoint/CartScriptParamsEndpoint.php

@@ -67,7 +67,12 @@ class CartScriptParamsEndpoint implements EndpointInterface {
 		try {
 			$script_data = $this->smart_button->script_data();
 
-			wp_send_json_success( $script_data['url_params'] );
+			wp_send_json_success(
+				array(
+					'url_params' => $script_data['url_params'],
+					'amount'     => WC()->cart->get_total( 'raw' ),
+				)
+			);
 
 			return true;
 		} catch ( Throwable $error ) {