HC: play notification sound on message received

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

@@ -80,6 +80,12 @@ export const setIsChatLoaded = ( isChatLoaded: boolean ) =>
 		isChatLoaded,
 	} ) as const;
 
+export const setAreSoundNotificationsEnabled = ( areSoundNotificationsEnabled: boolean ) =>
+	( {
+		type: 'HELP_CENTER_SET_ARE_SOUND_NOTIFICATIONS_ENABLED',
+		areSoundNotificationsEnabled,
+	} ) as const;
+
 export const setZendeskClientId = ( zendeskClientId: string ) =>
 	( {
 		type: 'HELP_CENTER_SET_ZENDESK_CLIENT_ID',
@@ -174,6 +180,7 @@ export type HelpCenterAction =
 			| typeof setUnreadCount
 			| typeof setIsMinimized
 			| typeof setIsChatLoaded
+			| typeof setAreSoundNotificationsEnabled
 			| typeof setZendeskClientId
 			| typeof setNavigateToRoute
 			| typeof setOdieInitialPromptText

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

@@ -68,6 +68,17 @@ const isChatLoaded: Reducer< boolean, HelpCenterAction > = ( state = false, acti
 	return state;
 };
 
+const areSoundNotificationsEnabled: Reducer< boolean, HelpCenterAction > = (
+	state = true,
+	action
+) => {
+	switch ( action.type ) {
+		case 'HELP_CENTER_SET_ARE_SOUND_NOTIFICATIONS_ENABLED':
+			return action.areSoundNotificationsEnabled;
+	}
+	return state;
+};
+
 const zendeskClientId: Reducer< string, HelpCenterAction > = ( state = '', action ) => {
 	switch ( action.type ) {
 		case 'HELP_CENTER_SET_ZENDESK_CLIENT_ID':
@@ -160,6 +171,7 @@ const reducer = combineReducers( {
 	hasSeenWhatsNewModal,
 	isMinimized,
 	isChatLoaded,
+	areSoundNotificationsEnabled,
 	zendeskClientId,
 	unreadCount,
 	navigateToRoute,

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

@@ -10,6 +10,8 @@ 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 getAreSoundNotificationsEnabled = ( state: State ) =>
+	state.areSoundNotificationsEnabled;
 export const getZendeskClientId = ( state: State ) => state.zendeskClientId;
 export const getHasSeenWhatsNewModal = ( state: State ) => state.hasSeenWhatsNewModal;
 export const getNavigateToRoute = ( state: State ) => state.navigateToRoute;

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

@@ -94,7 +94,7 @@
 	}
 }
 
-.clear-conversation__wrapper {
+.conversation-menu__wrapper {
 	padding: 4px 0;
     text-align: center;
 
@@ -114,14 +114,13 @@
 	button {
 		display: flex;
 		align-items: center;
-		justify-content: center;
 		width: 100%;
-		padding: 8px;
 		cursor: pointer;
 		gap: 4px;
 		color: var(--studio-gray-70);
 		border: none;
 		background: unset;
+		padding: 8px 8px 8px 14px;
 
 		div {
 			margin-bottom: 2px;

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

@@ -4,7 +4,7 @@ import { Gridicon } from '@automattic/components';
 import { EllipsisMenu } from '@automattic/odie-client';
 import { clearHelpCenterZendeskConversationStarted } from '@automattic/odie-client/src/utils/storage-utils';
 import { CardHeader, Button, Flex } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useMemo, useCallback, useEffect, useState } from '@wordpress/element';
 import { closeSmall, chevronUp, lineSolid, commentContent, page, Icon } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
@@ -66,24 +66,43 @@ const SupportModeTitle = () => {
 const ChatEllipsisMenu = () => {
 	const { __ } = useI18n();
 	const resetSupportInteraction = useResetSupportInteraction();
+	const { areSoundNotificationsEnabled } = useSelect( ( select ) => {
+		const helpCenterSelect: HelpCenterSelect = select( HELP_CENTER_STORE );
+		return {
+			areSoundNotificationsEnabled: helpCenterSelect.getAreSoundNotificationsEnabled(),
+		};
+	}, [] );
+	const { setAreSoundNotificationsEnabled } = useDispatch( HELP_CENTER_STORE );
 
 	const clearChat = async () => {
 		await resetSupportInteraction();
 		clearHelpCenterZendeskConversationStarted();
 		recordTracksEvent( 'calypso_inlinehelp_clear_conversation' );
 	};
 
+	const toggleSoundNotifications = () => {
+		setAreSoundNotificationsEnabled( ! areSoundNotificationsEnabled );
+	};
+
 	return (
 		<EllipsisMenu
 			popoverClassName="help-center help-center__container-header-menu"
 			position="bottom"
 			trackEventProps={ { source: 'help_center' } }
 		>
-			<div className="clear-conversation__wrapper">
+			<div className="conversation-menu__wrapper">
 				<button onClick={ clearChat }>
 					<Gridicon icon="comment" />
 					<div>{ __( 'New conversation', __i18n_text_domain__ ) }</div>
 				</button>
+				<button onClick={ toggleSoundNotifications }>
+					<Gridicon icon="speaker" />
+					<div>
+						{ areSoundNotificationsEnabled
+							? __( 'Sound off', __i18n_text_domain__ )
+							: __( 'Sound on', __i18n_text_domain__ ) }
+					</div>
+				</button>
 			</div>
 		</EllipsisMenu>
 	);

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

@@ -36,25 +36,51 @@ const initSmooch = ( {
 	return Smooch.init( {
 		integrationId: isTestMode ? SMOOCH_INTEGRATION_ID_STAGING : SMOOCH_INTEGRATION_ID,
 		embedded: true,
+		soundNotificationEnabled: false,
 		externalId,
 		jwt,
 	} );
 };
+const playNotificationSound = () => {
+	// @ts-expect-error expected because of fallback webkitAudioContext
+	const audioContext = new ( window.AudioContext || window.webkitAudioContext )();
 
+	const duration = 0.7;
+	const oscillator = audioContext.createOscillator();
+	const gainNode = audioContext.createGain();
+
+	// Configure oscillator
+	oscillator.type = 'sine';
+	oscillator.frequency.setValueAtTime( 660, audioContext.currentTime );
+
+	// Configure gain for a smoother fade-out
+	gainNode.gain.setValueAtTime( 0.3, audioContext.currentTime );
+	gainNode.gain.exponentialRampToValueAtTime( 0.001, audioContext.currentTime + duration );
+
+	// Connect & start
+	oscillator.connect( gainNode );
+	gainNode.connect( audioContext.destination );
+	oscillator.start();
+	oscillator.stop( audioContext.currentTime + duration );
+};
 const HelpCenterSmooch: React.FC< { enableAuth: boolean } > = ( { enableAuth } ) => {
 	const { isEligibleForChat } = useChatStatus();
 	const { data: authData } = useAuthenticateZendeskMessaging(
 		enableAuth && isEligibleForChat,
 		'messenger'
 	);
 	const smoochRef = useRef< HTMLDivElement >( null );
-	const { isHelpCenterShown, isChatLoaded } = useSelect( ( select ) => {
-		const helpCenterSelect: HelpCenterSelect = select( HELP_CENTER_STORE );
-		return {
-			isHelpCenterShown: helpCenterSelect.isHelpCenterShown(),
-			isChatLoaded: helpCenterSelect.getIsChatLoaded(),
-		};
-	}, [] );
+	const { isHelpCenterShown, isChatLoaded, areSoundNotificationsEnabled } = useSelect(
+		( select ) => {
+			const helpCenterSelect: HelpCenterSelect = select( HELP_CENTER_STORE );
+			return {
+				isHelpCenterShown: helpCenterSelect.isHelpCenterShown(),
+				isChatLoaded: helpCenterSelect.getIsChatLoaded(),
+				areSoundNotificationsEnabled: helpCenterSelect.getAreSoundNotificationsEnabled(),
+			};
+		},
+		[]
+	);
 
 	const { isMessagingScriptLoaded } = useLoadZendeskMessaging(
 		'zendesk_support_chat_key',
@@ -66,13 +92,17 @@ const HelpCenterSmooch: React.FC< { enableAuth: boolean } > = ( { enableAuth } )
 
 	const getUnreadListener = useCallback(
 		( message: ZendeskMessage, data: { conversation: { id: string } } ) => {
+			if ( areSoundNotificationsEnabled ) {
+				playNotificationSound();
+			}
+
 			if ( isHelpCenterShown ) {
 				return;
 			}
 
 			Smooch.getConversationById( data?.conversation?.id ).then( () => getUnreadNotifications() );
 		},
-		[ isHelpCenterShown ]
+		[ isHelpCenterShown, areSoundNotificationsEnabled ]
 	);
 
 	const clientIdListener = useCallback(