chore(client): tidy Flash by tidying tone (#44320)

* chore(client): tidy Flash by tidying tone

* add store import

* fix enum, remove default switch case

Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>

* typo galore

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* rejig everything, because refactoring is fun 🙃

* refactor: DRY playTone

* fix url to foss library

Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>

* alphabetasize FlashMessage enum

* add all FlashMessages to tone/index.ts

* remove redundant type

* my code is correctnpm run develop:client

* fix: remove circular dependency

* fix: typo

* remove logs, play special tones for nightmode

* play sound on challengeComplete

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/templates/Introduction/components/block.tsx

@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import ScrollableAnchor from 'react-scrollable-anchor';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import store from 'store';
 
 import envData from '../../../../../config/env.json';
 import { isAuditedCert } from '../../../../../utils/is-audited';
@@ -14,6 +13,7 @@ import GreenPass from '../../../assets/icons/green-pass';
 import { Link } from '../../../components/helpers';
 import { completedChallengesSelector, executeGA } from '../../../redux';
 import { ChallengeNode, CompletedChallenge } from '../../../redux/prop-types';
+import { playTone } from '../../../utils/tone';
 import { makeExpandedBlockSelector, toggleBlock } from '../redux';
 import Challenges from './Challenges';
 
@@ -61,20 +61,7 @@ export class Block extends Component<BlockProps> {
 
   handleBlockClick(): void {
     const { blockDashedName, toggleBlock, executeGA } = this.props;
-    const playSound = store.get('fcc-sound') as boolean;
-    if (playSound) {
-      void (async () => {
-        const tone = await import('tone');
-
-        const player = new tone.Player(
-          'https://tonejs.github.io/audio/berklee/guitar_chord1.mp3'
-        ).toDestination();
-        if (tone.context.state !== 'running') {
-          void tone.context.resume();
-        }
-        player.autostart = playSound;
-      })();
-    }
+    void playTone('block-toggle');
     executeGA({
       type: 'event',
       data: {

client/src/templates/Introduction/components/cert-challenge.tsx

@@ -10,6 +10,7 @@ import {
   SuperBlocks
 } from '../../../../../config/certification-settings';
 import { createFlashMessage } from '../../../components/Flash/redux';
+import { FlashMessages } from '../../../components/Flash/redux/flash-messages';
 import {
   userFetchStateSelector,
   stepsToClaimSelector,
@@ -40,7 +41,7 @@ interface CertChallengeProps {
 
 const honestyInfoMessage = {
   type: 'info',
-  message: 'flash.honest-first'
+  message: FlashMessages.HonestFirst
 };
 
 const mapStateToProps = (state: unknown) => {