From d5d7acbafea5f635b03bff32fa4aa3e5fb5fb605 Mon Sep 17 00:00:00 2001 From: Przemek Kuliga Date: Mon, 2 Sep 2024 15:40:20 +0200 Subject: [PATCH] Some improvements to the paid newsletter importer (#94104) --- .../content-upload/file-importer.jsx | 5 +++- .../content-upload/uploading-pane.jsx | 4 +++- .../my-sites/importer/newsletter/content.tsx | 24 +++++++++---------- .../importer/newsletter/importer.scss | 20 ++++++++++------ .../my-sites/importer/newsletter/importer.tsx | 1 - .../newsletter/select-newsletter-form.tsx | 14 ++++------- .../importer/newsletter/subscribers.tsx | 7 ++---- 7 files changed, 37 insertions(+), 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 index ce40157444f31..cbc7114b1fc59 100644 --- 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 index 26394ee74adcb..c1239cf93291b 100644 --- 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 } /> ) } diff --git a/client/my-sites/importer/newsletter/content.tsx b/client/my-sites/importer/newsletter/content.tsx index 0342fe1eb1ae1..d496699853a3d 100644 --- 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 + Export content

Step 2: Import your content to WordPress.com

@@ -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 index c7575c40f1d12..5e2b158ac60ca 100644 --- 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 index 06638387d8ce5..e3d52f7c12413 100644 --- 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 index 5fea47165b89a..891f51da52a01 100644 --- 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 && (

- Please enter a valid substack URL. + Please enter a valid Substack URL.

) } { ! hasError && (

- Enter the URL of the substack newsletter that you wish to import. + Enter the URL of the Substack newsletter that you wish to import.

) } diff --git a/client/my-sites/importer/newsletter/subscribers.tsx b/client/my-sites/importer/newsletter/subscribers.tsx index 43388fc6d94c9..fa27b1d9c0700 100644 --- 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.

@@ -107,9 +106,7 @@ export default function Subscribers( { ) } - + ) }