@automattic/newspack-blocks 4.26.4 → 4.26.5-epic-editor-refactor.1

package/src/modal-checkout/checkout-button-trigger.test.js

@@ -0,0 +1,266 @@
+/**
+ * Tests for the checkout-button URL trigger resolution helpers.
+ */
+
+import { readCheckoutData, findCheckoutButtonForm, selectPickerForm, resolveCheckoutButtonForm, copyContextFields } from './checkout-button-trigger';
+
+const VARIATION_MODAL_CLASS_PREFIX = 'newspack-blocks__modal-variation';
+const IFRAME_NAME = 'newspack_modal_checkout_iframe';
+
+const PICKER_OPTIONS = {
+	variationModalClassPrefix: VARIATION_MODAL_CLASS_PREFIX,
+	iframeName: IFRAME_NAME,
+};
+
+/**
+ * Build a checkout button block markup string.
+ *
+ * @param {Object|null} checkoutData Object to JSON-encode into data-checkout, or null to omit it.
+ * @param {string}      label        Button label.
+ * @return {string} HTML.
+ */
+const checkoutButton = ( checkoutData, label = 'Buy' ) => {
+	const attr = checkoutData ? ` data-checkout='${ JSON.stringify( checkoutData ) }'` : '';
+	return `<div class="wp-block-newspack-blocks-checkout-button"><form${ attr }><button type="submit">${ label }</button></form></div>`;
+};
+
+/**
+ * Build a variation picker modal, mirroring Subscriptions_Tiers::render_form output:
+ * a single form with `target` set, radio inputs named product_id, and no data-checkout.
+ *
+ * @param {string}   productId Parent product id for the picker container.
+ * @param {string[]} radioIds  Radio values (variation/child ids).
+ * @return {string} HTML.
+ */
+const variationPicker = ( productId, radioIds ) => {
+	const radios = radioIds.map( id => `<input type="radio" name="product_id" value="${ id }">` ).join( '' );
+	return `<div class="${ VARIATION_MODAL_CLASS_PREFIX }" data-product-id="${ productId }"><form target="${ IFRAME_NAME }">${ radios }<button type="submit">Purchase</button></form></div>`;
+};
+
+const render = html => {
+	document.body.innerHTML = html;
+	return document.body;
+};
+
+afterEach( () => {
+	document.body.innerHTML = '';
+} );
+
+describe( 'readCheckoutData', () => {
+	it( 'parses a valid data-checkout attribute', () => {
+		const root = render( checkoutButton( { product_id: '1406', variation_id: '1408' } ) );
+		const form = root.querySelector( 'form' );
+		expect( readCheckoutData( form ) ).toEqual( { product_id: '1406', variation_id: '1408' } );
+	} );
+
+	it( 'returns null without throwing when the attribute is missing', () => {
+		const root = render( variationPicker( '1434', [ '158' ] ) );
+		const form = root.querySelector( 'form' );
+		expect( () => readCheckoutData( form ) ).not.toThrow();
+		expect( readCheckoutData( form ) ).toBeNull();
+	} );
+
+	it( 'returns null without throwing on malformed JSON', () => {
+		const root = render( '<div class="wp-block-newspack-blocks-checkout-button"><form data-checkout="not json">x</form></div>' );
+		const form = root.querySelector( 'form' );
+		expect( () => readCheckoutData( form ) ).not.toThrow();
+		expect( readCheckoutData( form ) ).toBeNull();
+	} );
+
+	it( 'returns null for a null form', () => {
+		expect( readCheckoutData( null ) ).toBeNull();
+	} );
+} );
+
+describe( 'findCheckoutButtonForm', () => {
+	it( 'requires both product_id and variation_id to match when a variation is requested', () => {
+		const root = render( checkoutButton( { product_id: '1406', variation_id: '1408', is_variable: true } ) );
+		const form = root.querySelector( 'form' );
+		expect( findCheckoutButtonForm( root, '1406', '1408' ) ).toBe( form );
+	} );
+
+	it( 'does NOT match a locked button for a different requested variation', () => {
+		const root = render( checkoutButton( { product_id: '1406', variation_id: '1408', is_variable: true } ) );
+		// Request 1407 while only the 1408-locked button exists.
+		expect( findCheckoutButtonForm( root, '1406', '1407' ) ).toBeNull();
+	} );
+
+	it( 'matches by product_id only when no variation is requested', () => {
+		const root = render( checkoutButton( { product_id: '1406', variation_id: '1408', is_variable: true } ) );
+		const form = root.querySelector( 'form' );
+		expect( findCheckoutButtonForm( root, '1406', null ) ).toBe( form );
+	} );
+
+	it( 'does not match a grouped button (no variation_id) for a variation request', () => {
+		const root = render( checkoutButton( { product_id: '1434' }, 'Buy grouped' ) );
+		expect( findCheckoutButtonForm( root, '1434', '158' ) ).toBeNull();
+	} );
+
+	it( 'skips forms with missing or invalid data-checkout without throwing', () => {
+		const root = render( variationPicker( '1406', [ '1408' ] ) + checkoutButton( { product_id: '1406', variation_id: '1408' } ) );
+		expect( () => findCheckoutButtonForm( root, '1406', '1408' ) ).not.toThrow();
+		expect( findCheckoutButtonForm( root, '1406', '1408' ) ).not.toBeNull();
+	} );
+} );
+
+describe( 'selectPickerForm', () => {
+	it( 'checks the radio matching the variation and returns the picker form', () => {
+		const root = render( variationPicker( '1406', [ '1407', '1408', '1409' ] ) );
+		const form = selectPickerForm( root, '1406', '1407', PICKER_OPTIONS );
+		expect( form ).toBe( root.querySelector( `.${ VARIATION_MODAL_CLASS_PREFIX } form` ) );
+		expect( root.querySelector( 'input[value="1407"]' ).checked ).toBe( true );
+		expect( root.querySelector( 'input[value="1408"]' ).checked ).toBe( false );
+	} );
+
+	it( 'returns null when no picker exists for the product', () => {
+		const root = render( variationPicker( '1434', [ '158' ] ) );
+		expect( selectPickerForm( root, '1406', '1407', PICKER_OPTIONS ) ).toBeNull();
+	} );
+
+	it( 'returns null when no radio matches the variation', () => {
+		const root = render( variationPicker( '1406', [ '1407', '1409' ] ) );
+		expect( selectPickerForm( root, '1406', '1408', PICKER_OPTIONS ) ).toBeNull();
+	} );
+
+	it( 'only selects radio inputs inside the checkout iframe form', () => {
+		const root = render(
+			`<div class="${ VARIATION_MODAL_CLASS_PREFIX }" data-product-id="1406">` +
+				'<form target="other_iframe"><input type="radio" name="product_id" value="1407"></form>' +
+				`<form target="${ IFRAME_NAME }">` +
+				'<input type="hidden" name="product_id" value="1407">' +
+				'<input type="radio" name="product_id" value="1408">' +
+				'</form>' +
+				'</div>'
+		);
+		const checkoutForm = root.querySelector( `form[target="${ IFRAME_NAME }"]` );
+
+		expect( selectPickerForm( root, '1406', '1407', PICKER_OPTIONS ) ).toBeNull();
+		expect( selectPickerForm( root, '1406', '1408', PICKER_OPTIONS ) ).toBe( checkoutForm );
+		expect( checkoutForm.querySelector( 'input[type="radio"][value="1408"]' ).checked ).toBe( true );
+	} );
+} );
+
+describe( 'resolveCheckoutButtonForm', () => {
+	it( 'returns the picker form for a non-locked variation rather than the locked checkout button', () => {
+		const root = render(
+			checkoutButton( { product_id: '1406', variation_id: '1408', is_variable: true }, 'Subscribe' ) +
+				variationPicker( '1406', [ '1407', '1408', '1409' ] )
+		);
+		const pickerForm = root.querySelector( `.${ VARIATION_MODAL_CLASS_PREFIX } form` );
+		const result = resolveCheckoutButtonForm( root, '1406', '1407', PICKER_OPTIONS );
+		expect( result ).toBe( pickerForm );
+		expect( root.querySelector( 'input[value="1407"]' ).checked ).toBe( true );
+	} );
+
+	it( 'returns the exact checkout button form when the requested variation is the locked one', () => {
+		const root = render(
+			checkoutButton( { product_id: '1406', variation_id: '1408', is_variable: true }, 'Subscribe' ) +
+				variationPicker( '1406', [ '1407', '1408', '1409' ] )
+		);
+		const buttonForm = root.querySelector( '.wp-block-newspack-blocks-checkout-button form' );
+		expect( resolveCheckoutButtonForm( root, '1406', '1408', PICKER_OPTIONS ) ).toBe( buttonForm );
+	} );
+
+	it( 'drives the grouped picker without throwing on its data-checkout-less form', () => {
+		const root = render( checkoutButton( { product_id: '1434' }, 'Buy grouped' ) + variationPicker( '1434', [ '158' ] ) );
+		const pickerForm = root.querySelector( `.${ VARIATION_MODAL_CLASS_PREFIX } form` );
+		let result;
+		expect( () => {
+			result = resolveCheckoutButtonForm( root, '1434', '158', PICKER_OPTIONS );
+		} ).not.toThrow();
+		expect( result ).toBe( pickerForm );
+		expect( root.querySelector( 'input[value="158"]' ).checked ).toBe( true );
+	} );
+
+	it( 'returns null for an invalid variation when product-only fallback is off (default)', () => {
+		const root = render( checkoutButton( { product_id: '158' }, 'Checkout' ) );
+		expect( resolveCheckoutButtonForm( root, '158', '160', PICKER_OPTIONS ) ).toBeNull();
+	} );
+
+	it( 'treats a variation_id equal to product_id as a strict variation request', () => {
+		const root = render( checkoutButton( { product_id: '158' }, 'Checkout' ) );
+		expect( resolveCheckoutButtonForm( root, '158', '158', PICKER_OPTIONS ) ).toBeNull();
+	} );
+
+	it( 'returns the product-only button for an invalid variation only when fallback is explicitly enabled', () => {
+		const root = render( checkoutButton( { product_id: '158' }, 'Checkout' ) );
+		const buttonForm = root.querySelector( 'form' );
+		expect( resolveCheckoutButtonForm( root, '158', '160', { ...PICKER_OPTIONS, allowProductOnlyFallback: true } ) ).toBe( buttonForm );
+	} );
+
+	it( 'matches a checkout button by product_id when no variation is requested', () => {
+		const root = render( checkoutButton( { product_id: '1406', variation_id: '1408', is_variable: true } ) );
+		const buttonForm = root.querySelector( 'form' );
+		expect( resolveCheckoutButtonForm( root, '1406', null, PICKER_OPTIONS ) ).toBe( buttonForm );
+	} );
+
+	it( 'returns null without throwing when nothing matches', () => {
+		const root = render( checkoutButton( { product_id: '999' } ) );
+		let result;
+		expect( () => {
+			result = resolveCheckoutButtonForm( root, '1406', '1407', PICKER_OPTIONS );
+		} ).not.toThrow();
+		expect( result ).toBeNull();
+	} );
+
+	it( 'copies block context from the source button into the picker form without submitting the locked button', () => {
+		const button = `<div class="wp-block-newspack-blocks-checkout-button"><form data-checkout='${ JSON.stringify( {
+			product_id: '1406',
+			variation_id: '1408',
+			is_variable: true,
+		} ) }'><input type="hidden" name="after_success_button_label" value="Thanks!"><input type="hidden" name="after_success_url" value="/welcome/"><button type="submit">Subscribe</button></form></div>`;
+		const root = render( button + variationPicker( '1406', [ '1407', '1408', '1409' ] ) );
+		const pickerForm = root.querySelector( `.${ VARIATION_MODAL_CLASS_PREFIX } form` );
+		const buttonForm = root.querySelector( '.wp-block-newspack-blocks-checkout-button form' );
+
+		const result = resolveCheckoutButtonForm( root, '1406', '1407', PICKER_OPTIONS );
+
+		expect( result ).toBe( pickerForm );
+		expect( result ).not.toBe( buttonForm );
+		expect( pickerForm.querySelector( 'input[name="after_success_button_label"]' ).value ).toBe( 'Thanks!' );
+		expect( pickerForm.querySelector( 'input[name="after_success_url"]' ).value ).toBe( '/welcome/' );
+	} );
+} );
+
+describe( 'copyContextFields', () => {
+	it( 'copies present source fields, skips missing ones, and does not overwrite existing target fields', () => {
+		const root = render(
+			`<form id="src"><input type="hidden" name="after_success_url" value="/welcome/"><input type="hidden" name="prompt_title" value="Join"></form>` +
+				`<form id="dst"><input type="hidden" name="prompt_title" value="Existing"></form>`
+		);
+		const source = root.querySelector( '#src' );
+		const target = root.querySelector( '#dst' );
+
+		copyContextFields( source, target );
+
+		// Copied from source.
+		expect( target.querySelector( 'input[name="after_success_url"]' ).value ).toBe( '/welcome/' );
+		// Not overwritten.
+		expect( target.querySelector( 'input[name="prompt_title"]' ).value ).toBe( 'Existing' );
+		// Missing on source -> not added.
+		expect( target.querySelector( 'input[name="gate_post_id"]' ) ).toBeNull();
+	} );
+
+	it( 'copies the last source value when a context field is duplicated', () => {
+		const root = render(
+			'<form id="src">' +
+				'<input type="hidden" name="after_success_url" value="/first/">' +
+				'<input type="hidden" name="after_success_url" value="/last/">' +
+				'</form>' +
+				'<form id="dst"></form>'
+		);
+		const source = root.querySelector( '#src' );
+		const target = root.querySelector( '#dst' );
+
+		copyContextFields( source, target );
+
+		expect( target.querySelector( 'input[name="after_success_url"]' ).value ).toBe( '/last/' );
+	} );
+
+	it( 'does not throw when source or target is null', () => {
+		const root = render( '<form id="dst"></form>' );
+		const target = root.querySelector( '#dst' );
+		expect( () => copyContextFields( null, target ) ).not.toThrow();
+		expect( () => copyContextFields( target, null ) ).not.toThrow();
+	} );
+} );

