Add package-lock changes for moment lib update

update moment lib (#95 )
Co-authored-by: p.souza <p.souza@cognigy.com>
2026-01-25 02:08:19 +00:00 · 2022-09-22 08:26:41 -07:00 · 2022-09-07 15:06:02 +02:00 · 2022-09-07 13:47:36 +02:00 · 2022-08-28 22:18:17 +02:00 · 2022-08-26 20:07:36 +02:00
42 changed files with 21185 additions and 26133 deletions
--- a/.env
+++ b/.env
@@ -1 +1,2 @@
 REACT_APP_API_BASE_URL=http://127.0.0.1:3002/v1
+GENERATE_SOURCEMAP=false
--- a/.eslintrc
+++ b/.eslintrc
@@ -2,15 +2,12 @@
  "extends": "react-app",
  "rules": {
    "linebreak-style": [
-        "error",
-        "unix"
+      "error",
+      "unix"
    ],
    "semi": [
-        "error",
-        "always"
-    ],
-    "no-trailing-spaces": [
-      "error"
+      "error",
+      "always"
    ]
  }
-}
+}
--- a/7
+++ b/7
@@ -1,15 +1,18 @@
-FROM node:alpine as builder
+FROM node:18.8.0-alpine as builder
 RUN apk update && apk add --no-cache python3 make g++
+COPY . /opt/app
 WORKDIR /opt/app/
 COPY package.json ./
 RUN npm install
+RUN npm run build
 RUN npm prune

-FROM node:alpine as webapp
+FROM node:18.6.0-alpine as webapp
 RUN apk add curl
 WORKDIR /opt/app
 COPY . /opt/app
 COPY --from=builder /opt/app/node_modules ./node_modules
+COPY --from=builder /opt/app/build ./build
 COPY ./entrypoint.sh /entrypoint.sh
 RUN chmod +x /entrypoint.sh
 ENTRYPOINT ["/entrypoint.sh"]
--- a/README.md
+++ b/README.md
@@ -25,7 +25,11 @@ If there is an update to this code base, you can update the code without re-depl

 ## Development

-Like production, you must specify the IP:port of the Jambonz API you will be hitting.
+### Local server
+See [howto-setup-test-environment](./howto-setup-test-environment.md) for details on how to set up a complete local test environment on your laptop.
+
+### Remote server
+If you want to test against a remote server, you must specify the IP:port of the Jambonz API you will be hitting.

  1. Copy `.env` to `.env.local`
  2. In `.env.local`, replace `[ip]:[port]` with the API's IP and port
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -2,7 +2,9 @@
 PUBLIC_IPV4="$(curl --fail -qs whatismyip.akamai.com)"
 API_PORT="${API_PORT:-3000}"
 API_VERSION="${API_VERSION:-v1}"
