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,38 +94,55 @@
 	}
 }
 
-.clear-conversation__wrapper {
+.conversation-menu__wrapper {
 	padding: 4px 0;
     text-align: center;
 
 	svg {
 		fill: var(--studio-gray-70);
+		padding: 0 4px;
 	}
 
-	:hover, :focus {
-		background-color: $help-center-blue;
-		color: var(--studio-white);
+	.conversation-menu__clear-conversation {
+		&:hover, &:focus {
+			background-color: $help-center-blue;
+			color: var(--studio-white);
+
+			svg {
+				fill: var(--studio-white);
+			}
 
-		svg {
-			fill: var(--studio-white);
 		}
 	}
 
 	button {
 		display: flex;
 		align-items: center;
-		justify-content: center;
 		width: 100%;
-		padding: 8px;
 		cursor: pointer;
-		gap: 4px;
+		gap: 8px;
 		color: var(--studio-gray-70);
 		border: none;
 		background: unset;
+		padding: 8px 8px 8px 14px;
 
 		div {
 			margin-bottom: 2px;
 			font-size: 0.875rem;
 		}
 	}
+
+	.conversation-menu__notification-toggle {
+
+		.components-form-toggle.is-checked {
+			.components-form-toggle__track {
+				background-color: $help-center-blue;
+				border-color: $help-center-blue;
+			}
+		}
+
+		&:hover label {
+			cursor: initial;
+		}
+	}
 }

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

@@ -1,12 +1,19 @@
 /* eslint-disable no-restricted-imports */
 import { recordTracksEvent } from '@automattic/calypso-analytics';
-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 { CardHeader, Button, Flex, ToggleControl } from '@wordpress/components';
+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 {
+	closeSmall,
+	chevronUp,
+	lineSolid,
+	commentContent,
+	page,
+	Icon,
+	comment,
+} from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import clsx from 'clsx';
 import { Route, Routes, useLocation, useSearchParams } from 'react-router-dom';
@@ -66,24 +73,49 @@ 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 = ( event: React.MouseEvent< HTMLButtonElement > ) => {
+		event.stopPropagation();
+		setAreSoundNotificationsEnabled( ! areSoundNotificationsEnabled );
+	};
+
 	return (
 		<EllipsisMenu
 			popoverClassName="help-center help-center__container-header-menu"
 			position="bottom"
 			trackEventProps={ { source: 'help_center' } }
 		>
-			<div className="clear-conversation__wrapper">
-				<button onClick={ clearChat }>
-					<Gridicon icon="comment" />
+			<div className="conversation-menu__wrapper">
+				<button className="conversation-menu__clear-conversation" onClick={ clearChat }>
+					<Icon icon={ comment } />
 					<div>{ __( 'New conversation', __i18n_text_domain__ ) }</div>
 				</button>
+				<button onClick={ toggleSoundNotifications }>
+					<div>
+						<ToggleControl
+							className="conversation-menu__notification-toggle"
+							label={ __( 'Notification sound', __i18n_text_domain__ ) }
+							checked={ areSoundNotificationsEnabled }
+							onChange={ ( newValue ) => {
+								setAreSoundNotificationsEnabled( newValue );
+							} }
+							__nextHasNoMarginBottom
+						/>
+					</div>
+				</button>
 			</div>
 		</EllipsisMenu>
 	);

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

@@ -36,25 +36,53 @@ 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 +94,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(