feat(modal-checkout): render order details under different conditions

includes/class-modal-checkout.php

@@ -42,6 +42,7 @@ public static function init() {
 		add_filter( 'wc_get_template', [ __CLASS__, 'wc_get_template' ], 10, 2 );
 		add_filter( 'woocommerce_checkout_get_value', [ __CLASS__, 'woocommerce_checkout_get_value' ], 10, 2 );
 		add_filter( 'woocommerce_checkout_fields', [ __CLASS__, 'woocommerce_checkout_fields' ] );
+		add_filter( 'woocommerce_update_order_review_fragments', [ __CLASS__, 'order_review_fragments' ] );
 	}
 
 	/**
@@ -481,5 +482,48 @@ function( $field ) {
 		}
 		return true;
 	}
+
+	/**
+	 * Whether to show order details table.
+	 *
+	 * @return bool
+	 */
+	private static function should_show_order_details() {
+		$cart = \WC()->cart;
+		if ( $cart->is_empty() ) {
+			return false;
+		}
+		if ( ! empty( $cart->get_applied_coupons() ) ) {
+			return true;
+		}
+		if ( \wc_tax_enabled() && ! $cart->display_prices_including_tax() ) {
+			return true;
+		}
+		if ( 1 < $cart->get_cart_contents_count() ) {
+			return true;
+		}
+		return false;
+	}
+
+	/**
+	 * Customize order review fragments on cart updates.
+	 *
+	 * @param array $fragments Fragments.
+	 *
+	 * @return array
+	 */
+	public static function order_review_fragments( $fragments ) {
+		if ( isset( $_POST['post_data'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Missing
+			parse_str( \sanitize_text_field( \wp_unslash( $_POST['post_data'] ) ), $post_data ); // phpcs:ignore WordPress.Security.NonceVerification.Missing
+		}
+		if ( ! isset( $post_data['modal_checkout'] ) ) {
+			return $fragments;
+		}
+		if ( ! self::should_show_order_details() ) {
+			// Render an empty table so WC knows how to replace it on updates.
+			$fragments['.woocommerce-checkout-review-order-table'] = '<table class="shop_table woocommerce-checkout-review-order-table empty"></table>';
+		}
+		return $fragments;
+	}
 }
 Modal_Checkout::init();

src/modal-checkout/checkout.scss

@@ -28,6 +28,10 @@
 		td {
 			font-size: 0.8rem;
 		}
+		&.empty {
+			margin: 0;
+			padding: 0;
+		}
 	}
 	.woocommerce-billing-fields {
 		margin-bottom: 16px;
@@ -78,7 +82,8 @@
 		#payment button#place_order { /* stylelint-disable-line */
 			margin-bottom: 0;
 		}
