Limit changes to recurring payments button (remains backwards compati…

…ble).
Automattic · Nov 11, 2023 · 198400e · 198400e
1 parent a0824c3
commit 198400e
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 21 deletions.
diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/buttons/edit.js b/projects/plugins/jetpack/extensions/blocks/premium-content/buttons/edit.js
@@ -12,13 +12,15 @@ const ALLOWED_BLOCKS = [
 ];
 
 function ButtonsEdit( { context, subscribeButton, setSubscribeButtonPlan } ) {
-	const planIds = context ? context[ 'premium-content/planIds' ] : [];
+	const planIds =
+		context[ 'premium-content/planIds' ] || [ context[ 'premium-content/planId' ] ] || [];
 	const planId = planIds.reduce( ( acc, plan ) => {
 		if ( acc === null ) {
 			return plan;
 		}
 		return acc + '+' + plan;
 	}, null );
+
 	const isPreview = context ? context[ 'premium-content/isPreview' ] : false;
 
 	const previewTemplate = [

diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/premium-content.php b/projects/plugins/jetpack/extensions/blocks/premium-content/premium-content.php
@@ -31,8 +31,9 @@ function register_block() {
 		array(
 			'render_callback' => __NAMESPACE__ . '\render_block',
 			$provides         => array(
-				'premium-content/planId' => 'selectedPlanId',
-				'isPremiumContentChild'  => 'isPremiumContentChild',
+				'premium-content/planId'  => 'selectedPlanId',
+				'premium-content/planIds' => 'selectedPlanIds',
+				'isPremiumContentChild'   => 'isPremiumContentChild',
 			),
 		)
 	);

diff --git a/projects/plugins/jetpack/extensions/blocks/recurring-payments/block.json b/projects/plugins/jetpack/extensions/blocks/recurring-payments/block.json
@@ -50,10 +50,6 @@
 		"planId": {
 			"type": "integer"
 		},
-		"planIds": {
-			"type": "array",
-			"default": []
-		},
 		"align": {
 			"type": "string"
 		},

diff --git a/projects/plugins/jetpack/extensions/blocks/recurring-payments/edit.jsx b/projects/plugins/jetpack/extensions/blocks/recurring-payments/edit.jsx
@@ -1,7 +1,7 @@
 import { InspectorControls, useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { useCallback } from 'react';
 import ProductManagementControls from '../../shared/components/product-management-controls';
@@ -15,12 +15,14 @@ import { getBlockStyles } from './util';
 const BLOCK_NAME = 'recurring-payments';
 
 export default function Edit( { attributes, clientId, setAttributes } ) {
-	const { align, planId, planIds, width } = attributes;
+	const { align, planId, width } = attributes;
+	const planIds = useMemo( () => ( planId ? planId.split( '+' ) : [] ), [ planId ] );
 	const editorType = getEditorType();
 	const postLink = useSelect( select => select( editorStore )?.getCurrentPost()?.link, [] );
 
-	const updateSubscriptionPlan = useCallback(
-		newPlanId => {
+	const updateSubscriptionPlans = useCallback(
+		newPlanIds => {
+			const newPlanId = newPlanIds.join( '+' );
 			const resolvePaymentUrl = paymentPlanId => {
 				if ( POST_EDITOR !== editorType || ! postLink ) {
 					return '#';
@@ -33,6 +35,7 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 
 			setAttributes( {
 				planId: newPlanId,
+				planIds: newPlanIds,
 				url: resolvePaymentUrl( newPlanId ),
 				uniqueId: `recurring-payments-${ newPlanId }`,
 			} );
@@ -41,12 +44,8 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 	);
 
 	useEffect( () => {
-		updateSubscriptionPlan( planId );
-	}, [ planId, updateSubscriptionPlan ] );
-
-	const updateSubscriptionPlans = planIds => {
-		planIds.array.forEach( updateSubscriptionPlan );
-	};
+		updateSubscriptionPlans( planIds );
+	}, [ planIds, updateSubscriptionPlans ] );
 
 	/**
 	 * Filters the editor settings of the Payment Button block (`jetpack/recurring-payments`).
@@ -94,7 +93,7 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 				<ProductManagementControls
 					blockName={ BLOCK_NAME }
 					clientId={ clientId }
-					selectedProductIds={ [ planId ] }
+					selectedProductIds={ planIds }
 					setSelectedProductIds={ updateSubscriptionPlans }
 				/>
 			) }

diff --git a/projects/plugins/jetpack/extensions/store/membership-products/selectors.js b/projects/plugins/jetpack/extensions/store/membership-products/selectors.js
@@ -34,6 +34,9 @@ export const getNewsletterCategories = state => state.newsletterCategories.categ
 
 export const getNewsletterCategoriesEnabled = state => state.newsletterCategories.enabled;
 
-export const hasInvalidProducts = ( state, selectedProductIds ) =>
-	!! selectedProductIds &&
-	selectedProductIds.some( productId => isInvalidProduct( state, productId ) );
+export const hasInvalidProducts = ( state, selectedProductIds ) => {
+	return (
+		!! selectedProductIds &&
+		selectedProductIds.some( productId => isInvalidProduct( state, productId ) )
+	);
+};