Help Center: add Zendesk to Wapuu

packages/help-center/src/components/help-center-odie.tsx

@@ -22,7 +22,6 @@ import { HELP_CENTER_STORE } from '../stores';
  * Internal Dependencies
  */
 import { BackButtonHeader } from './back-button';
-import { ExtraContactOptions } from './help-center-extra-contact-option';
 import './help-center-odie.scss';
 import type { HelpCenterSelect } from '@automattic/data-stores';
 import type { OdieAllowedBots } from '@automattic/odie-client/src/types/index';
@@ -108,12 +107,8 @@ export function HelpCenterOdie( {
 	);
 
 	const navigateToContactOptions = useCallback( () => {
-		if ( isUserEligible ) {
-			navigate( '/contact-options' );
-		} else {
-			navigate( '/contact-form?mode=FORUM' );
-		}
-	}, [ navigate, isUserEligible ] );
+		navigate( '/contact-options' );
+	}, [ navigate ] );
 
 	const trackEvent = useCallback(
 		( eventName: string, properties: Record< string, unknown > = {} ) => {
@@ -135,10 +130,11 @@ export function HelpCenterOdie( {
 				logger={ trackEvent }
 				loggerEventNamePrefix="calypso_odie"
 				selectedSiteId={ site?.ID as number }
-				extraContactOptions={ <ExtraContactOptions isUserEligible={ isUserEligible } /> }
 				navigateToContactOptions={ navigateToContactOptions }
 				navigateToSupportDocs={ navigateToSupportDocs }
 				isUserEligible={ isUserEligible }
+				selectedSiteUrl={ site?.URL as string }
+				sectionName=""
 			>
 				<div className="help-center__container-content-odie">
 					<div className="help-center__container-odie-header">

packages/help-center/src/components/help-center.tsx

@@ -3,8 +3,8 @@
  * External Dependencies
  */
 import { initializeAnalytics } from '@automattic/calypso-analytics';
-import { useZendeskMessagingBindings, useLoadZendeskMessaging } from '@automattic/zendesk-client';
-import { useSelect } from '@wordpress/data';
+import { useLoadZendeskMessaging, useSmooch } from '@automattic/zendesk-client';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { createPortal, useEffect, useRef } from '@wordpress/element';
 /**
  * Internal Dependencies
@@ -35,6 +35,7 @@ const HelpCenter: React.FC< Container > = ( {
 			isMinimized: helpCenterSelect.getIsMinimized(),
 		};
 	}, [] );
+	const { setUnreadCount } = useDispatch( HELP_CENTER_STORE );
 
 	const { currentUser } = useHelpCenterContext();
 
@@ -46,14 +47,31 @@ const HelpCenter: React.FC< Container > = ( {
 
 	useActionHooks();
 
-	const { hasActiveChats, isEligibleForChat } = useChatStatus();
+	const { isEligibleForChat } = useChatStatus();
 	const { isMessagingScriptLoaded } = useLoadZendeskMessaging(
 		'zendesk_support_chat_key',
-		( isHelpCenterShown && isEligibleForChat ) || hasActiveChats,
-		isEligibleForChat || hasActiveChats
+		isHelpCenterShown && isEligibleForChat,
+		isEligibleForChat
 	);
+	const { init, initSmooch, destroy, addUnreadCountListener } = useSmooch();
+	const ref = useRef( null );
 
-	useZendeskMessagingBindings( HELP_CENTER_STORE, hasActiveChats, isMessagingScriptLoaded );
+	useEffect( () => {
+		if ( isMessagingScriptLoaded && ref?.current ) {
+			initSmooch( ref.current );
+		}
+		return () => {
+			destroy();
+		};
+	}, [ isMessagingScriptLoaded, ref?.current ] );
+
+	useEffect( () => {
+		if ( init ) {
+			addUnreadCountListener( ( unreadCount: number ) => {
+				setUnreadCount( unreadCount );
+			} );
+		}
+	}, [ init, setUnreadCount ] );
 
 	const openingCoordinates = useOpeningCoordinates( isHelpCenterShown, isMinimized );
 
@@ -73,12 +91,15 @@ const HelpCenter: React.FC< Container > = ( {
 	}, [ portalParent, handleClose ] );
 
 	return createPortal(
-		<HelpCenterContainer
-			handleClose={ handleClose }
-			hidden={ hidden }
-			currentRoute={ currentRoute }
-			openingCoordinates={ openingCoordinates }
-		/>,
+		<>
+			<HelpCenterContainer
+				handleClose={ handleClose }
+				hidden={ hidden }
+				currentRoute={ currentRoute }
+				openingCoordinates={ openingCoordinates }
+			/>
+			<div ref={ ref } style={ { display: 'none' } }></div>
+		</>,
 		portalParent
 	);
 };

packages/odie-client/package.json

@@ -30,6 +30,7 @@
 	},
 	"dependencies": {
 		"@automattic/components": "^2.0.1",
+		"@automattic/zendesk-client": "workspace:^",
 		"@tanstack/react-query": "^5.15.5",
 		"@types/react": "^18.2.6",
 		"@wordpress/api-fetch": "7.2.0",

packages/odie-client/src/components/message/direct-escalation-link.tsx

@@ -1,8 +1,10 @@
 import { __ } from '@wordpress/i18n';
 import { useOdieAssistantContext } from '../../context';
+import { useNewHumanConversation } from '../../use-new-human-conversation';
 
 export const DirectEscalationLink = ( { messageId }: { messageId: number | undefined } ) => {
-	const { navigateToContactOptions, trackEvent, isUserEligible } = useOdieAssistantContext();
+	const { chat, navigateToContactOptions, trackEvent, isUserEligible } = useOdieAssistantContext();
+	const { newConversation } = useNewHumanConversation();
 
 	if ( ! isUserEligible ) {
 		return (
@@ -35,8 +37,8 @@ export const DirectEscalationLink = ( { messageId }: { messageId: number | undef
 						message_id: messageId,
 						is_user_eligible: true,
 					} );
-					if ( navigateToContactOptions ) {
-						navigateToContactOptions();
+					if ( chat.type !== 'human' ) {
+						newConversation();
 					}
 				} }
 				className="odie-button-link"