Subscriptions: Add "Paid newsletter" section to the Newsletter settin…

…gs (#36975)

projects/plugins/jetpack/_inc/client/components/button/README.md

@@ -10,7 +10,7 @@ var Button = require( 'components/button' );
 
 render: function() {
 	return (
-		<Button compact primary disabled={ this.props.disabled } >You rock</Button>
+		<Button compact primary disabled={ this.props.disabled }>You rock</Button>
 	);
 }
 ```

projects/plugins/jetpack/_inc/client/newsletter/index.jsx

@@ -8,6 +8,7 @@ import { SUBSCRIPTIONS_MODULE_NAME } from './constants';
 import EmailSettings from './email-settings';
 import MessagesSetting from './messages-setting';
 import NewsletterCategories from './newsletter-categories';
+import PaidNewsletter from './paid-newsletter';
 import SubscriptionsSettings from './subscriptions-settings';
 
 /**
@@ -45,6 +46,7 @@ function Subscriptions( props ) {
 			{ foundSubscriptions && (
 				<>
 					<SubscriptionsSettings siteRawUrl={ siteRawUrl } blogID={ blogID } />
+					<PaidNewsletter />
 					<NewsletterCategories />
 					<EmailSettings />
 					<MessagesSetting { ...props } />

projects/plugins/jetpack/_inc/client/newsletter/paid-newsletter.jsx

@@ -0,0 +1,52 @@
+import { __ } from '@wordpress/i18n';
+import Button from 'components/button';
+import { withModuleSettingsFormHelpers } from 'components/module-settings/with-module-settings-form-helpers';
+import SettingsCard from 'components/settings-card';
+import SettingsGroup from 'components/settings-group';
+import React from 'react';
+import { connect } from 'react-redux';
+import { getJetpackCloudUrl } from 'state/initial-state';
+import { SUBSCRIPTIONS_MODULE_NAME } from './constants';
+
+/**
+ * Paid Newsletter component.
+ *
+ * @param {object} props - Component props.
+ * @returns {React.Component} Subscription settings component.
+ */
+function PaidNewsletter( props ) {
+	const { isSubscriptionsActive, setupPaymentPlansUrl } = props;
+
+	const setupPaymentPlansButtonDisabled = ! isSubscriptionsActive;
+
+	return (
+		<SettingsCard header={ __( 'Paid Newsletter', 'jetpack' ) } hideButton>
+			<SettingsGroup>
+				<p className="jp-settings-card__email-settings">
+					{ __(
+						'Earn money through your Newsletter. Reward your most loyal subscribers with exclusive content or add a paywall to monetize content.',
+						'jetpack'
+					) }
+				</p>
+
+				<Button
+					href={ ! setupPaymentPlansButtonDisabled ? setupPaymentPlansUrl : undefined }
+					disabled={ setupPaymentPlansButtonDisabled }
+					primary
+					rna
+				>
+					{ __( 'Set up', 'jetpack' ) }
+				</Button>
+			</SettingsGroup>
+		</SettingsCard>
+	);
+}
+
+export default withModuleSettingsFormHelpers(
+	connect( ( state, ownProps ) => {
+		return {
+			isSubscriptionsActive: ownProps.getOptionValue( SUBSCRIPTIONS_MODULE_NAME ),
+			setupPaymentPlansUrl: getJetpackCloudUrl( state, 'monetize/payments' ),
+		};
+	} )( PaidNewsletter )
+);

projects/plugins/jetpack/changelog/update-paid-newsletter-link

@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Subscriptions: Add "Paid newsletter" section to the Newsletter settings