fix: cys design with ai duplicate color validation (#40670)

plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.ts

@@ -222,10 +222,19 @@ export const colorPaletteValidator = z.object( {
 		.regex( hexColorRegex, { message: 'Invalid background color' } ),
 } );
 
-export const colorPaletteResponseValidator = z.object( {
+export const colorPaletteResponseValidator = z
-	default: colorPaletteNameValidator,
+	.object( {
-	bestColors: z.array( colorPaletteNameValidator ).length( 8 ),
+		default: colorPaletteNameValidator,
-} );
+		bestColors: z.array( colorPaletteNameValidator ).length( 8 ),
+	} )
+	.refine(
+		( response ) => {
+			const allColors = [ response.default, ...response.bestColors ];
+			const uniqueColors = new Set( allColors );
+			return uniqueColors.size === allColors.length;
+		},
+		{ message: 'Color palette names must be unique' }
+	);
 
 export const defaultColorPalette = {
 	queryId: 'default_color_palette',

plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/colorChoices.test.ts

@@ -141,12 +141,20 @@ describe( 'colorPaletteValidator', () => {
 } );
 
 describe( 'colorPaletteResponseValidator', () => {
+	const validPalette = {
+		default: 'Ancient Bronze',
+		bestColors: [
+			'Canary',
+			'Cinder',
+			'Rustic Rosewood',
+			'Lightning',
+			'Midnight Citrus',
+			'Purple Twilight',
+			'Crimson Tide',
+			'Ice',
+		],
+	};
 	it( 'should validate a correct color palette response', () => {
-		const validPalette = {
-			default: 'Ancient Bronze',
-			bestColors: Array( 8 ).fill( 'Ancient Bronze' ),
-		};
-
 		const parsedResult =
 			defaultColorPalette.responseValidation( validPalette );
 		expect( parsedResult ).toEqual( validPalette );
@@ -154,10 +162,10 @@ describe( 'colorPaletteResponseValidator', () => {
 
 	it( 'should fail if array contains invalid color', () => {
 		const invalidPalette = {
-			default: 'Ancient Bronze',
+			default: validPalette.default,
-			bestColors: Array( 7 )
+			bestColors: validPalette.bestColors
-				.fill( 'Ancient Bronze' )
+				.slice( 0, 7 )
-				.concat( [ 'Invalid Color' ] ),
+				.concat( 'Invalid Color' ),
 		};
 		expect( () => defaultColorPalette.responseValidation( invalidPalette ) )
 			.toThrowErrorMatchingInlineSnapshot( `
@@ -195,7 +203,7 @@ describe( 'colorPaletteResponseValidator', () => {
 	} );
 	it( 'should fail if default property is missing', () => {
 		const invalidPalette = {
-			bestColors: Array( 8 ).fill( 'Ancient Bronze' ),
+			bestColors: validPalette.bestColors,
 		};
 		expect( () => defaultColorPalette.responseValidation( invalidPalette ) )
 			.toThrowErrorMatchingInlineSnapshot( `
@@ -216,7 +224,7 @@ describe( 'colorPaletteResponseValidator', () => {
 	it( 'should fail if bestColors array is not of length 8', () => {
 		const invalidPalette = {
 			default: 'Ancient Bronze',
-			bestColors: Array( 7 ).fill( 'Ancient Bronze' ),
+			bestColors: validPalette.bestColors.slice( 0, 7 ),
 		};
 		expect( () => defaultColorPalette.responseValidation( invalidPalette ) )
 			.toThrowErrorMatchingInlineSnapshot( `
@@ -235,4 +243,21 @@ describe( 'colorPaletteResponseValidator', () => {
 		]"
 	` );
 	} );
+
+	it( 'should fail if there are duplicate colors', () => {
+		const invalidPalette = {
+			default: 'Ancient Bronze',
+			bestColors: Array( 8 ).fill( 'Ancient Bronze' ),
+		};
+		expect( () => defaultColorPalette.responseValidation( invalidPalette ) )
+			.toThrowErrorMatchingInlineSnapshot( `
+		"[
+		  {
+		    \\"code\\": \\"custom\\",
+		    \\"message\\": \\"Color palette names must be unique\\",
+		    \\"path\\": []
+		  }
+		]"
+	` );
+	} );
 } );

plugins/woocommerce/changelog/fix-cys-design-with-ai-duplicate-color-palette-validation

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+CYS: Fix the bug where sometimes switching from user defined color palettes to a pre-defined color palette won't set some colors.