From 1ab1591717a343f95f0b35db2009ed9ea5705f85 Mon Sep 17 00:00:00 2001 From: apeatling Date: Mon, 2 Nov 2020 14:07:58 -0800 Subject: [PATCH 1/6] [not verified] Check block parents for premium content block parent. --- extensions/blocks/recurring-payments/edit.jsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/extensions/blocks/recurring-payments/edit.jsx b/extensions/blocks/recurring-payments/edit.jsx index a9e131e568e0a..78d4e36e946b3 100644 --- a/extensions/blocks/recurring-payments/edit.jsx +++ b/extensions/blocks/recurring-payments/edit.jsx @@ -77,6 +77,7 @@ class MembershipsButtonEdit extends Component { const recurringPaymentsAvailability = getJetpackExtensionAvailability( 'recurring-payments' ); this.hasUpgradeNudge = + ! this.props.isInPremiumContentBlock() && ! recurringPaymentsAvailability.available && recurringPaymentsAvailability.unavailableReason === 'missing_plan'; } @@ -522,6 +523,17 @@ export default compose( [ withSelect( ( select, { clientId } ) => ( { postId: select( 'core/editor' ).getCurrentPostId(), innerButtons: select( 'core/editor' ).getBlocksByClientId( clientId ), + isInPremiumContentBlock: () => { + const parentClientIds = select( 'core/block-editor' ).getBlockParents( clientId ); + for ( let i = 0; i < parentClientIds.length; i++ ) { + const parentBlock = select( 'core/block-editor' ).getBlock( parentClientIds[ i ] ); + + if ( parentBlock.name.includes( 'premium-content' ) ) { + return true; + } + } + return false; + } } ) ), withDispatch( dispatch => { const { updateBlockAttributes } = dispatch( 'core/editor' ); From d938c9f5349ea0e45ec46c9af7459fdc6d5e9a0d Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 3 Nov 2020 09:40:41 -0800 Subject: [PATCH 2/6] [not verified] Remove placeholder for payments button and reorg the upgrade nudge code. --- extensions/blocks/recurring-payments/edit.jsx | 216 +++++++++--------- 1 file changed, 114 insertions(+), 102 deletions(-) diff --git a/extensions/blocks/recurring-payments/edit.jsx b/extensions/blocks/recurring-payments/edit.jsx index 78d4e36e946b3..3ad8bcfb8dc3b 100644 --- a/extensions/blocks/recurring-payments/edit.jsx +++ b/extensions/blocks/recurring-payments/edit.jsx @@ -77,7 +77,6 @@ class MembershipsButtonEdit extends Component { const recurringPaymentsAvailability = getJetpackExtensionAvailability( 'recurring-payments' ); this.hasUpgradeNudge = - ! this.props.isInPremiumContentBlock() && ! recurringPaymentsAvailability.available && recurringPaymentsAvailability.unavailableReason === 'missing_plan'; } @@ -372,10 +371,109 @@ class MembershipsButtonEdit extends Component { ); - render = () => { + renderDisclaimer = () => { + return ( +
+ + { __( 'Read more about Payments and related fees.', 'jetpack' ) } + +
+ ); + }; + + renderUpgradeNudges = () => { const { notices, postId } = this.props; const { connected, connectURL, products } = this.state; + return ( + <> + { ! this.hasUpgradeNudge && + ! this.state.shouldUpgrade && + connected === API_STATE_NOTCONNECTED && ( + + ) } + { ! this.hasUpgradeNudge && this.state.shouldUpgrade && ( +
+ } + label={ __( 'Payments', 'jetpack' ) } + notices={ notices } + instructions={ __( + "You'll need to upgrade your plan to use the Payments block.", + 'jetpack' + ) } + > + + { this.renderDisclaimer() } + +
+ ) } + { ( connected === API_STATE_LOADING || + this.state.addingMembershipAmount === PRODUCT_FORM_SUBMITTED ) && + ! this.props.attributes.planId && ( + } notices={ notices }> + + + ) } + { ! this.state.shouldUpgrade && + ! this.props.attributes.planId && + connected === API_STATE_CONNECTED && + products.length === 0 && ( +
+ } + label={ __( 'Payments', 'jetpack' ) } + notices={ notices } + > +
+

+ { __( 'To use this block, first add at least one payment plan.', 'jetpack' ) } +

+ { this.renderAddMembershipAmount( true ) } + { this.renderDisclaimer() } +
+ +
+ ) } + { ! this.state.shouldUpgrade && + ! this.props.attributes.planId && + this.state.addingMembershipAmount !== PRODUCT_FORM_SUBMITTED && + connected === API_STATE_CONNECTED && + products.length > 0 && ( +
+ } + label={ __( 'Payments', 'jetpack' ) } + notices={ notices } + > +
+

+ { __( + 'To use this block, select a previously created payment plan.', + 'jetpack' + ) } +

+ { this.renderMembershipAmounts() } +

{ __( 'Or a new one.', 'jetpack' ) }

+ { this.renderAddMembershipAmount( false ) } + { this.renderDisclaimer() } +
+ +
+ ) } + + ); + } + + render = () => { + const { products } = this.state; + /** * Filters the flag that determines if the Recurring Payments block controls should be shown in the inspector. * @@ -413,107 +511,21 @@ class MembershipsButtonEdit extends Component { return ( { this.props.noticeUI } - { ! this.hasUpgradeNudge && - ! this.state.shouldUpgrade && - connected === API_STATE_NOTCONNECTED && ( - - ) } - { ! this.hasUpgradeNudge && this.state.shouldUpgrade && ( -
- } - label={ __( 'Payments', 'jetpack' ) } - notices={ notices } - instructions={ __( - "You'll need to upgrade your plan to use the Payments block.", - 'jetpack' - ) } - > - - -
- ) } - { ( connected === API_STATE_LOADING || - this.state.addingMembershipAmount === PRODUCT_FORM_SUBMITTED ) && - ! this.props.attributes.planId && ( - } notices={ notices }> - - - ) } - { ! this.state.shouldUpgrade && - ! this.props.attributes.planId && - connected === API_STATE_CONNECTED && - products.length === 0 && ( -
- } - label={ __( 'Payments', 'jetpack' ) } - notices={ notices } - > -
-

- { __( 'To use this block, first add at least one payment plan.', 'jetpack' ) } -

- { this.renderAddMembershipAmount( true ) } -
- -
- ) } - { ! this.state.shouldUpgrade && - ! this.props.attributes.planId && - this.state.addingMembershipAmount !== PRODUCT_FORM_SUBMITTED && - connected === API_STATE_CONNECTED && - products.length > 0 && ( -
- } - label={ __( 'Payments', 'jetpack' ) } - notices={ notices } - > -
-

- { __( - 'To use this block, select a previously created payment plan.', - 'jetpack' - ) } -

- { this.renderMembershipAmounts() } -

{ __( 'Or a new one.', 'jetpack' ) }

- { this.renderAddMembershipAmount( false ) } -
- -
- ) } - - - - { __( 'Read more about Payments and related fees.', 'jetpack' ) } - - - + { ! this.props.isInPremiumContentBlock() && this.renderUpgradeNudges() } { showControls && inspectorControls } - { ( ( ( this.hasUpgradeNudge || ! this.state.shouldUpgrade ) && - connected !== API_STATE_LOADING ) || - this.props.attributes.planId ) && ( - - ) } + + ); }; From 17e5f071c1281274f19f5c43b8755c818b534336 Mon Sep 17 00:00:00 2001 From: apeatling Date: Mon, 9 Nov 2020 10:49:06 -0800 Subject: [PATCH 3/6] [not verified] Switch to using block context. --- extensions/blocks/recurring-payments/edit.jsx | 18 ++++-------------- extensions/blocks/recurring-payments/index.js | 1 + 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/extensions/blocks/recurring-payments/edit.jsx b/extensions/blocks/recurring-payments/edit.jsx index 3ad8bcfb8dc3b..dc66d263607cd 100644 --- a/extensions/blocks/recurring-payments/edit.jsx +++ b/extensions/blocks/recurring-payments/edit.jsx @@ -79,6 +79,8 @@ class MembershipsButtonEdit extends Component { this.hasUpgradeNudge = ! recurringPaymentsAvailability.available && recurringPaymentsAvailability.unavailableReason === 'missing_plan'; + + this.isPremiumContentChild = this.props.context.isPremiumContentChild || false; } componentDidMount = () => { @@ -511,7 +513,7 @@ class MembershipsButtonEdit extends Component { return ( { this.props.noticeUI } - { ! this.props.isInPremiumContentBlock() && this.renderUpgradeNudges() } + { ! this.isPremiumContentChild && this.renderUpgradeNudges() } { showControls && inspectorControls } ( { + withSelect( ( select ) => ( { postId: select( 'core/editor' ).getCurrentPostId(), - innerButtons: select( 'core/editor' ).getBlocksByClientId( clientId ), - isInPremiumContentBlock: () => { - const parentClientIds = select( 'core/block-editor' ).getBlockParents( clientId ); - for ( let i = 0; i < parentClientIds.length; i++ ) { - const parentBlock = select( 'core/block-editor' ).getBlock( parentClientIds[ i ] ); - - if ( parentBlock.name.includes( 'premium-content' ) ) { - return true; - } - } - return false; - } } ) ), withDispatch( dispatch => { const { updateBlockAttributes } = dispatch( 'core/editor' ); diff --git a/extensions/blocks/recurring-payments/index.js b/extensions/blocks/recurring-payments/index.js index f4a8da3a78553..95c4687ede030 100644 --- a/extensions/blocks/recurring-payments/index.js +++ b/extensions/blocks/recurring-payments/index.js @@ -46,6 +46,7 @@ export const settings = { 'stripe', _x( 'memberships', 'block search term', 'jetpack' ), ], + usesContext: [ 'isPremiumContentChild' ], attributes: { planId: { type: 'integer', From b386cc343545ad445252ac33b208f1f94f728d38 Mon Sep 17 00:00:00 2001 From: apeatling Date: Sun, 22 Nov 2020 14:01:06 -0800 Subject: [PATCH 4/6] [not verified] Split out upgrade nudges and plan notices. --- extensions/blocks/recurring-payments/edit.jsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/extensions/blocks/recurring-payments/edit.jsx b/extensions/blocks/recurring-payments/edit.jsx index dc66d263607cd..75a6b30af4bcb 100644 --- a/extensions/blocks/recurring-payments/edit.jsx +++ b/extensions/blocks/recurring-payments/edit.jsx @@ -385,7 +385,7 @@ class MembershipsButtonEdit extends Component { renderUpgradeNudges = () => { const { notices, postId } = this.props; - const { connected, connectURL, products } = this.state; + const { connected, connectURL } = this.state; return ( <> @@ -416,6 +416,16 @@ class MembershipsButtonEdit extends Component { ) } + + ); + } + + renderPlanNotices = () => { + const { notices } = this.props; + const { connected, products } = this.state; + + return ( + <> { ( connected === API_STATE_LOADING || this.state.addingMembershipAmount === PRODUCT_FORM_SUBMITTED ) && ! this.props.attributes.planId && ( @@ -471,7 +481,7 @@ class MembershipsButtonEdit extends Component { ) } ); - } + }; render = () => { const { products } = this.state; @@ -513,7 +523,8 @@ class MembershipsButtonEdit extends Component { return ( { this.props.noticeUI } - { ! this.isPremiumContentChild && this.renderUpgradeNudges() } + { ! this.isPremiumContentChild && this.renderUpgradeNudges() && this.renderPlanNotices() } + { showControls && inspectorControls } Date: Mon, 23 Nov 2020 13:48:51 -0800 Subject: [PATCH 5/6] [not verified] Fix missing notices. --- extensions/blocks/recurring-payments/edit.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/extensions/blocks/recurring-payments/edit.jsx b/extensions/blocks/recurring-payments/edit.jsx index 75a6b30af4bcb..157e7353b5099 100644 --- a/extensions/blocks/recurring-payments/edit.jsx +++ b/extensions/blocks/recurring-payments/edit.jsx @@ -523,7 +523,8 @@ class MembershipsButtonEdit extends Component { return ( { this.props.noticeUI } - { ! this.isPremiumContentChild && this.renderUpgradeNudges() && this.renderPlanNotices() } + { ! this.isPremiumContentChild && this.renderUpgradeNudges() } + { ! this.isPremiumContentChild && this.renderPlanNotices() } { showControls && inspectorControls } From aefc05d4b74fed9a178b5a6da8e6a8cdcdda9e13 Mon Sep 17 00:00:00 2001 From: apeatling Date: Thu, 3 Dec 2020 14:39:53 -0800 Subject: [PATCH 6/6] [not verified] Fix issue with button error when added a defined payment plan. --- extensions/blocks/recurring-payments/edit.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/extensions/blocks/recurring-payments/edit.jsx b/extensions/blocks/recurring-payments/edit.jsx index 157e7353b5099..bb629869b8c97 100644 --- a/extensions/blocks/recurring-payments/edit.jsx +++ b/extensions/blocks/recurring-payments/edit.jsx @@ -345,7 +345,8 @@ class MembershipsButtonEdit extends Component { const defaultTextForCurrentPlan = currentPlanId ? this.getFormattedPriceByProductId( currentPlanId ) + __( ' Contribution', 'jetpack' ) : undefined; - if ( innerButtons.length ) { + + if ( innerButtons && innerButtons.length ) { innerButtons[ 0 ].innerBlocks.forEach( block => { const currentText = block.attributes.text; const text =