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>
This commit is contained in:
parent
df2ba716ef
commit
561a3d18c5
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
);
|
||||
|
|
|
@ -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
|
|
@ -5,6 +5,8 @@
|
|||
* @package WooCommerce\Admin\Helper
|
||||
*/
|
||||
|
||||
use Automattic\WooCommerce\Internal\Admin\Marketplace;
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
@ -60,6 +62,7 @@ class WC_Helper_Admin {
|
|||
'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;
|
||||
|
|
|
@ -312,7 +312,7 @@ class WC_Helper_Updater {
|
|||
*/
|
||||
$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 @@ class WC_Helper_Updater {
|
|||
}
|
||||
|
||||
if ( version_compare( $plugin['Version'], $update_data[ $plugin['_product_id'] ]['version'], '<' ) ) {
|
||||
$count++;
|
||||
++$count;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -487,11 +487,30 @@ class WC_Helper_Updater {
|
|||
}
|
||||
|
||||
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 @@ class WC_Helper_Updater {
|
|||
* @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;
|
||||
}
|
||||
|
||||
|
|
|
@ -1201,7 +1201,7 @@ class WC_Helper {
|
|||
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}/"
|
||||
);
|
||||
|
|
|
@ -61,7 +61,7 @@ class Marketplace {
|
|||
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 @@ class Marketplace {
|
|||
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 @@ class Marketplace {
|
|||
// phpcs:disable WordPress.Security.NonceVerification.Recommended
|
||||
if ( 'woocommerce_page_wc-admin' !== $hook_suffix ) {
|
||||
return;
|
||||
};
|
||||
}
|
||||
|
||||
if ( ! isset( $_GET['path'] ) || '/extensions' !== $_GET['path'] ) {
|
||||
return;
|
||||
|
|
Loading…
Reference in New Issue