Odie Client: add Zendesk conversation to chat (#95330)

Co-authored-by: heavyweight <kpapazov@gmail.com>

packages/data-stores/src/help-center/actions.ts

@@ -66,6 +66,12 @@ export const setIsMinimized = ( minimized: boolean ) =>
 		minimized,
 	} ) as const;
 
+export const setIsChatLoaded = ( isChatLoaded: boolean ) =>
+	( {
+		type: 'HELP_CENTER_SET_IS_CHAT_LOADED',
+		isChatLoaded,
+	} ) as const;
+
 export const setShowMessagingLauncher = ( show: boolean ) =>
 	( {
 		type: 'HELP_CENTER_SET_SHOW_MESSAGING_LAUNCHER',
@@ -153,6 +159,7 @@ export type HelpCenterAction =
 			| typeof setUserDeclaredSiteUrl
 			| typeof setUnreadCount
 			| typeof setIsMinimized
+			| typeof setIsChatLoaded
 			| typeof setNavigateToRoute
 			| typeof setOdieInitialPromptText
 			| typeof setOdieBotNameSlug

packages/data-stores/src/help-center/reducer.ts

@@ -49,6 +49,14 @@ const isMinimized: Reducer< boolean, HelpCenterAction > = ( state = false, actio
 	return state;
 };
 
+const isChatLoaded: Reducer< boolean, HelpCenterAction > = ( state = false, action ) => {
+	switch ( action.type ) {
+		case 'HELP_CENTER_SET_IS_CHAT_LOADED':
+			return action.isChatLoaded;
+	}
+	return state;
+};
+
 const subject: Reducer< string | undefined, HelpCenterAction > = ( state, action ) => {
 	if ( action.type === 'HELP_CENTER_RESET_STORE' ) {
 		return undefined;
@@ -131,6 +139,7 @@ const reducer = combineReducers( {
 	userDeclaredSiteUrl,
 	hasSeenWhatsNewModal,
 	isMinimized,
+	isChatLoaded,
 	unreadCount,
 	navigateToRoute,
 	odieInitialPromptText,

packages/data-stores/src/help-center/selectors.ts

@@ -9,6 +9,7 @@ export const getUserDeclaredSiteUrl = ( state: State ) => state.userDeclaredSite
 export const getUserDeclaredSite = ( state: State ) => state.userDeclaredSite;
 export const getUnreadCount = ( state: State ) => state.unreadCount;
 export const getIsMinimized = ( state: State ) => state.isMinimized;
+export const getIsChatLoaded = ( state: State ) => state.isChatLoaded;
 export const getHasSeenWhatsNewModal = ( state: State ) => state.hasSeenWhatsNewModal;
 export const getNavigateToRoute = ( state: State ) => state.navigateToRoute;
 export const getOdieInitialPromptText = ( state: State ) => state.odieInitialPromptText;

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

@@ -3,6 +3,7 @@
  * External Dependencies
  */
 import { recordTracksEvent } from '@automattic/calypso-analytics';
+import config from '@automattic/calypso-config';
 import OdieAssistantProvider, { OdieAssistant } from '@automattic/odie-client';
 import { useEffect } from '@wordpress/element';
 import { useNavigate } from 'react-router-dom';
@@ -42,6 +43,7 @@ export function HelpCenterChat( {
 	return (
 		<OdieAssistantProvider
 			isLoadingEnvironment={ isLoadingEnvironment }
+			shouldUseHelpCenterExperience={ config.isEnabled( 'help-center-experience' ) }
 			currentUser={ currentUser }
 			initialUserMessage={ searchTerm }
 			selectedSiteId={ site?.ID as number }

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

@@ -0,0 +1,66 @@
+import { recordTracksEvent } from '@automattic/calypso-analytics';
+import { HelpCenterSelect } from '@automattic/data-stores';
+import {
+	useSmooch,
+	useLoadZendeskMessaging,
+	useAuthenticateZendeskMessaging,
+} from '@automattic/zendesk-client';
+import { useSelect, useDispatch as useDataStoreDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import { useChatStatus } from '../hooks';
+import { HELP_CENTER_STORE } from '../stores';
+
+const HelpCenterSmooch: React.FC = () => {
+	const { data: authData } = useAuthenticateZendeskMessaging( true, 'messenger' );
+	const smoochRef = useRef< HTMLDivElement >( null );
+	const { isHelpCenterShown } = useSelect( ( select ) => {
+		const helpCenterSelect: HelpCenterSelect = select( HELP_CENTER_STORE );
+		return {
+			isHelpCenterShown: helpCenterSelect.isHelpCenterShown(),
+		};
+	}, [] );
+
+	const { isEligibleForChat } = useChatStatus();
+	const { isMessagingScriptLoaded } = useLoadZendeskMessaging(
+		'zendesk_support_chat_key',
+		isHelpCenterShown && isEligibleForChat,
+		isEligibleForChat
+	);
+	const { setIsChatLoaded } = useDataStoreDispatch( HELP_CENTER_STORE );
+
+	const { initSmooch, destroy, renderSmooch } = useSmooch();
+
+	// Initialize Smooch which communicates with Zendesk
+	useEffect( () => {
+		if ( isMessagingScriptLoaded && authData?.isLoggedIn ) {
+			if ( authData?.jwt && authData?.externalId ) {
+				initSmooch( authData )
+					.then( () => {
+						setIsChatLoaded( true );
+						recordTracksEvent( 'calypso_smooch_messenger_init', {
+							success: true,
+							error: '',
+						} );
+					} )
+					.catch( ( error ) => {
+						setIsChatLoaded( true );
+						recordTracksEvent( 'calypso_smooch_messenger_init', {
+							success: false,
+							error: error.message,
+						} );
+					} );
+				if ( smoochRef.current ) {
+					renderSmooch( smoochRef.current );
+				}
+			}
+		}
+
+		return () => {
+			destroy();
+		};
+	}, [ isMessagingScriptLoaded, authData ] );
+
+	return <div ref={ smoochRef } style={ { display: 'none' } }></div>;
+};
+
+export default HelpCenterSmooch;

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

@@ -3,7 +3,7 @@
  * External Dependencies
  */
 import { initializeAnalytics } from '@automattic/calypso-analytics';
-import { useZendeskMessagingBindings, useLoadZendeskMessaging } from '@automattic/zendesk-client';
+import config from '@automattic/calypso-config';
 import { useSelect } from '@wordpress/data';
 import { createPortal, useEffect, useRef } from '@wordpress/element';
 /**
@@ -14,11 +14,12 @@ import {
 	useHelpCenterContext,
 	type HelpCenterRequiredInformation,
 } from '../contexts/HelpCenterContext';
-import { useChatStatus, useActionHooks } from '../hooks';
+import { useActionHooks } from '../hooks';
 import { useOpeningCoordinates } from '../hooks/use-opening-coordinates';
 import { HELP_CENTER_STORE } from '../stores';
 import { Container } from '../types';
 import HelpCenterContainer from './help-center-container';
+import HelpCenterSmooch from './help-center-smooch';
 import type { HelpCenterSelect } from '@automattic/data-stores';
 import '../styles.scss';
 
@@ -28,14 +29,15 @@ const HelpCenter: React.FC< Container > = ( {
 	currentRoute = window.location.pathname + window.location.search,
 } ) => {
 	const portalParent = useRef( document.createElement( 'div' ) ).current;
+	const shouldUseHelpCenterExperience = config.isEnabled( 'help-center-experience' );
+
 	const { isHelpCenterShown, isMinimized } = useSelect( ( select ) => {
 		const helpCenterSelect: HelpCenterSelect = select( HELP_CENTER_STORE );
 		return {
 			isHelpCenterShown: helpCenterSelect.isHelpCenterShown(),
 			isMinimized: helpCenterSelect.getIsMinimized(),
 		};
 	}, [] );
-
 	const { currentUser } = useHelpCenterContext();
 
 	useEffect( () => {
@@ -46,15 +48,6 @@ const HelpCenter: React.FC< Container > = ( {
 
 	useActionHooks();
 
-	const { hasActiveChats, isEligibleForChat } = useChatStatus();
-	const { isMessagingScriptLoaded } = useLoadZendeskMessaging(
-		'zendesk_support_chat_key',
-		( isHelpCenterShown && isEligibleForChat ) || hasActiveChats,
-		isEligibleForChat || hasActiveChats
-	);
-
-	useZendeskMessagingBindings( HELP_CENTER_STORE, hasActiveChats, isMessagingScriptLoaded );
-
 	const openingCoordinates = useOpeningCoordinates( isHelpCenterShown, isMinimized );
 
 	useEffect( () => {
@@ -73,12 +66,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 }
+			/>
+			{ shouldUseHelpCenterExperience && <HelpCenterSmooch /> }
+		</>,
 		portalParent
 	);
 };

packages/odie-client/src/assets/human-avatar.tsx

@@ -0,0 +1,28 @@
+export const HumanAvatar = () => (
+	<svg
+		width="38"
+		height="38"
+		viewBox="0 0 38 38"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlnsXlink="http://www.w3.org/1999/xlink"
+	>
+		<g clipPath="url(#clip0_351_8437)">
+			<rect width="38" height="38" rx="8" fill="url(#pattern0_351_8437)" />
+		</g>
+		<defs>
+			<pattern id="pattern0_351_8437" patternContentUnits="objectBoundingBox" width="1" height="1">
+				<use xlinkHref="#image0_351_8437" transform="scale(0.00833333)" />
+			</pattern>
+			<clipPath id="clip0_351_8437">
+				<rect width="38" height="38" rx="19" fill="white" />
+			</clipPath>
+			<image
+				id="image0_351_8437"
+				width="120"
+				height="120"
+				xlinkHref="data:image/png;base64,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"
+			/>
+		</defs>
+	</svg>
+);

packages/odie-client/src/assets/index.ts

@@ -0,0 +1,2 @@
+export { WapuuAvatar } from './wapuu-avatar';
+export { HumanAvatar } from './human-avatar';

packages/odie-client/src/assets/wapuu-avatar.tsx

@@ -0,0 +1,36 @@
+export const WapuuAvatar = ( { className }: { className: string } ) => (
+	<svg
+		className={ className }
+		width="38"
+		height="38"
+		viewBox="0 0 38 38"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<circle cx="19" cy="19" r="19" fill="#FFD200" />
+		<g clipPath="url(#clip0_286_11962)">
+			<circle cx="30.0846" cy="15.8333" r="1.58333" fill="black" />
+		</g>
+		<g clipPath="url(#clip1_286_11962)">
+			<circle cx="7.91535" cy="15.8333" r="1.58333" fill="black" />
+		</g>
+		<path
+			d="M16.0962 18.1727C15.9468 17.8145 16.1564 17.4124 16.5385 17.3018L16.5939 17.2868C18.1681 16.8584 19.8321 16.8584 21.4063 17.2868L21.4617 17.3018C21.8438 17.4124 22.0534 17.8145 21.904 18.1727L21.7701 18.4927C21.5689 18.9899 21.1921 19.4013 20.7108 19.6633C19.6453 20.2391 18.3549 20.2391 17.2894 19.6633C16.8081 19.4013 16.4313 18.9899 16.2301 18.4927L16.0962 18.1727Z"
+			fill="black"
+		/>
+		<path
+			d="M7.12329 23.75V23.75C10.3632 26.5182 15.0921 26.6791 18.5169 24.1303L18.8234 23.8885C18.9359 23.8017 19.0634 23.8017 19.1759 23.8885L19.4824 24.1303C22.9072 26.6791 27.6361 26.5182 30.876 23.75V23.75"
+			stroke="black"
+			strokeWidth="1.58333"
+			strokeLinecap="round"
+		/>
+		<defs>
+			<clipPath id="clip0_286_11962">
+				<circle cx="30.0846" cy="15.8333" r="1.58333" fill="white" />
+			</clipPath>
+			<clipPath id="clip1_286_11962">
+				<circle cx="7.91535" cy="15.8333" r="1.58333" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+);

packages/odie-client/src/components/message/dislike-feedback-message.tsx

@@ -2,10 +2,11 @@ import { useI18n } from '@wordpress/react-i18n';
 import Markdown from 'react-markdown';
 import { useOdieAssistantContext } from '../../context';
 import CustomALink from './custom-a-link';
+import { GetSupport } from './get-support';
 import { uriTransformer } from './uri-transformer';
 
 export const DislikeFeedbackMessage = () => {
-	const { extraContactOptions } = useOdieAssistantContext();
+	const { shouldUseHelpCenterExperience, extraContactOptions } = useOdieAssistantContext();
 	const { _x } = useI18n();
 	return (
 		<>
@@ -24,7 +25,7 @@ export const DislikeFeedbackMessage = () => {
 					)
 				}
 			</Markdown>
-			{ extraContactOptions }
+			{ shouldUseHelpCenterExperience ? <GetSupport /> : extraContactOptions }
 		</>
 	);
 };