Render pay later blocks

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

@@ -1,13 +1,18 @@
 import {setVisible} from "../Helper/Hiding";
+import MessageRenderer from "../Renderer/MessageRenderer";
 
 class MessagesBootstrap {
     constructor(gateway, messageRenderer) {
         this.gateway = gateway;
-        this.renderer = messageRenderer;
+        this.renderers = [messageRenderer];
         this.lastAmount = this.gateway.messages.amount;
     }
 
     init() {
+        Array.from(document.querySelectorAll('.ppcp-paylater-message-block')).forEach(blockElement => {
+            this.renderers.push(new MessageRenderer({wrapper: '#' + blockElement.id}));
+        });
+
         jQuery(document.body).on('ppcp_cart_rendered ppcp_checkout_rendered', () => {
             this.render();
         });
@@ -27,28 +32,30 @@ class MessagesBootstrap {
         this.render();
     }
 
-    shouldShow() {
+    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());
-
-        if (!this.shouldRender()) {
+        this.renderers.forEach(renderer => {
+            const shouldShow = this.shouldShow(renderer);
+            setVisible(renderer.config.wrapper, shouldShow);
+            if (!shouldShow) {
                 return;
             }
 
-        this.renderer.renderWithAmount(this.lastAmount);
+            if (!renderer.shouldRender()) {
+                return;
+            }
+
+            renderer.renderWithAmount(this.lastAmount);
+        });
     }
 }
 

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

@@ -620,6 +620,10 @@ document.querySelector("#payment").before(document.querySelector("#ppcp-messages
 			return false;
 		}
 
+		if ( has_block( 'woocommerce-paypal-payments/paylater-messages' ) ) {
+			return true;
+		}
+
 		$location = $this->location();
 
 		$messaging_enabled_for_current_location = $this->settings_status->is_pay_later_messaging_enabled_for_location( $location );

modules/ppcp-paylater-block/block.json

@@ -8,6 +8,9 @@
 	"description": "Pay Later",
 	"example": {},
 	"attributes": {
+        "id": {
+            "type": "string"
+        },
         "layout": {
             "type": "string",
             "default": "flex"

modules/ppcp-paylater-block/resources/js/edit.js

@@ -1,11 +1,11 @@
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { PanelBody, SelectControl, Spinner } from '@wordpress/components';
 import { PayPalScriptProvider, PayPalMessages } from "@paypal/react-paypal-js";
 
-export default function Edit( { attributes, setAttributes } ) {
-    const { layout, logo, position, color, flexColor, flexRatio } = attributes;
+export default function Edit( { attributes, clientId, setAttributes } ) {
+    const { layout, logo, position, color, flexColor, flexRatio, id } = attributes;
     const isFlex = layout === 'flex';
 
     const [loaded, setLoaded] = useState(false);
@@ -22,6 +22,13 @@ export default function Edit( { attributes, setAttributes } ) {
             color,
         },
     };
+
+    useEffect(() => {
+        if (!id) {
+            setAttributes({id: 'ppcp-' + clientId});
+        }
+    }, []);
+
 	return (
 		<>
 			<InspectorControls>

modules/ppcp-paylater-block/resources/js/save.js

@@ -1,8 +1,8 @@
 import { useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-    const { layout, logo, position, color, flexColor, flexRatio } = attributes;
-    const dataAttributes = layout === 'flex' ? {
+    const { layout, logo, position, color, flexColor, flexRatio, id } = attributes;
+    const paypalAttributes = layout === 'flex' ? {
         'data-pp-style-layout': 'flex',
         'data-pp-style-color': flexColor,
         'data-pp-style-ratio': flexRatio,
@@ -14,7 +14,8 @@ export default function save( { attributes } ) {
     };
     const props = {
         className: 'ppcp-paylater-message-block',
-        ...dataAttributes,
+        id,
+        ...paypalAttributes,
     };
 
 	return <div { ...useBlockProps.save(props) }></div>;