feat: add toggle for transaction details (#2049)

Automattic · Feb 20, 2025 · d254aca · d254aca
1 parent 9ab2c62
commit d254aca
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 5 deletions.
diff --git a/src/modal-checkout/checkout.scss b/src/modal-checkout/checkout.scss
@@ -83,6 +83,58 @@
 			#ppc-button-googlepay-container {
 				margin-bottom: var(--newspack-ui-spacer-2, 12px);
 			}
+
+			.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 {
+						transition: rotate 125ms ease-in-out;
+					}
+				}
+
+				// 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);
+				}
+			}
 		}
 
 		// Override label styles from theme

diff --git a/src/modal-checkout/index.js b/src/modal-checkout/index.js
@@ -113,7 +113,14 @@ import { domReady } from './utils';
 					if ( ! $wrapper.length ) {
 						return;
 					}
+
 					const $el = $wrapper.clone();
+
+					// Make sure Transaction Details toggle's aria-expanded value is correct in cloned version.
+					if ( $( '#after_customer_details').hasClass( 'transaction-details-expanded' ) ) {
+						$('[id="order_review_heading"]', $el).attr( 'aria-expanded', 'true' );
+					}
+
 					// Remove existing table from inside the payment methods.
 					$( '#payment .order-review-wrapper' ).remove();
 					const $table = $el.find( 'table' );
@@ -130,6 +137,18 @@ import { domReady } from './utils';
 					$( '.payment_methods' ).after( $el );
 				} );
 
+				/**
+				 * 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.
 				 */

diff --git a/src/modal-checkout/templates/form-checkout.php b/src/modal-checkout/templates/form-checkout.php
@@ -36,12 +36,21 @@
 		<div id="after_customer_details">
 			<div class="order-review-wrapper hidden">
 				<?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>
-				<h3 id="order_review_heading"><?php esc_html_e( 'Transaction details', 'newspack-blocks' ); ?></h3>
-				<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
-				<div id="order_review" class="woocommerce-checkout-review-order newspack-ui__box">
-					<?php do_action( 'woocommerce_checkout_order_review' ); ?>
+				<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 do_action( 'woocommerce_checkout_order_review' ); ?>
+						</div>
+						<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
+					</div>
 				</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--ghost newspack-ui__button--wide" id="checkout_back" type="button"><?php echo esc_html( Modal_Checkout::get_modal_checkout_labels( 'checkout_back' ) ); ?></button>