Help Center: Open Zendesk with link

client/components/chat-button/index.tsx

@@ -118,17 +118,25 @@ const ChatButton: FC< Props > = ( {
 
 	const handleClick = () => {
 		if ( canConnectToZendesk ) {
-			openZendeskWidget( {
-				message: initialMessage,
-				siteUrl,
-				siteId,
-				onError,
-				onSuccess: () => {
-					onClick?.();
-					resetStore();
-					setShowHelpCenter( false );
-				},
-			} );
+			if ( chatIntent === 'PRECANCELLATION' ) {
+				onClick?.();
+				setShowHelpCenter( true );
+				setNavigateToRoute(
+					`/odie?provider=zendesk&initialMessage=${ initialMessage }&siteUrl=${ siteUrl }&siteId=${ siteId }`
+				);
+			} else {
+				openZendeskWidget( {
+					message: initialMessage,
+					siteUrl,
+					siteId,
+					onError,
+					onSuccess: () => {
+						onClick?.();
+						resetStore();
+						setShowHelpCenter( false );
+					},
+				} );
+			}
 		} else {
 			setNavigateToRoute( '/contact-form?mode=CHAT' );
 			setShowHelpCenter( true );

client/me/purchases/cancel-purchase/support-link.jsx

@@ -33,15 +33,10 @@ const CancelPurchaseSupportLink = ( { purchase } ) => {
 
 	const getHelp = useCallback( () => {
 		if ( isMessagingAvailable && canConnectToZendeskMessaging ) {
-			openZendeskWidget( {
-				siteUrl: siteUrl,
-				siteId: siteId,
-				message: `${ status }: Purchase cancellation flow`,
-				onSuccess: () => {
-					resetStore();
-					setShowHelpCenter( false );
-				},
-			} );
+			setShowHelpCenter( true );
+			setNavigateToRoute(
+				`/odie?provider=zendesk&initialMessage=Purchase cancellation flow&siteUrl=${ siteUrl }&siteId=${ siteId }`
+			);
 		} else {
 			setNavigateToRoute( '/contact-options' );
 			setShowHelpCenter( true );

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

@@ -5,7 +5,7 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import OdieAssistantProvider, { OdieAssistant } from '@automattic/odie-client';
 import { useEffect } from '@wordpress/element';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useHelpCenterContext } from '../contexts/HelpCenterContext';
 import { useShouldUseWapuu } from '../hooks';
 import { ExtraContactOptions } from './help-center-extra-contact-option';
@@ -24,7 +24,11 @@ export function HelpCenterChat( {
 	const shouldUseWapuu = useShouldUseWapuu();
 	const preventOdieAccess = ! shouldUseWapuu && ! isUserEligibleForPaidSupport;
 	const { currentUser, site, canConnectToZendesk } = useHelpCenterContext();
-	const { id: conversationId = null } = useParams();
+	const { search } = useLocation();
+	const params = new URLSearchParams( search );
+	const initialMessage = params.get( 'initialMessage' );
+	const siteUrl = params.get( 'siteUrl' );
+	const siteId = params.get( 'siteId' );
 
 	useEffect( () => {
 		if ( preventOdieAccess ) {
@@ -40,9 +44,9 @@ export function HelpCenterChat( {
 		<OdieAssistantProvider
 			currentUser={ currentUser }
 			canConnectToZendesk={ canConnectToZendesk }
-			selectedSiteId={ site?.ID as number }
-			selectedSiteURL={ site?.URL as string }
-			selectedConversationId={ conversationId }
+			selectedSiteId={ Number( siteId ) || ( site?.ID as number ) }
+			selectedSiteURL={ siteUrl || ( site?.URL as string ) }
+			initialMessage={ initialMessage }
 			isUserEligibleForPaidSupport={ isUserEligibleForPaidSupport }
 			extraContactOptions={
 				<ExtraContactOptions isUserEligible={ isUserEligibleForPaidSupport } />

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

@@ -1,10 +1,8 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { GetSupport } from '@automattic/odie-client/src/components/message/get-support';
-import { useManageSupportInteraction } from '@automattic/odie-client/src/data';
 import { useI18n } from '@wordpress/react-i18n';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { v4 as uuidv4 } from 'uuid';
 import { useHelpCenterContext } from '../contexts/HelpCenterContext';
 import { useSupportStatus } from '../data/use-support-status';
 import { useResetSupportInteraction } from '../hooks/use-reset-support-interaction';
@@ -23,7 +21,6 @@ const HelpCenterFeedbackForm = ( { postId }: { postId: number } ) => {
 	const { site } = useHelpCenterContext();
 	const navigate = useNavigate();
 	const resetSupportInteraction = useResetSupportInteraction();
-	const { startNewInteraction } = useManageSupportInteraction();
 
 	const handleFeedbackClick = ( value: number ) => {
 		setStartedFeedback( true );
@@ -61,10 +58,6 @@ const HelpCenterFeedbackForm = ( { postId }: { postId: number } ) => {
 		generateContactOnClickEvent( 'chat', 'calypso_helpcenter_feedback_contact_support' );
 		if ( isUserEligibleForPaidSupport ) {
 			await resetSupportInteraction();
-			startNewInteraction( {
-				event_source: 'help-center',
-				event_external_id: uuidv4(),
-			} );
 			navigate( '/odie' );
 		}
 	};

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

@@ -2,7 +2,6 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { Gridicon } from '@automattic/components';
 import { EllipsisMenu } from '@automattic/odie-client';
-import { useManageSupportInteraction } from '@automattic/odie-client/src/data';
 import { clearHelpCenterZendeskConversationStarted } from '@automattic/odie-client/src/utils/storage-utils';
 import { CardHeader, Button, Flex } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -11,7 +10,6 @@ import { closeSmall, chevronUp, lineSolid, commentContent, page, Icon } from '@w
 import { useI18n } from '@wordpress/react-i18n';
 import clsx from 'clsx';
 import { Route, Routes, useLocation, useSearchParams } from 'react-router-dom';
-import { v4 as uuidv4 } from 'uuid';
 import { usePostByUrl } from '../hooks';
 import { useResetSupportInteraction } from '../hooks/use-reset-support-interaction';
 import { DragIcon } from '../icons';
@@ -68,14 +66,9 @@ const SupportModeTitle = () => {
 const ChatEllipsisMenu = () => {
 	const { __ } = useI18n();
 	const resetSupportInteraction = useResetSupportInteraction();
-	const { startNewInteraction } = useManageSupportInteraction();
 
 	const clearChat = async () => {
 		await resetSupportInteraction();
-		startNewInteraction( {
-			event_source: 'help-center',
-			event_external_id: uuidv4(),
-		} );
 		clearHelpCenterZendeskConversationStarted();
 		recordTracksEvent( 'calypso_inlinehelp_clear_conversation' );
 	};

packages/help-center/src/hooks/use-action-hooks.ts

@@ -26,6 +26,7 @@ export const useActionHooks = () => {
 				);
 			},
 		},
+
 		/**
 		 * Open Help Center.
 		 */
@@ -37,6 +38,7 @@ export const useActionHooks = () => {
 				setShowHelpCenter( true );
 			},
 		},
+
 		/**
 		 * Open to Wapuu chat.
 		 */
@@ -49,6 +51,19 @@ export const useActionHooks = () => {
 				setShowHelpCenter( true );
 			},
 		},
+
+		/**
+		 * Open to Chat with Happiness Engineer.
+		 */
+		{
+			condition() {
+				return queryParams.get( 'help-center' ) === 'happiness-engineer';
+			},
+			action() {
+				setNavigateToRoute( '/odie?provider=zendesk' );
+				setShowHelpCenter( true );
+			},
+		},
 	];
 
 	useEffect( () => {

packages/help-center/src/hooks/use-reset-support-interaction.ts

@@ -2,7 +2,8 @@ import { HelpCenterSelect } from '@automattic/data-stores';
 import { HELP_CENTER_STORE } from '@automattic/help-center/src/stores';
 import { useManageSupportInteraction } from '@automattic/odie-client/src/data';
 import { useQueryClient } from '@tanstack/react-query';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
+import { v4 as uuidv4 } from 'uuid';
 
 export const useResetSupportInteraction = () => {
 	const { currentSupportInteraction } = useSelect( ( select ) => {
@@ -11,19 +12,21 @@ export const useResetSupportInteraction = () => {
 			currentSupportInteraction: store.getCurrentSupportInteraction(),
 		};
 	}, [] );
-	const { setCurrentSupportInteraction } = useDispatch( HELP_CENTER_STORE );
-	const { resolveInteraction } = useManageSupportInteraction();
+	const { startNewInteraction, resolveInteraction } = useManageSupportInteraction();
 	const queryClient = useQueryClient();
 
-	const reset = async () => {
+	return async () => {
 		if ( currentSupportInteraction ) {
 			resolveInteraction( { interactionId: currentSupportInteraction.uuid } );
+
 			await queryClient.invalidateQueries( {
 				queryKey: [ 'support-interactions', 'get-interactions', 'help-center' ],
 			} );
-			setCurrentSupportInteraction( null );
+
+			await startNewInteraction( {
+				event_source: 'help-center',
+				event_external_id: uuidv4(),
+			} );
 		}
 	};
-
-	return reset;
 };

packages/odie-client/src/components/message/messages-container.tsx

@@ -1,9 +1,15 @@
+import { useResetSupportInteraction } from '@automattic/help-center/src/hooks/use-reset-support-interaction';
 import { getShortDateString } from '@automattic/i18n-utils';
 import { Spinner } from '@wordpress/components';
 import { useEffect, useRef, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { ThumbsDown } from '../../assets/thumbs-down';
 import { useOdieAssistantContext } from '../../context';
-import { useAutoScroll, useZendeskMessageListener } from '../../hooks';
+import {
+	useAutoScroll,
+	useCreateZendeskConversation,
+	useZendeskMessageListener,
+} from '../../hooks';
 import { getOdieInitialMessage } from '../../utils';
 import { DislikeFeedbackMessage } from './dislike-feedback-message';
 import { JumpToRecent } from './jump-to-recent';
@@ -18,6 +24,7 @@ const DislikeThumb = () => {
 		</div>
 	);
 };
+
 const LoadingChatSpinner = () => {
 	return (
 		<div className="chatbox-loading-chat__spinner">
@@ -38,14 +45,36 @@ interface ChatMessagesProps {
 }
 
 export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => {
-	const { chat, botNameSlug } = useOdieAssistantContext();
+	const { chat, botNameSlug, isChatLoaded } = useOdieAssistantContext();
+	const createZendeskConversation = useCreateZendeskConversation();
+	const resetSupportInteraction = useResetSupportInteraction();
+	const [ searchParams ] = useSearchParams();
+	const isForwardingToZendesk =
+		searchParams.get( 'provider' ) === 'zendesk' && chat.provider !== 'zendesk';
 	const [ chatMessagesLoaded, setChatLoaded ] = useState( false );
 	const messagesContainerRef = useRef< HTMLDivElement >( null );
 	useZendeskMessageListener();
 	useAutoScroll( messagesContainerRef );
+
+	useEffect( () => {
+		( chat?.status === 'loaded' || chat?.status === 'closed' ) &&
+			setChatLoaded( ! isForwardingToZendesk );
+	}, [ chat, isForwardingToZendesk ] );
+
+	/**
+	 * Handle the case where we are forwarding to Zendesk.
+	 */
 	useEffect( () => {
-		( chat?.status === 'loaded' || chat?.status === 'closed' ) && setChatLoaded( true );
-	}, [ chat ] );
+		if ( isForwardingToZendesk && ! chat.conversationId ) {
+			resetSupportInteraction().then( () => {
+				if ( isChatLoaded ) {
+					createZendeskConversation().then( () => {
+						setChatLoaded( true );
+					} );
+				}
+			} );
+		}
+	}, [ isForwardingToZendesk, isChatLoaded ] );
 
 	// Used to apply the correct styling on messages
 	const isNextMessageFromSameSender = ( currentMessage: string, nextMessage: string ) => {
@@ -60,13 +89,15 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => {
 					<LoadingChatSpinner />
 				) : (
 					<>
-						<ChatMessage
-							message={ getOdieInitialMessage( botNameSlug ) }
-							key={ 0 }
-							currentUser={ currentUser }
-							isNextMessageFromSameSender={ false }
-							displayChatWithSupportLabel={ false }
-						/>
+						{ ( chat.odieId || chat.provider === 'odie' ) && (
+							<ChatMessage
+								message={ getOdieInitialMessage( botNameSlug ) }
+								key={ 0 }
+								currentUser={ currentUser }
+								isNextMessageFromSameSender={ false }
+								displayChatWithSupportLabel={ false }
+							/>
+						) }
 						{ chat.messages.map( ( message, index ) => (
 							<ChatMessage
 								message={ message }

packages/odie-client/src/context/index.tsx

@@ -65,6 +65,7 @@ export const OdieAssistantProvider: React.FC< OdieAssistantProviderProps > = ( {
 	extraContactOptions,
 	selectedSiteId,
 	selectedSiteURL,
+	initialMessage,
 	version = null,
 	currentUser,
 	children,
@@ -180,6 +181,7 @@ export const OdieAssistantProvider: React.FC< OdieAssistantProviderProps > = ( {
 				odieBroadcastClientId,
 				selectedSiteId,
 				selectedSiteURL,
+				initialMessage,
 				setChatStatus,
 				setMessageLikedStatus,
 				setWaitAnswerToFirstMessageFromHumanSupport,

packages/odie-client/src/data/use-get-zendesk-conversation.ts

@@ -28,27 +28,29 @@ export const useGetZendeskConversation = () => {
 			chatId,
 			conversationId,
 		}: {
-			chatId: number | string | null | undefined;
+			chatId?: number | string | null | undefined;
 			conversationId?: string | null | undefined;
 		} ) => {
-			if ( ! chatId ) {
+			if ( ! chatId && ! conversationId ) {
 				return null;
 			}
 
 			const conversation = Smooch.getConversations().find( ( conversation ) => {
 				if ( conversationId ) {
 					return conversation.id === conversationId;
+				} else if ( chatId ) {
+					return Number( conversation.metadata[ 'odieChatId' ] ) === Number( chatId );
 				}
 
-				return Number( conversation.metadata[ 'odieChatId' ] ) === Number( chatId );
+				return false;
 			} );
 
 			if ( ! conversation ) {
 				return null;
 			}
 
 			// We need to ensure that more than one message is loaded
-			return Smooch.getConversationById( conversation.id )
+			return Smooch.getConversationById( conversation.id || conversationId! )
 				.then( ( conversation ) => {
 					Smooch.markAllAsRead( conversation.id );
 					getUnreadNotifications();