Help Center: use Zendesk staging when proxied

apps/help-center/config.js

@@ -1,6 +1,14 @@
+/* global helpCenterData */
+import {
+	ZENDESK_STAGING_SUPPORT_CHAT_KEY,
+	ZENDESK_SUPPORT_CHAT_KEY,
+} from '@automattic/zendesk-client/src/constants';
+
 window.configData = {
-	env_id: 'production',
-	zendesk_support_chat_key: 'cec07bc9-4da6-4dd2-afa7-c7e01ae73584',
+	env_id: helpCenterData?.isProxied ? 'staging' : 'production',
+	zendesk_support_chat_key: helpCenterData?.isProxied
+		? ZENDESK_STAGING_SUPPORT_CHAT_KEY
+		: ZENDESK_SUPPORT_CHAT_KEY,
 	features: {
 		'help/gpt-response': true,
 	},

apps/help-center/package.json

@@ -34,6 +34,7 @@
 		"@automattic/calypso-analytics": "workspace:^",
 		"@automattic/help-center": "workspace:^",
 		"@automattic/i18n-utils": "workspace:^",
+		"@automattic/zendesk-client": "workspace:^",
 		"@tanstack/react-query": "^5.15.5",
 		"@wordpress/components": "^28.8.0",
 		"@wordpress/compose": "^7.8.0",

config/stage.json

@@ -16,7 +16,7 @@
 	"zendesk_presales_chat_key": "216bf91d-f10f-4f66-bf65-a0cba220cd38",
 	"zendesk_presales_chat_key_akismet": "7ce13115-7b34-4069-9d64-228d90f148d1",
 	"zendesk_presales_chat_key_jp_checkout": "7c42153f-f579-49ba-a33e-246b2d27fb93",
-	"zendesk_support_chat_key": "cec07bc9-4da6-4dd2-afa7-c7e01ae73584",
+	"zendesk_support_chat_key": "715f17a8-4a28-4a7f-8447-0ef8f06c70d7",
 	"features": {
 		"100-year-plan/vip": false,
 		"ad-tracking": false,

config/wpcalypso.json

@@ -15,7 +15,7 @@
 	"zendesk_presales_chat_key": "216bf91d-f10f-4f66-bf65-a0cba220cd38",
 	"zendesk_presales_chat_key_akismet": "7ce13115-7b34-4069-9d64-228d90f148d1",
 	"zendesk_presales_chat_key_jp_checkout": "7c42153f-f579-49ba-a33e-246b2d27fb93",
-	"zendesk_support_chat_key": "cec07bc9-4da6-4dd2-afa7-c7e01ae73584",
+	"zendesk_support_chat_key": "715f17a8-4a28-4a7f-8447-0ef8f06c70d7",
 	"features": {
 		"100-year-plan/vip": false,
 		"ad-tracking": false,

packages/calypso-e2e/package.json

@@ -31,6 +31,7 @@
 		"@automattic/calypso-eslint-overrides": "workspace:^",
 		"@automattic/calypso-typescript-config": "workspace:^",
 		"@automattic/languages": "workspace:^",
+		"@automattic/zendesk-client": "workspace:^",
 		"@jest/globals": "^29.7.0",
 		"@types/node": "^20.8.6",
 		"@types/node-fetch": "^2.6.1",

packages/calypso-e2e/src/lib/components/help-center.ts

@@ -1,3 +1,4 @@
+import { ZENDESK_STAGING_SUPPORT_CHAT_KEY } from '@automattic/zendesk-client/src/constants';
 import { Locator, Page } from 'playwright';
 
 export type ResultsCategory = 'Docs' | 'Links';
@@ -207,7 +208,7 @@ export class HelpCenterComponent {
 
 		await this.page.evaluate( () => {
 			if ( typeof configData !== 'undefined' ) {
-				configData.zendesk_support_chat_key = '715f17a8-4a28-4a7f-8447-0ef8f06c70d7';
+				configData.zendesk_support_chat_key = ZENDESK_STAGING_SUPPORT_CHAT_KEY;
 			}
 		} );
 	}

packages/zendesk-client/package.json

@@ -28,15 +28,13 @@
 		"@wordpress/api-fetch": "^7.8.0",
 		"@wordpress/element": "^6.8.0",
 		"@wordpress/url": "^4.8.0",
+		"react": "^18.3.1",
 		"smooch": "5.6.0",
 		"wpcom-proxy-request": "workspace:^"
 	},
 	"devDependencies": {
 		"@automattic/calypso-typescript-config": "workspace:^",
 		"typescript": "^5.3.3"
 	},
-	"peerDependencies": {
-		"react": "^18.2.0"
-	},
 	"license": "GPL-2.0-or-later"
 }

packages/zendesk-client/src/constants.ts

@@ -1,3 +1,5 @@
 export const SMOOCH_INTEGRATION_ID = '6453b7fc45cea5c267e60fed';
 export const ZENDESK_SOURCE_URL_TICKET_FIELD_ID = 23752099174548;
 export const ZENDESK_SCRIPT_ID = 'ze-snippet';
+export const ZENDESK_SUPPORT_CHAT_KEY = 'cec07bc9-4da6-4dd2-afa7-c7e01ae73584';
+export const ZENDESK_STAGING_SUPPORT_CHAT_KEY = '715f17a8-4a28-4a7f-8447-0ef8f06c70d7';

packages/zendesk-client/src/index.ts

@@ -4,5 +4,9 @@ export { useCanConnectToZendeskMessaging } from './use-can-connect-to-zendesk-me
 export { useSmooch } from './use-smooch';
 export { useOpenZendeskMessaging } from './use-open-zendesk-messaging';
 export { useZendeskMessagingAvailability } from './use-zendesk-messaging-availability';
-export { ZENDESK_SOURCE_URL_TICKET_FIELD_ID } from './constants';
+export {
+	ZENDESK_SOURCE_URL_TICKET_FIELD_ID,
+	ZENDESK_STAGING_SUPPORT_CHAT_KEY,
+	ZENDESK_SUPPORT_CHAT_KEY,
+} from './constants';
 export type { ZendeskConfigName, MessagingGroup } from './types';

packages/zendesk-client/src/use-authenticate-zendesk-messaging.ts

@@ -18,7 +18,7 @@ export function useAuthenticateZendeskMessaging(
 	type: ZendeskAuthType = 'zendesk'
 ) {
 	const currentEnvironment = config( 'env_id' );
-	const isTestMode = currentEnvironment === 'development';
+	const isTestMode = currentEnvironment !== 'production';
 
 	return useQuery( {
 		queryKey: [ 'getMessagingAuth', type, isTestMode ],

yarn.lock

@@ -363,6 +363,7 @@ __metadata:
     "@automattic/calypso-eslint-overrides": "workspace:^"
     "@automattic/calypso-typescript-config": "workspace:^"
     "@automattic/languages": "workspace:^"
+    "@automattic/zendesk-client": "workspace:^"
     "@jest/globals": "npm:^29.7.0"
     "@jest/types": "npm:^29.5.0"
     "@types/node": "npm:^20.8.6"
@@ -1101,6 +1102,7 @@ __metadata:
     "@automattic/help-center": "workspace:^"
     "@automattic/i18n-utils": "workspace:^"
     "@automattic/wp-babel-makepot": "workspace:^"
+    "@automattic/zendesk-client": "workspace:^"
     "@tanstack/react-query": "npm:^5.15.5"
     "@wordpress/components": "npm:^28.8.0"
     "@wordpress/compose": "npm:^7.8.0"
@@ -2240,11 +2242,10 @@ __metadata:
     "@wordpress/api-fetch": "npm:^7.8.0"
     "@wordpress/element": "npm:^6.8.0"
     "@wordpress/url": "npm:^4.8.0"
+    react: "npm:^18.3.1"
     smooch: "npm:5.6.0"
     typescript: "npm:^5.3.3"
     wpcom-proxy-request: "workspace:^"
-  peerDependencies:
-    react: ^18.2.0
   languageName: unknown
   linkType: soft