Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Premium Content: Display subscriber view to logged in users who have subscribed #45777

Merged
merged 3 commits into from
Sep 21, 2020
Merged

Premium Content: Display subscriber view to logged in users who have subscribed #45777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e3952d1
Premium Content: Display subscriber view to logged in users who have …
mmtr Sep 21, 2020
4358ca8
Revert changes to login button render callback
mmtr Sep 21, 2020
51ceddf
Remove unused context
mmtr Sep 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 37 additions & 5 deletions apps/editing-toolkit/editing-toolkit-plugin/premium-content/blocks/buttons/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -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">
Expand All @@ -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.
Expand All @@ -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 );
2 changes: 1 addition & 1 deletion apps/editing-toolkit/editing-toolkit-plugin/premium-content/blocks/buttons/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
14 changes: 6 additions & 8 deletions apps/editing-toolkit/editing-toolkit-plugin/premium-content/blocks/container/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 );
kwight marked this conversation as resolved.
Show resolved Hide resolved
}, [] );

if ( apiState === API_STATE_LOADING ) {
Expand Down Expand Up @@ -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,
Expand All @@ -474,7 +472,7 @@ export default compose( [
return {
selectBlock() {
// @ts-ignore difficult to type via JSDoc
blockEditor.selectBlock( ownProps.containerClientId );
blockEditor.selectBlock( ownProps.clientId );
},
};
} ),
Expand Down
104 changes: 31 additions & 73 deletions apps/editing-toolkit/editing-toolkit-plugin/premium-content/blocks/logged-out-view/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
77 changes: 28 additions & 49 deletions apps/editing-toolkit/editing-toolkit-plugin/premium-content/blocks/subscriber-view/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 );
Loading