Signup: suspend Blackbox on inactive social-first screens

Both screens of the social-first signup stay mounted and are hidden via
CSS visibility stacking, so the challenge widget (which sets its own
visibility inside a closed shadow root) bled through onto the selection
screen and consumed a session before email was even picked.

Add a `suspended` flag to `useBlackboxProtection` (exposed as a
`blackboxSuspended` prop by `withBlackboxProtection`) and gate each
stacked `PasswordlessSignupForm` on its screen being active. `useBlackbox`
now sets loading when enabled after mount and clears blocking state when
suspended mid-challenge.

Author: Usiel

client/blocks/login/use-blackbox-protection.tsx

@@ -22,6 +22,12 @@ interface UseBlackboxProtectionOptions {
 	 * `getSessionId` is a no-op so no SDK load/collect happens.
 	 */
 	feature: string;
+	/**
+	 * Keep Blackbox off while the host form is mounted but not the active
+	 * surface (e.g. hidden behind another step). No collect happens and no
+	 * challenge can render until this flips back to false.
+	 */
+	suspended?: boolean;
 }
 
 const noopGetSessionId = () => Promise.resolve( undefined );
@@ -31,8 +37,10 @@ const noopGetSessionId = () => Promise.resolve( undefined );
  */
 export function useBlackboxProtection( {
 	feature,
+	suspended,
 }: UseBlackboxProtectionOptions ): BlackboxProtection {
 	const enabled =
+		! suspended &&
 		!! config( 'blackbox_api_key' ) &&
 		config.isEnabled( 'blackbox' ) &&
 		config.isEnabled( feature );

client/blocks/login/utils/test/use-blackbox.jsx

@@ -11,11 +11,11 @@ jest.mock( '../blackbox-sdk', () => ( {
 	loadBlackboxSdk: jest.fn( () => Promise.resolve() ),
 } ) );
 
-function TestComponent() {
+function TestComponent( { enabled = true } ) {
 	const containerRef = useRef( null );
 	const { hasChallengeContent, isChallengeActive, isLoading } = useBlackbox( {
 		containerRef,
-		enabled: true,
+		enabled,
 	} );
 
 	return (
@@ -119,4 +119,48 @@ describe( 'useBlackbox', () => {
 
 		expect( screen.getByTestId( 'blackbox-state' ) ).toHaveTextContent( 'ready/inactive/empty' );
 	} );
+
+	test( 'does not load the SDK while disabled', async () => {
+		render( <TestComponent enabled={ false } /> );
+
+		await act( async () => {} );
+
+		expect( loadBlackboxSdk ).not.toHaveBeenCalled();
+		expect( screen.getByTestId( 'blackbox-state' ) ).toHaveTextContent( 'ready/inactive/empty' );
+	} );
+
+	test( 'starts loading and configures when enabled after mount', async () => {
+		const { rerender } = render( <TestComponent enabled={ false } /> );
+
+		await act( async () => {} );
+		rerender( <TestComponent enabled /> );
+
+		expect( screen.getByTestId( 'blackbox-state' ) ).toHaveTextContent( 'loading/inactive/empty' );
+
+		await act( async () => {} );
+
+		expect( window.Blackbox.configure ).toHaveBeenCalled();
+
+		act( () => jest.advanceTimersByTime( 500 ) );
+
+		expect( screen.getByTestId( 'blackbox-state' ) ).toHaveTextContent( 'ready/inactive/empty' );
+	} );
+
+	test( 'clears blocking state when disabled mid-challenge', async () => {
+		let callbacks;
+		window.Blackbox.configure.mockImplementationOnce( ( config ) => {
+			callbacks = config;
+		} );
+
+		const { rerender } = render( <TestComponent /> );
+
+		await act( async () => {} );
+		act( () => callbacks.onChallengeStart() );
+
+		expect( screen.getByTestId( 'blackbox-state' ) ).toHaveTextContent( 'ready/active/empty' );
+
+		rerender( <TestComponent enabled={ false } /> );
+
+		expect( screen.getByTestId( 'blackbox-state' ) ).toHaveTextContent( 'ready/inactive/empty' );
+	} );
 } );

client/blocks/login/utils/use-blackbox.js

@@ -48,9 +48,18 @@ export function useBlackbox( { containerRef, enabled } ) {
 
 	useEffect( () => {
 		if ( ! isEnabled ) {
+			// Covers the surface being suspended after a challenge appeared: drop
+			// all blocking state so the form isn't wedged when it re-enables.
+			setIsLoading( false );
+			setIsChallengeActive( false );
+			setHasChallengeContent( false );
 			return;
 		}
 
+		// The initial state only covers enabled-at-mount; this covers a surface
+		// that enables later (e.g. a hidden signup step becoming active).
+		setIsLoading( true );
+
 		let cancelled = false;
 		let hasStartedChallenge = false;
 		let settleTimeout;

client/blocks/login/with-blackbox-protection.tsx

@@ -7,16 +7,24 @@ interface WithBlackboxProtectionOptions {
 	feature: string;
 }
 
+interface WithBlackboxProtectionProps {
+	/** Suspend Blackbox while the host form is mounted but not the active surface. */
+	blackboxSuspended?: boolean;
+}
+
 /**
  * HOC that injects `useBlackboxProtection()` as a `blackbox` prop, for class
  * components that can't call the hook directly.
  */
 export function withBlackboxProtection< P extends object >(
 	WrappedComponent: ComponentType< P & { blackbox: BlackboxProtection } >,
 	options: WithBlackboxProtectionOptions
-): ComponentType< P > {
-	return function WithBlackboxProtection( props: P ) {
-		const blackbox = useBlackboxProtection( options );
-		return <WrappedComponent { ...props } blackbox={ blackbox } />;
+): ComponentType< P & WithBlackboxProtectionProps > {
+	return function WithBlackboxProtection( {
+		blackboxSuspended,
+		...props
+	}: P & WithBlackboxProtectionProps ) {
+		const blackbox = useBlackboxProtection( { ...options, suspended: blackboxSuspended } );
+		return <WrappedComponent { ...( props as P ) } blackbox={ blackbox } />;
 	};
 }

client/blocks/signup-form/signup-form-social-first.tsx

@@ -213,7 +213,10 @@ const SignupFormSocialFirst = ( {
 
 	const emailLoginBlock = isEmailFirstVariant ? (
 		<div className="signup-form-social-first-email">
-			<PasswordlessSignupForm { ...passwordlessFormProps } />
+			<PasswordlessSignupForm
+				{ ...passwordlessFormProps }
+				blackboxSuspended={ currentStep !== 'initial' }
+			/>
 		</div>
 	) : null;
 
@@ -287,6 +290,7 @@ const SignupFormSocialFirst = ( {
 			<div className={ getVisibilityClassName( 'email' ) }>
 				<div className="signup-form-social-first-email">
 					<PasswordlessSignupForm
+						blackboxSuspended={ currentStep !== 'email' }
 						stepName={ stepName }
 						flowName={ flowName }
 						goToNextStep={ goToNextStep }