-echo "REACT_APP_API_BASE_URL=${REACT_APP_API_BASE_URL:-http://$PUBLIC_IPV4:$API_PORT/$API_VERSION}" > /opt/app/.env
+REACT_APP_API_BASE_URL=${REACT_APP_API_BASE_URL:-http://$PUBLIC_IPV4:$API_PORT/$API_VERSION}
+echo "REACT_APP_API_BASE_URL=${REACT_APP_API_BASE_URL}" > /opt/app/.env
 cd /opt/app/
-npm run build
-npm run serve
+TAG="<script>window.JAMBONZ = { APP_API_BASE_URL: '${REACT_APP_API_BASE_URL}'};</script>"
+sed -i -e "\@</head>@i\    $TAG" ./build/index.html
+npm run serve
--- a/howto-setup-test-environment.md
+++ b/howto-setup-test-environment.md
@@ -0,0 +1,59 @@
+# Setting up a local test environment
+This document describes how to set up a local development and test environment on your laptop.  Testing the jambonz-webapp requires a back-end system to run against, and we use docker-compose to run these back-end components, allowing you to develop and test the react UI locally.
+
+## Prerequisites
+- You will need to have docker and docker-compose installed on your laptop.
+- You need to have cloned the [jambonz-api-server](https://github.com/jambonz/jambonz-api-server) repo to a folder on your laptop.
+
+## Running the back-end services
+Make sure the docker daemon is running on your laptop.  Open a terminal window and cd into the project folder for jambonz-api-server, then run the following command to start the back-end processes.
+
+```bash
+cd jambonz-api-server
+npm run integration-test
+```
+
+This will take a few minutes to start, but eventually a successfull startup will eventually look something like this:
+```bash
+$ npm run integration-test
+
+> jambonz-api-server@v0.7.5 integration-test
+> NODE_ENV=test JAMBONES_TIME_SERIES_HOST=127.0.0.1 AWS_REGION='us-east-1' JAMBONES_CURRENCY=USD JWT_SECRET=foobarbazzle JAMBONES_MYSQL_HOST=127.0.0.1 JAMBONES_MYSQL_PORT=3360 JAMBONES_MYSQL_USER=jambones_test JAMBONES_MYSQL_PASSWORD=jambones_test JAMBONES_MYSQL_DATABASE=jambones_test JAMBONES_REDIS_HOST=localhost JAMBONES_REDIS_PORT=16379 JAMBONES_LOGLEVEL=debug JAMBONES_CREATE_CALL_URL=http://localhost/v1/createCall node test/serve-integration.js
+
+starting dockerized mysql and redis..
+mysql is running
+creating database..
+creating schema..
+seeding database..
+creating admin user..
+reset_admin_password, initial admin password is admin
+
+
+sipp exited with non-zero code 1 signal null
+1
+ready for testing!
+{"level":30, "time": "2022-04-14T18:07:49.318Z","pid":5292,"hostname":"MacBook-Pro-2.local","msg":"listening for HTTP traffic on port 3000","v":1}
+{"level":20, "time": "2022-04-14T18:07:49.325Z","pid":5292,"hostname":"MacBook-Pro-2.local","args":[],"msg":"redis event connect","v":1}
+{"level":20, "time": "2022-04-14T18:07:49.345Z","pid":5292,"hostname":"MacBook-Pro-2.local","args":[],"msg":"redis event ready","v":1}
+```
+
+This starts the a docker-compose network running the following containers:
+- mysql
+- redis
+- influxdb
+- heplify-server
+- drachtio
+- homer-webapp
+
+Leaving the jambonz-api-server process running, open another terminal window, cd into the folder where you have checked out this project, and start it as shown below:
+
+```
+cd jambonz-webapp
+npm start
+```
+This will start the react UI and open a browser page to http://localhost:3001.
+
+You should now see the login page to the jambonz webapp and can log in with username admin and password admin.  You will be forced to change the password, and then you should see the main page of the application.
+
+From here you can make and test changes locally.
+
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,19 +1,19 @@
 {
  "name": "jambonz-webapp",
-  "version": "v0.7.1",
+  "version": "v0.7.6",
  "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.5",
    "@testing-library/user-event": "^7.2.1",
-    "antd": "^4.15.4",
+    "antd": "^4.21.0",
    "axios": "^0.21.1",
-    "moment": "^2.29.1",
+    "moment": "^2.29.4",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1",
-    "serve": "^11.3.0",
+    "react-scripts": "^5.0.0",
+    "serve": "^13.0.2",
    "styled-components": "^5.0.1"
  },
  "scripts": {
--- a/src/components/blocks/Nav.js
+++ b/src/components/blocks/Nav.js
@@ -1,4 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable no-undef */
 import React, { useContext, useEffect, useState, useRef } from 'react';
 import axios from 'axios';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -16,6 +17,7 @@ import { Link as ReactRouterLink } from 'react-router-dom';
 import { ServiceProviderValueContext, ServiceProviderMethodContext } from '../../contexts/ServiceProviderContext';
 import LogoJambong from "../../images/LogoJambong.svg";
 import AddModalButton from '../elements/AddModalButton';
+import { APP_API_BASE_URL } from "../../constants";

 const StyledNav = styled.nav`
  position: relative;
@@ -106,7 +108,7 @@ const Nav = () => {
    if (history.location.pathname !== '' && jwt) {
      const serviceProvidersResponse = await axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: '/ServiceProviders',
        headers: {
          Authorization: `Bearer ${jwt}`,
@@ -137,7 +139,7 @@ const Nav = () => {

        const serviceProviderResponse = await axios({
          method: 'post',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: `/ServiceProviders`,
          headers: {
            Authorization: `Bearer ${jwt}`,
--- a/src/components/blocks/Sbcs.js
+++ b/src/components/blocks/Sbcs.js
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { useHistory } from 'react-router-dom';
 import { NotificationDispatchContext } from '../../contexts/NotificationContext';
 // import { ServiceProviderValueContext } from '../../contexts/ServiceProviderContext';
+import { APP_API_BASE_URL } from "../../constants";

 const Container = styled.div`
  margin-top: 0.25rem;
@@ -37,7 +38,7 @@ const Sbcs = props => {
        }
        const sbcResults = await axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          // url: `/Sbcs?service_provider_sid=${currentServiceProvider}`,
          url: '/Sbcs',
          headers: {
--- a/src/components/elements/AddButton.js
+++ b/src/components/elements/AddButton.js
@@ -21,6 +21,7 @@ const StyledLink = styled(FilteredLink)`
  border-radius: 50%;
  text-decoration: none;
  color: #565656;
+  z-index: 1;

  & > span:first-child {
    display: flex;
--- a/src/components/elements/Checkbox.js
+++ b/src/components/elements/Checkbox.js
@@ -111,6 +111,7 @@ const Checkbox = (props, ref) => {
        name={props.id}
        type="checkbox"
        checked={props.checked}
+        disabled={props.disabled}
        onChange={props.onChange}
        value={props.value}
        ref={inputRef}
--- a/src/components/forms/AccountForm.js
+++ b/src/components/forms/AccountForm.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import React, { useState, useEffect, useContext, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
@@ -21,6 +22,7 @@ import CopyableText from '../elements/CopyableText';
 import Span from '../elements/Span';
 import handleErrors from "../../helpers/handleErrors";
 import styled from 'styled-components/macro';
+import { APP_API_BASE_URL } from "../../constants";

 const StyledInputGroup = styled(InputGroup)`
  position: relative;
@@ -71,6 +73,7 @@ const AccountForm = props => {
  const [ name,          setName       ] = useState('');
  const [ sipRealm,      setSipRealm   ] = useState('');
  const [ deviceCallingApplication, setDeviceCallingApplication ] = useState('');
+  const [ siprecCallingApplication, setSiprecCallingApplication ] = useState('');
  const [ regWebhook,    setRegWebhook ] = useState('');
  const [ regMethod,     setRegMethod     ] = useState('POST');
  const [ regUser,       setRegUser       ] = useState('');
@@ -169,7 +172,7 @@ const AccountForm = props => {
      setGeneratingSecret(true);
      const apiKeyResponse = await axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/Accounts/${accountSid}/WebhookSecret?regenerate=true`,
        headers: {
          Authorization: `Bearer ${jwt}`,
@@ -217,7 +220,7 @@ const AccountForm = props => {
        : subspaceSipRealm;
      const response = await axios({
        method: 'post',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/Accounts/${accountSid}/SubspaceTeleport`,
        headers: {
          Authorization: `Bearer ${jwt}`,
@@ -257,7 +260,7 @@ const AccountForm = props => {

      const response = await axios({
        method: 'delete',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/Accounts/${accountSid}/SubspaceTeleport`,
        headers: {
          Authorization: `Bearer ${jwt}`,
@@ -298,7 +301,7 @@ const AccountForm = props => {
        const promiseList = [];
        const accountsPromise = axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: '/Accounts',
          headers: {
            Authorization: `Bearer ${jwt}`,
@@ -309,7 +312,7 @@ const AccountForm = props => {
        if (props.type === 'edit') {
          const applicationsPromise = axios({
            method: 'get',
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: '/Applications',
            headers: {
              Authorization: `Bearer ${jwt}`,
@@ -320,7 +323,7 @@ const AccountForm = props => {

        const sbcsPromise = await axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: '/Sbcs',
          headers: {
            Authorization: `Bearer ${jwt}`,
@@ -340,8 +343,7 @@ const AccountForm = props => {
          });
          setAccountApplications(accountApplicationsData);
        }
-
-        setSbcs(promiseAllValues[2].data); 
+        setSbcs(promiseAllValues[2]?.data); 

        if (props.type === 'setup' && accountsData.length > 1) {
          history.push('/internal/accounts');
@@ -375,6 +377,7 @@ const AccountForm = props => {
                setName(acc.name        || '');
            setSipRealm(acc.sip_realm   || '');
          setDeviceCallingApplication(acc.device_calling_application_sid || '');
+          setSiprecCallingApplication(acc.siprec_hook_sid || '');
          setRegWebhook((acc.registration_hook && acc.registration_hook.url     ) || '');
              setRegMethod((acc.registration_hook && acc.registration_hook.method  ) || 'post');
                setRegUser((acc.registration_hook && acc.registration_hook.username) || '');
@@ -548,6 +551,7 @@ const AccountForm = props => {

      if (props.type === 'edit') {
        axiosData.device_calling_application_sid = deviceCallingApplication || null;
+        axiosData.siprec_hook_sid = siprecCallingApplication || null;
      }

      const url = props.type === 'add'
@@ -556,7 +560,7 @@ const AccountForm = props => {

      await axios({
        method: props.type === 'add' ? 'post' : 'put',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url,
        headers: {
          Authorization: `Bearer ${jwt}`,
@@ -694,33 +698,61 @@ const AccountForm = props => {
        </StyledInputGroup>

        {props.type === 'edit' && (
-          <React.Fragment>
-            <Label tooltip htmlFor="deviceCallingApplication">
-              <span style={{ position: 'relative' }}>
-                Application for SIP Device Calls
-                <Tooltip large>
-                  This application is used to handle incoming calls from SIP users who have registered to the Account’s SIP Realm.
-                </Tooltip>
-              </span>
-            </Label>
-            <Select
-              large={props.type === 'setup'}
-              name="deviceCallingApplication"
-              id="deviceCallingApplication"
-              value={deviceCallingApplication}
-              onChange={e => setDeviceCallingApplication(e.target.value)}
-            >
-              <option value="">-- NONE --</option>
-              {accountApplications && accountApplications.map(app => (
-                <option
-                  key={app.application_sid}
-                  value={app.application_sid}
-                >
-                  {app.name}
-                </option>
-              ))}
-            </Select>
-          </React.Fragment>
+          <>
+            <React.Fragment>
+              <Label tooltip htmlFor="deviceCallingApplication">
+                <span style={{ position: 'relative' }}>
+                  Application for SIP Device Calls
+                  <Tooltip large>
+                    This application is used to handle incoming calls from SIP users who have registered to the Account’s SIP Realm.
+                  </Tooltip>
+                </span>
+              </Label>
+              <Select
+                large={props.type === 'setup'}
+                name="deviceCallingApplication"
+                id="deviceCallingApplication"
+                value={deviceCallingApplication}
+                onChange={e => setDeviceCallingApplication(e.target.value)}
+              >
+                <option value="">-- NONE --</option>
+                {accountApplications && accountApplications.map(app => (
+                  <option
+                    key={app.application_sid}
+                    value={app.application_sid}
+                  >
+                    {app.name}
+                  </option>
+                ))}
+              </Select>
+            </React.Fragment>
+            
+            <React.Fragment>
+              <Label tooltip htmlFor="siprecCallingApplication">
+                <span style={{ position: 'relative' }}>
+                  Application for SIPREC Calls
+                </span>
+              </Label>
+              <Select
+                large={props.type === 'setup'}
+                name="siprecCallingApplication"
+                id="siprecCallingApplication"
+                value={siprecCallingApplication}
+                onChange={e => setSiprecCallingApplication(e.target.value)}
+                right
+              >
+                <option value="">-- NONE --</option>
+                {accountApplications && accountApplications.map(app => (
+                  <option
+                    key={app.application_sid}
+                    value={app.application_sid}
+                  >
+                    {app.name}
+                  </option>
+                ))}
+              </Select>
+            </React.Fragment>
+          </>
        )}

        <Label htmlFor="regWebhook">Registration Webhook</Label>
--- a/src/components/forms/ApplicationForm.js
+++ b/src/components/forms/ApplicationForm.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import React, { useState, useEffect, useContext, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
@@ -17,8 +18,10 @@ import SpeechRecognizerLanguageGoogle from '../../data/SpeechRecognizerLanguageG
 import SpeechRecognizerLanguageAws from '../../data/SpeechRecognizerLanguageAws';
 import SpeechRecognizerLanguageMicrosoft from '../../data/SpeechRecognizerLanguageMicrosoft';
 import SpeechSynthesisLanguageMicrosoft from '../../data/SpeechSynthesisLanguageMicrosoft';
+import SpeechSynthesisLanguageWellSaid from '../../data/SpeechSynthesisLanguageWellSaid';
 import Loader from '../blocks/Loader';
 import CopyableText from '../elements/CopyableText';
+import { APP_API_BASE_URL } from "../../constants";

 const ApplicationForm = props => {
  let history = useHistory();
@@ -102,7 +105,7 @@ const ApplicationForm = props => {

        const accountsPromise = axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: '/Accounts',
          headers: {
            Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -110,7 +113,7 @@ const ApplicationForm = props => {
        });
        const applicationsPromise = axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: '/Applications',
          headers: {
            Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -393,7 +396,7 @@ const ApplicationForm = props => {

      await axios({
        method,
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -751,6 +754,10 @@ const ApplicationForm = props => {
                  ? SpeechSynthesisLanguageMicrosoft.find(l => (
                      l.code === speechSynthesisLanguage
                    ))
+                  : e.target.value === 'wellsaid'
+                  ? SpeechSynthesisLanguageWellSaid.find(l => (
+                      l.code === speechSynthesisLanguage
+                    ))
                  : SpeechSynthesisLanguageAws.find(l => (
                      l.code === speechSynthesisLanguage
                    ));
@@ -780,6 +787,7 @@ const ApplicationForm = props => {
              <option value="google">Google</option>
              <option value="aws">AWS</option>
              <option value="microsoft">Microsoft</option>
+              <option value="wellsaid">WellSaid</option>
            </Select>
            <Label middle htmlFor="speechSynthesisLanguage">Language</Label>
            <Select
@@ -807,6 +815,10 @@ const ApplicationForm = props => {
                  ? SpeechSynthesisLanguageMicrosoft.find(l => (
                      l.code === e.target.value
                    ))
+                    : speechSynthesisVendor === 'wellsaid'
+                  ? SpeechSynthesisLanguageWellSaid.find(l => (
+                      l.code === e.target.value
+                    ))
                  : SpeechSynthesisLanguageAws.find(l => (
                      l.code === e.target.value
                    ));
@@ -823,6 +835,10 @@ const ApplicationForm = props => {
                SpeechSynthesisLanguageMicrosoft.map(l => (
                  <option key={l.code} value={l.code}>{l.name}</option>
                ))
+              ) : speechSynthesisVendor === 'wellsaid' ? (
+                SpeechSynthesisLanguageWellSaid.map(l => (
+                  <option key={l.code} value={l.code}>{l.name}</option>
+                ))
              ) : (
                SpeechSynthesisLanguageAws.map(l => (
                  <option key={l.code} value={l.code}>{l.name}</option>
@@ -849,6 +865,12 @@ const ApplicationForm = props => {
                  .map(m => m.voices.map(v => (
                    <option key={v.value} value={v.value}>{v.name}</option>
                  )))
+              ) : speechSynthesisVendor === 'wellsaid' ? (
+                SpeechSynthesisLanguageWellSaid
+                  .filter(l => l.code === speechSynthesisLanguage)
+                  .map(m => m.voices.map(v => (
+                    <option key={v.value} value={v.value}>{v.name}</option>
+                  )))
              ) : (
                SpeechSynthesisLanguageAws
                    .filter(l => l.code === speechSynthesisLanguage)
--- a/src/components/forms/CarrierForm.js
+++ b/src/components/forms/CarrierForm.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import React, { useState, useEffect, useContext, useRef } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import axios from 'axios';
@@ -20,6 +21,7 @@ import sortSipGateways from '../../helpers/sortSipGateways';
 import Select from '../elements/Select';
 import handleErrors from "../../helpers/handleErrors";
 import { LinkWithTooltip } from '../elements/Tooltip';
+import { APP_API_BASE_URL } from "../../constants";

 const { TabPane } = Tabs;

@@ -324,7 +326,7 @@ const CarrierForm = (props) => {
        // Get Application Data
        const applicationPromise = axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: '/Applications',
          headers: {
            Authorization: `Bearer ${jwt}`,
@@ -332,7 +334,7 @@ const CarrierForm = (props) => {
        });
        const accountsPromise = axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: '/Accounts',
          headers: {
            Authorization: `Bearer ${jwt}`,
@@ -340,7 +342,7 @@ const CarrierForm = (props) => {
        });
        const smppsPromise = axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: '/Smpps',
          headers: {
            Authorization: `Bearer ${jwt}`,
@@ -348,7 +350,7 @@ const CarrierForm = (props) => {
        });
        const sbcsPromise = await axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: '/Sbcs',
          headers: {
            Authorization: `Bearer ${jwt}`,
@@ -357,12 +359,12 @@ const CarrierForm = (props) => {
        promises.push(applicationPromise); // 0
        promises.push(accountsPromise); // 1
        promises.push(smppsPromise); // 2
-        promises.push(sbcsPromise) // 3
+        promises.push(sbcsPromise); // 3

        if (type === 'edit') {
          const carrierPromise = axios({
            method: 'get',
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: `/VoipCarriers/${voip_carrier_sid}`,
            headers: {
              Authorization: `Bearer ${jwt}`,
@@ -371,7 +373,7 @@ const CarrierForm = (props) => {

          const sipGatewaysPromise = axios({
            method: 'get',
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: `/SipGateways?voip_carrier_sid=${voip_carrier_sid}`,
            headers: {
              Authorization: `Bearer ${jwt}`,
@@ -380,7 +382,7 @@ const CarrierForm = (props) => {

          const smppGatewaysPromise = axios({
            method: 'get',
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: `/SmppGateways?voip_carrier_sid=${voip_carrier_sid}`,
            headers: {
              Authorization: `Bearer ${jwt}`,
@@ -474,7 +476,7 @@ const CarrierForm = (props) => {
        } else {
          const result = await axios({
            method: 'get',
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: `/PredefinedCarriers`,
            headers: {
              Authorization: `Bearer ${jwt}`,
@@ -645,7 +647,7 @@ const CarrierForm = (props) => {
      let errorMessages = [];
      let focusHasBeenSet = false;
      const regIp = /^((25[0-5]|2[0-4][0-9]|[0-1]?[0-9]?[0-9])\.){3}(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]?[0-9])$/;
-      const regFqdn = /^([a-zA-Z][^.]*)(\.[^.]+){2,}$/;
+      const regFqdn = /^([a-zA-Z0-9][^.]*)(\.[^.]+){2,}$/;
      const regFqdnTopLevel = /^([a-zA-Z][^.]*)(\.[^.]+)$/;
      const regPort = /^[0-9]+$/;

@@ -1012,7 +1014,7 @@ const CarrierForm = (props) => {
      // Create or update carrier
      const voipCarrier = await axios({
        method,
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url,
        headers: {
          Authorization: `Bearer ${jwt}`,
@@ -1043,7 +1045,7 @@ const CarrierForm = (props) => {
      if (!creatingNewCarrier) {
        let results = await axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: `/SipGateways?voip_carrier_sid=${carrierSid}`,
          headers: {
            Authorization: `Bearer ${jwt}`,
@@ -1053,7 +1055,7 @@ const CarrierForm = (props) => {
        if(smpps && smpps.length > 0) {
          results = await axios({
            method: 'get',
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: `/SmppGateways?voip_carrier_sid=${voip_carrier_sid}`,
            headers: {
              Authorization: `Bearer ${jwt}`,
@@ -1096,7 +1098,7 @@ const CarrierForm = (props) => {

          const result = await axios({
            method,
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url,
            headers: {
              Authorization: `Bearer ${jwt}`,
@@ -1135,7 +1137,7 @@ const CarrierForm = (props) => {

            const result = await axios({
              method,
-              baseURL: process.env.REACT_APP_API_BASE_URL,
+              baseURL: APP_API_BASE_URL,
              url,
              headers: {
                Authorization: `Bearer ${jwt}`,
@@ -1152,7 +1154,7 @@ const CarrierForm = (props) => {
          for (const sid of completedSipGateways) {
            await axios({
              method: 'delete',
-              baseURL: process.env.REACT_APP_API_BASE_URL,
+              baseURL: APP_API_BASE_URL,
              url: `/SipGateways/${sid}`,
              headers: {
                Authorization: `Bearer ${jwt}`,
@@ -1164,7 +1166,7 @@ const CarrierForm = (props) => {
          for (const sid of completedSmppGateways) {
            await axios({
              method: 'delete',
-              baseURL: process.env.REACT_APP_API_BASE_URL,
+              baseURL: APP_API_BASE_URL,
              url: `/SmppGateways/${sid}`,
              headers: {
                Authorization: `Bearer ${jwt}`,
@@ -1175,7 +1177,7 @@ const CarrierForm = (props) => {
        if (voip_carrier_sid) {
          await axios({
            method: 'delete',
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: `/VoipCarriers/${voip_carrier_sid}`,
            headers: {
              Authorization: `Bearer ${jwt}`,
@@ -1192,7 +1194,7 @@ const CarrierForm = (props) => {
          if (!match.length) {
            await axios({
              method: 'delete',
-              baseURL: process.env.REACT_APP_API_BASE_URL,
+              baseURL: APP_API_BASE_URL,
              url: `/SipGateways/${remote.sip_gateway_sid}`,
              headers: {
                Authorization: `Bearer ${jwt}`,
@@ -1206,7 +1208,7 @@ const CarrierForm = (props) => {
            if (!match.length) {
              await axios({
                method: 'delete',
-                baseURL: process.env.REACT_APP_API_BASE_URL,
+                baseURL: APP_API_BASE_URL,
                url: `/SmppGateways/${remote.smpp_gateway_sid}`,
                headers: {
                  Authorization: `Bearer ${jwt}`,
@@ -1262,7 +1264,7 @@ const CarrierForm = (props) => {

      const result = await axios({
        method: 'post',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/ServiceProviders/${currentServiceProvider}/PredefinedCarriers/${value}`,
        headers: {
          Authorization: `Bearer ${jwt}`,
--- a/src/components/forms/MsTeamsTenantForm.js
+++ b/src/components/forms/MsTeamsTenantForm.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import React, { useState, useEffect, useContext, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
@@ -10,6 +11,7 @@ import InputGroup from '../elements/InputGroup';
 import FormError from '../blocks/FormError';
 import Loader from '../blocks/Loader';
 import Button from '../elements/Button';
+import { APP_API_BASE_URL } from "../../constants";

 const MsTeamsTenantForm = props => {

@@ -54,7 +56,7 @@ const MsTeamsTenantForm = props => {

        const tenantsPromise = axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: '/MicrosoftTeamsTenants',
          headers: {
            Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -62,7 +64,7 @@ const MsTeamsTenantForm = props => {
        });
        const accountsPromise = axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: '/Accounts',
          headers: {
            Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -70,7 +72,7 @@ const MsTeamsTenantForm = props => {
        });
        const applicationsPromise = axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: '/Applications',
          headers: {
            Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -86,7 +88,7 @@ const MsTeamsTenantForm = props => {
        if (props.type === 'add') {
          promises.push(axios({
            method: 'get',
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: '/ServiceProviders',
            headers: {
              Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -247,7 +249,7 @@ const MsTeamsTenantForm = props => {

      await axios({
        method,
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
--- a/src/components/forms/PhoneNumberForm.js
+++ b/src/components/forms/PhoneNumberForm.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import React, { useState, useEffect, useContext, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
@@ -12,6 +13,7 @@ import FormError from '../blocks/FormError';
 import Loader from '../blocks/Loader';
 import Button from '../elements/Button';
 import phoneNumberFormat from '../../helpers/phoneNumberFormat';
+import { APP_API_BASE_URL } from "../../constants";

 const PhoneNumberForm = props => {

@@ -60,32 +62,32 @@ const PhoneNumberForm = props => {

        const sipTrunksPromise = axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
-          url: '/VoipCarriers',
+          baseURL: APP_API_BASE_URL,
+          url: `ServiceProviders/${currentServiceProvider}/VoipCarriers`,
          headers: {
            Authorization: `Bearer ${localStorage.getItem('token')}`,
          },
        });
        const accountsPromise = axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
-          url: '/Accounts',
+          baseURL: APP_API_BASE_URL,
+          url: `ServiceProviders/${currentServiceProvider}/Accounts`,
          headers: {
            Authorization: `Bearer ${localStorage.getItem('token')}`,
          },
        });
        const applicationsPromise = axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
-          url: '/Applications',
+          baseURL: APP_API_BASE_URL,
+          url: `ServiceProviders/${currentServiceProvider}/Applications`,
          headers: {
            Authorization: `Bearer ${localStorage.getItem('token')}`,
          },
        });
        const phoneNumbersPromise = axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
-          url: '/PhoneNumbers',
+          baseURL: APP_API_BASE_URL,
+          url: `ServiceProviders/${currentServiceProvider}/PhoneNumbers`,
          headers: {
            Authorization: `Bearer ${localStorage.getItem('token')}`,
          },
@@ -276,7 +278,7 @@ const PhoneNumberForm = props => {

      await axios({
        method,
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
--- a/src/components/forms/SettingsForm.js
+++ b/src/components/forms/SettingsForm.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import React, { useState, useEffect, useContext, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
@@ -15,6 +16,7 @@ import Loader from '../blocks/Loader';
 import Modal from '../blocks/Modal';
 import { ServiceProviderValueContext } from '../../contexts/ServiceProviderContext';
 import handleErrors from "../../helpers/handleErrors";
+import { APP_API_BASE_URL } from "../../constants";

 const Td = styled.td`
  padding: 0.5rem 0;
@@ -41,23 +43,23 @@ const SettingsForm = () => {
  const refServiceProviderName = useRef(null);

  // Form inputs
-  const [ enableMsTeams, setEnableMsTeams ] = useState(false);
-  const [ sbcDomainName, setSbcDomainName ] = useState('');
+  const [enableMsTeams, setEnableMsTeams] = useState(false);
+  const [sbcDomainName, setSbcDomainName] = useState('');
  const [serviceProviderName, setServiceProviderName] = useState('');

  // For when user has data in sbcDomainName and then taps the checkbox to disable MsTeams
-  const [ savedSbcDomainName, setSavedSbcDomainName ] = useState('');
+  const [savedSbcDomainName, setSavedSbcDomainName] = useState('');

  // Invalid form inputs
-  const [ invalidEnableMsTeams, setInvalidEnableMsTeams ] = useState(false);
-  const [ invalidSbcDomainName, setInvalidSbcDomainName ] = useState(false);
+  const [invalidEnableMsTeams, setInvalidEnableMsTeams] = useState(false);
+  const [invalidSbcDomainName, setInvalidSbcDomainName] = useState(false);
  const [invalidServiceProviderName, setInvalidServiceProviderName] = useState(false);

-  const [ showLoader, setShowLoader ] = useState(true);
-  const [ errorMessage, setErrorMessage ] = useState('');
-  const [ serviceProviderSid, setServiceProviderSid ] = useState('');
-  const [ serviceProviders, setServiceProviders ] = useState([]);
-  const [ confirmDelete, setConfirmDelete ] = useState(false);
+  const [showLoader, setShowLoader] = useState(true);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [serviceProviderSid, setServiceProviderSid] = useState('');
+  const [serviceProviders, setServiceProviders] = useState([]);
+  const [confirmDelete, setConfirmDelete] = useState(false);

  useEffect(() => {
    const getSettingsData = async () => {
@@ -74,7 +76,7 @@ const SettingsForm = () => {

        const serviceProvidersResponse = await axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: `/ServiceProviders`,
          headers: {
            Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -119,25 +121,25 @@ const SettingsForm = () => {

    axios({
      method: 'delete',
-      baseURL: process.env.REACT_APP_API_BASE_URL,
+      baseURL: APP_API_BASE_URL,
      url: `/ServiceProviders/${serviceProviderSid}`,
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`,
      },
    })
-    .then(() => {
-      setConfirmDelete(false);
-      setErrorMessage('');
-      history.push('/internal/accounts');
-      dispatch({
-        type: 'ADD',
-        level: 'success',
-        message: 'Service Provider Deleted'
+      .then(() => {
+        setConfirmDelete(false);
+        setErrorMessage('');
+        history.push('/internal/accounts');
+        dispatch({
+          type: 'ADD',
+          level: 'success',
+          message: 'Service Provider Deleted'
+        });
+      })
+      .catch((error) => {
+        setErrorMessage(error.response.data.msg);
      });
-    })
-    .catch((error) => {
-      setErrorMessage(error.response.data.msg);
-    });
  };

  const handleSubmit = async (e) => {
@@ -208,7 +210,7 @@ const SettingsForm = () => {

      await axios({
        method: 'put',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/ServiceProviders/${serviceProviderSid}`,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -253,115 +255,115 @@ const SettingsForm = () => {

  return (
    showLoader
-    ? <Loader height="365px" />
-    : (
-      <>
-        <Form
-          large
-          wideLabel
-          onSubmit={handleSubmit}
-        >
-          <Label htmlFor="serviceProviderName">Service Provider Name</Label>
-          <Input
-            name="serviceProviderName"
-            id="serviceProviderName"
-            value={serviceProviderName}
-            onChange={e => setServiceProviderName(e.target.value)}
-            invalid={invalidServiceProviderName}
-            ref={refServiceProviderName}
-          />
-          <div>{/* needed for CSS grid layout */}</div>
-          <Checkbox
-            noLeftMargin
-            id="enableMsTeams"
-            label="Enable Microsoft Teams Direct Routing"
-            checked={enableMsTeams}
-            onChange={toggleMsTeams}
-            invalid={invalidEnableMsTeams}
-            ref={refEnableMsTeams}
-          />
+      ? <Loader height="365px" />
+      : (
+        <>
+          <Form
+            large
+            wideLabel
+            onSubmit={handleSubmit}
+          >
+            <Label htmlFor="serviceProviderName">Service Provider Name</Label>
+            <Input
+              name="serviceProviderName"
+              id="serviceProviderName"
+              value={serviceProviderName}
+              onChange={e => setServiceProviderName(e.target.value)}
+              invalid={invalidServiceProviderName}
+              ref={refServiceProviderName}
+            />
+            <div>{/* needed for CSS grid layout */}</div>
+            <Checkbox
+              noLeftMargin
+              id="enableMsTeams"
+              label="Enable Microsoft Teams Direct Routing"
+              checked={enableMsTeams}
+              onChange={toggleMsTeams}
+              invalid={invalidEnableMsTeams}
+              ref={refEnableMsTeams}
+            />

-          <Label htmlFor="sbcDomainName">SBC Domain Name</Label>
-          <Input
-            name="sbcDomainName"
-            id="sbcDomainName"
-            value={sbcDomainName}
-            onChange={e => setSbcDomainName(e.target.value)}
-            placeholder="Fully qualified domain name used for Microsoft Teams"
-            invalid={invalidSbcDomainName}
-            autoFocus={enableMsTeams}
-            ref={refSbcDomainName}
-            disabled={!enableMsTeams}
-            title={(!enableMsTeams && "You must enable Microsoft Teams Direct Routing in order to provide an SBC Domain Name") || ""}
-          />
+            <Label htmlFor="sbcDomainName">SBC Domain Name</Label>
+            <Input
+              name="sbcDomainName"
+              id="sbcDomainName"
+              value={sbcDomainName}
+              onChange={e => setSbcDomainName(e.target.value)}
+              placeholder="Fully qualified domain name used for Microsoft Teams"
+              invalid={invalidSbcDomainName}
+              autoFocus={enableMsTeams}
+              ref={refSbcDomainName}
+              disabled={!enableMsTeams}
+              title={(!enableMsTeams && "You must enable Microsoft Teams Direct Routing in order to provide an SBC Domain Name") || ""}
+            />

-          {errorMessage && !confirmDelete && (
-            <FormError grid message={errorMessage} />
-          )}
+            {errorMessage && !confirmDelete && (
+              <FormError grid message={errorMessage} />
+            )}

-          <InputGroup flexEnd spaced>
-            <Button
-              grid
-              gray
-              type="button"
-              onClick={() => {
-                history.push('/internal/accounts');
-                dispatch({
-                  type: 'ADD',
-                  level: 'info',
-                  message: 'Changes canceled',
-                });
-              }}
-            >
-              Cancel
-            </Button>
-            {serviceProviders.length > 1 && (
+            <InputGroup flexEnd spaced>
              <Button
                grid
                gray
                type="button"
-                onClick={() => setConfirmDelete(true)}
+                onClick={() => {
+                  history.push('/internal/accounts');
+                  dispatch({
+                    type: 'ADD',
+                    level: 'info',
+                    message: 'Changes canceled',
+                  });
+                }}
              >
-                Delete
+                Cancel
              </Button>
-            )}
-            <Button grid>Save</Button>
-          </InputGroup>
-        </Form>
+              {serviceProviders.length > 1 && (
+                <Button
+                  grid
+                  gray
+                  type="button"
+                  onClick={() => setConfirmDelete(true)}
+                >
+                  Delete
+                </Button>
+              )}
+              <Button grid>Save</Button>
+            </InputGroup>
+          </Form>

-        {confirmDelete && serviceProviders.length > 1 && (
-          <Modal
-            title="Are you sure you want to delete the Service Provider?"
-            loader={false}
-            content={
-              <div>
-                <table>
-                  <tbody>
-                    <tr>
-                      <Td>Service Provider Name:</Td>
-                      <Td>{serviceProviderName}</Td>
-                    </tr>
-                    <tr>
-                      <Td>SBC Domain Name:</Td>
-                      <Td>{sbcDomainName || '[none]'}</Td>
-                    </tr>
-                  </tbody>
-                </table>
-                {errorMessage && (
-                  <FormError message={errorMessage} />
-                )}
-              </div>
-            }
-            handleCancel={() => {
-              setConfirmDelete(false);
-              setErrorMessage('');
-            }}
-            handleSubmit={handleDelete}
-            actionText="Delete"
-          />
-        )}
-      </>
-    )
+          {confirmDelete && serviceProviders.length > 1 && (
+            <Modal
+              title="Are you sure you want to delete the Service Provider?"
+              loader={false}
+              content={
+                <div>
+                  <table>
+                    <tbody>
+                      <tr>
+                        <Td>Service Provider Name:</Td>
+                        <Td>{serviceProviderName}</Td>
+                      </tr>
+                      <tr>
+                        <Td>SBC Domain Name:</Td>
+                        <Td>{sbcDomainName || '[none]'}</Td>
+                      </tr>
+                    </tbody>
+                  </table>
+                  {errorMessage && (
+                    <FormError message={errorMessage} />
+                  )}
+                </div>
+              }
+              handleCancel={() => {
+                setConfirmDelete(false);
+                setErrorMessage('');
+              }}
+              handleSubmit={handleDelete}
+              actionText="Delete"
+            />
+          )}
+        </>
+      )
  );
 };

--- a/src/components/forms/SpeechForm.js
+++ b/src/components/forms/SpeechForm.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import React, { useState, useEffect, useContext, useRef } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import axios from 'axios';
@@ -11,17 +12,17 @@ import Label from '../elements/Label';
 import Select from '../elements/Select';
 import InputGroup from '../elements/InputGroup';
 import PasswordInput from '../elements/PasswordInput';
-import Radio from '../elements/Radio';
 import Checkbox from '../elements/Checkbox';
 import FileUpload from '../elements/FileUpload';
 import Code from '../elements/Code';
 import FormError from '../blocks/FormError';
 import Button from '../elements/Button';
 import Loader from '../blocks/Loader';
-import { ServiceProviderValueContext } from '../../contexts/ServiceProviderContext'
+import { ServiceProviderValueContext } from '../../contexts/ServiceProviderContext';

+import AwsRegions from '../../data/AwsRegions';
 import MicrosoftAzureRegions from '../../data/MicrosoftAzureRegions';
-
+import { APP_API_BASE_URL } from "../../constants";

 const StyledButtonGroup = styled(InputGroup)`
  @media (max-width: 576.98px) {
@@ -70,44 +71,49 @@ const SpeechServicesAddEdit = (props) => {
  const refVendorGoogle = useRef(null);
  const refVendorAws = useRef(null);
  const refVendorMs = useRef(null);
+  const refVendorWellSaid = useRef(null);
  const refAccessKeyId = useRef(null);
  const refSecretAccessKey = useRef(null);
  const refUseForTts = useRef(null);
  const refUseForStt = useRef(null);
  const refApiKey = useRef(null);
  const refRegion = useRef(null);
+  const refAwsRegion = useRef(null);

  // Form inputs
-  const [ vendor,              setVendor              ] = useState('');
-  const [ serviceKey,          setServiceKey          ] = useState('');
-  const [ displayedServiceKey, setDisplayedServiceKey ] = useState('');
-  const [ accessKeyId,         setAccessKeyId         ] = useState('');
-  const [ secretAccessKey,     setSecretAccessKey     ] = useState('');
-  const [ useForTts,           setUseForTts           ] = useState(false);
-  const [ useForStt,           setUseForStt           ] = useState(false);
-  const [ accounts,            setAccounts            ] = useState([]);
-  const [ accountSid,          setAccountSid          ] = useState('');
-  const [ apiKey,              setApiKey              ] = useState('');
-  const [ region,              setRegion              ] = useState('');
+  const [vendor, setVendor] = useState('');
+  const [serviceKey, setServiceKey] = useState('');
+  const [displayedServiceKey, setDisplayedServiceKey] = useState('');
+  const [accessKeyId, setAccessKeyId] = useState('');
+  const [secretAccessKey, setSecretAccessKey] = useState('');
+  const [useForTts, setUseForTts] = useState(false);
+  const [useForStt, setUseForStt] = useState(false);
+  const [accounts, setAccounts] = useState([]);
+  const [accountSid, setAccountSid] = useState('');
+  const [apiKey, setApiKey] = useState('');
+  const [region, setRegion] = useState('');
+  const [awsregion, setAwsRegion] = useState('');

  // Invalid form inputs
-  const [ invalidVendorGoogle,    setInvalidVendorGoogle    ] = useState(false);
-  const [ invalidVendorAws,       setInvalidVendorAws       ] = useState(false);
-  const [ invalidVendorMs,        setInvalidVendorMs       ] = useState(false);
-  const [ invalidAccessKeyId,     setInvalidAccessKeyId     ] = useState(false);
-  const [ invalidSecretAccessKey, setInvalidSecretAccessKey ] = useState(false);
-  const [ invalidUseForTts,       setInvalidUseForTts       ] = useState(false);
-  const [ invalidUseForStt,       setInvalidUseForStt       ] = useState(false);
-  const [ invalidApiKey,          setInvalidApiKey          ] = useState(false);
-  const [ invalidRegion,          setInvalidRegion          ] = useState(false);
+  const [invalidVendorGoogle, setInvalidVendorGoogle] = useState(false);
+  const [invalidVendorAws, setInvalidVendorAws] = useState(false);
+  const [invalidVendorMs, setInvalidVendorMs] = useState(false);
+  const [invalidVendorWellSaid, setInvalidVendorWellSaid] = useState(false);
+  const [invalidAccessKeyId, setInvalidAccessKeyId] = useState(false);
+  const [invalidSecretAccessKey, setInvalidSecretAccessKey] = useState(false);
+  const [invalidUseForTts, setInvalidUseForTts] = useState(false);
+  const [invalidUseForStt, setInvalidUseForStt] = useState(false);
+  const [invalidApiKey, setInvalidApiKey] = useState(false);
+  const [invalidRegion, setInvalidRegion] = useState(false);
+  const [invalidAwsRegion, setInvalidAwsRegion] = useState(false);

-  const [ originalTtsValue,       setOriginalTtsValue       ] = useState(null);
-  const [ originalSttValue,       setOriginalSttValue       ] = useState(null);
+  const [originalTtsValue, setOriginalTtsValue] = useState(null);
+  const [originalSttValue, setOriginalSttValue] = useState(null);

-  const [ validServiceKey,        setValidServiceKey        ] = useState(false);
+  const [validServiceKey, setValidServiceKey] = useState(false);

-  const [ showLoader, setShowLoader ] = useState(true);
-  const [ errorMessage, setErrorMessage ] = useState('');
+  const [showLoader, setShowLoader] = useState(true);
+  const [errorMessage, setErrorMessage] = useState('');

  useEffect(() => {
    const getAPIData = async () => {
@@ -115,7 +121,7 @@ const SpeechServicesAddEdit = (props) => {
      try {
        const accountsResponse = await axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: '/Accounts',
          headers: {
            Authorization: `Bearer ${jwt}`,
@@ -127,7 +133,7 @@ const SpeechServicesAddEdit = (props) => {
        if (type === 'edit') {
          const speechCredential = await axios({
            method: 'get',
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: `/ServiceProviders/${currentServiceProvider}/SpeechCredentials/${speech_service_sid}`,
            headers: {
              Authorization: `Bearer ${jwt}`,
@@ -143,18 +149,19 @@ const SpeechServicesAddEdit = (props) => {
          } catch (err) {
          }

-          setAccountSid(          speechCredential.data.account_sid       || '');
-          setVendor(              speechCredential.data.vendor            || undefined);
-          setServiceKey(          serviceKeyJson                          || '');
-          setDisplayedServiceKey( displayedServiceKeyJson                 || '');
-          setAccessKeyId(         speechCredential.data.access_key_id     || '');
-          setSecretAccessKey(     speechCredential.data.secret_access_key || '');
-          setApiKey(              speechCredential.data.api_key           || '');
-          setRegion(              speechCredential.data.region            || '');
-          setUseForTts(           speechCredential.data.use_for_tts       || false);
-          setUseForStt(           speechCredential.data.use_for_stt       || false);
-          setOriginalTtsValue(    speechCredential.data.use_for_tts       || false);
-          setOriginalSttValue(    speechCredential.data.use_for_stt       || false);
+          setAccountSid(speechCredential.data.account_sid || '');
+          setVendor(speechCredential.data.vendor || undefined);
+          setServiceKey(serviceKeyJson || '');
+          setDisplayedServiceKey(displayedServiceKeyJson || '');
+          setAccessKeyId(speechCredential.data.access_key_id || '');
+          setSecretAccessKey(speechCredential.data.secret_access_key || '');
+          setApiKey(speechCredential.data.api_key || '');
+          setRegion(speechCredential.data.region || '');
+          setAwsRegion(speechCredential.data.aws_region || '');
+          setUseForTts(speechCredential.data.use_for_tts || false);
+          setUseForStt(speechCredential.data.use_for_stt || false);
+          setOriginalTtsValue(speechCredential.data.use_for_tts || false);
+          setOriginalSttValue(speechCredential.data.use_for_stt || false);
        }
        setShowLoader(false);
      } catch (err) {
@@ -219,6 +226,7 @@ const SpeechServicesAddEdit = (props) => {
      setInvalidVendorGoogle(false);
      setInvalidVendorAws(false);
      setInvalidVendorMs(false);
+      setInvalidVendorWellSaid(false);
      setInvalidAccessKeyId(false);
      setInvalidSecretAccessKey(false);
      setInvalidUseForTts(false);
@@ -232,6 +240,7 @@ const SpeechServicesAddEdit = (props) => {
        setInvalidVendorGoogle(true);
        setInvalidVendorAws(true);
        setInvalidVendorMs(true);
+        setInvalidVendorWellSaid(true);
        if (!focusHasBeenSet) {
          refVendorGoogle.current.focus();
          focusHasBeenSet = true;
@@ -260,6 +269,15 @@ const SpeechServicesAddEdit = (props) => {
        }
      }

+      if (vendor === 'aws' && !awsregion) {
+        errorMessages.push('Please select a region.');
+        setInvalidAwsRegion(true);
+        if (!focusHasBeenSet) {
+          refAwsRegion.current.focus();
+          focusHasBeenSet = true;
+        }
+      }
+
      if (vendor === 'microsoft' && !apiKey) {
        errorMessages.push('Please provide an API key.');
        setInvalidApiKey(true);
@@ -278,6 +296,15 @@ const SpeechServicesAddEdit = (props) => {
        }
      }

+      if (vendor === 'wellsaid' && !apiKey) {
+        errorMessages.push('Please provide an API key.');
+        setInvalidApiKey(true);
+        if (!focusHasBeenSet) {
+          refApiKey.current.focus();
+          focusHasBeenSet = true;
+        }
+      }
+
      if (errorMessages.length > 1) {
        setErrorMessage(errorMessages);
        return;
@@ -299,7 +326,7 @@ const SpeechServicesAddEdit = (props) => {

      const postResults = await axios({
        method,
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url,
        headers: {
          Authorization: `Bearer ${jwt}`,
@@ -309,7 +336,8 @@ const SpeechServicesAddEdit = (props) => {
          service_key: vendor === 'google' ? JSON.stringify(serviceKey) : null,
          access_key_id: vendor === 'aws' ? accessKeyId : null,
          secret_access_key: vendor === 'aws' ? secretAccessKey : null,
-          api_key: vendor === 'microsoft' ? apiKey : null,
+          aws_region: vendor === 'aws' ? awsregion : null,
+          api_key: ['microsoft', 'wellsaid'].includes(vendor) ? apiKey : null,
          region: vendor === 'microsoft' ? region : null,
          use_for_tts: useForTts,
          use_for_stt: useForStt,
@@ -332,7 +360,7 @@ const SpeechServicesAddEdit = (props) => {
      if (useForTts || useForStt) {
        const testResults = await axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: `/ServiceProviders/${currentServiceProvider}/SpeechCredentials/${speech_service_sid}/test`,
          headers: {
            Authorization: `Bearer ${jwt}`,
@@ -377,7 +405,7 @@ const SpeechServicesAddEdit = (props) => {
          if (type === 'add') {
            await axios({
              method: 'delete',
-              baseURL: process.env.REACT_APP_API_BASE_URL,
+              baseURL: APP_API_BASE_URL,
              url: `/ServiceProviders/${currentServiceProvider}/SpeechCredentials/${speech_service_sid}`,
              headers: {
                Authorization: `Bearer ${jwt}`,
@@ -388,7 +416,7 @@ const SpeechServicesAddEdit = (props) => {
          if (type === 'edit') {
            await axios({
              method,
-              baseURL: process.env.REACT_APP_API_BASE_URL,
+              baseURL: APP_API_BASE_URL,
              url,
              headers: {
                Authorization: `Bearer ${jwt}`,
@@ -449,48 +477,29 @@ const SpeechServicesAddEdit = (props) => {

  return (
    showLoader ? (
-      <Loader height={props.type === 'add' ? '424px' : '376px'}/>
+      <Loader height={props.type === 'add' ? '424px' : '376px'} />
    ) : (
      <Form
        large
        onSubmit={handleSubmit}
      >
-        <Label htmlFor="name">Vendor</Label>
-        <InputGroup>
-          <Radio
-            noLeftMargin
-            name="vendor"
-            id="google"
-            label="Google"
-            checked={vendor === 'google'}
-            onChange={() => setVendor('google')}
-            invalid={invalidVendorGoogle}
-            ref={refVendorGoogle}
-            disabled={type === 'edit'}
-          />
-
-          <Radio
-            name="vendor"
-            id="aws"
-            label="Amazon Web Services"
-            checked={vendor === 'aws'}
-            onChange={() => setVendor('aws')}
-            invalid={invalidVendorAws}
-            ref={refVendorAws}
-            disabled={type === 'edit'}
-          />
-
-          <Radio
-            name="vendor"
-            id="microsoft"
-            label="Microsoft"
-            checked={vendor === 'microsoft'}
-            onChange={() => setVendor('microsoft')}
-            invalid={invalidVendorMs}
-            ref={refVendorMs}
-            disabled={type === 'edit'}
-          />
-        </InputGroup>
+        <Label htmlFor="vendor">Vendor</Label>
+        <Select
+          name="vendor"
+          id="vendor"
+          value={vendor}
+          onChange={e => setVendor(e.target.value)}
+          {...[refVendorGoogle, refVendorAws, refVendorMs, refVendorWellSaid]}
+          invalid={[invalidVendorGoogle, invalidVendorAws, invalidVendorMs, invalidVendorWellSaid].includes(true)}
+        >
+          <option value="">
+            Select a Vendor
+          </option>
+          <option value="google">Google</option>
+          <option value="aws">AWS</option>
+          <option value="microsoft">Microsoft</option>
+          <option value="wellsaid">WellSaid</option>
+        </Select>

        <Label htmlFor="account">Used by</Label>
        <Select
@@ -512,6 +521,37 @@ const SpeechServicesAddEdit = (props) => {
          ))}
        </Select>

+        {['google', 'aws', 'microsoft', 'wellsaid'].includes(vendor) ? (
+          <>
+            <div />
+            <Checkbox
+              noLeftMargin
+              name="useForTts"
+              id="useForTts"
+              label="Use for text-to-speech"
+              checked={useForTts}
+              onChange={e => setUseForTts(e.target.checked)}
+              invalid={invalidUseForTts}
+              ref={refUseForTts}
+            />
+            <div />
+            <Checkbox
+              noLeftMargin
+              name="useForStt"
+              id="useForStt"
+              label="Use for speech-to-text"
+              disabled={'wellsaid' === vendor}
+              checked={useForStt}
+              onChange={e => setUseForStt(e.target.checked)}
+              invalid={invalidUseForStt}
+              ref={refUseForStt}
+            />
+          </>
+        ) :
+          (
+            null
+          )}
+
        {vendor === 'google' ? (
          <>
            <Label htmlFor="serviceKey">Service Key</Label>
@@ -557,6 +597,28 @@ const SpeechServicesAddEdit = (props) => {
              ref={refSecretAccessKey}
              disabled={type === 'edit'}
            />
+
+            <Label htmlFor="regions">Region</Label>
+            <Select
+              name="regions"
+              id="regions"
+              value={awsregion}
+              onChange={e => setAwsRegion(e.target.value)}
+              ref={refAwsRegion}
+              invalid={invalidAwsRegion}
+            >
+              <option value="">
+                Select a region
+              </option>
+              {AwsRegions.map(r => (
+                <option
+                  key={r.value}
+                  value={r.value}
+                >
+                  {r.name}
+                </option>
+              ))}
+            </Select>
          </>
        ) : vendor === 'microsoft' ? (
          <>
@@ -594,33 +656,18 @@ const SpeechServicesAddEdit = (props) => {
              ))}
            </Select>
          </>
-        ) : (
-          null
-        )}
-
-        {vendor === 'google' || vendor === 'aws' || vendor === 'microsoft' ? (
+        ) : vendor === 'wellsaid' ? (
          <>
-            <div/>
-            <Checkbox
-              noLeftMargin
-              name="useForTts"
-              id="useForTts"
-              label="Use for text-to-speech"
-              checked={useForTts}
-              onChange={e => setUseForTts(e.target.checked)}
-              invalid={invalidUseForTts}
-              ref={refUseForTts}
-            />
-            <div/>
-            <Checkbox
-              noLeftMargin
-              name="useForStt"
-              id="useForStt"
-              label="Use for speech-to-text"
-              checked={useForStt}
-              onChange={e => setUseForStt(e.target.checked)}
-              invalid={invalidUseForStt}
-              ref={refUseForStt}
+            <Label htmlFor="apiKey">API Key</Label>
+            <Input
+              name="apiKey"
+              id="apiKey"
+              value={apiKey}
+              onChange={e => setApiKey(e.target.value)}
+              placeholder=""
+              invalid={invalidApiKey}
+              ref={refApiKey}
+              disabled={type === 'edit'}
            />
          </>
        ) : (
@@ -641,14 +688,14 @@ const SpeechServicesAddEdit = (props) => {
              dispatch({
                type: 'ADD',
                level: 'info',
-                message: type === 'add' ? 'New speech service canceled' :'Changes canceled',
+                message: type === 'add' ? 'New speech service canceled' : 'Changes canceled',
              });
            }}
          >
            Cancel
          </Button>

-          <Button rounded="true">
+          <Button rounded="true" disabled={!vendor}>
            {type === 'add'
              ? 'Add Speech Service'
              : 'Save'
@@ -660,4 +707,4 @@ const SpeechServicesAddEdit = (props) => {
  );
 };

-export default SpeechServicesAddEdit;
+export default SpeechServicesAddEdit;
--- a/src/components/pages/Login.js
+++ b/src/components/pages/Login.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import React, { useState, useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
@@ -7,6 +8,7 @@ import Button from '../elements/Button';
 import Input from '../elements/Input';
 import PasswordInput from '../elements/PasswordInput';
 import FormError from '../blocks/FormError';
+import { APP_API_BASE_URL } from "../../constants";

 const Login = props => {
  let history = useHistory();
@@ -58,7 +60,7 @@ const Login = props => {
      // Log in
      const response = await axios({
        method: 'post',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: '/login',
        data: { username, password },
      });
@@ -84,7 +86,7 @@ const Login = props => {
      //-----------------------------------------------------------------------------
      const serviceProvidersPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: '/serviceProviders',
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -93,7 +95,7 @@ const Login = props => {

      const accountsPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: '/Accounts',
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -102,7 +104,7 @@ const Login = props => {

      const applicationsPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: '/applications',
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -111,7 +113,7 @@ const Login = props => {

      const voipCarriersPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: '/voipCarriers',
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
--- a/src/components/pages/internal/AccountsAddEdit.js
+++ b/src/components/pages/internal/AccountsAddEdit.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import React, { useEffect, useContext } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import axios from 'axios';
@@ -5,6 +6,7 @@ import { NotificationDispatchContext } from '../../../contexts/NotificationConte
 import InternalTemplate from '../../templates/InternalTemplate';
 import AccountForm from '../../forms/AccountForm';
 import TableContent from '../../blocks/TableContent.js';
+import { APP_API_BASE_URL } from "../../../constants";

 const AccountsAddEdit = () => {
  let history = useHistory();
@@ -31,7 +33,7 @@ const AccountsAddEdit = () => {
      }
      const results = await axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/Accounts/${account_sid}/ApiKeys`,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -112,7 +114,7 @@ const AccountsAddEdit = () => {
      }
      const result = await axios({
        method: 'post',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: '/Apikeys',
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -167,7 +169,7 @@ const AccountsAddEdit = () => {
      }
      await axios({
        method: 'delete',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/Apikeys/${apiKeyToDelete.sid}`,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -207,7 +209,7 @@ const AccountsAddEdit = () => {
          name="API key"
          getContent={getApiKeys}
          columns={[
-            { header: 'API Key',   key: 'token',     width: '27rem', fontWeight: 'normal' },
+            { header: 'Account API Keys',   key: 'token',     width: '27rem', fontWeight: 'normal' },
            { header: 'Last Used', key: 'last_used', width: '10rem' },
          ]}
          addContent={createApiKey}
--- a/src/components/pages/internal/AccountsList.js
+++ b/src/components/pages/internal/AccountsList.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import React, { useEffect, useContext } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
@@ -5,6 +6,7 @@ import { NotificationDispatchContext } from '../../../contexts/NotificationConte
 import InternalTemplate from '../../templates/InternalTemplate';
 import TableContent from '../../blocks/TableContent.js';
 import { ServiceProviderValueContext } from '../../../contexts/ServiceProviderContext';
+import { APP_API_BASE_URL } from "../../../constants";

 const AccountsList = () => {
  let history = useHistory();
@@ -31,7 +33,7 @@ const AccountsList = () => {
      if(!currentServiceProvider) return [];
      const results = await axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/ServiceProviders/${currentServiceProvider}/Accounts`,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -94,7 +96,7 @@ const AccountsList = () => {
      // or if the account has any API keys
      const applicationsPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: '/Applications',
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -102,7 +104,7 @@ const AccountsList = () => {
      });
      const phoneNumbersPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: '/PhoneNumbers',
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -110,7 +112,7 @@ const AccountsList = () => {
      });
      const msTeamsTenantsPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: '/MicrosoftTeamsTenants',
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -118,7 +120,7 @@ const AccountsList = () => {
      });
      const apiKeysPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/Accounts/${accountToDelete.sid}/ApiKeys`,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -179,7 +181,7 @@ const AccountsList = () => {
      // Delete account
      await axios({
        method: 'delete',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/Accounts/${accountToDelete.sid}`,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
--- a/src/components/pages/internal/AlertsList.js
+++ b/src/components/pages/internal/AlertsList.js
@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable react/react-in-jsx-scope */
+/* eslint-disable no-undef */
 import React, { useContext, useState, useEffect } from "react";
 import { useHistory } from "react-router-dom";
 import axios from "axios";
@@ -14,6 +15,7 @@ import Select from "../../../components/elements/Select";
 import AntdTable from "../../../components/blocks/AntdTable";
 import handleErrors from "../../../helpers/handleErrors";
 import { ServiceProviderValueContext } from '../../../contexts/ServiceProviderContext';
+import { APP_API_BASE_URL } from "../../../constants";

 const StyledButton = styled(Button)`
  & > span {
@@ -115,7 +117,7 @@ const AlertsIndex = () => {

      const alerts = await axios({
        method: "get",
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/Accounts/${account}/Alerts`,
        headers: {
          Authorization: `Bearer ${jwt}`,
@@ -171,7 +173,7 @@ const AlertsIndex = () => {
          setLoading(true);
          const accountResponse = await axios({
            method: "get",
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: `/ServiceProviders/${currentServiceProvider}/Accounts`,
            headers: {
              Authorization: `Bearer ${jwt}`,
--- a/src/components/pages/internal/ApplicationsList.js
+++ b/src/components/pages/internal/ApplicationsList.js
@@ -1,4 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable no-undef */
 import React, { useEffect, useContext, useState, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
@@ -10,6 +11,7 @@ import Select from "../../../components/elements/Select";
 import InputGroup from "../../../components/elements/InputGroup";
 import { ServiceProviderValueContext } from '../../../contexts/ServiceProviderContext';
 import handleErrors from "../../../helpers/handleErrors";
+import { APP_API_BASE_URL } from "../../../constants";

 const FilterLabel = styled.span`
  color: #231f20;
@@ -57,7 +59,7 @@ const ApplicationsList = () => {
        try {
          const accountResponse = await axios({
            method: "get",
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: `/ServiceProviders/${currentServiceProvider}/Accounts`,
            headers: {
              Authorization: `Bearer ${jwt}`,
@@ -100,7 +102,7 @@ const ApplicationsList = () => {
      }
      const applicationsPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/Accounts/${account}/Applications`,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -173,7 +175,7 @@ const ApplicationsList = () => {
      // check if any account or Microsoft Teams Tenant uses this application
      const accountsPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: '/Accounts',
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -181,7 +183,7 @@ const ApplicationsList = () => {
      });
      const msTeamsTenantsPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: '/MicrosoftTeamsTenants',
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -226,7 +228,7 @@ const ApplicationsList = () => {
      // Delete application
      await axios({
        method: 'delete',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/Applications/${applicationToDelete.sid}`,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
--- a/src/components/pages/internal/CarriersList.js
+++ b/src/components/pages/internal/CarriersList.js
@@ -1,4 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable no-undef */
 import React, { useEffect, useContext, useState } from 'react';
 import axios from 'axios';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -12,6 +13,7 @@ import { ServiceProviderValueContext } from '../../../contexts/ServiceProviderCo
 import InputGroup from '../../../components/elements/InputGroup';
 import Select from '../../../components/elements/Select';
 import handleErrors from '../../../helpers/handleErrors';
+import { APP_API_BASE_URL } from "../../../constants";

 const FilterLabel = styled.span`
  color: #231f20;
@@ -64,7 +66,7 @@ const CarriersList = () => {
        try {
          const accountResponse = await axios({
            method: "get",
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: `/ServiceProviders/${currentServiceProvider}/Accounts`,
            headers: {
              Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -102,11 +104,10 @@ const CarriersList = () => {
        return;
      }
      if(!currentServiceProvider) return [];
-      if (!accountList.length) return [];
      // Get all SIP trunks
      const trunkResults = await axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/ServiceProviders/${currentServiceProvider}/VoipCarriers`,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -122,7 +123,7 @@ const CarriersList = () => {
      for (const t of trunkResultsFiltered) {
        const gws = await axios({
          method: 'get',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: `/SipGateways?voip_carrier_sid=${t.voip_carrier_sid}`,
          headers: {
            Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -203,7 +204,7 @@ const CarriersList = () => {
      for (const sid of carrierToDelete.gatewaysSid) {
        await axios({
          method: 'delete',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: `/SipGateways/${sid}`,
          headers: {
            Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -213,7 +214,7 @@ const CarriersList = () => {
      // delete sip trunk
      await axios({
        method: 'delete',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/VoipCarriers/${carrierToDelete.sid}`,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
--- a/src/components/pages/internal/MsTeamsTenantsList.js
+++ b/src/components/pages/internal/MsTeamsTenantsList.js
@@ -1,9 +1,11 @@
+/* eslint-disable no-undef */
 import React, { useEffect, useContext } from 'react';
 import axios from 'axios';
 import { useHistory } from 'react-router-dom';
 import { NotificationDispatchContext } from '../../../contexts/NotificationContext';
 import InternalTemplate from '../../templates/InternalTemplate';
 import TableContent from '../../blocks/TableContent.js';
+import { APP_API_BASE_URL } from "../../../constants";

 const MsTeamsTenantsList = () => {
  let history = useHistory();
@@ -28,7 +30,7 @@ const MsTeamsTenantsList = () => {
      }
      const msTeamsTenantsPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: '/MicrosoftTeamsTenants',
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -36,7 +38,7 @@ const MsTeamsTenantsList = () => {
      });
      const accountsPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: '/Accounts',
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -44,7 +46,7 @@ const MsTeamsTenantsList = () => {
      });
      const applicationsPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: '/Applications',
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -114,7 +116,7 @@ const MsTeamsTenantsList = () => {
      }
      await axios({
        method: 'delete',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/MicrosoftTeamsTenants/${tenant.sid}`,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
--- a/src/components/pages/internal/PhoneNumbersList.js
+++ b/src/components/pages/internal/PhoneNumbersList.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import React, { useState, useEffect, useContext, useCallback } from 'react';
 import axios from 'axios';
 import { useHistory } from 'react-router-dom';
@@ -6,6 +7,7 @@ import InternalTemplate from '../../templates/InternalTemplate';
 import TableContent from '../../blocks/TableContent.js';
 import phoneNumberFormat from '../../../helpers/phoneNumberFormat';
 import { ServiceProviderValueContext } from '../../../contexts/ServiceProviderContext';
+import { APP_API_BASE_URL } from "../../../constants";

 const PhoneNumbersList = () => {
  let history = useHistory();
@@ -33,7 +35,7 @@ const PhoneNumbersList = () => {
      if(!currentServiceProvider) return [];
      const phoneNumbersPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/ServiceProviders/${currentServiceProvider}/PhoneNumbers`,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -41,7 +43,7 @@ const PhoneNumbersList = () => {
      });
      const accountsPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/ServiceProviders/${currentServiceProvider}/Accounts`,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -49,7 +51,7 @@ const PhoneNumbersList = () => {
      });
      const applicationsPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/ServiceProviders/${currentServiceProvider}/Applications`,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -57,7 +59,7 @@ const PhoneNumbersList = () => {
      });
      const sipTrunksPromise = axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/ServiceProviders/${currentServiceProvider}/VoipCarriers`,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -150,7 +152,7 @@ const PhoneNumbersList = () => {
      }
      await axios({
        method: 'delete',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/PhoneNumbers/${phoneNumber.sid}`,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -192,7 +194,7 @@ const PhoneNumbersList = () => {
      for (const sid of phoneNumberSids) {
        await axios({
          method: 'put',
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: `/PhoneNumbers/${sid}`,
          headers: {
            Authorization: `Bearer ${localStorage.getItem('token')}`,
--- a/src/components/pages/internal/RecentCallsList.js
+++ b/src/components/pages/internal/RecentCallsList.js
@@ -1,4 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable no-undef */
 import React, { useContext, useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
 import axios from "axios";
@@ -15,6 +16,7 @@ import InputGroup from "../../../components/elements/InputGroup";
 import Select from "../../../components/elements/Select";
 import handleErrors from "../../../helpers/handleErrors";
 import { ServiceProviderValueContext } from '../../../contexts/ServiceProviderContext';
+import { APP_API_BASE_URL } from "../../../constants";

 const FilterLabel = styled.span`
  color: #231f20;
@@ -83,7 +85,7 @@ const PcapButton = ({call_data, account_sid, jwt_token}) => {
  useEffect(() => {
    axios({
      method: "get",
-      baseURL: process.env.REACT_APP_API_BASE_URL,
+      baseURL: APP_API_BASE_URL,
      url: `/Accounts/${account_sid}/RecentCalls/${call_data.sip_callid}`,
      headers: {
        Authorization: `Bearer ${jwt_token}`,
@@ -92,7 +94,7 @@ const PcapButton = ({call_data, account_sid, jwt_token}) => {
      if (result_1.status === 200 && result_1.data.total > 0) {
        axios({
          method: "get",
-          baseURL: process.env.REACT_APP_API_BASE_URL,
+          baseURL: APP_API_BASE_URL,
          url: `/Accounts/${account_sid}/RecentCalls/${call_data.sip_callid}/pcap`,
          headers: {
            Authorization: `Bearer ${jwt_token}`,
@@ -242,7 +244,7 @@ const RecentCallsIndex = () => {
      setLoading(true);
      const result = await axios({
        method: "get",
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/Accounts/${account}/RecentCalls`,
        headers: {
          Authorization: `Bearer ${jwt}`,
@@ -267,6 +269,7 @@ const RecentCallsIndex = () => {
          to: phoneNumberFormat(item.to),
          status: item.answered ? "answered" : item.termination_reason,
          duration: timeFormat(item.duration),
+          trace_id: item.trace_id
        }));

        setRecentCallsData(recentCalls);
@@ -299,6 +302,7 @@ const RecentCallsIndex = () => {
      "remote_host",
      "sip_status",
      "trunk",
+      "trace_id"
    ];

    return (
@@ -376,7 +380,7 @@ const RecentCallsIndex = () => {
          setLoading(true);
          const accountResponse = await axios({
            method: "get",
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: `/ServiceProviders/${currentServiceProvider}/Accounts`,
            headers: {
              Authorization: `Bearer ${jwt}`,
--- a/src/components/pages/internal/Settings.js
+++ b/src/components/pages/internal/Settings.js
@@ -1,16 +1,221 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useContext } from 'react';
+import { useHistory } from 'react-router-dom';
+import { NotificationDispatchContext } from '../../../contexts/NotificationContext';
 import InternalTemplate from '../../templates/InternalTemplate';
 import SettingsForm from '../../forms/SettingsForm';
+import TableContent from '../../blocks/TableContent.js';
+import axios from 'axios';
+import { APP_API_BASE_URL } from "../../../constants";
+import { ServiceProviderValueContext } from '../../../contexts/ServiceProviderContext';
+

 const Settings = () => {
+  let history = useHistory();
+  const dispatch = useContext(NotificationDispatchContext);
+  let service_provider_sid =  useContext(ServiceProviderValueContext);
  const pageTitle = 'Settings';
  useEffect(() => {
    document.title = `${pageTitle} | Jambonz | Open Source CPAAS`;
  });
+
+  //=============================================================================
+  // Get API keys
+  //=============================================================================
+  const getApiKeys = async () => {
+    try {
+      if (!localStorage.getItem('token')) {
+        history.push('/');
+        dispatch({
+          type: 'ADD',
+          level: 'error',
+          message: 'You must log in to view that page.',
+        });
+        return;
+      }
+      const results = await axios({
+        method: 'get',
+        baseURL: APP_API_BASE_URL,
+        url: `/ServiceProviders/${service_provider_sid}/ApiKeys`,
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('token')}`,
+        },
+      });
+      const simplifiedApiKeys = results.data.map(a => {
+        const { token } = a;
+        const maskLength = token.length - 4;
+        const maskedPortion = token.substring(0, maskLength).replace(/[a-zA-Z0-9]/g, '*');
+        const revealedPortion = token.substring(maskLength);
+        const maskedToken = `${maskedPortion}${revealedPortion}`;
+
+        const { last_used } = a;
+        let lastUsedString = 'Never used';
+        if (last_used) {
+          const currentDate = new Date();
+          const lastUsedDate = new Date(last_used);
+          currentDate.setHours(0, 0, 0, 0);
+          lastUsedDate.setHours(0, 0, 0, 0);
+          const daysDifference = Math.round((currentDate - lastUsedDate) / 1000 / 60 / 60 / 24);
+          lastUsedString = daysDifference > 1
+            ? `${daysDifference} days ago`
+            : daysDifference === 1
+              ? 'Yesterday'
+              : daysDifference === 0
+                ? 'Today'
+                : 'Never used';
+        }
+
+        return {
+          sid: a.api_key_sid,
+          token: {
+            type: 'masked',
+            masked: maskedToken,
+            revealed: token,
+          },
+          last_used: {
+            type: 'normal',
+            content: lastUsedString,
+          },
+        };
+      });
+      return (simplifiedApiKeys);
+    } catch (err) {
+      if (err.response && err.response.status === 401) {
+        localStorage.removeItem('token');
+        sessionStorage.clear();
+        history.push('/');
+        dispatch({
+          type: 'ADD',
+          level: 'error',
+          message: 'Your session has expired. Please log in and try again.',
+        });
+      } else {
+        console.log(err.response || err);
+        dispatch({
+          type: 'ADD',
+          level: 'error',
+          message: (err.response && err.response.data && err.response.data.msg) || 'Unable to get API key data',
+        });
+      }
+    }
+  };
+
+  //=============================================================================
+  // Create API key
+  //=============================================================================
+  const createApiKey = async () => {
+    try {
+      if (!localStorage.getItem('token')) {
+        history.push('/');
+        dispatch({
+          type: 'ADD',
+          level: 'error',
+          message: 'You must log in to view that page.',
+        });
+        return;
+      }
+      const result = await axios({
+        method: 'post',
+        baseURL: APP_API_BASE_URL,
+        url: '/ApiKeys',
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('token')}`,
+        },
+        data: {
+          "service_provider_sid": service_provider_sid,
+        }
+      });
+      return result.data.token;
+    } catch (err) {
+      if (err.response && err.response.status === 401) {
+        localStorage.removeItem('token');
+        sessionStorage.clear();
+        history.push('/');
+        dispatch({
+          type: 'ADD',
+          level: 'error',
+          message: 'Your session has expired. Please log in and try again.',
+        });
+      } else {
+        console.log(err.response || err);
+        dispatch({
+          type: 'ADD',
+          level: 'error',
+          message: (err.response && err.response.data && err.response.data.msg) || 'Unable to create API key',
+        });
+        return 'error';
+      }
+    }
+  };
+
+  //=============================================================================
+  // Delete API key
+  //=============================================================================
+  const formatApiKeyToDelete = apiKey => {
+    const items = [
+      { name: 'API Key:', content: apiKey.token.masked || '[none]' },
+      { name: 'Last Used:', content: apiKey.last_used.content || 'Never used' },
+    ];
+    return items;
+  };
+  const deleteApiKey = async apiKeyToDelete => {
+    try {
+      if (!localStorage.getItem('token')) {
+        history.push('/');
+        dispatch({
+          type: 'ADD',
+          level: 'error',
+          message: 'You must log in to view that page.',
+        });
+        return;
+      }
+      await axios({
+        method: 'delete',
+        baseURL: APP_API_BASE_URL,
+        url: `/Apikeys/${apiKeyToDelete.sid}`,
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('token')}`,
+        },
+      });
+      return 'success';
+    } catch (err) {
+      if (err.response && err.response.status === 401) {
+        localStorage.removeItem('token');
+        sessionStorage.clear();
+        history.push('/');
+        dispatch({
+          type: 'ADD',
+          level: 'error',
+          message: 'Your session has expired. Please log in and try again.',
+        });
+      } else {
+        console.log(err.response || err);
+        return ((err.response && err.response.data && err.response.data.msg) || 'Unable to delete API key');
+      }
+    }
+  };
+
  return (
    <InternalTemplate
      type="form"
      title={pageTitle}
+      breadcrumbs={[
+        { name: 'Service Provider', url: '/internal/settings' },
+        { name: pageTitle },
+      ]}
+      additionalTable={service_provider_sid && (
+        <TableContent
+          name="API key"
+          getContent={getApiKeys}
+          columns={[
+            { header: 'Service Provider API Keys',   key: 'token',     width: '27rem', fontWeight: 'normal' },
+            { header: 'Last Used', key: 'last_used', width: '10rem' },
+          ]}
+          addContent={createApiKey}
+          formatContentToDelete={formatApiKeyToDelete}
+          deleteContent={deleteApiKey}
+          rowsHaveDeleteButtons
+        />
+      )}
    >
      <SettingsForm />
    </InternalTemplate>
--- a/src/components/pages/internal/SpeechServicesList.js
+++ b/src/components/pages/internal/SpeechServicesList.js
@@ -1,4 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable no-undef */
 import React, { useContext, useState, useEffect } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import axios from 'axios';
@@ -11,6 +12,7 @@ import TableContent from '../../../components/blocks/TableContent';
 import { ServiceProviderValueContext } from '../../../contexts/ServiceProviderContext';
 import InputGroup from '../../../components/elements/InputGroup';
 import Select from '../../../components/elements/Select';
+import { APP_API_BASE_URL } from "../../../constants";

 const FilterLabel = styled.span`
  color: #231f20;
@@ -60,7 +62,7 @@ const SpeechServicesList = () => {
        try {
          const accountResponse = await axios({
            method: "get",
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: `/ServiceProviders/${currentServiceProvider}/Accounts`,
            headers: {
              Authorization: `Bearer ${jwt}`,
@@ -105,7 +107,7 @@ const SpeechServicesList = () => {
        `/ServiceProviders/${currentServiceProvider}/SpeechCredentials`;
      const speechServices = await axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: speechApiUrl,
        headers: {
          Authorization: `Bearer ${jwt}`,
@@ -116,7 +118,7 @@ const SpeechServicesList = () => {
        if (s.use_for_stt || s.use_for_tts) {
          return axios({
            method: 'get',
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: `/ServiceProviders/${currentServiceProvider}/SpeechCredentials/${s.speech_credential_sid}/test`,
            headers: {
              Authorization: `Bearer ${jwt}`,
@@ -236,7 +238,7 @@ const SpeechServicesList = () => {
      // Delete speech service
      await axios({
        method: 'delete',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/ServiceProviders/${currentServiceProvider}/SpeechCredentials/${speechServiceToDelete.sid}`,
        headers: {
          Authorization: `Bearer ${jwt}`,
--- a/src/components/pages/setup/CreatePassword.js
+++ b/src/components/pages/setup/CreatePassword.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import React, { useState, useEffect, useContext, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
@@ -8,6 +9,7 @@ import Button from '../../elements/Button';
 import Input from '../../elements/Input';
 import FormError from '../../blocks/FormError';
 import Loader from '../../blocks/Loader';
+import { APP_API_BASE_URL } from "../../../constants";

 const CreatePassword = () => {
  let history = useHistory();
@@ -63,7 +65,7 @@ const CreatePassword = () => {
          //-----------------------------------------------------------------------------
          const serviceProvidersPromise = axios({
            method: 'get',
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: '/serviceProviders',
            headers: {
              Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -72,7 +74,7 @@ const CreatePassword = () => {

          const accountsPromise = axios({
            method: 'get',
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: '/Accounts',
            headers: {
              Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -81,7 +83,7 @@ const CreatePassword = () => {

          const applicationsPromise = axios({
            method: 'get',
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: '/applications',
            headers: {
              Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -90,7 +92,7 @@ const CreatePassword = () => {

          const voipCarriersPromise = axios({
            method: 'get',
-            baseURL: process.env.REACT_APP_API_BASE_URL,
+            baseURL: APP_API_BASE_URL,
            url: '/voipCarriers',
            headers: {
              Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -235,7 +237,7 @@ const CreatePassword = () => {

      const response = await axios({
        method: 'put',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: `/Users/${user_sid}`,
        data: {
          old_password,
--- a/src/constants.js
+++ b/src/constants.js
@@ -0,0 +1,2 @@
+const { REACT_APP_API_BASE_URL } = process.env;
+export const APP_API_BASE_URL = (window.JAMBONZ) ? window.JAMBONZ.APP_API_BASE_URL : REACT_APP_API_BASE_URL;
--- a/src/contexts/ShowMsTeamsContext.js
+++ b/src/contexts/ShowMsTeamsContext.js
@@ -1,6 +1,7 @@
 import React, { useState, createContext, useContext } from 'react';
 import axios from 'axios';
 import { NotificationDispatchContext } from './NotificationContext';
+import { APP_API_BASE_URL } from "../constants";

 export const ShowMsTeamsStateContext = createContext();
 export const ShowMsTeamsDispatchContext = createContext();
@@ -13,7 +14,7 @@ export function ShowMsTeamsProvider(props) {
    try {
      const serviceProvidersResponse = await axios({
        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
+        baseURL: APP_API_BASE_URL,
        url: '/ServiceProviders',
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
--- a/src/data/AwsRegions.js
+++ b/src/data/AwsRegions.js
@@ -0,0 +1,92 @@
+const regions = [
+  {
+    name: 'US East (N. Virginia)',
+    value: 'us-east-1'
+  },
+  {
+    name: 'US East (Ohio)',
+    value: 'us-east-2'
+  },
+  {
+    name: 'US West (N. California)',
+    value: 'us-west-1'
+  },
+  {
+    name: 'US West (Oregon)',
+    value: 'us-west-2'
+  },
+  {
+    name: 'Africa (Cape Town)',
+    value: 'af-south-1'
+  },
+  {
+    name: 'Asia Pacific (Hong Kong)',
+    value: 'ap-east-1'
+  },
+  {
+    name: 'Asia Pacific (Jakarta)',
+    value: 'ap-southeast-3'
+  },
+  {
+    name: 'Asia Pacific (Mumbai)',
+    value: 'ap-south-1'
+  },
+  {
+    name: 'Asia Pacific (Osaka)',
+    value: 'ap-northeast-3'
+  },
+  {
+    name: 'Asia Pacific (Seoul)',
+    value: 'ap-northeast-2'
+  },
+  {
+    name: 'Asia Pacific (Singapore)',
+    value: 'ap-southeast-1'
+  },
+  {
+    name: 'Asia Pacific (Sydney)',
+    value: 'ap-southeast-2'
+  },
+  {
+    name: 'Asia Pacific (Tokyo)',
+    value: 'ap-northeast-1'
+  },
+  {
+    name: 'Canada (Central)',
+    value: 'ca-central-1'
+  },
+  {
+    name: 'Europe (Frankfurt)',
+    value: 'eu-central-1'
+  },
+  {
+    name: 'Europe (Ireland)',
+    value: 'eu-west-1'
+  },
+  {
+    name: 'Europe (London)',
+    value: 'eu-west-2'
+  },
+  {
+    name: 'Europe (Milan)',
+    value: 'eu-south-1'
+  },
+  {
+    name: 'Europe (Paris)',
+    value: 'eu-west-3'
+  },
+  {
+    name: 'Europe (Stockholm)',
+    value: 'eu-north-1'
+  },
+  {
+    name: 'Middle East (Bahrain)',
+    value: 'me-south-1'
+  },
+  {
+    name: 'South America (São Paulo)',
+    value: 'sa-east-1'
+  }
+];
+
+export default regions;
--- a/src/data/MicrosoftAzureRegions.js
+++ b/src/data/MicrosoftAzureRegions.js
@@ -1,82 +1,124 @@
-export default [
-  {
-    name: 'Asia (East)',
-    value: 'eastasia'
+const regions = [
+  { 
+    name: 'Australia - East (australiaeast)', 
+    value: 'australiaeast' 
  },
-  {
-    name: 'Asia (Southeast)',
-    value: 'southeastasia'
+  { 
+    name: 'Brazil - South (brazilsouth)', 
+    value: 'brazilsouth' 
  },
-  {
-    name: 'Australia (East)',
-    value: 'australiaeast'
+  { 
+    name: 'Canada - Central (canadacentral)', 
+    value: 'canadacentral' 
  },
-  {
-    name: 'Brazil (South)',
-    value: 'brazilsouth'
+  { 
+    name: 'East Asia (eastasia)', 
+    value: 'eastasia' 
  },
-  {
-    name: 'Canada (Central)',
-    value: 'canadacentral'
+  { 
+    name: 'Europe - North (northeurope)', 
+    value: 'northeurope' 
  },
-  {
-    name: 'Europe (North)',
-    value: 'northeurope'
+  { 
+    name: 'Europe - West (westeurope)', 
+    value: 'westeurope' 
  },
-  {
-    name: 'Europe (West)',
-    value: 'westeurope'
+  { 
+    name: 'France - Central (francecentral)', 
+    value: 'francecentral' 
  },
-  {
-    name: 'France (Central)',
-    value: 'francecentral'
+  { 
+    name: 'Germany - West Central (germanywestcentral)', 
+    value: 'germanywestcentral' 
  },
-  {
-    name: 'India (Central)',
-    value: 'centralindia'
+  { 
+    name: 'India - Central (centralindia)', 
+    value: 'centralindia' 
  },
-  {
-    name: 'Japan (East)',
-    value: 'japaneast'
+  { 
+    name: 'Japan - East (japaneast)', 
+    value: 'japaneast' 
  },
-  {
-    name: 'Korea (Central)',
-    value: 'koreacentral'
+  { 
+    name: 'Japan - West (japanwest)', 
+    value: 'japanwest' 
  },
-  {
-    name: 'South Africa (North)',
-    value: 'southafricanorth'
+  { 
+    name: 'Korea - Central (koreacentral)', 
+    value: 'koreacentral' 
  },
-  {
-    name: 'UK (South)',
-    value: 'uksouth'
+  { 
+    name: 'Norway - East (norwayeast)', 
+    value: 'norwayeast' 
  },
-  {
-    name: 'US (West Central)',
-    value: 'westcentralus'
+  { 
+    name: 'South Africa - North (southafricanorth)', 
+    value: 'southafricanorth' 
  },
-  {
-    name: 'US (East)',
-    value: 'eastus'
+  { 
+    name: 'Southeast Asia (southeastasia)', 
+    value: 'southeastasia' 
  },
-  {
-    name: 'US (East 2)',
-    value: 'eastus2'
+  { 
+    name: 'Switzerland - North (switzerlandnorth)', 
+    value: 'switzerlandnorth' 
  },
-  {
-    name: 'US (North Central)',
-    value: 'northcentralus'
+  { 
+    name: 'Switzerland - West (switzerlandwest)', 
+    value: 'switzerlandwest' 
  },
-  {
-    name: 'US (South Central)',
-    value: 'southcentralus'
+  { 
+    name: 'UAE - North (uaenorth)', 
+    value: 'uaenorth' 
  },
-  {
-    name: 'US (West)',
-    value: 'westus'
+  { 
+    name: 'UK - South (uksouth)', 
+    value: 'uksouth' 
  },
-  {
-    name: 'US (West 2)',
-    value: 'westus2'
+  { 
+    name: 'US - Central (centralus)', 
+    value: 'centralus' 
  },
-];
+  { 
+    name: 'US - East (eastus)', 
+    value: 'eastus' 
+  },
+  { 
+    name: 'US - East 2 (eastus2)', 
+    value: 'eastus2' 
+  },
+  { 
+    name: 'US - Gov Arizona (usgovarizona)', 
+    value: 'usgovarizona' 
+  },
+  { 
+    name: 'US - Gov Virginia (usgovvirginia)', 
+    value: 'usgovvirginia' 
+  },
+  { 
+    name: 'US - North Central (northcentralus)', 
+    value: 'northcentralus' 
+  },
+  { 
+    name: 'US - South Central (southcentralus)', 
+    value: 'southcentralus' 
+  },
+  { 
+    name: 'US - West Central (westcentralus)', 
+    value: 'westcentralus' 
+  },
+  { 
+    name: 'US - West (westus)', 
+    value: 'westus' 
+  },
+  { 
+    name: 'US - West 2 (westus2)', 
+    value: 'westus2' 
+  },
+  { 
+    name: 'US - West 3 (westus3)', 
+    value: 'westus3' 
+  }
+];
+
+export default regions;
--- a/src/data/SpeechRecognizerLanguageAws.js
+++ b/src/data/SpeechRecognizerLanguageAws.js
@@ -1,4 +1,4 @@
-export default [
+const languages = [
  { name: 'Australian English', 'code': 'en-AU' },
  { name: 'British English',    'code': 'en-GB' },
  { name: 'US English',         'code': 'en-US' },
@@ -8,3 +8,5 @@ export default [
  { name: 'Italian',            'code': 'it-IT' },
  { name: 'US Spanish',         'code': 'es-US' },
 ];
+
+export default languages;
--- a/src/data/SpeechRecognizerLanguageGoogle.js
+++ b/src/data/SpeechRecognizerLanguageGoogle.js
@@ -1,4 +1,4 @@
-export default [
+const languages = [
  { name: 'Afrikaans (South Africa)',                    code: 'af-ZA',       },
  { name: 'Albanian (Albania)',                          code: 'sq-AL',       },
  { name: 'Amharic (Ethiopia)',                          code: 'am-ET',       },
@@ -128,3 +128,5 @@ export default [
  { name: 'Vietnamese (Vietnam)',                        code: 'vi-VN',       },
  { name: 'Zulu (South Africa)',                         code: 'zu-ZA',       },
 ];
+
+export default languages;
--- a/src/data/SpeechRecognizerLanguageMicrosoft.js
+++ b/src/data/SpeechRecognizerLanguageMicrosoft.js
@@ -1,4 +1,12 @@
-export default [
+const languages = [
+  {
+    name: 'Afrikaans (South Africa)',
+    code: 'af-ZA'
+  },
+  {
+    name: 'Amharic (Ethiopia)',
+    code: 'am-ET'
+  },
  {
    name: 'Arabic (Algeria)',
    code: 'ar-DZ'
@@ -75,6 +83,10 @@ export default [
    name: 'Bulgarian (Bulgaria)',
    code: 'bg-BG'
  },
+  {
+    name: 'Bengali (India)',
+    code: 'bn-IN'
+  },
  {
    name: 'Catalan (Spain)',
    code: 'ca-ES'
@@ -107,6 +119,10 @@ export default [
    name: 'Dutch (Netherlands)',
    code: 'nl-NL'
  },
+  {
+    name: 'Dutch (Belgium)',
+    code: 'nl-BE'
+  },
  {
    name: 'English (Australia)',
    code: 'en-AU'
@@ -179,6 +195,10 @@ export default [
    name: 'Finnish (Finland)',
    code: 'fi-FI'
  },
+  {
+    name: 'French (Belgium)',
+    code: 'fr-BE'
+  },
  {
    name: 'French (Canada)',
    code: 'fr-CA'
@@ -227,6 +247,10 @@ export default [
    name: 'Indonesian (Indonesia)',
    code: 'id-ID'
  },
+  {
+    name: 'Icelandic (Iceland)',
+    code: 'is-IS'
+  },
  {
    name: 'Irish (Ireland)',
    code: 'ga-IE'
@@ -239,10 +263,18 @@ export default [
    name: 'Japanese (Japan)',
    code: 'ja-JP'
  },
+  {
+    name: 'Javanese (Indonesia)',
+    code: 'jv-ID'
+  },
  {
    name: 'Kannada (India)',
    code: 'kn-IN'
  },
+  {
+    name: 'Khmer (Cambodia)',
+    code: 'km-KH'
+  },
  {
    name: 'Korean (Korea)',
    code: 'ko-KR'
@@ -251,6 +283,10 @@ export default [
    name: 'Latvian (Latvia)',
    code: 'lv-LV'
  },
+  {
+    name: 'Lao (Laos)',
+    code: 'lo-LA'
+  },
  {
    name: 'Lithuanian (Lithuania)',
    code: 'lt-LT'
@@ -259,6 +295,10 @@ export default [
    name: 'Malay (Malaysia)',
    code: 'ms-MY'
  },
+  {
+    name: 'Macedonian (North Macedonia)',
+    code: 'mk-MK'
+  },
  {
    name: 'Maltese (Malta)',
    code: 'mt-MT'
@@ -267,6 +307,10 @@ export default [
    name: 'Marathi (India)',
    code: 'mr-IN'
  },
+  {
+    name: 'Burmese (Myanmar)',
+    code: 'my-MM'
+  },
  {
    name: 'Norwegian (Bokmål, Norway)',
    code: 'nb-NO'
@@ -395,10 +439,22 @@ export default [
    name: 'Swahili (Kenya)',
    code: 'sw-KE'
  },
+  {
+    name: 'Swahili (Tanzania)',
+    code: 'sw-TZ'
+  },
+  {
+    name: 'Sinhala (Sri Lanka)',
+    code: 'si-LK'
+  },
  {
    name: 'Swedish (Sweden)',
    code: 'sv-SE'
  },
+  {
+    name: 'Serbian (Serbia)',
+    code: 'sr-RS'
+  },
  {
    name: 'Tamil (India)',
    code: 'ta-IN'
@@ -415,8 +471,22 @@ export default [
    name: 'Turkish (Turkey)',
    code: 'tr-TR'
  },
+  {
+    name: 'Ukrainian (Ukraine)',
+    code: 'uk-UA'
+  },
+  {
+    name: 'Uzbek (Uzbekistan)',
+    code: 'uz-UZ'
+  },
+  {
+    name: 'Zulu (South Africa)',
+    code: 'zu-ZA'
+  },
  {
    name: 'Vietnamese (Vietnam)',
    code: 'vi-VN'
  },
-];
+];
+
+export default languages;
--- a/src/data/SpeechSynthesisLanguageAws.js
+++ b/src/data/SpeechSynthesisLanguageAws.js
@@ -1,4 +1,4 @@
-export default [
+const languages = [
  {
    code: 'arb',
    name: 'Arabic',
@@ -235,3 +235,5 @@ export default [
    ],
  },
 ];
+
+export default languages;
--- a/src/data/SpeechSynthesisLanguageGoogle.js
+++ b/src/data/SpeechSynthesisLanguageGoogle.js
@@ -1,4 +1,4 @@
-export default [
+const languages = [
  {
    code: 'ar-XA',
    name: 'Arabic',
@@ -408,3 +408,6 @@ export default [
    ],
  },
 ];
+
+
+export default languages;
--- a/src/data/SpeechSynthesisLanguageMicrosoft.js
+++ b/src/data/SpeechSynthesisLanguageMicrosoft.js
--- a/src/data/SpeechSynthesisLanguageWellSaid.js
+++ b/src/data/SpeechSynthesisLanguageWellSaid.js
@@ -0,0 +1,41 @@
+const languages = [
+  {
+    code: 'en-US',
+    name: 'English (US)',
+    voices: [
+      { value: '3', name: 'Alana B.' },
+      { value: '4', name: 'Ramona J.' },
+      { value: '5', name: 'Ramona J. (promo)' },
+      { value: '7', name: 'Wade C.' },
+      { value: '8', name: 'Sofia H.' },
+      { value: '9', name: 'David D.' },
+      { value: '11', name: 'Isabel V.' },
+      { value: '12', name: 'Ava H.' },
+      { value: '13', name: 'Jeremy G.' },
+      { value: '14', name: 'Nicole L.' },
+      { value: '15', name: 'Paige L.' },
+      { value: '16', name: 'Tobin A.' },
+      { value: '17', name: 'Kai M.' },
+      { value: '18', name: 'Tristan F.' },
+      { value: '19', name: 'Patrick K.' },
+      { value: '20', name: 'Soifia H. (promo)' },
+      { value: '21', name: 'Damian P. (promo)' },
+      { value: '22', name: 'Jodi P. (promo)' },
+      { value: '23', name: 'Lee M. (promo)' },
+      { value: '24', name: 'Selene R. (promo)' },
+      { value: '26', name: 'Wade C. (promo)' },
+      { value: '27', name: 'Joe F.' },
+      { value: '28', name: 'Joe F. (promo)' },
+      { value: '29', name: 'Garry J. (character)' },
+      { value: '33', name: 'Jude D.' },
+      { value: '34', name: 'Eric S. (promo)' },
+      { value: '35', name: 'Chase J.' },
+      { value: '37', name: 'Steve B. (promo)' },
+      { value: '38', name: 'Bella B. (promo)' },
+      { value: '39', name: 'Tilda C. (promo)' },
+      { value: '41', name: 'Paul B. (promo)' }
+    ],
+  }
+];
+
+export default languages;
Author	SHA1	Message	Date
kitajchuk	1276687cc0	Add package-lock changes for moment lib update	2022-09-22 08:26:41 -07:00
Paulo Telles	b97d5e538f	update moment lib (#95 ) Co-authored-by: p.souza <p.souza@cognigy.com>	2022-09-07 15:06:02 +02:00
Paulo Telles	2704e97a96	update node image (#94 ) Co-authored-by: p.souza <p.souza@cognigy.com>	2022-09-07 13:47:36 +02:00
Dave Horton	4cfdfc3b49	sync package-lock.json	2022-08-28 22:18:17 +02:00
Dave Horton	47d73a7edd	bump version to 0.7.6	2022-08-26 20:07:36 +02:00
Lê Hàn Minh Khang	c14fa5db34	remove dummy text from siprec tooltip (#69 )	2022-08-06 08:46:28 +01:00
Lê Hàn Minh Khang	668d7f05f6	for #66 (#67 )	2022-08-03 17:25:35 +01:00
Dave Horton	5ae88ff13e	Dockerfile: update base image	2022-07-28 12:59:18 +01:00
Joan	06c21f2545	Add z-index property to Add button (#63 ) * extended AWS region list * added z-index to add button Co-authored-by: Joan Salvatella <joan@bookline.io>	2022-07-11 10:33:11 +02:00
Joan	663aabc80c	extended AWS region list (#62 ) Co-authored-by: Joan Salvatella <joan@bookline.io>	2022-07-01 11:54:32 -04:00
Dave Horton	a7de0a494e	update deps	2022-06-11 12:30:33 -04:00
Lê Hàn Minh Khang	b742e67715	Fix speech form dropdown menu reference (#61 )	2022-05-26 08:51:49 -04:00
Lê Hàn Minh Khang	013681e7eb	Update Azure speech list (#60 ) * update azure region list * format * more meaningful name * sorting and prettifying * making sense of africa server	2022-05-25 11:02:07 -04:00
Lê Hàn Minh Khang	4912758120	Fix issue #57 (#58 ) * fix issue #57 * fix further * fix to phone page	2022-05-24 08:38:13 -04:00
Dave Horton	bb335d0838	Sp apikey UI fix (#56 ) * service provider add/view/delete features added * reverting .env back to port 3002 * fix ui Co-authored-by: Conner Luzier <connerluzier@protonmail.com>	2022-05-16 11:20:34 -04:00
Dave Horton	38d26dddc8	new Microsoft languages added in 1.21.0	2022-05-12 19:34:49 -04:00
Conner Luzier	c0d531c63f	removed radio buttons, replaced with dropdown (#53 ) * removed radio buttons, replaced with dropdown * disabled button if no vendor, moved checkboxes up	2022-05-06 20:37:05 -04:00
Kieron Lawson	420080ba84	Updater FQDN regex to accept numeric characters (#42 )	2022-04-27 14:39:06 -04:00
Conner Luzier	c40fb9cc01	fix add account error message (#51 ) Co-authored-by: Conner Luzier <connerluzier@outlook.com>	2022-04-27 14:35:40 -04:00
Dave Horton	40143ae79d	update package-lock.json	2022-04-22 12:39:50 -04:00
Conner Luzier	536b183535	regions field added to aws, default to us-east-1 (#50 ) * regions field added to aws, default to us-east-1 * added aws_region to post request * no default setting on aws region * aws_region required before saving * no longer showing default on dropdown Co-authored-by: Conner Luzier <connerluzier@outlook.com>	2022-04-21 13:33:04 -04:00
Dave Horton	bf88a27330	add data file for aws regions	2022-04-18 10:10:50 -04:00
Dave Horton	831450306d	docs	2022-04-14 14:18:28 -04:00
Dave Horton	c8d1034dc9	testing instructions	2022-04-14 14:14:44 -04:00
dependabot[bot]	37af9522aa	Bump node-forge from 1.2.1 to 1.3.1 (#46 ) Bumps [node-forge](https://github.com/digitalbazaar/forge) from 1.2.1 to 1.3.1. - [Release notes](https://github.com/digitalbazaar/forge/releases) - [Changelog](https://github.com/digitalbazaar/forge/blob/main/CHANGELOG.md) - [Commits](https://github.com/digitalbazaar/forge/compare/v1.2.1...v1.3.1) --- updated-dependencies: - dependency-name: node-forge dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-04-06 08:22:25 -04:00
Dave Horton	6bb81a499b	bump version	2022-04-06 08:19:56 -04:00
Dave Horton	58f97dcfb2	show trace_id in recent calls detail display	2022-03-28 19:35:43 -04:00
Dave Horton	23a067b6dd	bump version	2022-03-08 20:20:46 -05:00
Andrew	92db20965e	moved building to Dockefile instead of entrypoint (#39 ) * moved building to Dockefile instead of entrypoint * moved enviroment variable to gloabl * updated to use process env during build to allow use of window global var * added new line * updated constants for window.jambonz * removed NODE_ENV in favor of just window.JAMBONZ * removed unrequired and change const per pull request	2022-02-23 07:40:05 -05:00
akirilyuk	8f8d635bd3	fix all security vulnerabilities (#41 ) Co-authored-by: akirilyuk <a.kirilyuk@cognigy.com>	2022-02-17 07:33:00 -05:00
dependabot[bot]	b075028b7b	Bump follow-redirects from 1.14.7 to 1.14.8 (#40 ) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.14.7 to 1.14.8. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.14.7...v1.14.8) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-02-14 21:25:01 -05:00
Dave Horton	b5f2e5fc25	bump version	2022-02-09 15:43:14 -05:00
Dave Horton	6390cc6b81	add missing Azure regions	2022-02-03 08:59:47 -05:00
Dave Horton	d7db92f0c7	update version to 0.7.2	2022-01-31 07:32:10 -05:00
Dave Horton	f5201d2d69	Feature/wellsaid tts (#38 ) * initial changes to support WellSaid TTS * disable stt choice for WellSaid since they dont provide	2022-01-27 08:07:22 -05:00
akirilyuk	128ca045b0	update depenecies and fix security vulnerabilities (#37 ) Co-authored-by: akirilyuk <a.kirilyuk@cognigy.com>	2022-01-14 08:00:35 -05:00