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

package/src/modal-checkout/checkout.scss

@@ -95,56 +95,12 @@
 			}
 
 			.order-review-wrapper {
-				// Collapse and expand Transaction Details.
-				// stylelint-disable-next-line selector-id-pattern
-				#order_review_heading {
-					border-radius: 0;
-					min-height: 0;
-					padding: 0;
-
-					&:hover {
-						background: transparent;
-						color: var(--newspack-ui-color-neutral-60);
-					}
-
-					&:focus-visible {
-						outline: 0;
-						text-decoration: underline;
-					}
-
-					svg {
-						margin: 0 -8px;
-						transition: rotate 125ms ease-in-out;
-					}
-				}
+				margin-bottom: var(--newspack-ui-spacer-5, 24px);
 
 				// stylelint-disable-next-line selector-id-pattern
 				#order_review {
 					margin: 0;
 				}
-
-				.transaction-details-content {
-					display: grid;
-					grid-template-rows: 0fr;
-					margin-bottom: var(--newspack-ui-spacer-2, 12px);
-					transition: grid-template-rows 250ms ease-in-out;
-				}
-
-				.transaction-details-content-inner {
-					overflow: hidden;
-				}
-			}
-
-			&.transaction-details-expanded {
-				// stylelint-disable-next-line selector-id-pattern
-				#order_review_heading svg {
-					rotate: 180deg;
-				}
-
-				.transaction-details-content {
-					grid-template-rows: 1fr;
-					margin-bottom: var(--newspack-ui-spacer-5, 24px);
-				}
 			}
 		}
 
@@ -410,14 +366,6 @@
 		}
 	}
 
-	// Checkout form heading.
-	.woocommerce .order-details-summary {
-		// Top margin not needed in newspack ui modal.
-		h2 {
-			margin-top: 0;
-		}
-	}
-
 	// Override checkout payment method box.
 
 	.wc_payment_methods {

package/src/modal-checkout/index.js

@@ -189,110 +189,23 @@ import { domReady, onCheckoutPlaceOrderProcessing } from './utils';
 						$wrapper.removeClass( 'hidden' );
 					}
 
-					const $details = $( '#after_customer_details' );
-					const expanded = $details.hasClass( 'transaction-details-expanded' );
-
 					// Move new order review table to the payment methods.
 					const $payment_methods = $( '.payment_methods' );
 					if ( $payment_methods.length ) {
 						const $el = $wrapper.clone();
-						// Make sure Transaction Details toggle's aria-expanded value is correct in cloned version.
-						if ( expanded ) {
-							$( '[id="order_review_heading"]', $el ).attr( 'aria-expanded', 'true' );
-						}
 						$( '.order-review-wrapper' ).remove();
 						$payment_methods.after( $el );
-					} else if ( ! expanded ) {
-						// If there's no payment method, make sure to expand the Transaction Details on load.
-						$wrapper.find( '#order_review_heading' ).trigger( 'click' );
 					}
 				} );
 
 				/**
-				 * Keep the static product summary aligned with recalculated order-review totals.
+				 * Serialize the checkout form for cart-recalculation AJAX requests.
 				 */
-				function setProductSummary( productDetails, allowHtml = true ) {
-					const $productDetails = $( '#modal-checkout-product-details strong' );
-					if ( ! $productDetails.length || ! productDetails ) {
-						return false;
-					}
-					if ( allowHtml && $productDetails.html() !== productDetails ) {
-						$productDetails.html( productDetails );
-					} else if ( ! allowHtml && $productDetails.text() !== productDetails ) {
-						$productDetails.text( productDetails );
-					}
-					return true;
-				}
-				let productSummaryRequest = false;
 				function getCheckoutPostData() {
 					const $checkoutForm = $( 'form.checkout' );
 					// Repeat-trial checks can only resolve once the checkout form includes a billing email.
 					return $checkoutForm.length ? $checkoutForm.serialize() : '';
 				}
