From 5c00b4cb48428a32aa24f44da7a7c3e7ac6f80d7 Mon Sep 17 00:00:00 2001
From: Tony Arcangelini <33258733+arcangelini@users.noreply.github.com>
Date: Mon, 15 Jul 2024 14:43:29 +0200
Subject: [PATCH] New Zendesk Client Package (#92179)

Co-authored-by: Omar Alshaker <omar@omaralshaker.com>
---
 .../migration-error/index.tsx                 | 37 ++++++----
 client/components/chat-button/index.tsx       | 35 +++++----
 .../precancellation-chat-button/index.tsx     |  1 +
 .../educational-content-step.tsx              | 17 ++---
 .../step-components/upsell-step.tsx           |  6 +-
 .../domain-transfer-domains/index.tsx         |  1 +
 .../domain-transfer-intro/index.tsx           |  1 +
 client/lib/presales-chat/index.ts             | 26 ++++---
 client/package.json                           |  1 +
 package.json                                  |  1 +
 packages/help-center/package.json             |  1 +
 .../components/help-center-contact-form.tsx   | 37 ++++++----
 .../components/help-center-contact-page.tsx   | 34 ++++-----
 .../src/components/help-center.tsx            | 62 ++--------------
 packages/help-center/src/hooks/index.ts       |  5 --
 .../help-center/src/hooks/use-chat-widget.ts  | 72 -------------------
 .../src/hooks/use-messaging-auth.ts           | 57 ---------------
 .../src/hooks/use-messaging-availability.ts   | 48 -------------
 packages/help-center/src/types.ts             | 10 ---
 packages/help-center/tsconfig.json            |  3 +-
 packages/tsconfig.json                        |  3 +-
 packages/zendesk-client/README.md             | 66 +++++++++++++++++
 packages/zendesk-client/package.json          | 39 ++++++++++
 packages/zendesk-client/src/constants.ts      |  2 +
 packages/zendesk-client/src/index.ts          |  7 ++
 packages/zendesk-client/src/types.ts          | 39 ++++++++++
 .../src/use-authenticate-zendesk-messaging.ts | 57 +++++++++++++++
 .../use-can-connect-to-zendesk-messaging.ts}  |  2 +-
 .../src/use-load-zendesk-messaging.ts}        | 19 ++---
 .../src/use-open-zendesk-messaging.ts         | 52 ++++++++++++++
 .../src}/use-update-zendesk-user-fields.ts    | 19 +++--
 .../src/use-zendesk-messaging-availability.ts | 45 ++++++++++++
 .../src/use-zendesk-messaging-bindings.ts     | 60 ++++++++++++++++
 packages/zendesk-client/tsconfig-cjs.json     |  7 ++
 packages/zendesk-client/tsconfig.json         | 11 +++
 packages/zendesk-client/types.d.ts            |  9 +++
 yarn.lock                                     | 19 +++++
 37 files changed, 552 insertions(+), 359 deletions(-)
 delete mode 100644 packages/help-center/src/hooks/use-chat-widget.ts
 delete mode 100644 packages/help-center/src/hooks/use-messaging-auth.ts
 delete mode 100644 packages/help-center/src/hooks/use-messaging-availability.ts
 create mode 100644 packages/zendesk-client/README.md
 create mode 100644 packages/zendesk-client/package.json
 create mode 100644 packages/zendesk-client/src/constants.ts
 create mode 100644 packages/zendesk-client/src/index.ts
 create mode 100644 packages/zendesk-client/src/types.ts
 create mode 100644 packages/zendesk-client/src/use-authenticate-zendesk-messaging.ts
 rename packages/{help-center/src/hooks/use-can-connect-to-zendesk.ts => zendesk-client/src/use-can-connect-to-zendesk-messaging.ts} (85%)
 rename packages/{help-center/src/hooks/use-zendesk-messaging.ts => zendesk-client/src/use-load-zendesk-messaging.ts} (75%)
 create mode 100644 packages/zendesk-client/src/use-open-zendesk-messaging.ts
 rename packages/{help-center/src/data => zendesk-client/src}/use-update-zendesk-user-fields.ts (68%)
 create mode 100644 packages/zendesk-client/src/use-zendesk-messaging-availability.ts
 create mode 100644 packages/zendesk-client/src/use-zendesk-messaging-bindings.ts
 create mode 100644 packages/zendesk-client/tsconfig-cjs.json
 create mode 100644 packages/zendesk-client/tsconfig.json
 create mode 100644 packages/zendesk-client/types.d.ts

diff --git a/client/blocks/importer/wordpress/import-everything/migration-error/index.tsx b/client/blocks/importer/wordpress/import-everything/migration-error/index.tsx
index 2aebc1b27fb1d..021e15e81e97d 100644
--- a/client/blocks/importer/wordpress/import-everything/migration-error/index.tsx
+++ b/client/blocks/importer/wordpress/import-everything/migration-error/index.tsx
@@ -1,11 +1,11 @@
 import { HelpCenter, MigrationStatusError } from '@automattic/data-stores';
-import {
-	useChatStatus,
-	useChatWidget,
-	useCanConnectToZendesk,
-	useMessagingAvailability,
-} from '@automattic/help-center/src/hooks';
+import { useChatStatus } from '@automattic/help-center/src/hooks';
 import { NextButton, SubTitle, Title } from '@automattic/onboarding';
+import {
+	useCanConnectToZendeskMessaging,
+	useZendeskMessagingAvailability,
+	useOpenZendeskMessaging,
+} from '@automattic/zendesk-client';
 import { useDispatch as useDataStoreDispatch } from '@wordpress/data';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback } from 'react';
