Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 13 commits into from Apr 2, 2024
Merged

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

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
69b2156
Extract update count function.
thilinah Apr 1, 2024
44f2760
Pass wooUpdateCount to be used by admin components.
thilinah Apr 1, 2024
6f586b8
Show update count bubble on in-app my subscriptions tab.
thilinah Apr 1, 2024
64c08fd
Add changefile(s) from automation for the following project(s): wooco…
invalid-email-address Apr 1, 2024
95f53bc
Refactor how update count HTML is generated and move logic into appro…
thilinah Apr 1, 2024
6c2ca60
Merge branch 'update/red-bubble-on-my-subs-tab' of github.com:woocomm…
thilinah Apr 1, 2024
acc77b1
Show red badge when the site is disconnected, regardless of the insta…
thilinah Apr 1, 2024
8ee5c00
Always display as 1 update is available when site is disconnected.
thilinah Apr 2, 2024
28ebf86
Skip using dangerouslySetInnerHTML.
thilinah Apr 2, 2024
8c8d56d
Remove unused dependency.
thilinah Apr 2, 2024
f09891b
Move updateCount to a tab property.
thilinah Apr 2, 2024
7e8270e
Prevent calling get_update_count if the site is not connected.
thilinah Apr 2, 2024
1e76368
Raw url encode the product key before signing the URL
anaspk Apr 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 17 additions & 0 deletions plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss
View file
Open in desktop
Expand Up @@ -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) {
Expand Down
12 changes: 12 additions & 0 deletions plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx
View file
Open in desktop
Expand Up @@ -14,6 +14,8 @@ import './tabs.scss';
import { DEFAULT_TAB_KEY, MARKETPLACE_PATH } from '../constants';
import { MarketplaceContext } from '../../contexts/marketplace-context';
import { MarketplaceContextType } from '../../contexts/types';
import sanitizeHTML from '../../../lib/sanitize-html';
thilinah marked this conversation as resolved.
Show resolved Hide resolved
import { getAdminSetting } from '../../../utils/admin-settings';

export interface TabsProps {
additionalClassNames?: Array< string > | undefined;
Expand All @@ -23,6 +25,7 @@ interface Tab {
name: string;
title: string;
href?: string;
showUpdateCount?: boolean;
}

interface Tabs {
Expand All @@ -49,6 +52,7 @@ const tabs: Tabs = {
'my-subscriptions': {
name: 'my-subscriptions',
title: __( 'My subscriptions', 'woocommerce' ),
showUpdateCount: true,
},
};

Expand All @@ -73,11 +77,14 @@ const getVisibleTabs = ( selectedTab: string ) => {

return currentVisibleTabs;
};

const renderTabs = (
marketplaceContextValue: MarketplaceContextType,
visibleTabs: Tabs
) => {
const { selectedTab, setSelectedTab } = marketplaceContextValue;
const wccomSettings = getAdminSetting( 'wccomHelper', {} );
const updateCount = wccomSettings?.wooUpdateCount ?? 0;

const onTabClick = ( tabKey: string ) => {
if ( tabKey === selectedTab ) {
Expand Down Expand Up @@ -115,6 +122,11 @@ const renderTabs = (
key={ tabKey }
>
{ tabs[ tabKey ]?.title }
{ tabs[ tabKey ]?.showUpdateCount && updateCount > 0 && (
thilinah marked this conversation as resolved.
Show resolved Hide resolved
<span className="woocommerce-marketplace__update-count">
<span> { updateCount } </span>
</span>
) }
</Button>
)
);
Expand Down
4 changes: 4 additions & 0 deletions plugins/woocommerce/changelog/46088-update-red-bubble-on-my-subs-tab
View file
Open in desktop
@@ -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
3 changes: 3 additions & 0 deletions plugins/woocommerce/includes/admin/helper/class-wc-helper-admin.php
View file
Open in desktop
Expand Up @@ -5,6 +5,8 @@
* @package WooCommerce\Admin\Helper
*/

use Automattic\WooCommerce\Internal\Admin\Marketplace;

if ( ! defined( 'ABSPATH' ) ) {
exit;
}
Expand Down Expand Up @@ -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_Woo_Update_Manager_Plugin::increment_update_count_for_woo_update_manager( WC_Helper_Updater::get_updates_count() ?? 0 ),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The logic of getting the count here duplicates the logic in get_updates_count_html. Would it be possible to standardize and have just one function that returns the final count?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed here: f09891b

);

return $settings;
Expand Down
14 changes: 6 additions & 8 deletions plugins/woocommerce/includes/admin/helper/class-wc-helper-updater.php
View file
Open in desktop
Expand Up @@ -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.
*
Expand Down Expand Up @@ -476,7 +476,7 @@ public static function get_updates_count() {
}

if ( version_compare( $plugin['Version'], $update_data[ $plugin['_product_id'] ]['version'], '<' ) ) {
$count++;
++$count;
}
}

Expand All @@ -487,7 +487,7 @@ public static function get_updates_count() {
}

if ( version_compare( $theme['Version'], $update_data[ $theme['_product_id'] ]['version'], '<' ) ) {
$count++;
++$count;
}
}

Expand All @@ -501,12 +501,10 @@ 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() ?? 0;
$count = WC_Woo_Update_Manager_Plugin::increment_update_count_for_woo_update_manager( $count );
$count_html = sprintf( '<span class="update-plugins count-%d"><span class="update-count">%d</span></span>', $count, number_format_i18n( $count ) );

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The bubble HTML is still present in the DOM when the number is count is 0. It's not seen, as there is CSS that hides the element. Guess it's fine to leave as is, but just wanted to bring it to your attention in case it's not intended.

image

return $count_html;
}

Expand Down
19 changes: 19 additions & 0 deletions plugins/woocommerce/includes/admin/helper/class-wc-woo-update-manager-plugin.php
View file
Open in desktop
Expand Up @@ -108,6 +108,25 @@ public static function show_woo_update_manager_install_notice(): void {
include __DIR__ . '/views/html-notice-woo-updater-not-activated.php';
}

/**
* Adjust update counter if Woo.com Update Manager is not installed.
*
* @param int $count number of updates available excluding Woo.com Update Manager.
* @return int
*/
public static function increment_update_count_for_woo_update_manager( int $count ): int {

if ( ! WC_Helper::is_site_connected() ) {
return 1;
}

if ( ! self::is_plugin_installed() || ! self::is_plugin_active() ) {
++$count;
}

return $count;
}
thilinah marked this conversation as resolved.
Show resolved Hide resolved

/**
* Check if the installation notice has been dismissed.
*
Expand Down
27 changes: 2 additions & 25 deletions plugins/woocommerce/src/Internal/Admin/Marketplace.php
View file
Open in desktop
Expand Up @@ -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',
),
Expand All @@ -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.
*
Expand All @@ -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;
Expand Down