Earn: Add a Stripe connect prompt to the Donations block. (#43166)

apps/full-site-editing/full-site-editing-plugin/donations/donations.js

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import StripeNudge from './stripe-nudge';
+
+const Donations = ( { stripeConnectUrl } ) => {
+	const [ activeTab, setActiveTab ] = useState( 'one-time' );
+
+	const isActive = ( button ) => ( activeTab === button ? 'active' : null );
+
+	return (
+		<div className="donations__container">
+			{ stripeConnectUrl && <StripeNudge stripeConnectUrl={ stripeConnectUrl } /> }
+			<div className="donations__tabs">
+				<Button className={ isActive( 'one-time' ) } onClick={ () => setActiveTab( 'one-time' ) }>
+					{ __( 'One-Time', 'full-site-editing' ) }
+				</Button>
+				<Button className={ isActive( 'monthly' ) } onClick={ () => setActiveTab( 'monthly' ) }>
+					{ __( 'Monthly', 'full-site-editing' ) }
+				</Button>
+				<Button className={ isActive( 'annually' ) } onClick={ () => setActiveTab( 'annually' ) }>
+					{ __( 'Annually', 'full-site-editing' ) }
+				</Button>
+				<div
+					id="donations__tab-one-time"
+					className={ classNames( 'donations__tab', { active: isActive( 'one-time' ) } ) }
+				>
+					{ __( 'One time', 'full-site-editing' ) }
+				</div>
+				<div
+					id="donations__tab-monthly"
+					className={ classNames( 'donations__tab', { active: isActive( 'monthly' ) } ) }
+				>
+					{ __( 'Monthly', 'full-site-editing' ) }
+				</div>
+				<div
+					id="donations__tab-annually"
+					className={ classNames( 'donations__tab', { active: isActive( 'annually' ) } ) }
+				>
+					{ __( 'Annually', 'full-site-editing' ) }
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Donations;

apps/full-site-editing/full-site-editing-plugin/donations/edit.js

@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import DonationsTabs from './donations-tabs';
+import Donations from './donations';
 import LoadingError from './loading-error';
 import LoadingStatus from './loading-status';
 import UpgradePlan from './upgrade-plan';
@@ -17,6 +17,7 @@ const Edit = () => {
 	const [ isLoading, setIsLoading ] = useState( true );
 	const [ loadingError, setLoadingError ] = useState( '' );
 	const [ shouldUpgrade, setShouldUpgrade ] = useState( false );
+	const [ stripeConnectUrl, setStripeConnectUrl ] = useState( false );
 	const [ upgradeUrl, setUpgradeUrl ] = useState( '' );
 
 	const mapStatusToState = ( result ) => {
@@ -25,6 +26,7 @@ const Edit = () => {
 		} else {
 			setShouldUpgrade( result.should_upgrade_to_access_memberships );
 			setUpgradeUrl( result.upgrade_url );
+			setStripeConnectUrl( result.connect_url );
 		}
 
 		setIsLoading( false );
@@ -52,7 +54,7 @@ const Edit = () => {
 		return <UpgradePlan upgradeUrl={ upgradeUrl } />;
 	}
 
-	return <DonationsTabs />;
+	return <Donations stripeConnectUrl={ stripeConnectUrl } />;
 };
 
 export default Edit;

apps/full-site-editing/full-site-editing-plugin/donations/stripe-nudge.js

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+/**
+ * WordPress dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import { Button, Dashicon } from '@wordpress/components';
+import { Warning } from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { withDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+
+const StripeNudge = ( { autosaveAndRedirect, stripeConnectUrl } ) => (
+	<Warning
+		actions={
+			// Use href to determine whether or not to display the Upgrade button.
+			stripeConnectUrl && [
+				<Button
+					key="connect"
+					href={ stripeConnectUrl } // Only for server-side rendering, since onClick doesn't work there.
+					onClick={ autosaveAndRedirect }
+					target="_top"
+					isDefault
+					className="premium-content-block-nudge__button stripe-nudge__button"
+				>
+					{ __( 'Connect', 'full-site-editing' ) }
+				</Button>,
+			]
+		}
+		className="donations__nudge premium-content-block-nudge"
+	>
+		<span className="donations__nudge-info premium-content-block-nudge__info">
+			<Dashicon icon="star-filled" />
+			<span className="donations__nudge-text-container premium-content-block-nudge__text-container">
+				<span className="donations__nudge-title premium-content-block-nudge__title">
+					{ __( 'Connect to Stripe to use this block on your site', 'full-site-editing' ) }
+				</span>
+				<span className="donations__nudge-message premium-content-block-nudge__message">
+					{ __(
+						'This block will be hidden from your visitors until you connect to Stripe.',
+						'full-site-editing'
+					) }
+				</span>
+			</span>
+		</span>
+	</Warning>
+);
+
+export default compose( [
+	withDispatch( ( dispatch, { stripeConnectUrl } ) => ( {
+		autosaveAndRedirect: async ( event ) => {
+			event.preventDefault(); // Don't follow the href before autosaving
+			await dispatch( 'core/editor' ).savePost();
+			// Using window.top to escape from the editor iframe on WordPress.com
+			window.top.location.href = stripeConnectUrl;
+		},
+	} ) ),
+] )( StripeNudge );

apps/full-site-editing/full-site-editing-plugin/donations/style.scss

@@ -1,27 +1,27 @@
-.donations__container {
+.donations__tabs {
   border: 1px solid #ddd;
   display: grid;
   grid-template-columns: repeat( 3, 1fr );
 }
 
-.donations__container .components-button {
+.donations__tabs .components-button {
   border-bottom: 1px solid #ddd;
 }
 
-.donations__container .components-button:first-child.active {
+.donations__tabs .components-button:first-child.active {
   border-right: 1px solid #ddd;
 }
 
-.donations__container .components-button:nth-child( 2 ).active {
+.donations__tabs .components-button:nth-child( 2 ).active {
   border-left: 1px solid #ddd;
   border-right: 1px solid #ddd;
 }
 
-.donations__container .components-button:nth-child( 3 ).active {
+.donations__tabs .components-button:nth-child( 3 ).active {
   border-left: 1px solid #ddd;
 }
 
-.donations__container .components-button.active {
+.donations__tabs .components-button.active {
   border-bottom: none;
 }
 
@@ -34,3 +34,6 @@
   visibility: visible;
 }
 
+.donations__nudge {
+  margin-bottom: 32px;
+}

apps/wpcom-block-editor/src/wpcom/features/tracking/delegate-event-tracking.js

@@ -9,6 +9,7 @@ import debugFactory from 'debug';
 import wpcomBlockEditorCloseClick from './wpcom-block-editor-close-click';
 import wpcomInserterInlineSearchTerm from './wpcom-inserter-inline-search-term';
 import wpcomBlockDonationsPlanUpgrade from './wpcom-block-donations-plan-upgrade';
+import wpcomBlockDonationsStripeConnect from './wpcom-block-donations-stripe-connect';
 import wpcomBlockPremiumContentPlanUpgrade from './wpcom-block-premium-content-plan-upgrade';
 import wpcomBlockPremiumContentStripeConnect from './wpcom-block-premium-content-stripe-connect';
 
@@ -25,6 +26,7 @@ const EVENTS_MAPPING = [
 	wpcomBlockEditorCloseClick(),
 	wpcomInserterInlineSearchTerm(),
 	wpcomBlockDonationsPlanUpgrade(),
+	wpcomBlockDonationsStripeConnect(),
 	wpcomBlockPremiumContentPlanUpgrade(),
 	wpcomBlockPremiumContentStripeConnect(),
 ];

apps/wpcom-block-editor/src/wpcom/features/tracking/wpcom-block-donations-stripe-connect.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import tracksRecordEvent from './track-record-event';
+
+/**
+ * Return the event definition object to track `wpcom_block_donations_stripe_connect_click `.
+ *
+ * @returns {{handler: Function, selector: string, type: string}} event object definition.
+ */
+export default () => ( {
+	selector: '.wp-block[data-type="a8c/donations"] .stripe-nudge__button',
+	type: 'click',
+	handler: () => tracksRecordEvent( 'wpcom_block_donations_stripe_connect_click' ),
+} );