From 4d7e84fa439b41b174e10acc8b78637d162c0191 Mon Sep 17 00:00:00 2001
From: Hoan Luu Huu <110280845+xquanluu@users.noreply.github.com>
Date: Thu, 11 May 2023 03:02:39 +0700
Subject: [PATCH] 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                          | 20 ++++++++++
 src/api/types.ts                              |  1 +
 .../internal/views/carriers/form.tsx          | 40 +++++++++++++------
 src/styles/_forms.scss                        |  4 +-
 4 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/src/api/constants.ts b/src/api/constants.ts
index f832936..706e3cc 100644
--- a/src/api/constants.ts
+++ b/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;
diff --git a/src/api/types.ts b/src/api/types.ts
index 614a4ae..9af9f77 100644
--- a/src/api/types.ts
+++ b/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 {
diff --git a/src/containers/internal/views/carriers/form.tsx b/src/containers/internal/views/carriers/form.tsx
index 784674a..ba41d30 100644
--- a/src/containers/internal/views/carriers/form.tsx
+++ b/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>
diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss
index 8e3e473..fb359e0 100644
--- a/src/styles/_forms.scss
+++ b/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%;