From 203b3ac8ed3deeba2d739bb907e1d79f1a84f26f Mon Sep 17 00:00:00 2001 From: arthur Date: Tue, 10 Dec 2024 18:51:47 +0800 Subject: [PATCH] Design Picker: Change the default selections if no selected goals --- .../steps-repository/design-setup/categories.ts | 8 ++++++-- packages/design-picker/src/hooks/use-categorization.ts | 9 ++++++--- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/categories.ts b/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/categories.ts index a60776715f035..691ffd8786512 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/categories.ts +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/categories.ts @@ -60,17 +60,21 @@ export function getCategorizationOptions( goals: Onboard.SiteGoal[], { isMultiSelection = false }: CategorizationOptions = {} ) { - const defaultSelections = Array.from( + let defaultSelections = Array.from( new Set( goals .map( ( goal ) => { const preferredCategories = getGoalsPreferredCategories( goal ); return isMultiSelection ? preferredCategories : preferredCategories.slice( 0, 1 ); } ) - .flat() ?? [ CATEGORIES.BUSINESS ] + .flat() ) ); + if ( defaultSelections.length === 0 ) { + defaultSelections = [ CATEGORIES.BLOG ]; + } + return { defaultSelections, sort: makeSortCategoryToTop( defaultSelections ), diff --git a/packages/design-picker/src/hooks/use-categorization.ts b/packages/design-picker/src/hooks/use-categorization.ts index 95b608a524e29..40748c7b77e00 100644 --- a/packages/design-picker/src/hooks/use-categorization.ts +++ b/packages/design-picker/src/hooks/use-categorization.ts @@ -85,9 +85,12 @@ export function useCategorization( * @returns the default category or null if none is available */ function chooseDefaultSelections( categories: Category[], defaultSelections: string[] ): string[] { - const defaultSelectionsSet = new Set( defaultSelections ); - if ( defaultSelections && categories.find( ( { slug } ) => defaultSelectionsSet.has( slug ) ) ) { - return defaultSelections; + const categorySlugsSet = new Set( categories.map( ( { slug } ) => slug ) ); + const availableDefaultSelections = defaultSelections.filter( ( selection ) => + categorySlugsSet.has( selection ) + ); + if ( availableDefaultSelections.length > 0 ) { + return availableDefaultSelections; } return categories[ 0 ]?.slug ? [ categories[ 0 ]?.slug ] : [];