Remove the ability to update Woo.com extensions not available in WP.org plugin directory

plugins/woocommerce-admin/client/marketplace/components/constants.ts

@@ -17,3 +17,5 @@ export const MARKETPLACE_COLLABORATION_PATH =
 	MARKETPLACE_HOST +
 	'/document/managing-woocommerce-com-subscriptions/#transfer-a-woocommerce-com-subscription';
 export const WP_ADMIN_PLUGIN_LIST_URL = ADMIN_URL + '/plugins.php';
+export const WOO_CONNECT_PLUGIN_DOWNLOAD_URL =
+	MARKETPLACE_HOST + '/product-download/woo-update-manager';

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

@@ -13,6 +13,7 @@ import ProductLoader from '../product-loader/product-loader';
 import { MarketplaceContext } from '../../contexts/marketplace-context';
 import { ProductType } from '../product-list/types';
 import './discover.scss';
+import PluginInstallNotice from '../woo-update-manager-plugin/plugin-install-notice';
 
 export default function Discover(): JSX.Element | null {
 	const [ productGroups, setProductGroups ] = useState<
@@ -70,6 +71,7 @@ export default function Discover(): JSX.Element | null {
 	const groupsList = productGroups.flatMap( ( group ) => group );
 	return (
 		<div className="woocommerce-marketplace__discover">
+			<PluginInstallNotice />
 			{ groupsList.map( ( groups ) => (
 				<ProductList
 					key={ groups.id }

plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/my-subscriptions.scss

@@ -256,7 +256,7 @@
 	.woocommerce-marketplace__my-subscriptions__icon {
 		width: 80px;
 		height: 80px;
-		background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI5NzBfMTA0MzcpIj4KPHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNzQuMTMyNSAwTDY4LjQ0ODEgMy4yOTQ4NEw2Mi43NTc5IDBMNTcuMDczNCAzLjI5NDg0TDUxLjM4MzIgMEw0NS42OTMxIDMuMjk0ODRMNDAuMDA4NiAwTDM0LjMxODQgMy4yOTQ4NEwyOC42MzM5IDBMMjIuOTQzNyAzLjI5NDg0TDE3LjI1MzYgMEwxMS41NjM0IDMuMjk0ODRMNS44NzMxOCAwTDAgMy40MDIwNlY3Ni41OTc5TDUuODY3NDcgODBMMTEuNTU3NiA3Ni43MDFMMTcuMjQyMSA4MEwyMi45MzIzIDc2LjcwMUwyOC42MTY4IDgwTDM0LjMwNjkgNzYuNzAxTDM5Ljk5NzEgODBMNDUuNjgxNiA3Ni43MDFMNTEuMzcxOCA4MEw1Ny4wNTYzIDc2LjcwMUw2Mi43NDY1IDgwTDY4LjQzNjYgNzYuNzAxTDc0LjEzMjUgODBMODAgNzYuNTk3OVYzLjQwMjA2TDc0LjEzMjUgMFoiIGZpbGw9IiNGMEYwRjAiLz4KPHBhdGggZD0iTTcxLjE5OTIgMTQuNzk5Nkg4LjM5OTE3VjE4Ljc5OTZINzEuMTk5MlYxNC43OTk2WiIgZmlsbD0iI0RERERERCIvPgo8cGF0aCBkPSJNNzEuMTk5MiAyNS4xOTk1SDguMzk5MTdWMjkuMTk5NUg3MS4xOTkyVjI1LjE5OTVaIiBmaWxsPSIjREREREREIi8+CjxwYXRoIGQ9Ik03MS4xOTkyIDM1LjU5OTZIOC4zOTkxN1YzOS41OTk2SDcxLjE5OTJWMzUuNTk5NloiIGZpbGw9IiNEREREREQiLz4KPHBhdGggZD0iTTY4IDUzLjYwMDFINDkuMkM0Ny40MzI3IDUzLjYwMDEgNDYgNTUuMDMyOCA0NiA1Ni44MDAxVjYwLjgwMDFDNDYgNjIuNTY3NCA0Ny40MzI3IDY0LjAwMDEgNDkuMiA2NC4wMDAxSDY4QzY5Ljc2NzMgNjQuMDAwMSA3MS4yIDYyLjU2NzQgNzEuMiA2MC44MDAxVjU2LjgwMDFDNzEuMiA1NS4wMzI4IDY5Ljc2NzMgNTMuNjAwMSA2OCA1My42MDAxWiIgZmlsbD0iI0RERERERCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzI5NzBfMTA0MzciPgo8cmVjdCB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);
+		background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM4NV80Njc4KSI+CjxwYXRoIGQ9Ik0xMC43NTcgNDguNzI2N0M3LjkwMzE2IDUxLjU4MDUgNi42NjMxOCA1NC42ODk3IDcuMDc3NzQgNTcuOTY1NUM3LjQyOTM4IDYwLjc1MjcgOC45NjkxOCA2My40ODQzIDExLjc3ODYgNjYuMzA4NUMxMS43OTcxIDY2LjMyNyAxNC4zNCA2OC44Njk5IDE0LjM1ODUgNjguODg4NEMxNy4xODY0IDcxLjcwMTUgMTkuOTE0MyA3My4yMzc2IDIyLjcwMTUgNzMuNTg5M0MyNS45NzczIDc0LjAwMzggMjkuMDg2NSA3Mi43NjM5IDMxLjk0MDMgNjkuOTFMMzguMjgwOSA2My41Njk1QzQxLjEzNDcgNjAuNzE1NyA0Mi4zNzEgNTcuNjA2NSA0MS45NjAxIDU0LjMzMDdDNDEuNjA4NSA1MS41NDM1IDQwLjA2ODcgNDguODExOCAzNy4yNTkzIDQ1Ljk4NzZDMzcuMjQwOCA0NS45NjkxIDM0LjY5NzkgNDMuNDI2MiAzNC42Nzk0IDQzLjQwNzdDMzEuODUxNSA0MC41OTQ2IDI5LjEyMzUgMzkuMDU4NSAyNi4zMzYzIDM4LjcwNjlDMjMuMDYwNiAzOC4yOTIzIDE5Ljk1MTQgMzkuNTMyMyAxNy4wOTc1IDQyLjM4NjFMMTAuNzU3IDQ4LjcyNjdaTTIxLjEzOTUgNDcuNzY0M0MyMy4wNzkxIDQ1LjgyNDggMjYuMjQwMSA0NC40NDA0IDI5Ljk1NjQgNDguMTA4NkMyOS45Nzg2IDQ4LjEzMDggMzIuNTM2MyA1MC42ODg1IDMyLjU1ODUgNTAuNzEwN0MzNi4yMjY2IDU0LjQzMDYgMzQuODQyMyA1Ny41ODc5IDMyLjkwMjcgNTkuNTI3NUwyNy44OTgzIDY0LjUzMThDMjUuOTU4OCA2Ni40NzE0IDIyLjc5NzggNjcuODU1NyAxOS4wODE1IDY0LjE4NzZDMTkuMDU5MyA2NC4xNjU0IDE2LjUwMTYgNjEuNjA3NyAxNi40Nzk0IDYxLjU4NTVDMTIuODExMyA1Ny44NjU2IDE0LjE5NTYgNTQuNzA4MiAxNi4xMzUyIDUyLjc2ODdMMjEuMTM5NSA0Ny43NjQzWiIgZmlsbD0iI0YwRjBGMCIvPgo8cGF0aCBkPSJNMzQuNDE2NSAzOS4xNjIxQzM0LjQxNjUgMzkuMTYyMSAyOS45MTkzIDQzLjY1OTQgMjguNzYwNyA0NC44MTc5QzI3LjAyMSA0Ni41NTc2IDI3LjAxMzYgNDguNTM0MiAyOC43NjgxIDUwLjI4ODZMMzAuMzgxOSA1MS45MDI1QzMyLjEzNjQgNTMuNjU3IDM0LjExMyA1My42NDk2IDM1Ljg1MjcgNTEuOTA5OUMzNy4wMTEyIDUwLjc1MTMgNDEuNTA4NSA0Ni4yNTQxIDQxLjUwODUgNDYuMjU0MUwzNC40MTY1IDM5LjE2MjFaIiBmaWxsPSIjRTBFMEUwIi8+CjxwYXRoIGQ9Ik02OS45MTM0IDMxLjk0MDZDNzIuNzY3MiAyOS4wODY4IDc0LjAwMzUgMjUuOTc3NSA3My41OTI2IDIyLjcwMThDNzMuMjQxIDE5LjkxNDYgNzEuNzAxMiAxNy4xODI5IDY4Ljg5MTggMTQuMzU4N0M2OC44NzMzIDE0LjM0MDIgNjYuMzMwNCAxMS43OTczIDY2LjMxMTkgMTEuNzc4OEM2My40ODQgOC45NjU3MiA2MC43NTYgNy40Mjk2MiA1Ny45Njg4IDcuMDc3OThDNTQuNjkzIDYuNjYzNDIgNTEuNTgzOCA3LjkwMzQxIDQ4LjczIDEwLjc1NzJMNDIuMzg5NSAxNy4wOTc4QzM5LjUzNTYgMTkuOTUxNiAzOC4yOTk0IDIzLjA2MDggMzguNzEwMiAyNi4zMzY2QzM5LjA2MTkgMjkuMTIzOCA0MC42MDE3IDMxLjg1NTQgNDMuNDExMSAzNC42Nzk2QzQzLjQyOTYgMzQuNjk4MSA0NS45NzI0IDM3LjI0MSA0NS45OTEgMzcuMjU5NUM0OC44MTg5IDQwLjA3MjYgNTEuNTQ2OCA0MS42MDg3IDU0LjMzNCA0MS45NjA0QzU3LjYwOTggNDIuMzc0OSA2MC43MTkgNDEuMTM0OSA2My41NzI4IDM4LjI4MTFMNjkuOTEzNCAzMS45NDA2Wk01OS41MzA4IDMyLjkwMjlDNTcuNTkxMyAzNC44NDI1IDU0LjQzMDIgMzYuMjI2OCA1MC43MTQgMzIuNTU4N0M1MC42OTE4IDMyLjUzNjUgNDguMTM0MSAyOS45Nzg4IDQ4LjExMTkgMjkuOTU2NkM0NC40NDM4IDI2LjIzNjYgNDUuODI4MSAyMy4wNzkzIDQ3Ljc2NzcgMjEuMTM5OEw1Mi43NzIgMTYuMTM1NEM1NC43MTE2IDE0LjE5NTkgNTcuODcyNiAxMi44MTE1IDYxLjU4ODggMTYuNDc5NkM2MS42MTEgMTYuNTAxOSA2NC4xNjg3IDE5LjA1OTYgNjQuMTkwOSAxOS4wODE4QzY3Ljg1OTEgMjIuODAxNyA2Ni40NzQ3IDI1Ljk1OSA2NC41MzUyIDI3Ljg5ODZMNTkuNTMwOCAzMi45MDI5WiIgZmlsbD0iI0YwRjBGMCIvPgo8cGF0aCBkPSJNNDYuMjUwMiA0MS41MDg1QzQ2LjI1MDIgNDEuNTA4NSA1MC43NDc0IDM3LjAxMTIgNTEuOTA2IDM1Ljg1MjdDNTMuNjQ1NiAzNC4xMTMgNTMuNjUzMSAzMi4xMzY0IDUxLjg5ODYgMzAuMzgxOUw1MC4yODQ3IDI4Ljc2ODFDNDguNTMwMyAyNy4wMTM2IDQ2LjU1MzcgMjcuMDIxIDQ0LjgxNCAyOC43NjA3QzQzLjY1NTUgMjkuOTE5MyAzOS4xNTgyIDM0LjQxNjUgMzkuMTU4MiAzNC40MTY1TDQ2LjI1MDIgNDEuNTA4NVoiIGZpbGw9IiNFMEUwRTAiLz4KPHBhdGggZD0iTTMzLjgwOTYgMjAuMTg5VjEzLjUyNjRIMzAuNDc4M1YyMC4xODlWMjMuNTE2NkgzMy44MDk2VjIwLjE4OVoiIGZpbGw9IiNFMEUwRTAiLz4KPHBhdGggZD0iTTI1LjE4NTIgMjIuNjcyOUwyMC40NzMzIDE3Ljk2MDlMMTguMTE5MSAyMC4zMTUxTDIyLjgzMTEgMjUuMDI3TDI1LjE4NTIgMjcuMzgxMUwyNy41MzkzIDI1LjAyN0wyNS4xODUyIDIyLjY3MjlaIiBmaWxsPSIjRTBFMEUwIi8+CjxwYXRoIGQ9Ik0yMC4zNDc0IDMwLjMxOTNIMTMuNjg0OFYzMy42NTA2SDIwLjM0NzRIMjMuNjc4N1YzMC4zMTkzSDIwLjM0NzRaIiBmaWxsPSIjRTBFMEUwIi8+CjxwYXRoIGQ9Ik00Ni43OTA1IDYwLjQ0OTVWNjcuMTEyMUg1MC4xMTgxVjYwLjQ0OTVWNTcuMTE4Mkg0Ni43OTA1VjYwLjQ0OTVaIiBmaWxsPSIjRTBFMEUwIi8+CjxwYXRoIGQ9Ik01NS40MTEyIDU3Ljk2Nkw2MC4xMjMyIDYyLjY3OEw2Mi40NzczIDYwLjMyMzlMNTcuNzY1NCA1NS42MTE5TDU1LjQxMTIgNTMuMjU3OEw1My4wNTcxIDU1LjYxMTlMNTUuNDExMiA1Ny45NjZaIiBmaWxsPSIjRTBFMEUwIi8+CjxwYXRoIGQ9Ik02MC4yNDkgNTAuMzE4Nkg2Ni45MTUzVjQ2Ljk4NzNINjAuMjQ5SDU2LjkyMTRWNTAuMzE4Nkg2MC4yNDlaIiBmaWxsPSIjRTBFMEUwIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMzg1XzQ2NzgiPgo8cmVjdCB3aWR0aD0iNjYuNjY2NyIgaGVpZ2h0PSI2Ni42NjY3IiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNyA3KSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=);
 	}
 
 	.woocommerce-marketplace__my-subscriptions__header {

plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/my-subscriptions.tsx

@@ -25,6 +25,7 @@ import { RefreshButton } from './table/actions/refresh-button';
 import Notices from './notices';
 import InstallModal from './table/actions/install-modal';
 import { connectUrl } from '../../utils/functions';
+import PluginInstallNotice from '../woo-update-manager-plugin/plugin-install-notice';
 
 export default function MySubscriptions(): JSX.Element {
 	const { subscriptions, isLoading } = useContext( SubscriptionsContext );
@@ -54,7 +55,10 @@ export default function MySubscriptions(): JSX.Element {
 	);
 
 	const subscriptionsAvailable: Array< Subscription > = subscriptions.filter(
-		( subscription: Subscription ) => ! subscription.subscription_installed
+		( subscription: Subscription ) =>
+			! subscription.subscription_installed &&
+			wccomSettings?.wooUpdateManagerPluginSlug !==
+				subscription.product_slug
 	);
 
 	if ( ! wccomSettings?.isConnected ) {
@@ -67,12 +71,12 @@ export default function MySubscriptions(): JSX.Element {
 				</h2>
 				<p className="woocommerce-marketplace__my-subscriptions__description">
 					{ __(
-						'Connect your account to get updates, manage your subscriptions, and get seamless support. Once connected, your Woo.com subscriptions will appear here.',
+						"Connect your store to Woo.com using the Woo.com Update Manager. Once connected, you'll be able to manage your subscriptions, receive product updates, and access streamlined support from this screen.",
 						'woocommerce'
 					) }
 				</p>
 				<Button href={ connectUrl() } variant="primary">
-					{ __( 'Connect Account', 'woocommerce' ) }
+					{ __( 'Connect your store', 'woocommerce' ) }
 				</Button>
 			</div>
 		);
@@ -84,6 +88,7 @@ export default function MySubscriptions(): JSX.Element {
 			<section className="woocommerce-marketplace__my-subscriptions__notices">
 				<Notices />
 			</section>
+			<PluginInstallNotice />
 			<section className="woocommerce-marketplace__my-subscriptions-section woocommerce-marketplace__my-subscriptions__installed">
 				<header className="woocommerce-marketplace__my-subscriptions__header">
 					<div className="woocommerce-marketplace__my-subscriptions__header-content">

plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/table/actions/update.tsx

@@ -20,9 +20,11 @@ import {
 	updateProduct,
 } from '../../../../utils/functions';
 import { NoticeStatus } from '../../../../contexts/types';
+import InstallWooConnectModal from '../../../woo-update-manager-plugin/install-woo-connect-modal';
 
 interface UpdateProps {
 	subscription: Subscription;
+	wooUpdateManagerActive: boolean;
 }
 
 export default function Update( props: UpdateProps ) {
@@ -34,7 +36,8 @@ export default function Update( props: UpdateProps ) {
 		props.subscription.active &&
 		props.subscription.local &&
 		props.subscription.local.slug &&
-		props.subscription.local.path;
+		props.subscription.local.path &&
+		props.wooUpdateManagerActive;
 
 	function update() {
 		recordEvent( 'marketplace_product_update_button_clicked', {
@@ -156,6 +159,13 @@ export default function Update( props: UpdateProps ) {
 					onClose={ () => setShowModal( false ) }
 				/>
 			);
+		} else if ( ! props.wooUpdateManagerActive ) {
+			return (
+				<InstallWooConnectModal
+					subscription={ props.subscription }
+					onClose={ () => setShowModal( false ) }
+				/>
+			);
 		}
 
 		return null;

plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/table/rows/functions.tsx

@@ -25,6 +25,7 @@ import {
 	subscribeUrl,
 } from '../../../../utils/functions';
 import { MARKETPLACE_COLLABORATION_PATH } from '../../../constants';
+import { getAdminSetting } from '../../../../../utils/admin-settings';
 
 type StatusBadge = {
 	text: string;
@@ -126,12 +127,14 @@ function getStatusBadge( subscription: Subscription ): StatusBadge | false {
 }
 
 function getVersion( subscription: Subscription ): string | JSX.Element {
+	const wccomSettings = getAdminSetting( 'wccomHelper', {} );
+
 	if ( subscription.local.version === subscription.version ) {
 		return <Version span={ subscription.local.version } />;
 	}
 
 	if ( subscription.local.version && subscription.version ) {
-		return <Update subscription={ subscription } />;
+		return <Update subscription={ subscription } wooUpdateManagerActive={wccomSettings?.wooUpdateManagerActive}/>;
 	}
 
 	if ( subscription.version ) {

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

@@ -22,6 +22,7 @@ import { Product, ProductType, SearchResultType } from '../product-list/types';
 import { MARKETPLACE_ITEMS_PER_PAGE } from '../constants';
 import { ADMIN_URL } from '~/utils/admin-settings';
 import { ThemeSwitchWarningModal } from '~/customize-store/intro/warning-modals';
+import PluginInstallNotice from '../woo-update-manager-plugin/plugin-install-notice';
 
 interface ProductsProps {
 	categorySelector?: boolean;
@@ -136,6 +137,7 @@ export default function Products( props: ProductsProps ) {
 
 	return (
 		<div className={ containerClassName }>
+			<PluginInstallNotice />
 			<h2 className={ productListTitleClassName }>
 				{ isLoading ? ' ' : title }
 			</h2>

plugins/woocommerce-admin/client/marketplace/components/woo-update-manager-plugin/install-woo-connect-modal.tsx

@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+import { Button, ButtonGroup, Modal } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import sanitizeHTML from '../../../lib/sanitize-html';
+import { Subscription } from '../my-subscriptions/types';
+import {
+	WOO_CONNECT_PLUGIN_DOWNLOAD_URL,
+	WP_ADMIN_PLUGIN_LIST_URL,
+} from '../constants';
+import { getAdminSetting } from '../../../utils/admin-settings';
+
+interface ConnectProps {
+	subscription: Subscription;
+	onClose: () => void;
+}
+
+export default function InstallWooConnectModal( props: ConnectProps ) {
+	const wccomSettings = getAdminSetting( 'wccomHelper', {} );
+	if ( ! wccomSettings?.wooUpdateManagerInstalled ) {
+		return (
+			<Modal
+				title={ __( 'Access your updates', 'woocommerce' ) }
+				onRequestClose={ props.onClose }
+				focusOnMount={ true }
+				className="woocommerce-marketplace__header-account-modal"
+				style={ { borderRadius: 4 } }
+				overlayClassName="woocommerce-marketplace__header-account-modal-overlay"
+			>
+				<p className="woocommerce-marketplace__header-account-modal-text">
+					<span
+						dangerouslySetInnerHTML={ sanitizeHTML(
+							sprintf(
+								// translators: %s is the product version number (e.g. 1.0.2).
+								__(
+									'Version %s is available. To access this update, please first <b>install the Woo.com Update Manager</b> extension. Alternatively, you can download and install it manually.',
+									'woocommerce'
+								),
+								props.subscription.version
+							)
+						) }
+					/>
+				</p>
+				<ButtonGroup className="woocommerce-marketplace__header-account-modal-button-group">
+					<Button
+						href={ WOO_CONNECT_PLUGIN_DOWNLOAD_URL }
+						variant="secondary"
+					>
+						{ __( 'Download', 'woocommerce' ) }
+					</Button>
+					<Button
+						href={ wccomSettings?.wooUpdateManagerInstallUrl }
+						variant="primary"
+					>
+						{ __( 'Install', 'woocommerce' ) }
+					</Button>
+				</ButtonGroup>
+			</Modal>
+		);
+	}
+
+	if ( ! wccomSettings?.wooUpdateManagerActive ) {
+		return (
+			<Modal
+				title={ __( 'Access your updates', 'woocommerce' ) }
+				onRequestClose={ props.onClose }
+				focusOnMount={ true }
+				className="woocommerce-marketplace__header-account-modal"
+				style={ { borderRadius: 4 } }
+				overlayClassName="woocommerce-marketplace__header-account-modal-overlay"
+			>
+				<p className="woocommerce-marketplace__header-account-modal-text">
+					<span
+						dangerouslySetInnerHTML={ sanitizeHTML(
+							sprintf(
+								// translators: %s is the product version number (e.g. 1.0.2).
+								__(
+									'Version %s is available. To access this update, please <b>activate the Woo.com Update Manager</b> extension.',
+									'woocommerce'
+								),
+								props.subscription.version
+							)
+						) }
+					/>
+				</p>
+				<ButtonGroup className="woocommerce-marketplace__header-account-modal-button-group">
+					<Button onClick={ props.onClose } variant="link">
+						{ __( 'Cancel', 'woocommerce' ) }
+					</Button>
+					<Button href={ WP_ADMIN_PLUGIN_LIST_URL } variant="primary">
+						{ __( 'Activate', 'woocommerce' ) }
+					</Button>
+				</ButtonGroup>
+			</Modal>
+		);
+	}
+
+	return null;
+}

plugins/woocommerce-admin/client/marketplace/components/woo-update-manager-plugin/plugin-install-notice.tsx

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { Button, Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import sanitizeHTML from '../../../lib/sanitize-html';
+import { getAdminSetting } from '../../../utils/admin-settings';
+import {
+	WP_ADMIN_PLUGIN_LIST_URL,
+	WOO_CONNECT_PLUGIN_DOWNLOAD_URL,
+} from '../constants';
+import './woo-update-manager-plugin.scss';
+
+export default function PluginInstallNotice() {
+	const wccomSettings = getAdminSetting( 'wccomHelper', {} );
+	if ( ! wccomSettings?.isConnected ) {
+		return null;
+	}
+
+	if (
+		! wccomSettings?.wooUpdateManagerActive &&
+		! wccomSettings?.wooUpdateManagerInstalled
+	) {
+		return (
+			<section className="woocommerce-marketplace__woo-update-manager-plugin__notices">
+				<Notice status="error" isDismissible={ false }>
+					<span
+						dangerouslySetInnerHTML={ sanitizeHTML(
+							__(
+								'Please install the <b>Woo.com Update Manager</b> to continue receiving the updates and streamlined support included in your Woo.com subscriptions.<br/>Alternatively, you can download and install it manually.',
+								'woocommerce'
+							)
+						) }
+					></span>
+					<div className="components-notice__buttons">
+						<Button
+							href={ wccomSettings?.wooUpdateManagerInstallUrl }
+							variant="secondary"
+						>
+							{ __( 'Install', 'woocommerce' ) }
+						</Button>
+						<Button
+							href={ WOO_CONNECT_PLUGIN_DOWNLOAD_URL }
+							variant="link"
+						>
+							{ __( 'Download', 'woocommerce' ) }
+						</Button>
+					</div>
+				</Notice>
+			</section>
+		);
+	} else if (
+		wccomSettings?.wooUpdateManagerInstalled &&
+		! wccomSettings?.wooUpdateManagerActive
+	) {
+		return (
+			<section className="woocommerce-marketplace__woo-update-manager-plugin__notices">
+				<Notice status="error" isDismissible={ false }>
+					<span
+						dangerouslySetInnerHTML={ sanitizeHTML(
+							__(
+								'Activate the <b>Woo.com Update Manager</b> to continue receiving the updates and streamlined support included in your Woo.com subscriptions.',
+								'woocommerce'
+							)
+						) }
+					></span>
+					<div className="components-notice__buttons">
+						<Button
+							href={ WP_ADMIN_PLUGIN_LIST_URL }
+							variant="secondary"
+						>
+							{ __( 'Activate', 'woocommerce' ) }
+						</Button>
+					</div>
+				</Notice>
+			</section>
+		);
+	}
+
+	return null;
+}