add carrier instructions to send call to sip-realm

fix choose/edit sub domain
2026-01-25 02:08:19 +00:00 · 2023-08-02 12:57:35 +07:00 · 2023-08-02 12:45:32 +07:00
117 changed files with 15621 additions and 8128 deletions
--- a/.github/workflows/pr-checks.yml
+++ b/.github/workflows/pr-checks.yml
@@ -12,18 +12,18 @@ jobs:
  pr-checks:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v2

      - name: Cache node_modules
        id: node-cache
-        uses: actions/cache@v3
+        uses: actions/cache@v2
        with:
          path: node_modules
          key: node-modules-${{ hashFiles('package-lock.json') }}

      - name: Cache cypress binary
        id: cypress-cache
-        uses: actions/cache@v3
+        uses: actions/cache@v2
        with:
          path: /home/runner/.cache/Cypress
          key: cypress-${{ hashFiles('package-lock.json') }}
--- a/cypress/support/component-index.html
+++ b/cypress/support/component-index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
--- a/cypress/support/component.tsx
+++ b/cypress/support/component.tsx
@@ -44,7 +44,7 @@ declare global {
       */
      mountTestProvider(
        component: React.ReactNode,
-        options?: MountOptions & { authProps?: TestProviderProps["authProps"] },
+        options?: MountOptions & { authProps?: TestProviderProps["authProps"] }
      ): Cypress.Chainable<MountReturn>;
    }
  }
--- a/docs/contributors.md
+++ b/docs/contributors.md
@@ -100,7 +100,7 @@ export const postAccount = (payload: Partial<Account>) => {
 export const putAccount = (sid: string, payload: Partial<Account>) => {
  return putFetch<EmptyResponse, Partial<Account>>(
    `${API_ACCOUNTS}/${sid}`,
-    payload,
+    payload
  );
 };
 ```
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
@@ -6,7 +6,7 @@
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
-      content="Build innovative voice and collaboration services with jambonz, the open-source communication platform for conversational AI providers and CSPs."
+      content="Simple provisioning webapp for jambonz."
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <link rel="icon" href="/favicon.ico" sizes="any" />
@@ -46,7 +46,7 @@
      as="font"
      type="font/woff"
    />
-    <title>Jambonz Portal | Jambonz CPaaS</title>
+    <title>Jambonz Web App</title>
  </head>
  <body>
    <div id="root"></div>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jambonz-webapp",
  "description": "A simple provisioning web app for jambonz",
-  "version": "0.9.0",
+  "version": "0.8.4",
  "license": "MIT",
  "type": "module",
  "engines": {
@@ -42,45 +42,46 @@
  },
  "dependencies": {
    "@jambonz/ui-kit": "^0.0.21",
-    "@stripe/react-stripe-js": "^2.6.2",
-    "@stripe/stripe-js": "^3.2.0",
-    "dayjs": "^1.11.10",
+    "dayjs": "^1.11.5",
    "immutability-helper": "^3.1.1",
-    "react": "^18.2.0",
+    "react": "^18.0.0",
    "react-dnd": "16.0.1",
    "react-dnd-html5-backend": "16.0.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.0.0",
    "react-feather": "^2.0.10",
-    "react-router-dom": "^6.22.3",
-    "wavesurfer.js": "^7.7.9"
+    "react-router-dom": "^6.3.0",
+    "wavesurfer.js": "^6.6.3",
+    "@stripe/react-stripe-js": "^2.1.1",
+    "@stripe/stripe-js": "^1.54.1"
  },
  "devDependencies": {
-    "@types/cors": "^2.8.17",
-    "@types/express": "^4.17.21",
-    "@types/node": "^20.12.5",
-    "@types/react": "^18.2.74",
-    "@types/react-dom": "^18.2.24",
-    "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@types/cors": "^2.8.12",
+    "@types/express": "^4.17.13",
+    "@types/node": "^18.6.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/uuid": "^9.0.1",
+    "@types/wavesurfer.js": "^6.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
+    "@vitejs/plugin-react": "^1.3.0",
    "cors": "^2.8.5",
-    "cypress": "^13.7.2",
+    "cypress": "^10.8.0",
    "eslint": "^8.19.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-react": "^7.30.1",
    "eslint-plugin-react-hooks": "^4.6.0",
-    "express": "^4.19.2",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.2",
-    "nanoid": "^5.0.7",
-    "prettier": "^3.2.5",
-    "sass": "^1.74.1",
-    "serve": "^14.2.1",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.4.4",
-    "vite": "^5.2.8"
+    "express": "^4.18.1",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "nanoid": "^4.0.0",
+    "prettier": "^2.7.1",
+    "sass": "^1.53.0",
+    "serve": "^14.0.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.6.3",
+    "vite": "^3.0.0"
  },
  "lint-staged": {
    "*.{ts,tsx}": "eslint --max-warnings=0",
--- a/server/dev.server.ts
+++ b/server/dev.server.ts
@@ -111,14 +111,14 @@ app.get(
      page: query.page,
      data: paged,
    });
-  },
+  }
 );

 app.get(
  "/api/Accounts/:account_sid/RecentCalls/:call_sid",
  (req: Request, res: Response) => {
    res.status(200).json({ total: Math.random() > 0.5 ? 1 : 0 });
-  },
+  }
 );

 app.get(
@@ -126,7 +126,7 @@ app.get(
  (req: Request, res: Response) => {
    /** Sample pcap file from: https://wiki.wireshark.org/SampleCaptures#sip-and-rtp */
    const pcap: Buffer = fs.readFileSync(
-      path.resolve(process.cwd(), "server", "sample-sip-rtp-traffic.pcap"),
+      path.resolve(process.cwd(), "server", "sample-sip-rtp-traffic.pcap")
    );

    res
@@ -136,7 +136,7 @@ app.get(
        "Content-Disposition": "attachment",
      })
      .send(pcap); // server: Buffer => client: Blob
-  },
+  }
 );

 app.get(
@@ -144,7 +144,7 @@ app.get(
  (req: Request, res: Response) => {
    /** Sample pcap file from: https://wiki.wireshark.org/SampleCaptures#sip-and-rtp */
    const wav: Buffer = fs.readFileSync(
-      path.resolve(process.cwd(), "server", "example.mp3"),
+      path.resolve(process.cwd(), "server", "example.mp3")
    );

    res
@@ -154,7 +154,7 @@ app.get(
        "Content-Disposition": "attachment",
      })
      .send(wav); // server: Buffer => client: Blob
-  },
+  }
 );

 app.get(
@@ -162,10 +162,10 @@ app.get(
  (req: Request, res: Response) => {
    const json = fs.readFileSync(
      path.resolve(process.cwd(), "server", "sample-jaeger.json"),
-      { encoding: "utf8" },
+      { encoding: "utf8" }
    );
    res.status(200).json(JSON.parse(json));
-  },
+  }
 );

 /** Alerts mock API responses for local dev */
--- a/src/api/constants.ts
+++ b/src/api/constants.ts
@@ -1,11 +1,8 @@
 import type {
  Currency,
-  ElevenLabsOptions,
  LimitField,
  LimitUnitOption,
  PasswordSettings,
-  PlayHTOptions,
-  RimelabsOptions,
  SelectorOptions,
  SipGateway,
  SmppGateway,
@@ -164,9 +161,7 @@ export const SIP_GATEWAY_PROTOCOL_OPTIONS = [
 * Record bucket type
 */
 export const BUCKET_VENDOR_AWS = "aws_s3";
-export const BUCKET_VENDOR_S3_COMPATIBLE = "s3_compatible";
 export const BUCKET_VENDOR_GOOGLE = "google";
-export const BUCKET_VENDOR_AZURE = "azure";
 export const BUCKET_VENDOR_OPTIONS = [
  {
    name: "NONE",
@@ -176,14 +171,6 @@ export const BUCKET_VENDOR_OPTIONS = [
    name: "AWS S3",
    value: BUCKET_VENDOR_AWS,
  },
-  {
-    name: "AWS S3 Compatible",
-    value: BUCKET_VENDOR_S3_COMPATIBLE,
-  },
-  {
-    name: "Azure Cloud Storage",
-    value: BUCKET_VENDOR_AZURE,
-  },
  {
    name: "Google Cloud Storage",
    value: BUCKET_VENDOR_GOOGLE,
@@ -200,54 +187,6 @@ export const AUDIO_FORMAT_OPTIONS = [
    value: "wav",
  },
 ];
-
-export const DEFAULT_ELEVENLABS_MODEL = "eleven_multilingual_v2";
-
-export const DEFAULT_WHISPER_MODEL = "tts-1";
-
-// VERBIO
-export const VERBIO_STT_MODELS = [
-  { name: "V1", value: "V1" },
-  { name: "V2", value: "V2" },
-];
-
-export const DEFAULT_VERBIO_MODEL = "V1";
-
-// Google Custom Voice reported usage options
-
-export const DEFAULT_GOOGLE_CUSTOM_VOICES_REPORTED_USAGE = "REALTIME";
-export const GOOGLE_CUSTOM_VOICES_REPORTED_USAGE = [
-  { name: "REPORTED_USAGE_UNSPECIFIED", value: "REPORTED_USAGE_UNSPECIFIED" },
-  { name: "REALTIME", value: "REALTIME" },
-  { name: "OFFLINE", value: "OFFLINE" },
-];
-// ElevenLabs options
-export const DEFAULT_ELEVENLABS_OPTIONS: Partial<ElevenLabsOptions> = {
-  optimize_streaming_latency: 3,
-  voice_settings: {
-    stability: 0.5,
-    similarity_boost: 0.5,
-    use_speaker_boost: true,
-  },
-};
-
-// Rimelabs options
-export const DEFAULT_RIMELABS_OPTIONS: Partial<RimelabsOptions> = {
-  speedAlpha: 1.0,
-  reduceLatency: true,
-};
-
-// PlayHT options
-export const DEFAULT_PLAYHT_OPTIONS: Partial<PlayHTOptions> = {
-  quality: "medium",
-  speed: 1,
-  seed: 1,
-  temperature: 1,
-  emotion: "female_happy",
-  voice_guidance: 3,
-  style_guidance: 20,
-  text_guidance: 1,
-};
 /** Password Length options */

 export const PASSWORD_MIN = 8;
@@ -395,4 +334,3 @@ export const API_PRICE = `${API_BASE_URL}/Prices`;
 export const API_SUBSCRIPTIONS = `${API_BASE_URL}/Subscriptions`;
 export const API_CHANGE_PASSWORD = `${API_BASE_URL}/change-password`;
 export const API_SIGNIN = `${API_BASE_URL}/signin`;
-export const API_GOOGLE_CUSTOM_VOICES = `${API_BASE_URL}/GoogleCustomVoices`;
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -33,7 +33,6 @@ import {
  API_SUBSCRIPTIONS,
  API_CHANGE_PASSWORD,
  API_SIGNIN,
-  API_GOOGLE_CUSTOM_VOICES,
 } from "./constants";
 import { ROUTE_LOGIN } from "src/router/routes";
 import {
@@ -91,9 +90,6 @@ import type {
  DeleteAccount,
  ChangePassword,
  SignIn,
-  GoogleCustomVoice,
-  GoogleCustomVoicesQuery,
-  SpeechSupportedLanguagesAndVoices,
 } from "./types";
 import { Availability, StatusCodes } from "./types";
 import { JaegerRoot } from "./jaeger-types";
@@ -101,7 +97,7 @@ import { JaegerRoot } from "./jaeger-types";
 /** Wrap all requests to normalize response handling */
 const fetchTransport = <Type>(
  url: string,
-  options: RequestInit,
+  options: RequestInit
 ): Promise<FetchTransport<Type>> => {
  return new Promise(async (resolve, reject) => {
    try {
@@ -189,7 +185,7 @@ const getAuthHeaders = () => {

 const getQuery = <Type>(query: Type) => {
  return decodeURIComponent(
-    new URLSearchParams(query as unknown as Record<string, string>).toString(),
+    new URLSearchParams(query as unknown as Record<string, string>).toString()
  );
 };

@@ -235,7 +231,7 @@ export const getFetch = <Type>(url: string) => {

 export const postFetch = <Type, Payload = undefined>(
  url: string,
-  payload?: Payload,
+  payload?: Payload
 ) => {
  return fetchTransport<Type>(url, {
    method: "POST",
@@ -261,7 +257,7 @@ export const deleteFetch = <Type>(url: string) => {

 export const deleteFetchWithPayload = <Type, Payload>(
  url: string,
-  payload: Payload,
+  payload: Payload
 ) => {
  return fetchTransport<Type>(url, {
    method: "DELETE",
@@ -291,7 +287,7 @@ export const postLogout = () => {
 export const postServiceProviders = (payload: Partial<ServiceProvider>) => {
  return postFetch<SidResponse, Partial<ServiceProvider>>(
    API_SERVICE_PROVIDERS,
-    payload,
+    payload
  );
 };

@@ -305,24 +301,24 @@ export const postAccount = (payload: Partial<Account>) => {

 export const postAccountBucketCredentialTest = (
  sid: string,
-  payload: Partial<BucketCredential>,
+  payload: Partial<BucketCredential>
 ) => {
  return postFetch<BucketCredentialTestResult, Partial<BucketCredential>>(
    `${API_ACCOUNTS}/${sid}/BucketCredentialTest`,
-    payload,
+    payload
  );
 };

 export const postApplication = (payload: Partial<Application>) => {
  return postFetch<SidResponse, Partial<Application>>(
    API_APPLICATIONS,
-    payload,
+    payload
  );
 };

 export const postSpeechService = (
  sid: string,
-  payload: Partial<SpeechCredential>,
+  payload: Partial<SpeechCredential>
 ) => {
  const userData = parseJwt(getToken());
  const apiUrl =
@@ -336,14 +332,14 @@ export const postSpeechService = (
 export const postMsTeamsTentant = (payload: Partial<MSTeamsTenant>) => {
  return postFetch<SidResponse, Partial<MSTeamsTenant>>(
    API_MS_TEAMS_TENANTS,
-    payload,
+    payload
  );
 };

 export const postPhoneNumber = (payload: Partial<PhoneNumber>) => {
  return postFetch<SidResponse, Partial<PhoneNumber>>(
    API_PHONE_NUMBERS,
-    payload,
+    payload
  );
 };

@@ -359,19 +355,19 @@ export const postCarrier = (sid: string, payload: Partial<Carrier>) => {

 export const postPredefinedCarrierTemplate = (
  currentServiceProviderSid: string,
-  predefinedCarrierSid: string,
+  predefinedCarrierSid: string
 ) => {
  return postFetch<SidResponse>(
-    `${API_BASE_URL}/ServiceProviders/${currentServiceProviderSid}/PredefinedCarriers/${predefinedCarrierSid}`,
+    `${API_BASE_URL}/ServiceProviders/${currentServiceProviderSid}/PredefinedCarriers/${predefinedCarrierSid}`
  );
 };

 export const postPredefinedCarrierTemplateAccount = (
  accountSid: string,
-  predefinedCarrierSid: string,
+  predefinedCarrierSid: string
 ) => {
  return postFetch<SidResponse>(
-    `${API_BASE_URL}/Accounts/${accountSid}/PredefinedCarriers/${predefinedCarrierSid}`,
+    `${API_BASE_URL}/Accounts/${accountSid}/PredefinedCarriers/${predefinedCarrierSid}`
  );
 };

@@ -382,45 +378,45 @@ export const postSipGateway = (payload: Partial<SipGateway>) => {
 export const postSmppGateway = (payload: Partial<SmppGateway>) => {
  return postFetch<SidResponse, Partial<SmppGateway>>(
    API_SMPP_GATEWAY,
-    payload,
+    payload
  );
 };

 export const postServiceProviderLimit = (
  sid: string,
-  payload: Partial<Limit>,
+  payload: Partial<Limit>
 ) => {
  return postFetch<SidResponse, Partial<Limit>>(
    `${API_SERVICE_PROVIDERS}/${sid}/Limits`,
-    payload,
+    payload
  );
 };

 export const postAccountLimit = (sid: string, payload: Partial<Limit>) => {
  return postFetch<SidResponse, Partial<Limit>>(
    `${API_ACCOUNTS}/${sid}/Limits`,
-    payload,
+    payload
  );
 };

 export const postPasswordSettings = (payload: Partial<PasswordSettings>) => {
  return postFetch<EmptyResponse, Partial<PasswordSettings>>(
    API_PASSWORD_SETTINGS,
-    payload,
+    payload
  );
 };

 export const postForgotPassword = (payload: Partial<ForgotPassword>) => {
  return postFetch<EmptyResponse, Partial<ForgotPassword>>(
    API_FORGOT_PASSWORD,
-    payload,
+    payload
  );
 };

 export const postSystemInformation = (payload: Partial<SystemInformation>) => {
  return postFetch<SystemInformation, Partial<SystemInformation>>(
    API_SYSTEM_INFORMATION,
-    payload,
+    payload
  );
 };

@@ -428,26 +424,16 @@ export const postLcr = (payload: Partial<Lcr>) => {
  return postFetch<SidResponse, Partial<Lcr>>(API_LCRS, payload);
 };

-export const postLcrCreateRoutes = (
-  sid: string,
-  payload: Partial<LcrRoute[]>,
-) => {
-  return postFetch<EmptyResponse, Partial<LcrRoute[]>>(
-    `${API_LCRS}/${sid}/Routes`,
-    payload,
-  );
-};
-
 export const postLcrRoute = (payload: Partial<LcrRoute>) => {
  return postFetch<SidResponse, Partial<LcrRoute>>(API_LCR_ROUTES, payload);
 };

 export const postLcrCarrierSetEntry = (
-  payload: Partial<LcrCarrierSetEntry>,
+  payload: Partial<LcrCarrierSetEntry>
 ) => {
  return postFetch<SidResponse, Partial<LcrCarrierSetEntry>>(
    API_LCR_CARRIER_SET_ENTRIES,
-    payload,
+    payload
  );
 };

@@ -458,77 +444,70 @@ export const postClient = (payload: Partial<Client>) => {
 export const postRegister = (payload: Partial<RegisterRequest>) => {
  return postFetch<RegisterResponse, Partial<RegisterRequest>>(
    API_REGISTER,
-    payload,
+    payload
  );
 };

 export const postSipRealms = (accountSid: string, domain: string) => {
  return postFetch<EmptyResponse>(
-    `${API_ACCOUNTS}/${accountSid}/SipRealms/${domain}`,
+    `${API_ACCOUNTS}/${accountSid}/SipRealms/${domain}`
  );
 };

 export const postSubscriptions = (payload: Partial<Subscription>) => {
  return postFetch<Subscription, Partial<Subscription>>(
    API_SUBSCRIPTIONS,
-    payload,
+    payload
  );
 };

 export const postChangepassword = (payload: Partial<ChangePassword>) => {
  return postFetch<EmptyResponse, Partial<ChangePassword>>(
    API_CHANGE_PASSWORD,
-    payload,
+    payload
  );
 };

 export const postSignIn = (payload: Partial<SignIn>) => {
  return postFetch<SignIn, Partial<SignIn>>(API_SIGNIN, payload);
 };
-
-export const postGoogleCustomVoice = (payload: Partial<GoogleCustomVoice>) => {
-  return postFetch<SidResponse, Partial<GoogleCustomVoice>>(
-    API_GOOGLE_CUSTOM_VOICES,
-    payload,
-  );
-};
 /** Named wrappers for `putFetch` */

 export const putUser = (sid: string, payload: Partial<UserUpdatePayload>) => {
  return putFetch<EmptyResponse, Partial<UserUpdatePayload>>(
    `${API_USERS}/${sid}`,
-    payload,
+    payload
  );
 };

 export const putServiceProvider = (
  sid: string,
-  payload: Partial<ServiceProvider>,
+  payload: Partial<ServiceProvider>
 ) => {
  return putFetch<EmptyResponse, Partial<ServiceProvider>>(
    `${API_SERVICE_PROVIDERS}/${sid}`,
-    payload,
+    payload
  );
 };

 export const putAccount = (sid: string, payload: Partial<Account>) => {
  return putFetch<EmptyResponse, Partial<Account>>(
    `${API_ACCOUNTS}/${sid}`,
-    payload,
+    payload
  );
 };

 export const putApplication = (sid: string, payload: Partial<Application>) => {
  return putFetch<EmptyResponse, Partial<Application>>(
    `${API_APPLICATIONS}/${sid}`,
-    payload,
+    payload
  );
 };

 export const putSpeechService = (
  sid1: string,
  sid2: string,
-  payload: Partial<SpeechCredential>,
+  payload: Partial<SpeechCredential>
 ) => {
  const userData = parseJwt(getToken());
  const apiUrl =
@@ -541,25 +520,25 @@ export const putSpeechService = (

 export const putMsTeamsTenant = (
  sid: string,
-  payload: Partial<MSTeamsTenant>,
+  payload: Partial<MSTeamsTenant>
 ) => {
  return putFetch<EmptyResponse, Partial<MSTeamsTenant>>(
    `${API_MS_TEAMS_TENANTS}/${sid}`,
-    payload,
+    payload
  );
 };

 export const putPhoneNumber = (sid: string, payload: Partial<PhoneNumber>) => {
  return putFetch<EmptyResponse, Partial<PhoneNumber>>(
    `${API_PHONE_NUMBERS}/${sid}`,
-    payload,
+    payload
  );
 };

 export const putCarrier = (
  sid1: string,
  sid2: string,
-  payload: Partial<Carrier>,
+  payload: Partial<Carrier>
 ) => {
  const userData = parseJwt(getToken());
  const apiUrl =
@@ -573,14 +552,14 @@ export const putCarrier = (
 export const putSipGateway = (sid: string, payload: Partial<SipGateway>) => {
  return putFetch<EmptyResponse, Partial<SipGateway>>(
    `${API_SIP_GATEWAY}/${sid}`,
-    payload,
+    payload
  );
 };

 export const putSmppGateway = (sid: string, payload: Partial<SmppGateway>) => {
  return putFetch<EmptyResponse, Partial<SmppGateway>>(
    `${API_SMPP_GATEWAY}/${sid}`,
-    payload,
+    payload
  );
 };

@@ -588,60 +567,39 @@ export const putLcr = (sid: string, payload: Partial<Lcr>) => {
  return putFetch<EmptyResponse, Partial<Lcr>>(`${API_LCRS}/${sid}`, payload);
 };

-export const putLcrUpdateRoutes = (
-  sid: string,
-  payload: Partial<LcrRoute[]>,
-) => {
-  return putFetch<EmptyResponse, Partial<LcrRoute[]>>(
-    `${API_LCRS}/${sid}/Routes`,
-    payload,
-  );
-};
-
 export const putLcrRoutes = (sid: string, payload: Partial<LcrRoute>) => {
  return putFetch<EmptyResponse, Partial<LcrRoute>>(
    `${API_LCR_ROUTES}/${sid}`,
-    payload,
+    payload
  );
 };

 export const putLcrCarrierSetEntries = (
  sid: string,
-  payload: Partial<LcrCarrierSetEntry>,
+  payload: Partial<LcrCarrierSetEntry>
 ) => {
  return putFetch<EmptyResponse, Partial<LcrCarrierSetEntry>>(
    `${API_LCR_CARRIER_SET_ENTRIES}/${sid}`,
-    payload,
+    payload
  );
 };

 export const putClient = (sid: string, payload: Partial<Client>) => {
  return putFetch<EmptyResponse, Partial<Client>>(
    `${API_CLIENTS}/${sid}`,
-    payload,
+    payload
  );
 };

 export const putActivationCode = (
  code: string,
-  payload: Partial<ActivationCode>,
+  payload: Partial<ActivationCode>
 ) => {
  return putFetch<EmptyResponse, Partial<ActivationCode>>(
    `${API_ACTIVATION_CODE}/${code}`,
-    payload,
+    payload
  );
 };
-
-export const putGoogleCustomVoice = (
-  sid: string,
-  payload: Partial<GoogleCustomVoice>,
-) => {
-  return putFetch<EmptyResponse, Partial<GoogleCustomVoice>>(
-    `${API_GOOGLE_CUSTOM_VOICES}/${sid}`,
-    payload,
-  );
-};
-
 /** Named wrappers for `deleteFetch` */

 export const deleteUser = (sid: string) => {
@@ -659,7 +617,7 @@ export const deleteApiKey = (sid: string) => {
 export const deleteAccount = (sid: string, payload: Partial<DeleteAccount>) => {
  return deleteFetchWithPayload<EmptyResponse, Partial<DeleteAccount>>(
    `${API_ACCOUNTS}/${sid}`,
-    payload,
+    payload
  );
 };

@@ -669,7 +627,7 @@ export const deleteApplication = (sid: string) => {

 export const deleteSpeechService = (sid1: string, sid2: string) => {
  return deleteFetch<EmptyResponse>(
-    `${API_SERVICE_PROVIDERS}/${sid1}/SpeechCredentials/${sid2}`,
+    `${API_SERVICE_PROVIDERS}/${sid1}/SpeechCredentials/${sid2}`
  );
 };

@@ -695,16 +653,16 @@ export const deleteSmppGateway = (sid: string) => {

 export const deleteServiceProviderLimit = (
  sid: string,
-  cat: LimitCategories,
+  cat: LimitCategories
 ) => {
  return deleteFetch<EmptyResponse>(
-    `${API_SERVICE_PROVIDERS}/${sid}/Limits?category=${cat}`,
+    `${API_SERVICE_PROVIDERS}/${sid}/Limits?category=${cat}`
  );
 };

 export const deleteAccountLimit = (sid: string, cat: LimitCategories) => {
  return deleteFetch<EmptyResponse>(
-    `${API_ACCOUNTS}/${sid}/Limits?category=${cat}`,
+    `${API_ACCOUNTS}/${sid}/Limits?category=${cat}`
  );
 };

@@ -727,14 +685,6 @@ export const deleteAccountTtsCache = (sid: string) => {
 export const deleteClient = (sid: string) => {
  return deleteFetch<EmptyResponse>(`${API_CLIENTS}/${sid}`);
 };
-
-export const deleteRecord = (url: string) => {
-  return deleteFetch<EmptyResponse>(url);
-};
-
-export const deleteGoogleCustomVoice = (sid: string) => {
-  return deleteFetch<EmptyResponse>(`${API_GOOGLE_CUSTOM_VOICES}/${sid}`);
-};
 /** Named wrappers for `getFetch` */

 export const getUser = (sid: string) => {
@@ -747,7 +697,7 @@ export const getServiceProviders = () => {

 export const getAccountWebhook = (sid: string) => {
  return getFetch<SecretResponse>(
-    `${API_ACCOUNTS}/${sid}/WebhookSecret?regenerate=true`,
+    `${API_ACCOUNTS}/${sid}/WebhookSecret?regenerate=true`
  );
 };

@@ -769,7 +719,7 @@ export const getLcrRoute = (sid: string) => {

 export const getLcrCarrierSetEtries = (sid: string) => {
  return getFetch<LcrCarrierSetEntry[]>(
-    `${API_LCR_CARRIER_SET_ENTRIES}?lcr_route_sid=${sid}`,
+    `${API_LCR_CARRIER_SET_ENTRIES}?lcr_route_sid=${sid}`
  );
 };

@@ -783,17 +733,10 @@ export const getClient = (sid: string) => {

 export const getAvailability = (domain: string) => {
  return getFetch<Availability>(
-    `${API_AVAILABILITY}?type=subdomain&value=${domain}`,
+    `${API_AVAILABILITY}?type=subdomain&value=${domain}`
  );
 };

-export const getGoogleCustomVoices = (
-  query: Partial<GoogleCustomVoicesQuery>,
-) => {
-  const qryStr = getQuery<Partial<GoogleCustomVoicesQuery>>(query);
-  return getFetch<GoogleCustomVoice[]>(`${API_GOOGLE_CUSTOM_VOICES}?${qryStr}`);
-};
-
 /** Wrappers for APIs that can have a mock dev server response */

 export const getMe = () => {
@@ -806,7 +749,7 @@ export const getRecentCalls = (sid: string, query: Partial<CallQuery>) => {
  return getFetch<PagedResponse<RecentCall>>(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls?${qryStr}`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls?${qryStr}`,
+      : `${API_ACCOUNTS}/${sid}/RecentCalls?${qryStr}`
  );
 };

@@ -814,7 +757,7 @@ export const getRecentCall = (sid: string, sipCallId: string) => {
  return getFetch<TotalResponse>(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/${sipCallId}`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}`,
+      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}`
  );
 };

@@ -822,7 +765,7 @@ export const getPcap = (sid: string, sipCallId: string, method: string) => {
  return getBlob(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`,
+      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
  );
 };

@@ -830,30 +773,30 @@ export const getJaegerTrace = (sid: string, traceId: string) => {
  return getFetch<JaegerRoot>(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/trace/${traceId}`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls/trace/${traceId}`,
+      : `${API_ACCOUNTS}/${sid}/RecentCalls/trace/${traceId}`
  );
 };

 export const getServiceProviderRecentCall = (
  sid: string,
-  sipCallId: string,
+  sipCallId: string
 ) => {
  return getFetch<TotalResponse>(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/ServiceProviders/${sid}/RecentCalls/${sipCallId}`
-      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}`,
+      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}`
  );
 };

 export const getServiceProviderPcap = (
  sid: string,
  sipCallId: string,
-  method: string,
+  method: string
 ) => {
  return getBlob(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/ServiceProviders/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
-      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`,
+      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
  );
 };

@@ -863,7 +806,7 @@ export const getAlerts = (sid: string, query: Partial<PageQuery>) => {
  return getFetch<PagedResponse<Alert>>(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/Accounts/${sid}/Alerts?${qryStr}`
-      : `${API_ACCOUNTS}/${sid}/Alerts?${qryStr}`,
+      : `${API_ACCOUNTS}/${sid}/Alerts?${qryStr}`
  );
 };

@@ -871,22 +814,6 @@ export const getPrice = () => {
  return getFetch<PriceInfo[]>(API_PRICE);
 };

-export const getSpeechSupportedLanguagesAndVoices = (
-  sid: string | undefined,
-  vendor: string,
-  label: string,
-) => {
-  const userData = parseJwt(getToken());
-  const apiUrl =
-    (userData.scope === USER_ACCOUNT
-      ? `${API_ACCOUNTS}/${userData.account_sid}`
-      : `${API_SERVICE_PROVIDERS}/${sid}`) +
-    `/SpeechCredentials/speech/supportedLanguagesAndVoices?vendor=${vendor}${
-      label ? `&label=${label}` : ""
-    }`;
-  return getFetch<SpeechSupportedLanguagesAndVoices>(apiUrl);
-};
-
 /** Hooks for components to fetch data with refetch method */

 /** :GET /{apiPath} -- this is generic for any fetch of data collections */
