Premium Content: Display subscriber view to logged in users who have …

…subscribed (#45777)
Automattic · Sep 21, 2020 · 477cf56 · 477cf56
1 parent 646d45c
commit 477cf56
Show file tree

Hide file tree

Showing 6 changed files with 196 additions and 162 deletions.
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/premium-content/blocks/buttons/edit.js b/apps/editing-toolkit/editing-toolkit-plugin/premium-content/blocks/buttons/edit.js
@@ -24,7 +24,13 @@ const alignmentHooksSetting = {
 	isEmbedButton: true,
 };
 
-function ButtonsEdit( { context, subscribeButton, setSubscribeButtonPlan } ) {
+function ButtonsEdit( {
+	context,
+	jetpackButton,
+	subscribeButton,
+	setSubscribeButtonText,
+	setSubscribeButtonPlan,
+} ) {
 	const planId = context ? context[ 'premium-content/planId' ] : null;
 
 	const template = [
@@ -68,6 +74,14 @@ function ButtonsEdit( { context, subscribeButton, setSubscribeButtonPlan } ) {
 		);
 	}, [ subscribeButton ] );
 
+	// Updates the subscribe button text.
+	useEffect( () => {
+		if ( ! jetpackButton ) {
+			return;
+		}
+		setSubscribeButtonText( __( 'Subscribe', 'full-site-editing' ) );
+	}, [ jetpackButton, setSubscribeButtonText ] );
+
 	return (
 		// eslint-disable-next-line wpcalypso/jsx-classname-namespace
 		<Block.div className="wp-block-buttons">
@@ -83,13 +97,21 @@ function ButtonsEdit( { context, subscribeButton, setSubscribeButtonPlan } ) {
 }
 
 export default compose( [
-	withSelect( ( select, props ) => ( {
+	withSelect( ( select, props ) => {
 		// Only first block is assumed to be a subscribe button (users can add additional Recurring Payments blocks for
 		// other plans).
-		subscribeButton: select( 'core/block-editor' )
+		const subscribeButton = select( 'core/block-editor' )
 			.getBlock( props.clientId )
-			.innerBlocks.find( ( block ) => block.name === 'jetpack/recurring-payments' ),
-	} ) ),
+			.innerBlocks.find( ( block ) => block.name === 'jetpack/recurring-payments' );
+
+		const jetpackButton = select( 'core/block-editor' )
+			.getBlock( subscribeButton.clientId )
+			.innerBlocks.find( ( block ) => block.name === 'jetpack/button' );
+		return {
+			subscribeButton,
+			jetpackButton,
+		};
+	} ),
 	withDispatch( ( dispatch, props ) => ( {
 		/**
 		 * Updates the plan on the Recurring Payments block acting as a subscribe button.
@@ -101,5 +123,15 @@ export default compose( [
 				planId,
 			} );
 		},
+		/**
+		 * Updates the button text on the Recurring Payments block acting as a subscribe button.
+		 *
+		 * @param text {string} Button text.
+		 */
+		setSubscribeButtonText( text ) {
+			dispatch( 'core/block-editor' ).updateBlockAttributes( props.jetpackButton.clientId, {
+				text,
+			} );
+		},
 	} ) ),
 ] )( ButtonsEdit );
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/premium-content/blocks/buttons/index.js b/apps/editing-toolkit/editing-toolkit-plugin/premium-content/blocks/buttons/index.js
@@ -31,7 +31,7 @@ const settings = {
 	keywords: [ __( 'link', 'full-site-editing' ) ],
 	edit,
 	save,
-	context: [ 'premium-content/planId' ],
+	usesContext: [ 'premium-content/planId' ],
 };
 
 export { name, category, settings };
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/premium-content/blocks/container/edit.js b/apps/editing-toolkit/editing-toolkit-plugin/premium-content/blocks/container/edit.js
@@ -70,7 +70,6 @@ const defaultString = null;
  * @property { boolean } isSelected
  * @property { string } className
  * @property { string } clientId
- * @property { string } containerClientId
  * @property { Attributes } attributes
  * @property { (attributes: object<Attributes>) => void } setAttributes
  * @property { ?object } noticeUI
@@ -275,7 +274,10 @@ function Edit( props ) {
 				onError( props, result.message );
 			}
 		);
-		props.selectBlock();
+
+		// Execution delayed with setTimeout to ensure it runs after any block auto-selection performed by inner blocks
+		// (such as the Recurring Payments block)
+		setTimeout( () => props.selectBlock(), 1000 );
 	}, [] );
 
 	if ( apiState === API_STATE_LOADING ) {
@@ -458,14 +460,10 @@ function getConnectUrl( props, connectURL ) {
 }
 
 export default compose( [
-	withSelect( ( select, ownProps ) => {
+	withSelect( ( select ) => {
 		const { getCurrentPostId } = select( 'core/editor' );
 		return {
 			postId: getCurrentPostId(),
-			// @ts-ignore difficult to type via JSDoc
-			containerClientId: select( 'core/block-editor' ).getBlockHierarchyRootClientId(
-				ownProps.clientId
-			),
 		};
 	} ),
 	withNotices,
@@ -474,7 +472,7 @@ export default compose( [
 		return {
 			selectBlock() {
 				// @ts-ignore difficult to type via JSDoc
-				blockEditor.selectBlock( ownProps.containerClientId );
+				blockEditor.selectBlock( ownProps.clientId );
 			},
 		};
 	} ),

diff --git a/apps/editing-toolkit/editing-toolkit-plugin/premium-content/blocks/logged-out-view/edit.js b/apps/editing-toolkit/editing-toolkit-plugin/premium-content/blocks/logged-out-view/edit.js
@@ -3,9 +3,6 @@
  */
 import { InnerBlocks } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
-import { compose } from '@wordpress/compose';
-import { withDispatch, withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -14,75 +11,36 @@ import Context from '../container/context';
 
 /**
  * Block edit function
- *
- * @typedef { import('./').Attributes } Attributes
- * @typedef { object } Props
- * @property { boolean } isSelected
- * @property { string } className
- * @property { string } clientId
- * @property { string } containerClientId
- * @property { Attributes } attributes
- * @property { Function } setAttributes
- * @property { Function } selectContainerBlock
- *
- * @param { Props } props Properties
  */
-function Edit( { selectContainerBlock } ) {
-	useEffect( () => {
-		// Selects the container block on mount.
-		//
-		// Execution delayed with setTimeout to ensure it runs after any block auto-selection performed by inner blocks
-		// (such as the Recurring Payments block). @see https://github.com/Automattic/wp-calypso/issues/43450
-		setTimeout( selectContainerBlock, 0 );
-	}, [] );
+const Edit = () => (
+	<Context.Consumer>
+		{ ( { selectedTab, stripeNudge } ) => (
+			/** @see https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */
+			// eslint-disable-next-line
+			<div hidden={ selectedTab.id === 'premium' } className={ selectedTab.className }>
+				{ stripeNudge }
+				<InnerBlocks
+					templateLock={ false }
+					template={ [
+						[
+							'core/heading',
+							{ content: __( 'Subscribe to get access', 'full-site-editing' ), level: 3 },
+						],
+						[
+							'core/paragraph',
+							{
+								content: __(
+									'Read more of this content when you subscribe today.',
+									'full-site-editing'
+								),
+							},
+						],
+						[ 'premium-content/buttons' ],
+					] }
+				/>
+			</div>
+		) }
+	</Context.Consumer>
+);
 
-	return (
-		<Context.Consumer>
-			{ ( { selectedTab, stripeNudge } ) => (
-				/** @see https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */
-				// eslint-disable-next-line
-				<div hidden={ selectedTab.id === 'premium' } className={ selectedTab.className }>
-					{ stripeNudge }
-					<InnerBlocks
-						templateLock={ false }
-						template={ [
-							[
-								'core/heading',
-								{ content: __( 'Subscribe to get access', 'full-site-editing' ), level: 3 },
-							],
-							[
-								'core/paragraph',
-								{
-									content: __(
-										'Read more of this content when you subscribe today.',
-										'full-site-editing'
-									),
-								},
-							],
-							[ 'premium-content/buttons' ],
-						] }
-					/>
-				</div>
-			) }
-		</Context.Consumer>
-	);
-}
-
-export default compose( [
-	withSelect( ( select, props ) => {
-		const { getBlockHierarchyRootClientId } = select( 'core/block-editor' );
-		return {
-			// @ts-ignore difficult to type with JSDoc
-			containerClientId: getBlockHierarchyRootClientId( props.clientId ),
-		};
-	} ),
-	withDispatch( ( dispatch, props ) => {
-		const { selectBlock } = dispatch( 'core/block-editor' );
-		return {
-			selectContainerBlock() {
-				// @ts-ignore difficult to type with JSDoc
-				selectBlock( props.containerClientId );
-			},
-		};
-	} ),
-] )( Edit );
+export default Edit;
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/premium-content/blocks/subscriber-view/edit.js b/apps/editing-toolkit/editing-toolkit-plugin/premium-content/blocks/subscriber-view/edit.js
@@ -3,9 +3,8 @@
  */
 import { InnerBlocks } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -17,63 +16,43 @@ import Context from '../container/context';
  *
  * @typedef { object } Props
  * @property { string } clientId
- * @property { string } containerClientId
- * @property { Function } selectBlock
+ * @property { boolean } hasInnerBlocks
  *
  * @param { Props } props Properties
  */
-function Edit( props ) {
-	useEffect( () => {
-		props.selectBlock();
-	}, [] );
-
-	return (
-		<Context.Consumer>
-			{ ( { selectedTab, stripeNudge } ) => (
-				/** @see https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */
-				// eslint-disable-next-line
-				<div hidden={ selectedTab.id === 'wall' } className={ selectedTab.className }>
-					{ stripeNudge }
-					<InnerBlocks
-						renderAppender={ ! props.hasInnerBlocks && InnerBlocks.ButtonBlockAppender }
-						templateLock={ false }
-						template={ [
-							[
-								'core/paragraph',
-								{
-									placeholder: __(
-										'Insert the piece of content you want your visitors to see after they subscribe.',
-										'full-site-editing'
-									),
-								},
-							],
-						] }
-					/>
-				</div>
-			) }
-		</Context.Consumer>
-	);
-}
+const Edit = ( props ) => (
+	<Context.Consumer>
+		{ ( { selectedTab, stripeNudge } ) => (
+			/** @see https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */
+			// eslint-disable-next-line
+			<div hidden={ selectedTab.id === 'wall' } className={ selectedTab.className }>
+				{ stripeNudge }
+				<InnerBlocks
+					renderAppender={ ! props.hasInnerBlocks && InnerBlocks.ButtonBlockAppender }
+					templateLock={ false }
+					template={ [
+						[
+							'core/paragraph',
+							{
+								placeholder: __(
+									'Insert the piece of content you want your visitors to see after they subscribe.',
+									'full-site-editing'
+								),
+							},
+						],
+					] }
+				/>
+			</div>
+		) }
+	</Context.Consumer>
+);
 
 export default compose( [
 	withSelect( ( select, props ) => {
 		return {
 			// @ts-ignore difficult to type with JSDoc
 			hasInnerBlocks: !! select( 'core/block-editor' ).getBlocksByClientId( props.clientId )[ 0 ]
 				.innerBlocks.length,
-			// @ts-ignore difficult to type with JSDoc
-			containerClientId: select( 'core/block-editor' ).getBlockHierarchyRootClientId(
-				props.clientId
-			),
-		};
-	} ),
-	withDispatch( ( dispatch, props ) => {
-		const blockEditor = dispatch( 'core/block-editor' );
-		return {
-			selectBlock() {
-				// @ts-ignore difficult to type with JSDoc
-				blockEditor.selectBlock( props.containerClientId );
-			},
 		};
 	} ),
 ] )( Edit );