diff --git a/client/my-sites/subscribers/components/subscriber-data-views/subscriber-data-views.tsx b/client/my-sites/subscribers/components/subscriber-data-views/subscriber-data-views.tsx
index f1ca920e4958b..107553b74d578 100644
--- a/client/my-sites/subscribers/components/subscriber-data-views/subscriber-data-views.tsx
+++ b/client/my-sites/subscribers/components/subscriber-data-views/subscriber-data-views.tsx
@@ -7,6 +7,7 @@ import { useMemo, useState, useCallback, useEffect } from '@wordpress/element';
import { hasTranslation } from '@wordpress/i18n';
import { translate } from 'i18n-calypso';
import TimeSince from 'calypso/components/time-since';
+import { useSubscribedNewsletterCategories } from 'calypso/data/newsletter-categories';
import { EmptyListView } from 'calypso/my-sites/subscribers/components/empty-list-view';
import { SubscriberLaunchpad } from 'calypso/my-sites/subscribers/components/subscriber-launchpad';
import { useSubscriptionPlans, useUnsubscribeModal } from 'calypso/my-sites/subscribers/hooks';
@@ -16,14 +17,18 @@ import { getCouponsAndGiftsEnabledForSiteId } from 'calypso/state/memberships/se
import isAtomicSite from 'calypso/state/selectors/is-site-automated-transfer';
import { isSimpleSite } from 'calypso/state/sites/selectors';
import { SubscribersFilterBy, SubscribersSortBy } from '../../constants';
-import { useSubscribersQuery, useSubscriberCountQuery } from '../../queries';
+import {
+ useSubscribersQuery,
+ useSubscriberCountQuery,
+ useSubscriberDetailsQuery,
+} from '../../queries';
import { SubscriberDetails } from '../subscriber-details';
import { SubscribersHeader } from '../subscribers-header';
import { UnsubscribeModal } from '../unsubscribe-modal';
import './style.scss';
type SubscriberDataViewsProps = {
- siteId: number | undefined;
+ siteId: number | null;
isUnverified?: boolean;
isStagingSite?: boolean;
onGiftSubscription: ( subscriber: Subscriber ) => void;
@@ -62,7 +67,7 @@ const defaultView: View = {
};
const SubscriberDataViews = ( {
- siteId = undefined,
+ siteId = null,
isUnverified = false,
isStagingSite = false,
onGiftSubscription,
@@ -102,6 +107,19 @@ const SubscriberDataViews = ( {
limitData: true,
} );
+ const { data: subscriber, isLoading: isLoadingDetails } = useSubscriberDetailsQuery(
+ siteId ?? null,
+ selectedSubscriber?.subscription_id,
+ selectedSubscriber?.user_id
+ );
+
+ const { data: subscribedNewsletterCategoriesData, isLoading: isLoadingNewsletterCategories } =
+ useSubscribedNewsletterCategories( {
+ siteId: siteId as number,
+ subscriptionId: selectedSubscriber?.subscription_id,
+ userId: selectedSubscriber?.user_id,
+ } );
+
const { data: subscribersTotals } = useSubscriberCountQuery( siteId ?? null );
const grandTotal = subscribersTotals?.email_subscribers ?? 0;
const {
@@ -379,17 +397,23 @@ const SubscriberDataViews = ( {
/>
) }
- { selectedSubscriber && siteId && (
-
- setSelectedSubscriber( null ) }
- onUnsubscribe={ handleUnsubscribe }
- />
-
- ) }
+ { selectedSubscriber &&
+ siteId &&
+ ! isLoadingNewsletterCategories &&
+ ! isLoadingDetails &&
+ subscriber && (
+
+ setSelectedSubscriber( null ) }
+ onUnsubscribe={ handleUnsubscribe }
+ newsletterCategoriesEnabled={ subscribedNewsletterCategoriesData?.enabled }
+ newsletterCategories={ subscribedNewsletterCategoriesData?.newsletterCategories }
+ />
+
+ ) }