-				function requestUpdatedProductSummary() {
-					if ( productSummaryRequest ) {
-						productSummaryRequest.abort();
-					}
-					const request = $.ajax( {
-						url: newspackBlocksModalCheckout.ajax_url,
-						method: 'POST',
-						data: {
-							action: 'get_cart_product_summary',
-							modal_checkout: 1,
-							post_data: getCheckoutPostData(),
-						},
-						success: response => {
-							if ( productSummaryRequest === request ) {
-								setProductSummary( response );
-							}
-						},
-						complete: () => {
-							if ( productSummaryRequest === request ) {
-								productSummaryRequest = false;
-							}
-						},
-					} );
-					productSummaryRequest = request;
-				}
-				function updateProductSummaryFromOrderReview() {
-					const $cartItem = $( '.order-review-wrapper .woocommerce-checkout-review-order-table tr.cart_item' ).first();
-					if ( ! $cartItem.length ) {
-						return false;
-					}
-
-					const $productName = $cartItem.find( '.product-name' ).clone();
-					$productName.find( '.product-quantity' ).remove();
-					// Keep the DOM path text-only; the AJAX fallback is the HTML path because PHP runs it through wp_kses.
-					const productName = $productName.text().replace( /\s+/g, ' ' ).trim();
-					const productTotal = $cartItem.find( '.product-total' ).text().replace( /\s+/g, ' ' ).trim();
-					if ( productName && productTotal ) {
-						return setProductSummary( `${ productName }: ${ productTotal }`, false );
-					}
-					return false;
-				}
-				function syncProductSummary() {
-					if ( updateProductSummaryFromOrderReview() ) {
-						if ( productSummaryRequest ) {
-							productSummaryRequest.abort();
-							productSummaryRequest = false;
-						}
-						return;
-					}
-					requestUpdatedProductSummary();
-				}
-				$( document ).on( 'updated_checkout', syncProductSummary );
-
-				/**
-				 * Toggle Transaction Details
-				 */
-				$( document ).on( 'click', '#order_review_heading', function () {
-					// Toggle the aria-expanded attribute.
-					$( this ).attr( 'aria-expanded', function ( index, attr ) {
-						return attr === 'false' ? 'true' : 'false';
-					} );
-					// Toggle the CSS class to show/hide the Transaction Details.
-					$( '#after_customer_details' ).toggleClass( 'transaction-details-expanded' );
-				} );
 
 				/**
 				 * Get updated cart total to update the "Place Order" button.
@@ -748,7 +661,12 @@ import { domReady, onCheckoutPlaceOrderProcessing } from './utils';
 						}
 					}
 
-					$( '.order-details-summary' ).after( '<div id="checkout_details">' + html.join( '' ) + '</div>' );
+					// Anchor the summary to the hidden product-details carrier, falling back to
+					// #after_customer_details when the carrier isn't present (e.g. multi-item carts).
+					const $anchor = $( '#modal-checkout-product-details' ).length
+						? $( '#modal-checkout-product-details' )
+						: $( '#after_customer_details' );
+					$anchor.after( '<div id="checkout_details">' + html.join( '' ) + '</div>' );
 				}
 
 				/**

package/src/modal-checkout/modal.js

@@ -24,7 +24,7 @@ import {
 	getCheckoutData,
 	getFormattedAmount,
 } from './utils';
-import { resolveCheckoutButtonForm, readCheckoutData } from './checkout-button-trigger';
+import { resolveCheckoutButtonForm, readCheckoutData, applyContextFields } from './checkout-button-trigger';
 import { applyCtaAttribution } from '../shared/js/cta-attribution';
 
 const CLASS_PREFIX = newspackBlocksModal.newspack_class_prefix;
@@ -165,12 +165,6 @@ domReady( () => {
 		onCheckoutPlaceOrderError( container, hideProcessingPaymentScreen );
 
 		onCheckoutReady( container, () => {
-			// Make sure the order summary renders the correct text.
-			const summaryTextNode = productDetails?.querySelector( 'strong' );
-			if ( summaryTextNode ) {
-				summaryTextNode.textContent = checkoutData.price_summary;
-			}
-
 			// Display initial errors if any.
 			if ( modalCheckout.initialErrors ) {
 				const errorContainer = document.createElement( 'div' );
@@ -369,20 +363,10 @@ domReady( () => {
 			const variationModal = [ ...variationModals ].find( modal => modal.dataset.productId === checkoutData.product_id );
 			if ( variationModal ) {
 				variationModal.querySelectorAll( `form[target="${ IFRAME_NAME }"]` ).forEach( singleVariationForm => {
-					// Fill in the hidden params in the variation modal.
-					[
-						'after_success_behavior',
-						'after_success_url',
-						'after_success_button_label',
-						'gate_post_id',
-						'newspack_popup_id',
-						'prompt_title',
-					].forEach( hiddenParam => {
-						const existingInputs = singleVariationForm.querySelectorAll( 'input[name="' + hiddenParam + '"]' );
-						if ( 0 === existingInputs.length ) {
-							singleVariationForm.prepend( createHiddenInput( hiddenParam, checkoutData[ hiddenParam ] ) );
-						}
-					} );
+					// Fill in the hidden params in the variation modal. The picker is
+					// shared by every button for this product and is never reset, so
+					// this overwrites the previous open's context rather than adding to it.
+					applyContextFields( singleVariationForm, checkoutData );
 
 					// Append the product data hidden inputs.
 					const data = readCheckoutData( singleVariationForm );
@@ -444,11 +428,6 @@ domReady( () => {
 		if ( shouldPromptRegistration() ) {
 			ev.preventDefault();
 
-			const priceSummary = checkoutData.price_summary;
-			const content = priceSummary
-				? `<div class="order-details-summary ${ CLASS_PREFIX }__box ${ CLASS_PREFIX }__box--text-center"><p><strong>${ priceSummary }</strong></p></div>`
-				: '';
-
 			// Generate cart asynchroneously.
 			const cartReq = generateCart( checkoutData );
 
@@ -499,7 +478,6 @@ domReady( () => {
 						title: newspackBlocksModal.labels.register_modal_title,
 					},
 				},
-				content,
 				trigger: ev.submitter,
 				closeOnSuccess: isModalCheckout,
 			} );

package/src/modal-checkout/templates/form-checkout.php

@@ -42,27 +42,17 @@ if ( ! $checkout->is_registration_enabled() && $checkout->is_registration_requir
 			?>
 			<div class="order-review-wrapper hidden">
 				<?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>
-				<button id="order_review_heading" aria-expanded="false" aria-controls="order_review_content" class="newspack-ui__button newspack-ui__button--ghost" type="button">
-					<?php esc_html_e( 'Transaction details', 'newspack-blocks' ); ?>
-					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<path d="M15.9899 10.8888L12.0018 14.3071L8.01368 10.8888L8.98986 9.74988L12.0018 12.3315L15.0137 9.74988L15.9899 10.8888Z"/>
-					</svg>
-				</button>
-				<div class="transaction-details-content">
-					<div class="transaction-details-content-inner" id="order_review_content">
-						<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
-						<div id="order_review" class="woocommerce-checkout-review-order newspack-ui__box">
-							<?php
-							if ( wp_is_block_theme() && function_exists( 'woocommerce_order_review' ) ) {
-								woocommerce_order_review();
-							} else {
-								do_action( 'woocommerce_checkout_order_review' );
-							}
-							?>
-						</div>
-						<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
-					</div>
+				<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
+				<div id="order_review" class="woocommerce-checkout-review-order newspack-ui__box">
+					<?php
+					if ( wp_is_block_theme() && function_exists( 'woocommerce_order_review' ) ) {
+						woocommerce_order_review();
+					} else {
+						do_action( 'woocommerce_checkout_order_review' );
+					}
+					?>
 				</div>
+				<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
 			</div>
 			<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
 			<button class="newspack-ui__button newspack-ui__button--secondary newspack-ui__button--wide" id="checkout_edit_billing" type="button"><?php echo esc_html( Modal_Checkout::get_modal_checkout_labels( 'checkout_edit_billing' ) ); ?></button>

package/src/modal-checkout/templates/form-coupon.php

@@ -12,6 +12,15 @@ if ( ! wc_coupons_enabled() ) { // @codingStandardsIgnoreLine.
 	return;
 }
 
+// Hide the coupon form when a coupon was auto-applied from a Checkout Button
+// block — the reader didn't enter the code, so don't prompt them for one.
+if (
+	class_exists( '\Newspack_Blocks\Modal_Checkout' )
+	&& \Newspack_Blocks\Modal_Checkout::should_hide_coupon_form()
+) {
+	return;
+}
+
 ?>
 <form class="modal_checkout_coupon woocommerce-form-coupon" method="post">
 	<h3><?php esc_html_e( 'Apply a coupon code', 'newspack-blocks' ); ?></h3>

package/src/modal-checkout/templates/thankyou.php

@@ -60,7 +60,7 @@ $checkout_data          = Checkout_Data::get_checkout_data( $order );
 				<path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"></path>
 			</svg>
 		</span>
-		<p id="modal-checkout-product-details" data-checkout='<?php echo wp_json_encode( $checkout_data ); ?>'>
+		<p id="modal-checkout-product-details" <?php Checkout_Data::print_data_checkout_attr( $checkout_data ); ?>>
 			<strong>
 				<?php
 					echo esc_html( Modal_Checkout::get_post_checkout_success_text() );

package/vendor/composer/installed.php

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

package/webpack.config.js

@@ -9,6 +9,7 @@
  */
 const fs = require( 'fs' );
 const getBaseWebpackConfig = require( 'newspack-scripts/config/getWebpackConfig' );
