From da5ee03e6062895981b09273c4f8bf276c4072a6 Mon Sep 17 00:00:00 2001
From: Kosta <heavyweight@users.noreply.github.com>
Date: Fri, 17 Jan 2025 17:59:38 +0100
Subject: [PATCH] Infer zd client id by listening to sent messages (#98550)

---
 .../src/components/help-center-smooch.tsx      | 18 +++++++++++++++++-
 .../help-center-support-chat-message.tsx       |  2 +-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/help-center/src/components/help-center-smooch.tsx b/packages/help-center/src/components/help-center-smooch.tsx
index 403028a8ff52a6..4236b29d13b491 100644
--- a/packages/help-center/src/components/help-center-smooch.tsx
+++ b/packages/help-center/src/components/help-center-smooch.tsx
@@ -16,6 +16,7 @@ import Smooch from 'smooch';
 import { useChatStatus } from '../hooks';
 import { HELP_CENTER_STORE } from '../stores';
 import { getClientId, getZendeskConversations } from './utils';
+import type { ZendeskMessage } from '@automattic/odie-client';
 
 const destroy = () => {
 	Smooch.destroy();
@@ -64,7 +65,7 @@ const HelpCenterSmooch: React.FC< { enableAuth: boolean } > = ( { enableAuth } )
 	const getUnreadNotifications = useGetUnreadConversations();
 
 	const getUnreadListener = useCallback(
-		( message: unknown, data: { conversation: { id: string } } ) => {
+		( message: ZendeskMessage, data: { conversation: { id: string } } ) => {
 			if ( isHelpCenterShown ) {
 				return;
 			}
@@ -74,6 +75,18 @@ const HelpCenterSmooch: React.FC< { enableAuth: boolean } > = ( { enableAuth } )
 		[ isHelpCenterShown ]
 	);
 
+	const clientIdListener = useCallback(
+		( message: ZendeskMessage ) => {
+			if ( message?.source?.type === 'web' && message.source?.id ) {
+				setZendeskClientId( message.source?.id );
+				// Unregister the listener after setting the client ID
+				// @ts-expect-error -- 'off' is not part of the def.
+				Smooch?.off?.( 'message:sent', clientIdListener );
+			}
+		},
+		[ setZendeskClientId ]
+	);
+
 	// Initialize Smooch which communicates with Zendesk
 	useEffect( () => {
 		if ( isMessagingScriptLoaded && authData?.isLoggedIn ) {
@@ -110,11 +123,14 @@ const HelpCenterSmooch: React.FC< { enableAuth: boolean } > = ( { enableAuth } )
 			getUnreadNotifications( allConversations );
 			setZendeskClientId( getClientId( allConversations ) );
 			Smooch.on( 'message:received', getUnreadListener );
+			Smooch.on( 'message:sent', clientIdListener );
 		}
 
 		return () => {
 			// @ts-expect-error -- 'off' is not part of the def.
 			Smooch?.off?.( 'message:received', getUnreadListener );
+			// @ts-expect-error -- 'off' is not part of the def.
+			Smooch?.off?.( 'message:sent', clientIdListener );
 		};
 	}, [ getUnreadListener, isChatLoaded, getUnreadNotifications, setZendeskClientId ] );
 
diff --git a/packages/help-center/src/components/help-center-support-chat-message.tsx b/packages/help-center/src/components/help-center-support-chat-message.tsx
index 136798c199abfa..2c990e5388da1b 100644
--- a/packages/help-center/src/components/help-center-support-chat-message.tsx
+++ b/packages/help-center/src/components/help-center-support-chat-message.tsx
@@ -1,7 +1,6 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { Gravatar } from '@automattic/components';
 import { getRelativeTimeString, useLocale } from '@automattic/i18n-utils';
-import { type ZendeskMessage } from '@automattic/odie-client';
 import { HumanAvatar } from '@automattic/odie-client/src/assets';
 import { useGetSupportInteractionById } from '@automattic/odie-client/src/data/use-get-support-interaction-by-id';
 import { useDispatch as useDataStoreDispatch } from '@wordpress/data';
@@ -11,6 +10,7 @@ import clsx from 'clsx';
 import { Link } from 'react-router-dom';
 import { useHelpCenterContext } from '../contexts/HelpCenterContext';
 import { HELP_CENTER_STORE } from '../stores';
+import type { ZendeskMessage } from '@automattic/odie-client';
 
 import './help-center-support-chat-message.scss';