bump version

* fix for APP_ENABLE_ACCOUNT_LIMITS_ALL

* further fix

* remove log statements

.gitignore

@@ -8,6 +8,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

Dockerfile

@@ -1,18 +1,23 @@
-FROM node:alpine as builder
-RUN apk update && apk add --no-cache python3 make g++
-COPY . /opt/app
-WORKDIR /opt/app/
-COPY package.json ./
-RUN npm install
-RUN npm run build
-RUN npm prune
+FROM --platform=linux/amd64 node:18.12.1-alpine3.16 as base
 
-FROM node:alpine as webapp
-RUN apk add curl
-WORKDIR /opt/app
-COPY . /opt/app
-COPY --from=builder /opt/app/node_modules ./node_modules
-COPY --from=builder /opt/app/build ./build
-COPY ./entrypoint.sh /entrypoint.sh
-RUN chmod +x /entrypoint.sh
-ENTRYPOINT ["/entrypoint.sh"]
+RUN apk --update --no-cache add --virtual .builds-deps build-base curl python3
+
+WORKDIR /opt/app/
+
+FROM base as build
+
+COPY package.json package-lock.json ./
+
+RUN npm ci
+
+COPY . .
+
+RUN npm run build
+
+FROM base
+
+COPY --from=build /opt/app /opt/app/
+
+RUN chmod +x /opt/app/entrypoint.sh
+
+ENTRYPOINT ["/opt/app/entrypoint.sh"]

entrypoint.sh

