Add ButtonModuleWatcher

Adjustments for APM support

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

@@ -2,6 +2,7 @@ import {useEffect, useState} from '@wordpress/element';
 import {registerExpressPaymentMethod, registerPaymentMethod} from '@woocommerce/blocks-registry';
 import {paypalAddressToWc, paypalOrderToWcAddresses} from "./Helper/Address";
 import {loadPaypalScript} from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading'
+import buttonModuleWatcher from "../../../ppcp-button/resources/js/modules/ButtonModuleWatcher";
 
 const config = wc.wcSettings.getSetting('ppcp-gateway_data');
 
@@ -28,6 +29,7 @@ const PayPalComponent = ({
         if (!loaded) {
             loadPaypalScript(config.scriptData, () => {
                 setLoaded(true);
+                buttonModuleWatcher.registerContextBootstrap(config.scriptData.context, this);
             });
         }
     }, [loaded]);

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

@@ -19,6 +19,7 @@ import FreeTrialHandler from "./modules/ActionHandler/FreeTrialHandler";
 import FormSaver from './modules/Helper/FormSaver';
 import FormValidator from "./modules/Helper/FormValidator";
 import {loadPaypalScript} from "./modules/Helper/ScriptLoading";
+import buttonModuleWatcher from "./modules/ButtonModuleWatcher";
 
 // TODO: could be a good idea to have a separate spinner for each gateway,
 // but I think we care mainly about the script loading, so one spinner should be enough.
@@ -60,6 +61,11 @@ const bootstrap = () => {
         }
     });
 
+    const hasMessages = () => {
+        return PayPalCommerceGateway.messages.is_hidden === false
+            && document.querySelector(PayPalCommerceGateway.messages.wrapper);
+    }
+
     const onSmartButtonClick = async (data, actions) => {
         window.ppcpFundingSource = data.fundingSource;
         const requiredFields = jQuery('form.woocommerce-checkout .validate-required:visible :input');
@@ -146,6 +152,7 @@ const bootstrap = () => {
         );
 
         miniCartBootstrap.init();
+        buttonModuleWatcher.registerContextBootstrap('mini-cart', miniCartBootstrap);
     }
 
     if (
@@ -163,6 +170,7 @@ const bootstrap = () => {
         );
 
         singleProductBootstrap.init();
+        buttonModuleWatcher.registerContextBootstrap('product', singleProductBootstrap);
     }
 
     if (context === 'cart') {
@@ -174,6 +182,7 @@ const bootstrap = () => {
         );
 
         cartBootstrap.init();
+        buttonModuleWatcher.registerContextBootstrap('cart', cartBootstrap);
     }
 
     if (context === 'checkout') {
@@ -186,6 +195,7 @@ const bootstrap = () => {
         );
 
         checkoutBootstap.init();
+        buttonModuleWatcher.registerContextBootstrap('checkout', checkoutBootstap);
     }
 
     if (context === 'pay-now' ) {
@@ -197,15 +207,11 @@ const bootstrap = () => {
             errorHandler,
         );
         payNowBootstrap.init();
+        buttonModuleWatcher.registerContextBootstrap('pay-now', payNowBootstrap);
     }
 
 };
 
-const hasMessages = () => {
-    return PayPalCommerceGateway.messages.is_hidden === false
-        && document.querySelector(PayPalCommerceGateway.messages.wrapper);
-}
-
 document.addEventListener(
     'DOMContentLoaded',
     () => {

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

@@ -0,0 +1,31 @@
+
+class ButtonModuleWatcher {
+
+    constructor() {
+        this.contextBootstrapRegistry = {};
+        this.contextBootstrapWatchers = [];
+    }
+
+    watchContextBootstrap(callable) {
+        this.contextBootstrapWatchers.push(callable);
+        Object.values(this.contextBootstrapRegistry).forEach(callable);
+    }
+
+    registerContextBootstrap(context, handler) {
+        this.contextBootstrapRegistry[context] = {
+            context: context,
+            handler: handler
+        }
+
+        // Call registered watchers
+        for (const callable of this.contextBootstrapWatchers) {
+            callable(this.contextBootstrapRegistry[context]);
+        }
+    }
+
+}
+
+window.ppcpResources = window.ppcpResources || {};
+const buttonModuleWatcher = window.ppcpResources['ButtonModuleWatcher'] = window.ppcpResources['ButtonModuleWatcher'] || new ButtonModuleWatcher();
+
+export default buttonModuleWatcher;

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

@@ -1,5 +1,4 @@
 import {loadScript} from "@paypal/paypal-js";
-import widgetBuilder from "./Renderer/WidgetBuilder";
 
 const storageKey = 'ppcp-data-client-id';
 

modules/ppcp-button/src/Assets/SmartButton.php

@@ -480,11 +480,10 @@ class SmartButton implements SmartButtonInterface {
 						return;
 					}
 
-					echo '<p
+					echo '<p class="woocommerce-mini-cart__buttons buttons">';
-                                id="ppc-button-minicart"
+					echo '<span id="ppc-button-minicart"></span>';
-                                class="woocommerce-mini-cart__buttons buttons"
-                          ></p>';
 					do_action( 'woocommerce_paypal_payments_minicart_button_render' );
+					echo '</div>';
 				},
 				30
 			);

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

@@ -11,6 +11,7 @@ namespace WooCommerce\PayPalCommerce\Button\Endpoint;
 
 use Exception;
 use Psr\Log\LoggerInterface;
+use WooCommerce\PayPalCommerce\ApiClient\Entity\Money;
 use WooCommerce\PayPalCommerce\Button\Assets\SmartButton;
 
 /**
@@ -100,9 +101,16 @@ class SimulateCartEndpoint extends AbstractCartEndpoint {
 			$button_enabled              = $button_enabled && ! $this->smart_button->is_button_disabled( 'product', $context_data );
 		}
 
+		$base_location     = wc_get_base_location();
+		$shop_country_code = $base_location['country'];
+		$currency_code     = get_woocommerce_currency();
+
 		wp_send_json_success(
 			array(
 				'total'         => $total,
+				'total_str'     => ( new Money( $total, $currency_code ) )->value_str(),
+				'currency_code' => $currency_code,
+				'country_code'  => $shop_country_code,
 				'funding'       => array(
 					'paylater' => array(
 						'enabled' => $pay_later_enabled,