Add via field to subscribers table, with sorting and filtering.

client/my-sites/subscribers/components/subscriber-data-views/subscriber-data-views.tsx

@@ -46,15 +46,19 @@ const defaultView: View = {
 		styles: {
 			media: { width: '60px' },
 			name: { width: '55%', minWidth: '195px' },
-			plan: { width: '25%' },
-			date_subscribed: { width: '25%' },
+			plan: { width: '15%' },
+			is_email_subscriber: { width: '15%' },
+			date_subscribed: { width: '15%' },
 		},
 	},
-	fields: [ 'name', 'plan', 'date_subscribed' ],
+	fields: [ 'name', 'plan', 'is_email_subscriber', 'date_subscribed' ],
 };
 
 const getSubscriberId = ( subscriber: Subscriber ) => subscriber.subscription_id.toString();
 
+const getSubscriptionSourceLabel = ( isEmailSubscriber: boolean ) =>
+	isEmailSubscriber ? translate( 'Email' ) : translate( 'Reader' );
+
 const SubscriberDataViews = ( {
 	siteId = undefined,
 	isUnverified = false,
@@ -193,19 +197,40 @@ const SubscriberDataViews = ( {
 			},
 			{
 				id: 'plan',
-				label: translate( 'Subscription type' ),
+				label: translate( 'Type' ),
 				getValue: ( { item }: { item: Subscriber } ) =>
 					item.plans?.length ? SubscribersFilterBy.Paid : SubscribersFilterBy.Free,
 				render: ( { item }: { item: Subscriber } ) => <SubscriptionTypeCell subscriber={ item } />,
 				elements: [
-					{ label: 'Paid', value: SubscribersFilterBy.Paid },
-					{ label: 'Free', value: SubscribersFilterBy.Free },
+					{ label: translate( 'Paid' ), value: SubscribersFilterBy.Paid },
+					{ label: translate( 'Free' ), value: SubscribersFilterBy.Free },
 				],
 				filterBy: {
 					operators: [ 'is' as Operator ],
 				},
+				enableHiding: false,
 				enableSorting: true,
+			},
+			{
+				id: 'is_email_subscriber',
+				label: translate( 'Via' ),
+				getValue: ( { item }: { item: Subscriber } ) =>
+					getSubscriptionSourceLabel( item.is_email_subscriber ),
+				render: ( { item }: { item: Subscriber } ) => (
+					<div>{ getSubscriptionSourceLabel( item.is_email_subscriber ) }</div>
+				),
+				elements: [
+					{ label: getSubscriptionSourceLabel( true ), value: SubscribersFilterBy.EmailSubscriber },
+					{
+						label: getSubscriptionSourceLabel( false ),
+						value: SubscribersFilterBy.ReaderSubscriber,
+					},
+				],
+				filterBy: {
+					operators: [ 'is' as Operator ],
+				},
 				enableHiding: false,
+				enableSorting: true,
 			},
 			{
 				id: 'date_subscribed',

client/my-sites/subscribers/constants.ts

@@ -2,6 +2,7 @@ export enum SubscribersSortBy {
 	Name = 'name',
 	DateSubscribed = 'date_subscribed',
 	Plan = 'plan',
+	Via = 'is_email_subscriber',
 }
 
 export enum SubscribersFilterBy {
@@ -10,6 +11,8 @@ export enum SubscribersFilterBy {
 	WPCOM = 'wpcom',
 	Free = 'free',
 	Paid = 'paid',
+	EmailSubscriber = 'email_subscriber',
+	ReaderSubscriber = 'reader_subscriber',
 }
 
 export const DEFAULT_PER_PAGE = 10;

client/my-sites/subscribers/types/index.ts

@@ -28,6 +28,7 @@ export type Subscriber = {
 	user_id: number;
 	subscription_id: number;
 	date_subscribed: string;
+	is_email_subscriber: boolean;
 	email_address: string;
 	avatar: string;
 	display_name: string;