From 1a7619a4fa9d1f94f0f282ed2ade3fe209b2bb46 Mon Sep 17 00:00:00 2001
From: Luigi Teschio <gigitux@gmail.com>
Date: Fri, 19 Jul 2024 10:03:56 +0200
Subject: [PATCH] CYS: show logo when the header is updated (#49681)

* CYS: show logo when the header is updated

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 .../auto-block-preview-event-listener.ts      | 16 ++++------
 ...header-and-attempting-to-change-added-logo |  4 +++
 .../assembler/logo-picker/logo-picker.page.js |  4 +++
 .../assembler/logo-picker/logo-picker.spec.js | 32 +++++++++++++++++++
 4 files changed, 47 insertions(+), 9 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/49681-49668-infinite-loading-for-the-logo-in-cys-when-switching-header-and-attempting-to-change-added-logo

diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/auto-block-preview-event-listener.ts b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/auto-block-preview-event-listener.ts
index af48009ec1e..d940d840236 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/auto-block-preview-event-listener.ts
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/auto-block-preview-event-listener.ts
@@ -338,16 +338,14 @@ export const useAddAutoBlockPreviewEventListenersAndObservers = (
 
 		setStyle( documentElement );
 
-		if ( logoBlockIds.length === 0 ) {
-			const logoObserver = findAndSetLogoBlock(
-				{ autoScale, documentElement },
-				{
-					setLogoBlockIds,
-				}
-			);
+		const logoObserver = findAndSetLogoBlock(
+			{ autoScale, documentElement },
+			{
+				setLogoBlockIds,
+			}
+		);
 
-			observers.push( logoObserver );
-		}
+		observers.push( logoObserver );
 
 		if (
 			isFullComposabilityFeatureAndAPIAvailable() &&
diff --git a/plugins/woocommerce/changelog/49681-49668-infinite-loading-for-the-logo-in-cys-when-switching-header-and-attempting-to-change-added-logo b/plugins/woocommerce/changelog/49681-49668-infinite-loading-for-the-logo-in-cys-when-switching-header-and-attempting-to-change-added-logo
new file mode 100644
index 00000000000..fe948dd76c0
--- /dev/null
+++ b/plugins/woocommerce/changelog/49681-49668-infinite-loading-for-the-logo-in-cys-when-switching-header-and-attempting-to-change-added-logo
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+CYS: show logo when the header is updated.
\ No newline at end of file
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/logo-picker/logo-picker.page.js b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/logo-picker/logo-picker.page.js
index 4cee64543ef..0fb8a38542f 100644
--- a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/logo-picker/logo-picker.page.js
+++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/logo-picker/logo-picker.page.js
@@ -49,6 +49,10 @@ export class LogoPickerPage {
 			.click();
 	}
 
+	getPlaceholderPreview( assemblerLocator ) {
+		return assemblerLocator.locator( '.components-placeholder__preview' );
+	}
+
 	async resetLogo( baseURL ) {
 		const apiContext = await this.request.newContext( {
 			baseURL,
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/logo-picker/logo-picker.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/logo-picker/logo-picker.spec.js
index fa66536b579..979a3f1f9a1 100644
--- a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/logo-picker/logo-picker.spec.js
+++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/logo-picker/logo-picker.spec.js
@@ -187,6 +187,38 @@ test.describe( 'Assembler -> Logo Picker', { tag: '@gutenberg' }, () => {
 		await expect( assembler.getByText( 'Media Library' ) ).toBeVisible();
 	} );
 
+	// This test checks this regression: https://github.com/woocommerce/woocommerce/issues/49668
+	test( 'Logo should be visible after header update', async ( {
+		assemblerPageObject,
+		logoPickerPageObject,
+	} ) => {
+		const assembler = await assemblerPageObject.getAssembler();
+		const emptyLogoPicker =
+			logoPickerPageObject.getEmptyLogoPickerLocator( assembler );
+		await emptyLogoPicker.click();
+		await logoPickerPageObject.pickImage( assembler );
+
+		await assembler.getByLabel( 'Back' ).click();
+
+		await assembler.getByText( 'Choose your header' ).click();
+
+		const header = assembler
+			.locator( '.block-editor-block-patterns-list__list-item' )
+			.nth( 1 )
+			.frameLocator( 'iframe' )
+			.locator( '.wc-blocks-header-pattern' );
+
+		await header.click();
+
+		await assembler.getByLabel( 'Back' ).click();
+
+		await assembler.getByText( 'Add your logo' ).click();
+		const emptyLogoLocator =
+			logoPickerPageObject.getPlaceholderPreview( assembler );
+
+		await expect( emptyLogoLocator ).toBeHidden();
+	} );
+
 	test( 'Enabling the "use as site icon" option should set the image as the site icon', async ( {
 		page,
 		assemblerPageObject,