Merge branch 'epic/ras-acc' of github.com:Automattic/newspack-plugin …

…into epic/ras-acc

assets/reader-activation-auth/auth-form.js

@@ -1,9 +1,9 @@
-/* globals newspack_reader_auth_labels */
+/* globals newspack_reader_activation_labels */
 
 /**
  * Internal dependencies.
  */
-import { domReady, formatTime } from './utils';
+import { domReady, formatTime } from '../utils';
 
 import './google-oauth';
 import './otp-input';
@@ -184,7 +184,7 @@ window.newspackRAS.push( function ( readerActivation ) {
 								} )
 									.then( () => {
 										messageContentElement.style.display = 'block';
-										messageContentElement.innerHTML = newspack_reader_auth_labels.code_resent;
+										messageContentElement.innerHTML = newspack_reader_activation_labels.code_resent;
 										container.setFormAction( 'otp' );
 										readerActivation.setOTPTimer();
 									} )
@@ -241,9 +241,9 @@ window.newspackRAS.push( function ( readerActivation ) {
 							container.authCallback( message, data );
 						}
 					} else {
-						let labels = newspack_reader_auth_labels.signin;
+						let labels = newspack_reader_activation_labels.signin;
 						if ( data?.registered ) {
-							labels = newspack_reader_auth_labels.register;
+							labels = newspack_reader_activation_labels.register;
 						}
 						container.setFormAction( 'success' );
 						container.querySelector( '.success-title' ).innerHTML = labels.success_title || '';
@@ -284,11 +284,11 @@ window.newspackRAS.push( function ( readerActivation ) {
 				const action = form.action?.value;
 
 				if ( ! form.npe?.value ) {
-					return form.endLoginFlow( newspack_reader_auth_labels.invalid_email, 400 );
+					return form.endLoginFlow( newspack_reader_activation_labels.invalid_email, 400 );
 				}
 
 				if ( 'pwd' === action && ! form.password?.value ) {
-					return form.endLoginFlow( newspack_reader_auth_labels.invalid_password, 400 );
+					return form.endLoginFlow( newspack_reader_activation_labels.invalid_password, 400 );
 				}
 
 				readerActivation
@@ -313,7 +313,7 @@ window.newspackRAS.push( function ( readerActivation ) {
 					.finally( () => {
 						const body = new FormData( ev.target );
 						if ( ! body.has( 'npe' ) || ! body.get( 'npe' ) ) {
-							return form.endLoginFlow( newspack_reader_auth_labels.invalid_email, 400 );
+							return form.endLoginFlow( newspack_reader_activation_labels.invalid_email, 400 );
 						}
 						if ( 'otp' === action ) {
 							readerActivation

assets/reader-activation-auth/auth-modal.js

@@ -1,4 +1,4 @@
-/* globals newspack_reader_auth_labels */
+/* globals newspack_reader_activation_labels */
 export const SIGN_IN_MODAL_HASHES = [ 'signin_modal', 'register_modal' ];
 
 /**
@@ -67,7 +67,7 @@ export function openAuthModal( config = {} ) {
 	}
 
 	config.labels = {
-		...newspack_reader_auth_labels,
+		...newspack_reader_activation_labels,
 		...config?.labels,
 	};
 

assets/reader-activation-auth/google-oauth.js

@@ -1,9 +1,9 @@
-/* globals newspack_reader_auth_labels */
+/* globals newspack_reader_activation_labels */
 
 /**
  * Internal dependencies.
  */
-import { domReady, convertFormDataToObject } from './utils';
+import { domReady, convertFormDataToObject } from '../utils';
 
 domReady( function () {
 	const loginsElements = document.querySelectorAll( '.newspack-reader__logins' );
@@ -71,13 +71,16 @@ domReady( function () {
 						const interval = setInterval( () => {
 							if ( ! googleOAuthSuccess && authWindow.closed ) {
 								if ( googleLoginForm?.endLoginFlow ) {
-									googleLoginForm.endLoginFlow( newspack_reader_auth_labels.login_canceled, 401 );
+									googleLoginForm.endLoginFlow(
+										newspack_reader_activation_labels.login_canceled,
+										401
+									);
 								}
 								clearInterval( interval );
 							}
 						}, 500 );
 					} else if ( googleLoginForm?.endLoginFlow ) {
-						googleLoginForm.endLoginFlow( newspack_reader_auth_labels.blocked_popup );
+						googleLoginForm.endLoginFlow( newspack_reader_activation_labels.blocked_popup );
 					}
 				} )
 				.catch( error => {

assets/reader-activation-auth/index.js

@@ -2,9 +2,10 @@
 /**
  * Internal dependencies
  */
-import { domReady } from './utils';
 import { SIGN_IN_MODAL_HASHES, getModalContainer, openAuthModal } from './auth-modal.js';
 
+import { domReady } from '../utils';
+
 import './auth-form.js';
 
 window.newspackRAS = window.newspackRAS || [];

assets/reader-activation-auth/otp-input.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies.
  */
-import { domReady } from './utils';
+import { domReady } from '../utils';
 
 domReady( function () {
 	/**

assets/reader-activation-newsletters/index.js

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { openNewslettersSignupModal } from './newsletters-modal';
+
+import { domReady } from '../utils';
+
+import './newsletters-form.js';
+
+window.newspackRAS = window.newspackRAS || [];
+window.newspackRAS.push( readerActivation => {
+	domReady( function () {
+		/** Expose the openNewslettersSignupModal function to the RAS scope */
+		readerActivation._openNewslettersSignupModal = openNewslettersSignupModal;
+	} );
+} );

assets/reader-activation-newsletters/newsletters-form.js

@@ -0,0 +1,62 @@
+/* globals newspack_reader_activation_newsletters */
+
+/**
+ * Internal dependencies.
+ */
+import { domReady } from '../utils';
+
+import './style.scss';
+
+window.newspackRAS = window.newspackRAS || [];
+window.newspackRAS.push( function ( readerActivation ) {
+	domReady( function () {
+		const containers = [ ...document.querySelectorAll( '.newspack-newsletters-signup' ) ];
+		if ( ! containers?.length ) {
+			return;
+		}
+
+		containers.forEach( container => {
+			const form = container.querySelector( 'form' );
+			if ( ! form ) {
+				return;
+			}
+
+			/**
+			 * Handle newsletters signup form submission.
+			 */
+			form.addEventListener( 'submit', ev => {
+				ev.preventDefault();
+
+				if ( form.classList.contains( 'processing' ) ) {
+					return;
+				}
+
+				form.classList.add( 'processing' );
+				form.querySelector( 'button' ).setAttribute( 'disabled', 'disabled' );
+
+				// Populate email if not already set.
+				const emailInput = form.querySelector( 'input[name="email_address"]' );
+				if ( emailInput && ! emailInput.value ) {
+					const reader = readerActivation?.getReader();
+					emailInput.value = reader?.email || '';
+				}
+
+				const data = new FormData( form );
+
+				data.append( 'action', 'newspack_reader_activation_newsletters_signup' );
+
+				// Ajax request.
+				fetch( newspack_reader_activation_newsletters.newspack_ajax_url, {
+					method: 'POST',
+					body: data,
+				} ).finally( () => {
+					if ( container?.newslettersSignupCallback ) {
+						container.newslettersSignupCallback();
+					}
+					form.classList.remove( 'processing' );
+					form.querySelector( 'button' ).removeAttribute( 'disabled' );
+				} );
+			} );
+		} );
+	} );
+} );

assets/reader-activation-newsletters/newsletters-modal.js

@@ -0,0 +1,91 @@
+/**
+ * Get the newsletters signup modal container.
+ *
+ * @return {HTMLElement} The modal container.
+ */
+export function getModalContainer() {
+	return document.querySelector(
+		'.newspack-newsletters-signup-modal .newspack-newsletters-signup'
+	);
+}
+
+/**
+ * Open the newsletters signup modal.
+ *
+ * @param {Object} config Configuration object.
+ *
+ * @return {void}
+ */
+export function openNewslettersSignupModal( config = {} ) {
+	const container = getModalContainer();
+	if ( ! container ) {
+		if ( config?.callback ) {
+			config.callback();
+		}
+		return;
+	}
+
+	const modal = container.closest( '.newspack-newsletters-signup-modal' );
+	if ( ! modal ) {
+		if ( config?.callback ) {
+			config.callback();
+		}
+		return;
+	}
+
+	const close = () => {
+		container.config = {};
+		modal.setAttribute( 'data-state', 'closed' );
+		if ( modal?.overlayId && window?.newspackReaderActivation?.overlays ) {
+			window.newspackReaderActivation.overlays.remove( modal.overlayId );
+		}
+		const openerContent = container.querySelector( '.opener-content' );
+		if ( openerContent ) {
+			openerContent.remove();
+		}
+	};
+
+	const closeButtons = modal.querySelectorAll( 'button[data-close], .newspack-ui__modal__close' );
+	if ( closeButtons?.length ) {
+		closeButtons.forEach( closeButton => {
+			closeButton.addEventListener( 'click', function ( ev ) {
+				ev.preventDefault();
+				close();
+			} );
+		} );
+	}
+
+	config.labels = {
+		...config?.labels,
+	};
+
+	/** Attach config to the container. */
+	container.config = config;
+
+	container.newslettersSignupCallback = ( message, data ) => {
+		close();
+		if ( config?.callback ) {
+			config.callback( message, data );
+		}
+	};
+
+	if ( config?.content ) {
+		const openerContent = document.createElement( 'div' );
+		openerContent.classList.add( 'opener-content' );
+		openerContent.innerHTML = config.content;
+		const form = container.querySelector( 'form' );
+		form.insertBefore( openerContent, form.firstChild );
+	}
+
+	// Populate email if not already set.
+	const emailInput = modal.querySelector( 'span.email' );
+	if ( emailInput && ! emailInput.innerText ) {
+		const reader = window?.newspackReaderActivation?.getReader();
+		emailInput.textContent = reader?.email || '';
+	}
+
+	modal.setAttribute( 'data-state', 'open' );
+	if ( window?.newspackReaderActivation?.overlays ) {
+		modal.overlayId = window.newspackReaderActivation.overlays.add();
+	}
+}

assets/reader-activation-newsletters/style.scss

@@ -0,0 +1,15 @@
+.newspack-newsletters-signup-modal {
+	.processing {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	p.details {
+		margin-bottom: 4px;
+	}
+
+	p.recipient {
+		margin-top: 0;
+	}
+}
+

assets/reader-activation/index.js

@@ -173,6 +173,34 @@ export function openAuthModal( config = {} ) {
 	}
 }
 
+/**
+ * Start the newsletter signup modal with an optional custom callback.
+ *
+ * @param {Object} config Config.
+ */
+export function openNewslettersSignupModal( config = {} ) {
+	// Set default config.
+	config = {
+		...{
+			callback: null,
+			initialState: null,
+			skipSuccess: false,
+			labels: {},
+			content: null,
+		},
+		...config,
+	};
+
+	if ( readerActivation?._openNewslettersSignupModal ) {
+		readerActivation._openNewslettersSignupModal( config );
+	} else {
+		console.warn( 'Newsletters signup modal not available' ); // eslint-disable-line no-console
+		if ( config?.callback ) {
+			config.callback();
+		}
+	}
+}
+
 /**
  * Get the reader's OTP hash for the current authentication request.
  *
@@ -387,6 +415,7 @@ const readerActivation = {
 	refreshAuthentication,
 	getReader,
 	openAuthModal,
+	openNewslettersSignupModal,
 	hasAuthLink,
 	getOTPHash,
 	setOTPTimer,