Subscribers: Show categories on subscribers details (#99494)

* Show categories on subscribers details.

* Fix type error.

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 = ( {
 					/>
 				) }
 			</section>
-			{ selectedSubscriber && siteId && (
-				<section className="subscriber-data-views__details">
-					<SubscriberDetails
-						subscriber={ selectedSubscriber }
-						siteId={ siteId }
-						subscriptionId={ selectedSubscriber.subscription_id }
-						onClose={ () => setSelectedSubscriber( null ) }
-						onUnsubscribe={ handleUnsubscribe }
-					/>
-				</section>
-			) }
+			{ selectedSubscriber &&
+				siteId &&
+				! isLoadingNewsletterCategories &&
+				! isLoadingDetails &&
+				subscriber && (
+					<section className="subscriber-data-views__details">
+						<SubscriberDetails
+							subscriber={ subscriber }
+							siteId={ siteId }
+							subscriptionId={ selectedSubscriber.subscription_id }
+							onClose={ () => setSelectedSubscriber( null ) }
+							onUnsubscribe={ handleUnsubscribe }
+							newsletterCategoriesEnabled={ subscribedNewsletterCategoriesData?.enabled }
+							newsletterCategories={ subscribedNewsletterCategoriesData?.newsletterCategories }
+						/>
+					</section>
+				) }
 			<UnsubscribeModal
 				subscriber={ currentSubscriber }
 				onCancel={ resetSubscriber }

client/my-sites/subscribers/main.tsx

@@ -207,7 +207,7 @@ const SubscribersPage = ( {
 					{ isEnabled( 'subscribers-dataviews' ) ? (
 						// Your new dataviews component
 						<SubscriberDataViews
-							siteId={ selectedSite?.ID }
+							siteId={ selectedSite?.ID ?? null }
 							onGiftSubscription={ onGiftSubscription }
 							isUnverified={ isUnverified }
 							isStagingSite={ isStagingSite }