Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
And Finally 2023-11-22 13:39:23 +00:00 committed by GitHub
parent 05d8169ec3 3f6fd2c273
commit 51321ee586
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 121 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {

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

@ -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">
<a
href={ appendUTMParams( subscription.product_url ) }
target="_blank"
rel="noreferrer"
>
<span className="woocommerce-marketplace__my-subscriptions__product-icon">
{ iconElement }
</span>
<span className="woocommerce-marketplace__my-subscriptions__product-name">
</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

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

@ -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(

62
plugins/woocommerce/src/Internal/Admin/Marketplace.php
View File

@ -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
}
}