Paid newsletter importer UI fixes (#94406)

client/my-sites/importer/newsletter/content-upload/file-importer.jsx

@@ -6,14 +6,8 @@ import { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import ErrorPane from 'calypso/my-sites/importer/error-pane';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
-import {
-	startImport,
-	cancelImport,
-	openSummaryModal,
-	closeSummaryModal,
-} from 'calypso/state/imports/actions';
+import { startImport, cancelImport } from 'calypso/state/imports/actions';
 import { appStates } from 'calypso/state/imports/constants';
-import ImportSummaryModal from './import-summary-modal';
 import ImportingPane from './importing-pane';
 import UploadingPane from './uploading-pane';
 
@@ -54,7 +48,6 @@ class FileImporter extends PureComponent {
 			importerState: PropTypes.string.isRequired,
 			statusMessage: PropTypes.string,
 			type: PropTypes.string.isRequired,
-			summaryModalOpen: PropTypes.bool,
 		} ),
 		site: PropTypes.shape( {
 			ID: PropTypes.number.isRequired,
@@ -86,7 +79,7 @@ class FileImporter extends PureComponent {
 			this.props.importerData;
 		const { importerStatus, site, fromSite, nextStepUrl, skipNextStep, invalidateCardData } =
 			this.props;
-		const { errorData, importerState, summaryModalOpen } = importerStatus;
+		const { errorData, importerState } = importerStatus;
 		const isEnabled = appStates.DISABLED !== importerState;
 		const showStart = includes( compactStates, importerState );
 		const cardClasses = clsx( 'importer__file-importer-card', {
@@ -111,14 +104,6 @@ class FileImporter extends PureComponent {
 			cardProps.onClick = this.handleClick.bind( this, false );
 		}
 
-		if ( importerState === appStates.UPLOAD_SUCCESS && ! summaryModalOpen ) {
-			this.props.openSummaryModal( importerStatus.importerId );
-		}
-
-		const showImportingPane =
-			includes( importingStates, importerState ) && summaryModalOpen === false;
-		const showUploadingPane = includes( uploadingStates, importerState ) || summaryModalOpen;
-
 		return (
 			<Card className={ cardClasses } { ...( showStart ? cardProps : undefined ) }>
 				{ errorData && (
@@ -132,16 +117,7 @@ class FileImporter extends PureComponent {
 						} }
 					/>
 				) }
-				{ summaryModalOpen && (
-					<ImportSummaryModal
-						onRequestClose={ () => this.props.closeSummaryModal( importerStatus.importerId ) }
-						postsNumber={ importerStatus?.customData?.postsNumber || 0 }
-						pagesNumber={ importerStatus?.customData?.pagesNumber || 0 }
-						attachmentsNumber={ importerStatus?.customData?.attachmentsNumber || 0 }
-						authorsNumber={ importerStatus?.customData?.sourceAuthors.length }
-					/>
-				) }
-				{ showImportingPane && (
+				{ includes( importingStates, importerState ) && (
 					<ImportingPane
 						importerStatus={ importerStatus }
 						sourceType={ title }
@@ -150,7 +126,7 @@ class FileImporter extends PureComponent {
 						invalidateCardData={ invalidateCardData }
 					/>
 				) }
-				{ showUploadingPane && (
+				{ includes( uploadingStates, importerState ) && (
 					<UploadingPane
 						isEnabled={ isEnabled }
 						description={ uploadDescription }
@@ -168,10 +144,4 @@ class FileImporter extends PureComponent {
 	}
 }
 
-export default connect( null, {
-	recordTracksEvent,
-	startImport,
-	cancelImport,
-	openSummaryModal,
-	closeSummaryModal,
-} )( FileImporter );
+export default connect( null, { recordTracksEvent, startImport, cancelImport } )( FileImporter );

client/my-sites/importer/newsletter/content.tsx

@@ -3,6 +3,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { Button } from '@wordpress/components';
 import { external } from '@wordpress/icons';
 import { useEffect, Dispatch, SetStateAction } from 'react';
+import exportSubstackDataImg from 'calypso/assets/images/importer/export-substack-content.png';
 import importerConfig from 'calypso/lib/importer/importer-config';
 import { EVERY_FIVE_SECONDS, Interval } from 'calypso/lib/interval';
 import { useDispatch, useSelector } from 'calypso/state';
@@ -67,29 +68,31 @@ export default function Content( {
 		siteTitle,
 	} ).substack;
 
-	const showStepDescriptions =
-		importerStatus?.importerState !== appStates.MAP_AUTHORS || importerStatus?.summaryModalOpen;
-
 	return (
 		<Card>
 			<Interval onTick={ fetchImporters } period={ EVERY_FIVE_SECONDS } />
 
-			{ showStepDescriptions && (
+			{ importerStatus?.importerState !== appStates.MAP_AUTHORS && (
 				<>
 					<h2>Step 1: Export your content from Substack</h2>
 					<p>
-						To generate a ZIP file of all your Substack posts, go to Settings { '>' } Exports and
-						click 'Create a new export.' Once the ZIP file is downloaded, upload it in the next
-						step.
+						Generate a ZIP file of all your Substack posts. On Substack, go to Settings &gt;
+						Exports, click <strong>New export</strong>, and upload the downloaded ZIP file in the
+						next step.
 					</p>
+					<img
+						src={ exportSubstackDataImg }
+						alt="Export Substack data"
+						className="export-content"
+					/>
 					<Button
 						href={ `https://${ fromSite }/publish/settings?search=export` }
 						target="_blank"
 						rel="noreferrer noopener"
 						icon={ external }
-						variant="secondary"
+						variant="primary"
 					>
-						Export content
+						Open Substack settings
 					</Button>
 					<hr />
 					<h2>Step 2: Import your content to WordPress.com</h2>

client/my-sites/importer/newsletter/importer.scss

@@ -21,6 +21,7 @@
 			font-size: rem(14px);
 			line-height: 20px;
 			color: var(--studio-gray-50);
+			margin-bottom: 16px;
 		}
 
 		hr {
@@ -66,7 +67,19 @@
 	.importer-action-buttons__container.no-spacing {
 		margin-bottom: 16px;
 	}
+
+	img.export-content {
+		display: block;
+		width: 584px;
+		margin-bottom: 16px;
+	}
+
+	img.export-subscribers {
+		display: block;
+		margin-bottom: 16px;
+	}
 }
+
 .content-upload-form__in-progress,
 .subscriber-upload-form__in-progress,
 .subscriber-upload-form .file-picker {

client/my-sites/importer/newsletter/subscribers/step-initial.tsx

@@ -4,6 +4,7 @@ import { Button } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { external } from '@wordpress/icons';
 import { useEffect, useRef } from 'react';
+import exportSubstackSubscribersImg from 'calypso/assets/images/importer/export-substack-subscribers.png';
 import { StepProps } from '../types';
 import SubscriberUploadForm from './upload-form';
 
@@ -35,17 +36,23 @@ export default function StepInitial( {
 		<Card>
 			<h2>Step 1: Export your subscribers from Substack</h2>
 			<p>
-				To generate a CSV file of all your Substack subscribers, go to the Subscribers tab and click
-				'Export.' Once the CSV file is downloaded, upload it in the next step.
+				Generate a CSV file of all your Substack subscribers. On Substack, go to the{ ' ' }
+				<strong>Subscribers</strong> tab and click the <strong>Export</strong> button you’ll find on
+				top of the table. Then, upload the downloaded CSV in the next step.
 			</p>
+			<img
+				src={ exportSubstackSubscribersImg }
+				alt="Export Substack subscribers"
+				className="export-subscribers"
+			/>
 			<Button
 				href={ `https://${ fromSite }/publish/subscribers` }
 				target="_blank"
 				rel="noreferrer noopener"
 				icon={ external }
-				variant="secondary"
+				variant="primary"
 			>
-				Export subscribers
+				Open Substack subscribers
 			</Button>
 			<hr />
 			<h2>Step 2: Import your subscribers to WordPress.com</h2>

client/state/action-types.ts

@@ -316,8 +316,6 @@ export const IMPORTS_UPLOAD_FAILED = 'IMPORTS_UPDLOAD_FAILED';
 export const IMPORTS_PRE_UPLOAD_FAILED = 'IMPORTS_PRE_UPDLOAD_FAILED';
 export const IMPORTS_UPLOAD_SET_PROGRESS = 'IMPORTS_UPLOAD_SET_PROGRESS';
 export const IMPORTS_UPLOAD_START = 'IMPORTS_UPLOAD_START';
-export const IMPORTS_SUMMARY_MODAL_OPEN = 'IMPORTS_SUMMARY_MODAL_OPEN';
-export const IMPORTS_SUMMARY_MODAL_CLOSE = 'IMPORTS_SUMMARY_MODAL_CLOSE';
 export const INVITE_ACCEPTED = 'INVITE_ACCEPTED';
 export const INVITE_RESEND_REQUEST = 'INVITE_RESEND_REQUEST';
 export const INVITE_RESEND_REQUEST_FAILURE = 'INVITE_RESEND_REQUEST_FAILURE';

client/state/imports/actions.js

@@ -15,8 +15,6 @@ import {
 	IMPORTS_UPLOAD_COMPLETED,
 	IMPORTS_UPLOAD_SET_PROGRESS,
 	IMPORTS_UPLOAD_START,
-	IMPORTS_SUMMARY_MODAL_OPEN,
-	IMPORTS_SUMMARY_MODAL_CLOSE,
 } from 'calypso/state/action-types';
 import { fromApi, toApi } from './api';
 import { appStates } from './constants';
@@ -259,16 +257,6 @@ export const startUpload =
 			} );
 	};
 
-export const openSummaryModal = ( importerId ) => ( {
-	type: IMPORTS_SUMMARY_MODAL_OPEN,
-	importerId,
-} );
-
-export const closeSummaryModal = ( importerId ) => ( {
-	type: IMPORTS_SUMMARY_MODAL_CLOSE,
-	importerId,
-} );
-
 export const failPreUpload = ( importerId, message, code, file ) => ( {
 	type: IMPORTS_PRE_UPLOAD_FAILED,
 	importerId,

client/state/imports/reducer.js

@@ -16,8 +16,6 @@ import {
 	IMPORTS_UPLOAD_COMPLETED,
 	IMPORTS_UPLOAD_SET_PROGRESS,
 	IMPORTS_UPLOAD_START,
-	IMPORTS_SUMMARY_MODAL_OPEN,
-	IMPORTS_SUMMARY_MODAL_CLOSE,
 } from 'calypso/state/action-types';
 import { combineReducers, keyedReducer } from 'calypso/state/utils';
 import { fromApi } from './api';
@@ -167,24 +165,6 @@ function importerStatus( state = {}, action ) {
 					filename: action.filename,
 				},
 			};
-
-		case IMPORTS_SUMMARY_MODAL_OPEN:
-			return {
-				...state,
-				[ action.importerId ]: {
-					...state[ action.importerId ],
-					summaryModalOpen: true,
-				},
-			};
-
-		case IMPORTS_SUMMARY_MODAL_CLOSE:
-			return {
-				...state,
-				[ action.importerId ]: {
-					...state[ action.importerId ],
-					summaryModalOpen: false,
-				},
-			};
 	}
 
 	return state;