Merge pull request #1897 from woocommerce/PCP-1486-paylater-block

Add Pay Later Messaging block

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

@@ -1,13 +1,20 @@
 import {setVisible} from "../Helper/Hiding";
+import MessageRenderer from "../Renderer/MessageRenderer";
 
 class MessagesBootstrap {
     constructor(gateway, messageRenderer) {
         this.gateway = gateway;
-        this.renderer = messageRenderer;
+        this.renderers = [];
         this.lastAmount = this.gateway.messages.amount;
+        if (messageRenderer) {
+            this.renderers.push(messageRenderer);
+        }
     }
 
     init() {
+        if (this.gateway.messages?.block?.enabled) {
+            this.discoverBlocks();
+        }
         jQuery(document.body).on('ppcp_cart_rendered ppcp_checkout_rendered', () => {
             this.render();
         });
@@ -16,7 +23,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;
 
@@ -27,28 +34,40 @@ class MessagesBootstrap {
         this.render();
     }
 
-    shouldShow() {
+    discoverBlocks() {
+        Array.from(document.querySelectorAll('.ppcp-paylater-message-block')).forEach(blockElement => {
+            const config = {wrapper: '#' + blockElement.id};
+            if (!blockElement.getAttribute('data-pp-placement')) {
+                config.placement = this.gateway.messages.placement;
+            }
+            this.renderers.push(new MessageRenderer(config));
+        });
+    }
+
+    shouldShow(renderer) {
         if (this.gateway.messages.is_hidden === true) {
             return false;
         }
 
         const eventData = {result: true}
-        jQuery(document.body).trigger('ppcp_should_show_messages', [eventData]);
+        jQuery(document.body).trigger('ppcp_should_show_messages', [eventData, renderer.config.wrapper]);
         return eventData.result;
     }
 
-    shouldRender() {
-        return this.shouldShow() && this.renderer.shouldRender();
-    }
-
     render() {
-        setVisible(this.gateway.messages.wrapper, this.shouldShow());
+        this.renderers.forEach(renderer => {
+            const shouldShow = this.shouldShow(renderer);
+            setVisible(renderer.config.wrapper, shouldShow);
+            if (!shouldShow) {
+                return;
+            }
 
-        if (!this.shouldRender()) {
-            return;
-        }
+            if (!renderer.shouldRender()) {
+                return;
+            }
 
-        this.renderer.renderWithAmount(this.lastAmount);
+            renderer.renderWithAmount(this.lastAmount);
+        });
     }
 }
 

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

@@ -56,10 +56,12 @@ export const loadPaypalScript = (config, onLoaded, onError = null) => {
 
     // Build the PayPal script options.
     let scriptOptions = keysToCamelCase(config.url_params);
-    scriptOptions = merge(scriptOptions, config.script_attributes);
+    if (config.script_attributes) {
+        scriptOptions = merge(scriptOptions, config.script_attributes);
+    }
 
     // Load PayPal script for special case with data-client-token
-    if (config.data_client_id.set_attribute) {
+    if (config.data_client_id?.set_attribute) {
         dataClientIdAttributeHandler(scriptOptions, config.data_client_id, callback, errorCallback);
         return;
     }

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

@@ -15,9 +15,13 @@ class MessageRenderer {
 
         const options = {
             amount,
-            placement: this.config.placement,
-            style: this.config.style
         };
+        if (this.config.placement) {
+            options.placement = this.config.placement;
+        }
+        if (this.config.style) {
+            options.style = this.config.style;
+        }
 
         // sometimes the element is destroyed while the options stay the same
         if (document.querySelector(this.config.wrapper).getAttribute('data-render-number') !== this.currentNumber.toString()) {

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

@@ -32,6 +32,7 @@ use WooCommerce\PayPalCommerce\Button\Endpoint\ValidateCheckoutEndpoint;
 use WooCommerce\PayPalCommerce\Button\Helper\ContextTrait;
 use WooCommerce\PayPalCommerce\Button\Helper\MessagesApply;
 use WooCommerce\PayPalCommerce\Onboarding\Environment;
+use WooCommerce\PayPalCommerce\PayLaterBlock\PayLaterBlockModule;
 use WooCommerce\PayPalCommerce\Session\SessionHandler;
 use WooCommerce\PayPalCommerce\WcSubscriptions\FreeTrialHandlerTrait;
 use WooCommerce\PayPalCommerce\WcSubscriptions\Helper\SubscriptionHelper;
@@ -393,7 +394,7 @@ class SmartButton implements SmartButtonInterface {
 	 * @return bool
 	 */
 	private function render_message_wrapper_registrar(): bool {
-		if ( ! $this->settings_status->is_pay_later_messaging_enabled() ) {
+		if ( ! $this->settings_status->is_pay_later_messaging_enabled() || ! $this->settings_status->has_pay_later_messaging_locations() ) {
 			return false;
 		}
 
@@ -605,7 +606,7 @@ document.querySelector("#payment").before(document.querySelector("#ppcp-messages
 			case 'product':
 				return $smart_button_enabled_for_current_location || $smart_button_enabled_for_mini_cart;
 			default:
-				return $smart_button_enabled_for_mini_cart;
+				return $smart_button_enabled_for_mini_cart || $this->is_block_editor();
 		}
 	}
 
@@ -618,6 +619,10 @@ document.querySelector("#payment").before(document.querySelector("#ppcp-messages
 			return false;
 		}
 
+		if ( ! $this->settings_status->is_pay_later_messaging_enabled() ) {
+			return false;
+		}
+
 		if ( ! $this->messages_apply->for_country() || $this->is_free_trial_cart() ) {
 			return false;
 		}
@@ -626,6 +631,8 @@ document.querySelector("#payment").before(document.querySelector("#ppcp-messages
 
 		$messaging_enabled_for_current_location = $this->settings_status->is_pay_later_messaging_enabled_for_location( $location );
 
+		$has_paylater_block = has_block( 'woocommerce-paypal-payments/paylater-messages' ) && PayLaterBlockModule::is_enabled();
+
 		switch ( $location ) {
 			case 'checkout':
 			case 'cart':
@@ -634,8 +641,13 @@ document.querySelector("#payment").before(document.querySelector("#ppcp-messages
 			case 'shop':
 			case 'home':
 				return $messaging_enabled_for_current_location;
+			case 'block-editor':
+				return true;
+			case 'checkout-block':
+			case 'cart-block':
+				return $has_paylater_block || $this->is_block_editor();
 			default:
-				return false;
+				return $has_paylater_block;
 		}
 	}
 
@@ -843,9 +855,10 @@ document.querySelector("#payment").before(document.querySelector("#ppcp-messages
 		}
 
 		$product = wc_get_product();
-		$amount  = ( is_a( $product, WC_Product::class ) ) ? wc_get_price_including_tax( $product ) : 0;
-
-		if ( is_checkout() || is_cart() ) {
+		$amount  = 0;
+		if ( is_a( $product, WC_Product::class ) ) {
+			$amount = wc_get_price_including_tax( $product );
+		} elseif ( isset( WC()->cart ) ) {
 			$amount = WC()->cart->get_total( 'raw' );
 		}
 
@@ -863,6 +876,9 @@ document.querySelector("#payment").before(document.querySelector("#ppcp-messages
 		return array(
 			'wrapper'   => '#ppcp-messages',
 			'is_hidden' => ! $this->is_pay_later_filter_enabled_for_location( $this->context() ),
+			'block'     => array(
+				'enabled' => PayLaterBlockModule::is_enabled(),
+			),
 			'amount'    => $amount,
 			'placement' => $placement,
 			'style'     => array(
@@ -878,7 +894,6 @@ document.querySelector("#payment").before(document.querySelector("#ppcp-messages
 				'ratio'  => $ratio,
 			),
 		);
-
 	}
 
 	/**

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

@@ -12,7 +12,7 @@ namespace WooCommerce\PayPalCommerce\Button\Endpoint;
 use Psr\Log\LoggerInterface;
 use Throwable;
 use WooCommerce\PayPalCommerce\ApiClient\Entity\Money;
-use WooCommerce\PayPalCommerce\Button\Assets\SmartButton;
+use WooCommerce\PayPalCommerce\Button\Assets\SmartButtonInterface;
 
 /**
  * Class CartScriptParamsEndpoint.
@@ -25,7 +25,7 @@ class CartScriptParamsEndpoint implements EndpointInterface {
 	/**
 	 * The SmartButton.
 	 *
-	 * @var SmartButton
+	 * @var SmartButtonInterface
 	 */
 	private $smart_button;
 
@@ -39,11 +39,11 @@ class CartScriptParamsEndpoint implements EndpointInterface {
 	/**
 	 * CartScriptParamsEndpoint constructor.
 	 *
-	 * @param SmartButton     $smart_button he SmartButton.
-	 * @param LoggerInterface $logger The logger.
+	 * @param SmartButtonInterface $smart_button he SmartButton.
+	 * @param LoggerInterface      $logger The logger.
 	 */
 	public function __construct(
-		SmartButton $smart_button,
+		SmartButtonInterface $smart_button,
 		LoggerInterface $logger
 	) {
 		$this->smart_button = $smart_button;
@@ -73,6 +73,10 @@ class CartScriptParamsEndpoint implements EndpointInterface {
 			$include_shipping = (bool) wc_clean( wp_unslash( $_GET['shipping'] ?? '' ) ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended
 
 			$script_data = $this->smart_button->script_data();
+			if ( ! $script_data ) {
+				wp_send_json_error();
+				return false;
+			}
 
 			$total = (float) WC()->cart->get_total( 'numeric' );
 

modules/ppcp-button/src/Helper/ContextTrait.php

@@ -131,6 +131,10 @@ trait ContextTrait {
 			return 'add-payment-method';
 		}
 
+		if ( $this->is_block_editor() ) {
+			return 'block-editor';
+		}
+
 		return 'mini-cart';
 	}
 
@@ -207,4 +211,15 @@ trait ContextTrait {
 
 		return $page_id && is_page( $page_id ) && isset( $wp->query_vars['add-payment-method'] );
 	}
+
+	/**
+	 * Checks if it is the block editor page.
+	 */
+	protected function is_block_editor(): bool {
+		if ( ! function_exists( 'get_current_screen' ) ) {
+			return false;
+		}
+		$screen = get_current_screen();
+		return $screen && $screen->is_block_editor();
+	}
 }