From 7d705059efeaacbb090b669d7c8a43817097cc5b Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Wed, 4 Dec 2024 14:25:30 +0200 Subject: [PATCH] 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 --- .../my-sites/importer/newsletter/importer.tsx | 3 +- .../paid-subscribers/connect-stripe.tsx | 4 +- .../newsletter/subscribers/step-done.tsx | 2 +- .../newsletter/subscribers/step-initial.tsx | 2 +- .../newsletter/subscribers/upload-form.tsx | 12 +++- .../my-sites/importer/newsletter/summary.tsx | 68 +++++++++++++------ client/my-sites/importer/newsletter/utils.tsx | 38 +++++++---- .../add-subscribers-modal.tsx | 15 +++- config/jetpack-cloud-development.json | 3 +- config/jetpack-cloud-horizon.json | 3 +- config/jetpack-cloud-production.json | 2 +- config/jetpack-cloud-stage.json | 3 +- 12 files changed, 107 insertions(+), 48 deletions(-) diff --git a/client/my-sites/importer/newsletter/importer.tsx b/client/my-sites/importer/newsletter/importer.tsx index bc0c7908a28ef..3b8d50abe6f41 100644 --- 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 index da20d0f0ae2e8..c5701b00ed12e 100644 --- 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( {

{ createInterpolateElement( __( - "To migrate your paid subscribers to WordPress.com, make sure you're connecting the same Stripe account you use with Substack." + "To migrate your paid subscribers, make sure you're connecting the same Stripe account you use with Substack." ), { 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: ( diff --git a/client/my-sites/importer/newsletter/subscribers/step-done.tsx b/client/my-sites/importer/newsletter/subscribers/step-done.tsx index 892f18acfb838..0d99b889b9d49 100644 --- 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 ( -

{ __( 'Import your subscribers to WordPress.com' ) }

+

{ __( 'Import your subscribers' ) }

{ 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 index 1aff63d8808f5..98f3c09167f94 100644 --- 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' ) }
-

{ __( 'Step 2: Import your subscribers to WordPress.com' ) }

+

{ __( 'Step 2: Import your subscribers' ) }

{ selectedSite.ID && ( 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. Learn more.' ), { - learnMoreLink: ( + learnMoreLink: isJetpack ? ( + // @ts-expect-error Used in createInterpolateElement doesn't need children. + + ) : ( diff --git a/client/my-sites/importer/newsletter/summary.tsx b/client/my-sites/importer/newsletter/summary.tsx index 98228ca7bb142..4d783e5f9bffb 100644 --- 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( {

- { getSummaryDescription( steps.content.status, steps.subscribers.status ) } + { getSummaryDescription( steps?.content?.status, steps.subscribers.status ) }

@@ -102,7 +106,7 @@ export default function Summary( {

{ __( 'Summary' ) }

- { steps.content.content && ( + { steps?.content?.content && ( ) } { steps.subscribers.content && ( @@ -114,7 +118,10 @@ export default function Summary( {
@@ -140,7 +147,7 @@ export default function Summary( { ) }

- { steps.content.content && ( + { steps?.content?.content && ( ) } { steps.subscribers.content && ( @@ -179,22 +186,41 @@ export default function Summary( {

{ __( 'What would you like to do next?' ) }

- - { __( 'Customize your newsletter' ) } - - - { __( 'View content' ) } - - - { __( 'Check subscribers' ) } - + { isJetpack ? ( + + { __( 'Customize your newsletter' ) } + + ) : ( + + { __( 'Customize your newsletter' ) } + + ) } + { steps?.content && ( + + { __( 'View content' ) } + + ) } + { isJetpack ? ( + + { __( 'Check subscribers' ) } + + ) : ( + + { __( 'Check subscribers' ) } + + ) } ); diff --git a/client/my-sites/importer/newsletter/utils.tsx b/client/my-sites/importer/newsletter/utils.tsx index 9067f98809cbe..08f83decd8401 100644 --- 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 index 1e02ea650c8ee..ac9850b5ff539 100644 --- 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 ) => { ) } diff --git a/config/jetpack-cloud-development.json b/config/jetpack-cloud-development.json index ce5abe7248554..0c03f80690439 100644 --- 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 index de59d6fce9c83..a678d7a353f3f 100644 --- 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 index 2caf66fc877a1..b50502400eb25 100644 --- 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 index 1af46313c65b7..c3a6054ef0f12 100644 --- 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": {