Migration: Add step placeholder to get more information about the use…

…r site when a wp.com site is given as input (#94855)

* Add step to more information from user when they try to migration a wp.com site

* Add temporary alert message

* Fix tests

* Rename already-wordpress to already-wpcom

* Revert "Rename already-wordpress to already-wpcom"

This reverts commit 6cebceb.

* Reapply the changes

* Rename remaning old instance

* Fix styles and error message

client/landing/stepper/declarative-flow/internals/steps-repository/importer-migrate-message/style.scss

@@ -50,9 +50,7 @@
 			}
 		}
 
-		svg {
-			fill: var(--studio-blue-50);
-		}
+
 	}
 
 	.wpcom__loading-ellipsis {

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-already-wpcom/components/form/index.tsx

@@ -0,0 +1,187 @@
+import { FormLabel } from '@automattic/components';
+import { NextButton } from '@automattic/onboarding';
+import { CheckboxControl } from '@wordpress/components';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import { FC, useEffect } from 'react';
+import { Control, Controller, FieldError, useForm } from 'react-hook-form';
+import FormTextArea from 'calypso/components/forms/form-textarea';
+import Notice from 'calypso/components/notice';
+import { useSiteSlugParam } from 'calypso/landing/stepper/hooks/use-site-slug-param';
+import {
+	type TicketMigrationData,
+	useMigrationTicketMutation,
+} from '../../hooks/use-migration-ticket-mutation';
+
+interface CheckboxProps {
+	label: string;
+	control: Control< TicketMigrationData >;
+	value: string;
+}
+
+const CheckboxIntents = ( { label, control, value }: CheckboxProps ) => (
+	<Controller
+		control={ control }
+		name="intents"
+		render={ ( { field } ) => {
+			return (
+				<CheckboxControl
+					className="site-migration-already-wpcom__form-checkbox-control"
+					onChange={ ( isChecked ) => {
+						if ( isChecked ) {
+							field.onChange( [ ...field.value, value ] );
+						} else {
+							field.onChange( field.value.filter( ( v ) => v !== value ) );
+						}
+					} }
+					checked={ field.value.includes( value ) }
+					label={ label }
+					name={ field.name }
+				/>
+			);
+		} }
+	/>
+);
+
+interface OtherDetailsProps {
+	label: string;
+	control: Control< TicketMigrationData >;
+	error?: FieldError;
+}
+
+const OtherDetails = ( { label, control, error }: OtherDetailsProps ) => {
+	const translate = useTranslate();
+	return (
+		<Controller
+			control={ control }
+			name="otherDetails"
+			rules={ { required: translate( 'Please, provide more details.' ) } }
+			render={ ( { field } ) => {
+				return (
+					<div className="site-migration-already-wpcom__form-textarea-container">
+						<FormLabel htmlFor="otherDetails"> { label } </FormLabel>
+						<FormTextArea
+							id="otherDetails"
+							value={ field.value }
+							onChange={ field.onChange }
+							placeholder={ translate(
+								'Share any other details that will help us figure out what we need to do next.'
+							) }
+							className={ clsx( 'site-migration-already-wpcom__form-textarea', {
+								'site-migration-already-wpcom__form-textarea--error': error,
+							} ) }
+						/>
+						{ error && error.message && (
+							<p className="site-migration-already-wpcom__form-error">{ error.message }</p>
+						) }
+					</div>
+				);
+			} }
+		/>
+	);
+};
+
+interface FormProps {
+	onComplete: () => void;
+}
+
+const Form: FC< FormProps > = ( { onComplete } ) => {
+	const translate = useTranslate();
+	const siteSlug = useSiteSlugParam() ?? '';
+
+	const {
+		control,
+		handleSubmit,
+		watch,
+		setError,
+		formState: { errors },
+	} = useForm< TicketMigrationData >( {
+		defaultValues: {
+			intents: [],
+			otherDetails: '',
+		},
+	} );
+
+	const { mutate: createTicket, isSuccess } = useMigrationTicketMutation( siteSlug );
+
+	useEffect( () => {
+		if ( isSuccess ) {
+			if ( process.env.NODE_ENV !== 'development' ) {
+				alert( 'Success!' );
+			}
+			onComplete();
+		}
+	}, [ isSuccess, onComplete ] );
+
+	const onSubmit = handleSubmit( ( data: TicketMigrationData ) => {
+		if ( data.intents.length === 0 ) {
+			setError( 'intents', {
+				type: 'manual',
+				message: translate( 'Please select an option.' ),
+			} );
+		}
+		createTicket( {
+			intents: data.intents,
+			otherDetails: data.otherDetails,
+		} );
+	} );
+
+	const intents = watch( 'intents' );
+	const isOtherChecked = intents.includes( 'other' );
+
+	return (
+		<div className="site-migration-already-wpcom__form-container">
+			<form className="site-migration-already-wpcom__form" onSubmit={ onSubmit }>
+				{ errors.intents && (
+					<Notice
+						showIcon={ false }
+						status="is-warning"
+						text={ translate( 'Please select an option.' ) }
+						showDismiss={ false }
+						className="site-migration-already-wpcom__form-error-notice"
+					/>
+				) }
+				<div
+					className={ clsx( 'site-migration-already-wpcom__form-content', {
+						'site-migration-already-wpcom__form-content--error': errors.intents,
+					} ) }
+				>
+					<div className="site-migration-already-wpcom__form-title-container">
+						<h4 className="site-migration-already-wpcom__form-title">
+							{ translate( 'What brought you here today?' ) }
+						</h4>
+					</div>
+
+					<CheckboxIntents
+						value="transfer-my-domain-to-wordpress-com"
+						label={ translate( 'Transfer my domain to WordPress.com' ) }
+						control={ control }
+					/>
+					<CheckboxIntents
+						value="copy-one-of-my-existing-sites-on-wordpress-com"
+						label={ translate( 'Copy one of my existing sites on WordPress.com' ) }
+						control={ control }
+					/>
+					<CheckboxIntents
+						value="get-access-to-my-old-site-on-wordpress-com"
+						label={ translate( 'Get access to my old site on WordPress.com' ) }
+						control={ control }
+					/>
+
+					<CheckboxIntents value="other" label={ translate( 'Other' ) } control={ control } />
+
+					{ isOtherChecked && (
+						<OtherDetails
+							label={ translate( 'Other details' ) }
+							control={ control }
+							error={ errors.otherDetails }
+						/>
+					) }
+				</div>
+				<NextButton type="submit">{ translate( 'Continue' ) }</NextButton>
+			</form>
+		</div>
+	);
+};
+
+export default Form;

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-already-wpcom/hooks/use-migration-ticket-mutation.ts

@@ -0,0 +1,27 @@
+import { DefaultError, useMutation } from '@tanstack/react-query';
+
+export interface TicketMigrationData {
+	intents: string[];
+	otherDetails: string;
+}
+
+interface ApiResponse {
+	success: boolean;
+}
+
+const setMigration = (
+	siteSlug: string,
+	{ intents, otherDetails }: TicketMigrationData
+): Promise< ApiResponse > => {
+	// eslint-disable-next-line no-console
+	console.log( 'setMigration', siteSlug, intents, otherDetails );
+	return Promise.resolve( { success: true } );
+};
+
+export const useMigrationTicketMutation = ( siteSlug: string ) => {
+	return useMutation< ApiResponse, DefaultError, TicketMigrationData >( {
+		mutationKey: [ 'create-migration-ticket', siteSlug ],
+		mutationFn: ( { intents, otherDetails } ) =>
+			setMigration( siteSlug, { intents, otherDetails } ),
+	} );
+};

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-already-wpcom/index.tsx

@@ -0,0 +1,80 @@
+import { StepContainer } from '@automattic/onboarding';
+import { useTranslate } from 'i18n-calypso';
+import { type FC } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import DocumentHead from 'calypso/components/data/document-head';
+import FormattedHeader from 'calypso/components/formatted-header';
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
+import Form from './components/form';
+import type { StepProps } from '../../types';
+
+import './style.scss';
+
+const extractDomainFromUrl = ( url: string ) => {
+	try {
+		const parsedUrl = new URL( url );
+		return parsedUrl.hostname;
+	} catch ( error ) {
+		return url;
+	}
+};
+
+const SiteMigrationAlreadyWPCOM: FC< StepProps > = ( { stepName, flow, navigation } ) => {
+	const translate = useTranslate();
+	const [ query ] = useSearchParams();
+	const from = query.get( 'from' )!;
+
+	const title = translate( 'Your site is already on {{br /}}WordPress.com', {
+		components: {
+			br: <br />,
+		},
+	} );
+	const subtitle = translate(
+		"Let's figure out your next steps for {{strong}}%(from)s{{/strong}} together.",
+		{
+			args: {
+				from: extractDomainFromUrl( from ),
+			},
+			components: {
+				strong: <strong />,
+			},
+		}
+	);
+	const subHeaderText = (
+		<>
+			<p>{ subtitle }</p>
+			<p>{ translate( 'Please complete the form below.' ) }</p>
+		</>
+	);
+
+	const onSubmit = () => {
+		navigation?.submit?.();
+	};
+
+	return (
+		<>
+			<DocumentHead title={ translate( 'Your site is already on WordPress.com' ) } />
+			<StepContainer
+				stepName={ stepName }
+				flowName={ flow }
+				hideSkip
+				goBack={ navigation?.goBack }
+				goNext={ navigation?.submit }
+				formattedHeader={
+					<FormattedHeader
+						subHeaderAs="div"
+						subHeaderAlign="center"
+						headerText={ title }
+						subHeaderText={ subHeaderText }
+						align="center"
+					/>
+				}
+				isFullLayout
+				stepContent={ <Form onComplete={ onSubmit } /> }
+				recordTracksEvent={ recordTracksEvent }
+			/>
+		</>
+	);
+};
+
+export default SiteMigrationAlreadyWPCOM;

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-already-wpcom/style.scss

@@ -0,0 +1,66 @@
+@import "@wordpress/base-styles/breakpoints";
+
+.site-migration-already-wpcom__form-title--error,
+.site-migration-already-wpcom__form-error {
+	color: var(--color-error);
+	font-size: 0.875rem;
+	font-weight: 500;
+}
+
+.site-migration-already-wpcom__form-container {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	align-items: center;
+}
+
+.site-migration-already-wpcom__form {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.site-migration-already-wpcom__form .components-checkbox-control__label {
+	font-size: 0.875rem;
+	font-weight: 400;
+}
+
+.site-migration-already-wpcom__form-title-container {
+	display: flex;
+	flex-direction: row;
+	gap: 0.25rem;
+	align-items: center;
+	margin-bottom: 0.5rem;
+}
+
+.site-migration-already-wpcom__form-title {
+	font-size: 0.875rem;
+	font-weight: 600;
+	margin-bottom: 0;
+}
+
+.site-migration-already-wpcom__form-textarea-container {
+	margin-top: 1.5rem;
+}
+
+.site-migration-already-wpcom__form-textarea {
+	width: 100%;
+}
+
+.site-migration-already-wpcom__form-textarea--error {
+	border-color: var(--color-error);
+}
+
+.site-migration-already-wpcom__form-error-notice {
+	margin-bottom: 0;
+}
+
+.site-migration-already-wpcom__form-content--error {
+	* {
+		color: var(--color-error);
+
+	}
+	input[type="checkbox"] {
+		border-color: var(--color-error);
+	}
+}