@automattic/newspack-blocks 4.31.1 → 4.32.0-alpha.2

package/src/components/specific-posts-control.test.js

@@ -0,0 +1,173 @@
+/**
+ * External dependencies
+ */
+import { act, fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import SpecificPostsControl from './specific-posts-control';
+
+const noop = () => {};
+const noItems = () => Promise.resolve( [] );
+
+const ITEMS = [
+	{ value: 11, label: 'Alpha' },
+	{ value: 22, label: 'Beta' },
+];
+
+const titles = () => Array.from( document.querySelectorAll( '.newspack-blocks-reorder-modal__title' ) ).map( el => el.textContent );
+
+describe( 'SpecificPostsControl', () => {
+	it( 'exposes the token field to assistive technology as "Content"', () => {
+		render( <SpecificPostsControl postIds={ [] } onChange={ noop } fetchSuggestions={ noop } fetchSavedInfo={ noop } /> );
+		expect( screen.getByRole( 'combobox', { name: 'Content' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'keeps the reorder button focusable while too little content is selected', async () => {
+		render( <SpecificPostsControl postIds={ [ 11 ] } onChange={ noop } fetchSuggestions={ noop } fetchSavedInfo={ noItems } /> );
+		const reorder = await screen.findByRole( 'button', { name: 'Reorder Content' } );
+		expect( reorder ).toHaveAttribute( 'aria-disabled', 'true' );
+		reorder.focus();
+		expect( document.activeElement ).toBe( reorder );
+	} );
+
+	it( 'describes why the reorder button is unavailable without renaming it', async () => {
+		render( <SpecificPostsControl postIds={ [ 11 ] } onChange={ noop } fetchSuggestions={ noop } fetchSavedInfo={ noItems } /> );
+		const reorder = await screen.findByRole( 'button', { name: 'Reorder Content' } );
+		const description = document.getElementById( reorder.getAttribute( 'aria-describedby' ) );
+		expect( description ).toHaveTextContent( 'Pick at least two items to reorder them.' );
+	} );
+
+	// A button with visible children shows no tooltip by default, so the reason
+	// would otherwise reach assistive technology only.
+	it( 'shows the reason to sighted users too', async () => {
+		render( <SpecificPostsControl postIds={ [ 11 ] } onChange={ noop } fetchSuggestions={ noop } fetchSavedInfo={ noItems } /> );
+		( await screen.findByRole( 'button', { name: 'Reorder Content' } ) ).focus();
+		expect( await screen.findByRole( 'tooltip' ) ).toHaveTextContent( 'Pick at least two items to reorder them.' );
+	} );
+
+	it( 'shows no tooltip once the button is usable', async () => {
+		render(
+			<SpecificPostsControl
+				postIds={ [ 11, 22 ] }
+				onChange={ noop }
+				fetchSuggestions={ noop }
+				fetchSavedInfo={ () => Promise.resolve( ITEMS ) }
+			/>
+		);
+		( await screen.findByRole( 'button', { name: 'Reorder Content' } ) ).focus();
+		expect( screen.queryByRole( 'tooltip' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'enables the reorder button once two items are selected', async () => {
+		render(
+			<SpecificPostsControl
+				postIds={ [ 11, 22 ] }
+				onChange={ noop }
+				fetchSuggestions={ noop }
+				fetchSavedInfo={ () => Promise.resolve( ITEMS ) }
+			/>
+		);
+		expect( await screen.findByRole( 'button', { name: 'Reorder Content' } ) ).not.toHaveAttribute( 'aria-disabled' );
+	} );
+
+	it( 'writes the reordered IDs back through onChange', async () => {
+		const onChange = jest.fn();
+		render(
+			<SpecificPostsControl
+				postIds={ [ 11, 22 ] }
+				onChange={ onChange }
+				fetchSuggestions={ noop }
+				fetchSavedInfo={ () => Promise.resolve( ITEMS ) }
+			/>
+		);
+
+		fireEvent.click( await screen.findByRole( 'button', { name: 'Reorder Content' } ) );
+		await screen.findByLabelText( 'Move Up: Beta' );
+		expect( titles() ).toEqual( [ 'Alpha', 'Beta' ] );
+
+		fireEvent.click( screen.getByLabelText( 'Move Up: Beta' ) );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Save' } ) );
+
+		expect( onChange ).toHaveBeenCalledWith( [ 22, 11 ] );
+		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'closes the modal without changing anything when the reorder is cancelled', async () => {
+		const onChange = jest.fn();
+		render(
+			<SpecificPostsControl
+				postIds={ [ 11, 22 ] }
+				onChange={ onChange }
+				fetchSuggestions={ noop }
+				fetchSavedInfo={ () => Promise.resolve( ITEMS ) }
+			/>
+		);
+
+		fireEvent.click( await screen.findByRole( 'button', { name: 'Reorder Content' } ) );
+		await screen.findByLabelText( 'Move Up: Beta' );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Cancel' } ) );
+
+		expect( onChange ).not.toHaveBeenCalled();
+		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'asks for the titles once and shares them with the modal', async () => {
+		const fetchSavedInfo = jest.fn( () => Promise.resolve( ITEMS ) );
+		render( <SpecificPostsControl postIds={ [ 11, 22 ] } onChange={ noop } fetchSuggestions={ noop } fetchSavedInfo={ fetchSavedInfo } /> );
+
+		fireEvent.click( await screen.findByRole( 'button', { name: 'Reorder Content' } ) );
+		await screen.findByLabelText( 'Move Up: Beta' );
+
+		expect( fetchSavedInfo ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	describe( 'when a request fails', () => {
+		let errorSpy;
+
+		beforeEach( () => {
+			errorSpy = jest.spyOn( console, 'error' ).mockImplementation( () => {} );
+		} );
+
+		afterEach( () => {
+			errorSpy.mockRestore();
+		} );
+
+		it( 'asks again rather than sharing the failure', async () => {
+			const fetchSavedInfo = jest.fn().mockRejectedValueOnce( new Error( 'unreachable' ) ).mockResolvedValue( ITEMS );
+			render( <SpecificPostsControl postIds={ [ 11, 22 ] } onChange={ noop } fetchSuggestions={ noop } fetchSavedInfo={ fetchSavedInfo } /> );
+
+			// The token field falls back to the IDs, which is where the failure lands.
+			await screen.findByText( '11' );
+
+			fireEvent.click( screen.getByRole( 'button', { name: 'Reorder Content' } ) );
+			expect( await screen.findByLabelText( 'Move Up: Beta' ) ).toBeInTheDocument();
+			expect( fetchSavedInfo ).toHaveBeenCalledTimes( 2 );
+		} );
+
+		it( 'leaves a newer request in place when an older one fails late', async () => {
+			let failFirst;
+			const first = new Promise( ( resolve, reject ) => {
+				failFirst = reject;
+			} );
+			const fetchSavedInfo = jest.fn().mockReturnValueOnce( first ).mockResolvedValue( ITEMS );
+			const props = { onChange: noop, fetchSuggestions: noop, fetchSavedInfo };
+			const { rerender } = render( <SpecificPostsControl postIds={ [ 11 ] } { ...props } /> );
+
+			rerender( <SpecificPostsControl postIds={ [ 11, 22 ] } { ...props } /> );
+			fireEvent.click( screen.getByRole( 'button', { name: 'Reorder Content' } ) );
+			await screen.findByLabelText( 'Move Up: Beta' );
+
+			await act( async () => {
+				failFirst( new Error( 'too late' ) );
+			} );
+
+			fireEvent.click( screen.getByRole( 'button', { name: 'Cancel' } ) );
+			fireEvent.click( screen.getByRole( 'button', { name: 'Reorder Content' } ) );
+			await screen.findByLabelText( 'Move Up: Beta' );
+
+			expect( fetchSavedInfo ).toHaveBeenCalledTimes( 2 );
+		} );
+	} );
+} );

package/src/modal-checkout/analytics/ga4/utils/index.js

@@ -24,6 +24,7 @@ const eventKeys = [
 	'currency',
 	'product_id',
 	'product_type',
+	'quantity',
 	'variation_id',
 	'variation_ids',
 	'is_variable',

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

@@ -150,8 +150,27 @@ export const PICKER_CONTEXT_FIELDS = [
 	'newspack_popup_id',
 	'prompt_title',
 	'coupon',
+	'quantity',
 ];
 
+/**
+ * Whether the form already offers this field as a control the reader can use.
+ *
+ * Context fields are carried as hidden inputs, but a picker can render one of
+ * the same names as a real control — the per-seat group plans' seats field is
+ * `quantity`. That control is the reader's, not the block's: it must never be
+ * removed, and a hidden input of the same name alongside it would submit a
+ * second, competing value.
+ *
+ * @param {HTMLFormElement} form The form to inspect.
+ * @param {string}          name The field name.
+ *
+ * @return {boolean} True when a non-hidden input of that name exists.
+ */
+function hasVisibleField( form, name ) {
+	return !! form.querySelector( `input[name="${ name }"]:not([type="hidden"])` );
+}
+
 /**
  * Stamp context fields onto a picker form from the button that opened it.
  *
@@ -174,8 +193,14 @@ export function applyContextFields( targetForm, data, fields = PICKER_CONTEXT_FI
 	}
 	const doc = targetForm.ownerDocument;
 	fields.forEach( name => {
-		// Drop whatever a previous open left behind before writing this one's value.
-		targetForm.querySelectorAll( `input[name="${ name }"]` ).forEach( input => input.remove() );
+		// Drop whatever a previous open left behind before writing this one's value
+		// — but only the hidden inputs this function stamps. A visible control of
+		// the same name is the picker's own, and removing it takes the field away
+		// from the reader.
+		targetForm.querySelectorAll( `input[type="hidden"][name="${ name }"]` ).forEach( input => input.remove() );
+		if ( hasVisibleField( targetForm, name ) ) {
+			return;
+		}
 		const raw = data[ name ];
 		const value = raw === undefined || raw === null ? '' : String( raw );
 		if ( ! value ) {
@@ -210,6 +235,8 @@ export function copyContextFields( sourceForm, targetForm, fields = PICKER_CONTE
 	const doc = targetForm.ownerDocument;
 	const sourceData = new FormData( sourceForm );
 	fields.forEach( name => {
+		// A field the picker already carries wins, whether that is a value left by
+		// an earlier copy or a control the reader fills in themselves.
 		if ( targetForm.querySelector( `input[name="${ name }"]` ) ) {
 			return;
 		}

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

@@ -371,6 +371,42 @@ describe( 'applyContextFields', () => {
 		expect( form.querySelector( 'input[name="prompt_title"]' ) ).toBeNull();
 	} );
 
+	it( 'stamps the quantity', () => {
+		const form = picker();
+
+		applyContextFields( form, { quantity: 3 } );
+
+		expect( form.querySelector( 'input[name="quantity"]' ).value ).toBe( '3' );
+	} );
+
+	it( 'leaves the picker’s own seats field in place and does not shadow it', () => {
+		// Per-seat group plans render a visible number input named `quantity`, the
+		// same name the block stamps its own quantity into. Removing it leaves the
+		// reader with no way to choose seats at all.
+		const form = render( '<form id="picker"><input type="number" name="quantity" id="group_seats" min="2" value="2"></form>' ).querySelector(
+			'#picker'
+		);
+
+		applyContextFields( form, { quantity: 3 } );
+
+		const inputs = form.querySelectorAll( 'input[name="quantity"]' );
+		expect( inputs ).toHaveLength( 1 );
+		expect( inputs[ 0 ].id ).toBe( 'group_seats' );
+		expect( inputs[ 0 ].value ).toBe( '2' );
+	} );
+
+	it( 'clears its own stale hidden field without touching a visible one', () => {
+		const form = picker();
+
+		applyContextFields( form, { quantity: 3 } );
+		form.insertAdjacentHTML( 'beforeend', '<input type="number" name="quantity" id="group_seats" value="4">' );
+		applyContextFields( form, { quantity: 5 } );
+
+		const inputs = form.querySelectorAll( 'input[name="quantity"]' );
+		expect( inputs ).toHaveLength( 1 );
+		expect( inputs[ 0 ].id ).toBe( 'group_seats' );
+	} );
+
 	it( 'leaves the picker’s own fields alone', () => {
 		const form = render(
 			'<form id="picker"><input type="hidden" name="newspack_checkout" value="1"><input type="radio" name="product_id" value="9"></form>'
@@ -402,6 +438,7 @@ describe( 'PICKER_CONTEXT_FIELDS', () => {
 				'newspack_popup_id',
 				'prompt_title',
 				'coupon',
+				'quantity',
 			] )
 		);
 	} );

package/src/modal-checkout/checkout.scss

@@ -333,6 +333,33 @@
 		}
 	}
 
+	// Quantity (e.g. group subscription seats) styles
+	.modal_checkout_quantity {
+		margin-bottom: var(--newspack-ui-spacer-5, 24px);
+
+		h3 {
+			color: var(--newspack-ui-label-color, inherit);
+			margin-bottom: var(--newspack-ui-spacer-base, 8px);
+		}
+
+		.input-quantity {
+			align-items: center;
+			display: flex;
+			flex-wrap: nowrap;
+			gap: 0.5em;
+			margin: 0 0 8px;
+
+			input {
+				margin: 0;
+				width: 100%;
+			}
+
+			button {
+				margin-top: 0;
+			}
+		}
+	}
+
 	// Coupon Styles
 	.woocommerce-form-coupon {
 		margin-bottom: var(--newspack-ui-spacer-5, 24px);
@@ -360,6 +387,7 @@
 
 	// Processing styles
 	.modal_checkout_nyp,
+	.modal_checkout_quantity,
 	.modal_checkout_coupon {
 		&.modal-processing {
 			opacity: 0.5;

package/src/modal-checkout/donate-trigger.js

@@ -0,0 +1,134 @@
+/**
+ * Resolve the form acted on by a modal checkout `donate` URL trigger.
+ *
+ * Resolution is side-effect free: no clicks, no input mutation. The caller
+ * performs the clicks/submission described by the returned resolution.
+ */
+
+import { FREQUENCY_SLUGS } from '../blocks/donate/frequency-slugs';
+import { TIERS_BASED_READY_ATTRIBUTE } from '../shared/js/tiers-based-ready';
+
+/**
+ * Layouts a donate URL trigger can request.
+ *
+ * @type {string[]}
+ */
+export const VALID_LAYOUTS = [ 'tiered', 'frequency', 'untiered' ];
+
+/**
+ * Donation frequency slugs a trigger can request.
+ *
+ * @type {string[]}
+ */
+export const VALID_FREQUENCIES = FREQUENCY_SLUGS;
+
+/**
+ * Validate donate URL trigger parameters.
+ *
+ * The values are interpolated into attribute selectors, so anything outside
+ * the known closed sets (or a plain number) is rejected rather than escaped.
+ * The `other` amount only exists in the frequency layout.
+ *
+ * @param {string} layout    The donation layout.
+ * @param {string} frequency The donation frequency.
+ * @param {string} amount    The donation amount.
+ *
+ * @return {boolean} Whether the parameters are usable.
+ */
+export function validateDonationTriggerParams( layout, frequency, amount ) {
+	if ( ! VALID_LAYOUTS.includes( layout ) || ! VALID_FREQUENCIES.includes( frequency ) ) {
+		return false;
+	}
+	if ( amount === 'other' ) {
+		return layout === 'frequency';
+	}
+	return /^\d+(\.\d+)?$/.test( amount );
+}
+
+/**
+ * Resolve which donate form a URL trigger should act on, and how.
+ *
+ * The first form in DOM order that can fully satisfy the trigger wins; forms
+ * that cannot are skipped untouched. (Before this resolver existed, the last
+ * match won for the frequency/untiered layouts, so on a page with several
+ * matching Donate blocks a published link may now act on a different block
+ * than it used to — and land on that block's own after-success settings.)
+ * Tiered forms are matched against the
+ * server-rendered tier markup (`data-frequency-slug`/`data-amount` spans), so
+ * no tab needs to be clicked to find out whether the amount exists. A tiered
+ * block whose view script has not initialized yet (no `data-tiers-based-ready`
+ * on the container) cannot be acted on — clicking its tabs or tiers would do
+ * nothing — so the scan continues past it; `not-ready` (carrying the first
+ * such form) is returned only when no initialized form matched.
+ *
+ * @param {Document|HTMLElement} root             The DOM root to search.
+ * @param {Object}               params           Trigger parameters.
+ * @param {string}               params.layout    The donation layout.
+ * @param {string}               params.frequency The donation frequency.
+ * @param {string}               params.amount    The donation amount.
+ *
+ * @return {Object} Resolution object. `status` is one of `invalid-params`,
+ *                  `no-match`, `not-ready`, `tiered`, `frequency` or
+ *                  `untiered`. Tiered resolutions carry `form`, `tierIndex`
+ *                  and `frequencyButton` (null when the block renders a single
+ *                  frequency and no tab click is needed); frequency/untiered
+ *                  resolutions carry `form`, `frequencyInput` and `amountInput`.
+ */
+export function resolveDonationTrigger( root, { layout, frequency, amount } ) {
+	if ( ! validateDonationTriggerParams( layout, frequency, amount ) ) {
+		return { status: 'invalid-params' };
+	}
+	let notReadyForm = null;
+	for ( const form of root.querySelectorAll( '.wpbnbd.wpbnbd--platform-wc form' ) ) {
+		const tiersContainer = form.closest( '.wpbnbd--tiers-based' );
+		if ( layout === 'tiered' ) {
+			if ( ! tiersContainer ) {
+				continue;
+			}
+			const tierSpan = form.querySelector( `.wpbnbd__tiers__amount [data-frequency-slug="${ frequency }"][data-amount="${ amount }"]` );
+			if ( ! tierSpan ) {
+				continue;
+			}
+			const tierIndex = parseInt( tierSpan.getAttribute( 'data-tier-index' ) );
+			if ( isNaN( tierIndex ) ) {
+				continue;
+			}
+			// Blocks with a single enabled frequency render no tab buttons; the
+			// hidden frequency input then decides whether this form matches.
+			const frequencyButton = form.querySelector( `button[data-frequency-slug="${ frequency }"]` );
+			if ( ! frequencyButton && ! form.querySelector( `input[name="donation_frequency"][value="${ frequency }"]` ) ) {
+				continue;
+			}
+			if ( ! tiersContainer.hasAttribute( TIERS_BASED_READY_ATTRIBUTE ) ) {
+				// Remember the first not-ready match but keep scanning: a later,
+				// already-initialized block that satisfies the trigger beats waiting
+				// on one that may never become ready (the view script bails without
+				// stamping readiness on config or markup failures).
+				if ( ! notReadyForm ) {
+					notReadyForm = form;
+				}
+				continue;
+			}
+			return { status: 'tiered', form, frequencyButton, tierIndex };
+		}
+		if ( tiersContainer ) {
+			continue;
+		}
+		const frequencyInput = form.querySelector( `input[name="donation_frequency"][value="${ frequency }"]` );
+		if ( ! frequencyInput ) {
+			continue;
+		}
+		const amountInput =
+			layout === 'untiered'
+				? form.querySelector( `input[name="donation_value_${ frequency }_untiered"]` )
+				: form.querySelector( `input[name="donation_value_${ frequency }"][value="${ amount }"]` );
+		if ( ! amountInput ) {
+			continue;
+		}
+		return { status: layout, form, frequencyInput, amountInput };
+	}
+	if ( notReadyForm ) {
+		return { status: 'not-ready', form: notReadyForm };
+	}
+	return { status: 'no-match' };
+}