New Zendesk Client Package (#92179)

Co-authored-by: Omar Alshaker <omar@omaralshaker.com>
Automattic · Jul 15, 2024 · 5c00b4c · 5c00b4c
1 parent a99bdaf
commit 5c00b4c
Show file tree

Hide file tree

Showing 37 changed files with 552 additions and 359 deletions.
diff --git a/client/blocks/importer/wordpress/import-everything/migration-error/index.tsx b/client/blocks/importer/wordpress/import-everything/migration-error/index.tsx
@@ -1,11 +1,11 @@
 import { HelpCenter, MigrationStatusError } from '@automattic/data-stores';
-import {
-	useChatStatus,
-	useChatWidget,
-	useCanConnectToZendesk,
-	useMessagingAvailability,
-} from '@automattic/help-center/src/hooks';
+import { useChatStatus } from '@automattic/help-center/src/hooks';
 import { NextButton, SubTitle, Title } from '@automattic/onboarding';
+import {
+	useCanConnectToZendeskMessaging,
+	useZendeskMessagingAvailability,
+	useOpenZendeskMessaging,
+} from '@automattic/zendesk-client';
 import { useDispatch as useDataStoreDispatch } from '@wordpress/data';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback } from 'react';
@@ -30,7 +30,8 @@ interface Props {
 }
 
 export const MigrationError = ( props: Props ) => {
-	const { setShowHelpCenter, setInitialRoute } = useDataStoreDispatch( HELP_CENTER_STORE );
+	const { setShowHelpCenter, setInitialRoute, resetStore } =
+		useDataStoreDispatch( HELP_CENTER_STORE );
 	const {
 		sourceSiteUrl,
 		targetSiteUrl,
@@ -41,34 +42,40 @@ export const MigrationError = ( props: Props ) => {
 	} = props;
 	const translate = useTranslate();
 	const { isEligibleForChat } = useChatStatus();
-	const { data: canConnectToZendesk } = useCanConnectToZendesk();
-	const { data: isMessagingAvailable } = useMessagingAvailability(
+	const { data: canConnectToZendeskMessaging } = useCanConnectToZendeskMessaging();
+	const { data: isMessagingAvailable } = useZendeskMessagingAvailability(
 		'wpcom_messaging',
 		isEligibleForChat
 	);
-	const { openChatWidget, isOpeningChatWidget } = useChatWidget(
+	const { openZendeskWidget, isOpeningZendeskWidget } = useOpenZendeskMessaging(
+		'migration-error',
 		'zendesk_support_chat_key',
 		isEligibleForChat
 	);
 	const { title, subTitle, hintId, goBackCta, getHelpCta, tryAgainCta, importContentCta } =
 		useErrorDetails( status, sourceSiteUrl, targetSiteUrl );
 
 	const getHelp = useCallback( () => {
-		if ( isMessagingAvailable && canConnectToZendesk ) {
-			openChatWidget( {
+		if ( isMessagingAvailable && canConnectToZendeskMessaging ) {
+			openZendeskWidget( {
 				siteUrl: targetSiteUrl,
 				message: `${ status }: Import onboarding flow; migration failed`,
+				onSuccess: () => {
+					resetStore();
+					setShowHelpCenter( false );
+				},
 			} );
 		} else {
 			setInitialRoute( '/contact-form?mode=CHAT' );
 			setShowHelpCenter( true );
 		}
 	}, [
-		openChatWidget,
+		resetStore,
+		openZendeskWidget,
 		targetSiteUrl,
 		status,
 		isMessagingAvailable,
-		canConnectToZendesk,
+		canConnectToZendeskMessaging,
 		setInitialRoute,
 		setShowHelpCenter,
 	] );
@@ -109,7 +116,7 @@ export const MigrationError = ( props: Props ) => {
 						<NextButton
 							onClick={ getHelp }
 							variant={ goBackCta || tryAgainCta || importContentCta ? 'secondary' : 'primary' }
-							isBusy={ isOpeningChatWidget }
+							isBusy={ isOpeningZendeskWidget }
 						>
 							{ translate( 'Contact support' ) }
 						</NextButton>

diff --git a/client/components/chat-button/index.tsx b/client/components/chat-button/index.tsx
@@ -1,16 +1,15 @@
 import { Button, Gridicon, Spinner } from '@automattic/components';
 import { HelpCenter } from '@automattic/data-stores';
+import { useChatStatus } from '@automattic/help-center/src/hooks';
 import {
-	useChatStatus,
-	useChatWidget,
-	useCanConnectToZendesk,
-	useMessagingAvailability,
-} from '@automattic/help-center/src/hooks';
+	useCanConnectToZendeskMessaging,
+	useZendeskMessagingAvailability,
+	useOpenZendeskMessaging,
+} from '@automattic/zendesk-client';
 import { useDispatch as useDataStoreDispatch } from '@wordpress/data';
 import { useI18n } from '@wordpress/react-i18n';
 import clsx from 'clsx';
-import type { MessagingGroup } from '@automattic/help-center/src/hooks/use-messaging-availability';
-import type { ZendeskConfigName } from '@automattic/help-center/src/hooks/use-zendesk-messaging';
+import type { MessagingGroup, ZendeskConfigName } from '@automattic/zendesk-client';
 import type { FC } from 'react';
 
 type ChatIntent = 'SUPPORT' | 'PRESALES' | 'PRECANCELLATION';
@@ -26,6 +25,7 @@ type Props = {
 	siteUrl?: string;
 	children?: React.ReactNode;
 	withHelpCenter?: boolean;
+	section?: string;
 };
 
 const HELP_CENTER_STORE = HelpCenter.register();
@@ -65,17 +65,19 @@ const ChatButton: FC< Props > = ( {
 	primary = false,
 	siteUrl,
 	withHelpCenter = true,
+	section = '',
 } ) => {
 	const { __ } = useI18n();
 	const { hasActiveChats, isEligibleForChat, isPrecancellationChatOpen, isPresalesChatOpen } =
 		useChatStatus();
 	const messagingGroup = getMessagingGroupForIntent( chatIntent );
-	const { data: isMessagingAvailable } = useMessagingAvailability(
+	const { data: isMessagingAvailable } = useZendeskMessagingAvailability(
 		messagingGroup,
 		isEligibleForChat
 	);
-	const { setShowHelpCenter, setInitialRoute } = useDataStoreDispatch( HELP_CENTER_STORE );
-	const { data: canConnectToZendesk } = useCanConnectToZendesk();
+	const { setShowHelpCenter, setInitialRoute, resetStore } =
+		useDataStoreDispatch( HELP_CENTER_STORE );
+	const { data: canConnectToZendesk } = useCanConnectToZendeskMessaging();
 
 	function shouldShowChatButton(): boolean {
 		if ( isEligibleForChat && hasActiveChats ) {
@@ -106,18 +108,23 @@ const ChatButton: FC< Props > = ( {
 	}
 
 	const configName = getConfigNameForIntent( chatIntent );
-	const { isOpeningChatWidget, openChatWidget } = useChatWidget(
+	const { isOpeningZendeskWidget, openZendeskWidget } = useOpenZendeskMessaging(
+		section,
 		configName,
 		shouldShowChatButton()
 	);
 
 	const handleClick = () => {
 		if ( canConnectToZendesk ) {
-			openChatWidget( {
+			openZendeskWidget( {
 				message: initialMessage,
 				siteUrl,
 				onError,
-				onSuccess: onClick,
+				onSuccess: () => {
+					onClick?.();
+					resetStore();
+					setShowHelpCenter( false );
+				},
 			} );
 		} else {
 			setInitialRoute( '/contact-form?mode=CHAT' );
@@ -133,7 +140,7 @@ const ChatButton: FC< Props > = ( {
 	}
 
 	function getChildren() {
-		if ( isOpeningChatWidget ) {
+		if ( isOpeningZendeskWidget ) {
 			return <Spinner />;
 		}
 

diff --git a/...nt/components/marketing-survey/cancel-purchase-form/precancellation-chat-button/index.tsx b/...nt/components/marketing-survey/cancel-purchase-form/precancellation-chat-button/index.tsx
@@ -59,6 +59,7 @@ const PrecancellationChatButton: FC< Props > = ( {
 			siteUrl={ siteUrl }
 			className={ clsx( 'precancellation-chat-button__main-button', className ) }
 			onClick={ handleClick }
+			section="pre-cancellation"
 		>
 			{ icon && <MaterialIcon icon={ icon } /> }
 			{ hasEnTranslation( 'Need help? Contact us' )

diff --git a/...onents/marketing-survey/cancel-purchase-form/step-components/educational-content-step.tsx b/...onents/marketing-survey/cancel-purchase-form/step-components/educational-content-step.tsx
@@ -1,7 +1,7 @@
 import page from '@automattic/calypso-router';
 import { MaterialIcon } from '@automattic/components';
-import { useChatWidget } from '@automattic/help-center/src/hooks';
 import { useHasEnTranslation, useLocalizeUrl } from '@automattic/i18n-utils';
+import { useOpenZendeskMessaging } from '@automattic/zendesk-client';
 import { Button } from '@wordpress/components';
 import { useTranslate } from 'i18n-calypso';
 import { useState } from 'react';
@@ -74,7 +74,8 @@ export default function EducationalCotnentStep( { type, site, ...props }: StepPr
 	const translate = useTranslate();
 	const hasEnTranslation = useHasEnTranslation();
 	const localizeUrl = useLocalizeUrl();
-	const { isOpeningChatWidget, openChatWidget } = useChatWidget();
+	const { isOpeningZendeskWidget, openZendeskWidget } =
+		useOpenZendeskMessaging( 'pre-cancellation' );
 
 	switch ( type ) {
 		case 'education:loading-time':
@@ -254,11 +255,11 @@ export default function EducationalCotnentStep( { type, site, ...props }: StepPr
 												),
 												chat: (
 													<Button
-														isBusy={ isOpeningChatWidget }
-														disabled={ isOpeningChatWidget }
+														isBusy={ isOpeningZendeskWidget }
+														disabled={ isOpeningZendeskWidget }
 														onClick={ () => {
 															page( `/domains/manage/${ site.slug }` );
-															openChatWidget( {
+															openZendeskWidget( {
 																message:
 																	"User is contacting us from pre-cancellation form. Cancellation reason they've given: " +
 																	props.cancellationReason,
@@ -285,11 +286,11 @@ export default function EducationalCotnentStep( { type, site, ...props }: StepPr
 												),
 												chat: (
 													<Button
-														isBusy={ isOpeningChatWidget }
-														disabled={ isOpeningChatWidget }
+														isBusy={ isOpeningZendeskWidget }
+														disabled={ isOpeningZendeskWidget }
 														onClick={ () => {
 															page( `/domains/manage/${ site.slug }` );
-															openChatWidget( {
+															openZendeskWidget( {
 																message:
 																	"User is contacting us from pre-cancellation form. Cancellation reason they've given: " +
 																	props.cancellationReason,

diff --git a/client/components/marketing-survey/cancel-purchase-form/step-components/upsell-step.tsx b/client/components/marketing-survey/cancel-purchase-form/step-components/upsell-step.tsx
@@ -2,8 +2,8 @@ import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { getPlan, PLAN_PERSONAL, PLAN_BUSINESS } from '@automattic/calypso-products';
 import page from '@automattic/calypso-router';
 import formatCurrency from '@automattic/format-currency';
-import { useChatWidget } from '@automattic/help-center/src/hooks';
 import { useHasEnTranslation } from '@automattic/i18n-utils';
+import { useOpenZendeskMessaging } from '@automattic/zendesk-client';
 import { Button } from '@wordpress/components';
 import { useTranslate, numberFormat } from 'i18n-calypso';
 import { useState } from 'react';
@@ -116,7 +116,7 @@ export default function UpsellStep( { upsell, site, purchase, ...props }: StepPr
 	const couponCode = 'BIZWPC25';
 	const builtByURL = 'https://wordpress.com/website-design-service/?ref=wpcom-cancel-flow';
 	const { refundAmount } = props;
-	const { openChatWidget } = useChatWidget();
+	const { openZendeskWidget } = useOpenZendeskMessaging( 'pre-cancellation-upsell' );
 	const businessPlanName = getPlan( PLAN_BUSINESS )?.getTitle() ?? '';
 
 	switch ( upsell ) {
@@ -142,7 +142,7 @@ export default function UpsellStep( { upsell, site, purchase, ...props }: StepPr
 						} );
 						page( getLiveChatUrl( upsell, site, purchase ) );
 
-						openChatWidget( {
+						openZendeskWidget( {
 							message:
 								"User is contacting us from pre-cancellation form. Cancellation reason they've given: " +
 								props.cancellationReason,

diff --git a/...ing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/index.tsx b/...ing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/index.tsx
@@ -55,6 +55,7 @@ const Intro: Step = function Intro( { navigation, flow, variantSlug } ) {
 					initialMessage="User is contacting us from the domains-transfer flow"
 					className="domains-transfer-chat-button"
 					withHelpCenter={ false }
+					section="domains-transfer"
 				>
 					<MaterialIcon icon="chat_bubble" />
 					{ hasEnTranslation( 'Need help? Contact us' )

diff --git a/...nding/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/index.tsx b/...nding/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/index.tsx
@@ -56,6 +56,7 @@ const Intro: Step = function Intro( { navigation, variantSlug } ) {
 					initialMessage="User is contacting us from the domains-transfer flow"
 					className="domains-transfer-chat-button"
 					withHelpCenter={ false }
+					section="domains-transfer"
 				>
 					<MaterialIcon icon="chat_bubble" />
 					{ hasEnTranslation( 'Need help? Contact us' )

diff --git a/client/lib/presales-chat/index.ts b/client/lib/presales-chat/index.ts
@@ -1,15 +1,15 @@
-import {
-	useMessagingAvailability,
-	useZendeskMessaging,
-	useCanConnectToZendesk,
-} from '@automattic/help-center/src/hooks';
-import { ZENDESK_SOURCE_URL_TICKET_FIELD_ID } from '@automattic/help-center/src/hooks/use-chat-widget';
 import { useIsEnglishLocale } from '@automattic/i18n-utils';
+import {
+	useZendeskMessagingAvailability,
+	useLoadZendeskMessaging,
+	useCanConnectToZendeskMessaging,
+	ZENDESK_SOURCE_URL_TICKET_FIELD_ID,
+} from '@automattic/zendesk-client';
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { isWpMobileApp } from 'calypso/lib/mobile-app';
 import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
-import type { ZendeskConfigName } from '@automattic/help-center/src/hooks/use-zendesk-messaging';
+import type { ZendeskConfigName } from '@automattic/zendesk-client';
 
 export type KeyType = 'akismet' | 'jpAgency' | 'jpCheckout' | 'jpGeneral' | 'wpcom';
 
@@ -58,23 +58,21 @@ export function usePresalesChat( keyType: KeyType, enabled = true, skipAvailabil
 	const isWpMobileAppUser = isWpMobileApp();
 	const group = getGroupName( keyType );
 
-	const { data: canConnectToZendesk } = useCanConnectToZendesk(
+	const { data: canConnectToZendeskMessaging } = useCanConnectToZendeskMessaging(
 		enabled && ! skipAvailabilityCheck
 	);
 	const isEligibleForPresalesChat =
-		enabled && isEnglishLocale && canConnectToZendesk && ! isWpMobileAppUser;
+		enabled && isEnglishLocale && canConnectToZendeskMessaging && ! isWpMobileAppUser;
 
-	const { data: chatAvailability, isLoading: isLoadingAvailability } = useMessagingAvailability(
-		group,
-		isEligibleForPresalesChat && ! skipAvailabilityCheck
-	);
+	const { data: chatAvailability, isLoading: isLoadingAvailability } =
+		useZendeskMessagingAvailability( group, isEligibleForPresalesChat && ! skipAvailabilityCheck );
 
 	const isPresalesChatAvailable =
 		skipAvailabilityCheck || Boolean( chatAvailability?.is_available );
 
 	const isLoggedIn = useSelector( isUserLoggedIn );
 	const zendeskKeyName = getConfigName( keyType );
-	const { isMessagingScriptLoaded } = useZendeskMessaging(
+	const { isMessagingScriptLoaded } = useLoadZendeskMessaging(
 		zendeskKeyName,
 		isEligibleForPresalesChat && isPresalesChatAvailable,
 		isLoggedIn

diff --git a/client/package.json b/client/package.json
@@ -74,6 +74,7 @@
 		"@automattic/webpack-inline-constant-exports-plugin": "workspace:^",
 		"@automattic/wpcom-checkout": "workspace:^",
 		"@automattic/wpcom-template-parts": "workspace:^",
+		"@automattic/zendesk-client": "workspace:^",
 		"@babel/core": "^7.24.5",
 		"@emotion/css": "^11.11.2",
 		"@emotion/jest": "^11.11.0",

diff --git a/package.json b/package.json
@@ -165,6 +165,7 @@
 		"@automattic/whats-new": "workspace:^",
 		"@automattic/wp-babel-makepot": "workspace:^",
 		"@automattic/wpcom-template-parts": "workspace:^",
+		"@automattic/zendesk-client": "workspace:^",
 		"@types/cookie": "^0.4.1",
 		"@types/debug": "^4.1.7",
 		"@types/fast-json-stable-stringify": "^2.0.0",

diff --git a/packages/help-center/package.json b/packages/help-center/package.json
@@ -34,6 +34,7 @@
 		"@automattic/odie-client": "workspace:^",
 		"@automattic/viewport": "workspace:^",
 		"@automattic/viewport-react": "workspace:^",
+		"@automattic/zendesk-client": "workspace:^",
 		"@popperjs/core": "^2.11.8",
 		"@tanstack/react-query": "^5.15.5",
 		"@wordpress/base-styles": "^5.2.0",