package/src/modal-checkout/modal.js

@@ -24,6 +24,7 @@ import {
 	getCheckoutData,
 	getFormattedAmount,
 } from './utils';
+import { resolveCheckoutButtonForm, readCheckoutData } from './checkout-button-trigger';
 
 const CLASS_PREFIX = newspackBlocksModal.newspack_class_prefix;
 const IFRAME_NAME = 'newspack_modal_checkout_iframe';
@@ -376,9 +377,8 @@ domReady( () => {
 					} );
 
 					// Append the product data hidden inputs.
-					const variationData = singleVariationForm.dataset.checkout;
-					if ( variationData ) {
-						const data = JSON.parse( variationData );
+					const data = readCheckoutData( singleVariationForm );
+					if ( data ) {
 						Object.keys( data ).forEach( key => {
 							const existingInputs = singleVariationForm.querySelectorAll( 'input[name="' + key + '"]' );
 							if ( 0 === existingInputs.length ) {
@@ -799,41 +799,29 @@ domReady( () => {
 	};
 
 	/**
-	 * Handle checkout button form triggers.
+	 * Handle checkout button URL triggers.
 	 *
-	 * @param {number}      productId   The product ID.
-	 * @param {number|null} variationId Optional. The variation ID.
+	 * @param {string}      productId   The product ID.
+	 * @param {string|null} variationId Optional. The variation ID.
+	 *
+	 * @return {boolean} Whether a matching form was submitted.
 	 */
 	const triggerCheckoutButtonForm = ( productId, variationId = null ) => {
-		let form;
-		if ( variationId && variationId !== productId ) {
-			const variationModals = document.querySelectorAll( `.${ VARIATON_MODAL_CLASS_PREFIX }` );
-			const variationModal = [ ...variationModals ].find( modal => modal.dataset.productId === productId );
-			if ( variationModal ) {
-				const forms = variationModal.querySelectorAll( `form[target="${ IFRAME_NAME }"]` );
-				forms.forEach( variationForm => {
-					const productData = JSON.parse( variationForm.dataset.checkout );
-					if ( productData?.variation_id === Number( variationId ) ) {
-						form = variationForm;
-					}
-				} );
-			}
-		} else {
-			const checkoutButtons = document.querySelectorAll( '.wp-block-newspack-blocks-checkout-button' );
-			checkoutButtons.forEach( button => {
-				const checkoutButtonForm = button.querySelector( 'form' );
-				if ( ! checkoutButtonForm ) {
-					return;
-				}
-				const productData = JSON.parse( checkoutButtonForm.dataset.checkout );
-				if ( productData?.product_id === productId ) {
-					form = checkoutButtonForm;
-				}
-			} );
-		}
+		const form = resolveCheckoutButtonForm( document, productId, variationId, {
+			variationModalClassPrefix: VARIATON_MODAL_CLASS_PREFIX,
+			iframeName: IFRAME_NAME,
+		} );
 		if ( form ) {
 			triggerFormSubmit( form );
-		}
+			return true;
+		}
+		const message =
+			`Newspack modal checkout: no checkout form found for product_id "${ productId }"` +
+			( variationId ? ` and variation_id "${ variationId }"` : '' ) +
+			'. The checkout was not triggered.';
+		// eslint-disable-next-line no-console
+		console.warn( message );
+		return false;
 	};
 
 	/**
@@ -844,6 +832,10 @@ domReady( () => {
 		if ( ! urlParams.has( 'checkout' ) ) {
 			return;
 		}
+		// Default to stripping the params after handling. The checkout button
+		// trigger overrides this so a link that matches no form stays visible
+		// and diagnosable rather than being silently dropped.
+		let shouldStripParams = true;
 		const type = urlParams.get( 'type' );
 		if ( type === 'donate' ) {
 			const layout = urlParams.get( 'layout' );
@@ -857,7 +849,13 @@ domReady( () => {
 			const productId = urlParams.get( 'product_id' );
 			const variationId = urlParams.get( 'variation_id' );
 			if ( productId ) {
-				triggerCheckoutButtonForm( productId, variationId );
+				shouldStripParams = triggerCheckoutButtonForm( productId, variationId );
+			} else {
+				// A checkout_button trigger with no product_id cannot resolve a
+				// form; keep the params visible rather than dropping them silently.
+				shouldStripParams = false;
+				// eslint-disable-next-line no-console
+				console.warn( 'Newspack modal checkout: checkout_button trigger is missing product_id. The checkout was not triggered.' );
 			}
 		} else {
 			const url = window.newspackReaderActivation?.getPendingCheckout?.();
@@ -866,8 +864,11 @@ domReady( () => {
 				triggerFormSubmit( form );
 			}
 		}
-		// Remove the URL param to prevent re-triggering.
-		window.history.replaceState( null, null, window.location.pathname );
+		// Remove the URL params to prevent re-triggering, but only when the
+		// trigger succeeded.
+		if ( shouldStripParams ) {
+			window.history.replaceState( null, null, window.location.pathname );
+		}
 	};
 	handleModalCheckoutUrlParams();
 

package/vendor/composer/installed.php

@@ -3,7 +3,7 @@
         'name' => 'automattic/newspack-blocks',
         'pretty_version' => 'dev-main',
         'version' => 'dev-main',
-        'reference' => 'e6af2c45db24228ad7eca429986c1b42e24605f9',
+        'reference' => 'd0609e32c676aa8d4a56dc527f306cc8d4f482a7',
         'type' => 'wordpress-plugin',
         'install_path' => __DIR__ . '/../../',
         'aliases' => array(),
@@ -13,7 +13,7 @@
         'automattic/newspack-blocks' => array(
             'pretty_version' => 'dev-main',
             'version' => 'dev-main',
-            'reference' => 'e6af2c45db24228ad7eca429986c1b42e24605f9',
+            'reference' => 'd0609e32c676aa8d4a56dc527f306cc8d4f482a7',
             'type' => 'wordpress-plugin',
             'install_path' => __DIR__ . '/../../',
             'aliases' => array(),

package/phpcs.xml

@@ -1,38 +0,0 @@
-<?xml version="1.0"?>
-<ruleset name="WordPress Coding Standards for Plugins">
-	<description>Generally-applicable sniffs for WordPress plugins</description>
-
-	<rule ref="WordPress-Extra" />
-	<rule ref="WordPress-Docs" />
-	<rule ref="WordPress-VIP-Go" />
-
-	<rule ref="WordPress">
-		<exclude name="Generic.Arrays.DisallowShortArraySyntax.Found" />
-		<exclude name="Universal.Arrays.DisallowShortArraySyntax.Found" />
-		<exclude name="Universal.Operators.DisallowStandalonePostIncrementDecrement.PostIncrementFound" />
-		<exclude name="Squiz.Functions.MultiLineFunctionDeclaration.SpaceAfterFunction" />
-		<exclude name="WordPress.PHP.YodaConditions.NotYoda" />
-		<exclude name="Generic.Formatting.MultipleStatementAlignment.NotSameWarning" />
-		<exclude name="Generic.CodeAnalysis.UnusedFunctionParameter.FoundAfterLastUsed" />
-		<exclude name="Universal.NamingConventions.NoReservedKeywordParameterNames" />
-		<exclude name="Generic.CodeAnalysis.UnusedFunctionParameter.Found" />
-	</rule>
-
-	<rule ref="PHPCompatibilityWP"/>
-	<config name="testVersion" value="7.2-"/>
-
-	<arg name="extensions" value="php"/>
-
-	<!-- Show sniff codes in all reports -->
-	<arg value="s"/>
-
-	<!-- Allow invoking just `phpcs` on command line without assuming STDIN for file input. -->
-	<file>.</file>
-
-	<exclude-pattern>*/dev-lib/*</exclude-pattern>
-	<exclude-pattern>*/node_modules/*</exclude-pattern>
-	<exclude-pattern>*/vendor/*</exclude-pattern>
-	<exclude-pattern>*/dist/*</exclude-pattern>
-	<exclude-pattern>*/release/*</exclude-pattern>
-	<exclude-pattern>*/tests/*</exclude-pattern>
-</ruleset>