Merge branch 'feature/marketplace-subscriptions' into fix/my-subscriptions-scrolling-chromium

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

@@ -4,9 +4,7 @@
 @mixin content-width {
 	max-width: calc(100vw - (2 * #{$grid-unit-20}));
 	@media screen and (min-width: 783px) {
-		max-width: calc(
+		max-width: calc(100vw - (2 * #{$grid-unit-40}) - $admin-menu-width-collapsed);
-			100vw - (2 * #{$grid-unit-40}) - $admin-menu-width-collapsed
-		);
 	}
 	@media screen and (min-width: 960px) {
 		max-width: calc(100vw - (2 * #{$grid-unit-40}) - $admin-menu-width);
@@ -132,12 +130,13 @@
 
 	display: flex;
 	align-items: center;
-	color: $gray-900;
 
 	&-name {
 		margin-left: $grid-unit-15;
 		line-height: 18px;
 		font-weight: 600;
+		color: $gray-900;
+		text-decoration: none;
 	}
 
 	&-icon img {
@@ -148,6 +147,7 @@
 	&-icon {
 		width: $product-icon-size;
 		height: $product-icon-size;
+
 		svg {
 			border-radius: 4px;
 			padding: $grid-unit-10;
@@ -159,6 +159,16 @@
 	}
 }
 
+.woocommerce-table__item {
+	.woocommerce-marketplace__my-subscriptions__product-name {
+		&:active,
+		&:hover,
+		&:visited {
+			color: $gray-900;
+		}
+	}
+}
+
 .woocommerce-marketplace__my-subscriptions__product-status {
 	display: flex;
 	align-items: center;
@@ -241,12 +251,10 @@
 	text-decoration: none;
 	padding: 6px 12px;
 }
+
 .woocommerce-marketplace__my-subscriptions
 .components-button.is-secondary:hover:not(:disabled) {
-	color: var(
+	color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-		--wp-components-color-accent,
-		var(--wp-admin-theme-color, #3858e9)
-	);
 }
 
 .woocommerce-marketplace__my-subscriptions--connect {

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

@@ -19,7 +19,11 @@ import Update from '../actions/update';
 import StatusPopover from './status-popover';
 import ActionsDropdownMenu from './actions-dropdown-menu';
 import Version from './version';
-import { renewUrl, subscribeUrl } from '../../../../utils/functions';
+import {
+	appendURLParams,
+	renewUrl,
+	subscribeUrl,
+} from '../../../../utils/functions';
 import { MARKETPLACE_COLLABORATION_PATH } from '../../../constants';
 
 type StatusBadge = {
@@ -141,6 +145,15 @@ function getVersion( subscription: Subscription ): string | JSX.Element {
 	return '';
 }
 
+function appendUTMParams( url: string ) {
+	return appendURLParams( url, [
+		[ 'utm_source', 'subscriptionsscreen' ],
+		[ 'utm_medium', 'product' ],
+		[ 'utm_campaign', 'wcaddons' ],
+		[ 'utm_content', 'product-name' ],
+	] );
+}
+
 export function nameAndStatus( subscription: Subscription ): TableRow {
 	// This is the fallback icon element with products without
 	let iconElement = <Icon icon={ plugins } size={ 40 } />;
@@ -163,12 +176,23 @@ export function nameAndStatus( subscription: Subscription ): TableRow {
 
 	const displayElement = (
 		<div className="woocommerce-marketplace__my-subscriptions__product">
-			<span className="woocommerce-marketplace__my-subscriptions__product-icon">
+			<a
-				{ iconElement }
+				href={ appendUTMParams( subscription.product_url ) }
-			</span>
+				target="_blank"
-			<span className="woocommerce-marketplace__my-subscriptions__product-name">
+				rel="noreferrer"
+			>
+				<span className="woocommerce-marketplace__my-subscriptions__product-icon">
+					{ iconElement }
+				</span>
+			</a>
+			<a
+				href={ appendUTMParams( subscription.product_url ) }
+				className="woocommerce-marketplace__my-subscriptions__product-name"
+				target="_blank"
+				rel="noreferrer"
+			>
 				{ subscription.product_name }
-			</span>
+			</a>
 			<span className="woocommerce-marketplace__my-subscriptions__product-statuses">
 				{ statusBadge && (
 					<StatusPopover

plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx

@@ -5,12 +5,14 @@ import { __ } from '@wordpress/i18n';
 import { Card } from '@wordpress/components';
 import classnames from 'classnames';
 import { ExtraProperties, queueRecordEvent } from '@woocommerce/tracks';
+import { useQuery } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
  */
 import './product-card.scss';
 import { Product, ProductTracksData, ProductType } from '../product-list/types';
+import { appendURLParams } from '../../utils/functions';
 
 export interface ProductCardProps {
 	type?: string;
@@ -21,6 +23,7 @@ export interface ProductCardProps {
 
 function ProductCard( props: ProductCardProps ): JSX.Element {
 	const { isLoading, type } = props;
+	const query = useQuery();
 	// Get the product if provided; if not provided, render a skeleton loader
 	const product = props.product ?? {
 		title: '',
@@ -85,6 +88,15 @@ function ProductCard( props: ProductCardProps ): JSX.Element {
 		);
 	}
 
+	const productUrl = () => {
+		if ( query.ref ) {
+			return appendURLParams( product.url, [
+				[ 'utm_content', query.ref ],
+			] );
+		}
+		return product.url;
+	};
+
 	const classNames = classnames(
 		'woocommerce-marketplace__product-card',
 		`woocommerce-marketplace__product-card--${ type }`,
@@ -127,7 +139,7 @@ function ProductCard( props: ProductCardProps ): JSX.Element {
 							<h2 className="woocommerce-marketplace__product-card__title">
 								<a
 									className="woocommerce-marketplace__product-card__link"
-									href={ product.url }
+									href={ productUrl() }
 									rel="noopener noreferrer"
 									onClick={ () => {
 										recordTracksEvent(

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

@@ -12,6 +12,8 @@ use Automattic\WooCommerce\Utilities\FeaturesUtil;
  */
 class Marketplace {
 
+	const MARKETPLACE_TAB_SLUG = 'woo';
+
 	/**
 	 * Class initialization, to be executed when the class is resolved by the container.
 	 */
@@ -19,6 +21,11 @@ class Marketplace {
 		if ( FeaturesUtil::feature_is_enabled( 'marketplace' ) ) {
 			add_action( 'admin_menu', array( $this, 'register_pages' ), 70 );
 			add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
+
+			// Add a Woo Marketplace link to the plugin install action links.
+			add_filter( 'install_plugins_tabs', array( $this, 'add_woo_plugin_install_action_link' ) );
+			add_action( 'install_plugins_pre_woo', array( $this, 'maybe_open_woo_tab' ) );
+			add_action( 'admin_print_styles-plugin-install.php', array( $this, 'add_plugins_page_styles' ) );
 		}
 	}
 
@@ -71,4 +78,59 @@ class Marketplace {
 		// Enqueue WordPress updates script to enable plugin and theme installs and updates.
 		wp_enqueue_script( 'updates' );
 	}
+
+	/**
+	 * Add a Woo Marketplace link to the plugin install action links.
+	 * @param array $tabs Plugins list tabs.
+	 * @return array
+	 */
+	public function add_woo_plugin_install_action_link( $tabs ) {
+		$tabs[self::MARKETPLACE_TAB_SLUG] = 'Woo';
+		return $tabs;
+	}
+
+	/**
+	 * Open the Woo tab when the user clicks on the Woo link in the plugin installer.
+	 */
+	public function maybe_open_woo_tab() {
+		if ( ! isset( $_GET['tab'] ) || self::MARKETPLACE_TAB_SLUG !== $_GET['tab'] ) {
+			return;
+		}
+
+		$woo_url = add_query_arg(
+			array(
+				'page' => 'wc-admin',
+				'path' => '/extensions',
+				'tab'  => 'extensions',
+				'ref'  => 'plugins',
+			),
+			admin_url( 'admin.php' )
+		);
+
+		wp_safe_redirect( $woo_url );
+		exit;
+	}
+
+	/**
+	 * Add styles to the plugin install page.
+	 */
+	public function add_plugins_page_styles() {
+		?>
+		<style>
+			.plugin-install-woo > a::after {
+				content: "";
+				display: inline-block;
+				background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.33321 3H12.9999V7.66667H11.9999V4.70711L8.02009 8.68689L7.31299 7.97978L11.2928 4H8.33321V3Z' fill='%23646970'/%3E%3Cpath d='M6.33333 4.1665H4.33333C3.8731 4.1665 3.5 4.5396 3.5 4.99984V11.6665C3.5 12.1267 3.8731 12.4998 4.33333 12.4998H11C11.4602 12.4998 11.8333 12.1267 11.8333 11.6665V9.6665' stroke='%23646970'/%3E%3C/svg%3E%0A");
+				width: 16px;
+				height: 16px;
+				background-repeat: no-repeat;
+				vertical-align: text-top;
+				margin-left: 2px;
+			}
+			.plugin-install-woo:hover > a::after {
+				background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.33321 3H12.9999V7.66667H11.9999V4.70711L8.02009 8.68689L7.31299 7.97978L11.2928 4H8.33321V3Z' fill='%23135E96'/%3E%3Cpath d='M6.33333 4.1665H4.33333C3.8731 4.1665 3.5 4.5396 3.5 4.99984V11.6665C3.5 12.1267 3.8731 12.4998 4.33333 12.4998H11C11.4602 12.4998 11.8333 12.1267 11.8333 11.6665V9.6665' stroke='%23135E96'/%3E%3C/svg%3E%0A");
+			}
+		</style>
+		<?php
+	}
 }