Fix sample 13 for wrong Speech Services region

CHANGELOG.md

@@ -90,6 +90,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fix [#2428](https://github.com/microsoft/BotFramework-WebChat/issues/2428). Should interrupt speech synthesis after microphone button is clicked, by [@compulim](https://github.com/compulim) in PR [#2429](https://github.com/microsoft/BotFramework-WebChat/pull/2429)
 -  Fix [#2435](https://github.com/microsoft/BotFramework-WebChat/issues/2435). Fix microphone button getting stuck on voice-triggered expecting input hint without a speech synthesis engine, by [@compulim](https://github.com/compulim) in PR [#2445](https://github.com/microsoft/BotFramework-WebChat/pull/2445)
 -  Fix [#2472](https://github.com/microsoft/BotFramework-WebChat/issues/2472). Update samples to use repo's version of React, by [@corinagum](https://github.com/corinagum) in PR [#2478](https://github.com/microsoft/BotFramework-WebChat/pull/2478)
+-  Fix [#2473](https://github.com/microsoft/BotFramework-WebChat/issues/2473). Fix samples 13 using wrong region for Speech Services credentials, by [@compulim](https://github.com/compulim) in PR [#2482](https://github.com/microsoft/BotFramework-WebChat/pull/2482)
 
 ### Added
 

samples/13.customization-speech-ui/src/App.js

@@ -8,7 +8,10 @@ import React, { Component } from 'react';
 
 import CustomDictationInterims from './CustomDictationInterims';
 import CustomMicrophoneButton from './CustomMicrophoneButton';
-import fetchSpeechServicesToken from './fetchSpeechServicesToken';
+import {
+  region as fetchSpeechServicesRegion,
+  token as fetchSpeechServicesToken
+} from './fetchSpeechServicesCredentials';
 import LastBotActivity from './LastBotActivity';
 
 const { Composer } = Components;
@@ -27,9 +30,8 @@ export default class App extends Component {
     const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
     const { token } = await res.json();
     const webSpeechPonyfillFactory = await createCognitiveServicesSpeechServicesPonyfillFactory({
-      // TODO: [P3] Fetch token should be able to return different region
       authorizationToken: fetchSpeechServicesToken,
-      region: 'westus'
+      region: await fetchSpeechServicesRegion()
     });
 
     this.setState(() => ({

samples/13.customization-speech-ui/src/fetchSpeechServicesToken.js → samples/13.customization-speech-ui/src/fetchSpeechServicesCredentials.js

@@ -1,16 +1,27 @@
 const RENEW_EVERY = 300000;
-let fetchPromise,
-  lastFetch = 0;
+let fetchPromise;
+let lastFetch = 0;
+
+async function region() {
+  const { region } = await fetchCredentials();
+
+  return region;
+}
+
+async function token() {
+  const { token } = await fetchCredentials();
+
+  return token;
+}
 
 // This fetch function will be called every time Web Speech recognizer or synthesizer start
 // You are advised to cache the token to prevent unnecessary network call and delay
-export default function() {
+async function fetchCredentials() {
   const now = Date.now();
 
   if (!fetchPromise || now - lastFetch > RENEW_EVERY) {
     fetchPromise = fetch('https://webchat-mockbot.azurewebsites.net/speechservices/token', { method: 'POST' })
       .then(res => res.json())
-      .then(({ token }) => token)
       .catch(() => {
         lastFetch = 0;
       });
@@ -20,3 +31,6 @@ export default function() {
 
   return fetchPromise;
 }
+
+export default fetchCredentials;
+export { region, token };