+const { findSourceFile, resolveSourceFile } = require( 'newspack-scripts/config/resolveSource' );
 const path = require( 'path' );
 const isDevelopment = process.env.NODE_ENV !== 'production';
 const blockListFile = process.env.npm_config_block_list || 'block-list.json';
@@ -20,26 +21,19 @@ const blockList = JSON.parse( fs.readFileSync( blockListFile ) );
 const editorSetup = path.join( __dirname, 'src', 'setup', 'editor' );
 
 function blockScripts( type, inputDir, blocks ) {
-	return blocks.map( block => path.join( inputDir, 'blocks', block, `${ type }.js` ) ).filter( fs.existsSync );
+	return blocks.map( block => findSourceFile( path.join( inputDir, 'blocks', block, type ) ) ).filter( Boolean );
 }
 
 const blocksDir = path.join( __dirname, 'src', 'blocks' );
 const blocks = fs
 	.readdirSync( blocksDir )
 	.filter( block => isDevelopment || blockList.production.includes( block ) )
-	.filter( block => fs.existsSync( path.join( __dirname, 'src', 'blocks', block, 'editor.js' ) ) );
+	.filter( block => findSourceFile( path.join( blocksDir, block, 'editor' ) ) );
 
 // Helps split up each block into its own folder view script
 const viewBlocksScripts = blocks.reduce( ( viewBlocks, block ) => {
-	const pathToBlock = [ __dirname, 'src', 'blocks', block ];
-	let viewScriptPath = path.join( ...pathToBlock, 'view.js' );
-	let fileExists = fs.existsSync( viewScriptPath );
-	if ( ! fileExists ) {
-		// Try TS.
-		viewScriptPath = path.join( ...pathToBlock, 'view.ts' );
-		fileExists = fs.existsSync( viewScriptPath );
-	}
-	if ( fileExists ) {
+	const viewScriptPath = findSourceFile( path.join( blocksDir, block, 'view' ) );
+	if ( viewScriptPath ) {
 		viewBlocks[ block + '/view' ] = viewScriptPath;
 	}
 	return viewBlocks;
@@ -56,7 +50,7 @@ const entry = {
 	placeholder_blocks: placeholderBlocksScript,
 	editor: editorScript,
 	block_styles: blockStylesScript,
-	modal: path.join( __dirname, 'src/modal-checkout/modal.js' ),
+	modal: resolveSourceFile( path.join( __dirname, 'src/modal-checkout/modal' ) ),
 	modalCheckout: path.join( __dirname, 'src/modal-checkout' ),
 	frequencyBased: path.join( __dirname, 'src/blocks/donate/frequency-based' ),
 	tiersBased: path.join( __dirname, 'src/blocks/donate/tiers-based' ),