From 5f8dda098039db479268cda91ceb98c40c59024c Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Thu, 21 Nov 2024 19:10:02 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Implement=20PayPal=20connection=20v?=
 =?UTF-8?q?ia=20popup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/AdvancedOptionsForm.js         | 17 +++++++-
 .../resources/js/utils/window.js              | 42 +++++++++++++++++++
 2 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 modules/ppcp-settings/resources/js/utils/window.js

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js
index 79724a533..b18edc6fb 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js
@@ -8,6 +8,7 @@ import SettingsToggleBlock from '../../../ReusableComponents/SettingsToggleBlock
 import Separator from '../../../ReusableComponents/Separator';
 import DataStoreControl from '../../../ReusableComponents/DataStoreControl';
 import { CommonHooks } from '../../../../data';
+import { openPopup } from '../../../../utils/window';
 
 const AdvancedOptionsForm = ( { setCompleted } ) => {
 	const { isBusy } = CommonHooks.useBusyState();
@@ -87,9 +88,21 @@ const AdvancedOptionsForm = ( { setCompleted } ) => {
 			);
 			return;
 		}
+
+		const connectionUrl = res.data;
+		const popup = openPopup( connectionUrl );
+
+		if ( ! popup ) {
+			createErrorNotice(
+				__(
+					'Popup blocked. Please allow popups for this site to connect to PayPal.',
+					'woocommerce-paypal-payments'
+				)
+			);
+		}
 	};
 
-	const handleConnect = async () => {
+	const handleManualConnect = async () => {
 		if ( ! handleFormValidation() ) {
 			return;
 		}
@@ -183,7 +196,7 @@ const AdvancedOptionsForm = ( { setCompleted } ) => {
 					onChange={ setClientSecret }
 					type="password"
 				/>
-				<Button variant="secondary" onClick={ handleConnect }>
+				<Button variant="secondary" onClick={ handleManualConnect }>
 					{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
 				</Button>
 			</SettingsToggleBlock>
diff --git a/modules/ppcp-settings/resources/js/utils/window.js b/modules/ppcp-settings/resources/js/utils/window.js
new file mode 100644
index 000000000..165874302
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/utils/window.js
@@ -0,0 +1,42 @@
+/**
+ * Opens the provided URL, preferably in a popup window.
+ *
+ * Popups are usually only supported on desktop devices, when the browser is not in fullscreen mode.
+ *
+ * @param {string}  url
+ * @param {Object}  options
+ * @param {string}  options.name
+ * @param {number}  options.width
+ * @param {number}  options.height
+ * @param {boolean} options.resizeable
+ * @return {null|Window} Popup window instance, or null.
+ */
+export const openPopup = (
+	url,
+	{ name = '_blank', width = 450, height = 720, resizeable = false } = {}
+) => {
+	width = Math.max( 100, Math.min( window.screen.width - 40, width ) );
+	height = Math.max( 100, Math.min( window.screen.height - 40, height ) );
+
+	const left = ( window.screen.width - width ) / 2;
+	const top = ( window.screen.height - height ) / 2;
+
+	const features = [
+		`width=${ width }`,
+		`height=${ height }`,
+		`left=${ left }`,
+		`top=${ top }`,
+		`resizable=${ resizeable ? 'yes' : 'no' }`,
+		`scrollbars=yes`,
+		`status=no`,
+	];
+
+	const popup = window.open( url, name, features.join( ',' ) );
+
+	if ( popup && ! popup.closed ) {
+		popup.focus();
+		return popup;
+	}
+
+	return null;
+};