diff --git a/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss b/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss index ebcde37abaad8..e64c17f5e04e8 100644 --- a/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss +++ b/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) { diff --git a/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx b/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx index 3d5c0f83b3491..5f4a5f1407ce3 100644 --- a/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx +++ b/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 && ( + + { tabs[ tabKey ]?.updateCount } + + ) } ) ); diff --git a/plugins/woocommerce/changelog/46088-update-red-bubble-on-my-subs-tab b/plugins/woocommerce/changelog/46088-update-red-bubble-on-my-subs-tab new file mode 100644 index 0000000000000..85c2264b938ae --- /dev/null +++ b/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 \ No newline at end of file diff --git a/plugins/woocommerce/includes/admin/helper/class-wc-helper-admin.php b/plugins/woocommerce/includes/admin/helper/class-wc-helper-admin.php index fe3dab533354a..b512ff79dd1fc 100644 --- a/plugins/woocommerce/includes/admin/helper/class-wc-helper-admin.php +++ b/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; diff --git a/plugins/woocommerce/includes/admin/helper/class-wc-helper-updater.php b/plugins/woocommerce/includes/admin/helper/class-wc-helper-updater.php index 4cd3b6886c976..bf3a049c8c190 100644 --- a/plugins/woocommerce/includes/admin/helper/class-wc-helper-updater.php +++ b/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( '%d', $count, number_format_i18n( $count ) ); + return $count_html; } diff --git a/plugins/woocommerce/includes/admin/helper/class-wc-helper.php b/plugins/woocommerce/includes/admin/helper/class-wc-helper.php index 10e0ac60e7c90..d5f81e1b6a3e6 100644 --- a/plugins/woocommerce/includes/admin/helper/class-wc-helper.php +++ b/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}/" ); diff --git a/plugins/woocommerce/src/Internal/Admin/Marketplace.php b/plugins/woocommerce/src/Internal/Admin/Marketplace.php index 888a3e7600db4..40d4a2f3acb1d 100644 --- a/plugins/woocommerce/src/Internal/Admin/Marketplace.php +++ b/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( ' %d', $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;