feat: redesign modal checkout

src/modal-checkout/modal.js

@@ -40,7 +40,7 @@ function closeCheckout() {
 		iframeResizeObserver.disconnect();
 	}
 	Array.from( document.querySelectorAll( '.newspack-blocks-modal' ) ).forEach( el => {
-		el.style.display = 'none';
+		el.classList.remove( 'open' );
 		if ( el.overlayId && window.newspackReaderActivation?.overlays ) {
 			window.newspackReaderActivation?.overlays.remove( el.overlayId );
 		}
@@ -129,7 +129,7 @@ domReady( () => {
 			form.addEventListener( 'submit', ev => {
 				const formData = new FormData( form );
 				// Clear any open variation modal.
-				variationModals.forEach( variationModal => ( variationModal.style.display = 'none' ) );
+				variationModals.forEach( variationModal => variationModal.classList.remove( 'open' ) );
 				// Trigger variation modal if variation is not selected.
 				if ( formData.get( 'is_variable' ) && ! formData.get( 'variation_id' ) ) {
 					const variationModal = [ ...variationModals ].find(
@@ -155,67 +155,54 @@ domReady( () => {
 						// Open the variations modal.
 						ev.preventDefault();
 						document.body.classList.add( 'newspack-modal-checkout-open' );
-						variationModal.style.display = 'block';
+						variationModal.classList.add( 'open' );
 						return;
 					}
 				}
 				// Continue with checkout modal.
 				spinner.style.display = 'flex';
-				modalCheckout.style.display = 'block';
+				modalCheckout.classList.add( 'open' );
 				document.body.classList.add( 'newspack-modal-checkout-open' );
 				if ( window.newspackReaderActivation?.overlays ) {
 					modalCheckout.overlayId = window.newspackReaderActivation?.overlays.add();
 				}
-
 				iframeResizeObserver = new ResizeObserver( entries => {
 					if ( ! entries || ! entries.length ) {
 						return;
 					}
 					const contentRect = entries[ 0 ].contentRect;
 					if ( contentRect ) {
 						modalContent.style.height = contentRect.top + contentRect.bottom + 'px';
-						spinner.style.display = 'none';
-					}
-				} );
-				iframe.addEventListener( 'load', () => {
-					const location = iframe.contentWindow.location;
-					// If RAS is available, set the front-end authentication.
-					if ( window.newspackReaderActivation && location.href.indexOf( 'order-received' ) > -1 ) {
-						const ras = window.newspackReaderActivation;
-						const params = new Proxy( new URLSearchParams( location.search ), {
-							get: ( searchParams, prop ) => searchParams.get( prop ),
-						} );
-						if ( params.email ) {
-							ras.setReaderEmail( params.email );
-							ras.setAuthenticated( true );
-						}
-					}
-					const container = iframe.contentDocument.querySelector( '#newspack_modal_checkout' );
-					if ( container ) {
-						iframeResizeObserver.observe( container );
-					}
-					const innerButtons = [
-						...iframe.contentDocument.querySelectorAll( '.modal-continue, .edit-billing-link' ),
-					];
-					innerButtons.forEach( innerButton => {
-						innerButton.addEventListener( 'click', () => ( spinner.style.display = 'flex' ) );
-					} );
-					const innerForm = iframe.contentDocument.querySelector( '.checkout' );
-					if ( innerForm ) {
-						const innerBillingFields = [
-							...innerForm.querySelectorAll( '.woocommerce-billing-fields input' ),
-						];
-						innerBillingFields.forEach( innerField => {
-							innerField.addEventListener( 'keyup', e => {
-								if ( 'Enter' === e.key ) {
-									spinner.style.display = 'flex';
-									innerForm.submit();
-								}
-							} );
-						} );
 					}
 				} );
 			} );
 		} );
 	} );
+	iframe.addEventListener( 'load', () => {
+		const location = iframe.contentWindow.location;
+		// If RAS is available, set the front-end authentication.
+		if ( window.newspackReaderActivation && location.href.indexOf( 'order-received' ) > -1 ) {
+			const ras = window.newspackReaderActivation;
+			const params = new Proxy( new URLSearchParams( location.search ), {
+				get: ( searchParams, prop ) => searchParams.get( prop ),
+			} );
+			if ( params.email ) {
+				ras.setReaderEmail( params.email );
+				ras.setAuthenticated( true );
+			}
+		}
+		const container = iframe.contentDocument.querySelector( '#newspack_modal_checkout' );
+		if ( container ) {
+			iframeResizeObserver.observe( container );
+			if ( container.checkoutReady ) {
+				spinner.style.display = 'none';
+			} else {
+				container.addEventListener( 'checkout-ready', () => {
+					spinner.style.display = 'none';
+				} );
+			}
+		} else {
+			spinner.style.display = 'none';
+		}
+	} );
 } );

