@automattic/newspack-blocks 4.28.0 → 4.29.0-alpha.2

package/src/blocks/checkout-button/coupon-control.js

@@ -0,0 +1,150 @@
+/**
+ * External dependencies
+ */
+import { debounce } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { BaseControl, TextControl, FormTokenField, Button, Spinner } from '@wordpress/components';
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Searchable WooCommerce coupon picker for the Checkout Button block.
+ *
+ * Type to search existing coupons; selecting one stores its code in the block's
+ * `coupon` attribute, clearing it removes the coupon. Mirrors the product picker.
+ *
+ * @param {Object}   props
+ * @param {string}   props.value    Currently selected coupon code.
+ * @param {Function} props.onChange Called with the selected coupon code (or '').
+ * @param {boolean}  props.disabled Whether a coupon can be set. A stored code stays
+ *                                  visible and removable so it can't get stranded.
+ * @return {JSX.Element} The control.
+ */
+export default function CouponControl( { value, onChange, disabled = false } ) {
+	const [ inFlight, setInFlight ] = useState( false );
+	const [ suggestions, setSuggestions ] = useState( [] );
+	const [ selected, setSelected ] = useState( false );
+	const [ isChanging, setIsChanging ] = useState( false );
+
+	function fetchSuggestions( search ) {
+		setInFlight( true );
+		return apiFetch( {
+			path: `/wc/v3/coupons?search=${ encodeURIComponent( search ) }`,
+		} )
+			.then( coupons => {
+				setSuggestions( coupons.map( coupon => coupon.code ) );
+			} )
+			.finally( () => setInFlight( false ) );
+	}
+
+	function fetchSaved() {
+		setInFlight( true );
+		return apiFetch( {
+			path: `/wc/v3/coupons?code=${ encodeURIComponent( value ) }`,
+		} )
+			.then( coupons => {
+				// Keep the stored value even if the lookup returns nothing.
+				setSelected( coupons.length ? coupons[ 0 ].code : value );
+			} )
+			.catch( () => setSelected( value ) )
+			.finally( () => setInFlight( false ) );
+	}
+
+	useEffect( () => {
+		setIsChanging( false );
+		if ( value ) {
+			fetchSaved();
+		} else {
+			setSelected( false );
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ value ] );
+
+	function onTokenChange( tokens ) {
+		setIsChanging( false );
+		onChange( tokens[ 0 ] || '' );
+	}
+
+	const debouncedFetch = useMemo(
+		() => debounce( fetchSuggestions, 200 ),
+		// fetchSuggestions only closes over stable state setters, so an empty
+		// dependency array is intentional.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[]
+	);
+
+	// Cancel a pending debounced fetch if the control unmounts, so it can't
+	// fire and update state after the component is gone.
+	useEffect( () => () => debouncedFetch.cancel(), [ debouncedFetch ] );
+
+	function handleInputChange( search ) {
+		if ( search.length > 2 ) {
+			setInFlight( true );
+			debouncedFetch( search );
+		} else {
+			// Cancel any fetch queued for a longer previous query so it can't
+			// fire after the input was shortened or cleared.
+			debouncedFetch.cancel();
+			setInFlight( false );
+		}
+	}
+
+	if ( value && ! selected && inFlight ) {
+		return <Spinner />;
+	}
+
+	if ( selected && ! isChanging ) {
+		return (
+			<div className="newspack-checkout-button__coupon-field">
+				<BaseControl label={ __( 'Coupon', 'newspack-blocks' ) } id="newspack-checkout-button-coupon">
+					<TextControl value={ selected } __next40pxDefaultSize disabled />
+					{ ! disabled && (
+						<>
+							<Button variant="link" onClick={ () => setIsChanging( true ) }>
+								{ __( 'Edit', 'newspack-blocks' ) }
+							</Button>{ ' ' }
+						</>
+					) }
+					<Button
+						variant="link"
+						isDestructive
+						onClick={ () => {
+							setSelected( false );
+							onChange( '' );
+						} }
+					>
+						{ __( 'Remove', 'newspack-blocks' ) }
+					</Button>
+				</BaseControl>
+			</div>
+		);
+	}
+
+	return (
+		<div className="newspack-checkout-button__coupon-field">
+			<FormTokenField
+				placeholder={
+					disabled ? __( 'Coupons are not available', 'newspack-blocks' ) : __( 'Type to search for a coupon…', 'newspack-blocks' )
+				}
+				label={ __( 'Coupon', 'newspack-blocks' ) }
+				maxLength={ 1 }
+				value={ [] }
+				onChange={ onTokenChange }
+				onInputChange={ handleInputChange }
+				suggestions={ disabled ? [] : suggestions }
+				disabled={ disabled }
+				__next40pxDefaultSize
+			/>
+			{ inFlight && <Spinner /> }
+			{ selected && (
+				<Button variant="link" onClick={ () => setIsChanging( false ) }>
+					{ __( 'Cancel', 'newspack-blocks' ) }
+				</Button>
+			) }
+		</div>
+	);
+}

package/src/blocks/checkout-button/edit.js

@@ -27,6 +27,7 @@ import {
 	SelectControl,
 	FormTokenField,
 	Button,
+	Notice,
 	Spinner,
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 	__experimentalToggleGroupControl as ToggleGroupControl,
@@ -41,6 +42,7 @@ import apiFetch from '@wordpress/api-fetch';
  */
 import './edit.scss';
 import RedirectAfterSuccess from '../../components/redirect-after-success';
+import CouponControl from './coupon-control';
 
 function getVariationName( variation ) {
 	const attributes = [];
@@ -137,6 +139,10 @@ function ProductControl( props ) {
 			fetchSaved();
 		} else {
 			setSelected( false );
+			// Clear the parent's copy too, otherwise product-derived state (e.g.
+			// whether this is a donation) keeps describing the product that was
+			// just removed.
+			props.onProduct( {} );
 		}
 	}, [ props.value ] );
 	function onChange( tokens ) {
@@ -158,7 +164,7 @@ function ProductControl( props ) {
 		return <Spinner />;
 	}
 	return (
-		<div className="newspack-checkout-button__product-field" style={ { marginBottom: '16px' } }>
+		<div className="newspack-checkout-button__product-field">
 			{ selected && ! isChanging ? (
 				<>
 					<BaseControl label={ __( 'Product', 'newspack-blocks' ) } id="selected-product-control">
@@ -201,12 +207,17 @@ function ProductControl( props ) {
 
 function CheckoutButtonEdit( props ) {
 	const { attributes, setAttributes, className } = props;
-	const { placeholder, style, text, product, price, variation, width } = attributes;
+	const { placeholder, style, text, product, price, variation, width, coupon } = attributes;
 
 	const [ productData, setProductData ] = useState( {} );
 	const [ variations, setVariations ] = useState( [] );
 	const [ nyp, setNYP ] = useState( false );
 
+	// Resolved server-side, since a donation is not always identifiable from the
+	// product meta. Variations inherit it from their parent, which is the product
+	// fetched here, so the selected variation needs no separate check.
+	const isDonation = !! productData?.newspack_is_donation;
+
 	function handleProduct( data ) {
 		setProductData( data );
 		// Handle product variation data.
@@ -337,6 +348,28 @@ function CheckoutButtonEdit( props ) {
 							</>
 						) }
 					</ProductControl>
+					{ newspack_blocks_data?.coupons_enabled && (
+						<>
+							{ /*
+							 * Coupons are not supported on donation products. The control is
+							 * disabled rather than hidden so a code stored before the product
+							 * was swapped stays visible — and removable, since the block emits
+							 * it regardless of donation status.
+							 */ }
+							{ isDonation && (
+								<Notice status={ coupon ? 'warning' : 'info' } isDismissible={ false }>
+									{ coupon
+										? sprintf(
+												// translators: %s: the coupon code stored on the block.
+												__( 'Donation products do not support coupons. "%s" will not be applied.', 'newspack-blocks' ),
+												coupon
+										  )
+										: __( 'Donation products do not support coupons.', 'newspack-blocks' ) }
+								</Notice>
+							) }
+							<CouponControl value={ coupon } onChange={ value => setAttributes( { coupon: value } ) } disabled={ isDonation } />
+						</>
+					) }
 					<WidthControl selectedWidth={ width } setAttributes={ setAttributes } />
 				</PanelBody>
 				<PanelBody title={ __( 'After purchase', 'newspack-blocks' ) }>

package/src/blocks/checkout-button/edit.scss

@@ -1,7 +1,9 @@
 @use "newspack-colors" as np-colors;
 
 .newspack-checkout-button {
-	&__product-field {
+	&__product-field,
+	&__coupon-field {
+		margin-bottom: 16px;
 		&__error {
 			color: np-colors.$error-500;
 			font-size: 0.9em;
@@ -64,4 +66,3 @@
 		width: auto;
 	}
 }
-

package/src/blocks/checkout-button/view.php

@@ -24,6 +24,38 @@ function register_block() {
 }
 add_action( 'init', __NAMESPACE__ . '\\register_block' );
 
+/**
+ * Expose whether a product is a donation to the products REST response.
+ *
+ * The block editor needs this to tell the publisher that an attached coupon
+ * will not be applied: Newspack disables coupons for any cart containing a
+ * donation (see Newspack\Donations::disable_coupons()). It cannot be derived
+ * from the product meta alone, because the legacy donation product and its
+ * children are matched by ID rather than by the donation flag, so the answer
+ * is delegated to Donations::is_donation_product().
+ */
+function register_donation_rest_field() {
+	if ( ! class_exists( '\Newspack\Donations' ) || ! method_exists( '\Newspack\Donations', 'is_donation_product' ) ) {
+		return;
+	}
+	register_rest_field(
+		'product',
+		'newspack_is_donation',
+		[
+			'get_callback' => function ( $product ) {
+				return (bool) \Newspack\Donations::is_donation_product( $product['id'] );
+			},
+			'schema'       => [
+				'description' => __( 'Whether the product is treated as a donation by Newspack.', 'newspack-blocks' ),
+				'type'        => 'boolean',
+				'context'     => [ 'view', 'edit' ],
+				'readonly'    => true,
+			],
+		]
+	);
+}
+add_action( 'rest_api_init', __NAMESPACE__ . '\\register_donation_rest_field' );
+
 /**
  * Render the block.
  *
@@ -62,6 +94,7 @@ function render_callback( $attributes ) {
 	$after_success_behavior     = $attributes['afterSuccessBehavior'] ?? '';
 	$after_success_button_label = $attributes['afterSuccessButtonLabel'] ?? '';
 	$after_success_url          = $attributes['afterSuccessURL'] ?? '';
+	$coupon                     = $attributes['coupon'] ?? '';
 	$is_variable                = $attributes['is_variable'];
 
 	if ( $is_variable && $variation_id ) {
@@ -114,6 +147,12 @@ function render_callback( $attributes ) {
 		$hidden_fields .= $after_success_button_label ? '<input type="hidden" name="after_success_button_label" value="' . esc_attr( $after_success_button_label ) . '" />' : '';
 		$hidden_fields .= $after_success_url ? '<input type="hidden" name="after_success_url" value="' . esc_attr( $after_success_url ) . '" />' : '';
 	}
+	// Always emit the coupon field (not gated on the gateway check): it is
+	// applied server-side for both the modal and the redirect checkout flows.
+	// Strict check so a coupon code of "0" is still emitted.
+	if ( '' !== $coupon ) {
+		$hidden_fields .= '<input type="hidden" name="coupon" value="' . esc_attr( $coupon ) . '" />';
+	}
 
 	ob_start();
 	/**
@@ -153,8 +192,8 @@ function render_callback( $attributes ) {
 		$checkout_data = Checkout_Data::get_checkout_data( $product );
 
 		$form = sprintf(
-			'<form data-checkout="%1$s">%2$s %3$s</form>',
-			esc_attr( wp_json_encode( $checkout_data ) ),
+			'<form %1$s>%2$s %3$s</form>',
+			Checkout_Data::data_checkout_attr( $checkout_data ),
 			$button,
 			$hidden_fields
 		);

package/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php

@@ -177,7 +177,7 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 								id='tab-panel-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
 								role='tabpanel'
 								aria-labelledby='tab-newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
-								data-checkout='<?php echo esc_attr( wp_json_encode( Checkout_Data::get_donation_checkout_data( $frequency_slug, $amount ) ) ); ?>'
+								<?php Checkout_Data::print_data_checkout_attr( Checkout_Data::get_donation_checkout_data( $frequency_slug, $amount ) ); ?>
 								<?php ( $frequency_slug === $configuration['defaultFrequency'] ? 'tabindex="0"' : '' ); ?>
 							>
 								<?php echo self::render_frequency_selection( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
@@ -262,7 +262,7 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 										?>
 										<div
 											class='wp-block-newspack-blocks-donate__tier donation-tier__<?php echo esc_attr( $frequency_slug ); ?>'
-											data-checkout='<?php echo esc_attr( wp_json_encode( Checkout_Data::get_donation_checkout_data( $frequency_slug, $amount ) ) ); ?>'
+											<?php Checkout_Data::print_data_checkout_attr( Checkout_Data::get_donation_checkout_data( $frequency_slug, $amount ) ); ?>
 										>
 											<?php if ( 3 === $index ) : // The "other" tier. ?>
 												<input

package/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php

@@ -64,7 +64,7 @@ class Newspack_Blocks_Donate_Renderer_Tiers_Based extends Newspack_Blocks_Donate
 							data-frequency-slug="<?php echo esc_attr( $frequency_slug ); ?>"
 							data-amount="<?php echo esc_attr( $amount ); ?>"
 							data-tier-index="<?php echo esc_attr( $index ); ?>"
-							data-checkout="<?php echo esc_attr( wp_json_encode( Checkout_Data::get_donation_checkout_data( $frequency_slug, $amount ) ) ); ?>"
+							<?php Checkout_Data::print_data_checkout_attr( Checkout_Data::get_donation_checkout_data( $frequency_slug, $amount ) ); ?>
 						>
 							<?php echo wp_kses_post( Newspack_Blocks::get_formatted_amount( $amount, $frequency_slug ) ); ?>
 						</span>

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

@@ -58,6 +58,41 @@ export function findCheckoutButtonForm( root, productId, variationId = null ) {
 	return match;
 }
 
+/**
+ * Find the button whose context a picker submission should inherit.
+ *
+ * Prefers a button that is not locked to a single variation: it stands for the
+ * whole product, so its context — including any attached coupon — applies to
+ * whichever variation the reader picks. A locked button was configured for one
+ * specific variation and is only used when nothing better exists.
+ *
+ * @param {Document|HTMLElement} root      The DOM root to search.
+ * @param {string}               productId The requested product ID.
+ *
+ * @return {HTMLFormElement|null} The donor form, or null.
+ */
+function findContextDonorForm( root, productId ) {
+	const buttons = root.querySelectorAll( '.wp-block-newspack-blocks-checkout-button' );
+	let fallback = null;
+	let unlocked = null;
+	buttons.forEach( button => {
+		if ( unlocked ) {
+			return;
+		}
+		const form = button.querySelector( 'form' );
+		const data = readCheckoutData( form );
+		if ( ! data || String( data.product_id ) !== String( productId ) ) {
+			return;
+		}
+		if ( ! data.variation_id ) {
+			unlocked = form;
+			return;
+		}
+		fallback = fallback || form;
+	} );
+	return unlocked || fallback;
+}
+
 /**
  * Select the requested variation in a product picker.
  * Picker forms use the selected radio value instead of `data-checkout`.
@@ -98,6 +133,12 @@ export function selectPickerForm( root, productId, variationId, options = {} ) {
 /**
  * Hidden fields copied from a source checkout button to a picker submission.
  *
+ * The picker form is rendered once per variable product in the footer and is
+ * submitted instead of the button's own form, so anything the block attached to
+ * that button — after-success behavior, attribution, the auto-applied coupon —
+ * is lost unless it is listed here. Shared with modal.js so the click path and
+ * the URL-trigger path carry the same context.
+ *
  * @type {string[]}
  */
 export const PICKER_CONTEXT_FIELDS = [
@@ -107,12 +148,54 @@ export const PICKER_CONTEXT_FIELDS = [
 	'gate_post_id',
 	'newspack_popup_id',
 	'prompt_title',
+	'coupon',
 ];
 
+/**
+ * Stamp context fields onto a picker form from the button that opened it.
+ *
+ * Authoritative, unlike copyContextFields(): the picker is rendered once per
+ * parent product and shared by every button targeting it, and nothing clears it
+ * when the modal closes, so each open must overwrite whatever the previous one
+ * left behind. An absent value removes the field rather than preserving a stale
+ * one — for `coupon` that is the difference between the reader's discount and
+ * a discount attached to a different button.
+ *
+ * @param {HTMLFormElement|null} targetForm Picker form to stamp.
+ * @param {Object|null}          data       Checkout data read from the clicked button's form.
+ * @param {string[]}             fields     Field names to stamp.
+ *
+ * @return {void}
+ */
+export function applyContextFields( targetForm, data, fields = PICKER_CONTEXT_FIELDS ) {
+	if ( ! targetForm || ! data ) {
+		return;
+	}
+	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() );
+		const raw = data[ name ];
+		const value = raw === undefined || raw === null ? '' : String( raw );
+		if ( ! value ) {
+			return;
+		}
+		const input = doc.createElement( 'input' );
+		input.type = 'hidden';
+		input.name = name;
+		input.value = value;
+		targetForm.prepend( input );
+	} );
+}
+
 /**
  * Copy context fields. Target values are preserved, empty source values are
  * skipped, and null forms are ignored.
  *
+ * Used by the URL-trigger path, which runs once on load before any click. The
+ * click path uses applyContextFields() instead and overwrites anything left
+ * here, so preserving existing values cannot strand a stale coupon.
+ *
  * @param {HTMLFormElement|null} sourceForm Checkout button form to read from.
  * @param {HTMLFormElement|null} targetForm Picker form to copy into.
  * @param {string[]}             fields     Field names to copy.
@@ -173,12 +256,14 @@ export function resolveCheckoutButtonForm( root, productId, variationId, options
 
 	const picker = selectPickerForm( root, productId, variationId, options );
 	if ( picker ) {
-		// The source button may be locked to another variation. Use it only
-		// for block context, then submit the picker. The picker is only reached
-		// because no button matches the requested variation, so when several
-		// buttons share this parent product there is no single correct one to
-		// prefer: the first in DOM order supplies the context.
-		copyContextFields( findCheckoutButtonForm( root, productId, null ), picker );
+		// The picker is only reached because no button matches the requested
+		// variation, so the context has to come from some other button for this
+		// product. Since PICKER_CONTEXT_FIELDS now carries `coupon`, that choice
+		// decides a discount: a button locked to a variation was configured for
+		// that variation, so its coupon should not follow the reader to a
+		// different one. Prefer an unlocked button, which stands for the whole
+		// product, and fall back to DOM order only when there isn't one.
+		copyContextFields( findContextDonorForm( root, productId ), picker );
 		return picker;
 	}
 

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

@@ -2,7 +2,15 @@
  * Tests for the checkout-button URL trigger resolution helpers.
  */
 
-import { readCheckoutData, findCheckoutButtonForm, selectPickerForm, resolveCheckoutButtonForm, copyContextFields } from './checkout-button-trigger';
+import {
+	readCheckoutData,
+	findCheckoutButtonForm,
+	selectPickerForm,
+	resolveCheckoutButtonForm,
+	copyContextFields,
+	applyContextFields,
+	PICKER_CONTEXT_FIELDS,
+} from './checkout-button-trigger';
 
 const VARIATION_MODAL_CLASS_PREFIX = 'newspack-blocks__modal-variation';
 const IFRAME_NAME = 'newspack_modal_checkout_iframe';
@@ -220,6 +228,46 @@ describe( 'resolveCheckoutButtonForm', () => {
 		expect( pickerForm.querySelector( 'input[name="after_success_button_label"]' ).value ).toBe( 'Thanks!' );
 		expect( pickerForm.querySelector( 'input[name="after_success_url"]' ).value ).toBe( '/welcome/' );
 	} );
+
+	// A button locked to one variation was configured for that variation, so its
+	// coupon should not follow the reader to a different one when an unlocked
+	// button for the same product is available to supply the context instead.
+	it( 'prefers an unlocked button over a variation-locked one for the picker context', () => {
+		const locked = `<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="coupon" value="LOCKED20"><button type="submit">Annual</button></form></div>`;
+		const unlocked = `<div class="wp-block-newspack-blocks-checkout-button"><form data-checkout='${ JSON.stringify( {
+			product_id: '1406',
+			is_variable: true,
+		} ) }'><input type="hidden" name="coupon" value="ANYTIER5"><button type="submit">Subscribe</button></form></div>`;
+		const root = render( locked + unlocked + 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( pickerForm.querySelector( 'input[name="coupon"]' ).value ).toBe( 'ANYTIER5' );
+	} );
+
+	// With nothing but locked buttons there is no correct donor, so the first in
+	// DOM order supplies the context — the other half of findContextDonorForm.
+	it( 'falls back to the first locked button when no unlocked one exists', () => {
+		const locked = ( variationId, coupon ) =>
+			`<div class="wp-block-newspack-blocks-checkout-button"><form data-checkout='${ JSON.stringify( {
+				product_id: '1406',
+				variation_id: variationId,
+				is_variable: true,
+			} ) }'><input type="hidden" name="coupon" value="${ coupon }"><button type="submit">Buy</button></form></div>`;
+		const root = render( locked( '1408', 'FIRST20' ) + locked( '1409', 'SECOND10' ) + 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( pickerForm.querySelector( 'input[name="coupon"]' ).value ).toBe( 'FIRST20' );
+	} );
 } );
 
 describe( 'copyContextFields', () => {
@@ -263,4 +311,98 @@ describe( 'copyContextFields', () => {
 		expect( () => copyContextFields( null, target ) ).not.toThrow();
 		expect( () => copyContextFields( target, null ) ).not.toThrow();
 	} );
+
+	// The picker form replaces the button's own form, so a coupon attached to the
+	// Checkout Button block is only auto-applied if it is carried across.
+	it( 'copies the auto-applied coupon to the picker form', () => {
+		const root = render( '<form id="src"><input type="hidden" name="coupon" value="MEMBER10"></form><form id="dst"></form>' );
+
+		copyContextFields( root.querySelector( '#src' ), root.querySelector( '#dst' ) );
+
+		expect( root.querySelector( '#dst input[name="coupon"]' ).value ).toBe( 'MEMBER10' );
+	} );
+} );
+
+describe( 'applyContextFields', () => {
+	// The picker is rendered once per parent product and shared by every button
+	// targeting it, and nothing clears it when the modal closes. These two cases
+	// are what the click path gets wrong if the stamp is not authoritative.
+	const picker = () => render( '<form id="picker"></form>' ).querySelector( '#picker' );
+	const couponValue = form => {
+		const input = form.querySelector( 'input[name="coupon"]' );
+		return input ? input.value : null;
+	};
+
+	it( 'replaces a coupon left behind by a previously clicked button', () => {
+		const form = picker();
+
+		applyContextFields( form, { coupon: 'SAVE20' } );
+		applyContextFields( form, { coupon: 'MEMBER10' } );
+
+		expect( couponValue( form ) ).toBe( 'MEMBER10' );
+		expect( form.querySelectorAll( 'input[name="coupon"]' ) ).toHaveLength( 1 );
+	} );
+
+	it( 'clears the coupon when the clicked button has none', () => {
+		const form = picker();
+
+		applyContextFields( form, { coupon: 'SAVE20' } );
+		applyContextFields( form, {} );
+
+		expect( couponValue( form ) ).toBeNull();
+	} );
+
+	it( 'does not leave an empty coupon input that would block a later button', () => {
+		const form = picker();
+
+		applyContextFields( form, {} );
+		applyContextFields( form, { coupon: 'SAVE20' } );
+
+		expect( couponValue( form ) ).toBe( 'SAVE20' );
+	} );
+
+	it( 'stamps the after-success and attribution context', () => {
+		const form = picker();
+
+		applyContextFields( form, { after_success_behavior: 'custom', gate_post_id: 12, prompt_title: '' } );
+
+		expect( form.querySelector( 'input[name="after_success_behavior"]' ).value ).toBe( 'custom' );
+		expect( form.querySelector( 'input[name="gate_post_id"]' ).value ).toBe( '12' );
+		expect( form.querySelector( 'input[name="prompt_title"]' ) ).toBeNull();
+	} );
+
+	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>'
+		).querySelector( '#picker' );
+
+		applyContextFields( form, { coupon: 'SAVE20' } );
+
+		expect( form.querySelector( 'input[name="newspack_checkout"]' ).value ).toBe( '1' );
+		expect( form.querySelector( 'input[name="product_id"]' ).value ).toBe( '9' );
+	} );
+
+	it( 'does not throw on a null form or missing data', () => {
+		const form = picker();
+		expect( () => applyContextFields( null, { coupon: 'X' } ) ).not.toThrow();
+		expect( () => applyContextFields( form, null ) ).not.toThrow();
+	} );
+} );
+
+describe( 'PICKER_CONTEXT_FIELDS', () => {
+	// modal.js reads this same list for the click path, so a field missing here is
+	// dropped by both the URL trigger and the variation picker.
+	it( 'carries the coupon alongside the after-success and attribution context', () => {
+		expect( PICKER_CONTEXT_FIELDS ).toEqual(
+			expect.arrayContaining( [
+				'after_success_behavior',
+				'after_success_url',
+				'after_success_button_label',
+				'gate_post_id',
+				'newspack_popup_id',
+				'prompt_title',
+				'coupon',
+			] )
+		);
+	} );
 } );