Use excluded categories in block

Automattic · Feb 7, 2025 · fb75525 · fb75525
1 parent ed475d9
commit fb75525
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 57 deletions.
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/controls.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/controls.js
@@ -46,14 +46,13 @@ export default function SubscriptionControls( {
 	borderWeight,
 	buttonOnNewLine,
 	emailFieldBackgroundColor,
+	excludedNewsletterCategoryIds,
 	fallbackButtonBackgroundColor,
 	fallbackTextColor,
 	fontSize,
 	includeSocialFollowers,
 	isGradientAvailable,
 	padding,
-	onNewsletterCategoryChange,
-	selectedNewsletterCategoryIds,
 	setAttributes,
 	setBorderColor,
 	setButtonBackgroundColor,
@@ -342,8 +341,16 @@ export default function SubscriptionControls( {
 										__nextHasNoMarginBottom={ true }
 										disabled={ ! autoSubscribeToNewsletterCategories }
 										label={ category.name }
-										checked={ selectedNewsletterCategoryIds.includes( category.id ) }
-										onChange={ () => onNewsletterCategoryChange( category.id ) }
+										checked={ ! excludedNewsletterCategoryIds.includes( category.id ) }
+										onChange={ () => {
+											const newExcludedIds = excludedNewsletterCategoryIds.includes( category.id )
+												? excludedNewsletterCategoryIds.filter( id => id !== category.id )
+												: [ ...excludedNewsletterCategoryIds, category.id ];
+
+											setAttributes( {
+												excludedNewsletterCategoryIds: newExcludedIds,
+											} );
+										} }
 									/>
 								) ) }
 							</fieldset>

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
@@ -55,11 +55,6 @@ const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
 	};
 } );
 
-const determineSelectedCategoryIds = ( excludedIds, availableCategories ) =>
-	availableCategories
-		.filter( category => ! excludedIds.includes( category.id ) )
-		.map( category => category.id );
-
 export function SubscriptionEdit( props ) {
 	const {
 		attributes,
@@ -129,21 +124,6 @@ export function SubscriptionEdit( props ) {
 		};
 	} );
 
