diff --git a/packages/help-center/src/components/help-center-odie.tsx b/packages/help-center/src/components/help-center-odie.tsx index 83ad149258ce3..2e48f69361e61 100644 --- a/packages/help-center/src/components/help-center-odie.tsx +++ b/packages/help-center/src/components/help-center-odie.tsx @@ -12,7 +12,7 @@ import OdieAssistantProvider, { } from '@automattic/odie-client'; import { useSelect } from '@wordpress/data'; import { useI18n } from '@wordpress/react-i18n'; -import React, { useCallback } from 'react'; +import React, { useState, useCallback } from 'react'; import { useNavigate, Navigate } from 'react-router-dom'; import PopoverMenuItem from 'calypso/components/popover-menu/item'; import { useHelpCenterContext } from '../contexts/HelpCenterContext'; @@ -22,7 +22,7 @@ import { HELP_CENTER_STORE } from '../stores'; * Internal Dependencies */ import { BackButtonHeader } from './back-button'; -import { ExtraContactOptions } from './help-center-extra-contact-option'; +import { HelpCenterZendesk } from './help-center-zendesk'; import './help-center-odie.scss'; import type { HelpCenterSelect } from '@automattic/data-stores'; import type { OdieAllowedBots } from '@automattic/odie-client/src/types/index'; @@ -79,6 +79,7 @@ export function HelpCenterOdie( { isUserEligible: boolean; searchTerm: string; } ): JSX.Element { + const [ messageHandler, setMessageHandler ] = useState( undefined ); const navigate = useNavigate(); const shouldUseWapuu = useShouldUseWapuu(); const preventOdieAccess = ! shouldUseWapuu && ! isUserEligible; @@ -135,12 +136,16 @@ export function HelpCenterOdie( { logger={ trackEvent } loggerEventNamePrefix="calypso_odie" selectedSiteId={ site?.ID as number } - extraContactOptions={ } navigateToContactOptions={ navigateToContactOptions } navigateToSupportDocs={ navigateToSupportDocs } isUserEligible={ isUserEligible } + messageHandler={ messageHandler } >
+
diff --git a/packages/help-center/src/components/help-center-zendesk.tsx b/packages/help-center/src/components/help-center-zendesk.tsx new file mode 100644 index 0000000000000..31aa08cd72962 --- /dev/null +++ b/packages/help-center/src/components/help-center-zendesk.tsx @@ -0,0 +1,65 @@ +import { useOdieAssistantContext } from '@automattic/odie-client'; +import { useSmooch } from '@automattic/zendesk-client'; +import { useEffect, useState } from 'react'; +import { useHelpCenterContext } from '../contexts/HelpCenterContext'; + +export const HelpCenterZendesk = ( { + setMessageHandler, + messageHandler, +}: { + setMessageHandler: any; + messageHandler: any; +} ) => { + const [ whoAreWeTalkingTo, setWhoAreWeTalkingTo ] = useState< 'odie' | 'human' >( 'odie' ); + const { chat, addMessage, clearChat } = useOdieAssistantContext(); + const { site } = useHelpCenterContext(); + const { createConversation, addMessengerListener, sendMessage } = useSmooch(); + + const interceptedUserMessageHandler = ( message: any ) => { + if ( sendMessage ) { + sendMessage( message?.content ); + } + }; + + const forwardedZendeskMessageHandler = ( message: any ) => { + if ( addMessage ) { + addMessage( { + content: message?.text, + role: 'human', + type: 'message', + } ); + } + }; + + // Listen for the transfer to human event. + useEffect( () => { + const lastMessage = chat.messages[ chat.messages.length - 1 ]; + + if ( lastMessage?.context?.flags?.forward_to_human_support ) { + clearChat(); + setWhoAreWeTalkingTo( 'human' ); + if ( createConversation ) { + createConversation( + { + messaging_initial_message: 'Passing in from Odie', + messaging_source: 'help-center', + messaging_site_id: site?.ID as number, + }, + { odieChatId: chat.chat_id as number } + ); + } + } + }, [ chat.messages ] ); + + // Switch to human + useEffect( () => { + if ( whoAreWeTalkingTo === 'human' && ! messageHandler ) { + setMessageHandler( interceptedUserMessageHandler ); + if ( addMessengerListener ) { + addMessengerListener( forwardedZendeskMessageHandler ); + } + } + }, [ whoAreWeTalkingTo ] ); + + return null; +}; diff --git a/packages/help-center/src/components/help-center.tsx b/packages/help-center/src/components/help-center.tsx index 9649de3872f7f..f05e4a91bb567 100644 --- a/packages/help-center/src/components/help-center.tsx +++ b/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 ) { + 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( -