From f325aa1cebee24ffd95985c3dd719233e045e44a Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Thu, 7 Sep 2023 12:06:23 +0800
Subject: [PATCH] Control the show or hide of the product data tab and meta box
 added to the product editing page by JS.

---
 .eslintrc.js                       |  1 +
 .externalized.json                 |  2 +-
 js/src/product-attributes/index.js | 40 ++++++++++++++++++++++++++++++
 src/Admin/Admin.php                |  7 ++++++
 4 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 4e6ab961b0..f857fd24a5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -29,6 +29,7 @@ module.exports = {
 			'@wordpress/stylelint-config',
 			'@pmmmwh/react-refresh-webpack-plugin',
 			'react-transition-group',
+			'jquery',
 		],
 		'import/resolver': { webpack: webpackResolver },
 	},
diff --git a/.externalized.json b/.externalized.json
index a1ea74111d..362d44cf08 100644
--- a/.externalized.json
+++ b/.externalized.json
@@ -1 +1 @@
-["@woocommerce/components","@woocommerce/currency","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/date","@woocommerce/navigation","@woocommerce/number","@woocommerce/settings","@woocommerce/tracks","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/primitives","@wordpress/url","lodash","react","react-dom"]
\ No newline at end of file
+["@woocommerce/components","@woocommerce/currency","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/date","@woocommerce/navigation","@woocommerce/number","@woocommerce/settings","@woocommerce/tracks","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/primitives","@wordpress/url","jquery","lodash","react","react-dom"]
\ No newline at end of file
diff --git a/js/src/product-attributes/index.js b/js/src/product-attributes/index.js
index 621f7adb3e..b8ac807052 100644
--- a/js/src/product-attributes/index.js
+++ b/js/src/product-attributes/index.js
@@ -1,4 +1,44 @@
+/**
+ * External dependencies
+ */
+import $ from 'jquery';
+
 /**
  * Internal dependencies
  */
 import './index.scss';
+
+const applicableProductTypes = new Set( [
+	// Simple product
+	'simple',
+	// Variable product
+	'variable',
+	// Product bundle from WooCommerce Product Bundles
+	'bundle',
+] );
+
+// Originally, this extension relied on a WooCommerce core processing to show or hide
+// the product data tab and meta box added to the product editing page.
+//
+// However, WooCommerce Subscriptions has an additional processing, which overrides
+// the associated processed result in WooCommerce core.
+//
+// Since there is no available way to continue to work around it with `show_if_{productType}`
+// or `hide_if_{productType}` CSS classes, a jQuery custom event dispatched by WooCommerce core
+// is used to handle show or hide them instead.
+//
+// See:
+// - https://github.com/woocommerce/google-listings-and-ads/issues/2086
+//
+// Ref:
+// - https://github.com/woocommerce/woocommerce/blob/8.0.3/plugins/woocommerce/client/legacy/js/admin/meta-boxes-product.js#L204-L243
+// - https://github.com/Automattic/woocommerce-subscriptions-core/blob/6.2.0/assets/js/admin/admin.js#L18-L88
+// - https://github.com/woocommerce/woocommerce/blob/8.0.3/plugins/woocommerce/client/legacy/js/admin/meta-boxes-product.js#L130-L158
+$( document ).on(
+	'woocommerce-product-type-change',
+	'body',
+	( e, productType ) => {
+		const shouldDisplay = applicableProductTypes.has( productType );
+		$( '.gla_attributes_tab, .gla_meta_box' ).toggle( shouldDisplay );
+	}
+);
diff --git a/src/Admin/Admin.php b/src/Admin/Admin.php
index 1c9b5faf44..eeac2f5ac0 100644
--- a/src/Admin/Admin.php
+++ b/src/Admin/Admin.php
@@ -159,6 +159,13 @@ protected function get_assets(): array {
 			'',
 			$product_condition
 		) );
+		$assets[] = ( new AdminScriptAsset(
+			'gla-product-attributes',
+			'js/build/product-attributes',
+			[],
+			'',
+			$product_condition
+		) );
 		$assets[] = ( new AdminStyleAsset(
 			'gla-product-attributes-css',
 			'js/build/product-attributes',