Help Center: Refactor Zendesk Messaging hooks (#77499)

This is a much needed follow-up to #77024.
This re-organizes the code for Zendesk Messaging so that it can be interacted with using clearly defined hooks.

- Split out the code that was concentrated in Help Center into easier to re-use hooks.
- Introduce a usePresalesChat that uses those to simplify loading presales chat.

client/components/jetpack/portal-nav/index.tsx

@@ -6,6 +6,7 @@ import SectionNav from 'calypso/components/section-nav';
 import NavItem from 'calypso/components/section-nav/item';
 import NavTabs from 'calypso/components/section-nav/tabs';
 import { dashboardPath } from 'calypso/lib/jetpack/paths';
+import { usePresalesChat } from 'calypso/lib/presales-chat';
 import { isSectionNameEnabled } from 'calypso/sections-filter';
 import { useSelector, useDispatch } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
@@ -18,7 +19,6 @@ import { isPartnerPortal } from 'calypso/state/partner-portal/selectors';
 import getCurrentRoute from 'calypso/state/selectors/get-current-route';
 import getPrimarySiteIsJetpack from 'calypso/state/selectors/get-primary-site-is-jetpack';
 import { getSelectedSiteId, getSelectedSiteSlug } from 'calypso/state/ui/selectors';
-import { ZendeskJetpackChat } from '../jetpack-presales-chat-widget';
 
 import './style.scss';
 
@@ -53,6 +53,12 @@ export default function PortalNav( { className = '' }: Props ) {
 	const isPartnerPortalRoute = useSelector( isPartnerPortal );
 	const selectedSiteId = useSelector( getSelectedSiteId );
 	const manageSiteLink = useManageSiteLink();
+
+	usePresalesChat(
+		'jpAgency',
+		hasJetpackPartnerAccess && isSectionNameEnabled( 'jetpack-cloud-partner-portal' )
+	);
+
 	// Route belongs dashboard when it starts with /dashboard or /plugins and no site is selected(multi-site view).
 	const isDashboardRoute =
 		currentRoute.startsWith( '/dashboard' ) ||
@@ -114,7 +120,6 @@ export default function PortalNav( { className = '' }: Props ) {
 							{ translate( 'Licensing' ) }
 						</NavItem>
 					</NavTabs>
-					<ZendeskJetpackChat keyType="jpAgency" />
 				</SectionNav>
 			) }
 		</>

client/lib/presales-chat/index.ts

@@ -0,0 +1,59 @@
+import { useMessagingAvailability, useZendeskMessaging } from '@automattic/help-center/src/hooks';
+import { useIsEnglishLocale } from '@automattic/i18n-utils';
+import { useSelector } from 'react-redux';
+import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
+import type { ZendeskConfigName } from '@automattic/help-center/src/hooks/use-zendesk-messaging';
+
+export type KeyType = 'akismet' | 'jpAgency' | 'jpCheckout' | 'jpGeneral' | 'wpcom';
+
+function getConfigName( keyType: KeyType ): ZendeskConfigName {
+	switch ( keyType ) {
+		case 'akismet':
+			return 'zendesk_presales_chat_key_akismet';
+		case 'jpAgency':
+			return 'zendesk_presales_chat_key_jp_agency_dashboard';
+		case 'jpCheckout':
+			return 'zendesk_presales_chat_key_jp_checkout';
+		case 'jpGeneral':
+		case 'wpcom':
+		default:
+			return 'zendesk_presales_chat_key';
+	}
+}
+
+function getGroupName( keyType: KeyType ) {
+	switch ( keyType ) {
+		case 'akismet':
+		case 'jpAgency':
+		case 'jpCheckout':
+		case 'jpGeneral':
+			return 'jp_presales';
+		case 'wpcom':
+		default:
+			return 'wpcom_presales';
+	}
+}
+
+export function usePresalesChat( keyType: KeyType, enabled = true ) {
+	const isEnglishLocale = useIsEnglishLocale();
+	const isEligibleForPresalesChat = enabled && isEnglishLocale;
+
+	const group = getGroupName( keyType );
+	const { data: chatAvailability, isInitialLoading: isLoadingAvailability } =
+		useMessagingAvailability( group, isEligibleForPresalesChat );
+	const isPresalesChatAvailable = Boolean( chatAvailability?.is_available );
+
+	const isLoggedIn = useSelector( isUserLoggedIn );
+	const zendeskKeyName = getConfigName( keyType );
+	useZendeskMessaging(
+		zendeskKeyName,
+		isEligibleForPresalesChat && isPresalesChatAvailable,
+		isLoggedIn
+	);
+
+	return {
+		isChatActive: isPresalesChatAvailable && isEligibleForPresalesChat,
+		isLoading: isLoadingAvailability,
+		isPresalesChatAvailable,
+	};
+}