Import flow: Fix minor issues on ReadyPreview screen (#85237)

* Import flows: remove unused CSS code * Import ready: adjust layout * Adjust site preview width * Site setup flow: Fix navigation back when you are on ready preview step * Remove the obsolete redirection logic * Wix: add a run flag clearing a finished job and running a new
Automattic · Dec 13, 2023 · 2382c3d · 2382c3d
1 parent eaaac0a
commit 2382c3d
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 80 deletions.
diff --git a/client/blocks/import/ready/index.tsx b/client/blocks/import/ready/index.tsx
@@ -61,39 +61,38 @@ const ReadyPreviewStep: React.FunctionComponent< ReadyPreviewProps > = ( {
 
 	return (
 		<>
-			<div className="import__header">
-				<div className="import__heading import__heading-center">
-					<Title>{ __( 'Your content is ready for its brand new home' ) }</Title>
-					<SubTitle>
-						{ createInterpolateElement(
-							sprintf(
-								/* translators: the website could be any domain (eg: "yourname.com") that is built with a platform (eg: Wix, Squarespace, Blogger, etc.) */
-								__(
-									'It looks like <strong>%(website)s</strong> is built with %(platform)s. To move your existing content to your newly created WordPress.com site, try our %(platform)s importer.'
-								),
-								{
-									website: convertToFriendlyWebsiteName( urlData.url ),
-									platform: convertPlatformName( urlData.platform ),
-								}
+			<div className="import__heading import__heading-center">
+				<Title>{ __( 'Your content is ready for its brand new home' ) }</Title>
+				<SubTitle>
+					{ createInterpolateElement(
+						sprintf(
+							/* translators: the website could be any domain (eg: "yourname.com") that is built with a platform (eg: Wix, Squarespace, Blogger, etc.) */
+							__(
+								'It looks like <strong>%(website)s</strong> is built with %(platform)s. To move your existing content to your newly created WordPress.com site, try our %(platform)s importer.'
 							),
-							{ strong: createElement( 'strong' ) }
-						) }
-					</SubTitle>
-
-					<div className="import__buttons-group">
-						<NextButton onClick={ () => goToImporterPage( urlData.platform ) }>
-							{ __( 'Import your content' ) }
-						</NextButton>
-						{ coveredPlatforms.includes( urlData.platform ) && (
-							<div>
-								<BackButton onClick={ setIsModalDetailsOpen.bind( this, true ) }>
-									{ __( 'What can be imported?' ) }
-								</BackButton>
-							</div>
-						) }
-					</div>
+							{
+								website: convertToFriendlyWebsiteName( urlData.url ),
+								platform: convertPlatformName( urlData.platform ),
+							}
+						),
+						{ strong: createElement( 'strong' ) }
+					) }
+				</SubTitle>
+
+				<div className="import__buttons-group">
+					<NextButton onClick={ () => goToImporterPage( urlData.platform ) }>
+						{ __( 'Import your content' ) }
+					</NextButton>
+					{ coveredPlatforms.includes( urlData.platform ) && (
+						<div>
+							<BackButton onClick={ setIsModalDetailsOpen.bind( this, true ) }>
+								{ __( 'What can be imported?' ) }
+							</BackButton>
+						</div>
+					) }
 				</div>
 			</div>
+
 			<div className="import__content">
 				<ImportPreview website={ urlData.url } />
 			</div>

diff --git a/client/blocks/import/ready/style.scss b/client/blocks/import/ready/style.scss
@@ -16,7 +16,6 @@
 		padding-left: 0;
 
 		@include break-wide {
-			width: calc(100% - 163px);
 			margin: 100px auto 0;
 		}
 

diff --git a/client/blocks/importer/wix/index.tsx b/client/blocks/importer/wix/index.tsx
@@ -45,19 +45,12 @@ export const WixImporter: React.FunctionComponent< Props > = ( props ) => {
 	/**
 	 ↓ Effects
 	 */
-	useEffect( handleImporterReadiness, [] );
 	useEffect( handleRunFlagChange, [ run ] );
 	useEffect( handleJobStateTransition, [ job ] );
 
 	/**
 	 ↓ Methods
 	 */
-	function handleImporterReadiness() {
-		if ( ! checkIsImporterReady() ) {
-			stepNavigator?.goToImportCapturePage?.();
-		}
-	}
-
 	function handleJobStateTransition() {
 		// If there is no existing import job, create a new job
 		if ( job === undefined ) {
@@ -97,10 +90,6 @@ export const WixImporter: React.FunctionComponent< Props > = ( props ) => {
 		};
 	}
 
-	function checkIsImporterReady() {
-		return job || run;
-	}
-
 	function checkProgress() {
 		return (
 			job?.importerState === appStates.IMPORTING ||

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/import/helper.ts b/client/landing/stepper/declarative-flow/internals/steps-repository/import/helper.ts
@@ -28,6 +28,10 @@ export function getFinalImporterUrl(
 			importerUrl = addQueryArgs( importerUrl, {
 				option: WPImportOption.CONTENT_ONLY,
 			} );
+		} else if ( platform === 'wix' && fromSite ) {
+			importerUrl = addQueryArgs( importerUrl, {
+				run: true,
+			} );
 		}
 	} else {
 		importerUrl = getWpOrgImporterUrl( targetSlug, platform );

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/importer/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/importer/style.scss
@@ -29,41 +29,6 @@
 	}
 }
 
-/**
- * Formatted Header
- */
-.formatted-header {
-	margin: 0 !important;
-	flex-grow: 1;
-
-	.formatted-header__title {
-		@include onboarding-font-recoleta;
-		color: var(--studio-gray-100);
-		letter-spacing: 0.2px;
-		font-size: 2.15rem; /* stylelint-disable-line scales/font-sizes */
-		font-weight: 400;
-		padding: 0;
-		margin: 0;
-
-		@include break-xlarge {
-			font-size: 2.75rem;
-		}
-	}
-
-	.formatted-header__subtitle {
-		padding: 0;
-		text-align: left;
-		color: var(--studio-gray-60);
-		font-size: 1rem;
-		margin-top: 16px;
-		line-height: 24px;
-
-		@include break-small {
-			margin-top: 8px;
-		}
-	}
-}
-
 .step-wrapper__header-image {
 	margin-top: 64px;
 	display: none;

diff --git a/client/landing/stepper/declarative-flow/site-setup-flow.ts b/client/landing/stepper/declarative-flow/site-setup-flow.ts
@@ -541,14 +541,12 @@ const siteSetupFlow: Flow = {
 				case 'importReadyNot':
 				case 'importReadyWpcom':
 				case 'importReadyPreview':
-					return navigate( 'import' );
-
 				case 'importerWix':
 				case 'importerBlogger':
 				case 'importerMedium':
 				case 'importerSquarespace':
 				case 'importerWordpress':
-					return navigate( 'import' );
+					return navigate( `import?siteSlug=${ siteSlugParam }` );
 
 				case 'options':
 					return navigate( 'goals' );