Add: Newsletter paid importer

client/components/step-progress/style.scss

@@ -41,6 +41,7 @@
 	font-style: normal;
 	font-weight: normal;
 	margin-top: 9px;
+	text-align: center;
 }
 
 .step-progress__element-button {

client/my-sites/importer/controller.js

@@ -6,6 +6,7 @@ import CaptureScreen from 'calypso/blocks/import/capture';
 import ImporterList from 'calypso/blocks/import/list';
 import { getFinalImporterUrl } from 'calypso/landing/stepper/declarative-flow/internals/steps-repository/import/helper';
 import { decodeURIComponentIfValid } from 'calypso/lib/url';
+import NewsletterImporter from 'calypso/my-sites/importer/newsletter/importer';
 import SectionImport from 'calypso/my-sites/importer/section-import';
 import { getSelectedSiteSlug } from 'calypso/state/ui/selectors';
 import 'calypso/blocks/import/style/base.scss';
@@ -107,7 +108,7 @@ export function importNewsletterSite( context, next ) {
 
 	context.primary = (
 		<BrowserRouter>
-			<div className="import__onboarding-page">Howdy substacker! { siteSlug }</div>
+			<NewsletterImporter siteSlug={ siteSlug } engine="substack" step={ context.params.step } />
 		</BrowserRouter>
 	);
 	next();

client/my-sites/importer/index.js

@@ -22,7 +22,7 @@ export default function () {
 	);
 
 	page(
-		'/import/newsletter/substack/:site_id',
+		'/import/newsletter/substack/:site_id/:step?',
 		siteSelection,
 		navigation,
 		redirectWithoutSite( '/import' ),

client/my-sites/importer/newsletter/content.tsx

@@ -0,0 +1,20 @@
+import { Card, Button } from '@automattic/components';
+
+export default function Content( { nextStepUrl } ) {
+	return (
+		<Card>
+			<h2>Step 1: Export your content from Substack</h2>
+			<p>
+				To generate a ZIP file of all your Substack posts, go to Settings { '>' } Exports and click
+				'Create a new export.' Once the ZIP file is downloaded, upload it in the next step.
+			</p>
+			<Button>Export content</Button>
+			<hr />
+			<h2>Step 2: Import your content to WordPress.com (2/2)</h2>
+			<Button href={ nextStepUrl } primary>
+				Continue
+			</Button>{ ' ' }
+			<Button href={ nextStepUrl }>Skip for now</Button>
+		</Card>
+	);
+}

client/my-sites/importer/newsletter/importer.scss

@@ -0,0 +1,54 @@
+.newsletter-importer {
+	margin: 0 auto;
+	max-width: 720px;
+
+	.step-progress {
+		margin-bottom: 20px;
+	}
+
+	.card {
+		h2 {
+			font-size: rem(16px);
+			font-weight: 500;
+			line-height: 19px;
+			letter-spacing: 0.15px;
+			padding-bottom: 20px;
+		}
+
+		p {
+			font-size: rem(14px);
+			line-height: 20px;
+			color: var(--studio-gray-50);
+		}
+
+		hr {
+			margin: 32px 0;
+			color: var(--studio-gray-5);
+			background-color: var(--studio-gray-5);
+		}
+	}
+}
+
+.logo-chain {
+	display: flex;
+	justify-content: center;
+	margin-bottom: 20px;
+}
+
+.logo-chain__logo {
+	width: 56px;
+	height: 56px;
+	margin: 0 -16px 0 0;
+	border-radius: 50%;
+	overflow: hidden;
+}
+
+.logo-chain__logo .importer__service-icon.wordpress {
+	background-color: #3858e9;
+}
+
+.logo-chain__logo .importer__service-icon.substack-logo {
+	width: 46px;
+	height: 46px;
+	margin-top: 5px;
+}

client/my-sites/importer/newsletter/importer.tsx

@@ -0,0 +1,64 @@
+import { useTranslate } from 'i18n-calypso';
+import FormattedHeader from 'calypso/components/formatted-header';
+import StepProgress from 'calypso/components/step-progress';
+import ImporterLogo from '../importer-logo';
+import Content from './content';
+import PaidSubscribers from './paid-subscribers';
+import Subscribers from './subscribers';
+import Summary from './summary';
+
+import './importer.scss';
+
+function LogoChain( { logos } ) {
+	return (
+		<div className="logo-chain">
+			{ logos.map( ( logo ) => (
+				<div className="logo-chain__logo" style={ { background: logo.color } }>
+					<ImporterLogo key={ logo.name } icon={ logo.name } />
+				</div>
+			) ) }
+		</div>
+	);
+}
+
+const steps = [ Content, Subscribers, PaidSubscribers, Summary ];
+
+const stepSlugs = [ 'content', 'subscribers', 'paid-subscribers', 'summary' ];
+
+export default function NewsletterImporter( { siteSlug, engine, step } ) {
+	const translate = useTranslate();
+
+	const stepsProgress = [
+		translate( 'Content' ),
+		translate( 'Subscribers' ),
+		translate( 'Paid Subscribers' ),
+		translate( 'Summary' ),
+	];
+
+	let stepIndex = 0;
+	let nextStep = stepSlugs[ 1 ];
+	stepSlugs.forEach( ( stepName, index ) => {
+		if ( stepName === step ) {
+			stepIndex = index;
+			nextStep = stepSlugs[ index + 1 ] ? stepSlugs[ index + 1 ] : stepSlugs[ index ];
+		}
+	} );
+
+	const nextStepUrl = `/import/newsletter/${ engine }/${ siteSlug }/${ nextStep }`;
+
+	const Step = steps[ stepIndex ] || steps[ 0 ];
+	return (
+		<div className="newsletter-importer">
+			<LogoChain
+				logos={ [
+					{ name: 'substack', color: 'var(--color-substack)' },
+					{ name: 'wordpress', color: '#3858E9' },
+				] }
+			/>
+
+			<FormattedHeader headerText="Import your newsletter" />
+			<StepProgress steps={ stepsProgress } currentStep={ stepIndex } />
+			<Step siteSlug nextStepUrl={ nextStepUrl } />
+		</div>
+	);
+}

client/my-sites/importer/newsletter/paid-subscribers.tsx

@@ -0,0 +1,15 @@
+import { Card, Button } from '@automattic/components';
+
+export default function PaidSubscribers( { nextStepUrl } ) {
+	return (
+		<Card>
+			<h2>Connect your Stripe account</h2>
+			<p>
+				To migrate your paid subscribers, ensure you're connecting the same Stripe account used with
+				your current provider.
+			</p>
+			<Button primary>Connect with Stripe</Button>{ ' ' }
+			<Button href={ nextStepUrl }>Skip for now</Button>
+		</Card>
+	);
+}

client/my-sites/importer/newsletter/subscribers.tsx

@@ -0,0 +1,20 @@
+import { Card, Button } from '@automattic/components';
+
+export default function Subscribers( { nextStepUrl } ) {
+	return (
+		<Card>
+			<h2>Step 1: Export your subscribers from Substack</h2>
+			<p>
+				To generate a CSV file of all your Substack subscribers, go to the Subscribers tab and click
+				'Export.' Once the CSV file is downloaded, upload it in the next step.
+			</p>
+			<Button>Export subscribers</Button>
+			<hr />
+			<h2>Step 2: Import your subscribers to WordPress.com</h2>
+			<Button href={ nextStepUrl } primary>
+				Continue
+			</Button>{ ' ' }
+			<Button href={ nextStepUrl }>Skip for now</Button>
+		</Card>
+	);
+}

client/my-sites/importer/newsletter/summary.tsx

@@ -0,0 +1,26 @@
+import { Card, ConfettiAnimation } from '@automattic/components';
+import { Icon } from '@wordpress/components';
+
+export default function Summary() {
+	const prefersReducedMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches;
+
+	return (
+		<Card>
+			<ConfettiAnimation trigger={ ! prefersReducedMotion } />
+			<h2>Success!</h2>
+			<p>Here's an overview of what you'll migrate:</p>
+			<p>
+				<Icon icon="post" />
+				<strong>47</strong> posts
+			</p>
+			<p>
+				<Icon icon="people" />
+				<strong>99</strong> subscribers
+			</p>
+			<p>
+				<Icon icon="currencyDollar" />
+				<strong>17</strong> 17 paid subscribers
+			</p>
+		</Card>
+	);
+}