@@ -946,7 +873,7 @@ export const useServiceProviderData: UseApiData = <Type>(apiPath: string) => {

    if (currentServiceProvider) {
      getFetch<Type>(
-        `${API_SERVICE_PROVIDERS}/${currentServiceProvider.service_provider_sid}/${apiPath}`,
+        `${API_SERVICE_PROVIDERS}/${currentServiceProvider.service_provider_sid}/${apiPath}`
      )
        .then(({ json }) => {
          if (!ignore) {
--- a/src/api/jaeger-types.ts
+++ b/src/api/jaeger-types.ts
@@ -37,26 +37,14 @@ export interface JaegerAttribute {
  value: JaegerValue;
 }

-export interface WaveSurferSttResult {
+export interface WaveSufferSttResult {
  vendor: string;
  transcript: string;
  confidence: number;
  language_code: string;
-  latency?: number;
 }

-export interface WaveSurferTtsLatencyResult {
-  vendor: string;
-  latency: string;
-  isCached: string;
-}
-
-export interface WaveSurferGatherSpeechVerbHookLatencyResult {
-  statusCode: number;
-  latency: string;
-}
-
-export interface WaveSurferDtmfResult {
+export interface WaveSufferDtmfResult {
  dtmf: string;
  duration: string;
 }
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -1,4 +1,4 @@
-import type { Language, Model, Vendor, VoiceLanguage } from "src/vendor/types";
+import type { Vendor } from "src/vendor/types";

 /** Simple types */

@@ -63,9 +63,11 @@ export interface FetchError {
 }

 export interface UseApiData {
-  <Type>(
-    apiPath: string,
-  ): [Type | undefined, () => void, FetchError | undefined];
+  <Type>(apiPath: string): [
+    Type | undefined,
+    () => void,
+    FetchError | undefined
+  ];
 }

 /** API related interfaces */
@@ -260,7 +262,6 @@ export interface Account {
  plan_type?: string;
  device_to_call_ratio?: number;
  trial_end_date?: null | string;
-  is_active: boolean;
 }

 export interface Product {
@@ -304,8 +305,6 @@ export interface BucketCredential {
  secret_access_key?: null | string;
  tags?: null | AwsTag[];
  service_key?: null | string;
-  connection_string?: null | string;
-  endpoint?: null | string;
 }

 export interface Application {
@@ -319,19 +318,9 @@ export interface Application {
  speech_synthesis_voice: null | string;
  speech_synthesis_vendor: null | Lowercase<Vendor>;
  speech_synthesis_language: null | string;
-  speech_synthesis_label: null | string;
  speech_recognizer_vendor: null | Lowercase<Vendor>;
  speech_recognizer_language: null | string;
-  speech_recognizer_label: null | string;
  record_all_calls: number;
-  use_for_fallback_speech: number;
-  fallback_speech_synthesis_vendor: null | string;
-  fallback_speech_synthesis_language: null | string;
-  fallback_speech_synthesis_voice: null | string;
-  fallback_speech_synthesis_label: null | string;
-  fallback_speech_recognizer_vendor: null | string;
-  fallback_speech_recognizer_language: null | string;
-  fallback_speech_recognizer_label: null | string;
 }

 export interface PhoneNumber {
@@ -371,14 +360,6 @@ export interface RecentCall {
  recording_url?: string;
 }

-export interface GoogleCustomVoice {
-  google_custom_voice_sid?: string;
-  speech_credential_sid?: string;
-  name: string;
-  reported_usage: string;
-  model: string;
-}
-
 export interface SpeechCredential {
  speech_credential_sid: string;
  service_provider_sid: null | string;
@@ -390,19 +371,14 @@ export interface SpeechCredential {
  region: null | string;
  aws_region: null | string;
  api_key: null | string;
-  role_arn: null | string;
-  user_id: null | string;
  access_key_id: null | string;
  secret_access_key: null | string;
  service_key: null | string;
  use_custom_tts: number;
-  custom_tts_endpoint_url: null | string;
  custom_tts_endpoint: null | string;
  use_custom_stt: number;
-  custom_stt_endpoint_url: null | string;
  custom_stt_endpoint: null | string;
  client_id: null | string;
-  client_secret: null | string;
  secret: null | string;
  nuance_tts_uri: null | string;
  nuance_stt_uri: null | string;
@@ -415,15 +391,6 @@ export interface SpeechCredential {
  auth_token: null | string;
  custom_stt_url: null | string;
  custom_tts_url: null | string;
-  label: null | string;
-  cobalt_server_uri: null | string;
-  model_id: null | string;
-  voice_engine: null | string;
-  engine_version: null | string;
-  model: null | string;
-  options: null | string;
-  deepgram_stt_uri: null | string;
-  deepgram_stt_use_tls: number;
 }

 export interface Alert {
@@ -477,6 +444,7 @@ export interface PredefinedCarrier extends Carrier {
 export interface Gateway {
  voip_carrier_sid: string;
  ipv4: string;
+  port: number;
  netmask: number;
  inbound: number;
  outbound: number;
@@ -486,16 +454,12 @@ export interface SipGateway extends Gateway {
  sip_gateway_sid?: null | string;
  is_active: boolean;
  protocol?: string;
-  port: number | null;
-  pad_crypto?: boolean;
-  send_options_ping?: boolean;
 }

 export interface SmppGateway extends Gateway {
  smpp_gateway_sid?: null | string;
  is_primary: boolean;
  use_tls: boolean;
-  port: number;
 }

 export interface Lcr {
@@ -512,7 +476,7 @@ export interface LcrRoute {
  lcr_route_sid?: null | string;
  lcr_sid: null | string;
  regex: null | string;
-  description?: null | string;
+  desciption?: null | string;
  priority: number;
  lcr_carrier_set_entries?: LcrCarrierSetEntry[];
 }
@@ -531,9 +495,6 @@ export interface Client {
  username: null | string;
  password?: null | string;
  is_active: boolean;
-  allow_direct_app_calling: boolean;
-  allow_direct_queue_calling: boolean;
-  allow_direct_user_calling: boolean;
 }

 export interface PageQuery {
@@ -548,13 +509,6 @@ export interface CallQuery extends PageQuery {
  answered?: string;
 }

-export interface GoogleCustomVoicesQuery {
-  speech_credential_sid?: string;
-  label?: string;
-  account_sid?: string;
-  service_provider_sid: string;
-}
-
 export interface PagedResponse<Type> {
  page_size: number;
  total: number;
@@ -703,40 +657,3 @@ export interface SignIn {
  jwt?: null | string;
  account_sid?: null | string;
 }
-
-export interface GetLanguagesAndVoices {
-  vendor: string;
-  label: string;
-}
-
-export interface SpeechSupportedLanguagesAndVoices {
-  tts: VoiceLanguage[];
-  stt: Language[];
-  models: Model[];
-}
-
-export interface ElevenLabsOptions {
-  optimize_streaming_latency: number;
-  voice_settings: Partial<{
-    similarity_boost: number;
-    stability: number;
-    style: number;
-    use_speaker_boost: boolean;
-  }>;
-}
-
-export interface PlayHTOptions {
-  quality: string;
-  speed: number;
-  seed: number;
-  temperature: number;
-  emotion: string;
-  voice_guidance: number;
-  style_guidance: number;
-  text_guidance: number;
-}
-
-export interface RimelabsOptions {
-  speedAlpha: number;
-  reduceLatency: boolean;
-}
--- a/src/components/application-filter.cy.tsx
+++ b/src/components/application-filter.cy.tsx
@@ -12,7 +12,7 @@ import applications from "../../cypress/fixtures/applications.json";

 /** Wrapper to perform React state setup */
 const ApplicationFilterTestWrapper = (
-  props: Partial<ApplicationFilterProps>,
+  props: Partial<ApplicationFilterProps>
 ) => {
  const [application, setApplication] = useState("");

@@ -47,7 +47,7 @@ describe("<ApplicationFilter>", () => {
    /** Default value is properly set to first option */
    cy.get("select").should(
      "have.value",
-      applicationsSorted[0].application_sid,
+      applicationsSorted[0].application_sid
    );
  });

@@ -58,7 +58,7 @@ describe("<ApplicationFilter>", () => {
    cy.get("select").select(applicationsSorted[1].application_sid);
    cy.get("select").should(
      "have.value",
-      applicationsSorted[1].application_sid,
+      applicationsSorted[1].application_sid
    );
  });

@@ -75,7 +75,7 @@ describe("<ApplicationFilter>", () => {
  it("renders default option", () => {
    /** Test with the `defaultOption` prop */
    cy.mount(
-      <ApplicationFilterTestWrapper defaultOption="Choose Application" />,
+      <ApplicationFilterTestWrapper defaultOption="Choose Application" />
    );

    /** No default value is set when this prop is present */
--- a/src/components/clipboard/index.tsx
+++ b/src/components/clipboard/index.tsx
@@ -20,7 +20,7 @@ export const ClipBoard = ({ text, id = "", name = "" }: ClipBoardProps) => {
        toastSuccess(
          <>
            <strong>{text}</strong> copied to clipboard
-          </>,
+          </>
        );
      })
      .catch(() => {
@@ -28,7 +28,7 @@ export const ClipBoard = ({ text, id = "", name = "" }: ClipBoardProps) => {
          <>
            Unable to copy <strong>{text}</strong>, please select the text and
            right click to copy
-          </>,
+          </>
        );
      });
  };
--- a/src/components/forms/account-select.tsx
+++ b/src/components/forms/account-select.tsx
@@ -28,7 +28,7 @@ export const AccountSelect = forwardRef<SelectorRef, AccountSelectProps>(
      defaultOption,
      ...restProps
    }: AccountSelectProps,
-    ref,
+    ref
  ) => {
    useEffect(() => {
      if (hasLength(accounts) && !accountSid && !defaultOption) {
@@ -56,14 +56,14 @@ export const AccountSelect = forwardRef<SelectorRef, AccountSelectProps>(
                  name: account.name,
                  value: account.account_sid,
                }))
-              : [],
+              : []
          )}
          onChange={(e) => setAccountSid(e.target.value)}
          {...restProps}
        />
      </>
    );
-  },
+  }
 );

 AccountSelect.displayName = "AccountSelect";
--- a/src/components/forms/application-select.tsx
+++ b/src/components/forms/application-select.tsx
@@ -34,7 +34,7 @@ export const ApplicationSelect = forwardRef<
      defaultOption,
      ...restProps
    }: ApplicationSelectProps,
-    ref,
+    ref
  ) => {
    useEffect(() => {
      if (hasLength(applications) && !applicationSid && !defaultOption) {
@@ -62,14 +62,14 @@ export const ApplicationSelect = forwardRef<
                  name: application.name,
                  value: application.application_sid,
                }))
-              : [],
+              : []
          )}
          onChange={(e) => setApplicationSid(e.target.value)}
          {...restProps}
        />
      </>
    );
-  },
+  }
 );

 ApplicationSelect.displayName = "ApplicationSelect";
--- a/src/components/forms/checkzone/index.tsx
+++ b/src/components/forms/checkzone/index.tsx
@@ -11,7 +11,6 @@ type CheckzoneProps = {
  hidden?: boolean;
  children: React.ReactNode;
  initialCheck: boolean;
-  disabled?: boolean;
  handleChecked?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };

@@ -29,9 +28,8 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
      children,
      initialCheck,
      handleChecked,
-      disabled = false,
    }: CheckzoneProps,
-    ref,
+    ref
  ) => {
    const [checked, setChecked] = useState(false);
    const classesTop = classNames({
@@ -53,7 +51,6 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
        <label>
          <div className="label-container">
            <input
-              disabled={disabled}
              ref={ref}
              type="checkbox"
              name={name}
@@ -74,7 +71,7 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
        {checked && <div className={classesIn}>{children}</div>}
      </div>
    );
-  },
+  }
 );

 Checkzone.displayName = "Checkzone";
--- a/src/components/forms/file-upload/index.tsx
+++ b/src/components/forms/file-upload/index.tsx
@@ -25,7 +25,7 @@ export const FileUpload = forwardRef<FileRef, FileProps>(
      disabled,
      ...restProps
    }: FileProps,
-    ref,
+    ref
  ) => {
    const [fileName, setFileName] = useState("");
    const [focus, setFocus] = useState(false);
@@ -73,7 +73,7 @@ export const FileUpload = forwardRef<FileRef, FileProps>(
        </div>
      </div>
    );
-  },
+  }
 );

 FileUpload.displayName = "FileUpload";
--- a/src/components/forms/local-limits.tsx
+++ b/src/components/forms/local-limits.tsx
@@ -52,12 +52,12 @@ export const LocalLimits = ({
    ? LIMITS.filter((limit) =>
        unit === LIMIT_SESS
          ? !limit.category.includes(LIMIT_MIN)
-          : limit.category.includes(LIMIT_MIN),
+          : limit.category.includes(LIMIT_MIN)
      )
    : LIMITS.filter(
        (limit) =>
          !limit.category.includes("license") &&
-          !limit.category.includes(LIMIT_MIN),
+          !limit.category.includes(LIMIT_MIN)
      );

  useEffect(() => {
@@ -130,7 +130,7 @@ export const LocalLimits = ({
                  }
                  onChange={(e) => {
                    const limit = localLimits.find(
-                      (l) => l.category === category,
+                      (l) => l.category === category
                    );
                    const value = e.target.value ? Number(e.target.value) : "";

@@ -139,8 +139,8 @@ export const LocalLimits = ({
                        localLimits.map((l) =>
                          l.category === category
                            ? { ...l, quantity: value }
-                            : l,
-                        ),
+                            : l
+                        )
                      );
                    } else {
                      setLocalLimits([
--- a/src/components/forms/passwd/index.tsx
+++ b/src/components/forms/passwd/index.tsx
@@ -24,7 +24,7 @@ export const Passwd = forwardRef<PasswdRef, PasswdProps>(
      locked = false,
      ...restProps
    }: PasswdProps,
-    ref,
+    ref
  ) => {
    const [reveal, setReveal] = useState(false);

@@ -55,7 +55,7 @@ export const Passwd = forwardRef<PasswdRef, PasswdProps>(
        )}
      </div>
    );
-  },
+  }
 );

 Passwd.displayName = "Passwd";
--- a/src/components/forms/selector/index.tsx
+++ b/src/components/forms/selector/index.tsx
@@ -20,7 +20,7 @@ type SelectorRef = HTMLSelectElement;
 export const Selector = forwardRef<SelectorRef, SelectorProps>(
  (
    { id, name, value, options, disabled, ...restProps }: SelectorProps,
-    ref,
+    ref
  ) => {
    const [focus, setFocus] = useState(false);
    const classes = {
@@ -42,7 +42,7 @@ export const Selector = forwardRef<SelectorRef, SelectorProps>(
          {...restProps}
        >
          {options.map((option) => (
-            <option key={`${id}_${option.value}`} value={option.value}>
+            <option key={option.value} value={option.value}>
              {option.name}
            </option>
          ))}
@@ -53,7 +53,7 @@ export const Selector = forwardRef<SelectorRef, SelectorProps>(
        </span>
      </div>
    );
-  },
+  }
 );

 Selector.displayName = "Selector";
--- a/src/components/icons.ts
+++ b/src/components/icons.ts
@@ -50,7 +50,6 @@ import {
  Smartphone,
  Youtube,
  Mail,
-  Tag,
 } from "react-feather";

 import type { Icon } from "react-feather";
@@ -111,5 +110,4 @@ export const Icons: IconMap = {
  Smartphone,
  Youtube,
  Mail,
-  Tag,
 };
--- a/src/components/modal/index.tsx
+++ b/src/components/modal/index.tsx
@@ -50,7 +50,7 @@ export const Modal = ({
        </ButtonGroup>
      </div>
    </div>,
-    portal,
+    portal
  );
 };

@@ -87,7 +87,7 @@ export const ModalForm = ({
        </ButtonGroup>
      </form>
    </div>,
-    portal,
+    portal
  );
 };

@@ -113,7 +113,7 @@ export const ModalClose = ({ children, handleClose }: CloseProps) => {
        </ButtonGroup>
      </div>
    </div>,
-    portal,
+    portal
  );
 };

@@ -147,6 +147,6 @@ export const ModalLoader = ({ children }: LoaderProps) => {
        </div>
      </div>
    </div>,
-    portal,
+    portal
  );
 };
--- a/src/components/pagination/index.tsx
+++ b/src/components/pagination/index.tsx
@@ -32,7 +32,7 @@ export const Pagination = ({
    (num: number) => {
      setPageNumber(Math.max(1, Math.min(maxPageNumber, num)));
    },
-    [maxPageNumber, setPageNumber],
+    [maxPageNumber, setPageNumber]
  );

  const handleNumberMapping = useCallback(
@@ -100,7 +100,7 @@ export const Pagination = ({
        );
      }
    },
-    [maxPageNumber, pageNumber],
+    [maxPageNumber, pageNumber]
  );

  return (
--- a/src/components/scoped-access.cy.tsx
+++ b/src/components/scoped-access.cy.tsx
@@ -29,7 +29,7 @@ describe("<ScopedAccess>", () => {
    cy.mountTestProvider(
      <ScopedAccessTestWrapper scope={Scope.admin} user={user}>
        <H1>ScopedAccess: admin</H1>
-      </ScopedAccessTestWrapper>,
+      </ScopedAccessTestWrapper>
    );
    cy.get(".scope-div").should("exist");
  });
@@ -44,7 +44,7 @@ describe("<ScopedAccess>", () => {
    cy.mountTestProvider(
      <ScopedAccessTestWrapper scope={Scope.admin} user={user}>
        <H1>ScopedAccess: service_provider</H1>
-      </ScopedAccessTestWrapper>,
+      </ScopedAccessTestWrapper>
    );
    cy.get(".scope-div").should("not.exist");
  });
@@ -59,7 +59,7 @@ describe("<ScopedAccess>", () => {
    cy.mountTestProvider(
      <ScopedAccessTestWrapper scope={Scope.admin} user={user}>
        <H1>ScopedAccess: account</H1>
-      </ScopedAccessTestWrapper>,
+      </ScopedAccessTestWrapper>
    );
    cy.get(".scope-div").should("not.exist");
  });
--- a/src/components/search-filter/index.tsx
+++ b/src/components/search-filter/index.tsx
@@ -46,7 +46,7 @@ export const SearchFilter = ({
        setAppearance(false);
      }
    },
-    [setFilterValue],
+    [setFilterValue]
  );

  const handleActive = useCallback(() => {
--- a/src/components/select-filter.tsx
+++ b/src/components/select-filter.tsx
@@ -42,7 +42,7 @@ export const SelectFilter = ({
            setFilterValue(e.target.value);
            const queryFilter = createFilterString(
              e.target.value,
-              label as string,
+              label as string
            );
            setQueryFilter(queryFilter);

--- a/src/components/toast/index.tsx
+++ b/src/components/toast/index.tsx
@@ -23,6 +23,6 @@ export const Toast = ({ type, message }: ToastProps) => {
        {message}
      </div>
    </div>,
-    portal,
+    portal
  );
 };
--- a/src/constants/index.tsx
+++ b/src/constants/index.tsx
@@ -24,3 +24,4 @@ export const MSG_WEBHOOK_FIELDS = (
    <span>password</span> fields are required.
  </>
 );
+export const NOT_AVAILABLE_PREFIX = "NotAvalable";
--- a/src/containers/internal/navi/index.tsx
+++ b/src/containers/internal/navi/index.tsx
@@ -76,7 +76,7 @@ export const Navi = ({

  const naviByoFiltered = useMemo(() => {
    return naviByo.filter(
-      (item) => !item.acl || (item.acl && accessControl[item.acl]),
+      (item) => !item.acl || (item.acl && accessControl[item.acl])
    );
  }, [accessControl, currentServiceProvider]);

@@ -100,7 +100,7 @@ export const Navi = ({
        toastSuccess(
          <>
            Added new service provider <strong>{name}</strong>
-          </>,
+          </>
        );
        dispatch({ type: "serviceProviders" });
        setSid(json.sid);
@@ -123,7 +123,7 @@ export const Navi = ({
    setSid(getActiveSP());
    if (sid) {
      const serviceProvider = serviceProviders.find(
-        (sp) => sp.service_provider_sid === sid,
+        (sp) => sp.service_provider_sid === sid
      );

      if (serviceProvider) {
--- a/src/containers/internal/views/accounts/delete.tsx
+++ b/src/containers/internal/views/accounts/delete.tsx
@@ -75,19 +75,19 @@ export const DeleteAccount = ({
      getFetch<PhoneNumber[]>(API_PHONE_NUMBERS),
      getFetch<MSTeamsTenant[]>(API_MS_TEAMS_TENANTS),
      getFetch<ApiKey[]>(
-        `${API_BASE_URL}/Accounts/${account.account_sid}/ApiKeys`,
+        `${API_BASE_URL}/Accounts/${account.account_sid}/ApiKeys`
      ),
    ]).then(([appsRes, phonesRes, teamsRes, apiKeysRes]) => {
      if (!ignore) {
        const used = {
          apps: appsRes.json.filter(
-            (app) => app.account_sid === account.account_sid,
+            (app) => app.account_sid === account.account_sid
          ),
          phones: phonesRes.json.filter(
-            (phone) => phone.account_sid === account.account_sid,
+            (phone) => phone.account_sid === account.account_sid
          ),
          teams: teamsRes.json.filter(
-            (team) => team.account_sid === account.account_sid,
+            (team) => team.account_sid === account.account_sid
          ),
          apiKeys: apiKeysRes.json,
        };
--- a/src/containers/internal/views/accounts/edit-sip-realm.tsx
+++ b/src/containers/internal/views/accounts/edit-sip-realm.tsx
@@ -44,8 +44,8 @@ export const EditSipRealm = () => {
      getAvailability(`${name}.${userData?.account?.root_domain}`)
        .then(({ json }) =>
          setIsValidDomain(
-            Boolean(json.available) && hasValue(name) && name.length != 0,
-          ),
+            Boolean(json.available) && hasValue(name) && name.length != 0
+          )
        )
        .catch((error) => {
          setErrorMessage(error.msg);
--- a/src/containers/internal/views/accounts/edit.tsx
+++ b/src/containers/internal/views/accounts/edit.tsx
@@ -19,14 +19,14 @@ export const EditAccount = () => {
  const params = useParams();
  const user = useSelectState("user");
  const [data, refetch, error] = useApiData<Account>(
-    `Accounts/${params.account_sid}`,
+    `Accounts/${params.account_sid}`
  );
  const [limitsData, refetchLimits] = useApiData<Limit[]>(
-    `Accounts/${params.account_sid}/Limits`,
+    `Accounts/${params.account_sid}/Limits`
  );
  const [apps] = useApiData<Application[]>("Applications");
  const [ttsCache, ttsCacheFetcher] = useApiData<TtsCache>(
-    `Accounts/${params.account_sid}/TtsCache`,
+    `Accounts/${params.account_sid}/TtsCache`
  );

  useScopedRedirect(
@@ -36,7 +36,7 @@ export const EditAccount = () => {
      : ROUTE_INTERNAL_APPLICATIONS,
    user,
    "You do not have access to this resource",
-    data,
+    data
  );

  /** Handle error toast at top level... */
--- a/src/containers/internal/views/accounts/form.tsx
+++ b/src/containers/internal/views/accounts/form.tsx
@@ -28,8 +28,6 @@ import { ROUTE_INTERNAL_ACCOUNTS } from "src/router/routes";
 import {
  AUDIO_FORMAT_OPTIONS,
  BUCKET_VENDOR_AWS,
-  BUCKET_VENDOR_S3_COMPATIBLE,
-  BUCKET_VENDOR_AZURE,
  BUCKET_VENDOR_GOOGLE,
  BUCKET_VENDOR_OPTIONS,
  CRED_OK,
@@ -40,7 +38,6 @@ import {
  PlanType,
  USER_ACCOUNT,
  WEBHOOK_METHODS,
-  STRIPE_PUBLISHABLE_KEY,
 } from "src/api/constants";
 import { MSG_REQUIRED_FIELDS, MSG_WEBHOOK_FIELDS } from "src/constants";

@@ -86,14 +83,11 @@ export const AccountForm = ({
  const user = useSelectState("user");
  const currentServiceProvider = useSelectState("currentServiceProvider");
  const [accounts] = useApiData<Account[]>("Accounts");
-  // Dont get Invoices if the environment is self-hosted
-  const [invoice] = STRIPE_PUBLISHABLE_KEY
-    ? useApiData<Invoice>("Invoices")
-    : [undefined];
+  const [invoice] = useApiData<Invoice>("Invoices");
  const [userData] = useApiData<CurrentUserData>("Users/me");
  const [userCarriers] = useApiData<Carrier[]>(`VoipCarriers`);
  const [userSpeechs] = useApiData<SpeechCredential[]>(
-    `/Accounts/${params.account_sid}/SpeechCredentials`,
+    `/Accounts/${params.account_sid}/SpeechCredentials`
  );
  const [name, setName] = useState("");
  const [realm, setRealm] = useState("");
@@ -135,8 +129,6 @@ export const AccountForm = ({
    useState(false);
  const deleteMessageRef = useRef<HTMLInputElement | null>(null);
  const [isShowModalLoader, setIsShowModalLoader] = useState(false);
-  const [azureConnectionString, setAzureConnectionString] = useState("");
-  const [endpoint, setEndpoint] = useState("");

  /** This lets us map and render the same UI for each... */
  const webhooks = [
@@ -187,7 +179,7 @@ export const AccountForm = ({

    if (deleteMessage !== "delete my account") {
      toastError(
-        "You must type the delete message correctly in order to delete your account.",
+        "You must type the delete message correctly in order to delete your account."
      );
      if (
        deleteMessageRef.current &&
@@ -268,14 +260,6 @@ export const AccountForm = ({
      ...(bucketVendor === BUCKET_VENDOR_GOOGLE && {
        service_key: JSON.stringify(bucketGoogleServiceKey),
      }),
-      ...(bucketVendor === BUCKET_VENDOR_AZURE && {
-        connection_string: azureConnectionString,
-      }),
-      ...(bucketVendor === BUCKET_VENDOR_S3_COMPATIBLE && {
-        endpoint: endpoint,
-        access_key_id: bucketAccessKeyId,
-        secret_access_key: bucketSecretAccessKey,
-      }),
    };

    postAccountBucketCredentialTest(account?.data?.account_sid, cred).then(
@@ -285,7 +269,7 @@ export const AccountForm = ({
        } else {
          toastError(json.reason);
        }
-      },
+      }
    );
  };

@@ -310,7 +294,7 @@ export const AccountForm = ({
          return limit.quantity === ""
            ? deleteAccountLimit(sid, limit.category)
            : postAccountLimit(sid, limit);
-        }),
+        })
      )
        .then(() => {
          if (limits) {
@@ -361,18 +345,18 @@ export const AccountForm = ({
        filtered.find(
          (a) =>
            a.service_provider_sid !== account.data!.service_provider_sid &&
-            a.name === name,
+            a.name === name
        )
      ) {
        setMessage(
-          "The name you have entered is already in use on another one of your accounts.",
+          "The name you have entered is already in use on another one of your accounts."
        );
        return;
      }

      if (filtered.find((a) => a.sip_realm === realm)) {
        setMessage(
-          "The SIP Realm you have entered is already in use on another one of your accounts.",
+          "The SIP Realm you have entered is already in use on another one of your accounts."
        );
        return;
      }
@@ -407,23 +391,6 @@ export const AccountForm = ({
            ...(hasLength(bucketTags) && { tags: bucketTags }),
          },
        }),
-        ...(bucketVendor === BUCKET_VENDOR_AZURE && {
-          bucket_credential: {
-            vendor: bucketVendor || null,
-            name: bucketName || null,
-            connection_string: azureConnectionString || null,
-          },
-        }),
-        ...(bucketVendor === BUCKET_VENDOR_S3_COMPATIBLE && {
-          bucket_credential: {
-            vendor: bucketVendor || null,
-            endpoint: endpoint || null,
-            name: bucketName || null,
-            access_key_id: bucketAccessKeyId || null,
-            secret_access_key: bucketSecretAccessKey || null,
-            ...(hasLength(bucketTags) && { tags: bucketTags }),
-          },
-        }),
        ...(!bucketCredentialChecked && {
          record_all_calls: 0,
          bucket_credential: {
@@ -522,25 +489,17 @@ export const AccountForm = ({
      }
      if (account.data.bucket_credential?.secret_access_key) {
        setBucketSecretAccessKey(
-          account.data.bucket_credential?.secret_access_key,
+          account.data.bucket_credential?.secret_access_key
        );
      }
      if (account.data.bucket_credential?.region) {
        setBucketRegion(account.data.bucket_credential?.region);
      }
-      if (account.data.bucket_credential?.connection_string) {
-        setAzureConnectionString(
-          account.data.bucket_credential.connection_string,
-        );
-      }
-      if (account.data.bucket_credential?.endpoint) {
-        setEndpoint(account.data.bucket_credential.endpoint);
-      }
      if (account.data.record_all_calls) {
        setRecordAllCalls(account.data.record_all_calls ? true : false);
      }
      setBucketCredentialChecked(
-        hasValue(bucketVendor) && bucketVendor.length !== 0,
+        hasValue(bucketVendor) && bucketVendor.length !== 0
      );
      if (account.data.bucket_credential?.tags) {
        setBucketTags(account.data.bucket_credential?.tags);
@@ -552,11 +511,11 @@ export const AccountForm = ({
        setBucketGoogleServiceKey(tmpBucketGoogleServiceKey);
      } else if (account.data.bucket_credential?.service_key) {
        setBucketGoogleServiceKey(
-          JSON.parse(account.data.bucket_credential?.service_key),
+          JSON.parse(account.data.bucket_credential?.service_key)
        );
      }
      setInitialCheckRecordAllCall(
-        hasValue(bucketVendor) && bucketVendor.length !== 0,
+        hasValue(bucketVendor) && bucketVendor.length !== 0
      );
    }
  }, [account]);
@@ -576,14 +535,14 @@ export const AccountForm = ({
          : { quantity: 0 };
        const callSessionRecord = products
          ? products.find(
-              (item) => item.name === "concurrent call session",
+              (item) => item.name === "concurrent call session"
            ) || { quantity: 0 }
          : { quantity: 0 };
        const quantity =
          (userData.account.device_to_call_ratio || 0) *
            (callSessionRecord.quantity || 0) +
          (registeredDeviceRecord.quantity || 0);
-        const { trial_end_date, is_active } = userData.account || {};
+        const { trial_end_date } = userData.account || {};
        switch (pType) {
          case PlanType.TRIAL:
            setSubscriptionDescription(
@@ -592,10 +551,10 @@ export const AccountForm = ({
              } simultaneous calls and ${quantity} registered devices.${
                trial_end_date
                  ? ` Your free trial will end on ${dayjs(
-                      trial_end_date,
+                      trial_end_date
                    ).format("MMM DD, YYYY")}.`
                  : ""
-              }`,
+              }`
            );
            break;
          case PlanType.PAID:
@@ -607,21 +566,15 @@ export const AccountForm = ({
                  CurrencySymbol[invoice.currency || "usd"]
                }${(invoice.total || 0) / 100} on ${dayjs
                  .unix(Number(invoice.next_payment_attempt))
-                  .format("MMM DD, YYYY")}.`,
+                  .format("MMM DD, YYYY")}.`
              );
            }

            break;
          case PlanType.FREE:
-            if (is_active) {
-              setSubscriptionDescription(
-                `You are currently on the Free plan (trial period expired). You are limited to ${callSessionRecord.quantity} simultaneous calls and ${quantity} registered devices`,
-              );
-            } else {
-              setSubscriptionDescription(
-                "Your free trial has expired.  Please upgrade your subscription to a paid plan to continue service",
-              );
-            }
+            setSubscriptionDescription(
+              `You are currently on the Free plan (trial period expired). You are limited to ${callSessionRecord.quantity} simultaneous calls and ${quantity} registered devices`
+            );
            break;
        }
        // Make sure Account page is alway scroll to top to see subscription
@@ -633,10 +586,10 @@ export const AccountForm = ({
  const updateBucketTags = (
    index: number,
    key: string,
-    value: (typeof bucketTags)[number][keyof AwsTag],
+    value: typeof bucketTags[number][keyof AwsTag]
  ) => {
    setBucketTags(
-      bucketTags.map((b, i) => (i === index ? { ...b, [key]: value } : b)),
+      bucketTags.map((b, i) => (i === index ? { ...b, [key]: value } : b))
    );
  };

@@ -703,9 +656,7 @@ export const AccountForm = ({
          {isDeleteAccount && (
            <Section slim>
              <form
-                className={`form form--internal ${
-                  !account?.data && account?.refetch ? "form--blur" : ""
-                }`}
+                className="form form--internal"
                onSubmit={handleDeleteAccount}
              >
                <fieldset>
@@ -910,7 +861,7 @@ export const AccountForm = ({
                    defaultOption="None"
                    application={[application.stateVal, application.stateSet]}
                    applications={apps.filter(
-                      (app) => app.account_sid === account.data!.account_sid,
+                      (app) => app.account_sid === account.data!.account_sid
                    )}
                  />
                </fieldset>
@@ -918,7 +869,7 @@ export const AccountForm = ({
            })}
          {webhooks.map((webhook) => {
            const selectOptions = WEBHOOK_METHODS.filter((wm) =>
-              webhook.prefix === "queue_event_hook" ? wm.name !== "GET" : true,
+              webhook.prefix === "queue_event_hook" ? wm.name !== "GET" : true
            );

            return (
@@ -1061,71 +1012,43 @@ export const AccountForm = ({
                      }}
                    />
                  </div>
-                  {bucketVendor === BUCKET_VENDOR_S3_COMPATIBLE && (
-                    <>
-                      <label htmlFor="endpoint">
-                        Endpoint URI<span>*</span>
-                      </label>
-                      <input
-                        id="endpoint"
-                        required
-                        type="text"
-                        name="endpoint"
-                        placeholder="https://domain.com"
-                        value={endpoint}
-                        onChange={(e) => {
-                          setEndpoint(e.target.value);
-                        }}
-                      />
-                    </>
-                  )}
                  <label htmlFor="bucket_name">
-                    {bucketVendor === BUCKET_VENDOR_AZURE
-                      ? "Container"
-                      : "Bucket"}{" "}
-                    Name<span>*</span>
+                    Bucket Name<span>*</span>
                  </label>
                  <input
                    id="bucket_name"
                    required
                    type="text"
                    name="bucket_name"
-                    placeholder={
-                      bucketVendor === BUCKET_VENDOR_AZURE
-                        ? "Container"
-                        : "Bucket"
-                    }
+                    placeholder="Bucket"
                    value={bucketName}
                    onChange={(e) => {
                      setBucketName(e.target.value);
                      setTmpBucketName(e.target.value);
                    }}
                  />
-                  {(bucketVendor === BUCKET_VENDOR_AWS ||
-                    bucketVendor === BUCKET_VENDOR_S3_COMPATIBLE) && (
+                  {bucketVendor === BUCKET_VENDOR_AWS && (
                    <>
-                      {bucketVendor === BUCKET_VENDOR_AWS &&
-                        regions &&
-                        regions["aws"] && (
-                          <>
-                            <label htmlFor="bucket_aws_region">
-                              Region<span>*</span>
-                            </label>
-                            <Selector
-                              id="region"
-                              name="region"
-                              value={bucketRegion}
-                              required
-                              options={[
-                                {
-                                  name: "Select a region",
-                                  value: "",
-                                },
-                              ].concat(regions["aws"])}
-                              onChange={(e) => setBucketRegion(e.target.value)}
-                            />
-                          </>
-                        )}
+                      {regions && regions["aws"] && (
+                        <>
+                          <label htmlFor="bucket_aws_region">
+                            Region<span>*</span>
+                          </label>
+                          <Selector
+                            id="region"
+                            name="region"
+                            value={bucketRegion}
+                            required
+                            options={[
+                              {
+                                name: "Select a region",
+                                value: "",
+                              },
+                            ].concat(regions["aws"])}
+                            onChange={(e) => setBucketRegion(e.target.value)}
+                          />
+                        </>
+                      )}
                      <label htmlFor="bucket_aws_access_key">
                        Access key ID<span>*</span>
                      </label>
@@ -1175,43 +1098,22 @@ export const AccountForm = ({
                          <code>
                            {JSON.stringify(
                              getObscuredGoogleServiceKey(
-                                bucketGoogleServiceKey,
+                                bucketGoogleServiceKey
                              ),
                              null,
-                              2,
+                              2
                            )}
                          </code>
                        </pre>
                      )}
                    </>
                  )}
-                  {bucketVendor === BUCKET_VENDOR_AZURE && (
-                    <>
-                      <label htmlFor="bucket_azure_connection_string">
-                        Connection String<span>*</span>
-                      </label>
-                      <input
-                        id="bucket_azure_connection_string"
-                        required
-                        type="text"
-                        name="bucket_azure_connection_string"
-                        placeholder="Connection string"
-                        value={azureConnectionString}
-                        onChange={(e) => {
-                          setAzureConnectionString(e.target.value);
-                        }}
-                      />
-                    </>
-                  )}
                  <label htmlFor="aws_s3_tags">
-                    {bucketVendor === BUCKET_VENDOR_AWS ||
-                    bucketVendor === BUCKET_VENDOR_S3_COMPATIBLE
+                    {bucketVendor === BUCKET_VENDOR_AWS
                      ? "S3"
                      : bucketVendor === BUCKET_VENDOR_GOOGLE
-                        ? "Google Cloud Storage"
-                        : bucketVendor === BUCKET_VENDOR_AZURE
-                          ? "Azure Cloud Storage"
-                          : ""}{" "}
+                      ? "Google Cloud Storage"
+                      : ""}{" "}
                    Tags
                  </label>
                  {hasLength(bucketTags) &&
@@ -1251,7 +1153,7 @@ export const AccountForm = ({
                          type="button"
                          onClick={() => {
                            setBucketTags(
-                              bucketTags.filter((g2, i2) => i2 !== i),
+                              bucketTags.filter((g2, i2) => i2 !== i)
                            );
                          }}
                        >
@@ -1282,13 +1184,7 @@ export const AccountForm = ({
                        (bucketVendor === BUCKET_VENDOR_AWS &&
                          (!bucketAccessKeyId || !bucketSecretAccessKey)) ||
                        (bucketVendor === BUCKET_VENDOR_GOOGLE &&
-                          !bucketGoogleServiceKey) ||
-                        (bucketVendor === BUCKET_VENDOR_AZURE &&
-                          !azureConnectionString) ||
-                        (bucketVendor === BUCKET_VENDOR_S3_COMPATIBLE &&
-                          (!endpoint ||
-                            !bucketAccessKeyId ||
-                            !bucketSecretAccessKey))
+                          !bucketGoogleServiceKey)
                      }
                    >
                      Test
--- a/src/containers/internal/views/accounts/index.tsx
+++ b/src/containers/internal/views/accounts/index.tsx
@@ -30,7 +30,7 @@ export const Accounts = () => {
    Scope.service_provider,
    `${ROUTE_INTERNAL_ACCOUNTS}/${user?.account_sid}/edit`,
    user,
-    "You do not have permissions to manage all accounts",
+    "You do not have permissions to manage all accounts"
  );

  const handleDelete = () => {
@@ -40,7 +40,7 @@ export const Accounts = () => {
        user.account_sid !== account.account_sid
      ) {
        toastError(
-          "You do not have permissions to make changes to this Account",
+          "You do not have permissions to make changes to this Account"
        );
        return;
      }
@@ -52,7 +52,7 @@ export const Accounts = () => {
          toastSuccess(
            <>
              Deleted account <strong>{account.name}</strong>
-            </>,
+            </>
          );
        })
        .catch((error) => {
@@ -71,7 +71,7 @@ export const Accounts = () => {
          </Icon>
        </Link>
      </section>
-      <section className="filters filters--multi">
+      <section className="filters filters--spaced">
        <SearchFilter
          placeholder="Filter accounts"
          filter={[filter, setFilter]}
--- a/src/containers/internal/views/accounts/manage-payment-form.tsx
+++ b/src/containers/internal/views/accounts/manage-payment-form.tsx
@@ -35,7 +35,7 @@ export const ManagePaymentForm = () => {
        if (json.status === "success") {
          toastSuccess("Payment completed successfully");
          navigate(
-            `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`,
+            `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
          );
        } else if (json.status === "action required") {
          if (stripe) {
@@ -148,11 +148,7 @@ export const ManagePaymentForm = () => {
            <div className="grid__row">
              <div></div>
              <div>
-                <PaymentElement
-                  options={{
-                    paymentMethodOrder: ["card"],
-                  }}
-                />
+                <PaymentElement />
              </div>
            </div>
          </div>
--- a/src/containers/internal/views/accounts/subscription-form.tsx
+++ b/src/containers/internal/views/accounts/subscription-form.tsx
@@ -33,7 +33,7 @@ const SubscriptionForm = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const isModifySubscription = location.pathname.includes(
-    "modify-subscription",
+    "modify-subscription"
  );
  const [billingCharge, setBillingCharge] = useState<Subscription | null>(null);
  const [isShowModalLoader, setIsShowModalLoader] = useState(false);
@@ -69,7 +69,7 @@ const SubscriptionForm = () => {
        if (json.status === "success") {
          toastSuccess("Payment completed successfully");
          navigate(
-            `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`,
+            `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
          );
        } else if (json.status === "action required") {
          if (stripe) {
@@ -176,7 +176,7 @@ const SubscriptionForm = () => {
      .then(() => {
        toastSuccess("Downgrade to free plan completed successfully");
        navigate(
-          `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`,
+          `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
        );
      })
      .catch((error) => {
@@ -201,16 +201,16 @@ const SubscriptionForm = () => {
    })
      .then(() => {
        toastSuccess(
-          "Your subscription capacity has been successfully modified.",
+          "Your subscription capacity has been successfully modified."
        );
        navigate(
-          `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`,
+          `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
        );
      })
      .catch(() => {
        toastError(
          `The additional capacity you that you requested could not be granted due to a failure processing payment.
-          Please configure a valid credit card for your account and the upgrade will be automatically processed`,
+          Please configure a valid credit card for your account and the upgrade will be automatically processed`
        );
      })
      .finally(() => {
@@ -254,18 +254,18 @@ const SubscriptionForm = () => {
    },
  ]);
  const [originalServiceData, setOriginalServiceData] = useState<ServiceData[]>(
-    [],
+    []
  );

  const initFeesAndCost = (priceData: PriceInfo[]) => {
    serviceData.forEach((service) => {
      const record = priceData.find(
-        (item) => item.category === service.category,
+        (item) => item.category === service.category
      );

      if (record) {
        const price = record.prices.find(
-          (item) => item.currency === service.currency,
+          (item) => item.currency === service.currency
        );

        if (price) {
@@ -299,7 +299,7 @@ const SubscriptionForm = () => {

  const getServicePrice = (
    service: ServiceData,
-    capacity: number,
+    capacity: number
  ): [number, string, number] => {
    let fees = 0;
    let feesLabel = "";
@@ -311,7 +311,7 @@ const SubscriptionForm = () => {
    } else if (service.billing_scheme === "tiered") {
      const filteredTiers = service.tiers
        ? service.tiers.filter(
-            (item) => !item.up_to || item.up_to >= capacityNum,
+            (item) => !item.up_to || item.up_to >= capacityNum
          )
        : [];
      if (filteredTiers.length) {
@@ -360,7 +360,7 @@ const SubscriptionForm = () => {
  const updateServiceData = (
    index: number,
    key: string,
-    value: (typeof serviceData)[number][keyof ServiceData],
+    value: typeof serviceData[number][keyof ServiceData]
  ) => {
    setServiceData(
      serviceData.map((g, i) =>
@@ -370,8 +370,8 @@ const SubscriptionForm = () => {
              [key]: value,
              ...(key === "capacity" && { cost: Number(value) * g.fees }),
            }
-          : g,
-      ),
+          : g
+      )
    );
  };

@@ -389,7 +389,7 @@ const SubscriptionForm = () => {
    if (isModifySubscription && originalServiceData.length > 0) {
      setIsDisableSubmitButton(
        serviceData[0].capacity === originalServiceData[0].capacity &&
-          serviceData[1].capacity === originalServiceData[1].capacity,
+          serviceData[1].capacity === originalServiceData[1].capacity
      );
    }
    setTotal(serviceData.reduce((res, service) => res + service.cost || 0, 0));
@@ -506,7 +506,7 @@ const SubscriptionForm = () => {
                            updateServiceData(
                              idx,
                              "capacity",
-                              e.target.value ? Number(e.target.value) : "",
+                              e.target.value ? Number(e.target.value) : ""
                            );
                          }}
                        />
@@ -577,11 +577,7 @@ const SubscriptionForm = () => {
                <div className="grid__row">
                  <div></div>
                  <div>
-                    <PaymentElement
-                      options={{
-                        paymentMethodOrder: ["card"],
-                      }}
-                    />
+                    <PaymentElement />
                  </div>
                </div>
              </fieldset>
--- a/src/containers/internal/views/accounts/subscription.tsx
+++ b/src/containers/internal/views/accounts/subscription.tsx
@@ -1,16 +1,11 @@
 import React from "react";
-import {
-  ENABLE_HOSTED_SYSTEM,
-  STRIPE_PUBLISHABLE_KEY,
-} from "src/api/constants";
+import { STRIPE_PUBLISHABLE_KEY } from "src/api/constants";

 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import SubscriptionForm from "./subscription-form";

-export const stripePromise = ENABLE_HOSTED_SYSTEM
-  ? loadStripe(STRIPE_PUBLISHABLE_KEY)
-  : null;
+export const stripePromise = loadStripe(STRIPE_PUBLISHABLE_KEY);

 export const Subscription = () => {
  return (
--- a/src/containers/internal/views/applications/delete.tsx
+++ b/src/containers/internal/views/applications/delete.tsx
@@ -66,10 +66,10 @@ export const DeleteApplication = ({
            (account) =>
              account.device_calling_application_sid ===
                application.application_sid ||
-              account.siprec_hook_sid === application.application_sid,
+              account.siprec_hook_sid === application.application_sid
          ),
          teams: msteamRes.json.filter(
-            (team) => team.application_sid === application.application_sid,
+            (team) => team.application_sid === application.application_sid
          ),
        };
        const deletable =
--- a/src/containers/internal/views/applications/edit.tsx
+++ b/src/containers/internal/views/applications/edit.tsx
@@ -15,7 +15,7 @@ export const EditApplication = () => {
  const params = useParams();
  const user = useSelectState("user");
  const [data, refetch, error] = useApiData<Application>(
-    `Applications/${params.application_sid}`,
+    `Applications/${params.application_sid}`
  );

  useScopedRedirect(
@@ -23,7 +23,7 @@ export const EditApplication = () => {
    ROUTE_INTERNAL_APPLICATIONS,
    user,
    "You do not have access to this resource",
-    data,
+    data
  );

  useEffect(() => {
--- a/src/containers/internal/views/applications/form.tsx
+++ b/src/containers/internal/views/applications/form.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Button, ButtonGroup, MS } from "@jambonz/ui-kit";
 import { Link, useNavigate } from "react-router-dom";

@@ -16,6 +16,11 @@ import {
  LANG_EN_US,
  VENDOR_GOOGLE,
  LANG_EN_US_STANDARD_C,
+  VENDOR_AWS,
+  VENDOR_WELLSAID,
+  useSpeechVendors,
+  VENDOR_DEEPGRAM,
+  VENDOR_SONIOX,
  VENDOR_CUSTOM,
 } from "src/vendor";
 import {
@@ -37,8 +42,10 @@ import {
 import type {
  RecognizerVendors,
  SynthesisVendors,
+  Voice,
+  VoiceLanguage,
+  Language,
  VendorOptions,
-  LabelOptions,
 } from "src/vendor/types";

 import type {
@@ -52,7 +59,6 @@ import type {
 import { MSG_REQUIRED_FIELDS, MSG_WEBHOOK_FIELDS } from "src/constants";
 import { hasLength, isUserAccountScope, useRedirect } from "src/utils";
 import { setAccountFilter, setLocation } from "src/store/localStore";
-import SpeechProviderSelection from "./speech-selection";

 type ApplicationFormProps = {
  application?: UseApiDataMap<Application>;
@@ -60,8 +66,8 @@ type ApplicationFormProps = {

 export const ApplicationForm = ({ application }: ApplicationFormProps) => {
  const navigate = useNavigate();
+  const { synthesis, recognizers } = useSpeechVendors();
  const user = useSelectState("user");
-  const currentServiceProvider = useSelectState("currentServiceProvider");
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
  const [applications] = useApiData<Application[]>("Applications");
  const [applicationName, setApplicationName] = useState("");
@@ -92,42 +98,10 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
  const [message, setMessage] = useState("");
  const [apiUrl, setApiUrl] = useState("");
  const [credentials] = useApiData<SpeechCredential[]>(apiUrl);
-  const [ttsVendorOptions, setttsVendorOptions] =
-    useState<VendorOptions[]>(vendors);
-  const [sttVendorOptions, setSttVendorOptions] =
-    useState<VendorOptions[]>(vendors);
-  const [recogLabel, setRecogLabel] = useState("");
-  const [ttsLabelOptions, setTtsLabelOptions] = useState<LabelOptions[]>([]);
-  const [sttLabelOptions, setSttLabelOptions] = useState<LabelOptions[]>([]);
-  const [fallbackTtsLabelOptions, setFallbackTtsLabelOptions] = useState<
-    LabelOptions[]
-  >([]);
-  const [fallbackSttLabelOptions, setFallbackSttLabelOptions] = useState<
-    LabelOptions[]
-  >([]);
-  const [synthLabel, setSynthLabel] = useState("");
+  const [softTtsVendor, setSoftTtsVendor] = useState<VendorOptions[]>(vendors);
+  const [softSttVendor, setSoftSttVendor] = useState<VendorOptions[]>(vendors);
  const [recordAllCalls, setRecordAllCalls] = useState(false);

-  const [useForFallbackSpeech, setUseForFallbackSpeech] = useState(false);
-  const [fallbackSpeechSynthsisVendor, setFallbackSpeechSynthsisVendor] =
-    useState<keyof SynthesisVendors>(VENDOR_GOOGLE);
-  const [fallbackSpeechSynthsisLanguage, setFallbackSpeechSynthsisLanguage] =
-    useState(LANG_EN_US);
-  const [fallbackSpeechSynthsisVoice, setFallbackSpeechSynthsisVoice] =
-    useState(LANG_EN_US_STANDARD_C);
-  const [fallbackSpeechSynthsisLabel, setFallbackSpeechSynthsisLabel] =
-    useState("");
-  const [fallbackSpeechRecognizerVendor, setFallbackSpeechRecognizerVendor] =
-    useState<keyof RecognizerVendors>(VENDOR_GOOGLE);
-  const [
-    fallbackSpeechRecognizerLanguage,
-    setFallbackSpeechRecognizerLanguage,
-  ] = useState(LANG_EN_US);
-  const [fallbackSpeechRecognizerLabel, setFallbackSpeechRecognizerLabel] =
-    useState("");
-  const [initalCheckFallbackSpeech, setInitalCheckFallbackSpeech] =
-    useState(false);
-
  /** This lets us map and render the same UI for each... */
  const webhooks = [
    {
@@ -165,7 +139,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
  useRedirect<Account>(
    accounts,
    ROUTE_INTERNAL_ACCOUNTS,
-    "You must create an account before you can create an application.",
+    "You must create an account before you can create an application."
  );

  const handleSubmit = (e: React.FormEvent) => {
@@ -173,7 +147,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {

    if (isUserAccountScope(accountSid, user)) {
      toastError(
-        "You do not have permissions to make changes to these Speech Credentials",
+        "You do not have permissions to make changes to these Speech Credentials"
      );
      return;
    }
@@ -187,17 +161,17 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
            a.name === applicationName &&
            (!application ||
              !application.data ||
-              a.application_sid !== application.data.application_sid),
+              a.application_sid !== application.data.application_sid)
        )
      ) {
        setMessage(
-          "The name you have entered is already in use on another one of your applications.",
+          "The name you have entered is already in use on another one of your applications."
        );
        return;
      }
    }

-    const payload: Partial<Application> = {
+    const payload = {
      name: applicationName,
      app_json: applicationJson || null,
      call_hook: callWebhook || null,
@@ -206,34 +180,10 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      call_status_hook: statusWebhook || null,
      speech_synthesis_vendor: synthVendor || null,
      speech_synthesis_language: synthLang || null,
-      speech_synthesis_label: synthLabel || null,
      speech_synthesis_voice: synthVoice || null,
      speech_recognizer_vendor: recogVendor || null,
      speech_recognizer_language: recogLang || null,
-      speech_recognizer_label: recogLabel || null,
      record_all_calls: recordAllCalls ? 1 : 0,
-      use_for_fallback_speech: useForFallbackSpeech ? 1 : 0,
-      fallback_speech_synthesis_vendor: useForFallbackSpeech
-        ? fallbackSpeechSynthsisVendor || null
-        : null,
-      fallback_speech_synthesis_language: useForFallbackSpeech
-        ? fallbackSpeechSynthsisLanguage || null
-        : null,
-      fallback_speech_synthesis_voice: useForFallbackSpeech
-        ? fallbackSpeechSynthsisVoice || null
-        : null,
-      fallback_speech_synthesis_label: useForFallbackSpeech
-        ? fallbackSpeechSynthsisLabel || null
-        : null,
-      fallback_speech_recognizer_vendor: useForFallbackSpeech
-        ? fallbackSpeechRecognizerVendor || null
-        : null,
-      fallback_speech_recognizer_language: useForFallbackSpeech
-        ? fallbackSpeechRecognizerLanguage || null
-        : null,
-      fallback_speech_recognizer_label: useForFallbackSpeech
-        ? fallbackSpeechRecognizerLabel || null
-        : null,
    };

    if (application && application.data) {
@@ -242,7 +192,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
          application.refetch();
          toastSuccess("Application updated successfully");
          navigate(
-            `${ROUTE_INTERNAL_APPLICATIONS}/${application.data?.application_sid}/edit`,
+            `${ROUTE_INTERNAL_APPLICATIONS}/${application.data?.application_sid}/edit`
          );
        })
        .catch((error) => {
@@ -261,7 +211,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
    }
  };

-  useMemo(() => {
+  useEffect(() => {
    if (credentials && hasLength(credentials)) {
      const v = credentials
        .filter((tv) => tv.vendor.startsWith(VENDOR_CUSTOM) && tv.use_for_tts)
@@ -271,9 +221,9 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
              tv.vendor.substring(VENDOR_CUSTOM.length + 1) +
              ` (${VENDOR_CUSTOM})`,
            value: tv.vendor,
-          }),
+          })
        );
-      setttsVendorOptions(vendors.concat(v));
+      setSoftTtsVendor(vendors.concat(v));

      const v2 = credentials
        .filter((tv) => tv.vendor.startsWith(VENDOR_CUSTOM) && tv.use_for_stt)
@@ -283,102 +233,11 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
              tv.vendor.substring(VENDOR_CUSTOM.length + 1) +
              ` (${VENDOR_CUSTOM})`,
            value: tv.vendor,
-          }),
+          })
        );
-      setSttVendorOptions(vendors.concat(v2));
-
-      const noneLabelObject = {
-        name: "None",
-        value: "",
-      };
-
-      let c1 = credentials.filter(
-        (c) =>
-          c.vendor === synthVendor &&
-          (!c.account_sid || c.account_sid === accountSid) &&
-          c.use_for_tts,
-      );
-      let c2 = c1
-        .filter((c) => c.label)
-        .map((c) =>
-          Object.assign({
-            name: c.label,
-            value: c.label,
-          }),
-        );
-
-      setTtsLabelOptions(
-        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2,
-      );
-
-      c1 = fallbackSpeechSynthsisVendor
-        ? credentials.filter(
-            (c) =>
-              c.vendor === fallbackSpeechSynthsisVendor &&
-              (!c.account_sid || c.account_sid === accountSid) &&
-              c.use_for_tts,
-          )
-        : [];
-
-      c2 = c1
-        .filter((c) => c.label)
-        .map((c) =>
-          Object.assign({
-            name: c.label,
-            value: c.label,
-          }),
-        );
-      setFallbackTtsLabelOptions(
-        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2,
-      );
-
-      c1 = credentials.filter(
-        (c) =>
-          c.vendor === recogVendor &&
-          (!c.account_sid || c.account_sid === accountSid) &&
-          c.use_for_stt,
-      );
-      c2 = c1
-        .filter((c) => c.label)
-        .map((c) =>
-          Object.assign({
-            name: c.label,
-            value: c.label,
-          }),
-        );
-
-      setSttLabelOptions(
-        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2,
-      );
-
-      c1 = fallbackSpeechRecognizerVendor
-        ? credentials.filter(
-            (c) =>
-              c.vendor === fallbackSpeechRecognizerVendor &&
-              (!c.account_sid || c.account_sid === accountSid) &&
-              c.use_for_stt,
-          )
-        : [];
-      c2 = c1
-        .filter((c) => c.label)
-        .map((c) =>
-          Object.assign({
-            name: c.label,
-            value: c.label,
-          }),
-        );
-
-      setFallbackSttLabelOptions(
-        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2,
-      );
+      setSoftSttVendor(vendors.concat(v2));
    }
-  }, [
-    credentials,
-    synthVendor,
-    recogVendor,
-    fallbackSpeechRecognizerVendor,
-    fallbackSpeechSynthsisVendor,
-  ]);
+  }, [credentials]);

  useEffect(() => {
    if (accountSid) {
@@ -386,53 +245,6 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
    }
  }, [accountSid]);

-  useEffect(() => {
-    let label: string;
-    // Synthesis Label
-    label = application?.data?.speech_synthesis_label || "";
-    if (ttsLabelOptions && !ttsLabelOptions.find((l) => l.value === label)) {
-      label = ttsLabelOptions.length ? ttsLabelOptions[0].value : "";
-    }
-    setSynthLabel(label);
-
-    // fallback Synthesis Label
-    label = application?.data?.fallback_speech_synthesis_label || "";
-    if (
-      fallbackTtsLabelOptions &&
-      !fallbackTtsLabelOptions.find((l) => l.value === label)
-    ) {
-      label = fallbackTtsLabelOptions.length
-        ? fallbackTtsLabelOptions[0].value
-        : "";
-    }
-    setFallbackSpeechSynthsisLabel(label);
-
-    // regconizer label
-    label = application?.data?.speech_recognizer_label || "";
-    if (sttLabelOptions && !sttLabelOptions.find((l) => l.value === label)) {
-      label = sttLabelOptions.length ? sttLabelOptions[0].value : "";
-    }
-    setRecogLabel(label);
-
-    // fallback regconizer label
-    label = application?.data?.fallback_speech_recognizer_label || "";
-    if (
-      fallbackSttLabelOptions &&
-      !fallbackSttLabelOptions.find((l) => l.value === label)
-    ) {
-      label = fallbackSttLabelOptions.length
-        ? fallbackSttLabelOptions[0].value
-        : "";
-    }
-    setFallbackSpeechRecognizerLabel(label);
-  }, [
-    ttsLabelOptions,
-    sttLabelOptions,
-    fallbackTtsLabelOptions,
-    fallbackSttLabelOptions,
-    application,
-  ]);
-
  useEffect(() => {
    setLocation();
    if (application && application.data) {
@@ -444,7 +256,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      setTmpApplicationJson(applicationJson);
      setInitialApplicationJson(
        application.data.app_json != undefined &&
-          application.data.app_json.length !== 0,
+          application.data.app_json.length !== 0
      );

      if (application.data.call_hook) {
@@ -491,12 +303,12 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {

      if (application.data.speech_synthesis_vendor)
        setSynthVendor(
-          application.data.speech_synthesis_vendor as keyof SynthesisVendors,
+          application.data.speech_synthesis_vendor as keyof SynthesisVendors
        );

      if (application.data.speech_synthesis_language)
        setSynthLang(
-          application.data.speech_synthesis_language as keyof RecognizerVendors,
+          application.data.speech_synthesis_language as keyof RecognizerVendors
        );

      if (application.data.speech_synthesis_voice)
@@ -504,89 +316,17 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {

      if (application.data.speech_recognizer_vendor)
        setRecogVendor(
-          application.data.speech_recognizer_vendor as keyof RecognizerVendors,
+          application.data.speech_recognizer_vendor as keyof RecognizerVendors
        );

      if (application.data.speech_recognizer_language)
        setRecogLang(application.data.speech_recognizer_language);
-
-      if (application.data.use_for_fallback_speech) {
-        setUseForFallbackSpeech(application.data.use_for_fallback_speech > 0);
-        setInitalCheckFallbackSpeech(
-          application.data.use_for_fallback_speech > 0,
-        );
-      }
-      if (application.data.fallback_speech_recognizer_vendor) {
-        setFallbackSpeechRecognizerVendor(
-          application.data
-            .fallback_speech_recognizer_vendor as keyof RecognizerVendors,
-        );
-      }
-      if (application.data.fallback_speech_recognizer_language) {
-        setFallbackSpeechRecognizerLanguage(
-          application.data.fallback_speech_recognizer_language,
-        );
-      }
-
-      if (application.data.fallback_speech_synthesis_vendor) {
-        setFallbackSpeechSynthsisVendor(
-          application.data
-            .fallback_speech_synthesis_vendor as keyof SynthesisVendors,
-        );
-      }
-      if (application.data.fallback_speech_synthesis_language) {
-        setFallbackSpeechSynthsisLanguage(
-          application.data.fallback_speech_synthesis_language,
-        );
-      }
-      if (application.data.fallback_speech_synthesis_voice) {
-        setFallbackSpeechSynthsisVoice(
-          application.data.fallback_speech_synthesis_voice,
-        );
-      }
    }
  }, [application]);

-  const swapPrimaryAndfalloverSpeech = () => {
-    let tmp;
-
-    tmp = synthVendor;
-    setSynthVendor(fallbackSpeechSynthsisVendor);
-    setFallbackSpeechSynthsisVendor(tmp);
-
-    tmp = synthLang;
-    setSynthLang(fallbackSpeechSynthsisLanguage);
-    setFallbackSpeechSynthsisLanguage(synthLang);
-
-    tmp = synthVoice;
-    setSynthVoice(fallbackSpeechSynthsisVoice);
-    setFallbackSpeechSynthsisVoice(tmp);
-
-    tmp = synthLabel;
-    setSynthLabel(fallbackSpeechSynthsisLabel);
-    setFallbackSpeechSynthsisLabel(tmp);
-
-    tmp = recogVendor;
-    setRecogVendor(fallbackSpeechRecognizerVendor);
-    setFallbackSpeechRecognizerVendor(tmp);
-
-    tmp = recogLang;
-    setRecogLang(fallbackSpeechRecognizerLanguage);
-    setFallbackSpeechRecognizerLanguage(tmp);
-
-    tmp = recogLabel;
-    setRecogLabel(fallbackSpeechRecognizerLabel);
-    setFallbackSpeechRecognizerLabel(tmp);
-  };
-
  return (
    <Section slim>
-      <form
-        className={`form form--internal ${
-          !application?.data && application?.refetch ? "form--blur" : ""
-        }`}
-        onSubmit={handleSubmit}
-      >
+      <form className="form form--internal" onSubmit={handleSubmit}>
        <fieldset>
          <MS>{MSG_REQUIRED_FIELDS}</MS>
        </fieldset>
@@ -710,85 +450,216 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
            </fieldset>
          );
        })}
-        <SpeechProviderSelection
-          serviceProviderSid={
-            currentServiceProvider?.service_provider_sid || ""
-          }
-          accountSid={accountSid}
-          credentials={credentials}
-          ttsVendor={[synthVendor, setSynthVendor]}
-          ttsVendorOptions={ttsVendorOptions}
-          ttsVoice={[synthVoice, setSynthVoice]}
-          ttsLang={[synthLang, setSynthLang]}
-          ttsLabelOptions={ttsLabelOptions}
-          ttsLabel={[synthLabel, setSynthLabel]}
-          sttVendor={[recogVendor, setRecogVendor]}
-          sttVendorOptions={sttVendorOptions}
-          sttLang={[recogLang, setRecogLang]}
-          sttLabelOptions={sttLabelOptions}
-          sttLabel={[recogLabel, setRecogLabel]}
-        />
+        {synthesis && (
+          <fieldset>
+            <label htmlFor="synthesis_vendor">Speech synthesis vendor</label>
+            <Selector
+              id="synthesis_vendor"
+              name="synthesis_vendor"
+              value={synthVendor}
+              options={softTtsVendor.filter(
+                (vendor) =>
+                  vendor.value != VENDOR_DEEPGRAM &&
+                  vendor.value != VENDOR_SONIOX &&
+                  vendor.value !== VENDOR_CUSTOM
+              )}
+              onChange={(e) => {
+                const vendor = e.target.value as keyof SynthesisVendors;
+                setSynthVendor(vendor);

-        <fieldset>
-          <Checkzone
-            hidden
-            name="cz_fallback_speech"
-            label="Use a fallback speech vendor if primary fails"
-            initialCheck={initalCheckFallbackSpeech}
-            handleChecked={(e) => {
-              setUseForFallbackSpeech(e.target.checked);
-            }}
-          >
-            <SpeechProviderSelection
-              serviceProviderSid={
-                currentServiceProvider?.service_provider_sid || ""
-              }
-              accountSid={accountSid}
-              credentials={credentials}
-              ttsVendor={[
-                fallbackSpeechSynthsisVendor,
-                setFallbackSpeechSynthsisVendor,
-              ]}
-              ttsVendorOptions={ttsVendorOptions}
-              ttsVoice={[
-                fallbackSpeechSynthsisVoice,
-                setFallbackSpeechSynthsisVoice,
-              ]}
-              ttsLang={[
-                fallbackSpeechSynthsisLanguage,
-                setFallbackSpeechSynthsisLanguage,
-              ]}
-              ttsLabelOptions={fallbackTtsLabelOptions}
-              ttsLabel={[
-                fallbackSpeechSynthsisLabel,
-                setFallbackSpeechSynthsisLabel,
-              ]}
-              sttVendor={[
-                fallbackSpeechRecognizerVendor,
-                setFallbackSpeechRecognizerVendor,
-              ]}
-              sttVendorOptions={sttVendorOptions}
-              sttLang={[
-                fallbackSpeechRecognizerLanguage,
-                setFallbackSpeechRecognizerLanguage,
-              ]}
-              sttLabelOptions={fallbackSttLabelOptions}
-              sttLabel={[
-                fallbackSpeechRecognizerLabel,
-                setFallbackSpeechRecognizerLabel,
-              ]}
+                /** When Custom Vendor is used, user you have to input the lange and voice. */
+                if (vendor.toString().startsWith(VENDOR_CUSTOM)) {
+                  setSynthVoice("");
+                  return;
+                }
+
+                /** When using Google and en-US, ensure "Standard-C" is used as default */
+                if (
+                  e.target.value === VENDOR_GOOGLE &&
+                  synthLang === LANG_EN_US
+                ) {
+                  setSynthVoice(LANG_EN_US_STANDARD_C);
+                  return;
+                }
+
+                /** Google and AWS have different language lists */
+                /** If the new language doesn't map then default to "en-US" */
+                let newLang = synthesis[vendor].find(
+                  (lang) => lang.code === synthLang
+                );
+
+                if (newLang) {
+                  setSynthVoice(newLang.voices[0].value);
+                  return;
+                }
+
+                newLang = synthesis[vendor].find(
+                  (lang) => lang.code === LANG_EN_US
+                );
+
+                setSynthLang(LANG_EN_US);
+                setSynthVoice(newLang!.voices[0].value);
+              }}
            />
-            <fieldset>
-              <Button
-                type="button"
-                small
-                onClick={swapPrimaryAndfalloverSpeech}
-              >
-                Swap primary and fallback
-              </Button>
-            </fieldset>
-          </Checkzone>
-        </fieldset>
+            {synthVendor &&
+              !synthVendor.toString().startsWith(VENDOR_CUSTOM) &&
+              synthLang && (
+                <>
+                  <label htmlFor="synthesis_lang">Language</label>
+                  <Selector
+                    id="synthesis_lang"
+                    name="synthesis_lang"
+                    value={synthLang}
+                    options={synthesis[
+                      synthVendor as keyof SynthesisVendors
+                    ].map((lang: VoiceLanguage) => ({
+                      name: lang.name,
+                      value: lang.code,
+                    }))}
+                    onChange={(e) => {
+                      const language = e.target.value;
+                      setSynthLang(language);
+
+                      /** When using Google and en-US, ensure "Standard-C" is used as default */
+                      if (
+                        synthVendor === VENDOR_GOOGLE &&
+                        language === LANG_EN_US
+                      ) {
+                        setSynthVoice(LANG_EN_US_STANDARD_C);
+                        return;
+                      }
+
+                      const newLang = synthesis[
+                        synthVendor as keyof SynthesisVendors
+                      ].find((lang) => lang.code === language);
+
+                      setSynthVoice(newLang!.voices[0].value);
+                    }}
+                  />
+                  <label htmlFor="synthesis_voice">Voice</label>
+                  <Selector
+                    id="synthesis_voice"
+                    name="synthesis_voice"
+                    value={synthVoice}
+                    options={
+                      synthesis[synthVendor as keyof SynthesisVendors]
+                        .filter(
+                          (lang: VoiceLanguage) => lang.code === synthLang
+                        )
+                        .flatMap((lang: VoiceLanguage) =>
+                          lang.voices.map((voice: Voice) => ({
+                            name: voice.name,
+                            value: voice.value,
+                          }))
+                        ) as Voice[]
+                    }
+                    onChange={(e) => setSynthVoice(e.target.value)}
+                  />
+                </>
+              )}
+            {synthVendor.toString().startsWith(VENDOR_CUSTOM) && (
+              <>
+                <label htmlFor="custom_vendor_synthesis_lang">Language</label>
+                <input
+                  id="custom_vendor_synthesis_lang"
+                  type="text"
+                  name="custom_vendor_synthesis_lang"
+                  placeholder="Required"
+                  required
+                  value={synthLang}
+                  onChange={(e) => {
+                    setSynthLang(e.target.value);
+                  }}
+                />
+
+                <label htmlFor="custom_vendor_synthesis_voice">Voice</label>
+                <input
+                  id="custom_vendor_synthesis_voice"
+                  type="text"
+                  name="custom_vendor_synthesis_voice"
+                  placeholder="Required"
+                  required
+                  value={synthVoice}
+                  onChange={(e) => {
+                    setSynthVoice(e.target.value);
+                  }}
+                />
+              </>
+            )}
+          </fieldset>
+        )}
+        {recognizers && (
+          <fieldset>
+            <label htmlFor="recognizer_vendor">Speech recognizer vendor</label>
+            <Selector
+              id="recognizer_vendor"
+              name="recognizer_vendor"
+              value={recogVendor}
+              options={softSttVendor.filter(
+                (vendor) =>
+                  vendor.value != VENDOR_WELLSAID &&
+                  vendor.value !== VENDOR_CUSTOM
+              )}
+              onChange={(e) => {
+                const vendor = e.target.value as keyof RecognizerVendors;
+                setRecogVendor(vendor);
+
+                /**When vendor is custom, Language is input by user */
+                if (vendor.toString() === VENDOR_CUSTOM) return;
+
+                /** Google and AWS have different language lists */
+                /** If the new language doesn't map then default to "en-US" */
+                const newLang = recognizers[vendor].find(
+                  (lang: Language) => lang.code === recogLang
+                );
+
+                if (
+                  (vendor === VENDOR_GOOGLE || vendor === VENDOR_AWS) &&
+                  !newLang
+                ) {
+                  setRecogLang(LANG_EN_US);
+                }
+              }}
+            />
+            {recogVendor &&
+              !recogVendor.toString().startsWith(VENDOR_CUSTOM) &&
+              recogLang && (
+                <>
+                  <label htmlFor="recognizer_lang">Language</label>
+                  <Selector
+                    id="recognizer_lang"
+                    name="recognizer_lang"
+                    value={recogLang}
+                    options={recognizers[
+                      recogVendor as keyof RecognizerVendors
+                    ].map((lang: Language) => ({
+                      name: lang.name,
+                      value: lang.code,
+                    }))}
+                    onChange={(e) => {
+                      setRecogLang(e.target.value);
+                    }}
+                  />
+                </>
+              )}
+            {recogVendor.toString().startsWith(VENDOR_CUSTOM) && (
+              <>
+                <label htmlFor="custom_vendor_recognizer_voice">Language</label>
+                <input
+                  id="custom_vendor_recognizer_voice"
+                  type="text"
+                  name="custom_vendor_recognizer_voice"
+                  placeholder="Required"
+                  required
+                  value={recogLang}
+                  onChange={(e) => {
+                    setRecogLang(e.target.value);
+                  }}
+                />
+              </>
+            )}
+          </fieldset>
+        )}
        {(import.meta.env.INITIAL_APP_JSON_ENABLED === undefined ||
          import.meta.env.INITIAL_APP_JSON_ENABLED) && (
          <fieldset>
--- a/src/containers/internal/views/applications/index.tsx
+++ b/src/containers/internal/views/applications/index.tsx
@@ -40,14 +40,14 @@ export const Applications = () => {

  const filteredApplications = useFilteredResults<Application>(
    filter,
-    applications,
+    applications
  );

  const handleDelete = () => {
    if (application) {
      if (isUserAccountScope(accountSid, user)) {
        toastError(
-          "You do not have permissions to make changes to this Application",
+          "You do not have permissions to make changes to this Application"
        );
        return;
      }
@@ -59,7 +59,7 @@ export const Applications = () => {
          toastSuccess(
            <>
              Deleted application <strong>{application.name}</strong>
-            </>,
+            </>
          );
        })
        .catch((error) => {
@@ -96,7 +96,7 @@ export const Applications = () => {
          </Link>
        )}
      </section>
-      <section className="filters filters--multi">
+      <section className="filters filters--spaced">
        <SearchFilter
          placeholder="Filter applications"
          filter={[filter, setFilter]}
@@ -139,7 +139,7 @@ export const Applications = () => {
                            {
                              accounts?.find(
                                (acct) =>
-                                  acct.account_sid === application.account_sid,
+                                  acct.account_sid === application.account_sid
                              )?.name
                            }
                          </span>
--- a/src/containers/internal/views/applications/speech-selection.tsx
+++ b/src/containers/internal/views/applications/speech-selection.tsx
@@ -1,577 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import {
-  getGoogleCustomVoices,
-  getSpeechSupportedLanguagesAndVoices,
-} from "src/api";
-import { USER_ADMIN } from "src/api/constants";
-import {
-  SpeechCredential,
-  SpeechSupportedLanguagesAndVoices,
-} from "src/api/types";
-import { Selector } from "src/components/forms";
-import { SelectorOption } from "src/components/forms/selector";
-import { toastError, useSelectState } from "src/store";
-import { hasLength } from "src/utils";
-import {
-  ELEVENLABS_LANG_EN,
-  LANG_COBALT_EN_US,
-  LANG_EN_US,
-  LANG_EN_US_STANDARD_C,
-  VENDOR_AWS,
-  VENDOR_COBALT,
-  VENDOR_CUSTOM,
-  VENDOR_DEEPGRAM,
-  VENDOR_ASSEMBLYAI,
-  VENDOR_ELEVENLABS,
-  VENDOR_GOOGLE,
-  VENDOR_MICROSOFT,
-  VENDOR_SONIOX,
-  VENDOR_WELLSAID,
-  VENDOR_WHISPER,
-} from "src/vendor";
-import {
-  LabelOptions,
-  RecognizerVendors,
-  SynthesisVendors,
-  VendorOptions,
-} from "src/vendor/types";
-type SpeechProviderSelectionProbs = {
-  accountSid: string;
-  serviceProviderSid: string;
-  credentials: SpeechCredential[] | undefined;
-  ttsVendor: [
-    keyof SynthesisVendors,
-    React.Dispatch<React.SetStateAction<keyof SynthesisVendors>>,
-  ];
-  ttsVendorOptions: VendorOptions[];
-  ttsVoice: [string, React.Dispatch<React.SetStateAction<string>>];
-  ttsLang: [string, React.Dispatch<React.SetStateAction<string>>];
-  ttsLabelOptions: LabelOptions[];
-  ttsLabel: [string, React.Dispatch<React.SetStateAction<string>>];
-  sttVendor: [
-    keyof RecognizerVendors,
-    React.Dispatch<React.SetStateAction<keyof RecognizerVendors>>,
-  ];
-  sttVendorOptions: VendorOptions[];
-  sttLang: [string, React.Dispatch<React.SetStateAction<string>>];
-  sttLabelOptions: LabelOptions[];
-  sttLabel: [string, React.Dispatch<React.SetStateAction<string>>];
-};
-
-export const SpeechProviderSelection = ({
-  accountSid,
-  serviceProviderSid,
-  credentials,
-  ttsVendor: [synthVendor, setSynthVendor],
-  ttsVendorOptions,
-  ttsVoice: [synthVoice, setSynthVoice],
-  ttsLang: [synthLang, setSynthLang],
-  ttsLabelOptions,
-  ttsLabel: [synthLabel, setSynthLabel],
-  sttVendor: [recogVendor, setRecogVendor],
-  sttVendorOptions,
-  sttLang: [recogLang, setRecogLang],
-  sttLabelOptions,
-  sttLabel: [recogLabel, setRecogLabel],
-}: SpeechProviderSelectionProbs) => {
-  const user = useSelectState("user");
-  const [
-    synthesisSupportedLanguagesAndVoices,
-    setSynthesisSupportedLanguagesAndVoices,
-  ] = useState<SpeechSupportedLanguagesAndVoices | null>();
-  const [selectedCredential, setSelectedCredential] = useState<
-    SpeechCredential | undefined
-  >();
-  const [synthesisVoiceOptions, setSynthesisVoiceOptions] = useState<
-    SelectorOption[]
-  >([]);
-  const [synthesisLanguageOptions, setSynthesisLanguageOptions] = useState<
-    SelectorOption[]
-  >([]);
-  const [synthesisModelOptions, setSynthesisModelOptions] = useState<
-    SelectorOption[]
-  >([]);
-  const [
-    synthesisGoogleCustomVoiceOptions,
-    setSynthesisGoogleCustomVoiceOptions,
-  ] = useState<SelectorOption[]>([]);
-  const [recogLanguageOptions, setRecogLanguageOptions] = useState<
-    SelectorOption[]
-  >([]);
-
-  const currentTtsVendor = useRef(synthVendor);
-  const currentSttVendor = useRef(recogVendor);
-  const shouldUpdateTtsVoice = useRef(false);
-  const shouldUpdateSttLanguage = useRef(false);
-  const ttsEffectTimer = useRef<number | null>(null);
-  const sttEffectTimer = useRef<number | null>(null);
-
-  // Get Synthesis languages and voices
-  useEffect(() => {
-    if (
-      !user ||
-      !synthVendor ||
-      (user?.scope === USER_ADMIN && !serviceProviderSid)
-    ) {
-      return;
-    }
-    currentTtsVendor.current = synthVendor;
-    /** When Custom Vendor is used, user you have to input the lange and voice. */
-    if (synthVendor.toString().startsWith(VENDOR_CUSTOM)) {
-      setSynthVoice("");
-      return;
-    }
-    // just execute last change
-    if (ttsEffectTimer.current) {
-      clearTimeout(ttsEffectTimer.current);
-    }
-
-    ttsEffectTimer.current = setTimeout(() => {
-      configSynthesis();
-    }, 200);
-  }, [synthVendor, synthLabel, serviceProviderSid]);
-
-  // Get Recognizer languages and voices
-  useEffect(() => {
-    /** When Custom Vendor is used, user you have to input the lange and voice. */
-    if (recogVendor.toString().startsWith(VENDOR_CUSTOM)) {
-      setRecogLang(LANG_EN_US);
-      return;
-    }
-    if (
-      !user ||
-      !recogVendor ||
-      (user?.scope === USER_ADMIN && !serviceProviderSid)
-    ) {
-      return;
-    }
-    currentSttVendor.current = recogVendor;
-    // just execute last change
-    if (sttEffectTimer.current) {
-      clearTimeout(sttEffectTimer.current);
-    }
-
-    sttEffectTimer.current = setTimeout(() => {
-      configRecognizer();
-    }, 200);
-  }, [recogVendor, recogLabel, serviceProviderSid]);
-
-  useEffect(() => {
-    if (credentials) {
-      setSelectedCredential(
-        credentials.find(
-          (c) => c.vendor === synthVendor && (c.label || "") === synthLabel,
-        ),
-      );
-    }
-  }, [synthVendor, synthLabel, credentials]);
-
-  useEffect(() => {
-    if (!synthLabel && ttsLabelOptions?.length > 0) {
-      setSynthLabel(ttsLabelOptions[0].value);
-    }
-    if (!recogLabel && sttLabelOptions?.length > 0) {
-      setRecogLabel(sttLabelOptions[0].value);
-    }
-  }, [ttsLabelOptions, sttLabelOptions]);
-
-  useEffect(() => {
-    if (synthesisSupportedLanguagesAndVoices) {
-      // Extract Voice
-      const voicesOpts =
-        synthesisSupportedLanguagesAndVoices.tts?.find((lang) => {
-          if (synthVendor === VENDOR_ELEVENLABS && lang.voices.length > 0) {
-            return true;
-          }
-          return lang.value === synthLang;
-        })?.voices || [];
-
-      if (synthVendor === VENDOR_GOOGLE && synthesisGoogleCustomVoiceOptions) {
-        if (synthesisGoogleCustomVoiceOptions) {
-          setSynthesisVoiceOptions([
-            ...synthesisGoogleCustomVoiceOptions,
-            ...voicesOpts,
-          ]);
-        } else {
-          setSynthesisVoiceOptions(voicesOpts);
-        }
-        if (synthesisGoogleCustomVoiceOptions.length > 0) {
-          updateTtsVoice(synthesisGoogleCustomVoiceOptions[0].value);
-        }
-      } else {
-        setSynthesisVoiceOptions(voicesOpts);
-      }
-    }
-  }, [
-    synthLang,
-    synthesisSupportedLanguagesAndVoices,
-    synthesisGoogleCustomVoiceOptions,
-  ]);
-
-  const configSynthesis = () => {
-    getSpeechSupportedLanguagesAndVoices(
-      serviceProviderSid,
-      synthVendor,
-      synthLabel,
-    )
-      .then(({ json }) => {
-        // while fetching data, user might change the vendor
-        if (currentTtsVendor.current !== synthVendor) {
-          return;
-        }
-        setSynthesisSupportedLanguagesAndVoices(json);
-        // Extract model
-        if (json.models && json.models.length) {
-          setSynthesisModelOptions(json.models);
-          if (synthVendor === VENDOR_DEEPGRAM) {
-            setSynthVoice(json.models[0].value);
-            return;
-          }
-        }
-
-        if (json.tts && json.tts.length) {
-          // Extract Language
-          const langOpts = json.tts.map((lang) => ({
-            name: lang.name,
-            value: lang.value,
-          }));
-          setSynthesisLanguageOptions(langOpts);
-
-          // Default setting
-          const googleLang = json.tts.find((lang) => lang.value === synthLang);
-          if (
-            synthVendor === VENDOR_GOOGLE &&
-            (!googleLang ||
-              !googleLang.voices.find((v) => v.value === synthVoice))
-          ) {
-            setSynthLang(LANG_EN_US);
-            updateTtsVoice(LANG_EN_US_STANDARD_C);
-            return;
-          }
-          if (synthVendor === VENDOR_ELEVENLABS) {
-            // Samve Voices applied to all languages
-            // Voices are only available for the 1st language.
-            setSynthLang(ELEVENLABS_LANG_EN);
-            updateTtsVoice(json.tts[0].voices[0].value);
-            return;
-          }
-          if (synthVendor === VENDOR_WHISPER) {
-            const newLang = json.tts.find((lang) => lang.value === LANG_EN_US);
-            setSynthLang(LANG_EN_US);
-            updateTtsVoice(newLang!.voices[0].value);
-            return;
-          }
-          /** Google and AWS have different language lists */
-          /** If the new language doesn't map then default to "en-US" */
-          let newLang = json.tts.find((lang) => lang.value === synthLang);
-
-          if (newLang) {
-            updateTtsVoice(newLang.voices[0].value);
-            return;
-          }
-
-          newLang = json.tts.find((lang) => lang.value === LANG_EN_US);
-
-          setSynthLang(LANG_EN_US);
-          updateTtsVoice(newLang!.voices[0].value);
-        }
-      })
-      .catch((error) => {
-        toastError(error.msg);
-      });
-
-    if (synthVendor === VENDOR_GOOGLE) {
-      getGoogleCustomVoices({
-        ...(synthLabel && { label: synthLabel }),
-        account_sid: accountSid,
-        service_provider_sid: serviceProviderSid,
-      }).then(({ json }) => {
-        // If after successfully fetching data, vendor is still good, then apply value
-        if (currentTtsVendor.current !== VENDOR_GOOGLE) {
-          return;
-        }
-        const customVOices = json.map((v) => ({
-          name: `${v.name} (Custom)`,
-          value: `custom_${v.google_custom_voice_sid}`,
-        }));
-        setSynthesisGoogleCustomVoiceOptions(customVOices);
-      });
-    }
-  };
-
-  const updateTtsVoice = (value: string) => {
-    if (shouldUpdateTtsVoice.current) {
-      setSynthVoice(value);
-      shouldUpdateTtsVoice.current = false;
-    }
-  };
-
-  const configRecognizer = () => {
-    getSpeechSupportedLanguagesAndVoices(
-      serviceProviderSid,
-      recogVendor,
-      recogLabel,
-    )
-      .then(({ json }) => {
-        // while fetching data, the user might change the vendor
-        if (currentSttVendor.current !== recogVendor) {
-          return;
-        }
-        // Extract Language
-        const langOpts = json.stt.map((lang) => ({
-          name: lang.name,
-          value: lang.value,
-        }));
-        setRecogLanguageOptions(langOpts);
-
-        /**When vendor is custom, Language is input by user */
-        if (
-          recogVendor.toString() === VENDOR_CUSTOM ||
-          !shouldUpdateSttLanguage.current
-        )
-          return;
-        shouldUpdateSttLanguage.current = false;
-        /** Google and AWS have different language lists */
-        /** If the new language doesn't map then default to "en-US" */
-        const newLang = json.stt.find((lang) => lang.value === recogLang);
-
-        if (
-          (recogVendor === VENDOR_GOOGLE || recogVendor === VENDOR_AWS) &&
-          !newLang
-        ) {
-          setRecogLang(LANG_EN_US);
-        } else if (recogVendor === VENDOR_COBALT && !newLang) {
-          setRecogLang(LANG_COBALT_EN_US);
-        } else if (langOpts.length && !newLang) {
-          setRecogLang(langOpts[0].value);
-        }
-      })
-      .catch((error) => {
-        toastError(error.msg);
-      });
-  };
-  return (
-    <>
-      <fieldset>
-        <label htmlFor="synthesis_vendor">Speech synthesis vendor</label>
-        <Selector
-          id="synthesis_vendor"
-          name="synthesis_vendor"
-          value={synthVendor}
-          options={ttsVendorOptions.filter(
-            (vendor) =>
-              vendor.value != VENDOR_ASSEMBLYAI &&
-              vendor.value != VENDOR_SONIOX &&
-              vendor.value !== VENDOR_CUSTOM &&
-              vendor.value !== VENDOR_COBALT,
-          )}
-          onChange={(e) => {
-            const vendor = e.target.value as keyof SynthesisVendors;
-            shouldUpdateTtsVoice.current = true;
-            setSynthVendor(vendor);
-            setSynthLabel("");
-            setSynthesisLanguageOptions([]);
-            setSynthesisVoiceOptions([]);
-          }}
-        />
-        {hasLength(ttsLabelOptions) && (
-          <>
-            <label htmlFor="synthesis_label">Label</label>
-            <Selector
-              id="systhesis_label"
-              name="systhesis_label"
-              value={synthLabel}
-              options={ttsLabelOptions}
-              onChange={(e) => {
-                setSynthLabel(e.target.value);
-              }}
-            />
-          </>
-        )}
-        {synthesisModelOptions && synthVendor === VENDOR_DEEPGRAM && (
-          <>
-            <label htmlFor="synthesis_lang">Model</label>
-            <Selector
-              id="synthesis_voice"
-              name="synthesis_voice"
-              value={synthVoice}
-              options={synthesisModelOptions}
-              onChange={(e) => setSynthVoice(e.target.value)}
-            />
-          </>
-        )}
-        {synthVendor &&
-          !synthVendor.toString().startsWith(VENDOR_CUSTOM) &&
-          synthVendor !== VENDOR_DEEPGRAM &&
-          synthLang && (
-            <>
-              <label htmlFor="synthesis_lang">Language</label>
-              <Selector
-                id="synthesis_lang"
-                name="synthesis_lang"
-                value={synthLang}
-                options={synthesisLanguageOptions}
-                onChange={(e) => {
-                  shouldUpdateTtsVoice.current = true;
-                  const language = e.target.value;
-                  setSynthLang(language);
-
-                  /** When using Google and en-US, ensure "Standard-C" is used as default */
-                  if (
-                    synthVendor === VENDOR_GOOGLE &&
-                    language === LANG_EN_US
-                  ) {
-                    setSynthVoice(LANG_EN_US_STANDARD_C);
-                    return;
-                  }
-
-                  const voices =
-                    synthesisSupportedLanguagesAndVoices?.tts.find(
-                      (lang) => lang.value === language,
-                    )?.voices || [];
-                  if (
-                    synthVendor === VENDOR_GOOGLE &&
-                    synthesisGoogleCustomVoiceOptions &&
-                    synthesisGoogleCustomVoiceOptions.length
-                  ) {
-                    setSynthesisVoiceOptions([
-                      ...synthesisGoogleCustomVoiceOptions,
-                      ...voices,
-                    ]);
-                  } else {
-                    setSynthesisVoiceOptions(voices);
-                  }
-
-                  setSynthVoice(voices[0].value);
-                }}
-              />
-              <label htmlFor="synthesis_voice">Voice</label>
-              {synthVendor === VENDOR_MICROSOFT &&
-              selectedCredential &&
-              selectedCredential.use_custom_tts ? (
-                <input
-                  id="custom_microsoft_synthesis_voice"
-                  type="text"
-                  name="custom_microsoft_synthesis_voice"
-                  placeholder="Required"
-                  required
-                  value={synthVoice}
-                  onChange={(e) => {
-                    setSynthVoice(e.target.value);
-                  }}
-                />
-              ) : (
-                <Selector
-                  id="synthesis_voice"
-                  name="synthesis_voice"
-                  value={synthVoice}
-                  options={synthesisVoiceOptions}
-                  onChange={(e) => setSynthVoice(e.target.value)}
-                />
-              )}
-            </>
-          )}
-        {synthVendor.toString().startsWith(VENDOR_CUSTOM) && (
-          <>
-            <label htmlFor="custom_vendor_synthesis_lang">Language</label>
-            <input
-              id="custom_vendor_synthesis_lang"
-              type="text"
-              name="custom_vendor_synthesis_lang"
-              placeholder="Required"
-              required
-              value={synthLang}
-              onChange={(e) => {
-                setSynthLang(e.target.value);
-              }}
-            />
-
-            <label htmlFor="custom_vendor_synthesis_voice">Voice</label>
-            <input
-              id="custom_vendor_synthesis_voice"
-              type="text"
-              name="custom_vendor_synthesis_voice"
-              placeholder="Required"
-              required
-              value={synthVoice}
-              onChange={(e) => {
-                setSynthVoice(e.target.value);
-              }}
-            />
-          </>
-        )}
-      </fieldset>
-      <fieldset>
-        <label htmlFor="recognizer_vendor">Speech recognizer vendor</label>
-        <Selector
-          id="recognizer_vendor"
-          name="recognizer_vendor"
-          value={recogVendor}
-          options={sttVendorOptions.filter(
-            (vendor) =>
-              vendor.value != VENDOR_WELLSAID &&
-              vendor.value != VENDOR_ELEVENLABS &&
-              vendor.value != VENDOR_WHISPER &&
-              vendor.value !== VENDOR_CUSTOM,
-          )}
-          onChange={(e) => {
-            const vendor = e.target.value as keyof RecognizerVendors;
-            shouldUpdateSttLanguage.current = true;
-            setRecogVendor(vendor);
-            setRecogLabel("");
-
-            setRecogLanguageOptions([]);
-          }}
-        />
-        {hasLength(sttLabelOptions) && (
-          <>
-            <label htmlFor="recog_label">Label</label>
-            <Selector
-              id="recog_label"
-              name="recog_label"
-              value={recogLabel}
-              options={sttLabelOptions}
-              onChange={(e) => {
-                setRecogLabel(e.target.value);
-              }}
-            />
-          </>
-        )}
-        {recogVendor &&
-          !recogVendor.toString().startsWith(VENDOR_CUSTOM) &&
-          recogLang && (
-            <>
-              <label htmlFor="recognizer_lang">Language</label>
-              <Selector
-                id="recognizer_lang"
-                name="recognizer_lang"
-                value={recogLang}
-                options={recogLanguageOptions}
-                onChange={(e) => {
-                  setRecogLang(e.target.value);
-                }}
-              />
-            </>
-          )}
-        {recogVendor.toString().startsWith(VENDOR_CUSTOM) && (
-          <>
-            <label htmlFor="custom_vendor_recognizer_voice">Language</label>
-            <input
-              id="custom_vendor_recognizer_voice"
-              type="text"
-              name="custom_vendor_recognizer_voice"
-              placeholder="Required"
-              required
-              value={recogLang}
-              onChange={(e) => {
-                setRecogLang(e.target.value);
-              }}
-            />
-          </>
-        )}
-      </fieldset>
-    </>
-  );
-};
-
-export default SpeechProviderSelection;
--- a/src/containers/internal/views/carriers/delete.tsx
+++ b/src/containers/internal/views/carriers/delete.tsx
@@ -28,8 +28,8 @@ export const DeleteCarrier = ({
      if (!ignore) {
        setPhoneNumbers(
          json.filter(
-            (phone) => phone.voip_carrier_sid === carrier.voip_carrier_sid,
-          ),
+            (phone) => phone.voip_carrier_sid === carrier.voip_carrier_sid
+          )
        );
      }
    });
--- a/src/containers/internal/views/carriers/edit.tsx
+++ b/src/containers/internal/views/carriers/edit.tsx
@@ -15,13 +15,13 @@ export const EditCarrier = () => {
  const params = useParams();
  const user = useSelectState("user");
  const [data, refetch, error] = useApiData<Carrier>(
-    `VoipCarriers/${params.voip_carrier_sid}`,
+    `VoipCarriers/${params.voip_carrier_sid}`
  );
  const [sipGateways, sipGatewaysRefetch] = useApiData<SipGateway[]>(
-    `SipGateways?voip_carrier_sid=${params.voip_carrier_sid}`,
+    `SipGateways?voip_carrier_sid=${params.voip_carrier_sid}`
  );
  const [smppGateways, smppGatewaysRefetch] = useApiData<SmppGateway[]>(
-    `SmppGateways?voip_carrier_sid=${params.voip_carrier_sid}`,
+    `SmppGateways?voip_carrier_sid=${params.voip_carrier_sid}`
  );

  useScopedRedirect(
@@ -29,7 +29,7 @@ export const EditCarrier = () => {
    ROUTE_INTERNAL_CARRIERS,
    user,
    "You do not have access to this resource",
-    data,
+    data
  );

  useEffect(() => {
--- a/src/containers/internal/views/carriers/form.tsx
+++ b/src/containers/internal/views/carriers/form.tsx
@@ -22,7 +22,6 @@ import {
  FQDN,
  FQDN_TOP_LEVEL,
  INVALID,
-  IP,
  NETMASK_OPTIONS,
  SIP_GATEWAY_PROTOCOL_OPTIONS,
  TCP_MAX_PORT,
@@ -48,8 +47,6 @@ import {
  hasLength,
  isValidPort,
  disableDefaultTrunkRouting,
-  hasValue,
-  isNotBlank,
 } from "src/utils";

 import type {
@@ -236,33 +233,20 @@ export const CarrierForm = ({
  const updateSipGateways = (
    index: number,
    key: string,
-    value: (typeof sipGateways)[number][keyof SipGateway],
+    value: typeof sipGateways[number][keyof SipGateway]
  ) => {
    setSipGateways(
-      sipGateways.map((g, i) =>
-        i === index
-          ? {
-              ...g,
-              [key]: value,
-              // If Change to ipv4 and port is null, change port to 5060
-              ...(key === "ipv4" &&
-                value &&
-                typeof value === "string" &&
-                getIpValidationType(value) === IP &&
-                g.port === null && { port: 5060 }),
-            }
-          : g,
-      ),
+      sipGateways.map((g, i) => (i === index ? { ...g, [key]: value } : g))
    );
  };

  const updateSmppGateways = (
    index: number,
    key: string,
-    value: (typeof smppGateways)[number][keyof SmppGateway],
+    value: typeof smppGateways[number][keyof SmppGateway]
  ) => {
    setSmppGateways(
-      smppGateways.map((g, i) => (i === index ? { ...g, [key]: value } : g)),
+      smppGateways.map((g, i) => (i === index ? { ...g, [key]: value } : g))
    );
  };

@@ -271,8 +255,8 @@ export const CarrierForm = ({
      sipGateways.map(({ sip_gateway_sid, ...g }: SipGateway) =>
        sip_gateway_sid
          ? putSipGateway(sip_gateway_sid, g)
-          : postSipGateway({ ...g, voip_carrier_sid }),
-      ),
+          : postSipGateway({ ...g, voip_carrier_sid })
+      )
    ).then(() => {
      if (carrierSipGateways) {
        carrierSipGateways.refetch();
@@ -289,7 +273,7 @@ export const CarrierForm = ({
          smpp_gateway_sid
            ? putSmppGateway(smpp_gateway_sid, g)
            : postSmppGateway({ ...g, voip_carrier_sid });
-        }),
+        })
    ).then(() => {
      if (carrierSmppGateways) {
        carrierSmppGateways.refetch();
@@ -300,7 +284,7 @@ export const CarrierForm = ({
  const handleSipGatewayDelete = (g?: SipGateway) => {
    if (g && g.sip_gateway_sid) {
      deleteSipGateway(g.sip_gateway_sid).then(() =>
-        toastSuccess("SIP gateway successfully deleted"),
+        toastSuccess("SIP gateway successfully deleted")
      );
    }
  };
@@ -311,8 +295,8 @@ export const CarrierForm = ({
        toastSuccess(
          `SMPP ${
            g.outbound ? "outbound" : "inbound"
-          } gateway successfully deleted`,
-        ),
+          } gateway successfully deleted`
+        )
      );
    }
  };
@@ -336,13 +320,10 @@ export const CarrierForm = ({
      const gateway = sipGateways[i];
      const type = getIpValidationType(gateway.ipv4);

-      /** DH: unclear why we had this restriction, removing for now
      if (type === FQDN_TOP_LEVEL) {
        refSipIp.current[i].focus();
        return "When using an FQDN, you must use a subdomain (e.g. sip.example.com).";
      } else if (type === FQDN && (!gateway.outbound || gateway.inbound)) {
-      */
-      if (type === FQDN && (!gateway.outbound || gateway.inbound)) {
        refSipIp.current[i].focus();
        return "A fully qualified domain name may only be used for outbound calls.";
      } else if (type === INVALID) {
@@ -428,9 +409,7 @@ export const CarrierForm = ({
    /** When to switch to `sip` tab */

    const emptySipIp = sipGateways.find((g) => g.ipv4.trim() === "");
-    const invalidSipPort = sipGateways.find(
-      (g) => hasValue(g.port) && !isValidPort(g.port),
-    );
+    const invalidSipPort = sipGateways.find((g) => !isValidPort(g.port));
    const sipGatewayValidation = getSipValidation();

    /** Empty SIP gateway */
@@ -530,7 +509,7 @@ export const CarrierForm = ({
        putCarrier(
          currentServiceProvider.service_provider_sid,
          carrier.data.voip_carrier_sid,
-          carrierPayload,
+          carrierPayload
        )
          .then(() => {
            if (carrier.data?.voip_carrier_sid) {
@@ -541,7 +520,7 @@ export const CarrierForm = ({
            toastSuccess("Carrier updated successfully");
            carrier.refetch();
            navigate(
-              `${ROUTE_INTERNAL_CARRIERS}/${carrier.data?.voip_carrier_sid}/edit`,
+              `${ROUTE_INTERNAL_CARRIERS}/${carrier.data?.voip_carrier_sid}/edit`
            );
          })
          .catch((error) => {
@@ -571,7 +550,7 @@ export const CarrierForm = ({
    setLocation();
    if (predefinedName && hasLength(predefinedCarriers)) {
      const predefinedCarrierSid = predefinedCarriers.find(
-        (a) => a.name === predefinedName,
+        (a) => a.name === predefinedName
      )?.predefined_carrier_sid;

      if (currentServiceProvider && predefinedCarrierSid) {
@@ -579,11 +558,11 @@ export const CarrierForm = ({
          user?.scope === USER_ACCOUNT
            ? postPredefinedCarrierTemplateAccount(
                accountSid,
-                predefinedCarrierSid,
+                predefinedCarrierSid
              )
            : postPredefinedCarrierTemplate(
                currentServiceProvider.service_provider_sid,
-                predefinedCarrierSid,
+                predefinedCarrierSid
              );

        postPredefinedCarrier
@@ -639,12 +618,7 @@ export const CarrierForm = ({

  return (
    <Section slim>
-      <form
-        className={`form form--internal ${
-          !carrier?.data && carrier?.refetch ? "form--blur" : ""
-        }`}
-        onSubmit={handleSubmit}
-      >
+      <form className="form form--internal" onSubmit={handleSubmit}>
        <fieldset>
          <MS>{MSG_REQUIRED_FIELDS}</MS>
        </fieldset>
@@ -693,9 +667,9 @@ export const CarrierForm = ({
                          (carrier: PredefinedCarrier) => ({
                            name: carrier.name,
                            value: carrier.name,
-                          }),
+                          })
                        )
-                      : [],
+                      : []
                  )}
                  onChange={(e) => setPredefinedName(e.target.value)}
                />
@@ -748,7 +722,7 @@ export const CarrierForm = ({
                accounts={
                  user?.scope === USER_ACCOUNT
                    ? accounts?.filter(
-                        (acct) => user.account_sid === acct.account_sid,
+                        (acct) => user.account_sid === acct.account_sid
                      )
                    : accounts
                }
@@ -760,8 +734,8 @@ export const CarrierForm = ({
                  user?.scope !== USER_ACCOUNT
                    ? false
                    : user.account_sid !== accountSid
-                      ? true
-                      : false
+                    ? true
+                    : false
                }
              />
              {user &&
@@ -774,7 +748,7 @@ export const CarrierForm = ({
                      defaultOption="None"
                      application={[applicationSid, setApplicationSid]}
                      applications={applications.filter(
-                        (application) => application.account_sid === accountSid,
+                        (application) => application.account_sid === accountSid
                      )}
                    />
                  </>
@@ -988,21 +962,13 @@ export const CarrierForm = ({
                          type="number"
                          min="0"
                          max={TCP_MAX_PORT}
-                          placeholder={
-                            g.protocol === "tls" || g.protocol === "tls/srtp"
-                              ? ""
-                              : DEFAULT_SIP_GATEWAY.port?.toString()
-                          }
-                          value={g.port === null ? "" : g.port}
+                          placeholder={DEFAULT_SIP_GATEWAY.port.toString()}
+                          value={g.port}
                          onChange={(e) => {
                            updateSipGateways(
                              i,
                              "port",
-                              g.outbound > 0 &&
-                                !isNotBlank(e.target.value) &&
-                                getIpValidationType(g.ipv4) !== IP
-                                ? null
-                                : Number(e.target.value),
+                              Number(e.target.value)
                            );
                          }}
                          ref={(ref: HTMLInputElement) =>
@@ -1015,6 +981,7 @@ export const CarrierForm = ({
                          <Selector
                            id={`sip_protocol_${i}`}
                            name={`sip_protocol${i}`}
+                            placeholder=""
                            value={g.protocol}
                            options={SIP_GATEWAY_PROTOCOL_OPTIONS}
                            onChange={(e) => {
@@ -1027,6 +994,7 @@ export const CarrierForm = ({
                          <Selector
                            id={`sip_netmask_${i}`}
                            name={`sip_netmask${i}`}
+                            placeholder="32"
                            value={g.netmask}
                            options={NETMASK_OPTIONS}
                            onChange={(e) => {
@@ -1051,7 +1019,7 @@ export const CarrierForm = ({
                              updateSipGateways(
                                i,
                                "is_active",
-                                e.target.checked ? 1 : 0,
+                                e.target.checked ? 1 : 0
                              );
                            }}
                          />
@@ -1070,7 +1038,7 @@ export const CarrierForm = ({
                              updateSipGateways(
                                i,
                                "inbound",
-                                e.target.checked ? 1 : 0,
+                                e.target.checked ? 1 : 0
                              );
                            }}
                          />
@@ -1089,59 +1057,13 @@ export const CarrierForm = ({
                              updateSipGateways(
                                i,
                                "outbound",
-                                e.target.checked,
+                                e.target.checked
                              );
                            }}
                          />
                          <div>Outbound</div>
                        </label>
                      </div>
-                      {g.outbound > 0 && g.protocol === "tls/srtp" && (
-                        <div>
-                          <label
-                            htmlFor={`sip_pad_crypto_${i}`}
-                            className="chk"
-                          >
-                            <input
-                              id={`sip_pad_crypto_${i}`}
-                              name={`sip_pad_crypto_${i}`}
-                              type="checkbox"
-                              checked={g.pad_crypto ? true : false}
-                              onChange={(e) => {
-                                updateSipGateways(
-                                  i,
-                                  "pad_crypto",
-                                  e.target.checked,
-                                );
-                              }}
-                            />
-                            <div>Pad crypto</div>
-                          </label>
-                        </div>
-                      )}
-                      {Boolean(g.outbound) && (
-                        <div>
-                          <label
-                            htmlFor={`send_options_ping_${i}`}
-                            className="chk"
-                          >
-                            <input
-                              id={`send_options_ping_${i}`}
-                              name={`send_options_ping_${i}`}
-                              type="checkbox"
-                              checked={g.send_options_ping ? true : false}
-                              onChange={(e) => {
-                                updateSipGateways(
-                                  i,
-                                  "send_options_ping",
-                                  e.target.checked,
-                                );
-                              }}
-                            />
-                            <div>Send OPTIONS ping</div>
-                          </label>
-                        </div>
-                      )}
                    </div>

                    <button
@@ -1153,15 +1075,15 @@ export const CarrierForm = ({

                        if (sipGateways.length === 1) {
                          setSipMessage(
-                            "You must provide at least one SIP Gateway.",
+                            "You must provide at least one SIP Gateway."
                          );
                        } else {
                          handleSipGatewayDelete(
-                            sipGateways.find((g2, i2) => i2 === i),
+                            sipGateways.find((g2, i2) => i2 === i)
                          );

                          setSipGateways(
-                            sipGateways.filter((g2, i2) => i2 !== i),
+                            sipGateways.filter((g2, i2) => i2 !== i)
                          );
                        }
                      }}
@@ -1275,7 +1197,7 @@ export const CarrierForm = ({
                              updateSmppGateways(
                                i,
                                "port",
-                                Number(e.target.value),
+                                Number(e.target.value)
                              )
                            }
                            ref={(ref: HTMLInputElement) =>
@@ -1294,7 +1216,7 @@ export const CarrierForm = ({
                                updateSmppGateways(
                                  i,
                                  "use_tls",
-                                  e.target.checked,
+                                  e.target.checked
                                )
                              }
                            />
@@ -1316,15 +1238,15 @@ export const CarrierForm = ({
                            (smppSystemId || smppPass)
                          ) {
                            setSmppOutboundMessage(
-                              "You must provide at least one Outbound Gateway.",
+                              "You must provide at least one Outbound Gateway."
                            );
                          } else {
                            handleSmppGatewayDelete(
-                              smppGateways.find((g2, i2) => i2 === i),
+                              smppGateways.find((g2, i2) => i2 === i)
                            );

                            setSmppGateways(
-                              smppGateways.filter((g2, i2) => i2 !== i),
+                              smppGateways.filter((g2, i2) => i2 !== i)
                            );
                          }
                        }}
@@ -1418,6 +1340,7 @@ export const CarrierForm = ({
                          <Selector
                            id={`smpp_netmask_${i}`}
                            name={`smpp_netmask_${i}`}
+                            placeholder="32"
                            options={NETMASK_OPTIONS}
                            value={g.netmask}
                            onChange={(e) =>
@@ -1432,11 +1355,11 @@ export const CarrierForm = ({
                        type="button"
                        onClick={() => {
                          handleSmppGatewayDelete(
-                            smppGateways.find((g2, i2) => i2 === i),
+                            smppGateways.find((g2, i2) => i2 === i)
                          );

                          setSmppGateways(
-                            smppGateways.filter((g2, i2) => i2 !== i),
+                            smppGateways.filter((g2, i2) => i2 !== i)
                          );
                        }}
                      >
--- a/src/containers/internal/views/carriers/gateways.tsx
+++ b/src/containers/internal/views/carriers/gateways.tsx
@@ -12,7 +12,7 @@ type GatewaysProps = {

 export const Gateways = ({ carrier }: GatewaysProps) => {
  const [gateways, , error] = useApiData<SipGateway[]>(
-    `SipGateways?voip_carrier_sid=${carrier.voip_carrier_sid}`,
+    `SipGateways?voip_carrier_sid=${carrier.voip_carrier_sid}`
  );

  const renderGateways = () => {
--- a/src/containers/internal/views/carriers/index.tsx
+++ b/src/containers/internal/views/carriers/index.tsx
@@ -66,14 +66,14 @@ export const Carriers = () => {
      ? carriers.filter((carrier) =>
          accountSid
            ? carrier.account_sid === accountSid
-            : carrier.account_sid === null,
+            : carrier.account_sid === null
        )
      : [];
  }, [accountSid, carrier, carriers]);

  const filteredCarriers = useFilteredResults<Carrier>(
    filter,
-    carriersFiltered,
+    carriersFiltered
  );

  const handleDelete = () => {
@@ -87,10 +87,10 @@ export const Carriers = () => {
        .then(() => {
          Promise.all([
            getFetch<SipGateway[]>(
-              `${API_SIP_GATEWAY}?voip_carrier_sid=${carrier.voip_carrier_sid}`,
+              `${API_SIP_GATEWAY}?voip_carrier_sid=${carrier.voip_carrier_sid}`
            ),
            getFetch<SmppGateway[]>(
-              `${API_SMPP_GATEWAY}?voip_carrier_sid=${carrier.voip_carrier_sid}`,
+              `${API_SMPP_GATEWAY}?voip_carrier_sid=${carrier.voip_carrier_sid}`
            ),
          ]).then(([sipGatewaysRes, smppGatewaysRes]) => {
            hasLength(sipGatewaysRes.json) &&
@@ -99,8 +99,8 @@ export const Carriers = () => {
                  g &&
                  g.sip_gateway_sid &&
                  deleteSipGateway(g.sip_gateway_sid).catch((error) =>
-                    toastError(error.msg),
-                  ),
+                    toastError(error.msg)
+                  )
              );
            hasLength(smppGatewaysRes.json) &&
              smppGatewaysRes.json.forEach(
@@ -108,8 +108,8 @@ export const Carriers = () => {
                  g &&
                  g.smpp_gateway_sid &&
                  deleteSmppGateway(g.smpp_gateway_sid).catch((error) =>
-                    toastError(error.msg),
-                  ),
+                    toastError(error.msg)
+                  )
              );
          });
          setCarrier(null);
@@ -117,7 +117,7 @@ export const Carriers = () => {
          toastSuccess(
            <>
              Deleted Carrier <strong>{carrier.name}</strong>
-            </>,
+            </>
          );
        })
        .catch((error) => {
@@ -130,7 +130,7 @@ export const Carriers = () => {
    setLocation();
    if (currentServiceProvider) {
      setApiUrl(
-        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers`,
+        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers`
      );
    }
  }, [user, currentServiceProvider, accountSid]);
@@ -155,7 +155,7 @@ export const Carriers = () => {
          </Icon>
        </Link>
      </section>
-      <section className="filters filters--multi">
+      <section className="filters filters--spaced">
        <SearchFilter
          placeholder="Filter carriers"
          filter={[filter, setFilter]}
--- a/src/containers/internal/views/carriers/register-status.tsx
+++ b/src/containers/internal/views/carriers/register-status.tsx
@@ -10,13 +10,6 @@ type CarrierProps = {
 };

 export const RegisterStatus = ({ carrier }: CarrierProps) => {
-  const getReason = () => {
-    return carrier.register_status.reason
-      ? typeof carrier.register_status.reason === "string"
-        ? carrier.register_status.reason
-        : "Not Started"
-      : "Not Started";
-  };
  const renderStatus = () => {
    return (
      <div
@@ -27,7 +20,7 @@ export const RegisterStatus = ({ carrier }: CarrierProps) => {
              : "jam"
            : "jean"
        }`}
-        title={getReason()}
+        title={carrier.register_status.reason || "Not Started"}
      >
        {carrier.register_status.status === CARRIER_REG_OK ? (
          <Icons.CheckCircle />
@@ -47,7 +40,8 @@ export const RegisterStatus = ({ carrier }: CarrierProps) => {
    <details className={carrier.register_status.status || "not-tested"}>
      <summary>{renderStatus()}</summary>
      <MS>
-        <strong>Reason:</strong> {getReason()}
+        <strong>Reason:</strong>{" "}
+        {carrier.register_status.reason || "Not Started"}
      </MS>
      <PcapButton
        accountSid={carrier.account_sid || ""}
--- a/src/containers/internal/views/clients/add.tsx
+++ b/src/containers/internal/views/clients/add.tsx
@@ -5,7 +5,7 @@ import ClientsForm from "./form";
 export const ClientsAdd = () => {
  return (
    <>
-      <H1 className="h2">Add sip client</H1>
+      <H1 className="h2">Add client</H1>
      <ClientsForm />
    </>
  );
--- a/src/containers/internal/views/clients/delete.tsx
+++ b/src/containers/internal/views/clients/delete.tsx
@@ -17,7 +17,7 @@ export const ClientsDelete = ({
    <>
      <Modal handleCancel={handleCancel} handleSubmit={handleSubmit}>
        <P>
-          Are you sure you want to delete the sip client{" "}
+          Are you sure you want to delete the client{" "}
          <strong>{client.username}</strong>?
        </P>
      </Modal>
--- a/src/containers/internal/views/clients/edit.tsx
+++ b/src/containers/internal/views/clients/edit.tsx
@@ -1,30 +1,27 @@
 import { H1 } from "@jambonz/ui-kit";
 import React, { useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { useApiData } from "src/api";
 import { Client } from "src/api/types";
 import { toastError } from "src/store";
 import ClientsForm from "./form";
-import { ROUTE_INTERNAL_CLIENTS } from "src/router/routes";

 export const ClientsEdit = () => {
  const params = useParams();
-  const navigate = useNavigate();
  const [data, refetch, error] = useApiData<Client>(
-    `Clients/${params.client_sid}`,
+    `Clients/${params.client_sid}`
  );

  /** Handle error toast at top level... */
  useEffect(() => {
    if (error) {
      toastError(error.msg);
-      navigate(ROUTE_INTERNAL_CLIENTS);
    }
  }, [error]);

  return (
    <>
-      <H1 className="h2">Edit sip client</H1>
+      <H1 className="h2">Edit client</H1>
      <ClientsForm client={{ data, refetch, error }} />
    </>
  );
--- a/src/containers/internal/views/clients/form.tsx
+++ b/src/containers/internal/views/clients/form.tsx
@@ -9,7 +9,7 @@ import {
 } from "src/api";
 import { USER_ACCOUNT } from "src/api/constants";
 import { Account, Client, UseApiDataMap } from "src/api/types";
-import { Section, Tooltip } from "src/components";
+import { Section } from "src/components";
 import { AccountSelect, Message, Passwd } from "src/components/forms";
 import { MSG_REQUIRED_FIELDS } from "src/constants";
 import { ROUTE_INTERNAL_CLIENTS } from "src/router/routes";
@@ -30,12 +30,7 @@ export const ClientsForm = ({ client }: ClientsFormProps) => {
  const [accountSid, setAccountSid] = useState("");
  const [password, setPassword] = useState("");
  const [username, setUsername] = useState("");
-  const [isActive, setIsActive] = useState(
-    client ? client.data?.is_active : true,
-  );
-  const [allowDirectAppCalling, setAllowDirectAppCalling] = useState(true);
-  const [allowDirectQueueCalling, setAllowDirectQueueCalling] = useState(true);
-  const [allowDirectUserCalling, setAllowDirectUserCalling] = useState(true);
+  const [isActive, setIsActive] = useState(true);
  const [modal, setModal] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");
  const handleSubmit = (e: React.FormEvent) => {
@@ -47,9 +42,6 @@ export const ClientsForm = ({ client }: ClientsFormProps) => {
        username: username,
        password: password,
        is_active: isActive,
-        allow_direct_app_calling: allowDirectAppCalling,
-        allow_direct_queue_calling: allowDirectQueueCalling,
-        allow_direct_user_calling: allowDirectUserCalling,
      })
        .then(() => {
          toastSuccess("Client created successfully");
@@ -60,10 +52,10 @@ export const ClientsForm = ({ client }: ClientsFormProps) => {
        });
    } else {
      putClient(client.data?.client_sid || "", {
+        account_sid: accountSid,
+        username: username,
+        ...(password && { password: password }),
        is_active: isActive,
-        allow_direct_app_calling: allowDirectAppCalling,
-        allow_direct_queue_calling: allowDirectQueueCalling,
-        allow_direct_user_calling: allowDirectUserCalling,
      })
        .then(() => {
          toastSuccess("Client updated successfully");
@@ -107,9 +99,6 @@ export const ClientsForm = ({ client }: ClientsFormProps) => {
      }

      setIsActive(client.data.is_active);
-      setAllowDirectAppCalling(client.data.allow_direct_app_calling);
-      setAllowDirectQueueCalling(client.data.allow_direct_queue_calling);
-      setAllowDirectUserCalling(client.data.allow_direct_user_calling);
    }
  }, [client]);

@@ -118,6 +107,8 @@ export const ClientsForm = ({ client }: ClientsFormProps) => {
    if (!accountSid || !accounts || !acc) return;
    if (!acc?.sip_realm) {
      setErrorMessage(`Sip realm is not set for the account.`);
+    } else if (!acc?.device_calling_application_sid) {
+      setErrorMessage(`Device calling application is not set for the account.`);
    } else {
      setErrorMessage("");
    }
@@ -125,12 +116,7 @@ export const ClientsForm = ({ client }: ClientsFormProps) => {
  return (
    <>
      <Section slim>
-        <form
-          className={`form form--internal ${
-            !client?.data && client?.refetch ? "form--blur" : ""
-          }`}
-          onSubmit={handleSubmit}
-        >
+        <form className="form form--internal" onSubmit={handleSubmit}>
          <fieldset>
            <MS>{MSG_REQUIRED_FIELDS}</MS>
            {errorMessage && <Message message={errorMessage} />}
@@ -148,27 +134,10 @@ export const ClientsForm = ({ client }: ClientsFormProps) => {
                  placeholder="user name"
                  value={username}
                  required={true}
-                  disabled={hasValue(client)}
-                  autoComplete="off"
                  onChange={(e) => setUsername(e.target.value)}
                />
              </div>
            </div>
-            <label htmlFor="password">
-              Password{!hasValue(client) && <span>*</span>}
-            </label>
-            <Passwd
-              id="password"
-              required={!hasValue(client)}
-              name="password"
-              value={password}
-              placeholder="Password"
-              setValue={setPassword}
-              disabled={hasValue(client)}
-              autoComplete="off"
-            />
-          </fieldset>
-          <fieldset>
            <label htmlFor="is_active" className="chk">
              <input
                id="is_active"
@@ -179,52 +148,26 @@ export const ClientsForm = ({ client }: ClientsFormProps) => {
              />
              <div>Active</div>
            </label>
-            <label htmlFor="allow_direct_app_calling" className="chk">
-              <input
-                id="allow_direct_app_calling"
-                name="allow_direct_app_calling"
-                type="checkbox"
-                checked={allowDirectAppCalling}
-                onChange={(e) => setAllowDirectAppCalling(e.target.checked)}
-              />
-              <div>Allow direct calling to applications</div>
-              <Tooltip text="Allow user to call applications without configuring an application for sip device calls.">
-                {" "}
-              </Tooltip>
-            </label>
-            <label htmlFor="allow_direct_queue_calling" className="chk">
-              <input
-                id="allow_direct_queue_calling"
-                name="allow_direct_queue_calling"
-                type="checkbox"
-                checked={allowDirectQueueCalling}
-                onChange={(e) => setAllowDirectQueueCalling(e.target.checked)}
-              />
-              <div>Allow direct calling to queues</div>
-              <Tooltip text="Allow user to take calls from queues without configuring an application for sip device calls.">
-                {" "}
-              </Tooltip>
-            </label>
-            <label htmlFor="allow_direct_user_calling" className="chk">
-              <input
-                id="allow_direct_user_calling"
-                name="allow_direct_user_calling"
-                type="checkbox"
-                checked={allowDirectUserCalling}
-                onChange={(e) => setAllowDirectUserCalling(e.target.checked)}
-              />
-              <div>Allow direct calling to other users</div>
-              <Tooltip text="Allow user to call other users without configuring an application for sip device calls.">
-                {" "}
-              </Tooltip>
+          </fieldset>
+          <fieldset>
+            <label htmlFor="password">
+              Password{!hasValue(client) && <span>*</span>}
            </label>
+            <Passwd
+              id="password"
+              required={!hasValue(client)}
+              name="password"
+              value={password}
+              placeholder="Password"
+              setValue={setPassword}
+            />
          </fieldset>
          {user?.scope !== USER_ACCOUNT && (
            <fieldset>
              <AccountSelect
                accounts={accounts}
                account={[accountSid, setAccountSid]}
-                label="Belongs to"
+                label="Used by"
                required={true}
                defaultOption={false}
                disabled={hasValue(client)}
--- a/src/containers/internal/views/clients/index.tsx
+++ b/src/containers/internal/views/clients/index.tsx
@@ -2,7 +2,7 @@ import { Button, H1, Icon, M } from "@jambonz/ui-kit";
 import React, { useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import { deleteClient, useApiData, useServiceProviderData } from "src/api";
-import { Account, Client, CurrentUserData } from "src/api/types";
+import { Account, Client } from "src/api/types";
 import {
  AccountFilter,
  Icons,
@@ -20,14 +20,10 @@ import { USER_ACCOUNT } from "src/api/constants";

 export const Clients = () => {
  const user = useSelectState("user");
-  const [userData] = useApiData<CurrentUserData>("Users/me");
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
  const [clients, refetch] = useApiData<Client[]>("Clients");

  const [accountSid, setAccountSid] = useState("");
-  const [selectedAccount, setSelectedAccount] = useState<
-    Account | null | undefined
-  >(null);
  const [filter, setFilter] = useState("");
  const [client, setClient] = useState<Client | null>();

@@ -37,19 +33,13 @@ export const Clients = () => {
      return clients;
    }

-    setSelectedAccount(
-      accountSid
-        ? accounts?.find((a: Account) => a.account_sid === accountSid)
-        : null,
-    );
-
    return clients
      ? clients.filter((c) => {
          return accountSid
            ? c.account_sid === accountSid
            : accounts
-              ? accounts.map((a) => a.account_sid).includes(c.account_sid || "")
-              : false;
+            ? accounts.map((a) => a.account_sid).includes(c.account_sid || "")
+            : false;
        })
      : [];
  }, [accountSid, clients, accounts]);
@@ -62,8 +52,8 @@ export const Clients = () => {
        .then(() => {
          toastSuccess(
            <>
-              Deleted sip client <strong>{client.username}</strong>
-            </>,
+              Deleted outbound call route <strong>{client.username}</strong>
+            </>
          );
          setClient(null);
          refetch();
@@ -77,48 +67,8 @@ export const Clients = () => {
  return (
    <>
      <section className="mast">
-        <div>
-          <H1 className="h2">SIP client credentials</H1>
-          {user?.scope === USER_ACCOUNT ? (
-            userData?.account?.sip_realm ? (
-              <>
-                <M>
-                  Your sip realm is <span>{userData?.account?.sip_realm}</span>
-                </M>
-                <M>
-                  You can add sip credentials below to allow sip devices to
-                  register to this realm and make calls.
-                </M>
-              </>
-            ) : (
-              <M>
-                You need to associate a sip realm to this account in order to
-                add sip credentials.
-              </M>
-            )
-          ) : selectedAccount ? (
-            selectedAccount?.sip_realm ? (
-              <>
-                <M>
-                  Your sip realm is <span>{selectedAccount.sip_realm}</span>
-                </M>
-                <M>
-                  You can add sip credentials below to allow sip devices to
-                  register to this realm and make calls.
-                </M>
-              </>
-            ) : (
-              <M>
-                You need to associate a sip realm to this account in order to
-                add sip credentials.
-              </M>
-            )
-          ) : (
-            <></>
-          )}
-        </div>
-
-        <Link to={`${ROUTE_INTERNAL_CLIENTS}/add`} title="Add sip client">
+        <H1 className="h2">Clients</H1>
+        <Link to={`${ROUTE_INTERNAL_CLIENTS}/add`} title="Add a client">
          {" "}
          <Icon>
            <Icons.Plus />
@@ -126,7 +76,7 @@ export const Clients = () => {
        </Link>
      </section>

-      <section className="filters filters--multi">
+      <section className="filters filters--spaced">
        <SearchFilter
          placeholder="Filter clients"
          filter={[filter, setFilter]}
@@ -179,7 +129,7 @@ export const Clients = () => {
                        <span>
                          {
                            accounts?.find(
-                              (acct) => acct.account_sid === c.account_sid,
+                              (acct) => acct.account_sid === c.account_sid
                            )?.name
                          }
                        </span>
@@ -206,13 +156,13 @@ export const Clients = () => {
              </div>
            ))
          ) : (
-            <M>No sip clients.</M>
+            <M>No Clients.</M>
          )}
        </div>
      </Section>
      <Section clean>
        <Button small as={Link} to={`${ROUTE_INTERNAL_CLIENTS}/add`}>
-          Add sip client
+          Add client
        </Button>
      </Section>
      {client && (
--- a/src/containers/internal/views/least-cost-routing/card.tsx
+++ b/src/containers/internal/views/least-cost-routing/card.tsx
@@ -27,7 +27,7 @@ type CardProps = {
    index1: number,
    index2: number,
    key: string,
-    value: unknown,
+    value: unknown
  ) => void;
  handleRouteDelete: (lr: LcrRoute, index: number) => void;
  carrierSelectorOptions: SelectorOption[];
@@ -141,6 +141,7 @@ export const Card = ({
        <Selector
          id={`lcr_carrier_set_entry_carrier_${index}`}
          name={`lcr_carrier_set_entry_carrier_${index}`}
+          placeholder="Carrier"
          value={
            lr.lcr_carrier_set_entries && lr.lcr_carrier_set_entries.length > 0
              ? lr.lcr_carrier_set_entries[0].voip_carrier_sid
@@ -155,7 +156,7 @@ export const Card = ({
              index,
              0,
              "voip_carrier_sid",
-              e.target.value,
+              e.target.value
            );
          }}
        />
--- a/src/containers/internal/views/least-cost-routing/container.tsx
+++ b/src/containers/internal/views/least-cost-routing/container.tsx
@@ -6,6 +6,7 @@ import update from "immutability-helper";
 import { deleteLcrRoute } from "src/api";
 import { toastError, toastSuccess } from "src/store";
 import { SelectorOption } from "src/components/forms/selector";
+import { NOT_AVAILABLE_PREFIX } from "src/constants";

 type ContainerProps = {
  lcrRoute: [LcrRoute[], React.Dispatch<React.SetStateAction<LcrRoute[]>>];
@@ -23,13 +24,13 @@ export const Container = ({
          [dragIndex, 1],
          [hoverIndex, 0, prevCards[dragIndex]],
        ],
-      }),
+      })
    );
  };

  const updateLcrRoute = (index: number, key: string, value: unknown) => {
    setLcrRoutes(
-      lcrRoutes.map((lr, i) => (i === index ? { ...lr, [key]: value } : lr)),
+      lcrRoutes.map((lr, i) => (i === index ? { ...lr, [key]: value } : lr))
    );
  };

@@ -37,7 +38,7 @@ export const Container = ({
    index1: number,
    index2: number,
    key: string,
-    value: unknown,
+    value: unknown
  ) => {
    setLcrRoutes(
      lcrRoutes.map((lr, i) =>
@@ -51,16 +52,20 @@ export const Container = ({
                        ...entry,
                        [key]: value,
                      }
-                    : entry,
+                    : entry
              ),
            }
-          : lr,
-      ),
+          : lr
+      )
    );
  };

  const handleRouteDelete = (r: LcrRoute | undefined, index: number) => {
-    if (r && r.lcr_route_sid) {
+    if (
+      r &&
+      r.lcr_route_sid &&
+      !r.lcr_route_sid.startsWith(NOT_AVAILABLE_PREFIX)
+    ) {
      deleteLcrRoute(r.lcr_route_sid)
        .then(() => {
          toastSuccess("Least cost routing rule successfully deleted");
@@ -77,7 +82,7 @@ export const Container = ({
      {hasLength(lcrRoutes) &&
        lcrRoutes.map((lr, i) => (
          <Card
-            key={lr.lcr_route_sid || i}
+            key={lr.lcr_route_sid}
            lr={lr}
            index={i}
            moveCard={moveCard}
--- a/src/containers/internal/views/least-cost-routing/edit.tsx
+++ b/src/containers/internal/views/least-cost-routing/edit.tsx
@@ -7,10 +7,10 @@ import { useParams } from "react-router-dom";
 export const EditLcr = () => {
  const params = useParams();
  const [lcrData, lcrRefect, lcrError] = useApiData<Lcr>(
-    `Lcrs/${params.lcr_sid}`,
+    `Lcrs/${params.lcr_sid}`
  );
  const [lcrRouteData, lcrRouteRefect, lcrRouteError] = useApiData<LcrRoute[]>(
-    `LcrRoutes?lcr_sid=${params.lcr_sid}`,
+    `LcrRoutes?lcr_sid=${params.lcr_sid}`
  );
  return (
    <>
--- a/src/containers/internal/views/least-cost-routing/form.tsx
+++ b/src/containers/internal/views/least-cost-routing/form.tsx
@@ -8,33 +8,37 @@ import {
  useDispatch,
  useSelectState,
 } from "src/store";
-import { MSG_REQUIRED_FIELDS } from "src/constants";
+import { MSG_REQUIRED_FIELDS, NOT_AVAILABLE_PREFIX } from "src/constants";
 import { setLocation } from "src/store/localStore";
 import { AccountSelect, Message, Selector } from "src/components/forms";
 import type {
  Account,
  Carrier,
  Lcr,
+  LcrCarrierSetEntry,
  LcrRoute,
  UseApiDataMap,
 } from "src/api/types";
 import { ROUTE_INTERNAL_LEST_COST_ROUTING } from "src/router/routes";
 import {
  deleteLcr,
+  postLcrCarrierSetEntry,
+  putLcrCarrierSetEntries,
+  putLcrRoutes,
  putLcr,
-  postLcrCreateRoutes,
-  putLcrUpdateRoutes,
  useApiData,
  useServiceProviderData,
+  getLcrRoute,
 } from "src/api";
 import { USER_ACCOUNT, USER_ADMIN } from "src/api/constants";
 import { postLcr } from "src/api";
+import { postLcrRoute } from "src/api";
 import DeleteLcr from "./delete";
 import { Scope } from "src/store/types";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import Container from "./container";
-import { hasValue } from "src/utils";
+import { v4 } from "uuid";

 type LcrFormProps = {
  lcrDataMap?: UseApiDataMap<Lcr>;
@@ -43,7 +47,7 @@ type LcrFormProps = {

 export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
  const LCR_ROUTE_TEMPLATE: LcrRoute = {
-    lcr_route_sid: "",
+    lcr_route_sid: `${NOT_AVAILABLE_PREFIX}${v4()}`,
    regex: "",
    lcr_sid: "",
    priority: 0,
@@ -64,7 +68,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
  const [defaultLcrCarrier, setDefaultLcrCarrier] = useState("");
  const [defaultLcrCarrierSetEntrySid, setDefaultLcrCarrierSetEntrySid] =
    useState<string | null>();
-  const [defaultLcrRoute, setDefaultLcrRoute] = useState<LcrRoute | null>(null);
+  const [defaultLcrRouteSid, setDefaultLcrRouteSid] = useState("");
  const [defaultCarrier, setDefaultCarrier] = useState("");
  const [apiUrl, setApiUrl] = useState("");
  const [accountSid, setAccountSid] = useState("");
@@ -85,7 +89,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
    setLocation();
    if (currentServiceProvider) {
      setApiUrl(
-        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers`,
+        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers`
      );
    }
  }, [user, currentServiceProvider, accountSid]);
@@ -99,7 +103,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
      ? carriers.filter((carrier) =>
          accountSid
            ? carrier.account_sid === accountSid
-            : carrier.account_sid === null,
+            : carrier.account_sid === null
        )
      : [];

@@ -118,7 +122,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
      setErrorMessage(
        accountSid
          ? "There are no available carriers defined for this account"
-          : "There are no available carriers",
+          : "There are no available carriers"
      );
    } else {
      setErrorMessage("");
@@ -132,53 +136,44 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
    setPreviousLcr(lcrDataMap.data);
  }

-  useMemo(() => {
-    let default_lcr_route_sid = "";
-    if (
-      lcrRouteDataMap &&
-      lcrRouteDataMap.data &&
-      lcrRouteDataMap.data !== previousLcrRoutes
-    ) {
-      setPreviousLcrRoutes(lcrRouteDataMap.data);
-      // Find default carrier
-      lcrRouteDataMap.data.forEach((lr) => {
-        lr.lcr_carrier_set_entries?.forEach((entry) => {
-          if (
-            entry.lcr_carrier_set_entry_sid ===
-            lcrDataMap?.data?.default_carrier_set_entry_sid
-          ) {
-            setDefaultLcrCarrier(entry.voip_carrier_sid || defaultCarrier);
-            setDefaultLcrCarrierSetEntrySid(
-              entry.lcr_carrier_set_entry_sid || null,
-            );
-            default_lcr_route_sid = entry.lcr_route_sid || "";
-            setDefaultLcrRoute(lr);
-          }
-        });
+  if (
+    lcrRouteDataMap &&
+    lcrRouteDataMap.data &&
+    lcrRouteDataMap.data !== previousLcrRoutes
+  ) {
+    setPreviousLcrRoutes(lcrRouteDataMap.data);
+    // Find default carrier
+    lcrRouteDataMap.data.forEach((lr) => {
+      lr.lcr_carrier_set_entries?.forEach((entry) => {
+        if (
+          entry.lcr_carrier_set_entry_sid ===
+          lcrDataMap?.data?.default_carrier_set_entry_sid
+        ) {
+          setDefaultLcrCarrier(entry.voip_carrier_sid || defaultCarrier);
+          setDefaultLcrCarrierSetEntrySid(
+            entry.lcr_carrier_set_entry_sid || null
+          );
+          setDefaultLcrRouteSid(entry.lcr_route_sid || "");
+        }
      });
-    }
+    });
+  }

+  useMemo(() => {
    if (lcrRouteDataMap && lcrRouteDataMap.data)
      setLcrRoutes(
        lcrRouteDataMap.data.filter(
-          (route) => route.lcr_route_sid !== default_lcr_route_sid,
-        ),
+          (route) => route.lcr_route_sid !== defaultLcrRouteSid
+        )
      );
-  }, [lcrRouteDataMap?.data]);
+  }, [defaultLcrRouteSid]);

  const addLcrRoutes = () => {
-    const newLcrRoute = LCR_ROUTE_TEMPLATE;
    const ls = [
      ...lcrRoutes,
      {
-        ...newLcrRoute,
+        ...LCR_ROUTE_TEMPLATE,
        priority: lcrRoutes.length,
-        lcr_carrier_set_entries: newLcrRoute.lcr_carrier_set_entries?.map(
-          (r) => ({
-            ...r,
-            voip_carrier_sid: defaultCarrier || carrierSelectorOptions[0].value,
-          }),
-        ),
      },
    ];
    setLcrRoutes(ls);
@@ -199,48 +194,11 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
    const lcrPayload: Lcr = getLcrPayload();
    postLcr(lcrPayload)
      .then(({ json }) => {
-        const lcrsPayload = lcrRoutes.map((l, i) => ({
-          ...l,
-          lcr_carrier_set_entries: l.lcr_carrier_set_entries?.map((e) => ({
-            ...e,
-            voip_carrier_sid:
-              e.voip_carrier_sid ||
-              defaultCarrier ||
-              carrierSelectorOptions[0]?.value,
-          })),
-          lcr_sid: json.sid,
-          priority: i,
-        }));
-        lcrsPayload.push({
-          lcr_sid: json.sid,
-          regex: ".*",
-          description: "System Default Route",
-          priority: 9999,
-          lcr_carrier_set_entries: [
-            {
-              lcr_route_sid: "",
-              voip_carrier_sid:
-                defaultLcrCarrier || carrierSelectorOptions[0]?.value,
-              priority: 0,
-            },
-          ],
-        });
-        postLcrCreateRoutes(json.sid, lcrsPayload)
+        Promise.all(
+          lcrRoutes.map((route, i) => handleLcrRoutePost(json.sid, route, i))
+        )
          .then(() => {
-            if (lcrDataMap) {
-              toastSuccess("Least cost routing successfully updated");
-            } else {
-              toastSuccess("Least cost routing successfully created");
-              if (user?.access === Scope.admin) {
-                navigate(ROUTE_INTERNAL_LEST_COST_ROUTING);
-              } else {
-                navigate(
-                  `${ROUTE_INTERNAL_LEST_COST_ROUTING}/${json.sid}/edit`,
-                );
-              }
-              // Update global state
-              dispatch({ type: "lcr" });
-            }
+            handleLcrDefaultCarrierPost(json.sid);
          })
          .catch(({ msg }) => {
            toastError(msg);
@@ -251,38 +209,209 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
      });
  };

+  const handleLcrDefaultCarrierPost = (lcr_sid: string) => {
+    const defaultRoute = {
+      lcr_sid: lcr_sid,
+      regex: ".*",
+      desciption: "System Default Route",
+      priority: 9999,
+      lcr_carrier_set_entries: [
+        {
+          lcr_route_sid: "",
+          voip_carrier_sid: defaultLcrCarrier,
+          priority: 0,
+        },
+      ],
+    };
+
+    handleLcrRoutePost(lcr_sid, defaultRoute, 9999).then((lcr_route_sid) => {
+      // There is small hack here to wait the data commited in bd for lcr entries
+      new Promise(async (r) => setTimeout(() => r(0), 300)).then(() => {
+        getLcrRoute(lcr_route_sid).then(({ json }) => {
+          if (json.lcr_carrier_set_entries?.length) {
+            const lcr_carrier_set_entry_sid =
+              json.lcr_carrier_set_entries[0].lcr_carrier_set_entry_sid;
+            putLcr(lcr_sid, {
+              default_carrier_set_entry_sid: lcr_carrier_set_entry_sid,
+            })
+              .then(() => {
+                if (lcrDataMap) {
+                  toastSuccess("Least cost routing successfully updated");
+                } else {
+                  toastSuccess("Least cost routing successfully created");
+                  if (user?.access === Scope.admin) {
+                    navigate(ROUTE_INTERNAL_LEST_COST_ROUTING);
+                  } else {
+                    navigate(
+                      `${ROUTE_INTERNAL_LEST_COST_ROUTING}/${lcr_sid}/edit`
+                    );
+                  }
+                  // Update global state
+                  dispatch({ type: "lcr" });
+                }
+              })
+              .catch((error) => {
+                toastError(error);
+              });
+          }
+        });
+      });
+    });
+  };
+
+  const handleLcrRoutePost = (
+    lcr_sid: string,
+    route: LcrRoute,
+    priority: number
+  ): Promise<string> => {
+    return new Promise(async (resolve, reject) => {
+      const lcrRoutePayload: LcrRoute = {
+        lcr_sid,
+        regex: route.regex,
+        priority,
+      };
+      postLcrRoute(lcrRoutePayload)
+        .then(({ json }) => {
+          if (route.lcr_carrier_set_entries) {
+            Promise.all(
+              route.lcr_carrier_set_entries.map((entry) => {
+                handleLcrCarrierSetEntryPost(json.sid, entry);
+              })
+            )
+              .then(() => {
+                resolve(json.sid);
+              })
+              .catch((error) => {
+                reject(error);
+              });
+          }
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  };
+
+  const handleLcrCarrierSetEntryPost = (
+    lcr_route_sid: string,
+    entry: LcrCarrierSetEntry
+  ): Promise<string> => {
+    const lcrCarrierSetEntryPayload: LcrCarrierSetEntry = {
+      ...entry,
+      voip_carrier_sid: entry.voip_carrier_sid || defaultCarrier,
+      lcr_route_sid,
+    };
+    return new Promise<string>(async (r, e) => {
+      postLcrCarrierSetEntry(lcrCarrierSetEntryPayload)
+        .then(({ json }) => r(json.sid))
+        .catch((error) => e(error));
+    });
+  };
+
  const handleLcrPut = () => {
    if (lcrDataMap && lcrDataMap.data && lcrDataMap.data.lcr_sid) {
      // update LCR
      const lcrPayload: Lcr = getLcrPayload();
      putLcr(lcrDataMap.data.lcr_sid, lcrPayload).then(() => {
-        putLcrUpdateRoutes(lcrDataMap.data?.lcr_sid || "", [
-          ...lcrRoutes.map((r, i) => ({
-            ...r,
-            priority: i,
-          })),
-          ...(hasValue(defaultLcrRoute)
-            ? [
-                {
-                  ...defaultLcrRoute,
-                  lcr_carrier_set_entries:
-                    defaultLcrRoute.lcr_carrier_set_entries?.map((r) => ({
-                      ...r,
-                      voip_carrier_sid:
-                        defaultLcrCarrier ||
-                        r.voip_carrier_sid ||
-                        carrierSelectorOptions[0].value,
-                    })),
-                },
-              ]
-            : []),
-        ])
+        Promise.all(
+          lcrRoutes.map((route, i) => {
+            if (
+              route.lcr_route_sid &&
+              !route.lcr_route_sid?.startsWith(NOT_AVAILABLE_PREFIX)
+            ) {
+              handleLcrRoutePut(
+                lcrDataMap.data?.lcr_sid || "",
+                route.lcr_route_sid,
+                route,
+                i
+              );
+            } else {
+              handleLcrRoutePost(lcrDataMap.data?.lcr_sid || "", route, i);
+            }
+          })
+        )
          .then(() => {
-            toastSuccess("Least cost routing rule successfully updated");
+            if (defaultLcrCarrierSetEntrySid) {
+              const defaultEntry: LcrCarrierSetEntry = {
+                lcr_route_sid: defaultLcrRouteSid,
+                voip_carrier_sid: defaultLcrCarrier,
+                priority: 0,
+              };
+
+              handleLcrCarrierEntryPut(
+                defaultLcrRouteSid,
+                defaultLcrCarrierSetEntrySid,
+                defaultEntry
+              ).then(() => {
+                toastSuccess("Least cost routing rule successfully updated");
+              });
+            }
          })
          .catch((error) => toastError(error));
      });
    }
+
+    const handleLcrRoutePut = (
+      lcr_sid: string,
+      lcr_route_sid: string,
+      route: LcrRoute,
+      priority: number
+    ): Promise<string> => {
+      return new Promise(async (resolve, reject) => {
+        const lcrRoutePayload: LcrRoute = {
+          lcr_sid,
+          regex: route.regex,
+          priority,
+        };
+        putLcrRoutes(lcr_route_sid, lcrRoutePayload).then(() => {
+          if (
+            route.lcr_carrier_set_entries &&
+            route.lcr_carrier_set_entries.length > 0
+          ) {
+            Promise.all(
+              route.lcr_carrier_set_entries.map((entry) => {
+                if (entry.lcr_carrier_set_entry_sid) {
+                  return handleLcrCarrierEntryPut(
+                    entry.lcr_route_sid || lcr_route_sid,
+                    entry.lcr_carrier_set_entry_sid,
+                    entry
+                  );
+                } else {
+                  return handleLcrCarrierSetEntryPost(lcr_route_sid, entry);
+                }
+              })
+            )
+              .then(() => {
+                resolve("Least cost routing rule successfully updated");
+              })
+              .catch((error) => {
+                reject(error);
+              });
+          }
+        });
+      });
+    };
+
+    const handleLcrCarrierEntryPut = (
+      lcr_route_sid: string,
+      lcr_carrier_set_entry_sid: string,
+      entry: LcrCarrierSetEntry
+    ): Promise<string> => {
+      const lcrCarrierSetEntryPayload: LcrCarrierSetEntry = {
+        lcr_route_sid,
+        workload: entry.workload,
+        voip_carrier_sid: entry.voip_carrier_sid || defaultCarrier,
+        priority: entry.priority,
+      };
+      return new Promise<string>(async (r, e) => {
+        putLcrCarrierSetEntries(
+          lcr_carrier_set_entry_sid,
+          lcrCarrierSetEntryPayload
+        )
+          .then(() => r("success"))
+          .catch((error) => e(error));
+      });
+    };
  };

  const handleSubmit = (e: React.FormEvent) => {
@@ -301,7 +430,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
          toastSuccess(
            <>
              Deleted least cost routing <strong>{lcrForDelete?.name}</strong>
-            </>,
+            </>
          );
          setLcrForDelete(null);
          if (user?.access === Scope.admin) {
@@ -320,12 +449,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
  return (
    <>
      <Section slim>
-        <form
-          className={`form form--internal ${
-            !lcrDataMap?.data && lcrDataMap?.refetch ? "form--blur" : ""
-          }`}
-          onSubmit={handleSubmit}
-        >
+        <form className="form form--internal" onSubmit={handleSubmit}>
          <fieldset>
            <MS>{MSG_REQUIRED_FIELDS}</MS>
            {errorMessage && <Message message={errorMessage} />}
--- a/src/containers/internal/views/least-cost-routing/index.tsx
+++ b/src/containers/internal/views/least-cost-routing/index.tsx
@@ -32,7 +32,7 @@ export const Lcrs = () => {
    Scope.admin,
    `${ROUTE_INTERNAL_LEST_COST_ROUTING}/add`,
    user,
-    "You do not have permissions to manage all outbound call routes",
+    "You do not have permissions to manage all outbound call routes"
  );
  const [lcrs, refetch] = useApiData<Lcr[]>("Lcrs");
  const [filter, setFilter] = useState("");
@@ -53,9 +53,9 @@ export const Lcrs = () => {
          accountSid
            ? lcr.account_sid === accountSid
            : currentServiceProvider?.service_provider_sid
-              ? lcr.service_provider_sid ==
-                currentServiceProvider.service_provider_sid
-              : lcr.account_sid === null,
+            ? lcr.service_provider_sid ==
+              currentServiceProvider.service_provider_sid
+            : lcr.account_sid === null
        )
      : [];
  }, [accountSid, lcrs]);
@@ -68,7 +68,7 @@ export const Lcrs = () => {
          toastSuccess(
            <>
              Deleted outbound call route <strong>{lcr?.name}</strong>
-            </>,
+            </>
          );
          setLcr(null);
          refetch();
@@ -99,7 +99,7 @@ export const Lcrs = () => {
          multiple carriers available.
        </M>
      </section>
-      <section className="filters filters--multi">
+      <section className="filters filters--spaced">
        <SearchFilter placeholder="Filter lcrs" filter={[filter, setFilter]} />
        <ScopedAccess user={user} scope={Scope.admin}>
          <AccountFilter
@@ -156,7 +156,7 @@ export const Lcrs = () => {
                        <span>
                          {lcr.account_sid
                            ? accounts?.find(
-                                (acct) => acct.account_sid === lcr.account_sid,
+                                (acct) => acct.account_sid === lcr.account_sid
                              )?.name
                            : currentServiceProvider?.name}
                        </span>
--- a/src/containers/internal/views/least-cost-routing/styles.scss
+++ b/src/containers/internal/views/least-cost-routing/styles.scss
@@ -4,9 +4,7 @@
 }

 .lcr-card:hover {
-  box-shadow:
-    -7px 7px 5px #d5d7db,
-    -5px -5px 10px #ffffff;
+  box-shadow: -7px 7px 5px #d5d7db, -5px -5px 10px #ffffff;
  transform: translateY(-3px) translateX(-3px);
 }

--- a/src/containers/internal/views/ms-teams-tenants/edit.tsx
+++ b/src/containers/internal/views/ms-teams-tenants/edit.tsx
@@ -11,7 +11,7 @@ import type { MSTeamsTenant } from "src/api/types";
 export const EditMsTeamsTenant = () => {
  const params = useParams();
  const [data, refetch, error] = useApiData<MSTeamsTenant>(
-    `MicrosoftTeamsTenants/${params.ms_teams_tenant_sid}`,
+    `MicrosoftTeamsTenants/${params.ms_teams_tenant_sid}`
  );

  useEffect(() => {
--- a/src/containers/internal/views/ms-teams-tenants/form.tsx
+++ b/src/containers/internal/views/ms-teams-tenants/form.tsx
@@ -49,7 +49,7 @@ export const MsTeamsTenantForm = ({
  useRedirect<Account>(
    accounts,
    ROUTE_INTERNAL_ACCOUNTS,
-    "You must create an account before you can create an Microsoft Teams Tenant.",
+    "You must create an account before you can create an Microsoft Teams Tenant."
  );

  const handleSubmit = (e: React.FormEvent) => {
@@ -63,7 +63,7 @@ export const MsTeamsTenantForm = ({
          ? msTeamsTenants.filter(
              (a) =>
                a.ms_teams_tenant_sid !==
-                msTeamsTenant.data!.ms_teams_tenant_sid,
+                msTeamsTenant.data!.ms_teams_tenant_sid
            )
          : msTeamsTenants;

@@ -120,12 +120,7 @@ export const MsTeamsTenantForm = ({

  return (
    <Section slim>
-      <form
-        className={`form form--internal ${
-          !msTeamsTenant?.data && msTeamsTenant?.refetch ? "form--blur" : ""
-        }`}
-        onSubmit={handleSubmit}
-      >
+      <form className="form form--internal" onSubmit={handleSubmit}>
        <fieldset>
          <MS>{MSG_REQUIRED_FIELDS}</MS>
        </fieldset>
@@ -156,7 +151,7 @@ export const MsTeamsTenantForm = ({
            applications={
              applications
                ? applications.filter(
-                    (application) => application.account_sid === accountSid,
+                    (application) => application.account_sid === accountSid
                  )
                : []
            }
--- a/src/containers/internal/views/ms-teams-tenants/index.tsx
+++ b/src/containers/internal/views/ms-teams-tenants/index.tsx
@@ -32,10 +32,10 @@ import type { ACLGetIMessage } from "src/utils/with-access-control";

 export const MSTeamsTenants = () => {
  const [msTeamsTenant, setMsTeamsTenant] = useState<MSTeamsTenant | null>(
-    null,
+    null
  );
  const [msTeamsTenants, refetch] = useApiData<MSTeamsTenant[]>(
-    "MicrosoftTeamsTenants",
+    "MicrosoftTeamsTenants"
  );
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
  const [applications] = useServiceProviderData<Application[]>("Applications");
@@ -45,14 +45,14 @@ export const MSTeamsTenants = () => {
  const msTeamsTenantsFiltered = useMemo(() => {
    return msTeamsTenants
      ? msTeamsTenants.filter(
-          (mst) => !accountSid || mst.account_sid === accountSid,
+          (mst) => !accountSid || mst.account_sid === accountSid
        )
      : [];
  }, [accountSid, msTeamsTenants]);

  const filteredMsTeamsTenants = useFilteredResults<MSTeamsTenant>(
    filter,
-    msTeamsTenantsFiltered,
+    msTeamsTenantsFiltered
  );

  const handleDelete = () => {
@@ -65,7 +65,7 @@ export const MSTeamsTenants = () => {
            <>
              Deleted Microsoft Teams Tenant{" "}
              <strong>{msTeamsTenant.tenant_fqdn}</strong>
-            </>,
+            </>
          );
        })
        .catch((error) => {
@@ -89,7 +89,7 @@ export const MSTeamsTenants = () => {
          </Link>
        )}
      </section>
-      <section className="filters filters--multi">
+      <section className="filters filters--spaced">
        <SearchFilter
          placeholder="Filter ms teams tenants"
          filter={[filter, setFilter]}
@@ -131,8 +131,7 @@ export const MSTeamsTenants = () => {
                            {
                              accounts?.find(
                                (acct) =>
-                                  acct.account_sid ===
-                                  msTeamsTenant.account_sid,
+                                  acct.account_sid === msTeamsTenant.account_sid
                              )?.name
                            }
                          </span>
@@ -149,7 +148,7 @@ export const MSTeamsTenants = () => {
                            {applications?.find(
                              (app) =>
                                app.application_sid ===
-                                msTeamsTenant.application_sid,
+                                msTeamsTenant.application_sid
                            )?.name || "None"}
                          </span>
                        </div>
@@ -218,5 +217,5 @@ const getAclIMessage: ACLGetIMessage = (currentServiceProvider) => {

 export default withAccessControl(
  "hasMSTeamsFqdn",
-  getAclIMessage,
+  getAclIMessage
 )(MSTeamsTenants);
--- a/src/containers/internal/views/phone-numbers/edit.tsx
+++ b/src/containers/internal/views/phone-numbers/edit.tsx
@@ -11,7 +11,7 @@ import type { PhoneNumber } from "src/api/types";
 export const EditPhoneNumber = () => {
  const params = useParams();
  const [data, refetch, error] = useApiData<PhoneNumber>(
-    `PhoneNumbers/${params.phone_number_sid}`,
+    `PhoneNumbers/${params.phone_number_sid}`
  );

  useEffect(() => {
--- a/src/containers/internal/views/phone-numbers/form.tsx
+++ b/src/containers/internal/views/phone-numbers/form.tsx
@@ -51,13 +51,13 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
  useRedirect<Account>(
    accounts,
    ROUTE_INTERNAL_ACCOUNTS,
-    "You must create an account before you can create a phone number.",
+    "You must create an account before you can create a phone number."
  );

  useRedirect<Carrier>(
    carriers,
    ROUTE_INTERNAL_CARRIERS,
-    "You must create a SIP trunk before you can create a phone number.",
+    "You must create a SIP trunk before you can create a phone number."
  );

  const handleSubmit = (e: React.FormEvent) => {
@@ -69,7 +69,7 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
      const filtered =
        phoneNumber && phoneNumber.data
          ? phoneNumbers.filter(
-              (a) => a.phone_number_sid !== phoneNumber.data!.phone_number_sid,
+              (a) => a.phone_number_sid !== phoneNumber.data!.phone_number_sid
            )
          : phoneNumbers;

@@ -90,7 +90,7 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
          phoneNumber.refetch();
          toastSuccess("Phone number updated successfully");
          navigate(
-            `${ROUTE_INTERNAL_PHONE_NUMBERS}/${phoneNumber.data?.phone_number_sid}/edit`,
+            `${ROUTE_INTERNAL_PHONE_NUMBERS}/${phoneNumber.data?.phone_number_sid}/edit`
          );
        })
        .catch((error) => {
@@ -141,12 +141,7 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
  return (
    <>
      <Section slim>
-        <form
-          className={`form form--internal ${
-            !phoneNumber?.data && phoneNumber?.refetch ? "form--blur" : ""
-          }`}
-          onSubmit={handleSubmit}
-        >
+        <form className="form form--internal" onSubmit={handleSubmit}>
          <fieldset>
            <MS>{MSG_REQUIRED_FIELDS}</MS>
          </fieldset>
@@ -201,7 +196,7 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
              applications={
                applications
                  ? applications.filter(
-                      (application) => application.account_sid === accountSid,
+                      (application) => application.account_sid === accountSid
                    )
                  : []
              }
--- a/src/containers/internal/views/phone-numbers/index.tsx
+++ b/src/containers/internal/views/phone-numbers/index.tsx
@@ -56,14 +56,14 @@ export const PhoneNumbers = () => {
    setAccountSid(getAccountFilter());
    return phoneNumbers
      ? phoneNumbers.filter(
-          (phn) => !accountSid || phn.account_sid === accountSid,
+          (phn) => !accountSid || phn.account_sid === accountSid
        )
      : [];
  }, [accountSid, phoneNumbers]);

  const filteredPhoneNumbers = useFilteredResults<PhoneNumber>(
    filter,
-    phoneNumbersFiltered,
+    phoneNumbersFiltered
  );

  const handleMassEdit = () => {
@@ -74,7 +74,7 @@ export const PhoneNumbers = () => {
        };

        return putPhoneNumber(phoneNumber.phone_number_sid, payload);
-      }),
+      })
    )
      .then(() => {
        refetch();
@@ -98,7 +98,7 @@ export const PhoneNumbers = () => {
          toastSuccess(
            <>
              Deleted phone number <strong>{phoneNumber.number}</strong>
-            </>,
+            </>
          );
        })
        .catch((error) => {
@@ -129,7 +129,7 @@ export const PhoneNumbers = () => {
          </Link>
        )}
      </section>
-      <section className="filters filters--multi">
+      <section className="filters filters--spaced">
        <SearchFilter
          placeholder="Filter phone numbers"
          filter={[filter, setFilter]}
@@ -177,7 +177,7 @@ export const PhoneNumbers = () => {
                          application={[applicationSid, setApplicationSid]}
                          applications={applications?.filter(
                            (application) =>
-                              application.account_sid === accountSid,
+                              application.account_sid === accountSid
                          )}
                          defaultOption="None"
                        />
@@ -224,7 +224,7 @@ export const PhoneNumbers = () => {
                              selectedPhoneNumbers.find(
                                (phone) =>
                                  phone.phone_number_sid ===
-                                  phoneNumber.phone_number_sid,
+                                  phoneNumber.phone_number_sid
                              )
                                ? true
                                : false
@@ -240,8 +240,8 @@ export const PhoneNumbers = () => {
                                  curr.filter(
                                    (phone) =>
                                      phone.phone_number_sid !==
-                                      phoneNumber.phone_number_sid,
-                                  ),
+                                      phoneNumber.phone_number_sid
+                                  )
                                );
                              }
                            }}
@@ -270,8 +270,7 @@ export const PhoneNumbers = () => {
                              {
                                accounts?.find(
                                  (acct) =>
-                                    acct.account_sid ===
-                                    phoneNumber.account_sid,
+                                    acct.account_sid === phoneNumber.account_sid
                                )?.name
                              }
                            </span>
@@ -288,7 +287,7 @@ export const PhoneNumbers = () => {
                              {applications?.find(
                                (app) =>
                                  app.application_sid ===
-                                  phoneNumber.application_sid,
+                                  phoneNumber.application_sid
                              )?.name || "None"}
                            </span>
                          </div>
--- a/src/containers/internal/views/recent-calls/call-tracing.tsx
+++ b/src/containers/internal/views/recent-calls/call-tracing.tsx
@@ -98,7 +98,7 @@ export const CallTracing = ({ call }: CallTracingProps) => {
        rootGroup.children = buildChildren(
          rootGroup.level + 1,
          rootGroup,
-          groups,
+          groups
        );
        setJaegerGroup(rootGroup);
      }
@@ -108,7 +108,7 @@ export const CallTracing = ({ call }: CallTracingProps) => {
  const buildChildren = (
    level: number,
    rootGroup: JaegerGroup,
-    groups: JaegerGroup[],
+    groups: JaegerGroup[]
  ): JaegerGroup[] => {
    return getGroupsByParent(rootGroup.spanId, groups).map((group) => {
      group.level = level;
--- a/src/containers/internal/views/recent-calls/jaeger/detail.tsx
+++ b/src/containers/internal/views/recent-calls/jaeger/detail.tsx
@@ -3,7 +3,6 @@ import { JaegerGroup, JaegerValue } from "src/api/jaeger-types";
 import dayjs from "dayjs";
 import "./styles.scss";
 import { formattedDuration } from "./utils";
-import { getSpansByNameRegex } from "../utils";

 type JaegerDetailProps = {
  group: JaegerGroup;
@@ -66,37 +65,6 @@ export const JaegerDetail = ({ group }: JaegerDetailProps) => {
            </div>
          </div>
        ))}
-
-        {/* TTS Streaming Attrs */}
-        {group.children.length &&
-          getSpansByNameRegex(group.children, /tts-generation/)?.map((span) => {
-            return span.attributes.map((attribute) => {
-              if (
-                ![
-                  "tts.vendor",
-                  "tts.language",
-                  "tts.voice",
-                  "tts.cached",
-                  "engine",
-                  "voice",
-                ].includes(attribute.key)
-              ) {
-                return (
-                  <div
-                    key={attribute.key}
-                    className="spanDetailsWrapper__details"
-                  >
-                    <div className="spanDetailsWrapper__details_header">
-                      <strong>{attribute.key}</strong>:
-                    </div>
-                    <div className="spanDetailsWrapper__details_body">
-                      {extractSpanGroupValue(attribute.value)}
-                    </div>
-                  </div>
-                );
-              }
-            });
-          })}
      </div>
    </div>
  );
--- a/src/containers/internal/views/recent-calls/player.tsx
+++ b/src/containers/internal/views/recent-calls/player.tsx
@@ -3,26 +3,24 @@ import React from "react";
 import WaveSurfer from "wavesurfer.js";
 import { useEffect, useRef, useState } from "react";
 import { Icon, P } from "@jambonz/ui-kit";
-import { Icons, Modal, ModalClose } from "src/components";
-import { deleteRecord, getBlob, getJaegerTrace } from "src/api";
+import { Icons, ModalClose } from "src/components";
+import { getBlob, getJaegerTrace } from "src/api";
 import { DownloadedBlob, RecentCall } from "src/api/types";
-import RegionsPlugin, { Region } from "wavesurfer.js/dist/plugins/regions";
-import TimelinePlugin from "wavesurfer.js/dist/plugins/timeline";
+import RegionsPlugin, { Region } from "wavesurfer.js/src/plugin/regions";
+import TimelinePlugin from "wavesurfer.js/src/plugin/timeline";
 import { API_BASE_URL } from "src/api/constants";
 import {
  JaegerRoot,
  JaegerSpan,
-  WaveSurferDtmfResult,
-  WaveSurferGatherSpeechVerbHookLatencyResult,
-  WaveSurferSttResult,
-  WaveSurferTtsLatencyResult,
+  WaveSufferDtmfResult,
+  WaveSufferSttResult,
 } from "src/api/jaeger-types";
 import {
  getSpanAttributeByName,
+  getSpansByName,
  getSpansByNameRegex,
  getSpansFromJaegerRoot,
 } from "./utils";
-import { toastError, toastSuccess } from "src/store";

 type PlayerProps = {
  call: RecentCall;
@@ -39,39 +37,26 @@ export const Player = ({ call }: PlayerProps) => {
  const [isReady, setIsReady] = useState(false);
  const [playBackTime, setPlayBackTime] = useState("");
  const [jaegerRoot, setJeagerRoot] = useState<JaegerRoot>();
-  const [waveSurferRegionData, setWaveSurferRegionData] =
-    useState<WaveSurferSttResult | null>();
-  const [waveSurferDtmfData, setWaveSurferDtmfData] =
-    useState<WaveSurferDtmfResult | null>();
-
-  const [waveSurferTtsLatencyData, setWaveSurferTtsLatencyData] =
-    useState<WaveSurferTtsLatencyResult | null>();
-
-  const [
-    waveSurferGatherSpeechVerbHookLatencyData,
-    setWaveSurferGatherSpeechVerbHookLatencyData,
-  ] = useState<WaveSurferGatherSpeechVerbHookLatencyResult | null>();
+  const [waveSufferRegionData, setWaveSufferRegionData] =
+    useState<WaveSufferSttResult | null>();
+  const [waveSufferDtmfData, setWaveSufferDtmfData] =
+    useState<WaveSufferDtmfResult | null>();
  const [regionChecked, setRegionChecked] = useState(false);

  const wavesurferId = `wavesurfer--${call_sid}`;
-  const waveSurferRef = useRef<WaveSurfer | null>(null);
-  const waveSurferRegionsPluginRef = useRef<RegionsPlugin | null>();
+  const wavesurferTimelineId = `timeline-${wavesurferId}`;
+  const waveSufferRef = useRef<WaveSurfer | null>(null);

  const [record, setRecord] = useState<DownloadedBlob | null>(null);

-  const [deleteRecordUrl, setDeleteRecordUrl] = useState("");
-
  const drawDtmfRegionForSpan = (s: JaegerSpan, startPoint: JaegerSpan) => {
-    if (waveSurferRegionsPluginRef.current) {
-      waveSurferRef.current;
-      const r = waveSurferRegionsPluginRef.current
-        .getRegions()
-        .find((r) => r.id === s.spanId);
+    if (waveSufferRef.current) {
+      const r = waveSufferRef.current.regions.list[s.spanId];
      if (!r) {
        const [dtmfValue] = getSpanAttributeByName(s.attributes, "dtmf");
        const [durationValue] = getSpanAttributeByName(
          s.attributes,
-          "duration",
+          "duration"
        );
        if (dtmfValue && durationValue) {
          const start =
@@ -79,28 +64,29 @@ export const Player = ({ call }: PlayerProps) => {
            1_000_000_000;
          const duration =
            Number(durationValue.value.stringValue.replace("ms", "")) / 1_000;
-          // as duration of DTMF is short, cannot be shown in wavesurfer,
+          // as duration of DTMF is short, cannot be shown in wavesuffer,
          // adjust region width here.
          const delta = duration <= 0.1 ? 0.1 : duration;
          const end = start + delta;

-          const region = waveSurferRegionsPluginRef.current.addRegion({
+          const region = waveSufferRef.current.addRegion({
            id: s.spanId,
            start,
            end,
            color: "rgba(138, 43, 226, 0.15)",
            drag: false,
+            loop: false,
            resize: false,
          });
          changeRegionMouseStyle(region);

-          const att: WaveSurferDtmfResult = {
+          const att: WaveSufferDtmfResult = {
            dtmf: dtmfValue.value.stringValue,
            duration: durationValue.value.stringValue,
          };

          region.on("click", () => {
-            setWaveSurferDtmfData(att);
+            setWaveSufferDtmfData(att);
          });
        }
      }
@@ -121,52 +107,13 @@ export const Player = ({ call }: PlayerProps) => {
    });
  };

-  const PEAKS_WINDOW = 5; // require 30 ms of speech energy over threshold to trigger
-  const PEAK_THRESHOLD = 0.03;
-
-  const getSilenceStartTime = (
-    start: number,
-    end: number,
-    channel: number,
-  ): number => {
-    if (waveSurferRef.current) {
-      const duration = waveSurferRef.current.getDecodedData()?.duration;
-      if (duration && duration > 0) {
-        const maxLength = Math.round(duration * 8000) / 10; // evaluate speech energy every 10 ms
-        const peaks = waveSurferRef.current.exportPeaks({ maxLength });
-        if (peaks && peaks.length > channel) {
-          if (duration && duration > 0) {
-            const data = peaks[channel];
-            const startPeak = Math.ceil((start * data.length) / duration);
-            const endPeak = Math.ceil((end * data.length) / duration);
-            let count = 0;
-            for (let i = endPeak; i > startPeak; i--)
-              if (Math.abs(data[i]) > PEAK_THRESHOLD) {
-                count++;
-                if (count === PEAKS_WINDOW) {
-                  return (
-                    ((i + PEAKS_WINDOW) * duration) / data.length + 0.02 // add 20 ms adjustment
-                  );
-                }
-              } else {
-                count = 0;
-              }
-          }
-        }
-      }
-    }
-    return -1;
-  };
-
  const drawSttRegionForSpan = (
    s: JaegerSpan,
    startPoint: JaegerSpan,
-    channel = 0,
+    channel = 0
  ) => {
-    if (waveSurferRegionsPluginRef.current) {
-      const r = waveSurferRegionsPluginRef.current
-        .getRegions()
-        .find((r) => r.id === s.spanId);
+    if (waveSufferRef.current) {
+      const r = waveSufferRef.current.regions.list[s.spanId];
      if (!r) {
        const start =
          (s.startTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000 +
@@ -174,46 +121,30 @@ export const Player = ({ call }: PlayerProps) => {
        const end =
          (s.endTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;

-        const endSpeechTime = getSilenceStartTime(start, end, channel);
-
+        const region = waveSufferRef.current.addRegion({
+          id: s.spanId,
+          start,
+          end,
+          color: "rgba(255, 0, 0, 0.15)",
+          drag: false,
+          loop: false,
+          resize: false,
+        });
+        changeRegionMouseStyle(region, channel);
        const [sttResult] = getSpanAttributeByName(s.attributes, "stt.result");
-        let att: WaveSurferSttResult;
+        let att: WaveSufferSttResult;
        if (sttResult) {
          const data = JSON.parse(sttResult.value.stringValue);
-
          att = {
            vendor: data.vendor.name,
            transcript: data.alternatives[0].transcript,
            confidence: data.alternatives[0].confidence,
            language_code: data.language_code,
-            ...(endSpeechTime > 0 && { latency: end - endSpeechTime }),
          };
-
-          const [sttResolve] = getSpanAttributeByName(
-            s.attributes,
-            "stt.resolve",
-          );
-          if (
-            endSpeechTime > 0 &&
-            sttResolve &&
-            sttResolve.value.stringValue === "speech"
-          ) {
-            const latencyRegion = waveSurferRegionsPluginRef.current.addRegion({
-              id: s.spanId + "latency",
-              start: endSpeechTime,
-              end,
-              color: "rgba(255, 255, 0, 0.55)",
-              drag: false,
-              resize: false,
-              content: `${(end - endSpeechTime).toFixed(2)}s`,
-            });
-
-            changeRegionMouseStyle(latencyRegion, channel);
-          }
        } else {
          const [sttResolve] = getSpanAttributeByName(
            s.attributes,
-            "stt.resolve",
+            "stt.resolve"
          );
          if (sttResolve && sttResolve.value.stringValue === "timeout") {
            att = {
@@ -233,121 +164,17 @@ export const Player = ({ call }: PlayerProps) => {
          }
        }

-        const region = waveSurferRegionsPluginRef.current.addRegion({
-          id: s.spanId,
-          start,
-          end,
-          color: "rgba(255, 0, 0, 0.15)",
-          drag: false,
-          resize: false,
-        });
-
-        changeRegionMouseStyle(region, channel);
-
        region.on("click", () => {
-          setWaveSurferRegionData(att);
+          setWaveSufferRegionData(att);
        });
      }
    }
  };

-  const drawTtsLatencyRegion = (s: JaegerSpan, startPoint: JaegerSpan) => {
-    if (waveSurferRegionsPluginRef.current) {
-      const r = waveSurferRegionsPluginRef.current
-        .getRegions()
-        .find((r) => r.id === s.spanId);
-      if (!r) {
-        const start =
-          (s.startTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;
-        let end =
-          (s.endTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;
-
-        const [ttsVendor] = getSpanAttributeByName(s.attributes, "tts.vendor");
-        const [ttsCache] = getSpanAttributeByName(s.attributes, "tts.cached");
-        const [streamLatency] = getSpanAttributeByName(
-          s.attributes,
-          "time_to_first_byte_ms",
-        );
-        if (streamLatency && streamLatency.value.stringValue) {
-          end = start + Number(streamLatency.value.stringValue) / 1_000;
-        }
-        if (ttsVendor && ttsCache && !Boolean(ttsCache.value.boolValue)) {
-          const latencyRegion = waveSurferRegionsPluginRef.current.addRegion({
-            id: s.spanId,
-            start: start,
-            end,
-            color: "rgba(255, 155, 0, 0.55)",
-            drag: false,
-            resize: false,
-            content: createMultiLineTextElement(`${(end - start).toFixed(2)}s`),
-          });
-
-          changeRegionMouseStyle(latencyRegion, 1);
-
-          latencyRegion.on("click", () => {
-            setWaveSurferTtsLatencyData({
-              vendor: ttsVendor.value.stringValue,
-              latency: `${(end - start).toFixed(2)}s`,
-              isCached: String(ttsCache.value.boolValue),
-            });
-          });
-        }
-      }
-    }
-  };
-
-  const drawVerbHookDelayRegion = (s: JaegerSpan, startPoint: JaegerSpan) => {
-    if (waveSurferRegionsPluginRef.current) {
-      const r = waveSurferRegionsPluginRef.current
-        .getRegions()
-        .find((r) => r.id === s.spanId);
-
-      if (!r) {
-        const start =
-          (s.startTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;
-        const end =
-          (s.endTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;
-        const tmpEnd = end - start < 0.05 ? start + 0.05 : end;
-
-        const latencyRegion = waveSurferRegionsPluginRef.current.addRegion({
-          id: s.spanId,
-          start: start,
-          end: tmpEnd,
-          color: "rgba(255, 3, 180, 0.55)",
-          drag: false,
-          resize: false,
-          content: createMultiLineTextElement(`${(end - start).toFixed(2)}s`),
-        });
-        const [statusCode] = getSpanAttributeByName(
-          s.attributes,
-          "http.statusCode",
-        );
-        changeRegionMouseStyle(latencyRegion, 0);
-        latencyRegion.on("click", () => {
-          setWaveSurferGatherSpeechVerbHookLatencyData({
-            statusCode: statusCode ? Number(statusCode.value.doubleValue) : 404,
-            latency: `${(end - start).toFixed(2)}s`,
-          });
-        });
-      }
-    }
-  };
-
-  function createMultiLineTextElement(text: string) {
-    const div = document.createElement("div");
-    div.style.paddingLeft = "10px";
-    div.style.paddingTop = "15px";
-    div.appendChild(document.createElement("br"));
-    div.appendChild(document.createTextNode(text));
-
-    return div;
-  }
-
-  const buildWavesurferRegion = () => {
+  const buildWavesufferRegion = () => {
    if (jaegerRoot) {
      const spans = getSpansFromJaegerRoot(jaegerRoot);
-      const start = getSpansByNameRegex(spans, /background-record:listen/);
-      const startPoint = start ? start[0] : null;
+      const [startPoint] = getSpansByName(spans, "background-listen:listen");
      // there should be only one startPoint for background listen
      if (startPoint) {
        const gatherSpans = getSpansByNameRegex(spans, /:gather{/);
@@ -355,7 +182,6 @@ export const Player = ({ call }: PlayerProps) => {
          drawSttRegionForSpan(s, startPoint);
        });

-        // Trasscription
        const transcribeSpans = getSpansByNameRegex(spans, /stt-listen:/);
        transcribeSpans.forEach((cs) => {
          // Channel start from 0
@@ -363,57 +189,20 @@ export const Player = ({ call }: PlayerProps) => {
          drawSttRegionForSpan(
            cs,
            startPoint,
-            channel > 0 ? channel - 1 : channel,
+            channel > 0 ? channel - 1 : channel
          );
        });
-        // DTMF
+
        const dtmfSpans = getSpansByNameRegex(spans, /dtmf:/);
        dtmfSpans.forEach((ds) => {
          drawDtmfRegionForSpan(ds, startPoint);
        });
-        // TTS delay
-        const ttsSpans = getSpansByNameRegex(spans, /tts-generation/);
-        ttsSpans.forEach((tts) => {
-          drawTtsLatencyRegion(tts, startPoint);
-        });
-
-        // Gather verb hook delay
-        const verbHookSpans = getSpansByNameRegex(spans, /verb:hook/);
-        verbHookSpans
-          .filter((s) => {
-            const [httpBody] = getSpanAttributeByName(
-              s.attributes,
-              "http.body",
-            );
-            return (
-              httpBody.value.stringValue.includes(
-                '"reason":"speechDetected"',
-              ) ||
-              httpBody.value.stringValue.includes('"reason":"dtmfDetected"')
-            );
-          })
-          .forEach((s) => {
-            drawVerbHookDelayRegion(s, startPoint);
-          });
      }
    }
  };

-  const handleDeleteRecordSubmit = () => {
-    if (deleteRecordUrl) {
-      deleteRecord(deleteRecordUrl)
-        .then(() => {
-          setDeleteRecordUrl("");
-          toastSuccess("Successfully deleted record");
-        })
-        .catch((error) => {
-          toastError(error.msg);
-        });
-    }
-  };
-
  useEffect(() => {
-    buildWavesurferRegion();
+    buildWavesufferRegion();
  }, [jaegerRoot, isReady]);

  useEffect(() => {
@@ -446,9 +235,8 @@ export const Player = ({ call }: PlayerProps) => {
  }

  useEffect(() => {
-    if (waveSurferRef.current !== null || !record) return;
-    waveSurferRegionsPluginRef.current = RegionsPlugin.create();
-    waveSurferRef.current = WaveSurfer.create({
+    if (waveSufferRef.current !== null || !record) return;
+    waveSufferRef.current = WaveSurfer.create({
      container: `#${wavesurferId}`,
      waveColor: "#da1c5c",
      progressColor: "grey",
@@ -456,68 +244,62 @@ export const Player = ({ call }: PlayerProps) => {
      cursorWidth: 1,
      cursorColor: "lightgray",
      normalize: true,
-      autoScroll: true,
-      splitChannels: [],
-      minPxPerSec: 100,
+      responsive: true,
+      fillParent: true,
+      splitChannels: true,
+      scrollParent: true,
      plugins: [
-        waveSurferRegionsPluginRef.current,
+        RegionsPlugin.create({}),
        TimelinePlugin.create({
-          timeInterval: 0.2,
-          primaryLabelInterval: 5,
-          secondaryLabelInterval: 1,
-          style: {
-            fontSize: "15px",
-            color: "#000000",
-            fontWeight: "bold",
-          },
+          container: `#${wavesurferTimelineId}`,
        }),
      ],
    });

-    waveSurferRef.current.load(record?.data_url);
+    waveSufferRef.current.load(record?.data_url);
    // All event should be after load
-    waveSurferRef.current.on("finish", () => {
+    waveSufferRef.current.on("finish", () => {
      setIsPlaying(false);
    });

-    waveSurferRef.current.on("play", () => {
+    waveSufferRef.current.on("play", () => {
      setIsPlaying(true);
    });

-    waveSurferRef.current.on("pause", () => {
+    waveSufferRef.current.on("pause", () => {
      setIsPlaying(false);
    });

-    waveSurferRef.current.on("ready", () => {
+    waveSufferRef.current.on("ready", () => {
      setIsReady(true);
-      setPlayBackTime(formatTime(waveSurferRef.current?.getDuration() || 0));
+      setPlayBackTime(formatTime(waveSufferRef.current?.getDuration() || 0));
    });

-    waveSurferRef.current.on("audioprocess", () => {
-      setPlayBackTime(formatTime(waveSurferRef.current?.getCurrentTime() || 0));
+    waveSufferRef.current.on("audioprocess", () => {
+      setPlayBackTime(formatTime(waveSufferRef.current?.getCurrentTime() || 0));
    });
  }, [record]);

  const togglePlayback = () => {
-    if (waveSurferRef.current) {
+    if (waveSufferRef.current) {
      if (!isPlaying) {
-        waveSurferRef.current.play();
+        waveSufferRef.current.play();
      } else {
-        waveSurferRef.current.pause();
+        waveSufferRef.current.pause();
      }
    }
  };

  const setPlaybackJump = (delta: number) => {
-    if (waveSurferRef.current) {
-      const idx = waveSurferRef.current.getCurrentTime() + delta;
+    if (waveSufferRef.current) {
+      const idx = waveSufferRef.current.getCurrentTime() + delta;
      const value =
        idx <= 0
          ? 0
-          : idx >= waveSurferRef.current.getDuration()
-            ? waveSurferRef.current.getDuration() - 1
-            : idx;
-      waveSurferRef.current.setTime(value);
+          : idx >= waveSufferRef.current.getDuration()
+          ? waveSufferRef.current.getDuration() - 1
+          : idx;
+      waveSufferRef.current.setCurrentTime(value);
      setPlayBackTime(formatTime(value));
    }
  };
@@ -528,74 +310,57 @@ export const Player = ({ call }: PlayerProps) => {
    <>
      <div className="media-container">
        <div id={wavesurferId} />
+        <div id={wavesurferTimelineId} />
        <div className="media-container__center">
          <strong>{playBackTime}</strong>
        </div>
-        <div className="controll-btn-container">
-          <div className="controll-btn-container__placeholder"></div>
-          <div className="controll-btn-container__center">
-            <button
-              className="btnty"
-              type="button"
-              onClick={() => {
-                setPlaybackJump(-JUMP_DURATION);
-              }}
-              title="Jump left"
-              disabled={!isReady}
-            >
-              <Icon>
-                <Icons.ChevronsLeft />
-              </Icon>
-            </button>
-            <button
-              className="btnty"
-              type="button"
-              onClick={togglePlayback}
-              title="play/pause"
-              disabled={!isReady}
-            >
-              <Icon>{isPlaying ? <Icons.Pause /> : <Icons.Play />}</Icon>
-            </button>
+        <div className="media-container__center">
+          <button
+            className="btnty"
+            type="button"
+            onClick={() => {
+              setPlaybackJump(-JUMP_DURATION);
+            }}
+            title="Jump left"
+            disabled={!isReady}
+          >
+            <Icon>
+              <Icons.ChevronsLeft />
+            </Icon>
+          </button>
+          <button
+            className="btnty"
+            type="button"
+            onClick={togglePlayback}
+            title="play/pause"
+            disabled={!isReady}
+          >
+            <Icon>{isPlaying ? <Icons.Pause /> : <Icons.Play />}</Icon>
+          </button>

-            <button
-              className="btnty"
-              type="button"
-              onClick={() => {
-                setPlaybackJump(JUMP_DURATION);
-              }}
-              title="Jump right"
-              disabled={!isReady}
-            >
-              <Icon>
-                <Icons.ChevronsRight />
-              </Icon>
-            </button>
-          </div>
-
-          <div className="controll-btn-container__right">
-            <a
-              href={record.data_url}
-              download={record.file_name}
-              className="btnty"
-              title="Download record file"
-            >
-              <Icon>
-                <Icons.Download />
-              </Icon>
-            </a>
-
-            <button
-              type="button"
-              onClick={() => {
-                setDeleteRecordUrl(url || "");
-              }}
-              title="Delete record file"
-            >
-              <Icon>
-                <Icons.Trash2 />
-              </Icon>
-            </button>
-          </div>
+          <button
+            className="btnty"
+            type="button"
+            onClick={() => {
+              setPlaybackJump(JUMP_DURATION);
+            }}
+            title="Jump right"
+            disabled={!isReady}
+          >
+            <Icon>
+              <Icons.ChevronsRight />
+            </Icon>
+          </button>
+          <a
+            href={record.data_url}
+            download={record.file_name}
+            className="btnty"
+            title="Download record file"
+          >
+            <Icon>
+              <Icons.Download />
+            </Icon>
+          </a>
        </div>
        <label htmlFor="is_active" className="chk">
          <input
@@ -605,20 +370,19 @@ export const Player = ({ call }: PlayerProps) => {
            checked={regionChecked}
            onChange={(e) => {
              setRegionChecked(e.target.checked);
-              if (waveSurferRegionsPluginRef.current) {
-                const regionsList =
-                  waveSurferRegionsPluginRef.current.getRegions();
+              if (waveSufferRef.current) {
+                const regionsList = waveSufferRef.current.regions.list;
                for (const [, region] of Object.entries(regionsList)) {
                  region.element.style.display = e.target.checked ? "" : "none";
                }
              }
            }}
          />
-          <div>Show latencies</div>
+          <div>Overlay STT and DTMF events</div>
        </label>
      </div>
-      {waveSurferRegionData && (
-        <ModalClose handleClose={() => setWaveSurferRegionData(null)}>
+      {waveSufferRegionData && (
+        <ModalClose handleClose={() => setWaveSufferRegionData(null)}>
          <div className="spanDetailsWrapper__header">
            <P>
              <strong>Speech to text result</strong>
@@ -626,53 +390,43 @@ export const Player = ({ call }: PlayerProps) => {
          </div>
          <div className="spanDetailsWrapper">
            <div className="spanDetailsWrapper__detailsWrapper">
-              {waveSurferRegionData.vendor && (
+              {waveSufferRegionData.vendor && (
                <div className="spanDetailsWrapper__details">
                  <div className="spanDetailsWrapper__details_header">
                    <strong>Vendor:</strong>
                  </div>
                  <div className="spanDetailsWrapper__details_body">
-                    {waveSurferRegionData.vendor}
+                    {waveSufferRegionData.vendor}
                  </div>
                </div>
              )}
-              {waveSurferRegionData.confidence !== 0 && (
+              {waveSufferRegionData.confidence !== 0 && (
                <div className="spanDetailsWrapper__details">
                  <div className="spanDetailsWrapper__details_header">
                    <strong>Confidence:</strong>
                  </div>
                  <div className="spanDetailsWrapper__details_body">
-                    {waveSurferRegionData.confidence}
+                    {waveSufferRegionData.confidence}
                  </div>
                </div>
              )}
-              {waveSurferRegionData.language_code && (
+              {waveSufferRegionData.language_code && (
                <div className="spanDetailsWrapper__details">
                  <div className="spanDetailsWrapper__details_header">
                    <strong>Language code:</strong>
                  </div>
                  <div className="spanDetailsWrapper__details_body">
-                    {waveSurferRegionData.language_code}
+                    {waveSufferRegionData.language_code}
                  </div>
                </div>
              )}
-              {waveSurferRegionData.transcript && (
+              {waveSufferRegionData.transcript && (
                <div className="spanDetailsWrapper__details">
                  <div className="spanDetailsWrapper__details_header">
                    <strong>Transcript:</strong>
                  </div>
                  <div className="spanDetailsWrapper__details_body">
-                    {waveSurferRegionData.transcript}
-                  </div>
-                </div>
-              )}
-              {waveSurferRegionData.latency && (
-                <div className="spanDetailsWrapper__details">
-                  <div className="spanDetailsWrapper__details_header">
-                    <strong>Latency:</strong>
-                  </div>
-                  <div className="spanDetailsWrapper__details_body">
-                    {waveSurferRegionData.latency.toFixed(2)} seconds
+                    {waveSufferRegionData.transcript}
                  </div>
                </div>
              )}
@@ -680,8 +434,8 @@ export const Player = ({ call }: PlayerProps) => {
          </div>
        </ModalClose>
      )}
-      {waveSurferDtmfData && (
-        <ModalClose handleClose={() => setWaveSurferDtmfData(null)}>
+      {waveSufferDtmfData && (
+        <ModalClose handleClose={() => setWaveSufferDtmfData(null)}>
          <div className="spanDetailsWrapper__header">
            <P>
              <strong>Dtmf result</strong>
@@ -694,7 +448,7 @@ export const Player = ({ call }: PlayerProps) => {
                  <strong>Dtmf:</strong>
                </div>
                <div className="spanDetailsWrapper__details_body">
-                  {waveSurferDtmfData.dtmf}
+                  {waveSufferDtmfData.dtmf}
                </div>
              </div>

@@ -703,95 +457,13 @@ export const Player = ({ call }: PlayerProps) => {
                  <strong>Duration:</strong>
                </div>
                <div className="spanDetailsWrapper__details_body">
-                  {waveSurferDtmfData.duration}
+                  {waveSufferDtmfData.duration}
                </div>
              </div>
            </div>
          </div>
        </ModalClose>
      )}
-      {waveSurferTtsLatencyData && (
-        <ModalClose handleClose={() => setWaveSurferTtsLatencyData(null)}>
-          <div className="spanDetailsWrapper__header">
-            <P>
-              <strong>Tts Latency</strong>
-            </P>
-          </div>
-          <div className="spanDetailsWrapper">
-            <div className="spanDetailsWrapper__detailsWrapper">
-              <div className="spanDetailsWrapper__details">
-                <div className="spanDetailsWrapper__details_header">
-                  <strong>Vendor:</strong>
-                </div>
-                <div className="spanDetailsWrapper__details_body">
-                  {waveSurferTtsLatencyData.vendor}
-                </div>
-              </div>
-
-              <div className="spanDetailsWrapper__details">
-                <div className="spanDetailsWrapper__details_header">
-                  <strong>Latency:</strong>
-                </div>
-                <div className="spanDetailsWrapper__details_body">
-                  {waveSurferTtsLatencyData.latency}
-                </div>
-              </div>
-
-              <div className="spanDetailsWrapper__details">
-                <div className="spanDetailsWrapper__details_header">
-                  <strong>From Cache:</strong>
-                </div>
-                <div className="spanDetailsWrapper__details_body">
-                  {waveSurferTtsLatencyData.isCached}
-                </div>
-              </div>
-            </div>
-          </div>
-        </ModalClose>
-      )}
-      {waveSurferGatherSpeechVerbHookLatencyData && (
-        <ModalClose
-          handleClose={() => setWaveSurferGatherSpeechVerbHookLatencyData(null)}
-        >
-          <div className="spanDetailsWrapper__header">
-            <P>
-              <strong>Application Response Latency</strong>
-            </P>
-          </div>
-          <div className="spanDetailsWrapper">
-            <div className="spanDetailsWrapper__detailsWrapper">
-              <div className="spanDetailsWrapper__details">
-                <div className="spanDetailsWrapper__details_header">
-                  <strong>Status Code:</strong>
-                </div>
-                <div className="spanDetailsWrapper__details_body">
-                  {waveSurferGatherSpeechVerbHookLatencyData.statusCode}
-                </div>
-              </div>
-
-              <div className="spanDetailsWrapper__details">
-                <div className="spanDetailsWrapper__details_header">
-                  <strong>Latency:</strong>
-                </div>
-                <div className="spanDetailsWrapper__details_body">
-                  {waveSurferGatherSpeechVerbHookLatencyData.latency}
-                </div>
-              </div>
-            </div>
-          </div>
-        </ModalClose>
-      )}
-      {deleteRecordUrl && (
-        <Modal
-          handleCancel={() => setDeleteRecordUrl("")}
-          handleSubmit={handleDeleteRecordSubmit}
-        >
-          <P>
-            Are you sure you want to delete the record for call{" "}
-            <strong>{call_sid}</strong>?
-          </P>
-        </Modal>
-      )}
    </>
  );
 };
--- a/src/containers/internal/views/recent-calls/styles.scss
+++ b/src/containers/internal/views/recent-calls/styles.scss
@@ -19,59 +19,7 @@
  }
 }

-.controll-btn-container {
-  display: flex;
-  justify-content: space-between;
-  position: relative;
-  padding: 13px;
-
-  &__center {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-
-    button:not(:last-child) {
-      margin-right: ui-vars.$px01;
-    }
-
-    button {
-      background-color: transparent;
-      width: auto;
-      height: auto;
-      border: 0;
-      padding: 0;
-    }
-    .ico {
-      color: ui-vars.$white;
-      @include mixins.icosize();
-    }
-  }
-
-  &__right {
-    a:not(:last-child) {
-      margin-right: ui-vars.$px01;
-    }
-
-    button {
-      background-color: transparent;
-      width: auto;
-      height: auto;
-      border: 0;
-      padding: 0;
-    }
-    .ico {
-      color: ui-vars.$white;
-      @include mixins.icosize();
-    }
-  }
-
-  &__placeholder {
-    flex: 1;
-  }
-}
-
 .media-container {
-  overflow-x: auto;
  border: 1px solid black;
  border-radius: ui-vars.$px01;
  padding: 13px;
@@ -83,5 +31,18 @@
    justify-content: center;
    grid-gap: ui-vars.$px01;
    margin-top: ui-vars.$px01;
+
+    button {
+      background-color: transparent;
+      width: auto;
+      height: auto;
+      border: 0;
+      padding: 0;
+    }
+
+    .ico {
+      color: ui-vars.$white;
+      @include mixins.icosize();
+    }
  }
 }
--- a/src/containers/internal/views/recent-calls/utils.ts
+++ b/src/containers/internal/views/recent-calls/utils.ts
@@ -11,12 +11,12 @@ export const getSpansFromJaegerRoot = (trace: JaegerRoot) => {
              !(
                attr.key.startsWith("telemetry") ||
                attr.key.startsWith("internal")
-              ),
+              )
          );
          value.attributes = attrs;
          spans.push(value);
        });
-      },
+      }
    );
  });
  spans.sort((a, b) => a.startTimeUnixNano - b.startTimeUnixNano);
@@ -25,14 +25,14 @@ export const getSpansFromJaegerRoot = (trace: JaegerRoot) => {

 export const getSpansByName = (
  spans: JaegerSpan[],
-  name: string,
+  name: string
 ): JaegerSpan[] => {
  return spans.filter((s) => s.name === name);
 };

 export const getSpansByNameRegex = (
  spans: JaegerSpan[],
-  pattern: RegExp,
+  pattern: RegExp
 ): JaegerSpan[] => {
  const matcher = new RegExp(pattern);
  return spans.filter((s) => matcher.test(s.name));
@@ -40,7 +40,7 @@ export const getSpansByNameRegex = (

 export const getSpanAttributeByName = (
  attr: JaegerAttribute[],
-  name: string,
+  name: string
 ): JaegerAttribute[] => {
  return attr.filter((a) => a.key === name);
 };
--- a/src/containers/internal/views/settings/admin-settings.tsx
+++ b/src/containers/internal/views/settings/admin-settings.tsx
@@ -72,7 +72,7 @@ export const AdminSettings = () => {
    if (hasValue(passwordSettings)) {
      setRequireDigit(passwordSettings.require_digit > 0 ? true : false);
      setRequireSpecialCharacter(
-        passwordSettings.require_special_character > 0 ? true : false,
+        passwordSettings.require_special_character > 0 ? true : false
      );
      if (passwordSettings.min_password_length) {
        setMinPasswordLength(passwordSettings.min_password_length);
--- a/src/containers/internal/views/settings/index.tsx
+++ b/src/containers/internal/views/settings/index.tsx
@@ -27,7 +27,7 @@ export const Settings = ({ currentServiceProvider }: SettingsProps) => {
    Scope.service_provider,
    `${ROUTE_INTERNAL_ACCOUNTS}/${user?.account_sid}/edit`,
    user,
-    "You do not have permissions to manage Settings",
+    "You do not have permissions to manage Settings"
  );

  return (
--- a/src/containers/internal/views/settings/service-provider-settings.tsx
+++ b/src/containers/internal/views/settings/service-provider-settings.tsx
@@ -56,13 +56,13 @@ export const ServiceProviderSettings = ({
            return limit.quantity === ""
              ? deleteServiceProviderLimit(
                  currentServiceProvider.service_provider_sid,
-                  limit.category,
+                  limit.category
                )
              : postServiceProviderLimit(
                  currentServiceProvider.service_provider_sid,
-                  limit,
+                  limit
                );
-          }),
+          })
        )
          .then(() => {
            refetchLimits();
@@ -93,7 +93,7 @@ export const ServiceProviderSettings = ({
          <>
            Deleted service provider{" "}
            <strong>{currentServiceProvider.name}</strong>
-          </>,
+          </>
        );
        removeActiveSP();
      })
@@ -193,5 +193,5 @@ export const ServiceProviderSettings = ({
 };

 export default withSelectState(["serviceProviders", "currentServiceProvider"])(
-  ServiceProviderSettings,
+  ServiceProviderSettings
 );
--- a/src/containers/internal/views/speech-services/delete.tsx
+++ b/src/containers/internal/views/speech-services/delete.tsx
@@ -19,11 +19,7 @@ export const DeleteSpeechService = ({
  return (
    <Modal handleCancel={handleCancel} handleSubmit={handleSubmit}>
      <P>
-        Are you sure you want to delete the{" "}
-        <strong>
-          {credential.vendor}
-          {credential.label ? ` (${credential.label})` : ""}
-        </strong>{" "}
+        Are you sure you want to delete the <strong>{credential.vendor}</strong>{" "}
        speech service?
      </P>
    </Modal>
--- a/src/containers/internal/views/speech-services/edit.tsx
+++ b/src/containers/internal/views/speech-services/edit.tsx
@@ -24,17 +24,17 @@ export const EditSpeechService = () => {
    ROUTE_INTERNAL_SPEECH,
    user,
    "You do not have access to this resource",
-    data,
+    data
  );

  const getUrlForSpeech = () => {
    if (user && user?.scope === USER_ACCOUNT) {
      setUrl(
-        `Accounts/${user?.account_sid}/SpeechCredentials/${params.speech_credential_sid}`,
+        `Accounts/${user?.account_sid}/SpeechCredentials/${params.speech_credential_sid}`
      );
    } else {
      setUrl(
-        `ServiceProviders/${currentServiceProvider?.service_provider_sid}/SpeechCredentials/${params.speech_credential_sid}`,
+        `ServiceProviders/${currentServiceProvider?.service_provider_sid}/SpeechCredentials/${params.speech_credential_sid}`
      );
    }
  };
--- a/src/containers/internal/views/speech-services/form.tsx
+++ b/src/containers/internal/views/speech-services/form.tsx
--- a/src/containers/internal/views/speech-services/index.tsx
+++ b/src/containers/internal/views/speech-services/index.tsx
@@ -49,39 +49,35 @@ export const SpeechServices = () => {
      ? credentials.filter((credential) =>
          accountSid
            ? credential.account_sid === accountSid
-            : credential.account_sid === null,
+            : credential.account_sid === null
        )
      : [];
  }, [accountSid, accounts, credentials]);

  const filteredCredentials = useFilteredResults<SpeechCredential>(
    filter,
-    credentialsFiltered,
+    credentialsFiltered
  );

  const handleDelete = () => {
    if (credential && currentServiceProvider) {
      if (isUserAccountScope(accountSid, user)) {
        toastError(
-          "You do not have permissions to delete these Speech Credentials",
+          "You do not have permissions to delete these Speech Credentials"
        );
        return;
      }
      deleteSpeechService(
        currentServiceProvider.service_provider_sid,
-        credential.speech_credential_sid,
+        credential.speech_credential_sid
      )
        .then(() => {
          setCredential(null);
          refetch();
          toastSuccess(
            <>
-              Deleted speech service{" "}
-              <strong>
-                {credential.vendor}
-                {credential.label ? ` (${credential.label})` : ""}
-              </strong>{" "}
-            </>,
+              Deleted speech service <strong>{credential.vendor}</strong>
+            </>
          );
        })
        .catch((error) => {
@@ -97,7 +93,7 @@ export const SpeechServices = () => {
      setApiUrl(`Accounts/${accountSid}/SpeechCredentials`);
    } else {
      setApiUrl(
-        `ServiceProviders/${currentServiceProvider?.service_provider_sid}/SpeechCredentials`,
+        `ServiceProviders/${currentServiceProvider?.service_provider_sid}/SpeechCredentials`
      );
    }
  }, [currentServiceProvider, accountSid]);
@@ -112,7 +108,7 @@ export const SpeechServices = () => {
          </Icon>
        </Link>
      </section>
-      <section className="filters filters--multi">
+      <section className="filters filters--ender">
        <ScopedAccess user={user} scope={Scope.service_provider}>
          <AccountFilter
            account={[accountSid, setAccountSid]}
@@ -149,7 +145,7 @@ export const SpeechServices = () => {
                            Vendor:{" "}
                            {credential.vendor.startsWith(VENDOR_CUSTOM)
                              ? credential.vendor.substring(
-                                  VENDOR_CUSTOM.length + 1,
+                                  VENDOR_CUSTOM.length + 1
                                )
                              : credential.vendor}
                          </strong>
@@ -199,14 +195,6 @@ export const SpeechServices = () => {
                      <div>
                        <CredentialStatus cred={credential} />
                      </div>
-                      {credential.label && (
-                        <div>
-                          <div className="i txt--teal">
-                            <Icons.Tag />
-                            <span>{credential.label}</span>
-                          </div>
-                        </div>
-                      )}
                    </div>
                  </div>
                  <ScopedAccess
--- a/src/containers/internal/views/speech-services/status.tsx
+++ b/src/containers/internal/views/speech-services/status.tsx
@@ -37,8 +37,8 @@ export const CredentialStatus = ({
            status === CRED_OK
              ? "teal"
              : status === CRED_NOT_TESTED
-                ? "jean"
-                : "jam"
+              ? "jean"
+              : "jam"
          }`}
          title={status === CRED_NOT_TESTED ? notTestedTxt : reason}
        >
@@ -61,11 +61,11 @@ export const CredentialStatus = ({
  useEffect(() => {
    if (user && user.scope === USER_ACCOUNT) {
      setApiUrl(
-        `Accounts/${user.account_sid}/SpeechCredentials/${cred.speech_credential_sid}/test`,
+        `Accounts/${user.account_sid}/SpeechCredentials/${cred.speech_credential_sid}/test`
      );
    } else if (currentServiceProvider) {
      setApiUrl(
-        `ServiceProviders/${currentServiceProvider.service_provider_sid}/SpeechCredentials/${cred.speech_credential_sid}/test`,
+        `ServiceProviders/${currentServiceProvider.service_provider_sid}/SpeechCredentials/${cred.speech_credential_sid}/test`
      );
    }
  }, [user, cred, currentServiceProvider]);
--- a/src/containers/internal/views/speech-services/utils.ts
+++ b/src/containers/internal/views/speech-services/utils.ts
@@ -14,7 +14,7 @@ export const getObscuredGoogleServiceKey = (key: GoogleServiceKey) => {
  return {
    ...key,
    private_key: `${keyHeader}${getObscuredSecret(
-      key.private_key.slice(keyHeader.length, key.private_key.length),
+      key.private_key.slice(keyHeader.length, key.private_key.length)
    )}`,
  };
 };
@@ -23,15 +23,15 @@ export const getUsage = (cred: SpeechCredential) => {
  return cred.use_for_tts && cred.use_for_stt
    ? "TTS/STT"
    : cred.use_for_tts
-      ? "TTS"
-      : cred.use_for_stt
-        ? "STT"
-        : "Not in use";
+    ? "TTS"
+    : cred.use_for_stt
+    ? "STT"
+    : "Not in use";
 };

 export const getStatus = (
  cred: SpeechCredential,
-  testResult: CredentialTestResult,
+  testResult: CredentialTestResult
 ): CredentialStatus => {
  if (
    (cred.use_for_tts &&
@@ -60,7 +60,7 @@ export const getStatus = (

 export const getReason = (
  cred: SpeechCredential,
-  testResult: CredentialTestResult,
+  testResult: CredentialTestResult
 ) => {
  const ok = "Connection test successful";

--- a/src/containers/internal/views/users/form.tsx
+++ b/src/containers/internal/views/users/form.tsx
@@ -55,7 +55,7 @@ export const UserForm = ({ user }: UserFormProps) => {
  const [email, setEmail] = useState("");
  const [initialPassword, setInitialPassword] = useState("");
  const [scope, setScope] = useState<UserScopes | null>(
-    currentUser?.scope || null,
+    currentUser?.scope || null
  );
  const [isActive, setIsActive] = useState(true);
  const [forceChange, setForceChange] = useState(true);
@@ -80,7 +80,7 @@ export const UserForm = ({ user }: UserFormProps) => {
          toastSuccess(
            <>
              Deleted user <strong>{user?.data?.name}</strong>
-            </>,
+            </>
          );
          handleSelfDetete();
        })
@@ -183,12 +183,7 @@ export const UserForm = ({ user }: UserFormProps) => {
  return (
    <>
      <Section slim>
-        <form
-          className={`form form--internal ${
-            !user?.data && user?.refetch ? "form--blur" : ""
-          }`}
-          onSubmit={handleSubmit}
-        >
+        <form className="form form--internal" onSubmit={handleSubmit}>
          <fieldset>
            <MS>{MSG_REQUIRED_FIELDS}</MS>
          </fieldset>
@@ -202,8 +197,7 @@ export const UserForm = ({ user }: UserFormProps) => {
                options={
                  currentUser?.scope === USER_SP
                    ? USER_SCOPE_SELECTION.filter(
-                        (opt) =>
-                          opt.value !== USER_ADMIN && opt.value !== "all",
+                        (opt) => opt.value !== USER_ADMIN && opt.value !== "all"
                      )
                    : USER_SCOPE_SELECTION.filter((e) => e.value !== "all")
                }
--- a/src/containers/internal/views/users/index.tsx
+++ b/src/containers/internal/views/users/index.tsx
@@ -60,7 +60,7 @@ export const Users = () => {

    if (scopeFilter !== "all" && accountSid) {
      return serviceProviderUsers?.filter(
-        (e) => e.scope === scopeFilter && accountSid === e.account_sid,
+        (e) => e.scope === scopeFilter && accountSid === e.account_sid
      );
    }

@@ -71,7 +71,7 @@ export const Users = () => {
  }, [accountSid, scopeFilter, users, accounts, currentServiceProvider]);

  const filteredUsers = useFilteredResults<User>(filter, usersFiltered)?.sort(
-    sortUsersAlpha,
+    sortUsersAlpha
  );

  useEffect(() => {
@@ -88,7 +88,7 @@ export const Users = () => {
          </Icon>
        </Link>
      </section>
-      <section className="filters filters--multi">
+      <section className="filters filters--mix">
        <section>
          <SearchFilter
            placeholder="Filter users"
@@ -137,8 +137,8 @@ export const Users = () => {
                    {user.scope === USER_ADMIN
                      ? "All"
                      : user.account_name
-                        ? `Account: ${user.account_name}`
-                        : `Service Provider: ${user.service_provider_name}`}
+                      ? `Account: ${user.account_name}`
+                      : `Service Provider: ${user.service_provider_name}`}
                  </div>
                  <div className="item__actions">
                    <Link
--- a/src/containers/login/create-password.tsx
+++ b/src/containers/login/create-password.tsx
@@ -63,7 +63,7 @@ export const CreatePassword = () => {
              <li>Contain at least one special character</li>
            )}
          </ul>
-        </>,
+        </>
      );
      return;
    }
@@ -90,7 +90,7 @@ export const CreatePassword = () => {
            navigate(
              userData.scope !== USER_ACCOUNT
                ? ROUTE_INTERNAL_ACCOUNTS
-                : ROUTE_INTERNAL_APPLICATIONS,
+                : ROUTE_INTERNAL_APPLICATIONS
            );
          } else {
            setMessage(MSG_SOMETHING_WRONG);
--- a/src/containers/login/forgot-password.tsx
+++ b/src/containers/login/forgot-password.tsx
@@ -24,7 +24,7 @@ export const ForgotPassword = () => {
      .then((response) => {
        if (response.status === StatusCodes.NO_CONTENT) {
          toastSuccess(
-            "A password reset email has been sent to your email. Please check your inbox (and, possibly, spam folder) and follow the instructions to reset your password.",
+            "A password reset email has been sent to your email. Please check your inbox (and, possibly, spam folder) and follow the instructions to reset your password."
          );
          navigate(ROUTE_LOGIN);
        } else {
--- a/src/containers/login/reset-password.tsx
+++ b/src/containers/login/reset-password.tsx
@@ -20,7 +20,7 @@ export const ResetPassword = () => {
    setMessage("");
    if (newPassword !== confirmNewPassword) {
      setMessage(
-        "The confirmation password does not match the new password. Please ensure both passwords are identical.",
+        "The confirmation password does not match the new password. Please ensure both passwords are identical."
      );
      return;
    }
--- a/src/containers/login/sub-domain.tsx
+++ b/src/containers/login/sub-domain.tsx
@@ -44,8 +44,8 @@ export const RegisterChooseSubdomain = () => {
      getAvailability(`${name}.${rootDomain}`)
        .then(({ json }) =>
          setIsValidDomain(
-            Boolean(json.available) && hasValue(name) && name.length != 0,
-          ),
+            Boolean(json.available) && hasValue(name) && name.length != 0
+          )
        )
        .catch((error) => {
          setErrorMessage(error.msg);
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -19,5 +19,5 @@ createRoot(root).render(
        </AuthProvider>
      </BrowserRouter>
    </StateProvider>
-  </React.StrictMode>,
+  </React.StrictMode>
 );
--- a/src/router/auth.tsx
+++ b/src/router/auth.tsx
@@ -84,7 +84,7 @@ export const parseJwt = (token: string) => {
      .map((c) => {
        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
      })
-      .join(""),
+      .join("")
  );

  return JSON.parse(jsonPayload);
@@ -117,7 +117,7 @@ export const useProvideAuth = (): AuthStateContext => {
                    navigate(
                      userData.scope !== USER_ACCOUNT
                        ? ROUTE_INTERNAL_ACCOUNTS
-                        : `${ROUTE_INTERNAL_ACCOUNTS}/${userData.account_sid}/edit`,
+                        : `${ROUTE_INTERNAL_ACCOUNTS}/${userData.account_sid}/edit`
                    );
                  }
                })
@@ -132,7 +132,7 @@ export const useProvideAuth = (): AuthStateContext => {
              navigate(
                userData.scope !== USER_ACCOUNT
                  ? ROUTE_INTERNAL_ACCOUNTS
-                  : `${ROUTE_INTERNAL_ACCOUNTS}/${userData.account_sid}/edit`,
+                  : `${ROUTE_INTERNAL_ACCOUNTS}/${userData.account_sid}/edit`
              );
            }

--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -17,7 +17,7 @@ export const genericAction = (state: State, action: Action<keyof State>) => {

 export const serviceProvidersAction = (
  state: State,
-  action: Action<keyof State>,
+  action: Action<keyof State>
 ) => {
  // Sorts for consistent list view
  action.payload = (<ServiceProvider[]>action.payload).sort(sortLocaleName);
@@ -33,7 +33,7 @@ export const serviceProvidersAction = (
    const serviceProvider = action.payload.find(
      (sp: ServiceProvider) =>
        sp.service_provider_sid ===
-        state.currentServiceProvider?.service_provider_sid,
+        state.currentServiceProvider?.service_provider_sid
    );
    // The `serviceProvider` will be undefined if this is after a DELETE
    // For this case we want to just reset to the first provider in the list
@@ -51,7 +51,7 @@ export const serviceProvidersAction = (

 export const currentServiceProviderAction = (
  state: State,
-  action: Action<keyof State>,
+  action: Action<keyof State>
 ) => {
  // Set MS Teams Tenants ACL condition
  state.accessControl.hasMSTeamsFqdn = (<ServiceProvider>action.payload)
--- a/src/store/localStore.ts
+++ b/src/store/localStore.ts
@@ -109,7 +109,7 @@ const storeLocation = "location";
 export const setLocation = () => {
  return localStorage.setItem(
    storeLocation,
-    window.location.pathname.split("/")[2],
+    window.location.pathname.split("/")[2]
  );
 };

--- a/src/styles/_filters.scss
+++ b/src/styles/_filters.scss
@@ -19,45 +19,14 @@
      grid-gap: ui-vars.$px02;
    }
  }
-  > :first-child {
-    margin-left: auto;
-  }
+
  &--multi {
    overflow-x: auto;
    white-space: nowrap;
    grid-gap: ui-vars.$px02;

-    @media (max-width: 1400px) {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-
-      > * {
-        justify-self: end;
-      }
-    }
-
-    @media (max-width: 1200px) {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      > * {
-        justify-self: end;
-      }
-    }
-
-    @media (max-width: 1000px) {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      > * {
-        justify-self: end;
-      }
-    }
-
-    @media (max-width: 500px) {
-      display: grid;
-      grid-template-columns: repeat(1, 1fr);
-      > * {
-        justify-self: end;
-      }
+    > :first-child {
+      margin-left: auto;
    }
  }

--- a/src/styles/_forms.scss
+++ b/src/styles/_forms.scss
@@ -105,10 +105,6 @@ fieldset {
    }
  }

-  &--blur {
-    pointer-events: none;
-  }
-
  label {
    @include ui-mixins.m();
    @include ui-mixins.font-medium();
@@ -298,53 +294,3 @@ fieldset {
 .bucket_tag {
  @extend .lcr;
 }
-
-.customVoice {
-  padding: ui-vars.$px02;
-  border-radius: ui-vars.$px01;
-  border: 2px solid ui-vars.$grey;
-  max-width: ui-vars.$width-mobile;
-  position: relative;
-
-  > div {
-    display: grid;
-    grid-gap: ui-vars.$px02;
-    align-items: center;
-
-    &:nth-child(1) {
-      grid-template-columns: [col] 100%;
-    }
-
-    &:nth-child(2) {
-      grid-template-columns: [col] calc(40% - #{ui-vars.$px02 * 2}) [col] 60%;
-      margin-top: ui-vars.$px02;
-    }
-
-    &:nth-child(3) {
-      grid-template-columns: [col] 100%;
-      margin-top: ui-vars.$px02;
-    }
-
-    &:nth-child(4) {
-      grid-template-columns: [col] 100%;
-      margin-top: ui-vars.$px02;
-    }
-  }
-
-  > button {
-    position: absolute;
-    right: 0;
-    bottom: 50%;
-    transform: translate3d(50%, 50%, 0);
-
-    @include mixins.small() {
-      top: auto;
-      bottom: auto;
-      transform: none;
-      position: relative;
-      margin-top: ui-vars.$px02;
-      display: flex;
-      margin-left: auto;
-    }
-  }
-}
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -29,22 +29,18 @@ import type { UserData } from "src/store/types";
 import { getQueryFilter } from "src/store/localStore";

 export const hasValue = <Type>(
-  variable: Type | null | undefined,
+  variable: Type | null | undefined
 ): variable is NonNullable<Type> => {
  return variable !== null && variable !== undefined;
 };

 export const hasLength = <Type>(
  variable: Type[] | null | undefined,
-  minlength = 0,
+  minlength = 0
 ): variable is NonNullable<Type[]> => {
  return hasValue(variable) && variable.length > minlength;
 };

-export const isNotBlank = (variable: string | null | undefined) => {
-  return hasValue(variable) && variable.length > 0;
-};
-
 export const isObject = (obj: unknown) => {
  /** null | undefined | Array will be "object" so exclude them */
  return typeof obj === "object" && hasValue(obj) && !Array.isArray(obj);
@@ -52,7 +48,7 @@ export const isObject = (obj: unknown) => {

 export const isValidPasswd = (
  password: string,
-  passwordSettings: PasswordSettings,
+  passwordSettings: PasswordSettings
 ) => {
  if (passwordSettings) {
    return (
@@ -78,14 +74,14 @@ export const isValidPort = (port: number) => {
 export const getIpValidationType = (ipv4: string): IpType => {
  const type =
    /^((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])$/.test(
-      ipv4.trim(),
+      ipv4.trim()
    )
      ? IP
      : /^([a-zA-Z0-9][^.]*)(\.[^.]+){2,}$/.test(ipv4.trim())
-        ? FQDN
-        : /^([a-zA-Z][^.]*)(\.[^.]+)$/.test(ipv4.trim())
-          ? FQDN_TOP_LEVEL
-          : INVALID;
+      ? FQDN
+      : /^([a-zA-Z][^.]*)(\.[^.]+)$/.test(ipv4.trim())
+      ? FQDN_TOP_LEVEL
+      : INVALID;
  return type;
 };

@@ -114,16 +110,16 @@ export const getHumanDateTime = (date: string, fallbackText = "Never used") => {
  currDate.setHours(0, 0, 0, 0);
  argDate.setHours(0, 0, 0, 0);
  const daysDiff = Math.round(
-    (currDate.getTime() - argDate.getTime()) / 1000 / 60 / 60 / 24,
+    (currDate.getTime() - argDate.getTime()) / 1000 / 60 / 60 / 24
  );

  return daysDiff > 1
    ? `${daysDiff} days ago`
    : daysDiff === 1
-      ? "Yesterday"
-      : daysDiff === 0
-        ? "Today"
-        : fallbackText;
+    ? "Yesterday"
+    : daysDiff === 0
+    ? "Today"
+    : fallbackText;
 };

 export const formatPhoneNumber = (number: string) => {
@@ -150,7 +146,7 @@ export const formatTime = (seconds: number) => {

 export const sortLocaleName = (
  a: Required<{ name: string }>,
-  b: Required<{ name: string }>,
+  b: Required<{ name: string }>
 ) => a.name.localeCompare(b.name);

 export const getUserScope = (user: User): UserScopes => {
@@ -172,7 +168,7 @@ export const isUserAccountScope = (accountSid: string, user?: UserData) => {

 export const checkSelectOptions = (
  user?: UserData,
-  resource?: SpeechCredential | Carrier,
+  resource?: SpeechCredential | Carrier
 ) => {
  if (user?.scope === USER_ACCOUNT) {
    if (!resource) {
@@ -203,7 +199,7 @@ export const sortUsersAlpha = (a: User, b: User) => {

 export const filterScopeOptions = (
  optionArray: SelectorOptions[],
-  user: UserData,
+  user: UserData
 ) => {
  if (user.scope === USER_SP) {
    return optionArray.filter((option) => option.value !== USER_ADMIN);
--- a/src/utils/use-filtered-results.ts
+++ b/src/utils/use-filtered-results.ts
@@ -18,7 +18,7 @@ const fuzzyMatch = (patterns: string[], items: string[]) => {

 export const useFilteredResults = <Type>(
  rawFilter: string,
-  rawCollection: Type[] | undefined,
+  rawCollection: Type[] | undefined
 ) => {
  const splitFilter = useMemo(() => rawFilter.split(" "), [rawFilter]);
  const filteredCollection = useMemo(() => {
--- a/src/utils/use-mobile-media.ts
+++ b/src/utils/use-mobile-media.ts
@@ -10,7 +10,7 @@ export const useMobileMedia = () => {

  useEffect(() => {
    const mql = window.matchMedia(
-      `(max-width: ${getCssVar("--mobile-media")})`,
+      `(max-width: ${getCssVar("--mobile-media")})`
    );

    mql.addEventListener("change", handleMedia);
--- a/src/utils/use-redirect.ts
+++ b/src/utils/use-redirect.ts
@@ -8,7 +8,7 @@ import type { IMessage } from "src/store/types";
 export const useRedirect = <Type>(
  collection: Type[] | undefined,
  redirect: string,
-  message: IMessage,
+  message: IMessage
 ) => {
  const navigate = useNavigate();

--- a/src/utils/use-scoped-redirect.ts
+++ b/src/utils/use-scoped-redirect.ts
@@ -17,7 +17,7 @@ export const useScopedRedirect = (
  redirect: string,
  user?: UserData,
  message?: IMessage,
-  data?: Account | User | Application | Carrier | SpeechCredential,
+  data?: Account | User | Application | Carrier | SpeechCredential
 ) => {
  const navigate = useNavigate();
  const currentServiceProvider = useSelectState("currentServiceProvider");
--- a/src/utils/with-access-control.tsx
+++ b/src/utils/with-access-control.tsx
@@ -18,7 +18,7 @@ export interface ACLGetIMessage {

 export const withAccessControl = (
  acl: keyof ACL,
-  getMessage: ACLGetIMessage,
+  getMessage: ACLGetIMessage
 ) => {
  return function WithAccessControl(Component: React.ComponentType) {
    return function ComponentWithAccessControl(props: PassthroughProps) {
--- a/src/vendor/index.tsx
+++ b/src/vendor/index.tsx
@@ -1,10 +1,13 @@
 import { useEffect, useState } from "react";

-import type { VendorOptions, RegionVendors } from "./types";
+import type {
+  VendorOptions,
+  SynthesisVendors,
+  RecognizerVendors,
+  RegionVendors,
+} from "./types";

 export const LANG_EN_US = "en-US";
-export const ELEVENLABS_LANG_EN = "en";
-export const LANG_COBALT_EN_US = "en_US-8khz";
 export const LANG_EN_US_STANDARD_C = "en-US-Standard-C";
 export const VENDOR_GOOGLE = "google";
 export const VENDOR_AWS = "aws";
@@ -16,13 +19,6 @@ export const VENDOR_IBM = "ibm";
 export const VENDOR_NVIDIA = "nvidia";
 export const VENDOR_SONIOX = "soniox";
 export const VENDOR_CUSTOM = "custom";
-export const VENDOR_COBALT = "cobalt";
-export const VENDOR_ELEVENLABS = "elevenlabs";
-export const VENDOR_ASSEMBLYAI = "assemblyai";
-export const VENDOR_WHISPER = "whisper";
-export const VENDOR_PLAYHT = "playht";
-export const VENDOR_RIMELABS = "rimelabs";
-export const VENDOR_VERBIO = "verbio";

 export const vendors: VendorOptions[] = [
  {
@@ -65,53 +61,6 @@ export const vendors: VendorOptions[] = [
    name: "Custom",
    value: VENDOR_CUSTOM,
  },
-  {
-    name: "Cobalt",
-    value: VENDOR_COBALT,
-  },
-  {
-    name: "ElevenLabs",
-    value: VENDOR_ELEVENLABS,
-  },
-  {
-    name: "AssemblyAI",
-    value: VENDOR_ASSEMBLYAI,
-  },
-  {
-    name: "Whisper",
-    value: VENDOR_WHISPER,
-  },
-  {
-    name: "PlayHT",
-    value: VENDOR_PLAYHT,
-  },
-  {
-    name: "RimeLabs",
-    value: VENDOR_RIMELABS,
-  },
-  {
-    name: "Verbio",
-    value: VENDOR_VERBIO,
-  },
-].sort((a, b) => a.name.localeCompare(b.name)) as VendorOptions[];
-
-export const AWS_CREDENTIAL_ACCESS_KEY = "access_key";
-export const AWS_CREDENTIAL_IAM_ASSUME_ROLE = "assume_role";
-export const AWS_INSTANCE_PROFILE = "instance_profile";
-
-export const AWS_CREDENTIAL_TYPES = [
-  {
-    name: "AWS access key",
-    value: AWS_CREDENTIAL_ACCESS_KEY,
-  },
-  {
-    name: "AWS assume role",
-    value: AWS_CREDENTIAL_IAM_ASSUME_ROLE,
-  },
-  {
-    name: "AWS instance profile",
-    value: AWS_INSTANCE_PROFILE,
-  },
 ];

 export const useRegionVendors = () => {
@@ -137,7 +86,7 @@ export const useRegionVendors = () => {
            ibm: ibmRegions,
          });
        }
-      },
+      }
    );

    return function cleanup() {
@@ -147,3 +96,80 @@ export const useRegionVendors = () => {

  return regions;
 };
+
+export const useSpeechVendors = () => {
+  const [speech, setSpeech] = useState<{
+    synthesis?: SynthesisVendors;
+    recognizers?: RecognizerVendors;
+  }>({});
+
+  useEffect(() => {
+    let ignore = false;
+
+    Promise.all([
+      import("./speech-recognizer/aws-speech-recognizer-lang"),
+      import("./speech-recognizer/google-speech-recognizer-lang"),
+      import("./speech-recognizer/ms-speech-recognizer-lang"),
+      import("./speech-recognizer/nuance-speech-recognizer-lang"),
+      import("./speech-recognizer/deepgram-speech-recognizer-lang"),
+      import("./speech-recognizer/ibm-speech-recognizer-lang"),
+      import("./speech-recognizer/nvidia-speech-recognizer-lang"),
+      import("./speech-recognizer/soniox-speech-recognizer-lang"),
+      import("./speech-synthesis/aws-speech-synthesis-lang"),
+      import("./speech-synthesis/google-speech-synthesis-lang"),
+      import("./speech-synthesis/ms-speech-synthesis-lang"),
+      import("./speech-synthesis/wellsaid-speech-synthesis-lang"),
+      import("./speech-synthesis/nuance-speech-synthesis-lang"),
+      import("./speech-synthesis/ibm-speech-synthesis-lang"),
+      import("./speech-synthesis/nvidia-speech-synthesis-lang"),
+    ]).then(
+      ([
+        { default: awsRecognizer },
+        { default: googleRecognizer },
+        { default: msRecognizer },
+        { default: nuanceRecognizer },
+        { default: deepgramRecognizer },
+        { default: ibmRecognizer },
+        { default: nvidiaRecognizer },
+        { default: sonioxRecognizer },
+        { default: awsSynthesis },
+        { default: googleSynthesis },
+        { default: msSynthesis },
+        { default: wellsaidSynthesis },
+        { default: nuanceSynthesis },
+        { default: ibmSynthesis },
+        { default: nvidiaynthesis },
+      ]) => {
+        if (!ignore) {
+          setSpeech({
+            synthesis: {
+              aws: awsSynthesis,
+              google: googleSynthesis,
+              microsoft: msSynthesis,
+              wellsaid: wellsaidSynthesis,
+              nuance: nuanceSynthesis,
+              ibm: ibmSynthesis,
+              nvidia: nvidiaynthesis,
+            },
+            recognizers: {
+              aws: awsRecognizer,
+              google: googleRecognizer,
+              microsoft: msRecognizer,
+              nuance: nuanceRecognizer,
+              deepgram: deepgramRecognizer,
+              ibm: ibmRecognizer,
+              nvidia: nvidiaRecognizer,
+              soniox: sonioxRecognizer,
+            },
+          });
+        }
+      }
+    );
+
+    return function cleanup() {
+      ignore = true;
+    };
+  }, []);
+
+  return speech;
+};
--- a/src/vendor/regions/ms-azure-regions.ts
+++ b/src/vendor/regions/ms-azure-regions.ts
@@ -9,10 +9,6 @@ export const regions: Region[] = [
    name: "Brazil - South (brazilsouth)",
    value: "brazilsouth",
  },
-  {
-    name: "Qatar - Central (qatarcentral)",
-    value: "qatarcentral",
-  },
  {
    name: "Canada - Central (canadacentral)",
    value: "canadacentral",
@@ -57,10 +53,6 @@ export const regions: Region[] = [
    name: "Norway - East (norwayeast)",
    value: "norwayeast",
  },
-  {
-    name: "Sweden - Central (swedencentral)",
-    value: "swedencentral",
-  },
  {
    name: "South Africa - North (southafricanorth)",
    value: "southafricanorth",
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Quan HL	7e410bcc78	add carrier instructions to send call to sip-realm	2023-08-02 12:57:35 +07:00
Quan HL	cdff2f8fb4	fix choose/edit sub domain	2023-08-02 12:45:32 +07:00