From 1e113bb195446d70a2a933c4784407e0189dc3c6 Mon Sep 17 00:00:00 2001
From: Rasmy Nguyen <rtnguyen87@gmail.com>
Date: Thu, 25 Jan 2024 16:42:22 -0500
Subject: [PATCH] feat(modal-checkout): apply default styles

---
 includes/class-modal-checkout.php |  28 ++++--
 src/modal-checkout/modal.js       |  26 +++---
 src/modal-checkout/modal.scss     | 146 +++++++++++++++++++++++++++++-
 3 files changed, 175 insertions(+), 25 deletions(-)

diff --git a/includes/class-modal-checkout.php b/includes/class-modal-checkout.php
index ec6388fd8..fe598ad28 100644
--- a/includes/class-modal-checkout.php
+++ b/includes/class-modal-checkout.php
@@ -288,22 +288,27 @@ public static function render_modal_markup() {
 		*
 		* @param string $title The title.
 		*/
-		$title = apply_filters( 'newspack_blocks_modal_checkout_title', __( 'Complete your transaction', 'newspack-blocks' ) );
+		$title        = apply_filters( 'newspack_blocks_modal_checkout_title', __( 'Complete your transaction', 'newspack-blocks' ) );
+		$class_prefix = 'newspack-blocks';
+
+		if ( class_exists( '\Newspack\Newspack_UI' ) ) {
+			$class_prefix = 'newspack-ui';
+		}
 		?>
-		<div class="newspack-ui newspack-ui__modal-container">
-			<div class="newspack-ui__modal-container__overlay"></div>
-			<div class="newspack-ui__modal">
-				<header class="newspack-ui__modal__header">
+		<div class="<?php echo esc_attr( $class_prefix ) . esc_attr( $class_prefix ) . '__modal-container'; ?>">
+			<div class="<?php echo esc_attr( $class_prefix ) . '__modal-container__overlay'; ?>"></div>
+			<div class="<?php echo esc_attr( $class_prefix ) . '__modal'; ?>">
+			<header class="<?php echo esc_attr( $class_prefix ) . '__modal__header'; ?>">
 					<h2><?php echo esc_html( $title ); ?></h2>
-					<button class="newspack-ui__modal__close">
+					<button class="<?php echo esc_attr( $class_prefix ) . '__modal__close'; ?>">
 						<span class="screen-reader-text"><?php esc_html_e( 'Close', 'newspack-blocks' ); ?></span>
 						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
 							<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
 						</svg>
 					</button>
 				</header>
-				<section class="newspack-ui__modal__content">
-					<div class="newspack-ui__spinner">
+				<section class="<?php echo esc_attr( $class_prefix ) . '__modal__content'; ?>">
+					<div class="<?php echo esc_attr( $class_prefix ) . '__spinner'; ?>">
 						<span></span>
 					</div>
 				</section>
@@ -458,6 +463,13 @@ public static function enqueue_modal( $product_id = null ) {
 			\NEWSPACK_BLOCKS__VERSION,
 			true
 		);
+		wp_localize_script(
+			'newspack-blocks-modal',
+			'newspackBlocksModal',
+			[
+				'has_newspack_ui' => class_exists( '\Newspack\Newspack_UI' ),
+			]
+		);
 		wp_enqueue_style(
 			'newspack-blocks-modal',
 			plugins_url( 'dist/modal.css', \NEWSPACK_BLOCKS__PLUGIN_FILE ),
diff --git a/src/modal-checkout/modal.js b/src/modal-checkout/modal.js
index 14544bfcc..cbda5189b 100644
--- a/src/modal-checkout/modal.js
+++ b/src/modal-checkout/modal.js
@@ -1,3 +1,5 @@
+/* globals newspackBlocksModal */
+
 /**
  * Internal dependencies
  */
@@ -25,6 +27,9 @@ function domReady( callback ) {
 	document.addEventListener( 'DOMContentLoaded', callback );
 }
 
+const CLASSNAME_BASE = newspackBlocksModal.has_newspack_ui ? 'newspack-ui' : 'newspack-blocks';
+const MODAL_CLASSNAME_BASE = `${ CLASSNAME_BASE }__modal`;
+
 const triggers =
 	'.wpbnbd.wpbnbd--platform-wc,.wp-block-newspack-blocks-checkout-button,.newspack-blocks-variation-modal';
 
@@ -38,7 +43,7 @@ function closeCheckout() {
 	if ( iframeResizeObserver ) {
 		iframeResizeObserver.disconnect();
 	}
-	Array.from( document.querySelectorAll( '.newspack-ui__modal-container' ) ).forEach( el => {
+	Array.from( document.querySelectorAll( `.${ MODAL_CLASSNAME_BASE }-container` ) ).forEach( el => {
 		closeModal( el );
 		if ( el.overlayId && window.newspackReaderActivation?.overlays ) {
 			window.newspackReaderActivation?.overlays.remove( el.overlayId );
@@ -46,44 +51,41 @@ function closeCheckout() {
 	} );
 }
 
-function openModal( el ) {
-	el.setAttribute( 'data-state', 'open' );
-}
-
 function closeModal( el ) {
 	el.setAttribute( 'data-state', 'closed' );
 }
 
-window.newspackCloseModalCheckout = closeCheckout;
+function openModal( el ) {
+	el.setAttribute( 'data-state', 'open' );
+}
 
-const MODAL_CLASSNAME_BASE = '.newspack-ui__modal';
+window.newspackCloseModalCheckout = closeCheckout;
 
 domReady( () => {
 	/**
 	 * Initialize modal checkout.
 	 */
-	const modalCheckout = document.querySelector( '.newspack-ui__modal-container' );
+	const modalCheckout = document.querySelector( `.${ MODAL_CLASSNAME_BASE }-container` );
 	if ( ! modalCheckout ) {
 		return;
 	}
-	const spinner = document.querySelector( '.newspack-ui__spinner' );
+	const spinner = document.querySelector( `.${ CLASSNAME_BASE }__spinner` );
 	const iframeName = 'newspack_modal_checkout_iframe';
 	const modalCheckoutInput = document.createElement( 'input' );
 	modalCheckoutInput.type = 'hidden';
 	modalCheckoutInput.name = 'modal_checkout';
 	modalCheckoutInput.value = '1';
-	const modalContent = modalCheckout.querySelector( `${ MODAL_CLASSNAME_BASE }__content` );
+	const modalContent = modalCheckout.querySelector( `.${ MODAL_CLASSNAME_BASE }__content` );
 	const initialHeight = modalContent.clientHeight + 'px';
 	const iframe = document.createElement( 'iframe' );
 	iframe.name = iframeName;
-	iframe.scrolling = 'no';
 	modalContent.appendChild( iframe );
 	modalCheckout.addEventListener( 'click', ev => {
 		if ( ev.target === modalCheckout ) {
 			closeCheckout();
 		}
 	} );
-	const closeButtons = modalCheckout.querySelectorAll( `${ MODAL_CLASSNAME_BASE }__close` );
+	const closeButtons = modalCheckout.querySelectorAll( `.${ MODAL_CLASSNAME_BASE }__close` );
 	closeButtons.forEach( button => {
 		button.addEventListener( 'click', ev => {
 			ev.preventDefault();
diff --git a/src/modal-checkout/modal.scss b/src/modal-checkout/modal.scss
index 24dd896eb..fe09d1a84 100644
--- a/src/modal-checkout/modal.scss
+++ b/src/modal-checkout/modal.scss
@@ -1,3 +1,132 @@
+@use '../shared/sass/colors';
+@use '../shared/sass/variables';
+
+// Checkout modal specific styles.
+iframe[name="newspack_modal_checkout_iframe"] {
+	width: 100%;
+	height: 100%;
+	border: none;
+}
+
+// Default modal styles when newspack ui is not present.
+.newspack-blocks {
+	&__modal-container {
+		position: fixed;
+		z-index: -1;
+		inset: 0;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		visibility: hidden;
+		pointer-events: none;
+
+		&__overlay {
+			position: absolute;
+			z-index: 1;
+			inset: 0;
+			opacity: 0;
+			background: rgba( 0, 0, 0, 0.5 );
+			transition: opacity 0.1s linear;
+		}
+
+		&[data-state='open'] {
+			z-index: 99999;
+			visibility: visible;
+			pointer-events: auto;
+			.newspack-blocks__modal-container__overlay {
+				opacity: 1;
+			}
+			.newspack-blocks__modal {
+				opacity: 1;
+				transform: translateY( 0 );
+			}
+		}
+
+		& .newspack-blocks {
+			&__modal {
+				position: relative;
+				z-index: 2;
+				width: 100%;
+				transform: translateY( 50px );
+				opacity: 0;
+				transition: transform 0.1s linear, opacity 0.1s linear;
+				border-radius: 6px;
+				background: colors.$color__background-body;
+				max-width: 600px;
+				max-height: 90vh;
+				min-height: 300px;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				overflow: auto;
+
+				&__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 {
+					padding: 24px;
+					position: relative;
+					flex-grow: 1;
+					> * {
+						width: 100%;
+						height: 100%;
+						border: 0;
+						border-radius: 6px;
+					}
+				}
+
+				&__close {
+					padding: 8px;
+					border: 0;
+					background: transparent;
+					color: colors.$color__text-main;
+					cursor: pointer;
+					&:focus,
+					&:hover {
+						color: colors.$color__text-light;
+					}
+					svg {
+						display: block;
+					}
+				}
+			}
+
+			&__spinner {
+				align-items: center;
+				background: #fff;
+				border-radius: 5px;
+				display: flex;
+				justify-content: center;
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				width: calc( 100% - 24px );
+				> span {
+					animation: spin 1s infinite linear;
+					border: 2px solid colors.$color__background-body;
+					border-top-color: colors.$color__text-light;
+					border-radius: 50%;
+					height: 25px;
+					width: 25px;
+					margin-top: -12.5px;
+					margin-left: -12.5px;
+				}
+			}
+		}
+	}
+}
+
 .newspack-blocks-variation-modal {
 	.newspack-blocks-modal {
 		&__content {
@@ -63,9 +192,16 @@
 	}
 }
 
-// Checkout modal specific styles.
-iframe[name="newspack_modal_checkout_iframe"] {
-	width: 100%;
-	height: 100%;
-	border: none;
+
+@keyframes spin {
+	0% {
+		transform: rotate( 0deg );
+	}
+	50% {
+		transform: rotate( 180deg );
+	}
+	100% {
+		transform: rotate( 360deg );
+	}
 }
+