Add "Shared with you" badge to Extensions > My Subscriptions list as …

…applicable (#46229)

* Add 'shared with you' badge

* Improve spacing where multiple badges span multiple lines

* Decrease font size of badges per new designs

* Include 'Manage on Woo.com' only for non-shared subscriptions

* Made TypeScript happier

* Add 'shared with you' badge

* Improve spacing where multiple badges span multiple lines

* Decrease font size of badges per new designs

* Include 'Manage on Woo.com' only for non-shared subscriptions

* Made TypeScript happier

* Add changefile(s) from automation for the following project(s): woocommerce

* Addressing linter errors.

* Allow unusually-long email addresses of sharers to wrap

* Switch wordWrap for overflowWrap

Modern browesers interpret the former as an alias of the latter, including allowing the use of 'anywhere'. But the current version of https://www.npmjs.com/package/csstype only recognises 'anywhere' as valid for overflowWrap. Switching it prevents compilation errors, still exhibits the correct behavior.

* Prettier linting

* Update plugins/woocommerce/changelog/46229-add-wccom19063-in-app-shared-by-badge

Co-authored-by: And Finally <andfinally@users.noreply.github.com>

* Add changefile(s) from automation for the following project(s): woocommerce

* Use pointer as cursor for status popovers

* Don't focus-within the status badge popover on load (prevents ugly link focus issue)

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: And Finally <andfinally@users.noreply.github.com>

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

@@ -16,6 +16,9 @@ export const MARKETPLACE_CART_PATH = MARKETPLACE_HOST + '/cart/';
 export const MARKETPLACE_COLLABORATION_PATH =
 	MARKETPLACE_HOST +
 	'/document/managing-woocommerce-com-subscriptions/#transfer-a-woocommerce-com-subscription';
+export const MARKETPLACE_SHARING_PATH =
+	MARKETPLACE_HOST +
+	'/document/managing-woocommerce-com-subscriptions/#share-a-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/my-subscriptions/my-subscriptions.scss

@@ -160,10 +160,13 @@
 	align-items: center;
 	border-radius: 2px;
 	border: none;
+	cursor: pointer;
 	padding: 2px $grid-unit-10;
 	margin-left: $grid-unit-15;
+	margin-bottom: $grid-unit-05;
 	text-align: left;
 	white-space: nowrap;
+	font-size: 12px;
 
 	&--error {
 		color: var(--wp-red-red-70, #8a2424);

plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/table/rows/actions-dropdown-menu.tsx

@@ -16,6 +16,16 @@ export default function ActionsDropdownMenu( props: {
 } ) {
 	const controls = [
 		{
+			title: __( 'Manage in Plugins', 'woocommerce' ),
+			icon: <></>,
+			onClick: () => {
+				window.location.href = ADMIN_URL + 'plugins.php';
+			},
+		},
+	];
+
+	if ( ! props.subscription.is_shared ) {
+		controls.unshift( {
 			title: __( 'Manage on WooCommerce.com', 'woocommerce' ),
 			icon: <></>,
 			onClick: () => {
@@ -24,15 +34,8 @@ export default function ActionsDropdownMenu( props: {
 					'_blank'
 				);
 			},
-		},
-		{
-			title: __( 'Manage in Plugins', 'woocommerce' ),
-			icon: <></>,
-			onClick: () => {
-				window.location.href = ADMIN_URL + 'plugins.php';
-			},
-		},
-	];
+		} );
+	}
 
 	if ( props.subscription.documentation_url ) {
 		controls.unshift( {

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

@@ -24,7 +24,10 @@ import {
 	renewUrl,
 	subscribeUrl,
 } from '../../../../utils/functions';
-import { MARKETPLACE_COLLABORATION_PATH } from '../../../constants';
+import {
+	MARKETPLACE_COLLABORATION_PATH,
+	MARKETPLACE_SHARING_PATH,
+} from '../../../constants';
 import { getAdminSetting } from '../../../../../utils/admin-settings';
 
 type StatusBadge = {
@@ -209,6 +212,39 @@ export function nameAndStatus( subscription: Subscription ): TableRow {
 						explanation={ statusBadge.explanation ?? '' }
 					/>
 				) }
+				{ subscription.is_shared && (
+					<StatusPopover
+						text={ __( 'Shared with you', 'woocommerce' ) }
+						level={ StatusLevel.Info }
+						explanation={ createInterpolateElement(
+							sprintf(
+								/* translators: %s is the email address of the user who shared the subscription. */
+								__(
+									'This subscription was shared by <email>%s</email>. <link>Learn more</link>.',
+									'woocommerce'
+								),
+								subscription.owner_email
+							),
+							{
+								email: (
+									<strong
+										style={ { overflowWrap: 'anywhere' } }
+									>
+										email
+									</strong>
+								),
+								link: (
+									<a
+										href={ MARKETPLACE_SHARING_PATH }
+										rel="nofollow noopener noreferrer"
+									>
+										Learn more
+									</a>
+								),
+							}
+						) }
+					/>
+				) }
 			</span>
 		</div>
 	);

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

@@ -42,6 +42,7 @@ export default function StatusPopover( props: {
 				<Popover
 					className="woocommerce-marketplace__my-subscriptions__popover"
 					position="top center"
+					focusOnMount={ false }
 				>
 					{ props.explanation }
 				</Popover>

plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/types.ts

@@ -31,6 +31,8 @@ export type Subscription = {
 	subscription_installed: boolean;
 	subscription_available: boolean;
 	is_installable: boolean;
+	is_shared: boolean;
+	owner_email: boolean;
 };
 
 export interface SubscriptionLocal {
@@ -55,4 +57,5 @@ export interface SubscriptionShare {
 export enum StatusLevel {
 	Warning = 'warning',
 	Error = 'error',
+	Info = 'info',
 }

plugins/woocommerce/changelog/46229-add-wccom19063-in-app-shared-by-badge

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+For shared subscriptions, My Subscriptions now shows "Shared with you" and the email address of the person who shared it with you.