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 } + /> +
+ ) }