@@ -4,7 +4,9 @@ API_PORT="${API_PORT:-3000}"
 API_VERSION="${API_VERSION:-v1}"
 REACT_APP_API_BASE_URL=${REACT_APP_API_BASE_URL:-http://$PUBLIC_IPV4:$API_PORT/$API_VERSION}
 echo "REACT_APP_API_BASE_URL=${REACT_APP_API_BASE_URL}" > /opt/app/.env
+REACT_APP_ENABLE_ACCOUNT_LIMITS_ALL=${REACT_APP_ENABLE_ACCOUNT_LIMITS_ALL:-0}
+echo "REACT_APP_ENABLE_ACCOUNT_LIMITS_ALL=${REACT_APP_ENABLE_ACCOUNT_LIMITS_ALL}" >> /opt/app/.env
 cd /opt/app/
-TAG="<script>window.JAMBONZ = { APP_API_BASE_URL: '${REACT_APP_API_BASE_URL}'};</script>"
+TAG="<script>window.JAMBONZ = { APP_API_BASE_URL: '${REACT_APP_API_BASE_URL}', APP_ENABLE_ACCOUNT_LIMITS_ALL: ${REACT_APP_ENABLE_ACCOUNT_LIMITS_ALL}};</script>"
 sed -i -e "\@</head>@i\    $TAG" ./build/index.html
 npm run serve

package.json

@@ -1,13 +1,13 @@
 {
   "name": "jambonz-webapp",
-  "version": "v0.7.5",
+  "version": "v0.7.9",
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^7.2.1",
     "antd": "^4.21.0",
     "axios": "^0.21.1",
-    "moment": "^2.29.1",
+    "moment": "^2.29.4",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/components/elements/AddButton.js

@@ -21,6 +21,7 @@ const StyledLink = styled(FilteredLink)`
   border-radius: 50%;
   text-decoration: none;
   color: #565656;
+  z-index: 1;
 
   & > span:first-child {
     display: flex;

src/components/forms/AccountForm.js

@@ -22,7 +22,7 @@ import CopyableText from '../elements/CopyableText';
 import Span from '../elements/Span';
 import handleErrors from "../../helpers/handleErrors";
 import styled from 'styled-components/macro';
-import { APP_API_BASE_URL } from "../../constants";
+import { APP_API_BASE_URL, LIMITS } from "../../constants";
 
 const StyledInputGroup = styled(InputGroup)`
   position: relative;
@@ -73,6 +73,7 @@ const AccountForm = props => {
   const [ name,          setName       ] = useState('');
   const [ sipRealm,      setSipRealm   ] = useState('');
   const [ deviceCallingApplication, setDeviceCallingApplication ] = useState('');
+  const [ siprecCallingApplication, setSiprecCallingApplication ] = useState('');
   const [ regWebhook,    setRegWebhook ] = useState('');
   const [ regMethod,     setRegMethod     ] = useState('POST');
   const [ regUser,       setRegUser       ] = useState('');
@@ -93,6 +94,7 @@ const AccountForm = props => {
   const [ sbcs, setSbcs ] = useState([]);
   const [ subspaceSipRealmOtherValue, setSubspaceSipRealmOtherValue ] = useState('');
   const [ subspaceEnable, setSubspaceEnable ] = useState(false);
+  const [localLimits, setLocalLimits] = useState([]);
 
   // Invalid form inputs
   const [ invalidName,          setInvalidName       ] = useState(false);
@@ -318,6 +320,16 @@ const AccountForm = props => {
             },
           });
           promiseList.push(applicationsPromise);
+
+          const limitsPromise = axios({
+            method: 'get',
+            baseURL: APP_API_BASE_URL,
+            url: `/Accounts/${props.account_sid}/Limits`,
+            headers: {
+              Authorization: `Bearer ${jwt}`,
+            },
+          });
+          promiseList.push(limitsPromise);
         }
 
         const sbcsPromise = await axios({
@@ -336,13 +348,16 @@ const AccountForm = props => {
         setAccounts(accountsData);
 
         if (props.type === 'edit') {
+          // Application Data
           const allApplications = (promiseAllValues[1] && promiseAllValues[1].data) || [];
           const accountApplicationsData = allApplications.filter(app => {
             return app.account_sid === props.account_sid;
           });
           setAccountApplications(accountApplicationsData);
+          // Limits Data
+          setLocalLimits(promiseAllValues[2]?.data);
         }
-        setSbcs(promiseAllValues[2]?.data); 
+        setSbcs(promiseAllValues[3]?.data); 
 
         if (props.type === 'setup' && accountsData.length > 1) {
           history.push('/internal/accounts');
@@ -376,6 +391,7 @@ const AccountForm = props => {
                 setName(acc.name        || '');
             setSipRealm(acc.sip_realm   || '');
           setDeviceCallingApplication(acc.device_calling_application_sid || '');
+          setSiprecCallingApplication(acc.siprec_hook_sid || '');
           setRegWebhook((acc.registration_hook && acc.registration_hook.url     ) || '');
               setRegMethod((acc.registration_hook && acc.registration_hook.method  ) || 'post');
                 setRegUser((acc.registration_hook && acc.registration_hook.username) || '');
@@ -549,13 +565,14 @@ const AccountForm = props => {
 
       if (props.type === 'edit') {
         axiosData.device_calling_application_sid = deviceCallingApplication || null;
+        axiosData.siprec_hook_sid = siprecCallingApplication || null;
       }
 
       const url = props.type === 'add'
         ? `/Accounts`
         : `/Accounts/${accountSid}`;
 
-      await axios({
+      const accountResp = await axios({
         method: props.type === 'add' ? 'post' : 'put',
         baseURL: APP_API_BASE_URL,
         url,
@@ -564,6 +581,23 @@ const AccountForm = props => {
         },
         data: axiosData,
       });
+      // Update Limits
+      const acc_sid = accountSid ? accountSid : accountResp.data.sid;
+      await Promise.all(
+        localLimits.map(l => {
+          const method = l.quantity === "" ? 'delete' : 'post';
+          const limitUrl = l.quantity === "" ? `/Accounts/${props.account_sid}/Limits?category=${l.category}` : `/Accounts/${acc_sid}/Limits`;
+          return axios({
+            method: method,
+            baseURL: APP_API_BASE_URL,
+            url: limitUrl,
+            headers: {
+              Authorization: `Bearer ${jwt}`,
+            },
+            ...(method === 'post' && {data: l})
+          });
+        })
+      );
 
       if (props.type === 'setup') {
         isMounted = false;
@@ -695,33 +729,61 @@ const AccountForm = props => {
         </StyledInputGroup>
 
         {props.type === 'edit' && (
-          <React.Fragment>
-            <Label tooltip htmlFor="deviceCallingApplication">
-              <span style={{ position: 'relative' }}>
-                Application for SIP Device Calls
-                <Tooltip large>
-                  This application is used to handle incoming calls from SIP users who have registered to the Account’s SIP Realm.
-                </Tooltip>
-              </span>
-            </Label>
-            <Select
-              large={props.type === 'setup'}
-              name="deviceCallingApplication"
-              id="deviceCallingApplication"
-              value={deviceCallingApplication}
-              onChange={e => setDeviceCallingApplication(e.target.value)}
-            >
-              <option value="">-- NONE --</option>
-              {accountApplications && accountApplications.map(app => (
-                <option
-                  key={app.application_sid}
-                  value={app.application_sid}
-                >
-                  {app.name}
-                </option>
-              ))}
-            </Select>
-          </React.Fragment>
+          <>
+            <React.Fragment>
+              <Label tooltip htmlFor="deviceCallingApplication">
+                <span style={{ position: 'relative' }}>
+                  Application for SIP Device Calls
+                  <Tooltip large>
+                    This application is used to handle incoming calls from SIP users who have registered to the Account’s SIP Realm.
+                  </Tooltip>
+                </span>
+              </Label>
+              <Select
+                large={props.type === 'setup'}
+                name="deviceCallingApplication"
+                id="deviceCallingApplication"
+                value={deviceCallingApplication}
+                onChange={e => setDeviceCallingApplication(e.target.value)}
+              >
+                <option value="">-- NONE --</option>
+                {accountApplications && accountApplications.map(app => (
+                  <option
+                    key={app.application_sid}
+                    value={app.application_sid}
+                  >
+                    {app.name}
+                  </option>
+                ))}
+              </Select>
+            </React.Fragment>
+            
+            <React.Fragment>
+              <Label tooltip htmlFor="siprecCallingApplication">
+                <span style={{ position: 'relative' }}>
+                  Application for SIPREC Calls
+                </span>
+              </Label>
+              <Select
+                large={props.type === 'setup'}
+                name="siprecCallingApplication"
+                id="siprecCallingApplication"
+                value={siprecCallingApplication}
+                onChange={e => setSiprecCallingApplication(e.target.value)}
+                right
+              >
+                <option value="">-- NONE --</option>
+                {accountApplications && accountApplications.map(app => (
+                  <option
+                    key={app.application_sid}
+                    value={app.application_sid}
+                  >
+                    {app.name}
+                  </option>
+                ))}
+              </Select>
+            </React.Fragment>
+          </>
         )}
 
         <Label htmlFor="regWebhook">Registration Webhook</Label>
@@ -861,6 +923,31 @@ const AccountForm = props => {
           </Button>
         )}
 
+        {LIMITS.map(({ label, category }) => {
+          const quantity = localLimits?.find(l => l.category === category)?.quantity;
+          return <React.Fragment key={category}>
+            <Label htmlFor={category}>{label}</Label>
+            <Input
+            name={category}
+            id={category}
+            type="number"
+            placeholder="Enter Quantity (0=unlimited)"
+            min="0"
+            value={quantity >= 0 ? quantity : ""}
+            onChange={e => {
+              const limit = localLimits.find(l => l.category === category);
+              const value = e.target.value ? Number(e.target.value) : "";
+              if (limit) {
+                setLocalLimits(localLimits.map(l => l.category === category ? {...l, quantity: value} : l));
+              } else {
+                setLocalLimits([...localLimits, {category, quantity: value}]);
+              }
+            }}
+            >
+            </Input>
+
+          </React.Fragment>;
+        })}
         { process.env.REACT_APP_ENABLE_SUBSPACE ? (
           <>
             <Label htmlFor="subspaceId">Subspace</Label>
@@ -991,7 +1078,6 @@ const AccountForm = props => {
             )}
           </>
         ) : null }
-
         {errorMessage && (
           <FormError grid message={errorMessage} />
         )}

src/components/forms/CarrierForm.js

@@ -221,6 +221,8 @@ const CarrierForm = (props) => {
   const refUsername = useRef(null);
   const refPassword = useRef(null);
   const refRealm = useRef(null);
+  const refFromUser = useRef(null);
+  const refFromDomain = useRef(null);
   const refIp = useRef([]);
   const refPort = useRef([]);
   const refInbound = useRef([]);
@@ -250,6 +252,8 @@ const CarrierForm = (props) => {
   const [ passwordInvalid, setPasswordInvalid ] = useState(false);
   const [ realm,           setRealm           ] = useState('');
   const [ realmInvalid,    setRealmInvalid    ] = useState(false);
+  const [ fromUser,        setFromUser        ] = useState('');
+  const [ fromDomain,      setFromDomain        ] = useState('');
   const [ sipGateways,     setSipGateways     ] = useState([
     {
       sip_gateway_sid: '',
@@ -276,6 +280,7 @@ const CarrierForm = (props) => {
   const [suportSIP, setSupportSIP] = useState(false);
   const [diversion, setDiversion] = useState("");
   const [carrierActive, setCarrierActive] = useState(true);
+  const [registerHasPublicIp, setRegisterHasPublicIp] = useState(false);
   const [predefinedCarriers, setPredefinedCarriers] = useState([]);
   const [activeTab, setActiveTab] = useState('1');
   const [sbcs, setSbcs] = useState([]);
@@ -438,6 +443,8 @@ const CarrierForm = (props) => {
           setUsername(carrier.register_username || '');
           setPassword(carrier.register_password || '');
           setRealm(carrier.register_sip_realm || '');
+          setFromUser(carrier.register_from_user || '');
+          setFromDomain(carrier.register_from_domain || '');
           setSipGateways(currentSipGateways.map(s => ({
             sip_gateway_sid: s.sip_gateway_sid,
             ip: s.ipv4,
@@ -473,6 +480,7 @@ const CarrierForm = (props) => {
           setSupportSIP(carrier.diversion ? true : false);
           setDiversion(carrier.diversion || '');
           setCarrierActive(carrier.is_active === 1);
+          setRegisterHasPublicIp(carrier.register_public_ip_in_contact === 1);
         } else {
           const result = await axios({
             method: 'get',
@@ -1028,6 +1036,9 @@ const CarrierForm = (props) => {
           register_username: username ? username.trim() : null,
           register_password: password ? password : null,
           register_sip_realm: register ? realm.trim() : null,
+          register_from_user: register && fromUser ? fromUser.trim() : null,
+          register_from_domain: register && fromDomain ? fromDomain.trim() : null,
+          register_public_ip_in_contact: register && registerHasPublicIp ? 1 : 0,
           tech_prefix: techPrefix ? techPrefix.trim() : null,
           diversion: diversion ? diversion.trim() : null,
           is_active: carrierActive ? 1 : 0,
@@ -1484,6 +1495,33 @@ const CarrierForm = (props) => {
                               invalid={realmInvalid}
                               ref={refRealm}
                             />
+                            <Label htmlFor="fromUser">SIP From User</Label>
+                            <Input
+                              name="fromUser"
+                              id="fromUser"
+                              value={fromUser}
+                              onChange={e => setFromUser(e.target.value)}
+                              placeholder="Optional: specify user part of SIP From header"
+                              ref={refFromUser}
+                            />
+                            <Label htmlFor="fromDomain">SIP From Domain</Label>
+                            <Input
+                              name="fromDomain"
+                              id="fromDomain"
+                              value={fromDomain}
+                              onChange={e => setFromDomain(e.target.value)}
+                              placeholder="Optional: specify host part of SIP From header"
+                              ref={refFromDomain}
+                            />
+                            <Label htmlFor="regPublicIp">Use Public IP in Contact</Label>
+                            <Checkbox
+                              noLeftMargin
+                              name="regPublicIp"
+                              id="regPublicIp"
+                              label=""
+                              checked={registerHasPublicIp}
+                              onChange={e => setRegisterHasPublicIp(e.target.checked)}
+                            />
                           </>
                         ) : (
                           null

src/components/forms/SettingsForm.js

@@ -16,7 +16,7 @@ import Loader from '../blocks/Loader';
 import Modal from '../blocks/Modal';
 import { ServiceProviderValueContext } from '../../contexts/ServiceProviderContext';
 import handleErrors from "../../helpers/handleErrors";
-import { APP_API_BASE_URL } from "../../constants";
+import { APP_API_BASE_URL, LIMITS } from "../../constants";
 
 const Td = styled.td`
   padding: 0.5rem 0;
@@ -60,6 +60,19 @@ const SettingsForm = () => {
   const [serviceProviderSid, setServiceProviderSid] = useState('');
   const [serviceProviders, setServiceProviders] = useState([]);
   const [confirmDelete, setConfirmDelete] = useState(false);
+  const [localLimits, setLocalLimits] = useState([]);
+
+  const callApi = async (path, method, data) => {
+    return await axios({
+      method: method,
+      baseURL: APP_API_BASE_URL,
+      url: path,
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem('token')}`,
+      },
+      ...(data && {data})
+    });
+  };
 
   useEffect(() => {
     const getSettingsData = async () => {
@@ -74,14 +87,7 @@ const SettingsForm = () => {
           return;
         }
 
-        const serviceProvidersResponse = await axios({
-          method: 'get',
-          baseURL: APP_API_BASE_URL,
-          url: `/ServiceProviders`,
-          headers: {
-            Authorization: `Bearer ${localStorage.getItem('token')}`,
-          },
-        });
+        const serviceProvidersResponse = await callApi(`/ServiceProviders`, 'get');
 
         const sps = serviceProvidersResponse.data;
         const sp = sps.find(s => s.service_provider_sid === currentServiceProvider);
@@ -91,6 +97,12 @@ const SettingsForm = () => {
         setServiceProviderSid(sp.service_provider_sid || '');
         setEnableMsTeams(sp.ms_teams_fqdn ? true : false);
         setSbcDomainName(sp.ms_teams_fqdn || '');
+
+        // Fetch Service provider Limits
+        if (sp.service_provider_sid) {
+          const serviceProvidersLimitsResponse = await callApi(`/ServiceProviders/${sp.service_provider_sid}/Limits`, 'get');
+          setLocalLimits(serviceProvidersLimitsResponse.data);
+        }
       } catch (err) {
         handleErrors({ err, history, dispatch });
       } finally {
@@ -208,15 +220,12 @@ const SettingsForm = () => {
         name: serviceProviderName.trim(),
       };
 
-      await axios({
-        method: 'put',
-        baseURL: APP_API_BASE_URL,
-        url: `/ServiceProviders/${serviceProviderSid}`,
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem('token')}`,
-        },
-        data,
-      });
+      await callApi(`/ServiceProviders/${serviceProviderSid}`, 'put', data);
+      await Promise.all(
+        localLimits.map(l => l.quantity === "" ?
+          callApi(`/ServiceProviders/${serviceProviderSid}/Limits?category=${l.category}`, 'delete') : 
+          callApi(`/ServiceProviders/${serviceProviderSid}/Limits`, 'post', l))
+        );
 
       refreshMsTeamsData();
 
@@ -272,6 +281,7 @@ const SettingsForm = () => {
               invalid={invalidServiceProviderName}
               ref={refServiceProviderName}
             />
+
             <div>{/* needed for CSS grid layout */}</div>
             <Checkbox
               noLeftMargin
@@ -297,6 +307,30 @@ const SettingsForm = () => {
               title={(!enableMsTeams && "You must enable Microsoft Teams Direct Routing in order to provide an SBC Domain Name") || ""}
             />
 
+            {LIMITS.map(({ label, category }) => {
+              const quantity = localLimits?.find(l => l.category === category)?.quantity;
+              return <React.Fragment key={category}>
+                <Label htmlFor={category}>{label}</Label>
+                <Input
+                  name={category}
+                  id={category}
+                  type="number"
+                  placeholder="Enter Quantity (0=unlimited)"
+                  min="0"
+                  value={quantity >= 0 ? quantity : ""}
+                  onChange={e => {
+                    const limit = localLimits.find(l => l.category === category);
+                    const value = e.target.value ? Number(e.target.value) : "";
+                    if (limit) {
+                      setLocalLimits(localLimits.map(l => l.category === category ? {...l, quantity: value} : l));
+                    } else {
+                      setLocalLimits([...localLimits, {category, quantity: value}]);
+                    }
+                  }}
+                />
+              </React.Fragment>;
+            })}
+
             {errorMessage && !confirmDelete && (
               <FormError grid message={errorMessage} />
             )}

src/components/forms/SpeechForm.js

@@ -79,6 +79,8 @@ const SpeechServicesAddEdit = (props) => {
   const refApiKey = useRef(null);
   const refRegion = useRef(null);
   const refAwsRegion = useRef(null);
+  const refUseCustomTts = useRef(null);
+  const refUseCustomStt = useRef(null);
 
   // Form inputs
   const [vendor, setVendor] = useState('');
@@ -93,6 +95,13 @@ const SpeechServicesAddEdit = (props) => {
   const [apiKey, setApiKey] = useState('');
   const [region, setRegion] = useState('');
   const [awsregion, setAwsRegion] = useState('');
+  const [useCustomTts, setUseCustomTts] = useState(false);
+  const [useCustomStt, setUseCustomStt] = useState(false);
+  const [customTtsEndpoint, setCustomTtsEndpoint] = useState('');
+  const [customSttEndpoint, setCustomSttEndpoint] = useState('');
+  // eslint-disable-next-line no-unused-vars
+  const [tmpCustomTtsEndpoint, setTmpCustomTtsEndpoint] =  useState('');
+  const [tmpCustomSttEndpoint, setTmpCustomSttEndpoint] = useState('');
 
   // Invalid form inputs
   const [invalidVendorGoogle, setInvalidVendorGoogle] = useState(false);
@@ -106,6 +115,9 @@ const SpeechServicesAddEdit = (props) => {
   const [invalidApiKey, setInvalidApiKey] = useState(false);
   const [invalidRegion, setInvalidRegion] = useState(false);
   const [invalidAwsRegion, setInvalidAwsRegion] = useState(false);
+  // eslint-disable-next-line no-unused-vars
+  const [invalidUseCustomTts, setInvalidUseCustomTts] = useState(false);
+  const [invalidUseCustomStt, setInvalidUseCustomStt] = useState(false);
 
   const [originalTtsValue, setOriginalTtsValue] = useState(null);
   const [originalSttValue, setOriginalSttValue] = useState(null);
@@ -162,6 +174,10 @@ const SpeechServicesAddEdit = (props) => {
           setUseForStt(speechCredential.data.use_for_stt || false);
           setOriginalTtsValue(speechCredential.data.use_for_tts || false);
           setOriginalSttValue(speechCredential.data.use_for_stt || false);
+          setUseCustomTts(speechCredential.data.use_custom_tts || false);
+          setCustomTtsEndpoint(speechCredential.data.custom_tts_endpoint || '');
+          setUseCustomStt(speechCredential.data.use_custom_stt || false);
+          setCustomSttEndpoint(speechCredential.data.custom_stt_endpoint || '');
         }
         setShowLoader(false);
       } catch (err) {
@@ -232,6 +248,8 @@ const SpeechServicesAddEdit = (props) => {
       setInvalidUseForTts(false);
       setInvalidUseForStt(false);
       setInvalidApiKey(false);
+      setInvalidUseCustomTts(false);
+      setInvalidUseCustomStt(false);
       let errorMessages = [];
       let focusHasBeenSet = false;
 
@@ -305,6 +323,24 @@ const SpeechServicesAddEdit = (props) => {
         }
       }
 
+      if (useCustomTts && !customTtsEndpoint) {
+        errorMessages.push('Please provide a custom voice endpoint.');
+        setInvalidUseCustomTts(true);
+        if (!focusHasBeenSet) {
+          refUseCustomTts.current.focus();
+          focusHasBeenSet = true;
+        }
+      }
+
+      if (useCustomStt && !customSttEndpoint) {
+        errorMessages.push('Please provide a custom speech endpoint Id.');
+        setInvalidUseCustomStt(true);
+        if (!focusHasBeenSet) {
+          refUseCustomStt.current.focus();
+          focusHasBeenSet = true;
+        }
+      }
+
       if (errorMessages.length > 1) {
         setErrorMessage(errorMessages);
         return;
@@ -333,16 +369,29 @@ const SpeechServicesAddEdit = (props) => {
         },
         data: {
           vendor,
-          service_key: vendor === 'google' ? JSON.stringify(serviceKey) : null,
-          access_key_id: vendor === 'aws' ? accessKeyId : null,
-          secret_access_key: vendor === 'aws' ? secretAccessKey : null,
-          aws_region: vendor === 'aws' ? awsregion : null,
-          api_key: ['microsoft', 'wellsaid'].includes(vendor) ? apiKey : null,
-          region: vendor === 'microsoft' ? region : null,
-          use_for_tts: useForTts,
-          use_for_stt: useForStt,
           service_provider_sid: accountSid ? null : currentServiceProvider,
           account_sid: accountSid || null,
+          use_for_tts: useForTts,
+          use_for_stt: useForStt,
+          ...(vendor === 'google' && method === 'post' && {
+            service_key: serviceKey ? JSON.stringify(serviceKey) : null,
+          }),
+          ...(vendor === 'aws' && {
+            ...(method === 'post' && {
+              access_key_id: accessKeyId || null,
+              secret_access_key: secretAccessKey || null}),
+            aws_region: awsregion || null
+          }),
+          ...(vendor === 'microsoft' && {
+            region: region || null,
+            use_custom_tts: useCustomTts ? 1 : 0,
+            use_custom_stt: useCustomStt ? 1 : 0,
+            custom_tts_endpoint: customTtsEndpoint || null,
+            custom_stt_endpoint: customSttEndpoint || null,
+          }),
+          ...(['wellsaid', 'microsoft'].includes(vendor) && method === 'post' && {
+            api_key: apiKey || null,
+          }),
         }
       });
 
@@ -655,6 +704,70 @@ const SpeechServicesAddEdit = (props) => {
                 </option>
               ))}
             </Select>
+            <div />
+            <Checkbox
+              noLeftMargin
+              name="useACustomVoice"
+              id="useACustomVoice"
+              label="Use a custom voice"
+              checked={useCustomTts}
+              onChange={e => {
+                setUseCustomTts(e.target.checked);
+                if (e.target.checked && tmpCustomTtsEndpoint) {
+                  setCustomTtsEndpoint(tmpCustomTtsEndpoint);
+                }
+
+                if (!e.target.checked) {
+                  setTmpCustomTtsEndpoint(customTtsEndpoint);
+                  setCustomTtsEndpoint("");
+                }
+              }}
+              invalid={invalidUseCustomTts}
+              ref={refUseCustomTts}
+            />
+            <Label htmlFor="customVoiceEndpoint">Custom voice endpoint Id</Label>
+            <Input
+              name="customVoiceEndpoint"
+              id="customVoiceEndpoint"
+              value={customTtsEndpoint}
+              onChange={e => setCustomTtsEndpoint(e.target.value)}
+              placeholder="Custom voice endpoint"
+              invalid={invalidUseCustomTts}
+              ref={refUseCustomTts}
+              disabled={!useCustomTts}
+            />
+            <div />
+            <Checkbox
+              noLeftMargin
+              name="useACustomSpeechModel"
+              id="useACustomSpeechModel"
+              label="Use a custom speech model"
+              checked={useCustomStt}
+              onChange={e => {
+                setUseCustomStt(e.target.checked);
+                if(e.target.checked && tmpCustomSttEndpoint) {
+                  setCustomSttEndpoint(tmpCustomSttEndpoint);
+                }
+
+                if(!e.target.checked) {
+                  setTmpCustomSttEndpoint(customSttEndpoint);
+                  setCustomSttEndpoint("");
+                }
+              }}
+              invalid={invalidUseCustomStt}
+              ref={refUseCustomStt}
+            />
+            <Label htmlFor="customSpeechEndpoint">Custom speech endpoint Id</Label>
+            <Input
+              name="customSpeechEndpoint"
+              id="customSpeechEndpoint"
+              value={customSttEndpoint}
+              onChange={e => setCustomSttEndpoint(e.target.value)}
+              placeholder="Custom speech endpoint Id"
+              invalid={invalidUseCustomStt}
+              ref={refUseCustomStt}
+              disabled={!useCustomStt}
+            />
           </>
         ) : vendor === 'wellsaid' ? (
           <>

src/constants.js

@@ -1,2 +1,31 @@
-const { REACT_APP_API_BASE_URL } = process.env;
+const { REACT_APP_API_BASE_URL, REACT_APP_ENABLE_ACCOUNT_LIMITS_ALL } = process.env;
 export const APP_API_BASE_URL = (window.JAMBONZ) ? window.JAMBONZ.APP_API_BASE_URL : REACT_APP_API_BASE_URL;
+export const APP_ENABLE_ACCOUNT_LIMITS_ALL = (window.JAMBONZ) ? window.JAMBONZ.APP_ENABLE_ACCOUNT_LIMITS_ALL : JSON.parse(REACT_APP_ENABLE_ACCOUNT_LIMITS_ALL);
+export const LIMITS = [
+    // {
+    //   label: "Max registered devices (0=unlimited)",
+    //   category: "device",
+    // },
+    // {
+    //   label: "Max api calls per minute (0=unlimited)",
+    //   category: "api_rate",
+    // },
+    {
+      label: "Max calls",
+      category: "voice_call_session",
+    }
+  ];
+  if (APP_ENABLE_ACCOUNT_LIMITS_ALL || APP_ENABLE_ACCOUNT_LIMITS_ALL === "true") {
+    LIMITS.push({
+      label: "Licensed calls",
+      category: "voice_call_session_license",
+    });
+    LIMITS.push({
+      label: "Max minutes",
+      category: "voice_call_minutes",
+    });
+    LIMITS.push({
+      label: "Licensed minutes",
+      category: "voice_call_minutes_license",
+    });
+  }