Add the authorization Step for the Application Passwords

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/components/authorization.tsx

@@ -0,0 +1,58 @@
+import { NextButton } from '@automattic/onboarding';
+import { check, Icon } from '@wordpress/icons';
+import { useTranslate } from 'i18n-calypso';
+
+const AuthorizationBenefits = ( { benefits }: { benefits: string[] } ) => {
+	return (
+		<div className="site-migration-application-password-authorization__benefits">
+			{ benefits.map( ( benefit, index ) => (
+				<div
+					className="site-migration-application-password-authorization__benefits-item"
+					key={ index }
+				>
+					<div className="site-migration-application-password-authorization__benefits-item-icon">
+						<Icon icon={ check } size={ 20 } />
+					</div>
+					<span>{ benefit }</span>
+				</div>
+			) ) }
+		</div>
+	);
+};
+
+interface AuthorizationProps {
+	onShareCredentialsClick: () => void;
+	onAuthorizationClick: () => void;
+}
+
+const Authorization = ( { onShareCredentialsClick, onAuthorizationClick }: AuthorizationProps ) => {
+	const translate = useTranslate();
+	return (
+		<div className="site-migration-application-password-authorization__authorization">
+			<div>
+				<NextButton onClick={ onAuthorizationClick }>{ translate( 'Authorize' ) }</NextButton>
+			</div>
+			<div>
+				<button
+					className="button navigation-link step-container__navigation-link has-underline is-borderless"
+					type="button"
+					onClick={ onShareCredentialsClick }
+				>
+					{ translate( 'Share credentials instead' ) }
+				</button>
+			</div>
+			<div className="site-migration-application-password-authorization__benefits-container">
+				<h3>{ translate( "Here's what else you're getting" ) }</h3>
+				<AuthorizationBenefits
+					benefits={ [
+						translate( 'Uninterrupted service throughout the entire migration experience.' ),
+						translate( 'Unmatched reliability with 99.999% uptime and unmetered traffic.' ),
+						translate( 'Round-the-clock security monitoring and DDoS protection.' ),
+					] }
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default Authorization;

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/hooks/use-store-application-password.ts

@@ -0,0 +1,35 @@
+import { useMutation } from '@tanstack/react-query';
+import wpcomRequest from 'wpcom-proxy-request';
+import { ApiError } from '../../site-migration-credentials/types';
+
+interface StoreApplicationPasswordResponse {
+	success: boolean;
+}
+
+interface StoreApplicationPasswordPayload {
+	password: string;
+	username: string;
+	source: string;
+}
+
+const useStoreApplicationPassword = ( siteSlug: string ) => {
+	return useMutation< StoreApplicationPasswordResponse, ApiError, StoreApplicationPasswordPayload >(
+		{
+			mutationFn: ( { password, username, source } ) => {
+				return wpcomRequest( {
+					path: `sites/${ siteSlug }/automated-migration/application-passwords`,
+					apiNamespace: 'wpcom/v2/',
+					apiVersion: '2',
+					method: 'POST',
+					body: {
+						password,
+						username,
+						from_url: source,
+					},
+				} );
+			},
+		}
+	);
+};
+
+export default useStoreApplicationPassword;

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/index.tsx

@@ -0,0 +1,144 @@
+import { StepContainer } from '@automattic/onboarding';
+import { useTranslate } from 'i18n-calypso';
+import { useEffect } from 'react';
+import DocumentHead from 'calypso/components/data/document-head';
+import FormattedHeader from 'calypso/components/formatted-header';
+import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
+import Notice from 'calypso/components/notice';
+import { useQuery } from 'calypso/landing/stepper/hooks/use-query';
+import { useSiteSlugParam } from 'calypso/landing/stepper/hooks/use-site-slug-param';
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
+import Authorization from './components/authorization';
+import useStoreApplicationPassword from './hooks/use-store-application-password';
+import type { Step } from '../../types';
+import './style.scss';
+
+const SiteMigrationApplicationPasswordsAuthorization: Step = function ( { navigation } ) {
+	const translate = useTranslate();
+	const siteSlug = useSiteSlugParam();
+
+	const source = useQuery().get( 'site_url' ) ?? '';
+	const authorizationUrl = useQuery().get( 'authorizationUrl' ) ?? undefined;
+	const isAuthorizationRejected = useQuery().get( 'success' ) === 'false';
+	const applicationPassword = useQuery().get( 'password' );
+	const username = useQuery().get( 'user_login' );
+	const isAuthorizationSuccessful = !! ( applicationPassword && username );
+	const {
+		mutate: storeApplicationPasswordMutation,
+		isSuccess: isStoreApplicationPasswordSuccess,
+		isError: isStoreApplicationPasswordError,
+		isPending: isStoreApplicationPasswordPending,
+	} = useStoreApplicationPassword( siteSlug as string );
+	const hasStoreApplicationPasswordResponse =
+		isStoreApplicationPasswordSuccess || isStoreApplicationPasswordError;
+	const isLoading =
+		isAuthorizationSuccessful &&
+		( ! hasStoreApplicationPasswordResponse || isStoreApplicationPasswordPending );
+
+	useEffect( () => {
+		if ( ! isAuthorizationSuccessful || ! siteSlug ) {
+			return;
+		}
+
+		storeApplicationPasswordMutation( {
+			password: applicationPassword,
+			username,
+			source,
+		} );
+	}, [ isAuthorizationSuccessful, siteSlug, useStoreApplicationPassword ] );
+
+	useEffect( () => {
+		if ( isStoreApplicationPasswordSuccess ) {
+			navigation?.submit?.( { action: 'migration-started' } );
+		}
+	}, [ isStoreApplicationPasswordSuccess, navigation ] );
+
+	const navigateToFallbackCredentials = () => {
+		navigation?.submit?.( { action: 'fallback-credentials', authorizationUrl } );
+	};
+
+	const startAuthorization = () => {
+		navigation?.submit?.( { action: 'authorization', authorizationUrl } );
+	};
+
+	const contactMe = () => {
+		navigation?.submit?.( { action: 'contact-me' } );
+	};
+
+	let notice = undefined;
+	if ( isStoreApplicationPasswordError ) {
+		notice = (
+			<Notice status="is-error" showDismiss={ false }>
+				{ translate( "We couldn't complete the authorization." ) }
+				<button
+					className="button navigation-link step-container__navigation-link has-underline is-borderless site-migration-application-password-authorization__contact-me-button"
+					type="button"
+					onClick={ contactMe }
+				>
+					{ translate( 'Please contact me.' ) }
+				</button>
+			</Notice>
+		);
+	} else if ( isAuthorizationRejected ) {
+		notice = (
+			<Notice status="is-warning" showDismiss={ false }>
+				{ translate(
+					"We can't start your migration without your authorization. Please authorize WordPress.com in your WP Admin or share your credentials."
+				) }
+			</Notice>
+		);
+	}
+
+	const sourceDomain = new URL( source ).host;
+
+	// translators: %(sourceDomain)s is the source domain that is being migrated.
+	const subHeaderText = translate(
+		"We're ready to migrate %(sourceDomain)s to WordPress.com. To make sure everything goes smoothly, we need you to authorize us for access in your WordPress admin.",
+		{
+			args: {
+				sourceDomain,
+			},
+		}
+	);
+
+	const formattedHeader = ! isLoading ? (
+		<FormattedHeader
+			id="site-migration-credentials-header"
+			headerText={ translate( 'Get ready for blazing fast speeds' ) }
+			subHeaderAlign="center"
+			subHeaderText={ subHeaderText }
+			align="center"
+		/>
+	) : undefined;
+
+	return (
+		<>
+			<DocumentHead title={ translate( 'Get ready for blazing fast speeds' ) } />
+			<StepContainer
+				stepName="site-migration-application-password-authorization"
+				flowName="site-migration"
+				goBack={ navigation?.goBack }
+				goNext={ navigation?.submit }
+				hideSkip
+				isFullLayout
+				notice={ notice }
+				formattedHeader={ formattedHeader }
+				stepContent={
+					! isLoading ? (
+						<Authorization
+							onAuthorizationClick={ startAuthorization }
+							onShareCredentialsClick={ navigateToFallbackCredentials }
+						/>
+					) : (
+						<div data-testid="loading-ellipsis">
+							<LoadingEllipsis />
+						</div>
+					)
+				}
+				recordTracksEvent={ recordTracksEvent }
+			/>
+		</>
+	);
+};
+
+export default SiteMigrationApplicationPasswordsAuthorization;

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/style.scss

@@ -0,0 +1,55 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+
+.site-migration-application-password-authorization {
+	.site-migration-application-password-authorization__authorization {
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+		align-items: center;
+	}
+	.site-migration-application-password-authorization__benefits-container {
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+		align-items: center;
+		h3 {
+			font-size: $font-title-small;
+		}
+	}
+	.site-migration-application-password-authorization__benefits {
+		padding: 2em;
+		background-color: var(--color-border-shadow);
+		border-radius: 4px;
+		width: 100%;
+		@include break-small {
+			width: 350px;
+		}
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+	.site-migration-application-password-authorization__benefits-item {
+		display: flex;
+		flex-direction: row;
+		gap: 0.5em;
+		font-size: $font-body-small;
+		.site-migration-application-password-authorization__benefits-item-icon {
+			width: 42px;
+			height: 42px;
+			background-color: var(--studio-wordpress-blue-10);
+			border-radius: 4px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-shrink: 0;
+			svg {
+				fill: var(--studio-wordpress-blue-50);
+			}
+		}
+	}
+	.site-migration-application-password-authorization__contact-me-button {
+		color: var(--color-text-inverted) !important;
+		margin-left: 0.25em;
+	}
+}