From baa3afeb9b30c8b92abcfdd5ef82a0c79ecb14f8 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 6 Dec 2023 17:31:56 +0200 Subject: [PATCH] Render pay later blocks --- .../ContextBootstrap/MessagesBootstap.js | 31 ++++++++++++------- .../js/modules/Renderer/MessageRenderer.js | 8 +++-- .../ppcp-button/src/Assets/SmartButton.php | 4 +++ modules/ppcp-paylater-block/block.json | 3 ++ .../ppcp-paylater-block/resources/js/edit.js | 13 ++++++-- .../ppcp-paylater-block/resources/js/save.js | 7 +++-- 6 files changed, 46 insertions(+), 20 deletions(-) diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/MessagesBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/MessagesBootstap.js index fe1c49438..be593e615 100644 --- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/MessagesBootstap.js +++ b/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()); + 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); + }); } } diff --git a/modules/ppcp-button/resources/js/modules/Renderer/MessageRenderer.js b/modules/ppcp-button/resources/js/modules/Renderer/MessageRenderer.js index b1261a466..489202e56 100644 --- a/modules/ppcp-button/resources/js/modules/Renderer/MessageRenderer.js +++ b/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()) { diff --git a/modules/ppcp-button/src/Assets/SmartButton.php b/modules/ppcp-button/src/Assets/SmartButton.php index f6a646388..63d43dc70 100644 --- a/modules/ppcp-button/src/Assets/SmartButton.php +++ b/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 ); diff --git a/modules/ppcp-paylater-block/block.json b/modules/ppcp-paylater-block/block.json index b900a160e..0c3d1b206 100644 --- a/modules/ppcp-paylater-block/block.json +++ b/modules/ppcp-paylater-block/block.json @@ -8,6 +8,9 @@ "description": "Pay Later", "example": {}, "attributes": { + "id": { + "type": "string" + }, "layout": { "type": "string", "default": "flex" diff --git a/modules/ppcp-paylater-block/resources/js/edit.js b/modules/ppcp-paylater-block/resources/js/edit.js index b98ee8224..ef38cb8cf 100644 --- a/modules/ppcp-paylater-block/resources/js/edit.js +++ b/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 ( <> diff --git a/modules/ppcp-paylater-block/resources/js/save.js b/modules/ppcp-paylater-block/resources/js/save.js index e1db30d8f..9750d6797 100644 --- a/modules/ppcp-paylater-block/resources/js/save.js +++ b/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
;