feat: add sip gateway protocol for outbound traffic (#249)

* feat: add sip gateway protocol for outbound traffic

* fix: add tls/srtp

src/api/constants.ts

@@ -90,6 +90,26 @@ export const NETMASK_OPTIONS = NETMASK_BITS.map((bit) => ({
   value: bit.toString(),
 }));
 
+/** SIP Gateway Protocol */
+export const SIP_GATEWAY_PROTOCOL_OPTIONS = [
+  {
+    name: "UDP",
+    value: "udp",
+  },
+  {
+    name: "TCP",
+    value: "tcp",
+  },
+  {
+    name: "TLS",
+    value: "tls",
+  },
+  {
+    name: "TLS/SRTP",
+    value: "tls/srtp",
+  },
+];
+
 /** Password Length options */
 
 export const PASSWORD_MIN = 8;

src/api/types.ts

@@ -385,6 +385,7 @@ export interface Gateway {
 export interface SipGateway extends Gateway {
   sip_gateway_sid?: null | string;
   is_active: boolean;
+  protocol?: string;
 }
 
 export interface SmppGateway extends Gateway {

src/containers/internal/views/carriers/form.tsx

@@ -23,6 +23,7 @@ import {
   FQDN_TOP_LEVEL,
   INVALID,
   NETMASK_OPTIONS,
+  SIP_GATEWAY_PROTOCOL_OPTIONS,
   TCP_MAX_PORT,
   TECH_PREFIX_MINLENGTH,
   USER_ACCOUNT,
@@ -975,18 +976,33 @@ export const CarrierForm = ({
                           }
                         />
                       </div>
-                      <div>
-                        <Selector
-                          id={`sip_netmask_${i}`}
-                          name={`sip_netmask${i}`}
-                          placeholder="32"
-                          value={g.netmask}
-                          options={NETMASK_OPTIONS}
-                          onChange={(e) => {
-                            updateSipGateways(i, "netmask", e.target.value);
-                          }}
-                        />
-                      </div>
+                      {g.outbound ? (
+                        <div>
+                          <Selector
+                            id={`sip_protocol_${i}`}
+                            name={`sip_protocol${i}`}
+                            placeholder=""
+                            value={g.protocol}
+                            options={SIP_GATEWAY_PROTOCOL_OPTIONS}
+                            onChange={(e) => {
+                              updateSipGateways(i, "protocol", e.target.value);
+                            }}
+                          />
+                        </div>
+                      ) : (
+                        <div>
+                          <Selector
+                            id={`sip_netmask_${i}`}
+                            name={`sip_netmask${i}`}
+                            placeholder="32"
+                            value={g.netmask}
+                            options={NETMASK_OPTIONS}
+                            onChange={(e) => {
+                              updateSipGateways(i, "netmask", e.target.value);
+                            }}
+                          />
+                        </div>
+                      )}
                     </div>
                     <div>
                       <div>

src/styles/_forms.scss

@@ -207,7 +207,7 @@ fieldset {
   padding: ui-vars.$px02;
   border-radius: ui-vars.$px01;
   border: 2px solid ui-vars.$grey;
-  max-width: vars.$widthinput;
+  max-width: ui-vars.$width-mobile;
   position: relative;
 
   > div {
@@ -216,7 +216,7 @@ fieldset {
     align-items: center;
 
     &:nth-child(1) {
-      grid-template-columns: [col] calc(50% - #{ui-vars.$px02 * 2}) [col] 25% [col] 25%;
+      grid-template-columns: [col] calc(50% - #{ui-vars.$px02 * 2}) [col] 20% [col] 30%;
 
       @include mixins.small() {
         grid-template-columns: [col] 100%;