Earn: Add a plans check to the Donations block.

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

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+
+const DonationsTabs = () => {
+	const [ activeTab, setActiveTab ] = useState( 'one-time' );
+
+	const isActive = ( button ) => ( activeTab === button ? 'active' : null );
+
+	return (
+		<div className="donations__container">
+			<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>
+	);
+};
+
+export default DonationsTabs;

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

@@ -1,55 +1,57 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import DonationsTabs from './donations-tabs';
+import LoadingError from './loading-error';
+import LoadingStatus from './loading-status';
+import UpgradePlan from './upgrade-plan';
+import fetchStatus from './fetch-status';
 
 const Edit = () => {
-	const [ activeTab, setActiveTab ] = useState( 'one-time' );
-
-	const isActive = ( button ) => ( activeTab === button ? 'active' : null );
-
-	return (
-		<div className="donations__container">
-			<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>
-	);
+	const [ isLoading, setIsLoading ] = useState( true );
+	const [ loadingError, setLoadingError ] = useState( '' );
+	const [ shouldUpgrade, setShouldUpgrade ] = useState( false );
+	const [ upgradeUrl, setUpgradeUrl ] = useState( '' );
+
+	const mapStatusToState = ( result ) => {
+		setShouldUpgrade( result.should_upgrade_to_access_memberships );
+		setUpgradeUrl( result.upgrade_url );
+		setIsLoading( false );
+	};
+
+	const apiError = ( message ) => {
+		setLoadingError( message );
+		setIsLoading( false );
+	};
+
+	const updateData = () => {
+		fetchStatus().then( mapStatusToState, apiError );
+	};
+
+	useEffect( () => updateData() );
+
+	if ( isLoading ) {
+		return <LoadingStatus />;
+	}
+
+	if ( loadingError ) {
+		return <LoadingError error={ loadingError } />;
+	}
+
+	if ( shouldUpgrade ) {
+		return <UpgradePlan upgradeUrl={ upgradeUrl } />;
+	}
+
+	return <DonationsTabs />;
 };
 
 export default Edit;

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

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+
+const fetchStatus = async () => {
+	try {
+		const result = await apiFetch( {
+			path: '/wpcom/v2/memberships/status',
+			method: 'GET',
+		} );
+		return result;
+	} catch ( error ) {
+		return Promise.reject( error.message );
+	}
+};
+
+export default fetchStatus;

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

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Placeholder } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+
+const LoadingError = ( { error } ) => {
+	return (
+		<div className="donations__loading-status">
+			<Placeholder
+				icon="lock"
+				label={ __( 'Donations', 'full-site-editing' ) }
+				instructions={ error }
+			></Placeholder>
+		</div>
+	);
+};
+
+export default LoadingError;

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

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Placeholder, Spinner } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+
+const LoadingStatus = () => {
+	return (
+		<div className="donations__loading-status">
+			<Placeholder
+				icon="lock"
+				label={ __( 'Donations', 'full-site-editing' ) }
+				instructions={ __( 'Loading data…', 'full-site-editing' ) }
+			>
+				<Spinner />
+			</Placeholder>
+		</div>
+	);
+};
+
+export default LoadingStatus;

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

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, ExternalLink, Placeholder } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+
+const UpgradePlan = ( { upgradeUrl } ) => {
+	return (
+		<div className={ 'donations__upgrade-plan' }>
+			<Placeholder
+				icon="lock"
+				label={ __( 'Donations', 'full-site-editing' ) }
+				instructions={ __(
+					"You'll need to upgrade your plan to use the Donations block.",
+					'full-site-editing'
+				) }
+			>
+				<Button
+					/**
+					 * @see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/42883
+					 */
+					// @ts-ignore isSecondary is missing from the type definition
+					isSecondary
+					isLarge
+					href={ upgradeUrl }
+					target="_blank"
+					className="donations__button plan-nudge__button"
+				>
+					{ __( 'Upgrade Your Plan', 'full-site-editing' ) }
+				</Button>
+				<div className="donations__disclaimer membership-button__disclaimer">
+					<ExternalLink href="https://wordpress.com/support/donations-block/">
+						{ __( 'Read more about Donations and related fees.', 'full-site-editing' ) }
+					</ExternalLink>
+				</div>
+			</Placeholder>
+		</div>
+	);
+};
+
+export default UpgradePlan;