From ee1e6538dc09ed63e218121bb3e4a02f0cc5fa5f Mon Sep 17 00:00:00 2001
From: Alex P <alex.pantec@gmail.com>
Date: Thu, 7 Dec 2023 08:15:05 +0200
Subject: [PATCH] Set placement

---
 .../ContextBootstrap/MessagesBootstap.js        |  6 +++++-
 modules/ppcp-paylater-block/block.json          |  4 ++++
 .../ppcp-paylater-block/resources/js/edit.js    | 17 ++++++++++++++++-
 .../ppcp-paylater-block/resources/js/save.js    |  5 ++++-
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/MessagesBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/MessagesBootstap.js
index be593e615..bd11dfd81 100644
--- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/MessagesBootstap.js
+++ b/modules/ppcp-button/resources/js/modules/ContextBootstrap/MessagesBootstap.js
@@ -10,7 +10,11 @@ class MessagesBootstrap {
 
     init() {
         Array.from(document.querySelectorAll('.ppcp-paylater-message-block')).forEach(blockElement => {
-            this.renderers.push(new MessageRenderer({wrapper: '#' + blockElement.id}));
+            const config = {wrapper: '#' + blockElement.id};
+            if (!blockElement.getAttribute('data-pp-placement')) {
+                config.placement = this.gateway.messages.placement;
+            }
+            this.renderers.push(new MessageRenderer(config));
         });
 
         jQuery(document.body).on('ppcp_cart_rendered ppcp_checkout_rendered', () => {
diff --git a/modules/ppcp-paylater-block/block.json b/modules/ppcp-paylater-block/block.json
index 0c3d1b206..84e44ec45 100644
--- a/modules/ppcp-paylater-block/block.json
+++ b/modules/ppcp-paylater-block/block.json
@@ -34,6 +34,10 @@
         "flexRatio": {
             "type": "string",
             "default": "8x1"
+        },
+        "placement": {
+            "type": "string",
+            "default": "auto"
         }
 	},
 	"supports": {
diff --git a/modules/ppcp-paylater-block/resources/js/edit.js b/modules/ppcp-paylater-block/resources/js/edit.js
index c9a879b37..5ddbf76cb 100644
--- a/modules/ppcp-paylater-block/resources/js/edit.js
+++ b/modules/ppcp-paylater-block/resources/js/edit.js
@@ -5,7 +5,7 @@ import { PanelBody, SelectControl, Spinner } from '@wordpress/components';
 import { PayPalScriptProvider, PayPalMessages } from "@paypal/react-paypal-js";
 
 export default function Edit( { attributes, clientId, setAttributes } ) {
-    const { layout, logo, position, color, flexColor, flexRatio, id } = attributes;
+    const { layout, logo, position, color, flexColor, flexRatio, placement, id } = attributes;
     const isFlex = layout === 'flex';
 
     const [loaded, setLoaded] = useState(false);
@@ -99,6 +99,21 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
                         value={flexRatio}
                         onChange={(value) => setAttributes({flexRatio: value})}
                     />)}
+                    <SelectControl
+                        label={ __( 'Placement page', 'woocommerce-paypal-payments' ) }
+                        help={ __( 'Used for the analytics dashboard in the merchant account.', 'woocommerce-paypal-payments' ) }
+                        options={ [
+                            { label: __( 'Detect automatically', 'woocommerce-paypal-payments' ), value: 'auto' },
+                            { label: __( 'Cart', 'woocommerce-paypal-payments' ), value: 'cart' },
+                            { label: __( 'Payment', 'woocommerce-paypal-payments' ), value: 'payment' },
+                            { label: __( 'Product', 'woocommerce-paypal-payments' ), value: 'product' },
+                            { label: __( 'Product list', 'woocommerce-paypal-payments' ), value: 'product-list' },
+                            { label: __( 'Home', 'woocommerce-paypal-payments' ), value: 'home' },
+                            { label: __( 'Category', 'woocommerce-paypal-payments' ), value: 'category' },
+                        ] }
+                        value={ placement }
+                        onChange={ ( value ) => setAttributes( { placement: value } ) }
+                    />
 				</PanelBody>
 			</InspectorControls>
             <div {...useBlockProps({className: ['ppcp-paylater-block-preview', 'ppcp-overlay-parent']})}>
diff --git a/modules/ppcp-paylater-block/resources/js/save.js b/modules/ppcp-paylater-block/resources/js/save.js
index 9750d6797..0e221d29c 100644
--- a/modules/ppcp-paylater-block/resources/js/save.js
+++ b/modules/ppcp-paylater-block/resources/js/save.js
@@ -1,7 +1,7 @@
 import { useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-    const { layout, logo, position, color, flexColor, flexRatio, id } = attributes;
+    const { layout, logo, position, color, flexColor, flexRatio, placement, id } = attributes;
     const paypalAttributes = layout === 'flex' ? {
         'data-pp-style-layout': 'flex',
         'data-pp-style-color': flexColor,
@@ -12,6 +12,9 @@ export default function save( { attributes } ) {
         'data-pp-style-logo-position': position,
         'data-pp-style-text-color': color,
     };
+    if (placement && placement !== 'auto') {
+        paypalAttributes['data-pp-placement'] = placement;
+    }
     const props = {
         className: 'ppcp-paylater-message-block',
         id,