-	const selectedNewsletterCategoryIds = determineSelectedCategoryIds(
-		excludedNewsletterCategoryIds,
-		availableNewsletterCategories
-	);
-
-	const handleNewsletterCategoryChange = selectedId => {
-		const newExcludedIds = excludedNewsletterCategoryIds.includes( selectedId )
-			? excludedNewsletterCategoryIds.filter( id => id !== selectedId )
-			: [ ...excludedNewsletterCategoryIds, selectedId ];
-
-		setAttributes( {
-			excludedNewsletterCategoryIds: newExcludedIds,
-		} );
-	};
-
 	const emailFieldGradient = useGradientIfAvailable( {
 		gradientAttribute: 'emailFieldGradient',
 		customGradientAttribute: 'customEmailFieldGradient',
@@ -267,13 +247,13 @@ export function SubscriptionEdit( props ) {
 					borderWeight={ borderWeight }
 					buttonOnNewLine={ buttonOnNewLine }
 					emailFieldBackgroundColor={ emailFieldBackgroundColor }
+					excludedNewsletterCategoryIds={ excludedNewsletterCategoryIds }
 					fallbackButtonBackgroundColor={ fallbackButtonBackgroundColor }
 					fallbackTextColor={ fallbackTextColor }
 					fontSize={ fontSize }
 					includeSocialFollowers={ includeSocialFollowers }
 					isGradientAvailable={ isGradientAvailable }
 					padding={ padding }
-					onNewsletterCategoryChange={ handleNewsletterCategoryChange }
 					setAttributes={ setAttributes }
 					setBorderColor={ setBorderColor }
 					setButtonBackgroundColor={ setButtonBackgroundColor }
@@ -283,7 +263,6 @@ export function SubscriptionEdit( props ) {
 					subscriberCount={ subscriberCount }
 					textColor={ textColor }
 					buttonWidth={ buttonWidth }
-					selectedNewsletterCategoryIds={ selectedNewsletterCategoryIds }
 					subscribePlaceholder={ subscribePlaceholder }
 					submitButtonText={ submitButtonText }
 					successMessage={ successMessage }

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/controls.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/controls.js
@@ -80,8 +80,8 @@ const defaultProps = {
 		{ id: 1, name: 'Category 1' },
 		{ id: 2, name: 'Category 2' },
 	],
-	preselectNewsletterCategories: false,
-	selectedNewsletterCategoryIds: [],
+	autoSubscribeToNewsletterCategories: false,
+	excludedNewsletterCategoryIds: [],
 };
 
 beforeEach( () => {
@@ -266,17 +266,29 @@ describe( 'Inspector controls', () => {
 		} );
 
 		describe( 'Newsletter categories', () => {
-			test( 'displays newsletter category controls when enabled', async () => {
+			test( 'displays correctly', async () => {
 				const user = userEvent.setup();
 				render( <SubscriptionsInspectorControls { ...defaultProps } /> );
 
 				await user.click( screen.getByText( 'Settings' ), { selector: 'button' } );
 
-				expect( screen.getByText( 'Pre-select categories' ) ).toBeInTheDocument();
+				expect( screen.getByLabelText( 'Auto-subscribe to categories' ) ).toBeInTheDocument();
+				expect( screen.queryByText( 'Categories' ) ).not.toBeInTheDocument();
+			} );
+
+			test( 'shows categories when enabled', async () => {
+				const user = userEvent.setup();
+				render(
+					<SubscriptionsInspectorControls { ...defaultProps } autoSubscribeToNewsletterCategories />
+				);
+
+				await user.click( screen.getByText( 'Settings' ), { selector: 'button' } );
+
+				expect( screen.getByLabelText( 'Auto-subscribe to categories' ) ).toBeInTheDocument();
 				expect( screen.getByText( 'Categories' ) ).toBeInTheDocument();
 			} );
 
-			test( 'hides newsletter category controls when disabled', async () => {
+			test( 'hides controls when newsletter categories are disabled', async () => {
 				const user = userEvent.setup();
 				render(
 					<SubscriptionsInspectorControls
@@ -287,11 +299,11 @@ describe( 'Inspector controls', () => {
 
 				await user.click( screen.getByText( 'Settings' ), { selector: 'button' } );
 
-				expect( screen.queryByText( 'Pre-select categories' ) ).not.toBeInTheDocument();
+				expect( screen.queryByText( 'Auto-subscribe to categories' ) ).not.toBeInTheDocument();
 				expect( screen.queryByText( 'Categories' ) ).not.toBeInTheDocument();
 			} );
 
-			test( 'hides newsletter category controls when there are no categories', async () => {
+			test( 'hides controls when there are no categories', async () => {
 				const user = userEvent.setup();
 				render(
 					<SubscriptionsInspectorControls
@@ -302,56 +314,42 @@ describe( 'Inspector controls', () => {
 
 				await user.click( screen.getByText( 'Settings' ), { selector: 'button' } );
 
-				expect( screen.queryByText( 'Pre-select categories' ) ).not.toBeInTheDocument();
+				expect( screen.queryByText( 'Auto-subscribe to categories' ) ).not.toBeInTheDocument();
 				expect( screen.queryByText( 'Categories' ) ).not.toBeInTheDocument();
 			} );
 
-			test( 'toggles pre-select categories and clears selection when disabled', async () => {
+			test( 'clears excluded ids when toggled off', async () => {
 				const user = userEvent.setup();
 				render(
 					<SubscriptionsInspectorControls
 						{ ...defaultProps }
-						preselectNewsletterCategories={ true }
-						selectedNewsletterCategoryIds={ [ defaultProps.availableNewsletterCategories[ 0 ].id ] }
+						autoSubscribeToNewsletterCategories
+						excludedNewsletterCategoryIds={ [ defaultProps.availableNewsletterCategories[ 0 ].id ] }
 					/>
 				);
 
 				await user.click( screen.getByText( 'Settings' ), { selector: 'button' } );
-				await user.click( screen.getByLabelText( 'Pre-select categories' ) );
+				await user.click( screen.getByLabelText( 'Auto-subscribe to categories' ) );
 
 				expect( setAttributes ).toHaveBeenCalledWith( {
-					preselectNewsletterCategories: false,
-					selectedNewsletterCategoryIds: [],
+					autoSubscribeToNewsletterCategories: false,
+					excludedNewsletterCategoryIds: [],
 				} );
 			} );
 
-			test( 'toggles category selection when pre-select is enabled', async () => {
+			test( 'excludes correct category when toggled', async () => {
 				const user = userEvent.setup();
 				render(
-					<SubscriptionsInspectorControls
-						{ ...defaultProps }
-						preselectNewsletterCategories={ true }
-						selectedNewsletterCategoryIds={ [ defaultProps.availableNewsletterCategories[ 0 ].id ] }
-					/>
+					<SubscriptionsInspectorControls { ...defaultProps } autoSubscribeToNewsletterCategories />
 				);
 
 				await user.click( screen.getByText( 'Settings' ), { selector: 'button' } );
 				await user.click( screen.getByLabelText( 'Category 1' ) );
 
 				expect( setAttributes ).toHaveBeenCalledWith( {
-					selectedNewsletterCategoryIds: [],
+					excludedNewsletterCategoryIds: [ defaultProps.availableNewsletterCategories[ 0 ].id ],
 				} );
 			} );
-
-			test( 'category checkboxes are disabled when pre-select is disabled', async () => {
-				const user = userEvent.setup();
-				render( <SubscriptionsInspectorControls { ...defaultProps } /> );
-
-				await user.click( screen.getByText( 'Settings' ), { selector: 'button' } );
-
-				const checkbox = screen.getByLabelText( 'Category 1' );
-				expect( checkbox ).toBeDisabled();
-			} );
 		} );
 	} );
 } );