Add red bubble with update count on in-app My Subscriptions tab (#46088)

* Extract update count function.

* Pass wooUpdateCount to be used by admin components.

* Show update count bubble on in-app my subscriptions tab.

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

* Refactor how update count HTML is generated and move logic into appropriate classes.

* Show red badge when the site is disconnected, regardless of the installation status of WUM.

* Always display as 1 update is available when site is disconnected.

* Skip using dangerouslySetInnerHTML.

* Remove unused dependency.

* Move updateCount to a tab property.

* Prevent calling get_update_count if the site is not connected.

* Raw url encode the product key before signing the URL

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Muhammad Anas <muhammad.anas@automattic.com>

plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss

@@ -28,6 +28,23 @@
 			border-color: var(--wp-admin-theme-color);
 		}
 	}
+
+	&__update-count {
+		display: inline-block;
+		vertical-align: top;
+		box-sizing: border-box;
+		margin: 1px 0 -1px 4px;
+		padding: 0 5px;
+		min-width: 16px;
+		height: 16px;
+		border-radius: 9px;
+		background-color: #d63638;
+		color: #fff;
+		font-size: 10px;
+		line-height: 1.6;
+		text-align: center;
+		z-index: 26;
+	}
 }
 
 @media (width <= $breakpoint-medium) {

plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx

@@ -14,6 +14,7 @@ import './tabs.scss';
 import { DEFAULT_TAB_KEY, MARKETPLACE_PATH } from '../constants';
 import { MarketplaceContext } from '../../contexts/marketplace-context';
 import { MarketplaceContextType } from '../../contexts/types';
+import { getAdminSetting } from '../../../utils/admin-settings';
 
 export interface TabsProps {
 	additionalClassNames?: Array< string > | undefined;
@@ -23,32 +24,47 @@ interface Tab {
 	name: string;
 	title: string;
 	href?: string;
+	showUpdateCount: boolean;
+	updateCount: number;
 }
 
 interface Tabs {
 	[ key: string ]: Tab;
 }
 
+const wccomSettings = getAdminSetting( 'wccomHelper', {} );
+const wooUpdateCount = wccomSettings?.wooUpdateCount ?? 0;
+
 const tabs: Tabs = {
 	search: {
 		name: 'search',
 		title: __( 'Search results', 'woocommerce' ),
+		showUpdateCount: false,
+		updateCount: 0,
 	},
 	discover: {
 		name: 'discover',
 		title: __( 'Discover', 'woocommerce' ),
+		showUpdateCount: false,
+		updateCount: 0,
 	},
 	extensions: {
 		name: 'extensions',
 		title: __( 'Browse', 'woocommerce' ),
+		showUpdateCount: false,
+		updateCount: 0,
 	},
 	themes: {
 		name: 'themes',
 		title: __( 'Themes', 'woocommerce' ),
+		showUpdateCount: false,
+		updateCount: 0,
 	},
 	'my-subscriptions': {
 		name: 'my-subscriptions',
 		title: __( 'My subscriptions', 'woocommerce' ),
+		showUpdateCount: true,
+		updateCount: wooUpdateCount,
 	},
 };
 
@@ -73,6 +89,7 @@ const getVisibleTabs = ( selectedTab: string ) => {
 
 	return currentVisibleTabs;
 };
+
 const renderTabs = (
 	marketplaceContextValue: MarketplaceContextType,
 	visibleTabs: Tabs
@@ -115,6 +132,12 @@ const renderTabs = (
 					key={ tabKey }
 				>
 					{ tabs[ tabKey ]?.title }
+					{ tabs[ tabKey ]?.showUpdateCount &&
+						tabs[ tabKey ]?.updateCount > 0 && (
+							<span className="woocommerce-marketplace__update-count">
+								<span> { tabs[ tabKey ]?.updateCount } </span>
+							</span>
+						) }
 				</Button>
 			)
 		);

plugins/woocommerce/changelog/46088-update-red-bubble-on-my-subs-tab

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Displays a red badge on in-app My Subscriptions tab if Woo.com Update Manager is not installed or activated

plugins/woocommerce/includes/admin/helper/class-wc-helper-admin.php

@@ -5,6 +5,8 @@
  * @package WooCommerce\Admin\Helper
  */
 
+use Automattic\WooCommerce\Internal\Admin\Marketplace;
+
 if ( ! defined( 'ABSPATH' ) ) {
 	exit;
 }
@@ -60,6 +62,7 @@ function ( $product ) {
 			'wooUpdateManagerActive'     => WC_Woo_Update_Manager_Plugin::is_plugin_active(),
 			'wooUpdateManagerInstallUrl' => WC_Woo_Update_Manager_Plugin::generate_install_url(),
 			'wooUpdateManagerPluginSlug' => WC_Woo_Update_Manager_Plugin::WOO_UPDATE_MANAGER_SLUG,
+			'wooUpdateCount'             => WC_Helper_Updater::get_updates_count_based_on_site_status(),
 		);
 
 		return $settings;

plugins/woocommerce/includes/admin/helper/class-wc-helper-updater.php

@@ -312,7 +312,7 @@ public static function get_translations_update_data() {
 		*/
 		$active_for_translations = array_filter(
 			$active_woo_plugins,
-			function( $plugin ) use ( $plugins ) {
+			function ( $plugin ) use ( $plugins ) {
 				/**
 				 * Filters the plugins that are subscribed to the automatic translations updates.
 				 *
@@ -476,7 +476,7 @@ public static function get_updates_count() {
 			}
 
 			if ( version_compare( $plugin['Version'], $update_data[ $plugin['_product_id'] ]['version'], '<' ) ) {
-				$count++;
+				++$count;
 			}
 		}
 
@@ -487,11 +487,30 @@ public static function get_updates_count() {
 			}
 
 			if ( version_compare( $theme['Version'], $update_data[ $theme['_product_id'] ]['version'], '<' ) ) {
-				$count++;
+				++$count;
 			}
 		}
 
 		set_transient( $cache_key, $count, 12 * HOUR_IN_SECONDS );
+
+		return $count;
+	}
+
+	/**
+	 * Get the update count to based on the status of the site.
+	 *
+	 * @return int
+	 */
+	public static function get_updates_count_based_on_site_status() {
+		if ( ! WC_Helper::is_site_connected() ) {
+			return 1;
+		}
+
+		$count = self::get_updates_count() ?? 0;
+		if ( ! WC_Woo_Update_Manager_Plugin::is_plugin_installed() || ! WC_Woo_Update_Manager_Plugin::is_plugin_active() ) {
+			++$count;
+		}
+
 		return $count;
 	}
 
@@ -501,12 +520,9 @@ public static function get_updates_count() {
 	 * @return string Updates count markup, empty string if no updates avairable.
 	 */
 	public static function get_updates_count_html() {
-		$count = self::get_updates_count();
-		if ( ! $count ) {
-			return '';
-		}
-
+		$count      = self::get_updates_count_based_on_site_status();
 		$count_html = sprintf( '<span class="update-plugins count-%d"><span class="update-count">%d</span></span>', $count, number_format_i18n( $count ) );
+
 		return $count_html;
 	}
 

plugins/woocommerce/includes/admin/helper/class-wc-helper.php

@@ -1201,7 +1201,7 @@ public static function deactivate_helper_subscription( $product_key ) {
 	public static function get_subscription_install_url( $product_key, $product_slug ) {
 		$install_url = add_query_arg(
 			array(
-				'product-key' => $product_key,
+				'product-key' => rawurlencode( $product_key ),
 			),
 			self::get_install_base_url() . "{$product_slug}/"
 		);

plugins/woocommerce/src/Internal/Admin/Marketplace.php

@@ -61,7 +61,7 @@ public static function get_marketplace_pages() {
 			array(
 				'id'         => 'woocommerce-marketplace',
 				'parent'     => 'woocommerce',
-				'title'      => __( 'Extensions', 'woocommerce' ) . self::get_marketplace_update_count_html(),
+				'title'      => __( 'Extensions', 'woocommerce' ) . WC_Helper_Updater::get_updates_count_html(),
 				'page_title' => __( 'Extensions', 'woocommerce' ),
 				'path'       => '/extensions',
 			),
@@ -75,29 +75,6 @@ public static function get_marketplace_pages() {
 		return apply_filters( 'woocommerce_marketplace_menu_items', $marketplace_pages );
 	}
 
-	/**
-	 * Create the menu bubble for extensions menu based on number of updates available.
-	 *
-	 * @return string
-	 */
-	private static function get_marketplace_update_count_html() {
-		$count = WC_Helper_Updater::get_updates_count();
-		if ( empty( $count ) ) {
-			$count = 0;
-		}
-
-		$count = intval( $count );
-		if ( ! WC_Woo_Update_Manager_Plugin::is_plugin_installed() || ! WC_Woo_Update_Manager_Plugin::is_plugin_active() ) {
-			++$count;
-		}
-
-		if ( 0 === $count ) {
-			return '';
-		}
-
-		return sprintf( ' <span class="update-plugins count-%d"><span class="update-count">%d</span></span>', $count, number_format_i18n( $count ) );
-	}
-
 	/**
 	 * Enqueue update script.
 	 *
@@ -107,7 +84,7 @@ public function enqueue_scripts( $hook_suffix ) {
 		// phpcs:disable WordPress.Security.NonceVerification.Recommended
 		if ( 'woocommerce_page_wc-admin' !== $hook_suffix ) {
 			return;
-		};
+		}
 
 		if ( ! isset( $_GET['path'] ) || '/extensions' !== $_GET['path'] ) {
 			return;