@@ -30,7 +30,8 @@ interface Props {
 }
 
 export const MigrationError = ( props: Props ) => {
-	const { setShowHelpCenter, setInitialRoute } = useDataStoreDispatch( HELP_CENTER_STORE );
+	const { setShowHelpCenter, setInitialRoute, resetStore } =
+		useDataStoreDispatch( HELP_CENTER_STORE );
 	const {
 		sourceSiteUrl,
 		targetSiteUrl,
@@ -41,12 +42,13 @@ export const MigrationError = ( props: Props ) => {
 	} = props;
 	const translate = useTranslate();
 	const { isEligibleForChat } = useChatStatus();
-	const { data: canConnectToZendesk } = useCanConnectToZendesk();
-	const { data: isMessagingAvailable } = useMessagingAvailability(
+	const { data: canConnectToZendeskMessaging } = useCanConnectToZendeskMessaging();
+	const { data: isMessagingAvailable } = useZendeskMessagingAvailability(
 		'wpcom_messaging',
 		isEligibleForChat
 	);
-	const { openChatWidget, isOpeningChatWidget } = useChatWidget(
+	const { openZendeskWidget, isOpeningZendeskWidget } = useOpenZendeskMessaging(
+		'migration-error',
 		'zendesk_support_chat_key',
 		isEligibleForChat
 	);
@@ -54,21 +56,26 @@ export const MigrationError = ( props: Props ) => {
 		useErrorDetails( status, sourceSiteUrl, targetSiteUrl );
 
 	const getHelp = useCallback( () => {
-		if ( isMessagingAvailable && canConnectToZendesk ) {
-			openChatWidget( {
+		if ( isMessagingAvailable && canConnectToZendeskMessaging ) {
+			openZendeskWidget( {
 				siteUrl: targetSiteUrl,
 				message: `${ status }: Import onboarding flow; migration failed`,
+				onSuccess: () => {
+					resetStore();
+					setShowHelpCenter( false );
+				},
 			} );
 		} else {
 			setInitialRoute( '/contact-form?mode=CHAT' );
 			setShowHelpCenter( true );
 		}
 	}, [
-		openChatWidget,
+		resetStore,
+		openZendeskWidget,
 		targetSiteUrl,
 		status,
 		isMessagingAvailable,
-		canConnectToZendesk,
+		canConnectToZendeskMessaging,
 		setInitialRoute,
 		setShowHelpCenter,
 	] );
@@ -109,7 +116,7 @@ export const MigrationError = ( props: Props ) => {
 						<NextButton
 							onClick={ getHelp }
 							variant={ goBackCta || tryAgainCta || importContentCta ? 'secondary' : 'primary' }
-							isBusy={ isOpeningChatWidget }
+							isBusy={ isOpeningZendeskWidget }
 						>
 							{ translate( 'Contact support' ) }
 						</NextButton>
diff --git a/client/components/chat-button/index.tsx b/client/components/chat-button/index.tsx
index fb39c5b745edb..db1aa15e62924 100644
--- a/client/components/chat-button/index.tsx
+++ b/client/components/chat-button/index.tsx
@@ -1,16 +1,15 @@
 import { Button, Gridicon, Spinner } from '@automattic/components';
 import { HelpCenter } from '@automattic/data-stores';
+import { useChatStatus } from '@automattic/help-center/src/hooks';
 import {
-	useChatStatus,
-	useChatWidget,
-	useCanConnectToZendesk,
-	useMessagingAvailability,
-} from '@automattic/help-center/src/hooks';
+	useCanConnectToZendeskMessaging,
+	useZendeskMessagingAvailability,
+	useOpenZendeskMessaging,
+} from '@automattic/zendesk-client';
 import { useDispatch as useDataStoreDispatch } from '@wordpress/data';
 import { useI18n } from '@wordpress/react-i18n';
 import clsx from 'clsx';
-import type { MessagingGroup } from '@automattic/help-center/src/hooks/use-messaging-availability';
-import type { ZendeskConfigName } from '@automattic/help-center/src/hooks/use-zendesk-messaging';
+import type { MessagingGroup, ZendeskConfigName } from '@automattic/zendesk-client';
 import type { FC } from 'react';
 
 type ChatIntent = 'SUPPORT' | 'PRESALES' | 'PRECANCELLATION';
@@ -26,6 +25,7 @@ type Props = {
 	siteUrl?: string;
 	children?: React.ReactNode;
 	withHelpCenter?: boolean;
+	section?: string;
 };
 
 const HELP_CENTER_STORE = HelpCenter.register();
@@ -65,17 +65,19 @@ const ChatButton: FC< Props > = ( {
 	primary = false,
 	siteUrl,
 	withHelpCenter = true,
+	section = '',
 } ) => {
 	const { __ } = useI18n();
 	const { hasActiveChats, isEligibleForChat, isPrecancellationChatOpen, isPresalesChatOpen } =
 		useChatStatus();
 	const messagingGroup = getMessagingGroupForIntent( chatIntent );
-	const { data: isMessagingAvailable } = useMessagingAvailability(
+	const { data: isMessagingAvailable } = useZendeskMessagingAvailability(
 		messagingGroup,
 		isEligibleForChat
 	);
-	const { setShowHelpCenter, setInitialRoute } = useDataStoreDispatch( HELP_CENTER_STORE );
-	const { data: canConnectToZendesk } = useCanConnectToZendesk();
+	const { setShowHelpCenter, setInitialRoute, resetStore } =
+		useDataStoreDispatch( HELP_CENTER_STORE );
+	const { data: canConnectToZendesk } = useCanConnectToZendeskMessaging();
 
 	function shouldShowChatButton(): boolean {
 		if ( isEligibleForChat && hasActiveChats ) {
@@ -106,18 +108,23 @@ const ChatButton: FC< Props > = ( {
 	}
 
 	const configName = getConfigNameForIntent( chatIntent );
-	const { isOpeningChatWidget, openChatWidget } = useChatWidget(
+	const { isOpeningZendeskWidget, openZendeskWidget } = useOpenZendeskMessaging(
+		section,
 		configName,
 		shouldShowChatButton()
 	);
 
 	const handleClick = () => {
 		if ( canConnectToZendesk ) {
-			openChatWidget( {
+			openZendeskWidget( {
 				message: initialMessage,
 				siteUrl,
 				onError,
-				onSuccess: onClick,
+				onSuccess: () => {
+					onClick?.();
+					resetStore();
+					setShowHelpCenter( false );
+				},
 			} );
 		} else {
 			setInitialRoute( '/contact-form?mode=CHAT' );
@@ -133,7 +140,7 @@ const ChatButton: FC< Props > = ( {
 	}
 
 	function getChildren() {
-		if ( isOpeningChatWidget ) {
+		if ( isOpeningZendeskWidget ) {
 			return <Spinner />;
 		}
 
diff --git a/client/components/marketing-survey/cancel-purchase-form/precancellation-chat-button/index.tsx b/client/components/marketing-survey/cancel-purchase-form/precancellation-chat-button/index.tsx
index 0888e864a22d7..8d7bdf32f1a0a 100644
--- a/client/components/marketing-survey/cancel-purchase-form/precancellation-chat-button/index.tsx
+++ b/client/components/marketing-survey/cancel-purchase-form/precancellation-chat-button/index.tsx
@@ -59,6 +59,7 @@ const PrecancellationChatButton: FC< Props > = ( {
 			siteUrl={ siteUrl }
 			className={ clsx( 'precancellation-chat-button__main-button', className ) }
 			onClick={ handleClick }
+			section="pre-cancellation"
 		>
 			{ icon && <MaterialIcon icon={ icon } /> }
 			{ hasEnTranslation( 'Need help? Contact us' )
diff --git a/client/components/marketing-survey/cancel-purchase-form/step-components/educational-content-step.tsx b/client/components/marketing-survey/cancel-purchase-form/step-components/educational-content-step.tsx
index ece23860826dd..bcefc80e77c1d 100644
--- a/client/components/marketing-survey/cancel-purchase-form/step-components/educational-content-step.tsx
+++ b/client/components/marketing-survey/cancel-purchase-form/step-components/educational-content-step.tsx
@@ -1,7 +1,7 @@
 import page from '@automattic/calypso-router';
 import { MaterialIcon } from '@automattic/components';
-import { useChatWidget } from '@automattic/help-center/src/hooks';
 import { useHasEnTranslation, useLocalizeUrl } from '@automattic/i18n-utils';
+import { useOpenZendeskMessaging } from '@automattic/zendesk-client';
 import { Button } from '@wordpress/components';
 import { useTranslate } from 'i18n-calypso';
 import { useState } from 'react';
@@ -74,7 +74,8 @@ export default function EducationalCotnentStep( { type, site, ...props }: StepPr
 	const translate = useTranslate();
 	const hasEnTranslation = useHasEnTranslation();
 	const localizeUrl = useLocalizeUrl();
-	const { isOpeningChatWidget, openChatWidget } = useChatWidget();
+	const { isOpeningZendeskWidget, openZendeskWidget } =
+		useOpenZendeskMessaging( 'pre-cancellation' );
 
 	switch ( type ) {
 		case 'education:loading-time':
@@ -254,11 +255,11 @@ export default function EducationalCotnentStep( { type, site, ...props }: StepPr
 												),
 												chat: (
 													<Button
-														isBusy={ isOpeningChatWidget }
-														disabled={ isOpeningChatWidget }
+														isBusy={ isOpeningZendeskWidget }
+														disabled={ isOpeningZendeskWidget }
 														onClick={ () => {
 															page( `/domains/manage/${ site.slug }` );
-															openChatWidget( {
+															openZendeskWidget( {
 																message:
 																	"User is contacting us from pre-cancellation form. Cancellation reason they've given: " +
 																	props.cancellationReason,
@@ -285,11 +286,11 @@ export default function EducationalCotnentStep( { type, site, ...props }: StepPr
 												),
 												chat: (
 													<Button
-														isBusy={ isOpeningChatWidget }
-														disabled={ isOpeningChatWidget }
+														isBusy={ isOpeningZendeskWidget }
+														disabled={ isOpeningZendeskWidget }
 														onClick={ () => {
 															page( `/domains/manage/${ site.slug }` );
-															openChatWidget( {
+															openZendeskWidget( {
 																message:
 																	"User is contacting us from pre-cancellation form. Cancellation reason they've given: " +
 																	props.cancellationReason,
diff --git a/client/components/marketing-survey/cancel-purchase-form/step-components/upsell-step.tsx b/client/components/marketing-survey/cancel-purchase-form/step-components/upsell-step.tsx
index 4d24aa86fd656..bab34f697b9f6 100644
--- a/client/components/marketing-survey/cancel-purchase-form/step-components/upsell-step.tsx
+++ b/client/components/marketing-survey/cancel-purchase-form/step-components/upsell-step.tsx
@@ -2,8 +2,8 @@ import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { getPlan, PLAN_PERSONAL, PLAN_BUSINESS } from '@automattic/calypso-products';
 import page from '@automattic/calypso-router';
 import formatCurrency from '@automattic/format-currency';
-import { useChatWidget } from '@automattic/help-center/src/hooks';
 import { useHasEnTranslation } from '@automattic/i18n-utils';
+import { useOpenZendeskMessaging } from '@automattic/zendesk-client';
 import { Button } from '@wordpress/components';
 import { useTranslate, numberFormat } from 'i18n-calypso';
 import { useState } from 'react';
@@ -116,7 +116,7 @@ export default function UpsellStep( { upsell, site, purchase, ...props }: StepPr
 	const couponCode = 'BIZWPC25';
 	const builtByURL = 'https://wordpress.com/website-design-service/?ref=wpcom-cancel-flow';
 	const { refundAmount } = props;
-	const { openChatWidget } = useChatWidget();
+	const { openZendeskWidget } = useOpenZendeskMessaging( 'pre-cancellation-upsell' );
 	const businessPlanName = getPlan( PLAN_BUSINESS )?.getTitle() ?? '';
 
 	switch ( upsell ) {
@@ -142,7 +142,7 @@ export default function UpsellStep( { upsell, site, purchase, ...props }: StepPr
 						} );
 						page( getLiveChatUrl( upsell, site, purchase ) );
 
-						openChatWidget( {
+						openZendeskWidget( {
 							message:
 								"User is contacting us from pre-cancellation form. Cancellation reason they've given: " +
 								props.cancellationReason,
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/index.tsx
index 3af5419a1a60a..b094fb767010e 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/index.tsx
@@ -55,6 +55,7 @@ const Intro: Step = function Intro( { navigation, flow, variantSlug } ) {
 					initialMessage="User is contacting us from the domains-transfer flow"
 					className="domains-transfer-chat-button"
 					withHelpCenter={ false }
+					section="domains-transfer"
 				>
 					<MaterialIcon icon="chat_bubble" />
 					{ hasEnTranslation( 'Need help? Contact us' )
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/index.tsx
index f4c2f51e0d642..54dcda89e7af2 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/index.tsx
@@ -56,6 +56,7 @@ const Intro: Step = function Intro( { navigation, variantSlug } ) {
 					initialMessage="User is contacting us from the domains-transfer flow"
 					className="domains-transfer-chat-button"
 					withHelpCenter={ false }
+					section="domains-transfer"
 				>
 					<MaterialIcon icon="chat_bubble" />
 					{ hasEnTranslation( 'Need help? Contact us' )
diff --git a/client/lib/presales-chat/index.ts b/client/lib/presales-chat/index.ts
index 286bfefabfa44..e9c15a537fad3 100644
--- a/client/lib/presales-chat/index.ts
+++ b/client/lib/presales-chat/index.ts
@@ -1,15 +1,15 @@
-import {
-	useMessagingAvailability,
-	useZendeskMessaging,
-	useCanConnectToZendesk,
-} from '@automattic/help-center/src/hooks';
-import { ZENDESK_SOURCE_URL_TICKET_FIELD_ID } from '@automattic/help-center/src/hooks/use-chat-widget';
 import { useIsEnglishLocale } from '@automattic/i18n-utils';
+import {
+	useZendeskMessagingAvailability,
+	useLoadZendeskMessaging,
+	useCanConnectToZendeskMessaging,
+	ZENDESK_SOURCE_URL_TICKET_FIELD_ID,
+} from '@automattic/zendesk-client';
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { isWpMobileApp } from 'calypso/lib/mobile-app';
 import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
-import type { ZendeskConfigName } from '@automattic/help-center/src/hooks/use-zendesk-messaging';
+import type { ZendeskConfigName } from '@automattic/zendesk-client';
 
 export type KeyType = 'akismet' | 'jpAgency' | 'jpCheckout' | 'jpGeneral' | 'wpcom';
 
@@ -58,23 +58,21 @@ export function usePresalesChat( keyType: KeyType, enabled = true, skipAvailabil
 	const isWpMobileAppUser = isWpMobileApp();
 	const group = getGroupName( keyType );
 
-	const { data: canConnectToZendesk } = useCanConnectToZendesk(
+	const { data: canConnectToZendeskMessaging } = useCanConnectToZendeskMessaging(
 		enabled && ! skipAvailabilityCheck
 	);
 	const isEligibleForPresalesChat =
-		enabled && isEnglishLocale && canConnectToZendesk && ! isWpMobileAppUser;
+		enabled && isEnglishLocale && canConnectToZendeskMessaging && ! isWpMobileAppUser;
 
-	const { data: chatAvailability, isLoading: isLoadingAvailability } = useMessagingAvailability(
-		group,
-		isEligibleForPresalesChat && ! skipAvailabilityCheck
-	);
+	const { data: chatAvailability, isLoading: isLoadingAvailability } =
+		useZendeskMessagingAvailability( group, isEligibleForPresalesChat && ! skipAvailabilityCheck );
 
 	const isPresalesChatAvailable =
 		skipAvailabilityCheck || Boolean( chatAvailability?.is_available );
 
 	const isLoggedIn = useSelector( isUserLoggedIn );
 	const zendeskKeyName = getConfigName( keyType );
-	const { isMessagingScriptLoaded } = useZendeskMessaging(
+	const { isMessagingScriptLoaded } = useLoadZendeskMessaging(
 		zendeskKeyName,
 		isEligibleForPresalesChat && isPresalesChatAvailable,
 		isLoggedIn
diff --git a/client/package.json b/client/package.json
index 39c988b8bbabb..0f9e56a62bf33 100644
--- a/client/package.json
+++ b/client/package.json
@@ -74,6 +74,7 @@
 		"@automattic/webpack-inline-constant-exports-plugin": "workspace:^",
 		"@automattic/wpcom-checkout": "workspace:^",
 		"@automattic/wpcom-template-parts": "workspace:^",
+		"@automattic/zendesk-client": "workspace:^",
 		"@babel/core": "^7.24.5",
 		"@emotion/css": "^11.11.2",
 		"@emotion/jest": "^11.11.0",
diff --git a/package.json b/package.json
index c5e8c63c99629..7c5d0f368d132 100644
--- a/package.json
+++ b/package.json
@@ -165,6 +165,7 @@
 		"@automattic/whats-new": "workspace:^",
 		"@automattic/wp-babel-makepot": "workspace:^",
 		"@automattic/wpcom-template-parts": "workspace:^",
+		"@automattic/zendesk-client": "workspace:^",
 		"@types/cookie": "^0.4.1",
 		"@types/debug": "^4.1.7",
 		"@types/fast-json-stable-stringify": "^2.0.0",
diff --git a/packages/help-center/package.json b/packages/help-center/package.json
index c15ff05cae75a..a872587b9721d 100644
--- a/packages/help-center/package.json
+++ b/packages/help-center/package.json
@@ -34,6 +34,7 @@
 		"@automattic/odie-client": "workspace:^",
 		"@automattic/viewport": "workspace:^",
 		"@automattic/viewport-react": "workspace:^",
+		"@automattic/zendesk-client": "workspace:^",
 		"@popperjs/core": "^2.11.8",
 		"@tanstack/react-query": "^5.15.5",
 		"@wordpress/base-styles": "^5.2.0",
diff --git a/packages/help-center/src/components/help-center-contact-form.tsx b/packages/help-center/src/components/help-center-contact-form.tsx
index 1ff37e1e7becb..045152cdda7d4 100644
--- a/packages/help-center/src/components/help-center-contact-form.tsx
+++ b/packages/help-center/src/components/help-center-contact-form.tsx
@@ -8,7 +8,10 @@ import { getPlan, getPlanTermLabel } from '@automattic/calypso-products';
 import { FormInputValidation, Popover, Spinner } from '@automattic/components';
 import { useLocale } from '@automattic/i18n-utils';
 import { useGetOdieStorage } from '@automattic/odie-client';
-import { useQueryClient } from '@tanstack/react-query';
+import {
+	useCanConnectToZendeskMessaging,
+	useOpenZendeskMessaging,
+} from '@automattic/zendesk-client';
 import { Button, TextControl, CheckboxControl, Tip } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -30,12 +33,8 @@ import { useSiteAnalysis } from '../data/use-site-analysis';
 import { useSubmitForumsMutation } from '../data/use-submit-forums-topic';
 import { useSubmitTicketMutation } from '../data/use-submit-support-ticket';
 import { useUserSites } from '../data/use-user-sites';
-import {
-	useChatStatus,
-	useContactFormTitle,
-	useChatWidget,
-	useCanConnectToZendesk,
-} from '../hooks';
+import { useChatStatus, useContactFormTitle } from '../hooks';
+import { queryClient } from '../query-client';
 import { HELP_CENTER_STORE } from '../stores';
 import { getSupportVariationFromMode } from '../support-variations';
 import { SearchResult } from '../types';
@@ -90,7 +89,6 @@ export const HelpCenterContactForm = ( props: HelpCenterContactFormProps ) => {
 	const { isPending: submittingTopic, mutateAsync: submitTopic } = useSubmitForumsMutation();
 	const { data: userSites } = useUserSites( currentUser.ID );
 	const userWithNoSites = userSites?.sites.length === 0;
-	const queryClient = useQueryClient();
 	const [ isSelfDeclaredSite, setIsSelfDeclaredSite ] = useState< boolean >( false );
 	const [ gptResponse, setGptResponse ] = useState< JetpackSearchAIResult >();
 	const { subject, message, userDeclaredSiteUrl } = useSelect( ( select ) => {
@@ -102,12 +100,19 @@ export const HelpCenterContactForm = ( props: HelpCenterContactFormProps ) => {
 		};
 	}, [] );
 
-	const { resetStore, setUserDeclaredSite, setShowMessagingChat, setSubject, setMessage } =
-		useDispatch( HELP_CENTER_STORE );
+	const {
+		resetStore,
+		setShowHelpCenter,
+		setUserDeclaredSite,
+		setShowMessagingChat,
+		setSubject,
+		setMessage,
+	} = useDispatch( HELP_CENTER_STORE );
 
-	const { data: canConnectToZendesk } = useCanConnectToZendesk();
+	const { data: canConnectToZendesk } = useCanConnectToZendeskMessaging();
 	const { hasActiveChats, isEligibleForChat, isLoading: isLoadingChatStatus } = useChatStatus();
-	const { isOpeningChatWidget, openChatWidget } = useChatWidget(
+	const { isOpeningZendeskWidget, openZendeskWidget } = useOpenZendeskMessaging(
+		sectionName,
 		'zendesk_support_chat_key',
 		isEligibleForChat || hasActiveChats
 	);
@@ -140,7 +145,7 @@ export const HelpCenterContactForm = ( props: HelpCenterContactFormProps ) => {
 	);
 
 	const ownershipStatusLoading = ownershipResult?.result === 'LOADING';
-	const isSubmitting = submittingTicket || submittingTopic || isOpeningChatWidget;
+	const isSubmitting = submittingTicket || submittingTopic || isOpeningZendeskWidget;
 
 	// if the user picked a site from the picker, we don't need to analyze the ownership
 	if ( site && ! isSelfDeclaredSite ) {
@@ -317,11 +322,15 @@ export const HelpCenterContactForm = ( props: HelpCenterContactFormProps ) => {
 						initialChatMessage += 'User was chatting with Wapuu before they started chat<br />';
 					}
 
-					openChatWidget( {
+					openZendeskWidget( {
 						aiChatId: aiChatId,
 						message: initialChatMessage,
 						siteUrl: supportSite.URL,
 						onError: () => setHasSubmittingError( true ),
+						onSuccess: () => {
+							resetStore();
+							setShowHelpCenter( false );
+						},
 					} );
 					break;
 				}
diff --git a/packages/help-center/src/components/help-center-contact-page.tsx b/packages/help-center/src/components/help-center-contact-page.tsx
index b4ff341743d4d..8bb3a08c064cd 100644
--- a/packages/help-center/src/components/help-center-contact-page.tsx
+++ b/packages/help-center/src/components/help-center-contact-page.tsx
@@ -6,7 +6,9 @@ import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { getPlan } from '@automattic/calypso-products';
 import { Spinner, GMClosureNotice, FormInputValidation } from '@automattic/components';
 import { getLanguage, useIsEnglishLocale, useLocale } from '@automattic/i18n-utils';
-import { useGetOdieStorage, useSetOdieStorage } from '@automattic/odie-client';
+import { useGetOdieStorage } from '@automattic/odie-client';
+import { useLoadZendeskMessaging, useOpenZendeskMessaging } from '@automattic/zendesk-client';
+import { useDispatch } from '@wordpress/data';
 import { useEffect, useMemo } from '@wordpress/element';
 import { hasTranslation, sprintf } from '@wordpress/i18n';
 import { comment, Icon } from '@wordpress/icons';
@@ -20,14 +22,9 @@ import { Link } from 'react-router-dom';
 import { BackButton } from '..';
 import { EMAIL_SUPPORT_LOCALES } from '../constants';
 import { useHelpCenterContext } from '../contexts/HelpCenterContext';
-import {
-	useChatStatus,
-	useChatWidget,
-	useShouldRenderEmailOption,
-	useStillNeedHelpURL,
-	useZendeskMessaging,
-} from '../hooks';
+import { useChatStatus, useShouldRenderEmailOption, useStillNeedHelpURL } from '../hooks';
 import { Mail } from '../icons';
+import { HELP_CENTER_STORE } from '../stores';
 import { HelpCenterActiveTicketNotice } from './help-center-notice';
 import type { HelpCenterSite } from '@automattic/data-stores';
 
@@ -75,7 +72,8 @@ export const HelpCenterContactPage: FC< HelpCenterContactPageProps > = ( {
 		isLoading: isLoadingChatStatus,
 		supportActivity,
 	} = useChatStatus();
-	useZendeskMessaging(
+	const { resetStore, setShowHelpCenter } = useDispatch( HELP_CENTER_STORE );
+	useLoadZendeskMessaging(
 		'zendesk_support_chat_key',
 		isEligibleForChat || hasActiveChats,
 		isEligibleForChat || hasActiveChats
@@ -85,9 +83,9 @@ export const HelpCenterContactPage: FC< HelpCenterContactPageProps > = ( {
 	const [ hasSubmittingError, setHasSubmittingError ] = useState< boolean >( false );
 
 	const wapuuChatId = useGetOdieStorage( 'chat_id' );
-	const setWapuuChatId = useSetOdieStorage( 'chat_id' );
 
-	const { isOpeningChatWidget, openChatWidget } = useChatWidget(
+	const { isOpeningZendeskWidget, openZendeskWidget } = useOpenZendeskMessaging(
+		sectionName,
 		'zendesk_support_chat_key',
 		isEligibleForChat || hasActiveChats
 	);
@@ -112,7 +110,7 @@ export const HelpCenterContactPage: FC< HelpCenterContactPageProps > = ( {
 		}
 
 		return __( 'Contact WordPress.com Support (English)', __i18n_text_domain__ );
-	}, [ __, locale ] );
+	}, [ __, isEnglishLocale ] );
 
 	const emailHeaderText = useMemo( () => {
 		if ( isEnglishLocale ) {
@@ -137,7 +135,7 @@ export const HelpCenterContactPage: FC< HelpCenterContactPageProps > = ( {
 		}
 
 		return __( 'Email', __i18n_text_domain__ );
-	}, [ __, locale ] );
+	}, [ __, locale, isEnglishLocale ] );
 
 	if ( isLoading ) {
 		return (
@@ -186,18 +184,20 @@ export const HelpCenterContactPage: FC< HelpCenterContactPageProps > = ( {
 
 			const escapedWapuuChatId = encodeURIComponent( wapuuChatId || '' );
 
-			openChatWidget( {
+			openZendeskWidget( {
 				aiChatId: escapedWapuuChatId,
 				siteUrl: site?.URL,
 				onError: () => setHasSubmittingError( true ),
-				// Reset Odie chat after passing to support
-				onSuccess: () => setWapuuChatId( null ),
+				onSuccess: () => {
+					resetStore();
+					setShowHelpCenter( false );
+				},
 			} );
 		};
 
 		return (
 			<div>
-				<button disabled={ isOpeningChatWidget } onClick={ handleOnClick }>
+				<button disabled={ isOpeningZendeskWidget } onClick={ handleOnClick }>
 					<div className="help-center-contact-page__box chat" role="button" tabIndex={ 0 }>
 						<div className="help-center-contact-page__box-icon">
 							<Icon icon={ comment } />
diff --git a/packages/help-center/src/components/help-center.tsx b/packages/help-center/src/components/help-center.tsx
index a497f87f8b388..b392127888d5d 100644
--- a/packages/help-center/src/components/help-center.tsx
+++ b/packages/help-center/src/components/help-center.tsx
@@ -3,7 +3,8 @@
  * External Dependencies
  */
 import { initializeAnalytics } from '@automattic/calypso-analytics';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useZendeskMessagingBindings, useLoadZendeskMessaging } from '@automattic/zendesk-client';
+import { useSelect } from '@wordpress/data';
 import { createPortal, useEffect, useRef } from '@wordpress/element';
 /**
  * Internal Dependencies
@@ -13,7 +14,7 @@ import {
 	useHelpCenterContext,
 	type HelpCenterRequiredInformation,
 } from '../contexts/HelpCenterContext';
-import { useChatStatus, useZendeskMessaging, useStillNeedHelpURL } from '../hooks';
+import { useChatStatus, useStillNeedHelpURL } from '../hooks';
 import { useOpeningCoordinates } from '../hooks/use-opening-coordinates';
 import { HELP_CENTER_STORE } from '../stores';
 import { Container } from '../types';
@@ -21,59 +22,6 @@ import HelpCenterContainer from './help-center-container';
 import type { HelpCenterSelect } from '@automattic/data-stores';
 import '../styles.scss';
 
-function useMessagingBindings( hasActiveChats: boolean, isMessagingScriptLoaded: boolean ) {
-	const { setShowMessagingLauncher, setShowMessagingWidget } = useDispatch( HELP_CENTER_STORE );
-	const { showMessagingLauncher, showMessagingWidget } = useSelect( ( select ) => {
-		const helpCenterSelect: HelpCenterSelect = select( HELP_CENTER_STORE );
-		return {
-			showMessagingLauncher: helpCenterSelect.isMessagingLauncherShown(),
-			showMessagingWidget: helpCenterSelect.isMessagingWidgetShown(),
-		};
-	}, [] );
-
-	useEffect( () => {
-		if ( typeof window.zE !== 'function' || ! isMessagingScriptLoaded ) {
-			return;
-		}
-
-		window.zE( 'messenger:on', 'open', function () {
-			setShowMessagingWidget( true );
-		} );
-		window.zE( 'messenger:on', 'close', function () {
-			setShowMessagingWidget( false );
-		} );
-		window.zE( 'messenger:on', 'unreadMessages', function ( count ) {
-			if ( Number( count ) > 0 ) {
-				setShowMessagingLauncher( true );
-			}
-		} );
-	}, [ isMessagingScriptLoaded, setShowMessagingLauncher, setShowMessagingWidget ] );
-
-	useEffect( () => {
-		if ( typeof window.zE !== 'function' || ! isMessagingScriptLoaded ) {
-			return;
-		}
-		// `showMessagingLauncher` starts off as undefined. This check means don't touch the widget if we're in default state.
-		if ( typeof showMessagingLauncher === 'boolean' ) {
-			window.zE( 'messenger', showMessagingLauncher ? 'show' : 'hide' );
-		}
-	}, [ showMessagingLauncher, isMessagingScriptLoaded ] );
-
-	useEffect( () => {
-		if ( typeof window.zE !== 'function' || ! isMessagingScriptLoaded ) {
-			return;
-		}
-
-		window.zE( 'messenger', showMessagingWidget ? 'open' : 'close' );
-	}, [ showMessagingWidget, isMessagingScriptLoaded ] );
-
-	useEffect( () => {
-		if ( hasActiveChats ) {
-			setShowMessagingLauncher( true );
-		}
-	}, [ setShowMessagingLauncher, hasActiveChats ] );
-}
-
 const HelpCenter: React.FC< Container > = ( {
 	handleClose,
 	hidden,
@@ -99,13 +47,13 @@ const HelpCenter: React.FC< Container > = ( {
 	useStillNeedHelpURL();
 
 	const { hasActiveChats, isEligibleForChat } = useChatStatus();
-	const { isMessagingScriptLoaded } = useZendeskMessaging(
+	const { isMessagingScriptLoaded } = useLoadZendeskMessaging(
 		'zendesk_support_chat_key',
 		( isHelpCenterShown && isEligibleForChat ) || hasActiveChats,
 		isEligibleForChat && hasActiveChats
 	);
 
-	useMessagingBindings( hasActiveChats, isMessagingScriptLoaded );
+	useZendeskMessagingBindings( HELP_CENTER_STORE, hasActiveChats, isMessagingScriptLoaded );
 
 	const openingCoordinates = useOpeningCoordinates( isHelpCenterShown, isMinimized );
 
diff --git a/packages/help-center/src/hooks/index.ts b/packages/help-center/src/hooks/index.ts
index 6c55af8542030..bb2eef4219104 100644
--- a/packages/help-center/src/hooks/index.ts
+++ b/packages/help-center/src/hooks/index.ts
@@ -1,12 +1,7 @@
 export { useContactFormTitle } from './use-contact-form-title';
 export { useShouldRenderEmailOption } from './use-should-render-email-option';
 export { useStillNeedHelpURL } from './use-still-need-help-url';
-export { default as useMessagingAuth } from './use-messaging-auth';
-export { default as useMessagingAvailability } from './use-messaging-availability';
 export { default as useTyper } from './use-typer';
-export { useCanConnectToZendesk } from './use-can-connect-to-zendesk';
-export { default as useZendeskMessaging } from './use-zendesk-messaging';
 export { default as useChatStatus } from './use-chat-status';
-export { default as useChatWidget } from './use-chat-widget';
 export { useShouldUseWapuu } from './use-should-use-wapuu';
 export { filterListBySearchTerm } from './use-admin-results';
diff --git a/packages/help-center/src/hooks/use-chat-widget.ts b/packages/help-center/src/hooks/use-chat-widget.ts
deleted file mode 100644
index fe413b351564e..0000000000000
--- a/packages/help-center/src/hooks/use-chat-widget.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * External Dependencies
- */
-import { useZendeskMessaging } from '@automattic/help-center/src/hooks';
-import { useDispatch } from '@wordpress/data';
-/**
- * External Dependencies
- */
-import { useHelpCenterContext } from '../contexts/HelpCenterContext';
-import { useUpdateZendeskUserFieldsMutation } from '../data/use-update-zendesk-user-fields';
-import { HELP_CENTER_STORE } from '../stores';
-import type { ZendeskConfigName } from '@automattic/help-center/src/hooks/use-zendesk-messaging';
-
-type ChatMetadata = {
-	aiChatId?: string;
-	message?: string;
-	siteUrl?: string;
-	onError?: () => void;
-	onSuccess?: () => void;
-};
-
-export const ZENDESK_SOURCE_URL_TICKET_FIELD_ID = 23752099174548;
-
-export default function useChatWidget(
-	configName: ZendeskConfigName = 'zendesk_support_chat_key',
-	enabled = true
-) {
-	const { sectionName } = useHelpCenterContext();
-	const { isPending: isSubmittingZendeskUserFields, mutateAsync: submitZendeskUserFields } =
-		useUpdateZendeskUserFieldsMutation();
-	const { setShowHelpCenter, resetStore } = useDispatch( HELP_CENTER_STORE );
-
-	const { isMessagingScriptLoaded } = useZendeskMessaging( configName, enabled, enabled );
-
-	const openChatWidget = ( {
-		aiChatId,
-		message = '',
-		siteUrl = 'No site selected',
-		onError,
-		onSuccess,
-	}: ChatMetadata ) => {
-		submitZendeskUserFields( {
-			messaging_ai_chat_id: aiChatId,
-			messaging_source: sectionName,
-			messaging_initial_message: message,
-			messaging_plan: '', // Will be filled out by backend
-			messaging_url: siteUrl,
-		} )
-			.then( () => {
-				onSuccess?.();
-				setShowHelpCenter( false );
-				resetStore();
-				if ( typeof window.zE === 'function' ) {
-					window.zE( 'messenger', 'open' );
-					window.zE( 'messenger', 'show' );
-					window.zE( 'messenger:set', 'conversationFields', [
-						{ id: ZENDESK_SOURCE_URL_TICKET_FIELD_ID, value: window.location.href },
-					] );
-				} else {
-					throw new Error( 'Zendesk chat widget not loaded' );
-				}
-			} )
-			.catch( () => {
-				onError?.();
-			} );
-	};
-
-	return {
-		isOpeningChatWidget: enabled && ( isSubmittingZendeskUserFields || ! isMessagingScriptLoaded ),
-		openChatWidget,
-	};
-}
diff --git a/packages/help-center/src/hooks/use-messaging-auth.ts b/packages/help-center/src/hooks/use-messaging-auth.ts
deleted file mode 100644
index 805dd7522dfb6..0000000000000
--- a/packages/help-center/src/hooks/use-messaging-auth.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import config from '@automattic/calypso-config';
-import { useQuery, QueryFunctionContext } from '@tanstack/react-query';
-import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
-import wpcomRequest, { canAccessWpcomApis } from 'wpcom-proxy-request';
-import type { MessagingAuth } from '../types';
-
-interface APIFetchOptions {
-	global: boolean;
-	path: string;
-}
-
-let isLoggedIn = false;
-
-function requestMessagingAuth( { queryKey }: QueryFunctionContext ) {
-	const [ , isTestMode ] = queryKey;
-	const params = { type: 'zendesk', test_mode: String( isTestMode ) };
-	const wpcomParams = new URLSearchParams( params );
-	return canAccessWpcomApis()
-		? wpcomRequest< MessagingAuth >( {
-				path: '/help/authenticate/chat',
-				query: wpcomParams.toString(),
-				apiNamespace: 'wpcom/v2',
-				apiVersion: '2',
-				method: 'POST',
-		  } )
-		: apiFetch< MessagingAuth >( {
-				path: addQueryArgs( '/help-center/authenticate/chat', params ),
-				method: 'POST',
-				global: true,
-		  } as APIFetchOptions );
-}
-
-export default function useMessagingAuth( enabled: boolean ) {
-	const currentEnvironment = config( 'env_id' );
-	const isTestMode = currentEnvironment === 'development';
-	return useQuery( {
-		queryKey: [ 'getMessagingAuth', isTestMode ],
-		queryFn: requestMessagingAuth,
-		staleTime: 7 * 24 * 60 * 60 * 1000, // 1 week (JWT is actually 2 weeks, but lets be on the safe side)
-		enabled,
-		select: ( messagingAuth ) => {
-			if ( ! isLoggedIn ) {
-				const jwt = messagingAuth?.user.jwt;
-				if ( typeof window.zE !== 'function' || ! jwt ) {
-					return;
-				}
-
-				window.zE( 'messenger', 'loginUser', function ( callback ) {
-					isLoggedIn = true;
-					callback( jwt );
-				} );
-			}
-			return { isLoggedIn };
-		},
-	} );
-}
diff --git a/packages/help-center/src/hooks/use-messaging-availability.ts b/packages/help-center/src/hooks/use-messaging-availability.ts
deleted file mode 100644
index f01ba5fc4a8cf..0000000000000
--- a/packages/help-center/src/hooks/use-messaging-availability.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import config from '@automattic/calypso-config';
-import { useQuery, QueryFunctionContext } from '@tanstack/react-query';
-import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
-import wpcomRequest, { canAccessWpcomApis } from 'wpcom-proxy-request';
-import type { MessagingAvailability } from '../types';
-
-interface APIFetchOptions {
-	global: boolean;
-	path: string;
-}
-
-export type MessagingGroup = 'jp_presales' | 'wpcom_messaging' | 'wpcom_presales';
-
-function requestMessagingAvailability( { queryKey }: QueryFunctionContext ) {
-	const currentEnvironment = config( 'env_id' );
-	const [ , group ] = queryKey;
-	const params = {
-		group: group as string,
-		environment: currentEnvironment === 'development' ? 'development' : 'production',
-	};
-	const wpcomParams = new URLSearchParams( params );
-	return canAccessWpcomApis()
-		? wpcomRequest< MessagingAvailability >( {
-				path: '/help/support-status/messaging',
-				query: wpcomParams.toString(),
-				apiNamespace: 'wpcom/v2',
-				apiVersion: '2',
-				method: 'GET',
-		  } )
-		: apiFetch< MessagingAvailability >( {
-				path: addQueryArgs( '/help-center/support-status/messaging', params ),
-				method: 'GET',
-				global: true,
-		  } as APIFetchOptions );
-}
-
-export default function useMessagingAvailability( group: MessagingGroup, enabled = true ) {
-	return useQuery< MessagingAvailability >( {
-		queryKey: [ 'getMessagingAvailability', group ],
-		queryFn: requestMessagingAvailability,
-		staleTime: 60 * 1000, // 1 minute
-		meta: {
-			persist: false,
-		},
-		enabled,
-	} );
-}
diff --git a/packages/help-center/src/types.ts b/packages/help-center/src/types.ts
index 09b1347622900..857e13fca88ce 100644
--- a/packages/help-center/src/types.ts
+++ b/packages/help-center/src/types.ts
@@ -76,16 +76,6 @@ export interface SupportTicket {
 	when: string;
 }
 
-export interface MessagingAuth {
-	user: {
-		jwt: string;
-	};
-}
-
-export interface MessagingAvailability {
-	is_available: boolean;
-}
-
 export type Mode = 'CHAT' | 'EMAIL' | 'FORUM';
 
 interface Availability {
diff --git a/packages/help-center/tsconfig.json b/packages/help-center/tsconfig.json
index 31c7887c83ccb..7374c79e9ea13 100644
--- a/packages/help-center/tsconfig.json
+++ b/packages/help-center/tsconfig.json
@@ -14,6 +14,7 @@
 		{ "path": "../viewport" },
 		{ "path": "../odie-client" },
 		{ "path": "../whats-new" },
-		{ "path": "../wpcom-checkout" }
+		{ "path": "../wpcom-checkout" },
+		{ "path": "../zendesk-client" }
 	]
 }
diff --git a/packages/tsconfig.json b/packages/tsconfig.json
index f2f0068d48a23..1191171af9aab 100644
--- a/packages/tsconfig.json
+++ b/packages/tsconfig.json
@@ -60,6 +60,7 @@
 		{ "path": "./whats-new" },
 		{ "path": "./wpcom-checkout" },
 		{ "path": "./verbum-block-editor" },
-		{ "path": "./wpcom-template-parts" }
+		{ "path": "./wpcom-template-parts" },
+		{ "path": "./zendesk-client" }
 	]
 }
diff --git a/packages/zendesk-client/README.md b/packages/zendesk-client/README.md
new file mode 100644
index 0000000000000..b306ba50e9c50
--- /dev/null
+++ b/packages/zendesk-client/README.md
@@ -0,0 +1,66 @@
+# Zendesk Client
+
+This package is used to interact with the Zendesk Messaging Widget.
+
+## Hooks
+
+### useZendeskMessagingAvailability
+
+- `group` string - What Zendesk group should be checked. Example: `wpcom_messaging`
+- `enabled` boolean - defaults to true
+
+#### Returns
+
+True if Zendesk Messaging is available to receive support requests.
+
+### useOpenZendeskMessaging
+
+- `sectionName` string - The section where this is this being loaded from
+- `keyConfigName` ZendeskConfigName - The Zendesk config that should be used. Varies depending on what Zendesk account this should be going to
+- `enabled` boolean - defaults to true
+
+#### Returns
+
+- `isOpeningZendeskWidget` boolean
+- `openZendeskWidget` function - Sets the given fields in Zendesk and the opens and shows the widget.
+	- `aiChatId` string
+	- `message` string
+	- `siteUrl` string
+	- `onError` callback
+	- `onSuccess` callback
+
+
+### useCanConnectToZendeskMessaging
+
+- `enabled` boolean - defaults to true
+
+#### Returns
+
+True if the user can reach the Zendesk config.
+
+### useLoadZendeskMessaging
+
+- `keyConfigName` ZendeskConfigName - The Zendesk config that should be used. Varies depending on what Zendesk account this should be going to
+- `tryAuthenticating` boolean - Try and authenticate Zendesk user before loading.
+- `enabled` defaults to true
+
+#### Returns
+
+- `isLoggedIn` boolean
+- `isMessagingScriptLoaded` boolean
+
+### useZendeskMessagingBindings
+
+- `HelpCenterStore` string
+- `hasActiveChats` boolean
+- `isMessagingScriptLoaded` boolean
+
+This is used to bind the Zendesk Messaging events to Help Center store for opening and closing the widget and Help Center-
+
+### useAuthenticateZendeskMessaging
+
+- `enabled` boolean - defaults to true
+
+#### Returns
+
+JWT signature for the authorized user
\ No newline at end of file
diff --git a/packages/zendesk-client/package.json b/packages/zendesk-client/package.json
new file mode 100644
index 0000000000000..5917a53fdc2a0
--- /dev/null
+++ b/packages/zendesk-client/package.json
@@ -0,0 +1,39 @@
+{
+	"name": "@automattic/zendesk-client",
+	"description": "Manages the connection to the Zendesk API.",
+	"author": "Automattic Inc.",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"calypso:src": "src/index.ts",
+	"types": "dist/types",
+	"homepage": "https://github.com/Automattic/wp-calypso",
+	"version": "1.0.0",
+	"sideEffects": false,
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Automattic/wp-calypso.git",
+		"directory": "/packages/zendesk-client"
+	},
+	"scripts": {
+		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
+		"clean": "rm -rf dist",
+		"prepare": "yarn run build",
+		"prepack": "yarn run clean && yarn run build",
+		"watch": "tsc --build ./tsconfig.json --watch"
+	},
+	"dependencies": {
+		"@tanstack/react-query": "^5.15.5",
+		"@wordpress/api-fetch": "^7.2.0",
+		"@wordpress/element": "^6.2.0",
+		"@wordpress/url": "^4.2.0",
+		"wpcom-proxy-request": "workspace:^"
+	},
+	"devDependencies": {
+		"@automattic/calypso-typescript-config": "workspace:^",
+		"typescript": "^5.3.3"
+	},
+	"peerDependencies": {
+		"react": "^18.2.0"
+	},
+	"license": "GPL-2.0-or-later"
+}
diff --git a/packages/zendesk-client/src/constants.ts b/packages/zendesk-client/src/constants.ts
new file mode 100644
index 0000000000000..02ffabdc98dee
--- /dev/null
+++ b/packages/zendesk-client/src/constants.ts
@@ -0,0 +1,2 @@
+export const ZENDESK_SOURCE_URL_TICKET_FIELD_ID = 23752099174548;
+export const ZENDESK_SCRIPT_ID = 'ze-snippet';
diff --git a/packages/zendesk-client/src/index.ts b/packages/zendesk-client/src/index.ts
new file mode 100644
index 0000000000000..cf7bedd173eb6
--- /dev/null
+++ b/packages/zendesk-client/src/index.ts
@@ -0,0 +1,7 @@
+export { useZendeskMessagingBindings } from './use-zendesk-messaging-bindings';
+export { useLoadZendeskMessaging } from './use-load-zendesk-messaging';
+export { useCanConnectToZendeskMessaging } from './use-can-connect-to-zendesk-messaging';
+export { useOpenZendeskMessaging } from './use-open-zendesk-messaging';
+export { useZendeskMessagingAvailability } from './use-zendesk-messaging-availability';
+export { ZENDESK_SOURCE_URL_TICKET_FIELD_ID } from './constants';
+export type { ZendeskConfigName, MessagingGroup } from './types';
diff --git a/packages/zendesk-client/src/types.ts b/packages/zendesk-client/src/types.ts
new file mode 100644
index 0000000000000..784de603a2b8c
--- /dev/null
+++ b/packages/zendesk-client/src/types.ts
@@ -0,0 +1,39 @@
+export type ZendeskConfigName =
+	| 'zendesk_support_chat_key'
+	| 'zendesk_presales_chat_key'
+	| 'zendesk_presales_chat_key_akismet'
+	| 'zendesk_presales_chat_key_jp_checkout'
+	| 'zendesk_presales_chat_key_jp_agency_dashboard';
+
+export type APIFetchOptions = {
+	global: boolean;
+	path: string;
+};
+
+export type UserFields = {
+	messaging_ai_chat_id?: string;
+	messaging_initial_message?: string;
+	messaging_plan?: string;
+	messaging_source?: string;
+	messaging_url?: string;
+};
+
+export type MessagingAuth = {
+	user: {
+		jwt: string;
+	};
+};
+
+export type MessagingAvailability = {
+	is_available: boolean;
+};
+
+export type MessagingGroup = 'jp_presales' | 'wpcom_messaging' | 'wpcom_presales';
+
+export type MessagingMetadata = {
+	aiChatId?: string;
+	message?: string;
+	siteUrl?: string;
+	onError?: () => void;
+	onSuccess?: () => void;
+};
diff --git a/packages/zendesk-client/src/use-authenticate-zendesk-messaging.ts b/packages/zendesk-client/src/use-authenticate-zendesk-messaging.ts
new file mode 100644
index 0000000000000..9ac659e0bb712
--- /dev/null
+++ b/packages/zendesk-client/src/use-authenticate-zendesk-messaging.ts
@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import config from '@automattic/calypso-config';
+import { useQuery } from '@tanstack/react-query';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+import wpcomRequest, { canAccessWpcomApis } from 'wpcom-proxy-request';
+/**
+ * Internal dependencies
+ */
+import type { APIFetchOptions, MessagingAuth } from './types';
+
+let isLoggedIn = false;
+
+export function useAuthenticateZendeskMessaging( enabled = true ) {
+	const currentEnvironment = config( 'env_id' );
+	const isTestMode = currentEnvironment === 'development';
+
+	return useQuery( {
+		queryKey: [ 'getMessagingAuth', isTestMode ],
+		queryFn: () => {
+			const params = { type: 'zendesk', test_mode: String( isTestMode ) };
+			const wpcomParams = new URLSearchParams( params );
+
+			return canAccessWpcomApis()
+				? wpcomRequest< MessagingAuth >( {
+						path: '/help/authenticate/chat',
+						query: wpcomParams.toString(),
+						apiNamespace: 'wpcom/v2',
+						apiVersion: '2',
+						method: 'POST',
+				  } )
+				: apiFetch< MessagingAuth >( {
+						path: addQueryArgs( '/help-center/authenticate/chat', params ),
+						method: 'POST',
+						global: true,
+				  } as APIFetchOptions );
+		},
+		staleTime: 7 * 24 * 60 * 60 * 1000, // 1 week (JWT is actually 2 weeks, but lets be on the safe side)
+		enabled,
+		select: ( messagingAuth ) => {
+			if ( ! isLoggedIn ) {
+				const jwt = messagingAuth?.user.jwt;
+				if ( typeof window.zE !== 'function' || ! jwt ) {
+					return;
+				}
+
+				window.zE( 'messenger', 'loginUser', function ( callback ) {
+					isLoggedIn = true;
+					callback( jwt );
+				} );
+			}
+			return { isLoggedIn };
+		},
+	} );
+}
diff --git a/packages/help-center/src/hooks/use-can-connect-to-zendesk.ts b/packages/zendesk-client/src/use-can-connect-to-zendesk-messaging.ts
similarity index 85%
rename from packages/help-center/src/hooks/use-can-connect-to-zendesk.ts
rename to packages/zendesk-client/src/use-can-connect-to-zendesk-messaging.ts
index 20313130c1ed6..036391f0e1f32 100644
--- a/packages/help-center/src/hooks/use-can-connect-to-zendesk.ts
+++ b/packages/zendesk-client/src/use-can-connect-to-zendesk-messaging.ts
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-export function useCanConnectToZendesk( enabled = true ) {
+export function useCanConnectToZendeskMessaging( enabled = true ) {
 	return useQuery( {
 		queryKey: [ 'canConnectToZendesk' ],
 		queryFn: async () => {
diff --git a/packages/help-center/src/hooks/use-zendesk-messaging.ts b/packages/zendesk-client/src/use-load-zendesk-messaging.ts
similarity index 75%
rename from packages/help-center/src/hooks/use-zendesk-messaging.ts
rename to packages/zendesk-client/src/use-load-zendesk-messaging.ts
index b9c9a1f8baa26..332a88bd28df9 100644
--- a/packages/help-center/src/hooks/use-zendesk-messaging.ts
+++ b/packages/zendesk-client/src/use-load-zendesk-messaging.ts
@@ -7,25 +7,20 @@ import { useEffect, useState } from '@wordpress/element';
 /**
  * Internal Dependencies
  */
-import { useMessagingAuth } from './';
+import { ZENDESK_SCRIPT_ID } from './constants';
+import { useAuthenticateZendeskMessaging } from './use-authenticate-zendesk-messaging';
+import type { ZendeskConfigName } from './types';
 
-export type ZendeskConfigName =
-	| 'zendesk_support_chat_key'
-	| 'zendesk_presales_chat_key'
-	| 'zendesk_presales_chat_key_akismet'
-	| 'zendesk_presales_chat_key_jp_checkout'
-	| 'zendesk_presales_chat_key_jp_agency_dashboard';
-
-const ZENDESK_SCRIPT_ID = 'ze-snippet';
-
-export default function useZendeskMessaging(
+export function useLoadZendeskMessaging(
 	keyConfigName: ZendeskConfigName,
 	enabled = true,
 	tryAuthenticating = true
 ) {
 	const [ isMessagingScriptLoaded, setMessagingScriptLoaded ] = useState( false );
 	const zendeskKey: string = config( keyConfigName );
-	const { data: authData } = useMessagingAuth( isMessagingScriptLoaded && tryAuthenticating );
+	const { data: authData } = useAuthenticateZendeskMessaging(
+		isMessagingScriptLoaded && tryAuthenticating
+	);
 	useEffect( () => {
 		if ( ! enabled || isMessagingScriptLoaded ) {
 			return;
diff --git a/packages/zendesk-client/src/use-open-zendesk-messaging.ts b/packages/zendesk-client/src/use-open-zendesk-messaging.ts
new file mode 100644
index 0000000000000..17090483c995a
--- /dev/null
+++ b/packages/zendesk-client/src/use-open-zendesk-messaging.ts
@@ -0,0 +1,52 @@
+import { ZENDESK_SOURCE_URL_TICKET_FIELD_ID } from './constants';
+import { useLoadZendeskMessaging } from './use-load-zendesk-messaging';
+import { useUpdateZendeskUserFields } from './use-update-zendesk-user-fields';
+import type { ZendeskConfigName, MessagingMetadata } from './types';
+
+export function useOpenZendeskMessaging(
+	sectionName: string,
+	keyConfigName: ZendeskConfigName = 'zendesk_support_chat_key',
+	enabled = true
+) {
+	const { isPending: isSubmittingZendeskUserFields, mutateAsync: submitUserFields } =
+		useUpdateZendeskUserFields();
+
+	const { isMessagingScriptLoaded } = useLoadZendeskMessaging( keyConfigName, enabled, enabled );
+
+	const openZendeskWidget = ( {
+		aiChatId,
+		message = '',
+		siteUrl = 'No site selected',
+		onError,
+		onSuccess,
+	}: MessagingMetadata ) => {
+		submitUserFields( {
+			messaging_ai_chat_id: aiChatId,
+			messaging_source: sectionName,
+			messaging_initial_message: message,
+			messaging_plan: '', // Will be filled out by backend
+			messaging_url: siteUrl,
+		} )
+			.then( () => {
+				onSuccess?.();
+				if ( typeof window.zE === 'function' ) {
+					window.zE( 'messenger', 'open' );
+					window.zE( 'messenger', 'show' );
+					window.zE( 'messenger:set', 'conversationFields', [
+						{ id: ZENDESK_SOURCE_URL_TICKET_FIELD_ID, value: window.location.href },
+					] );
+				} else {
+					throw new Error( 'Zendesk chat widget not loaded' );
+				}
+			} )
+			.catch( () => {
+				onError?.();
+			} );
+	};
+
+	return {
+		isOpeningZendeskWidget:
+			enabled && ( isSubmittingZendeskUserFields || ! isMessagingScriptLoaded ),
+		openZendeskWidget,
+	};
+}
diff --git a/packages/help-center/src/data/use-update-zendesk-user-fields.ts b/packages/zendesk-client/src/use-update-zendesk-user-fields.ts
similarity index 68%
rename from packages/help-center/src/data/use-update-zendesk-user-fields.ts
rename to packages/zendesk-client/src/use-update-zendesk-user-fields.ts
index 9c57e1ebd72e2..7d3fe96125864 100644
--- a/packages/help-center/src/data/use-update-zendesk-user-fields.ts
+++ b/packages/zendesk-client/src/use-update-zendesk-user-fields.ts
@@ -1,18 +1,17 @@
+/**
+ * External dependencies
+ */
 import { useMutation } from '@tanstack/react-query';
 import apiFetch, { APIFetchOptions } from '@wordpress/api-fetch';
 import wpcomRequest, { canAccessWpcomApis } from 'wpcom-proxy-request';
+/**
+ * Internal dependencies
+ */
+import type { UserFields } from './types';
 
-type ZendeskUserFields = {
-	messaging_ai_chat_id?: string;
-	messaging_initial_message?: string;
-	messaging_plan?: string;
-	messaging_source?: string;
-	messaging_url?: string;
-};
-
-export function useUpdateZendeskUserFieldsMutation() {
+export function useUpdateZendeskUserFields() {
 	return useMutation( {
-		mutationFn: ( userFields: ZendeskUserFields ) => {
+		mutationFn: ( userFields: UserFields ) => {
 			return canAccessWpcomApis()
 				? wpcomRequest( {
 						path: 'help/zendesk/update-user-fields',
diff --git a/packages/zendesk-client/src/use-zendesk-messaging-availability.ts b/packages/zendesk-client/src/use-zendesk-messaging-availability.ts
new file mode 100644
index 0000000000000..3b9b7138f26bb
--- /dev/null
+++ b/packages/zendesk-client/src/use-zendesk-messaging-availability.ts
@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import config from '@automattic/calypso-config';
+import { useQuery } from '@tanstack/react-query';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+import wpcomRequest, { canAccessWpcomApis } from 'wpcom-proxy-request';
+/**
+ * Internal dependencies
+ */
+import type { APIFetchOptions, MessagingAvailability, MessagingGroup } from './types';
+
+export function useZendeskMessagingAvailability( group: MessagingGroup, enabled = true ) {
+	return useQuery< MessagingAvailability >( {
+		queryKey: [ 'zendeskMessagingAvailability', group ],
+		queryFn: () => {
+			const currentEnvironment = config( 'env_id' );
+			const params = {
+				group: group as string,
+				environment: currentEnvironment === 'development' ? 'development' : 'production',
+			};
+			const wpcomParams = new URLSearchParams( params );
+
+			return canAccessWpcomApis()
+				? wpcomRequest< MessagingAvailability >( {
+						path: '/help/support-status/messaging',
+						query: wpcomParams.toString(),
+						apiNamespace: 'wpcom/v2',
+						apiVersion: '2',
+						method: 'GET',
+				  } )
+				: apiFetch< MessagingAvailability >( {
+						path: addQueryArgs( '/help-center/support-status/messaging', params ),
+						method: 'GET',
+						global: true,
+				  } as APIFetchOptions );
+		},
+		staleTime: 60 * 1000, // 1 minute
+		meta: {
+			persist: false,
+		},
+		enabled,
+	} );
+}
diff --git a/packages/zendesk-client/src/use-zendesk-messaging-bindings.ts b/packages/zendesk-client/src/use-zendesk-messaging-bindings.ts
new file mode 100644
index 0000000000000..8bbae24f3cdc7
--- /dev/null
+++ b/packages/zendesk-client/src/use-zendesk-messaging-bindings.ts
@@ -0,0 +1,60 @@
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import type { HelpCenterSelect } from '@automattic/data-stores';
+
+export function useZendeskMessagingBindings(
+	HelpCenterStore: string,
+	hasActiveChats: boolean,
+	isMessagingScriptLoaded: boolean
+) {
+	const { setShowMessagingLauncher, setShowMessagingWidget } = useDispatch( HelpCenterStore );
+	const { showMessagingLauncher, showMessagingWidget } = useSelect( ( select ) => {
+		const helpCenterSelect: HelpCenterSelect = select( HelpCenterStore );
+		return {
+			showMessagingLauncher: helpCenterSelect.isMessagingLauncherShown(),
+			showMessagingWidget: helpCenterSelect.isMessagingWidgetShown(),
+		};
+	}, [] );
+
+	useEffect( () => {
+		if ( typeof window.zE !== 'function' || ! isMessagingScriptLoaded ) {
+			return;
+		}
+
+		window.zE( 'messenger:on', 'open', function () {
+			setShowMessagingWidget( true );
+		} );
+		window.zE( 'messenger:on', 'close', function () {
+			setShowMessagingWidget( false );
+		} );
+		window.zE( 'messenger:on', 'unreadMessages', function ( count ) {
+			if ( Number( count ) > 0 ) {
+				setShowMessagingLauncher( true );
+			}
+		} );
+	}, [ isMessagingScriptLoaded, setShowMessagingLauncher, setShowMessagingWidget ] );
+
+	useEffect( () => {
+		if ( typeof window.zE !== 'function' || ! isMessagingScriptLoaded ) {
+			return;
+		}
+		// `showMessagingLauncher` starts off as undefined. This check means don't touch the widget if we're in default state.
+		if ( typeof showMessagingLauncher === 'boolean' ) {
+			window.zE( 'messenger', showMessagingLauncher ? 'show' : 'hide' );
+		}
+	}, [ showMessagingLauncher, isMessagingScriptLoaded ] );
+
+	useEffect( () => {
+		if ( typeof window.zE !== 'function' || ! isMessagingScriptLoaded ) {
+			return;
+		}
+
+		window.zE( 'messenger', showMessagingWidget ? 'open' : 'close' );
+	}, [ showMessagingWidget, isMessagingScriptLoaded ] );
+
+	useEffect( () => {
+		if ( hasActiveChats ) {
+			setShowMessagingLauncher( true );
+		}
+	}, [ setShowMessagingLauncher, hasActiveChats ] );
+}
diff --git a/packages/zendesk-client/tsconfig-cjs.json b/packages/zendesk-client/tsconfig-cjs.json
new file mode 100644
index 0000000000000..a3e788252a240
--- /dev/null
+++ b/packages/zendesk-client/tsconfig-cjs.json
@@ -0,0 +1,7 @@
+{
+	"extends": "./tsconfig",
+	"compilerOptions": {
+		"module": "commonjs",
+		"outDir": "dist/cjs"
+	}
+}
diff --git a/packages/zendesk-client/tsconfig.json b/packages/zendesk-client/tsconfig.json
new file mode 100644
index 0000000000000..b28997be118de
--- /dev/null
+++ b/packages/zendesk-client/tsconfig.json
@@ -0,0 +1,11 @@
+{
+	"extends": "@automattic/calypso-typescript-config/ts-package.json",
+	"compilerOptions": {
+		"outDir": "dist/esm",
+		"declarationDir": "dist/types",
+		"rootDir": "src"
+	},
+	"include": [ "src", "types.d.ts" ],
+	"exclude": [ "**/test/*" ],
+	"references": [ { "path": "../data-stores" }, { "path": "../calypso-config" } ]
+}
diff --git a/packages/zendesk-client/types.d.ts b/packages/zendesk-client/types.d.ts
new file mode 100644
index 0000000000000..325e71b25c2c6
--- /dev/null
+++ b/packages/zendesk-client/types.d.ts
@@ -0,0 +1,9 @@
+interface Window {
+	zE?: (
+		action: string,
+		value: string,
+		handler?:
+			| ( ( callback: ( data: string | number ) => void ) => void )
+			| { id: number; value: string }[]
+	) => void;
+}
diff --git a/yarn.lock b/yarn.lock
index 07b9c36358dcc..230edff518e27 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1085,6 +1085,7 @@ __metadata:
     "@automattic/odie-client": "workspace:^"
     "@automattic/viewport": "workspace:^"
     "@automattic/viewport-react": "workspace:^"
+    "@automattic/zendesk-client": "workspace:^"
     "@popperjs/core": "npm:^2.11.8"
     "@storybook/addon-backgrounds": "npm:^7.6.19"
     "@tanstack/react-query": "npm:^5.15.5"
@@ -2319,6 +2320,22 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@automattic/zendesk-client@workspace:^, @automattic/zendesk-client@workspace:packages/zendesk-client":
+  version: 0.0.0-use.local
+  resolution: "@automattic/zendesk-client@workspace:packages/zendesk-client"
+  dependencies:
+    "@automattic/calypso-typescript-config": "workspace:^"
+    "@tanstack/react-query": "npm:^5.15.5"
+    "@wordpress/api-fetch": "npm:^7.2.0"
+    "@wordpress/element": "npm:^6.2.0"
+    "@wordpress/url": "npm:^4.2.0"
+    typescript: "npm:^5.3.3"
+    wpcom-proxy-request: "workspace:^"
+  peerDependencies:
+    react: ^18.2.0
+  languageName: unknown
+  linkType: soft
+
 "@aw-web-design/x-default-browser@npm:1.4.126":
   version: 1.4.126
   resolution: "@aw-web-design/x-default-browser@npm:1.4.126"
@@ -12407,6 +12424,7 @@ __metadata:
     "@automattic/webpack-inline-constant-exports-plugin": "workspace:^"
     "@automattic/wpcom-checkout": "workspace:^"
     "@automattic/wpcom-template-parts": "workspace:^"
+    "@automattic/zendesk-client": "workspace:^"
     "@babel/core": "npm:^7.24.5"
     "@emotion/css": "npm:^11.11.2"
     "@emotion/jest": "npm:^11.11.0"
@@ -33373,6 +33391,7 @@ __metadata:
     "@automattic/whats-new": "workspace:^"
     "@automattic/wp-babel-makepot": "workspace:^"
     "@automattic/wpcom-template-parts": "workspace:^"
+    "@automattic/zendesk-client": "workspace:^"
     "@babel/core": "npm:^7.24.5"
     "@babel/eslint-parser": "npm:^7.24.5"
     "@babel/register": "npm:^7.23.7"