From d15bfd2398dfbca4d6865f8e9a1da68d21ca22e0 Mon Sep 17 00:00:00 2001
From: Roy Ho <roykho77@gmail.com>
Date: Fri, 15 Dec 2023 13:22:10 -0800
Subject: [PATCH] Product Gallery: reset main image when variations are cleared
 (#42830)

* Product Gallery: reset main image when variations are cleared

* Add changelog for woo core

* Update event name to be more descriptive
---
 .../js/blocks/product-gallery/frontend.tsx       | 16 ++++++++++++++++
 .../changelog/product-gallery-variation-images   |  4 ++++
 .../changelog/product-gallery-variation-images   |  4 ++++
 3 files changed, 24 insertions(+)
 create mode 100644 plugins/woocommerce-blocks/changelog/product-gallery-variation-images
 create mode 100644 plugins/woocommerce/changelog/product-gallery-variation-images

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/frontend.tsx
index 92c70fbbd75..fd8061086b6 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/frontend.tsx
@@ -109,8 +109,24 @@ const productGallery = {
 				attributes: true,
 			} );
 
+			const clearVariationsLink = document.querySelector(
+				'.wp-block-add-to-cart-form .reset_variations'
+			);
+
+			const selectFirstImage = () => {
+				context.selectedImage = context.firstMainImageId;
+			};
+
+			if ( clearVariationsLink ) {
+				clearVariationsLink.addEventListener(
+					'click',
+					selectFirstImage
+				);
+			}
+
 			return () => {
 				observer.disconnect();
+				document.removeEventListener( 'click', selectFirstImage );
 			};
 		},
 		keyboardAccess: () => {
diff --git a/plugins/woocommerce-blocks/changelog/product-gallery-variation-images b/plugins/woocommerce-blocks/changelog/product-gallery-variation-images
new file mode 100644
index 00000000000..4699cd7665a
--- /dev/null
+++ b/plugins/woocommerce-blocks/changelog/product-gallery-variation-images
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+Comment: Reset main image when variations are cleared.
+
diff --git a/plugins/woocommerce/changelog/product-gallery-variation-images b/plugins/woocommerce/changelog/product-gallery-variation-images
new file mode 100644
index 00000000000..4699cd7665a
--- /dev/null
+++ b/plugins/woocommerce/changelog/product-gallery-variation-images
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+Comment: Reset main image when variations are cleared.
+