Help Center: Connect to zendesk when user wants to contact support (#…

…95680)
Automattic · Oct 24, 2024 · c7bb194 · c7bb194
1 parent 1262115
commit c7bb194
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 18 deletions.
diff --git a/packages/odie-client/src/components/message/direct-escalation-link.tsx b/packages/odie-client/src/components/message/direct-escalation-link.tsx
@@ -2,9 +2,12 @@ import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useNavigate } from 'react-router-dom';
 import { useOdieAssistantContext } from '../../context';
+import { useCreateZendeskConversation } from '../../query/use-create-zendesk-conversation';
 
 export const DirectEscalationLink = ( { messageId }: { messageId: number | undefined } ) => {
-	const { trackEvent, isUserEligibleForPaidSupport } = useOdieAssistantContext();
+	const newConversation = useCreateZendeskConversation();
+	const { shouldUseHelpCenterExperience, trackEvent, isUserEligibleForPaidSupport } =
+		useOdieAssistantContext();
 	const navigate = useNavigate();
 	const handleClick = useCallback( () => {
 		trackEvent( 'chat_message_direct_escalation_link_click', {
@@ -13,7 +16,11 @@ export const DirectEscalationLink = ( { messageId }: { messageId: number | undef
 		} );
 
 		if ( isUserEligibleForPaidSupport ) {
-			navigate( '/contact-options' );
+			if ( shouldUseHelpCenterExperience ) {
+				newConversation();
+			} else {
+				navigate( '/contact-options' );
+			}
 		} else {
 			navigate( '/contact-form?mode=FORUM' );
 		}

diff --git a/packages/odie-client/src/components/message/user-message.tsx b/packages/odie-client/src/components/message/user-message.tsx
@@ -22,6 +22,7 @@ export const UserMessage = ( {
 
 	const hasCannedResponse = message.context?.flags?.canned_response;
 	const isRequestingHumanSupport = message.context?.flags?.forward_to_human_support;
+	const isOnlyMessage = message.context?.flags?.only_message;
 	const hasFeedback = !! message?.rating_value;
 	const isBot = message.role === 'bot';
 	const isPositiveFeedback =
@@ -46,23 +47,29 @@ export const UserMessage = ( {
 			>
 				{ isRequestingHumanSupport ? displayMessage : message.content }
 			</Markdown>
-			{ showExtraContactOptions &&
-				( shouldUseHelpCenterExperience ? <GetSupport /> : extraContactOptions ) }
-			{ ! showExtraContactOptions && isBot && (
-				<WasThisHelpfulButtons message={ message } isDisliked={ isDisliked } />
-			) }
-			{ isBot && (
+			{ ! isOnlyMessage && (
 				<>
-					{ ! showExtraContactOptions && <DirectEscalationLink messageId={ message.message_id } /> }
-					<div className="disclaimer">
-						{ __(
-							"Generated by WordPress.com's Support AI. AI-generated responses may contain inaccurate information.",
-							__i18n_text_domain__
-						) }
-						<ExternalLink href="https://automattic.com/ai-guidelines">
-							{ __( 'Learn more.', __i18n_text_domain__ ) }
-						</ExternalLink>
-					</div>
+					{ showExtraContactOptions &&
+						( shouldUseHelpCenterExperience ? <GetSupport /> : extraContactOptions ) }
+					{ ! showExtraContactOptions && isBot && (
+						<WasThisHelpfulButtons message={ message } isDisliked={ isDisliked } />
+					) }
+					{ isBot && (
+						<>
+							{ ! showExtraContactOptions && (
+								<DirectEscalationLink messageId={ message.message_id } />
+							) }
+							<div className="disclaimer">
+								{ __(
+									"Generated by WordPress.com's Support AI. AI-generated responses may contain inaccurate information.",
+									__i18n_text_domain__
+								) }
+								<ExternalLink href="https://automattic.com/ai-guidelines">
+									{ __( 'Learn more.', __i18n_text_domain__ ) }
+								</ExternalLink>
+							</div>
+						</>
+					) }
 				</>
 			) }
 		</>

diff --git a/packages/odie-client/src/query/use-create-zendesk-conversation.ts b/packages/odie-client/src/query/use-create-zendesk-conversation.ts
@@ -18,6 +18,12 @@ export const useCreateZendeskConversation = (): ( () => Promise< void > ) => {
 			content: "We're connecting you to our support team.",
 			role: 'bot',
 			type: 'message',
+			context: {
+				flags: {
+					only_message: true,
+				},
+				site_id: null,
+			},
 		} );
 
 		setChatStatus( 'sending' );

diff --git a/packages/odie-client/src/types/index.ts b/packages/odie-client/src/types/index.ts
@@ -62,6 +62,7 @@ export type Context = {
 	flags?: {
 		forward_to_human_support?: boolean;
 		canned_response?: boolean;
+		only_message?: boolean;
 	};
 };