From fb755254dbd35d713add031d4e2a42ad43147b90 Mon Sep 17 00:00:00 2001 From: Chris Holder Date: Fri, 7 Feb 2025 11:06:36 -0600 Subject: [PATCH] Use excluded categories in block --- .../blocks/subscriptions/controls.js | 15 +++-- .../extensions/blocks/subscriptions/edit.js | 23 +------ .../blocks/subscriptions/test/controls.js | 60 +++++++++---------- 3 files changed, 41 insertions(+), 57 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/controls.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/controls.js index cd5cbbb285c18..396b491c4b008 100644 --- 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, + } ); + } } /> ) ) } diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js index 3442ab0b0e9b6..ba6ec15477212 100644 --- 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 index 2171b0534c279..744fa7ec69fcf 100644 --- 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( ); 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( + + ); + + 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( { 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( { 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( ); 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( - + ); 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( ); - - await user.click( screen.getByText( 'Settings' ), { selector: 'button' } ); - - const checkbox = screen.getByLabelText( 'Category 1' ); - expect( checkbox ).toBeDisabled(); - } ); } ); } ); } );