Paid subscriber import: enable for Jetpack sites, hide content step (#…

…97005) * Paid subscriber import: enable for Jetpack sites, hide content step * Update "add subscribers" modal link for the Jetpack cloud modal * Fixes invalid aria attribute warning
Automattic · Dec 4, 2024 · 7d70505 · 7d70505
1 parent ebcd294
commit 7d70505
Show file tree

Hide file tree

Showing 12 changed files with 107 additions and 48 deletions.
diff --git a/client/my-sites/importer/newsletter/importer.tsx b/client/my-sites/importer/newsletter/importer.tsx
@@ -71,6 +71,7 @@ export default function NewsletterImporter( {
 	if ( step === 'reset' ) {
 		step = 'content';
 	}
+
 	const { data: paidNewsletterData } = usePaidNewsletterQuery(
 		engine,
 		step,
@@ -162,7 +163,7 @@ export default function NewsletterImporter( {
 	const shouldShowConfettiRef = useRef( false );
 	const [ showConfetti, setShowConfetti ] = useState( false );
 	const importerStatus = getImporterStatus(
-		paidNewsletterData?.steps?.content.status,
+		paidNewsletterData?.steps?.content?.status,
 		paidNewsletterData?.steps?.subscribers.status
 	);
 

diff --git a/client/my-sites/importer/newsletter/subscribers/paid-subscribers/connect-stripe.tsx b/client/my-sites/importer/newsletter/subscribers/paid-subscribers/connect-stripe.tsx
@@ -50,7 +50,7 @@ export default function ConnectStripe( {
 			<p>
 				{ createInterpolateElement(
 					__(
-						"To migrate your <strong>paid subscribers</strong> to WordPress.com, make sure you're connecting the <strong>same</strong> Stripe account you use with Substack."
+						"To migrate your <strong>paid subscribers</strong>, make sure you're connecting the <strong>same</strong> Stripe account you use with Substack."
 					),
 					{
 						strong: <strong />,
@@ -64,7 +64,7 @@ export default function ConnectStripe( {
 					onClick={ () => {
 						recordTracksEvent( 'calypso_paid_importer_connect_stripe' );
 					} }
-					ariaLabel={ __( 'Connect Stripe' ) }
+					aria-label={ __( 'Connect Stripe' ) }
 				>
 					{ createInterpolateElement( __( 'Connect <StripeLogo />' ), {
 						StripeLogo: (

diff --git a/client/my-sites/importer/newsletter/subscribers/step-done.tsx b/client/my-sites/importer/newsletter/subscribers/step-done.tsx
@@ -11,7 +11,7 @@ export default function StepDone( { cardData, nextStepUrl }: SubscribersStepProp
 
 	return (
 		<Card>
-			<h2>{ __( 'Import your subscribers to WordPress.com' ) }</h2>
+			<h2>{ __( 'Import your subscribers' ) }</h2>
 			<Notice status="success" className="importer__notice" isDismissible={ false }>
 				{ sprintf(
 					// Translators: %d is number of subscribers.

diff --git a/client/my-sites/importer/newsletter/subscribers/step-initial.tsx b/client/my-sites/importer/newsletter/subscribers/step-initial.tsx
@@ -65,7 +65,7 @@ export default function StepInitial( {
 				{ __( 'Open Substack subscribers' ) }
 			</Button>
 			<hr />
-			<h2>{ __( 'Step 2: Import your subscribers to WordPress.com' ) }</h2>
+			<h2>{ __( 'Step 2: Import your subscribers' ) }</h2>
 			{ selectedSite.ID && (
 				<SubscriberUploadForm
 					siteId={ selectedSite.ID }

diff --git a/client/my-sites/importer/newsletter/subscribers/upload-form.tsx b/client/my-sites/importer/newsletter/subscribers/upload-form.tsx
@@ -1,7 +1,7 @@
 import { FormInputValidation } from '@automattic/components';
 import { Subscriber } from '@automattic/data-stores';
 import { localizeUrl } from '@automattic/i18n-utils';
-import { ProgressBar } from '@wordpress/components';
+import { ProgressBar, ExternalLink } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf } from '@wordpress/i18n';
@@ -11,7 +11,9 @@ import { useCallback, useState, FormEvent, useEffect } from 'react';
 import DropZone from 'calypso/components/drop-zone';
 import FilePicker from 'calypso/components/file-picker';
 import InlineSupportLink from 'calypso/components/inline-support-link';
+import { useSelector } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
+import { isJetpackSite } from 'calypso/state/sites/selectors';
 import ImporterActionButton from '../../importer-action-buttons/action-button';
 import ImporterActionButtonContainer from '../../importer-action-buttons/container';
 import ImportSubscribersError from './import-subscribers-error';
@@ -53,6 +55,7 @@ export default function SubscriberUploadForm( { nextStepUrl, siteId, skipNextSte
 		},
 		[ selectedFile, importCsvSubscribers, siteId ]
 	);
+	const isJetpack = useSelector( ( state ) => isJetpackSite( state, siteId ) );
 
 	const onFileSelect = useCallback( ( files: Array< File > ) => {
 		const file = files[ 0 ];
@@ -125,11 +128,14 @@ export default function SubscriberUploadForm( { nextStepUrl, siteId, skipNextSte
 							'By clicking "Continue," you represent that you\'ve obtained the appropriate consent to email each person. <learnMoreLink>Learn more</learnMoreLink>.'
 						),
 						{
-							learnMoreLink: (
+							learnMoreLink: isJetpack ? (
+								// @ts-expect-error Used in createInterpolateElement doesn't need children.
+								<ExternalLink href="https://jetpack.com/support/newsletter/import-subscribers/" />
+							) : (
 								<InlineSupportLink
 									showIcon={ false }
 									supportLink={ localizeUrl(
-										'https://wordpress.com/support/launch-a-newsletter/import-subscribers-to-a-newsletter/'
+										'https://wordpress.com/support/import-subscribers-to-a-newsletter/'
 									) }
 									supportPostId={ 220199 }
 								/>

diff --git a/client/my-sites/importer/newsletter/summary.tsx b/client/my-sites/importer/newsletter/summary.tsx
@@ -9,6 +9,8 @@ import { Dispatch, SetStateAction, useEffect } from 'react';
 import pauseSubstackBillingImg from 'calypso/assets/images/importer/pause-substack-billing.png';
 import { Steps, StepStatus } from 'calypso/data/paid-newsletter/use-paid-newsletter-query';
 import { useResetMutation } from 'calypso/data/paid-newsletter/use-reset-mutation';
+import { useSelector } from 'calypso/state';
+import { isJetpackSite, getSiteAdminUrl } from 'calypso/state/sites/selectors';
 import ImporterActionButton from '../importer-action-buttons/action-button';
 import ImporterActionButtonContainer from '../importer-action-buttons/container';
 import ContentSummary from './summary/content';
@@ -55,6 +57,8 @@ export default function Summary( {
 	const { __ } = useI18n();
 	const { resetPaidNewsletter } = useResetMutation();
 	const prefersReducedMotion = useReducedMotion();
+	const isJetpack = useSelector( ( state ) => isJetpackSite( state, selectedSite.ID ) );
+	const siteAdmminUrl = useSelector( ( state ) => getSiteAdminUrl( state, selectedSite.ID ) );
 
 	const resetImporter = () => resetPaidNewsletter( selectedSite.ID, engine, 'content' );
 	const paidSubscribersCount = parseInt(
@@ -69,7 +73,7 @@ export default function Summary( {
 	}, [ showConfetti, shouldShownConfetti ] );
 
 	// Combined status of subscriber & content importer
-	const importerStatus = getImporterStatus( steps.content.status, steps.subscribers.status );
+	const importerStatus = getImporterStatus( steps?.content?.status, steps.subscribers.status );
 
 	// Either content- or subscriber-import is still in progress
 	if ( importerStatus === 'importing' || importerStatus === 'initial' ) {
@@ -79,7 +83,7 @@ export default function Summary( {
 				<div className="summary__content">
 					<p>
 						<strong>
-							{ getSummaryDescription( steps.content.status, steps.subscribers.status ) }
+							{ getSummaryDescription( steps?.content?.status, steps.subscribers.status ) }
 						</strong>
 						<br />
 					</p>
@@ -102,7 +106,7 @@ export default function Summary( {
 			<Card>
 				<h2>{ __( 'Summary' ) }</h2>
 				<div className="summary__content summary__content-skipped">
-					{ steps.content.content && (
+					{ steps?.content?.content && (
 						<ContentSummary stepContent={ steps.content.content } status={ steps.content.status } />
 					) }
 					{ steps.subscribers.content && (
@@ -114,7 +118,10 @@ export default function Summary( {
 				</div>
 				<ImporterActionButtonContainer noSpacing>
 					<ImporterActionButton
-						href={ `/import/newsletter/substack/${ selectedSite.slug }/content?from=${ fromSite }` }
+						href={ `/import/newsletter/substack/${ selectedSite.slug }/${
+							// Content step is disabled for Jetpack sites, thus first step would be subscribers
+							steps?.content ? 'content' : 'subscribers'
+						}?from=${ fromSite }` }
 						onClick={ resetImporter }
 						primary
 					>
@@ -140,7 +147,7 @@ export default function Summary( {
 					) }
 				</p>
 				<div className="summary__content">
-					{ steps.content.content && (
+					{ steps?.content?.content && (
 						<ContentSummary stepContent={ steps.content.content } status={ steps.content.status } />
 					) }
 					{ steps.subscribers.content && (
@@ -179,22 +186,41 @@ export default function Summary( {
 				<hr />
 				<p>{ __( 'What would you like to do next?' ) }</p>
 				<ImporterActionButtonContainer noSpacing>
-					<ImporterActionButton
-						href={ '/settings/newsletter/' + selectedSite.slug }
-						onClick={ resetImporter }
-						primary
-					>
-						{ __( 'Customize your newsletter' ) }
-					</ImporterActionButton>
-					<ImporterActionButton href={ '/posts/' + selectedSite.slug } onClick={ resetImporter }>
-						{ __( 'View content' ) }
-					</ImporterActionButton>
-					<ImporterActionButton
-						href={ '/subscribers/' + selectedSite.slug }
-						onClick={ resetImporter }
-					>
-						{ __( 'Check subscribers' ) }
-					</ImporterActionButton>
+					{ isJetpack ? (
+						<ImporterActionButton
+							href={ `${ siteAdmminUrl }admin.php?page=jetpack#/newsletter` }
+							primary
+						>
+							{ __( 'Customize your newsletter' ) }
+						</ImporterActionButton>
+					) : (
+						<ImporterActionButton
+							href={ `/settings/newsletter/${ selectedSite.slug }` }
+							onClick={ resetImporter }
+							primary
+						>
+							{ __( 'Customize your newsletter' ) }
+						</ImporterActionButton>
+					) }
+					{ steps?.content && (
+						<ImporterActionButton href={ '/posts/' + selectedSite.slug } onClick={ resetImporter }>
+							{ __( 'View content' ) }
+						</ImporterActionButton>
+					) }
+					{ isJetpack ? (
+						<ImporterActionButton
+							href={ `https://cloud.jetpack.com/subscribers/${ selectedSite.slug }` }
+						>
+							{ __( 'Check subscribers' ) }
+						</ImporterActionButton>
+					) : (
+						<ImporterActionButton
+							href={ `/subscribers/${ selectedSite.slug }` }
+							onClick={ resetImporter }
+						>
+							{ __( 'Check subscribers' ) }
+						</ImporterActionButton>
+					) }
 				</ImporterActionButtonContainer>
 			</Card>
 		);

diff --git a/client/my-sites/importer/newsletter/utils.tsx b/client/my-sites/importer/newsletter/utils.tsx
@@ -27,23 +27,11 @@ export function getStepsProgress(
 	paidNewsletterData?: PaidNewsletterData
 ) {
 	const summaryStatus = getImporterStatus(
-		paidNewsletterData?.steps.content.status,
+		paidNewsletterData?.steps?.content?.status,
 		paidNewsletterData?.steps.subscribers.status
 	);
 
 	const result: ClickHandler[] = [
-		{
-			message: __( 'Content' ),
-			onClick: () => {
-				navigate(
-					addQueryArgs( `/import/newsletter/${ engine }/${ selectedSiteSlug }/content`, {
-						from: fromSite,
-					} )
-				);
-			},
-			show: 'onComplete',
-			indicator: getStepProgressIndicator( paidNewsletterData?.steps.content.status ),
-		},
 		{
 			message: __( 'Subscribers' ),
 			onClick: () => {
@@ -70,13 +58,37 @@ export function getStepsProgress(
 		},
 	];
 
+	// Content step as first only when it's available (not available for Jetpack sites)
+	if ( paidNewsletterData?.steps?.content ) {
+		result.unshift( {
+			message: __( 'Content' ),
+			onClick: () => {
+				navigate(
+					addQueryArgs( `/import/newsletter/${ engine }/${ selectedSiteSlug }/content`, {
+						from: fromSite,
+					} )
+				);
+			},
+			show: 'onComplete',
+			indicator: getStepProgressIndicator( paidNewsletterData?.steps?.content?.status ),
+		} );
+	}
+
 	return result;
 }
 
+/*
+ * Gather entire engine's status by combining "content" and "subscribers" steps status
+ */
 export function getImporterStatus(
 	contentStepStatus?: StepStatus,
 	subscribersStepStatus?: StepStatus
 ): StepStatus {
+	// When content step is hidden for Jetpack sites, we can rely on subscriber status for entire engine's status
+	if ( ! contentStepStatus ) {
+		return subscribersStepStatus || 'initial';
+	}
+
 	if ( contentStepStatus === 'done' && subscribersStepStatus === 'done' ) {
 		return 'done';
 	}

diff --git a/client/my-sites/subscribers/components/add-subscribers-modal/add-subscribers-modal.tsx b/client/my-sites/subscribers/components/add-subscribers-modal/add-subscribers-modal.tsx
@@ -15,6 +15,7 @@ import { useEffect, useState } from 'react';
 import InlineSupportLink from 'calypso/components/inline-support-link';
 import { LoadingBar } from 'calypso/components/loading-bar';
 import Notice from 'calypso/components/notice';
+import isJetpackCloud from 'calypso/lib/jetpack/is-jetpack-cloud';
 import { useSubscribersPage } from 'calypso/my-sites/subscribers/components/subscribers-page/subscribers-page-context';
 import { isBusinessTrialSite } from 'calypso/sites-dashboard/utils';
 import './style.scss';
@@ -95,7 +96,13 @@ const AddSubscribersModal = ( { site }: AddSubscribersModalProps ) => {
 		recordTracksEvent( `calypso_subscribers_add_question`, {
 			method: 'substack',
 		} );
-		page( `/import/newsletter/substack/${ site?.slug || site?.ID || '' }` );
+		if ( isJetpackCloud() ) {
+			window.location.href = `https://wordpress.com/import/newsletter/substack/${
+				site?.slug || site?.ID || ''
+			}`;
+		} else {
+			page( `/import/newsletter/substack/${ site?.slug || site?.ID || '' }` );
+		}
 	};
 
 	const renderLearnMoreLink = ( isJetpack: boolean | null ) => {
@@ -172,7 +179,11 @@ const AddSubscribersModal = ( { site }: AddSubscribersModalProps ) => {
 							<FlowQuestion
 								icon={ reusableBlock }
 								title={ translate( 'Import from Substack' ) }
-								text={ translate( 'Quickly bring your subscribers (and even your content!).' ) }
+								text={
+									isJetpack
+										? translate( 'Quickly bring your free and paid subscribers.' )
+										: translate( 'Quickly bring your subscribers (and even your content!).' )
+								}
 								onClick={ importFromSubstack }
 							/>
 						) }

diff --git a/config/jetpack-cloud-development.json b/config/jetpack-cloud-development.json
@@ -84,7 +84,8 @@
 		"upgrades/redirect-payments": true,
 		"jetpack/pricing-page-cart": true,
 		"yolo/command-palette": false,
-		"bulk-plugin-management": true
+		"bulk-plugin-management": true,
+		"importers/newsletter": true
 	},
 	"enable_all_sections": false,
 	"sections": {

diff --git a/config/jetpack-cloud-horizon.json b/config/jetpack-cloud-horizon.json
@@ -77,7 +77,8 @@
 		"upgrades/redirect-payments": true,
 		"jetpack/pricing-page-cart": true,
 		"yolo/command-palette": false,
-		"bulk-plugin-management": true
+		"bulk-plugin-management": true,
+		"importers/newsletter": true
 	},
 	"enable_all_sections": false,
 	"sections": {

diff --git a/config/jetpack-cloud-production.json b/config/jetpack-cloud-production.json
@@ -40,7 +40,7 @@
 		"current-site/notice": false,
 		"current-site/stale-cart-notice": false,
 		"i18n/community-translator": false,
-		"importers/newsletter": false,
+		"importers/newsletter": true,
 		"jetpack-cloud": true,
 		"jetpack/agency-dashboard": true,
 		"jetpack/backup-messaging-i3": true,

diff --git a/config/jetpack-cloud-stage.json b/config/jetpack-cloud-stage.json
@@ -81,7 +81,8 @@
 		"upgrades/redirect-payments": true,
 		"jetpack/pricing-page-cart": true,
 		"yolo/command-palette": false,
-		"bulk-plugin-management": true
+		"bulk-plugin-management": true,
+		"importers/newsletter": true
 	},
 	"enable_all_sections": false,
 	"sections": {