Subscriptions: Add content summary modal to Paid Subscribers importer (…

…#93773)

* add modal

* renaming things

* shows real data

* Add attachment and page numbers to the import summary

---------

Co-authored-by: Enej Bajgoric <enej.bajgoric@automattic.com>

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

@@ -6,8 +6,14 @@ 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 } from 'calypso/state/imports/actions';
+import {
+	startImport,
+	cancelImport,
+	openSummaryModal,
+	closeSummaryModal,
+} 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';
 
@@ -47,6 +53,7 @@ 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,
@@ -75,7 +82,7 @@ class FileImporter extends PureComponent {
 	render() {
 		const { title, overrideDestination, uploadDescription, optionalUrl } = this.props.importerData;
 		const { importerStatus, site, fromSite, nextStepUrl, skipNextStep } = this.props;
-		const { errorData, importerState } = importerStatus;
+		const { errorData, importerState, summaryModalOpen } = importerStatus;
 		const isEnabled = appStates.DISABLED !== importerState;
 		const showStart = includes( compactStates, importerState );
 		const cardClasses = clsx( 'importer__file-importer-card', {
@@ -100,6 +107,14 @@ 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 && (
@@ -113,15 +128,24 @@ class FileImporter extends PureComponent {
 						} }
 					/>
 				) }
-				{ includes( importingStates, importerState ) && (
+				{ 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 && (
 					<ImportingPane
 						importerStatus={ importerStatus }
 						sourceType={ title }
 						site={ site }
 						nextStepUrl={ nextStepUrl }
 					/>
 				) }
-				{ includes( uploadingStates, importerState ) && (
+				{ showUploadingPane && (
 					<UploadingPane
 						isEnabled={ isEnabled }
 						description={ uploadDescription }
@@ -138,4 +162,10 @@ class FileImporter extends PureComponent {
 	}
 }
 
-export default connect( null, { recordTracksEvent, startImport, cancelImport } )( FileImporter );
+export default connect( null, {
+	recordTracksEvent,
+	startImport,
+	cancelImport,
+	openSummaryModal,
+	closeSummaryModal,
+} )( FileImporter );

client/my-sites/importer/newsletter/content-upload/import-summary-modal.tsx

@@ -0,0 +1,36 @@
+import { Button, Modal } from '@wordpress/components';
+
+interface ImportSummaryModalProps {
+	onRequestClose: () => void;
+	postsNumber: number;
+	pagesNumber: number;
+	attachmentsNumber: number;
+	authorsNumber?: number;
+}
+
+export default function ImportSummaryModal( {
+	onRequestClose,
+	postsNumber,
+	pagesNumber,
+	attachmentsNumber,
+	authorsNumber,
+}: ImportSummaryModalProps ) {
+	return (
+		<Modal title="All set!" isDismissible={ false } onRequestClose={ onRequestClose } size="medium">
+			<p>
+				We’ve found <strong>{ postsNumber } posts</strong>, <strong>{ pagesNumber } pages</strong>{ ' ' }
+				and <strong>{ attachmentsNumber } media</strong> to import.
+				{ authorsNumber && (
+					<>
+						<br />
+						Your Substack publication has <strong>{ authorsNumber } authors</strong>. Next, you can
+						match them with existing site users.
+					</>
+				) }
+			</p>
+			<Button variant="primary" onClick={ onRequestClose }>
+				Continue
+			</Button>
+		</Modal>
+	);
+}

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

@@ -32,6 +32,7 @@ export default function Content( {
 	const siteImports = useSelector( ( state ) => getImporterStatusForSiteId( state, siteId ) );
 
 	const dispatch = useDispatch();
+
 	function fetchImporters() {
 		siteId && dispatch( fetchImporterState( siteId ) );
 	}
@@ -58,11 +59,14 @@ export default function Content( {
 		siteTitle,
 	} ).substack;
 
+	const showStepDescriptions =
+		importerStatus?.importerState !== appStates.MAP_AUTHORS || importerStatus?.summaryModalOpen;
+
 	return (
 		<Card>
 			<Interval onTick={ fetchImporters } period={ EVERY_FIVE_SECONDS } />
 
-			{ importerStatus?.importerState !== appStates.MAP_AUTHORS && (
+			{ showStepDescriptions && (
 				<>
 					<h2>Step 1: Export your content from Substack</h2>
 					<p>

client/state/action-types.ts

@@ -316,6 +316,8 @@ 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,6 +15,8 @@ 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';
@@ -257,6 +259,16 @@ 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,6 +16,8 @@ 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';
@@ -165,6 +167,24 @@ 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;