woocommerce/plugins/woocommerce-admin/client/homescreen/mobile-app-modal/index.tsx

/**
 * External dependencies
 */
import { useState, useEffect, useCallback } from '@wordpress/element';
import { Guide } from '@wordpress/components';
import { useSearchParams } from 'react-router-dom';
import { updateQueryString } from '@woocommerce/navigation';
import { useDispatch } from '@wordpress/data';
import { OPTIONS_STORE_NAME } from '@woocommerce/data';

/**
 * Internal dependencies
 */
import { ModalIllustrationLayout } from './layouts/ModalIllustrationLayout';
import {
	useJetpackPluginState,
	JetpackPluginStates,
	useSendMagicLink,
} from './components';
import {
	EmailSentPage,
	JetpackInstallStepperPage,
	JetpackAlreadyInstalledPage,
} from './pages';
import './style.scss';

export const MobileAppModal = () => {
	const [ guideIsOpen, setGuideIsOpen ] = useState( true );

	const { state, jetpackConnectionData } = useJetpackPluginState();
	const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );

	const [ pageContent, setPageContent ] = useState< React.ReactNode >();
	const [ searchParams ] = useSearchParams();

	useEffect( () => {
		if ( searchParams.get( 'mobileAppModal' ) ) {
			setGuideIsOpen( true );
		} else {
			setGuideIsOpen( false );
		}
	}, [ searchParams ] );

	const isReturningFromWordpressConnection =
		searchParams.get( 'jetpackState' ) === 'returning';

	const [ hasSentEmail, setHasSentEmail ] = useState( false );

	const { fetchMagicLinkApiCall } = useSendMagicLink();

	const sendMagicLink = useCallback( () => {
		fetchMagicLinkApiCall();
		setHasSentEmail( true );
	}, [ fetchMagicLinkApiCall ] );

	useEffect( () => {
		if ( hasSentEmail ) {
			setPageContent(
				<EmailSentPage
					hasSentEmailHandler={ () => setHasSentEmail( false ) }
				/>
			);
		} else if (
			state === JetpackPluginStates.NOT_INSTALLED ||
			state === JetpackPluginStates.NOT_ACTIVATED ||
			state === JetpackPluginStates.USERLESS_CONNECTION ||
			isReturningFromWordpressConnection
		) {
			setPageContent(
				<JetpackInstallStepperPage
					isReturningFromWordpressConnection={
						isReturningFromWordpressConnection
					}
					sendMagicLinkHandler={ sendMagicLink }
				/>
			);
		} else if (
			state === JetpackPluginStates.FULL_CONNECTION &&
			! hasSentEmail
		) {
			const wordpressAccountEmailAddress =
				jetpackConnectionData?.currentUser.wpcomUser.email;
			setPageContent(
				<JetpackAlreadyInstalledPage
					wordpressAccountEmailAddress={
						wordpressAccountEmailAddress
					}
					sendMagicLinkHandler={ sendMagicLink }
				/>
			);
		}
	}, [
		sendMagicLink,
		hasSentEmail,
		isReturningFromWordpressConnection,
		jetpackConnectionData?.currentUser.wpcomUser.email,
		state,
	] );

	return (
		<>
			{ guideIsOpen && (
				<Guide
					onFinish={ () => {
						updateOptions( {
							woocommerce_admin_dismissed_mobile_app_modal: 'yes',
						} );
						// clear the search params that we use so that the URL is clean
						updateQueryString(
							{
								jetpackState: undefined,
								mobileAppModal: undefined,
							},
							undefined,
							Object.fromEntries( searchParams.entries() )
						);
					} }
					className={ 'woocommerce__mobile-app-welcome-modal' }
					pages={ [
						{
							content: (
								<ModalIllustrationLayout body={ pageContent } />
							),
						},
					] }
				/>
			) }
		</>
	);
};