Newsletter imports: Handle errors correctly

client/my-sites/subscribers/components/add-subscribers-modal/add-subscribers-modal.tsx

@@ -7,6 +7,7 @@ import { SiteDetails } from '@automattic/data-stores';
 import { localizeUrl } from '@automattic/i18n-utils';
 import { AddSubscriberForm, UploadSubscribersForm } from '@automattic/subscriber';
 import { useHasStaleImportJobs } from '@automattic/subscriber/src/hooks/use-has-stale-import-jobs';
+import { useImportError } from '@automattic/subscriber/src/hooks/use-import-error';
 import { useInProgressState } from '@automattic/subscriber/src/hooks/use-in-progress-state';
 import { ExternalLink, Modal, __experimentalVStack as VStack } from '@wordpress/components';
 import { copy, upload, reusableBlock } from '@wordpress/icons';
@@ -67,15 +68,17 @@ const AddSubscribersModal = ( { site }: AddSubscribersModalProps ) => {
 
 	const [ isUploading, setIsUploading ] = useState( false );
 	const onImportStarted = ( hasFile: boolean ) => setIsUploading( hasFile );
+
+	const importError = useImportError();
+	const isImportInProgress = useInProgressState();
+	const hasStaleImportJobs = useHasStaleImportJobs();
+
 	const onImportFinished = () => {
 		setIsUploading( false );
 		setAddingMethod( '' );
-		addSubscribersCallback();
+		addSubscribersCallback( importError );
 	};
 
-	const isImportInProgress = useInProgressState();
-	const hasStaleImportJobs = useHasStaleImportJobs();
-
 	if ( ! showAddSubscribersModal ) {
 		return null;
 	}

client/my-sites/subscribers/components/subscribers-page/subscribers-page-context.tsx

@@ -1,5 +1,6 @@
 import { isEnabled } from '@automattic/calypso-config';
 import { updateLaunchpadSettings } from '@automattic/data-stores';
+import { ImportSubscribersError } from '@automattic/data-stores/src/subscriber/types';
 import { useActiveJobRecognition } from '@automattic/subscriber';
 import { useQueryClient } from '@tanstack/react-query';
 import { translate } from 'i18n-calypso';
@@ -49,7 +50,7 @@ type SubscribersPageContextProps = {
 	showAddSubscribersModal: boolean;
 	showMigrateSubscribersModal: boolean;
 	setShowAddSubscribersModal: ( show: boolean ) => void;
-	addSubscribersCallback: () => void;
+	addSubscribersCallback: ( importError?: ImportSubscribersError ) => void;
 	migrateSubscribersCallback: ( sourceSiteId: number, targetSiteId: number ) => void;
 	closeAllModals: typeof closeAllModals;
 	siteId: number | null;
@@ -161,41 +162,53 @@ export const SubscribersPageProvider = ( {
 		queryClient.invalidateQueries( { queryKey: [ 'launchpad' ] } );
 	};
 
-	const addSubscribersCallback = () => {
+	const addSubscribersCallback = ( importError?: ImportSubscribersError ) => {
 		setShowAddSubscribersModal( false );
 		completeImportSubscribersTask();
 
-		if ( completedJob ) {
-			const { email_count, subscribed_count, already_subscribed_count, failed_subscribed_count } =
-				completedJob;
-			dispatch(
-				successNotice(
-					translate(
-						'Import completed. %(added)d subscribed, %(skipped)d already subscribed, and %(failed)d failed out of %(total)d %(totalLabel)s.',
+		if ( ! importError ) {
+			if ( completedJob ) {
+				const { email_count, subscribed_count, already_subscribed_count, failed_subscribed_count } =
+					completedJob;
+				dispatch(
+					successNotice(
+						translate(
+							'Import completed. %(added)d subscribed, %(skipped)d already subscribed, and %(failed)d failed out of %(total)d %(totalLabel)s.',
+							{
+								args: {
+									added: subscribed_count,
+									skipped: already_subscribed_count,
+									failed: failed_subscribed_count,
+									total: email_count,
+									totalLabel: translate( 'subscriber', 'subscribers', {
+										count: email_count,
+									} ),
+								},
+							}
+						)
+					)
+				);
+			} else {
+				dispatch(
+					successNotice(
+						translate(
+							"Your subscriber list is being processed. We'll send you an email when it's finished importing."
+						),
 						{
-							args: {
-								added: subscribed_count,
-								skipped: already_subscribed_count,
-								failed: failed_subscribed_count,
-								total: email_count,
-								totalLabel: translate( 'subscriber', 'subscribers', {
-									count: email_count,
-								} ),
-							},
+							duration: 5000,
 						}
 					)
-				)
-			);
+				);
+			}
 		} else {
+			const errorMessage =
+				'message' in importError && typeof importError.message === 'string'
+					? importError.message
+					: translate( 'An unknown error has occurred. Please try again in a second.' );
 			dispatch(
-				successNotice(
-					translate(
-						"Your subscriber list is being processed. We'll send you an email when it's finished importing."
-					),
-					{
-						duration: 5000,
-					}
-				)
+				errorNotice( errorMessage, {
+					duration: 5000,
+				} )
 			);
 		}
 	};

packages/subscriber/src/hooks/use-import-error.ts

@@ -0,0 +1,13 @@
+import { Subscriber } from '@automattic/data-stores';
+import { useSelect } from '@wordpress/data';
+
+export function useImportError() {
+	const { importSelector } = useSelect( ( select ) => {
+		const subscriber = select( Subscriber.store );
+		return {
+			importSelector: subscriber.getImportSubscribersSelector(),
+		};
+	}, [] );
+
+	return importSelector?.error;
+}