diff --git a/plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/my-subscriptions.scss b/plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/my-subscriptions.scss index d32f26fcc29..610b41c729c 100644 --- a/plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/my-subscriptions.scss +++ b/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( - 100vw - (2 * #{$grid-unit-40}) - $admin-menu-width-collapsed - ); + max-width: calc(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( - --wp-components-color-accent, - var(--wp-admin-theme-color, #3858e9) - ); + color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); } .woocommerce-marketplace__my-subscriptions--connect { diff --git a/plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/table/rows/functions.tsx b/plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/table/rows/functions.tsx index faf32573a8e..c234f49ebed 100644 --- a/plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/table/rows/functions.tsx +++ b/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 = ; @@ -163,12 +176,23 @@ export function nameAndStatus( subscription: Subscription ): TableRow { const displayElement = (
- - { iconElement } - - + + + { iconElement } + + + { subscription.product_name } - + { statusBadge && ( { + 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 {

{ recordTracksEvent( diff --git a/plugins/woocommerce/src/Internal/Admin/Marketplace.php b/plugins/woocommerce/src/Internal/Admin/Marketplace.php index 172ef3dbb8f..0a021822abf 100644 --- a/plugins/woocommerce/src/Internal/Admin/Marketplace.php +++ b/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() { + ?> + +