subscriptions management - add unsusbscribe cell (#103374)

Author: Addison-Stavlo

client/landing/subscriptions/components/site-subscriptions-list/site-subscription-row.tsx

@@ -1,7 +1,7 @@
 import { Gridicon, ExternalLink, TimeSince } from '@automattic/components';
 import { Reader, SubscriptionManager } from '@automattic/data-stores';
 import { localizeUrl } from '@automattic/i18n-utils';
-import { __experimentalHStack as HStack } from '@wordpress/components';
+import { __experimentalHStack as HStack, Button } from '@wordpress/components';
 import { useTranslate } from 'i18n-calypso';
 import { useMemo, useRef } from 'react';
 import { useDispatch } from 'react-redux';
@@ -163,6 +163,39 @@ const SiteSubscriptionRow = ( {
 		);
 	};
 
+	const onUnsubscribe = () => {
+		unsubscribeInProgress.current = true;
+		unsubscribeCallback();
+		unsubscribe(
+			{
+				blog_id,
+				subscriptionId: Number( subscriptionId ),
+				url,
+				doNotInvalidateSiteSubscriptions: true,
+			},
+			{
+				onSuccess: () => {
+					unsubscribeInProgress.current = false;
+
+					if ( resubscribePending.current ) {
+						resubscribePending.current = false;
+						resubscribe( {
+							blog_id,
+							url,
+							doNotInvalidateSiteSubscriptions: true,
+							resubscribed: true,
+						} );
+						recordSiteResubscribed( {
+							blog_id,
+							url,
+							source: SOURCE_SUBSCRIPTIONS_UNSUBSCRIBED_NOTICE,
+						} );
+					}
+				},
+			}
+		);
+	};
+
 	const { isReaderPortal, isSubscriptionsPortal } = useSubscriptionManagerContext();
 
 	const siteTitleUrl = useMemo( () => {
@@ -320,6 +353,11 @@ const SiteSubscriptionRow = ( {
 			<span className="email-frequency-cell" role="cell">
 				{ deliveryFrequencyLabel }
 			</span>
+			<span className="unsubscribe-action-cell" role="cell">
+				<Button variant="secondary" onClick={ onUnsubscribe }>
+					{ translate( 'Unsubscribe' ) }
+				</Button>
+			</span>
 			<span className="actions-cell" role="cell">
 				<SiteSettingsPopover
 					// NotifyMeOfNewPosts
@@ -341,38 +379,7 @@ const SiteSubscriptionRow = ( {
 					emailMeNewComments={ !! delivery_methods.email?.send_comments }
 					onEmailMeNewCommentsChange={ handleEmailMeNewCommentsChange }
 					updatingEmailMeNewComments={ updatingEmailMeNewComments }
-					onUnsubscribe={ () => {
-						unsubscribeInProgress.current = true;
-						unsubscribeCallback();
-						unsubscribe(
-							{
-								blog_id,
-								subscriptionId: Number( subscriptionId ),
-								url,
-								doNotInvalidateSiteSubscriptions: true,
-							},
-							{
-								onSuccess: () => {
-									unsubscribeInProgress.current = false;
-
-									if ( resubscribePending.current ) {
-										resubscribePending.current = false;
-										resubscribe( {
-											blog_id,
-											url,
-											doNotInvalidateSiteSubscriptions: true,
-											resubscribed: true,
-										} );
-										recordSiteResubscribed( {
-											blog_id,
-											url,
-											source: SOURCE_SUBSCRIPTIONS_UNSUBSCRIBED_NOTICE,
-										} );
-									}
-								},
-							}
-						);
-					} }
+					onUnsubscribe={ onUnsubscribe }
 					unsubscribing={ unsubscribing }
 					blogId={ sanitizedBlogId }
 					feedId={ Number( feed_id ) }

client/landing/subscriptions/components/site-subscriptions-list/site-subscriptions-list.tsx

@@ -85,6 +85,9 @@ const SiteSubscriptionsList: React.FC< SiteSubscriptionsListProps > = ( {
 				<span className="email-frequency-cell" role="columnheader">
 					{ translate( 'Email frequency' ) }
 				</span>
+				<span className="unsubscribe-action-cell" role="columnheader">
+					{ translate( 'Action' ) }
+				</span>
 				<span className="actions-cell" role="columnheader" />
 			</HStack>
 			{ subscriptions.map( ( siteSubscription ) => (

client/landing/subscriptions/components/site-subscriptions-list/styles/site-subscriptions-list.scss

@@ -79,10 +79,12 @@
 		.email-frequency-cell,
 		.date-cell,
 		.new-posts-cell,
-		.new-comments-cell {
+		.new-comments-cell,
+		.unsubscribe-action-cell {
 			@extend %site-subscriptions-list-default-text;
 		}
 
+
 		.new-posts-cell,
 		.new-comments-cell {
 			.green,
@@ -103,6 +105,7 @@
 		.actions-cell {
 			flex-basis: 36px;
 			flex-grow: initial;
+			margin: 0 5px;
 
 			.gridicon {
 				fill: $studio-gray-50;
@@ -117,12 +120,7 @@
 	}
 
 	@media (max-width: $break-large) {
-		.new-posts-cell {
-			display: none;
-		}
-	}
-
-	@media (max-width: $break-medium) {
+		.new-posts-cell,
 		.email-frequency-cell {
 			display: none;
 		}