src/modal-checkout/modal.scss

@@ -20,37 +20,67 @@
 	width: 100%;
 	height: 100%;
 	background: rgba( 0, 0, 0, 0.75 );
-	z-index: 99999;
-	&__content {
+	visibility: hidden;
+	pointer-events: none;
+	z-index: -1;
+	opacity: 0;
+	transition: opacity 0.2s ease-in-out;
+	&__container {
+		border-radius: 6px;
+		background: colors.$color__background-body;
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		transform: translate( -50%, -50% );
 		width: calc( 100vw - 32px );
-		max-width: 580px;
-		min-height: 200px;
-		max-height: calc( 100vh - 32px );
-		background: colors.$color__background-body;
-		border-radius: 5px;
-		> *:not( .newspack-blocks-modal__close ) {
+		max-width: 600px;
+		min-height: 300px;
+		max-height: 90vh;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		transform: translate( -50%, -50% ) translateY( 50px );
+		transition: transform 0.2s ease-in-out;
+	}
+	&.open {
+		z-index: 99999;
+		visibility: visible;
+		pointer-events: auto;
+		opacity: 1;
+		.newspack-blocks-modal__container {
+			transform: translate( -50%, -50% );
+		}
+	}
+	&__header {
+		padding: 24px;
+		box-sizing: border-box;
+		height: 64px;
+		border-bottom: 1px solid #ddd;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		h2 {
+			font-size: 16px;
+		}
+	}
+	&__content {
+		position: relative;
+		flex-grow: 1;
+		> * {
 			width: 100%;
 			height: 100%;
 			border: 0;
-			border-radius: 5px;
+			border-radius: 6px;
 		}
 	}
 	&__spinner {
 		align-items: center;
 		background: #fff;
 		border-radius: 5px;
 		display: flex;
-		height: 100%;
 		justify-content: center;
-		left: 50%;
-		opacity: 0.5;
 		position: absolute;
-		top: 50%;
-		transform: translate( -50%, -50% );
+		top: 0;
+		bottom: 0;
 		width: 100%;
 		> span {
 			animation: spin 1s infinite linear;
@@ -59,12 +89,11 @@
 			border-radius: 50%;
 			height: 25px;
 			width: 25px;
+			margin-top: -12.5px;
+			margin-left: -12.5px;
 		}
 	}
 	&__close {
-		position: absolute;
-		top: 0;
-		right: 0;
 		padding: 8px;
 		border: 0;
 		background: transparent;
@@ -147,17 +176,14 @@
 
 @media ( max-width: 600px ) {
 	.newspack-blocks-modal {
-		&__content {
+		&__container {
 			max-width: 100%;
 			width: 100%;
 			border-radius: 0;
 			top: auto;
 			bottom: 0;
 			left: 0;
-			transform: none;
-			> *:not( .newspack-blocks-modal__close ) {
-				border-radius: 0;
-			}
+			transform: none !important;
 		}
 	}
 }