Some improvements to the paid newsletter importer (#94104)

Automattic · Sep 2, 2024 · d5d7acb · d5d7acb
1 parent 90f7698
commit d5d7acb
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 38 deletions.
diff --git a/client/my-sites/importer/newsletter/content-upload/file-importer.jsx b/client/my-sites/importer/newsletter/content-upload/file-importer.jsx
@@ -44,6 +44,7 @@ class FileImporter extends PureComponent {
 			icon: PropTypes.string.isRequired,
 			description: PropTypes.node.isRequired,
 			uploadDescription: PropTypes.node,
+			acceptedFileTypes: PropTypes.array,
 		} ).isRequired,
 		importerStatus: PropTypes.shape( {
 			errorData: PropTypes.shape( {
@@ -80,7 +81,8 @@ class FileImporter extends PureComponent {
 	};
 
 	render() {
-		const { title, overrideDestination, uploadDescription, optionalUrl } = this.props.importerData;
+		const { title, overrideDestination, uploadDescription, optionalUrl, acceptedFileTypes } =
+			this.props.importerData;
 		const { importerStatus, site, fromSite, nextStepUrl, skipNextStep } = this.props;
 		const { errorData, importerState, summaryModalOpen } = importerStatus;
 		const isEnabled = appStates.DISABLED !== importerState;
@@ -153,6 +155,7 @@ class FileImporter extends PureComponent {
 						site={ site }
 						optionalUrl={ optionalUrl }
 						fromSite={ fromSite }
+						acceptedFileTypes={ acceptedFileTypes }
 						nextStepUrl={ nextStepUrl }
 						skipNextStep={ skipNextStep }
 					/>

diff --git a/client/my-sites/importer/newsletter/content-upload/uploading-pane.jsx b/client/my-sites/importer/newsletter/content-upload/uploading-pane.jsx
@@ -48,6 +48,7 @@ export class UploadingPane extends PureComponent {
 			validate: PropTypes.func,
 		} ),
 		fromSite: PropTypes.string,
+		acceptedFileTypes: PropTypes.array,
 		nextStepUrl: PropTypes.string,
 		skipNextStep: PropTypes.func,
 	};
@@ -237,7 +238,7 @@ export class UploadingPane extends PureComponent {
 	};
 
 	render() {
-		const { importerStatus, fromSite, nextStepUrl, skipNextStep } = this.props;
+		const { importerStatus, fromSite, acceptedFileTypes, nextStepUrl, skipNextStep } = this.props;
 		const isReadyForImport = this.isReadyForImport();
 		const importerStatusClasses = clsx(
 			'importer__upload-content',
@@ -275,6 +276,7 @@ export class UploadingPane extends PureComponent {
 							type="file"
 							name="exportFile"
 							onChange={ this.initiateFromForm }
+							accept={ acceptedFileTypes?.length ? acceptedFileTypes.join( ',' ) : undefined }
 						/>
 					) }
 					<DropZone onFilesDrop={ isReadyForImport ? this.initiateFromDrop : noop } />

diff --git a/client/my-sites/importer/newsletter/content.tsx b/client/my-sites/importer/newsletter/content.tsx
@@ -1,5 +1,6 @@
-import { Card, Button, Gridicon } from '@automattic/components';
-import { QueryArgParsed } from '@wordpress/url/build-types/get-query-arg';
+import { Card } from '@automattic/components';
+import { Button } from '@wordpress/components';
+import { external } from '@wordpress/icons';
 import { useEffect } from 'react';
 import importerConfig from 'calypso/lib/importer/importer-config';
 import { EVERY_FIVE_SECONDS, Interval } from 'calypso/lib/interval';
@@ -12,10 +13,9 @@ import type { SiteDetails } from '@automattic/data-stores';
 
 type ContentProps = {
 	nextStepUrl: string;
-	selectedSite?: SiteDetails;
+	selectedSite: SiteDetails;
 	siteSlug: string;
-	fromSite: QueryArgParsed;
-	cardData: any;
+	fromSite: string;
 	skipNextStep: () => void;
 };
 
@@ -26,8 +26,8 @@ export default function Content( {
 	fromSite,
 	skipNextStep,
 }: ContentProps ) {
-	const siteTitle = selectedSite?.title;
-	const siteId = selectedSite?.ID;
+	const siteTitle = selectedSite.title;
+	const siteId = selectedSite.ID;
 
 	const siteImports = useSelector( ( state ) => getImporterStatusForSiteId( state, siteId ) );
 
@@ -40,10 +40,6 @@ export default function Content( {
 	useEffect( fetchImporters, [ siteId, dispatch ] );
 	useEffect( startImporting, [ siteId, dispatch, siteImports ] );
 
-	if ( ! selectedSite ) {
-		return null;
-	}
-
 	function startImporting() {
 		siteId && siteImports.length === 0 && dispatch( startImport( siteId ) );
 	}
@@ -78,8 +74,10 @@ export default function Content( {
 						href={ `https://${ fromSite }/publish/settings?search=export` }
 						target="_blank"
 						rel="noreferrer noopener"
+						icon={ external }
+						variant="secondary"
 					>
-						Export content <Gridicon icon="external" />
+						Export content
 					</Button>
 					<hr />
 					<h2>Step 2: Import your content to WordPress.com</h2>
@@ -90,7 +88,7 @@ export default function Content( {
 					site={ selectedSite }
 					importerStatus={ importerStatus }
 					importerData={ importerData }
-					fromSite={ fromSite as string }
+					fromSite={ fromSite }
 					nextStepUrl={ nextStepUrl }
 					skipNextStep={ skipNextStep }
 				/>

diff --git a/client/my-sites/importer/newsletter/importer.scss b/client/my-sites/importer/newsletter/importer.scss
@@ -52,19 +52,19 @@
 		fill: var(--studio-gray-50);
 	}
 
-
 	.stripe-logo {
 		width: 48px;
 		padding-left: 8px;
 	}
-}
 
-.select-newsletter-form__help {
-	margin-top: 8px;
-	font-size: 0.75rem;
+	.select-newsletter-form__help {
+		margin-top: 8px;
+		margin-bottom: 0;
+		font-size: 0.75rem;
 
-	&.is-error {
-		color: var(--color-error);
+		&.is-error {
+			color: var(--color-error);
+		}
 	}
 }
 
@@ -82,6 +82,7 @@
 	padding-top: 50px;
 	color: var(--studio-gray-50);
 }
+
 .subscriber-upload-form__in-progress svg,
 .subscriber-upload-form .file-picker svg {
 	width: 48px;
@@ -96,16 +97,21 @@
 	padding: 0;
 	list-style: none;
 }
+
 .subscriber-upload-form__modal li {
 	display: flex;
 }
+
 .subscriber-upload-form__modal strong {
 	margin-right: 8px;
 }
+
 .subscriber-upload-form__modal svg {
 	fill: var(--studio-gray-50);
 	margin-right: 8px;
 }
+
 .select-newsletter-form .is-loading {
 	@include placeholder( --color-neutral-10 );
+	margin-bottom: 0;
 }
diff --git a/client/my-sites/importer/newsletter/importer.tsx b/client/my-sites/importer/newsletter/importer.tsx
@@ -150,7 +150,6 @@ export default function NewsletterImporter( { siteSlug, engine, step }: Newslett
 					stepUrl={ stepUrl }
 					urlData={ urlData }
 					isLoading={ isFetching || isResetPaidNewsletterPending }
-					validFromSite={ validFromSite }
 				/>
 			) }
 

diff --git a/client/my-sites/importer/newsletter/select-newsletter-form.tsx b/client/my-sites/importer/newsletter/select-newsletter-form.tsx
@@ -10,16 +10,10 @@ type Props = {
 	stepUrl: string;
 	urlData?: UrlData;
 	isLoading: boolean;
-	validFromSite: boolean;
 };
 
-export default function SelectNewsletterForm( {
-	stepUrl,
-	urlData,
-	isLoading,
-	validFromSite,
-}: Props ) {
-	const [ hasError, setHasError ] = useState( ! validFromSite );
+export default function SelectNewsletterForm( { stepUrl, urlData, isLoading }: Props ) {
+	const [ hasError, setHasError ] = useState( false );
 
 	const handleAction = ( fromSite: string ) => {
 		if ( ! isValidUrl( fromSite ) ) {
@@ -54,12 +48,12 @@ export default function SelectNewsletterForm( {
 				/>
 				{ hasError && (
 					<p className="select-newsletter-form__help is-error">
-						Please enter a valid substack URL.
+						Please enter a valid Substack URL.
 					</p>
 				) }
 				{ ! hasError && (
 					<p className="select-newsletter-form__help">
-						Enter the URL of the substack newsletter that you wish to import.
+						Enter the URL of the Substack newsletter that you wish to import.
 					</p>
 				) }
 			</div>

diff --git a/client/my-sites/importer/newsletter/subscribers.tsx b/client/my-sites/importer/newsletter/subscribers.tsx
@@ -62,12 +62,11 @@ export default function Subscribers( {
 					click 'Export.' Once the CSV file is downloaded, upload it in the next step.
 				</p>
 				<Button
-					variant="secondary"
 					href={ `https://${ fromSite }/publish/subscribers` }
 					target="_blank"
 					rel="noreferrer noopener"
-					iconPosition="right"
 					icon={ external }
+					variant="secondary"
 				>
 					Export subscribers
 				</Button>
@@ -107,9 +106,7 @@ export default function Subscribers( {
 							) }
 						</ul>
 					</div>
-					<Button variant="primary" href={ nextStepUrl }>
-						Continue
-					</Button>
+					<Button href={ nextStepUrl }>Continue</Button>
 				</Modal>
 			) }
 		</>