From 8d4ffddddcac03ee81a3c446e4a7b37b5c05290e Mon Sep 17 00:00:00 2001
From: Hoan Luu Huu <110280845+xquanluu@users.noreply.github.com>
Date: Wed, 27 Nov 2024 08:24:26 +0700
Subject: [PATCH] support carrier dtmf type selection (#465)

* support carrier dtmf type selection

* fix review comments
---
 src/api/constants.ts                          |  5 ++
 src/api/types.ts                              |  3 ++
 .../internal/views/carriers/form.tsx          | 46 ++++++++++++++-----
 3 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/api/constants.ts b/src/api/constants.ts
index 806a25a..df1a334 100644
--- a/src/api/constants.ts
+++ b/src/api/constants.ts
@@ -313,6 +313,11 @@ export const USER_SCOPE_SELECTION: SelectorOptions[] = [
   { name: "Account", value: "account" },
 ];
 
+export const DTMF_TYPE_SELECTION: SelectorOptions[] = [
+  { name: "RFC 2833", value: "rfc2833" },
+  { name: "Tones", value: "tones" },
+];
+
 /** Available webhook methods */
 export const WEBHOOK_METHODS: WebhookOption[] = [
   {
diff --git a/src/api/types.ts b/src/api/types.ts
index 002e4aa..ad704c2 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -451,6 +451,8 @@ export interface CarrierRegisterStatus {
   callId: null | string;
 }
 
+export type DtmfType = "rfc2833" | "tones" | "info";
+
 export interface Carrier {
   voip_carrier_sid: string;
   name: string;
@@ -477,6 +479,7 @@ export interface Carrier {
   smpp_inbound_password: null | string;
   smpp_enquire_link_interval: number;
   register_status: CarrierRegisterStatus;
+  dtmf_type: DtmfType;
 }
 
 export interface PredefinedCarrier extends Carrier {
diff --git a/src/containers/internal/views/carriers/form.tsx b/src/containers/internal/views/carriers/form.tsx
index 03f48cb..48be8f2 100644
--- a/src/containers/internal/views/carriers/form.tsx
+++ b/src/containers/internal/views/carriers/form.tsx
@@ -19,6 +19,7 @@ import {
 import {
   DEFAULT_SIP_GATEWAY,
   DEFAULT_SMPP_GATEWAY,
+  DTMF_TYPE_SELECTION,
   FQDN,
   FQDN_TOP_LEVEL,
   INVALID,
@@ -29,7 +30,7 @@ import {
   TECH_PREFIX_MINLENGTH,
   USER_ACCOUNT,
 } from "src/api/constants";
-import { Icons, Section } from "src/components";
+import { Icons, Section, Tooltip } from "src/components";
 import {
   Checkzone,
   Message,
@@ -52,16 +53,17 @@ import {
   isNotBlank,
 } from "src/utils";
 
-import type {
-  Account,
-  UseApiDataMap,
-  Carrier,
-  SipGateway,
-  SmppGateway,
-  PredefinedCarrier,
-  Sbc,
-  Smpp,
-  Application,
+import {
+  type Account,
+  type UseApiDataMap,
+  type Carrier,
+  type SipGateway,
+  type SmppGateway,
+  type PredefinedCarrier,
+  type Sbc,
+  type Smpp,
+  type Application,
+  DtmfType,
 } from "src/api/types";
 import { setAccountFilter, setLocation } from "src/store/localStore";
 import { RegisterStatus } from "./register-status";
@@ -101,6 +103,7 @@ export const CarrierForm = ({
   const [e164, setE164] = useState(false);
   const [applicationSid, setApplicationSid] = useState("");
   const [accountSid, setAccountSid] = useState("");
+  const [dtmfType, setDtmfType] = useState<DtmfType>("rfc2833");
 
   const [sipRegister, setSipRegister] = useState(false);
   const [sipUser, setSipUser] = useState("");
@@ -216,6 +219,9 @@ export const CarrierForm = ({
       if (obj.smpp_inbound_password) {
         setSmppInboundPass(obj.smpp_inbound_password);
       }
+      if (obj.dtmf_type) {
+        setDtmfType(obj.dtmf_type);
+      }
     }
   };
 
@@ -524,6 +530,7 @@ export const CarrierForm = ({
         smpp_password: smppPass.trim() || null,
         smpp_inbound_system_id: smppInboundSystemId.trim() || null,
         smpp_inbound_password: smppInboundPass.trim() || null,
+        dtmf_type: dtmfType,
       };
 
       if (carrier && carrier.data) {
@@ -764,6 +771,23 @@ export const CarrierForm = ({
                       : false
                 }
               />
+
+              <label htmlFor="dtmf_type">
+                <Tooltip
+                  text={
+                    "RFC 2833 is commonly used on VoIP networks. Do not change unless you are certain this carrier does not support it"
+                  }
+                >
+                  DTMF type
+                </Tooltip>
+              </label>
+              <Selector
+                id="dtmf_type"
+                name="dtmf_type"
+                value={dtmfType}
+                options={DTMF_TYPE_SELECTION}
+                onChange={(e) => setDtmfType(e.target.value as DtmfType)}
+              />
               {user &&
                 disableDefaultTrunkRouting(user?.scope) &&
                 accountSid &&