Hide Platform Checkout iframe on browser back button (#4365)

* Hide Platform Checkout iframe on browser back button

* Add changelog entry

Author: alefesouza

changelog/fix-4364-hide-platform-checkout-iframe-on-browser-back-button

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Hide Platform Checkout iframe on browser back button.

client/checkout/platform-checkout/email-input-iframe.js

@@ -164,13 +164,16 @@ export const handlePlatformCheckoutEmailInput = ( field, api ) => {
 	iframeWrapper.insertBefore( iframeArrow, null );
 	iframeWrapper.insertBefore( iframe, null );
 
-	const closeIframe = () => {
+	const closeIframe = ( focus = true ) => {
 		window.removeEventListener( 'resize', getWindowSize );
 		window.removeEventListener( 'resize', setPopoverPosition );
 
 		iframeWrapper.remove();
 		iframe.classList.remove( 'open' );
-		platformCheckoutEmailInput.focus();
+
+		if ( focus ) {
+			platformCheckoutEmailInput.focus();
+		}
 
 		document.body.style.overflow = '';
 	};
@@ -259,24 +262,39 @@ export const handlePlatformCheckoutEmailInput = ( field, api ) => {
 
 	// Prevent show platform checkout iframe if the page comes from
 	// the back button on platform checkout itself.
-	const searchParams = new URLSearchParams( window.location.search );
+	window.addEventListener( 'pageshow', function ( event ) {
+		// Detect browser back button.
+		const historyTraversal =
+			event.persisted ||
+			( 'undefined' !== typeof performance &&
+				'back_forward' ===
+					performance.getEntriesByType( 'navigation' )[ 0 ].type );
 
-	if ( 'true' !== searchParams.get( 'skip_platform_checkout' ) ) {
-		// Check the initial value of the email input and trigger input validation.
-		if ( validateEmail( platformCheckoutEmailInput.value ) ) {
-			platformCheckoutLocateUser( platformCheckoutEmailInput.value );
-		}
-	} else {
-		searchParams.delete( 'skip_platform_checkout' );
+		const searchParams = new URLSearchParams( window.location.search );
+
+		if (
+			! historyTraversal &&
+			'true' !== searchParams.get( 'skip_platform_checkout' )
+		) {
+			// Check the initial value of the email input and trigger input validation.
+			if ( validateEmail( platformCheckoutEmailInput.value ) ) {
+				platformCheckoutLocateUser( platformCheckoutEmailInput.value );
+			}
+		} else {
+			searchParams.delete( 'skip_platform_checkout' );
 
-		let { pathname } = window.location;
+			let { pathname } = window.location;
 
-		if ( '' !== searchParams.toString() ) {
-			pathname += '?' + searchParams.toString();
-		}
+			if ( '' !== searchParams.toString() ) {
+				pathname += '?' + searchParams.toString();
+			}
 
-		history.replaceState( null, null, pathname );
-	}
+			history.replaceState( null, null, pathname );
+
+			// Safari needs to close iframe with this.
+			closeIframe( false );
+		}
+	} );
 
 	platformCheckoutEmailInput.addEventListener( 'input', ( e ) => {
 		const email = e.currentTarget.value;