-		button {
+		.checkout-billing button[type='submit'],
+		button.modal-continue {
 			display: block;
 			width: 100%;
 		}

src/modal-checkout/index.js

@@ -2,3 +2,35 @@
  * Style dependencies
  */
 import './checkout.scss';
+
+/**
+ * Specify a function to execute when the DOM is fully loaded.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/dom-ready/
+ *
+ * @param {Function} callback A function to execute after the DOM is ready.
+ * @return {void}
+ */
+function domReady( callback ) {
+	if ( typeof document === 'undefined' ) {
+		return;
+	}
+	if (
+		document.readyState === 'complete' || // DOMContentLoaded + Images/Styles/etc loaded, so we call directly.
+		document.readyState === 'interactive' // DOMContentLoaded fires at this point, so we call directly.
+	) {
+		return void callback();
+	}
+	// DOMContentLoaded has not fired yet, delay callback until then.
+	document.addEventListener( 'DOMContentLoaded', callback );
+}
+
+domReady( () => {
+	const continueButton = document.querySelector( '.modal-continue' );
+	if ( continueButton ) {
+		continueButton.addEventListener( 'click', () => {
+			const form = document.querySelector( '.checkout' );
+			form.submit();
+		} );
+	}
+} );

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

@@ -13,14 +13,20 @@
 // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound -- WooCommerce hooks.
 // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Template variables.
 
+$cart = WC()->cart;
+
 $has_filled_billing = \Newspack_Blocks\Modal_Checkout::has_filled_required_fields( 'billing' );
 $edit_billing       = ! $has_filled_billing || isset( $_REQUEST['edit_billing'] ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended
 
 $form_action         = $edit_billing ? '#checkout' : wc_get_checkout_url();
-$form_class          = $edit_billing ? 'edit-billing' : 'checkout woocommerce-checkout';
+$form_class          = 'checkout woocommerce-checkout';
 $form_method         = $edit_billing ? 'get' : 'post';
 $form_billing_fields = \Newspack_Blocks\Modal_Checkout::get_prefilled_fields();
 
+if ( $edit_billing ) {
+	$form_class .= ' edit-billing';
+}
+
 do_action( 'woocommerce_before_checkout_form', $checkout );
 
 // If checkout registration is disabled and not logged in, the user cannot checkout.
@@ -30,18 +36,11 @@
 }
 ?>
 
-<form name="checkout" method="<?php echo esc_attr( $form_method ); ?>" class="<?php echo esc_attr( $form_class ); ?>" action="<?php echo esc_url( $form_action ); ?>" enctype="multipart/form-data">
-
-	<input type="hidden" name="modal_checkout" value="1" />
-	<?php
-	if ( $edit_billing ) {
-		wp_nonce_field( 'newspack_blocks_edit_billing', 'newspack_blocks_edit_billing_nonce' );
-	}
-	?>
+<?php if ( 1 === $cart->get_cart_contents_count() ) : ?>
 	<div class="order-details-summary">
 		<?php
 		// Simplified output of order.
-		foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
+		foreach ( $cart->get_cart() as $cart_item_key => $cart_item ) {
 			$_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
 
 			if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_checkout_cart_item_visible', true, $cart_item, $cart_item_key ) ) {
@@ -56,7 +55,7 @@
 			</strong>
 			<span>
 				<?php
-				echo apply_filters( 'woocommerce_cart_item_subtotal', WC()->cart->get_product_subtotal( $_product, $cart_item['quantity'] ), $cart_item, $cart_item_key ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+				echo apply_filters( 'woocommerce_cart_item_subtotal', $cart->get_product_subtotal( $_product, $cart_item['quantity'] ), $cart_item, $cart_item_key ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 				?>
 			</span>
 		</h4>
@@ -65,12 +64,26 @@
 		}
 		?>
 	</div><!-- .order-details-summary -->
+<?php endif; ?>
 
-	<?php if ( wc_tax_enabled() && ! WC()->cart->display_prices_including_tax() && ! $edit_billing ) : ?>
+<form name="checkout" method="<?php echo esc_attr( $form_method ); ?>" class="<?php echo esc_attr( $form_class ); ?>" action="<?php echo esc_url( $form_action ); ?>" enctype="multipart/form-data">
+
+	<input type="hidden" name="modal_checkout" value="1" />
+	<?php
+	if ( $edit_billing ) {
+		wp_nonce_field( 'newspack_blocks_edit_billing', 'newspack_blocks_edit_billing_nonce' );
+	}
+	?>
+
+	<div id="order-details-wrapper">
+		<?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>
+		<h3 id="order_review_heading" class="screen-reader-text"><?php esc_html_e( 'Order Details', 'newspack-blocks' ); ?></h3>
+		<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
 		<div id="order_review" class="woocommerce-checkout-review-order">
 			<?php do_action( 'woocommerce_checkout_order_review' ); ?>
 		</div>
-	<?php endif; ?>
+		<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
+	</div><!-- .full-order-details -->
 
 	<?php if ( $checkout->get_checkout_fields() ) : ?>
 
@@ -79,7 +92,7 @@
 		<?php if ( $edit_billing ) : ?>
 			<div class="checkout-billing">
 				<?php do_action( 'woocommerce_checkout_billing' ); ?>
-				<button type="submit" class="button alt wp-element-button"><?php esc_html_e( 'Continue', 'newspack-blocks' ); ?></button>
+				<button type="button" class="button alt wp-element-button modal-continue"><?php esc_html_e( 'Continue', 'newspack-blocks' ); ?></button>
 			</div>
 		<?php else : ?>
 			<div class="checkout-billing checkout-billing-summary">