Update paylater amount in block cart/checkout

modules/ppcp-blocks/resources/js/Bootstrap/BlockCheckoutMessagesBootstrap.js

@@ -0,0 +1,55 @@
+import MessagesBootstrap from "../../../../ppcp-button/resources/js/modules/ContextBootstrap/MessagesBootstap";
+import {debounce} from "../Helper/debounce";
+
+class BlockCheckoutMessagesBootstrap {
+    constructor(scriptData) {
+        this.messagesBootstrap = new MessagesBootstrap(scriptData, null);
+        this.lastCartTotal = null;
+    }
+
+    init() {
+        this.messagesBootstrap.init();
+
+        this._updateCartTotal();
+
+        if (wp.data?.subscribe) {
+            wp.data.subscribe(debounce(() => {
+                this._updateCartTotal();
+            }, 300));
+        }
+    }
+
+    /**
+     * @private
+     */
+    _getCartTotal() {
+        if (!wp.data.select) {
+            return null;
+        }
+
+        const cart = wp.data.select('wc/store/cart')
+        if (!cart) {
+            return null;
+        }
+
+        const totals = cart.getCartTotals();
+        return parseInt(totals.total_price, 10) / 10 ** totals.currency_minor_unit;
+    }
+
+    /**
+     * @private
+     */
+    _updateCartTotal() {
+        const currentTotal = this._getCartTotal();
+        if (currentTotal === null) {
+            return;
+        }
+
+        if (currentTotal !== this.lastCartTotal) {
+            this.lastCartTotal = currentTotal;
+            jQuery(document.body).trigger('ppcp_block_cart_total_updated', [currentTotal]);
+        }
+    }
+}
+
+export default BlockCheckoutMessagesBootstrap;

modules/ppcp-blocks/resources/js/Helper/debounce.js

@@ -0,0 +1,9 @@
+export const debounce = (callback, delayMs) => {
+    let timeoutId = null;
+    return (...args) => {
+        window.clearTimeout(timeoutId);
+        timeoutId = window.setTimeout(() => {
+            callback.apply(null, args);
+        }, delayMs);
+    };
+};

modules/ppcp-blocks/resources/js/checkout-block.js

@@ -8,6 +8,7 @@ import {
     normalizeStyleForFundingSource
 } from '../../../ppcp-button/resources/js/modules/Helper/Style'
 import buttonModuleWatcher from "../../../ppcp-button/resources/js/modules/ButtonModuleWatcher";
+import BlockCheckoutMessagesBootstrap from "./Bootstrap/BlockCheckoutMessagesBootstrap";
 
 const config = wc.wcSettings.getSetting('ppcp-gateway_data');
 
@@ -38,6 +39,7 @@ const PayPalComponent = ({
 
     if (!paypalScriptLoaded) {
         if (!paypalScriptPromise) {
+            // for editor, since canMakePayment was not called
             paypalScriptPromise = loadPaypalScriptPromise(config.scriptData)
         }
         paypalScriptPromise.then(() => setPaypalScriptLoaded(true));
@@ -386,7 +388,11 @@ if (config.scriptData.continuation) {
             ariaLabel: config.title,
             canMakePayment: async () => {
                 if (!paypalScriptPromise) {
-                    paypalScriptPromise = loadPaypalScriptPromise(config.scriptData)
+                    paypalScriptPromise = loadPaypalScriptPromise(config.scriptData);
+                    paypalScriptPromise.then(() => {
+                        const messagesBootstrap = new BlockCheckoutMessagesBootstrap(config.scriptData);
+                        messagesBootstrap.init();
+                    });
                 }
                 await paypalScriptPromise;
 

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

@@ -4,8 +4,11 @@ import MessageRenderer from "../Renderer/MessageRenderer";
 class MessagesBootstrap {
     constructor(gateway, messageRenderer) {
         this.gateway = gateway;
-        this.renderers = [messageRenderer];
+        this.renderers = [];
         this.lastAmount = this.gateway.messages.amount;
+        if (messageRenderer) {
+            this.renderers.push(messageRenderer);
+        }
     }
 
     init() {
@@ -25,7 +28,7 @@ class MessagesBootstrap {
 
             this.render();
         });
-        jQuery(document.body).on('ppcp_cart_total_updated ppcp_checkout_total_updated ppcp_product_total_updated', (e, amount) => {
+        jQuery(document.body).on('ppcp_cart_total_updated ppcp_checkout_total_updated ppcp_product_total_updated ppcp_block_cart_total_updated', (e, amount) => {
             if (this.lastAmount !== amount) {
                 this.lastAmount = amount;