From 6aeaff715953423255807367c0c466daf3a8fa6c Mon Sep 17 00:00:00 2001
From: Miguel Lezama <miguel@automattic.com>
Date: Wed, 10 Jul 2024 17:11:01 -0300
Subject: [PATCH] Newsletters: Enhance Subscription Modal Display Logic
 (#38079)

---
 .../update-subscribe-modal-behaviour          |  4 ++
 .../class-jetpack-subscribe-modal.php         | 26 +++++++++++--
 .../subscribe-modal/subscribe-modal.js        | 37 ++++++++++++++-----
 3 files changed, 54 insertions(+), 13 deletions(-)
 create mode 100644 projects/plugins/jetpack/changelog/update-subscribe-modal-behaviour

diff --git a/projects/plugins/jetpack/changelog/update-subscribe-modal-behaviour b/projects/plugins/jetpack/changelog/update-subscribe-modal-behaviour
new file mode 100644
index 0000000000000..bf64fb0e25106
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-subscribe-modal-behaviour
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Implemented a more dynamic approach to displaying the subscription modal
diff --git a/projects/plugins/jetpack/modules/subscriptions/subscribe-modal/class-jetpack-subscribe-modal.php b/projects/plugins/jetpack/modules/subscriptions/subscribe-modal/class-jetpack-subscribe-modal.php
index aa5d1febb7ee0..638c5c6150eaa 100644
--- a/projects/plugins/jetpack/modules/subscriptions/subscribe-modal/class-jetpack-subscribe-modal.php
+++ b/projects/plugins/jetpack/modules/subscriptions/subscribe-modal/class-jetpack-subscribe-modal.php
@@ -64,17 +64,35 @@ public function enqueue_assets() {
 			wp_enqueue_script( 'subscribe-modal-js', plugins_url( 'subscribe-modal.js', __FILE__ ), array( 'wp-dom-ready' ), JETPACK__VERSION, true );
 
 			/**
-			 * Filter how many milliseconds a user must scroll for until the Subscribe Modal appears.
+			 * Filter how many milliseconds until the Subscribe Modal appears.
 			 *
 			 * @module subscriptions
 			 *
 			 * @since 13.4
 			 *
-			 * @param int 300 Time in milliseconds for the Subscribe Modal to appear upon scrolling.
+			 * @param int 60000 Time in milliseconds for the Subscribe Modal to appear.
 			 */
-			$load_time = absint( apply_filters( 'jetpack_subscribe_modal_load_time', 300 ) );
+			$load_time = absint( apply_filters( 'jetpack_subscribe_modal_load_time', 60000 ) );
 
-			wp_localize_script( 'subscribe-modal-js', 'Jetpack_Subscriptions', array( 'modalLoadTime' => $load_time ) );
+			/**
+			 * Filter how many percentage of the page should be scrolled before the Subscribe Modal appears.
+			 *
+			 * @module subscriptions
+			 *
+			 * @since 13.6
+			 *
+			 * @param int Percentage of the page scrolled before the Subscribe Modal appears.
+			 */
+			$scroll_threshold = absint( apply_filters( 'jetpack_subscribe_modal_scroll_threshold', 50 ) );
+
+			wp_localize_script(
+				'subscribe-modal-js',
+				'Jetpack_Subscriptions',
+				array(
+					'modalLoadTime'        => $load_time,
+					'modalScrollThreshold' => $scroll_threshold,
+				)
+			);
 		}
 	}
 
diff --git a/projects/plugins/jetpack/modules/subscriptions/subscribe-modal/subscribe-modal.js b/projects/plugins/jetpack/modules/subscriptions/subscribe-modal/subscribe-modal.js
index 3dca3a92b7830..f363afba5e862 100644
--- a/projects/plugins/jetpack/modules/subscriptions/subscribe-modal/subscribe-modal.js
+++ b/projects/plugins/jetpack/modules/subscriptions/subscribe-modal/subscribe-modal.js
@@ -12,17 +12,35 @@ domReady( function () {
 	}
 
 	let hasLoaded = false;
-	let isScrolling;
+	const targetElement = (
+		document.querySelector( '.entry-content' ) || document.documentElement
+	).getBoundingClientRect();
 
-	window.onscroll = function () {
-		window.clearTimeout( isScrolling );
+	function hasPassedScrollThreshold() {
+		const scrollPosition = window.scrollY + window.innerHeight / 2;
+		const scrollPositionThreshold =
+			targetElement.top +
+			( targetElement.height * Jetpack_Subscriptions.modalScrollThreshold ) / 100;
+		return scrollPosition > scrollPositionThreshold;
+	}
 
-		isScrolling = setTimeout( function () {
-			if ( ! hasLoaded ) {
-				openModal();
-			}
-		}, Jetpack_Subscriptions.modalLoadTime );
-	};
+	function onScroll() {
+		if ( ! hasLoaded ) {
+			requestAnimationFrame( () => {
+				if ( hasPassedScrollThreshold() ) {
+					openModal();
+				}
+			} );
+		}
+	}
+
+	window.addEventListener( 'scroll', onScroll, { passive: true } );
+
+	setTimeout( () => {
+		if ( ! hasLoaded ) {
+			openModal();
+		}
+	}, Jetpack_Subscriptions.modalLoadTime );
 
 	// When the form is submitted, and next modal loads, it'll fire "subscription-modal-loaded" signalling that this form can be hidden.
 	const form = modal.querySelector( 'form' );
@@ -57,6 +75,7 @@ domReady( function () {
 		hasLoaded = true;
 		setModalDismissedCookie();
 		window.addEventListener( 'keydown', closeModalOnEscapeKeydown );
+		window.removeEventListener( 'scroll', onScroll );
 	}
 
 	function closeModal() {