add carrier instructions to send call to sip-realm

src/components/domain-input/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Icons } from "../icons";
+import "./styles.scss";
+
+type DomainInputProbs = {
+  id?: string;
+  name?: string;
+  value: string;
+  setValue: React.Dispatch<React.SetStateAction<string>>;
+  root_domain: string;
+  placeholder?: string;
+  is_valid: boolean;
+};
+
+export const DomainInput = ({
+  id,
+  name,
+  value,
+  setValue,
+  root_domain,
+  is_valid,
+  placeholder,
+}: DomainInputProbs) => {
+  return (
+    <>
+      <div className="clipboard clipboard-domain">
+        <div className="input-container">
+          <input
+            id={id}
+            name={name}
+            type="text"
+            value={value}
+            placeholder={placeholder}
+            onChange={(e) => setValue(e.target.value)}
+          />
+          <div className={`input-icon txt--${is_valid ? "teal" : "red"}`}>
+            {is_valid ? <Icons.CheckCircle /> : <Icons.XCircle />}
+          </div>
+        </div>
+        <div className="root-domain">
+          <p>{root_domain}</p>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DomainInput;

src/components/domain-input/styles.scss

@@ -0,0 +1,55 @@
+@use "../../styles/vars";
+@use "../../styles/mixins";
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;
+
+.input-container {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.clipboard-domain {
+  display: flex;
+  align-items: center;
+
+  input[type="text"],
+  input[type="number"] {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    width: 100%;
+    height: vars.$clipheight;
+
+    &:focus-visible {
+      outline: 0;
+    }
+  }
+
+  .internal form & {
+    max-width: calc(#{vars.$widthinput} - #{vars.$clipheight});
+  }
+
+  .input-icon {
+    position: absolute;
+    right: 5%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-left: 0;
+  }
+
+  .root-domain {
+    height: vars.$clipheight;
+    border-bottom-right-radius: ui-vars.$px01;
+    border-top-right-radius: ui-vars.$px01;
+    border: 2px solid ui-vars.$grey;
+    border-left: 0;
+    background-color: ui-vars.$pink;
+    padding: ui-vars.$px01;
+    display: flex;
+    align-items: center;
+
+    &[disabled] {
+      @include mixins.disabled();
+    }
+  }
+}

src/containers/internal/views/accounts/edit-sip-realm.tsx

@@ -1,41 +1,59 @@
 import { Button, ButtonGroup, H1, MS } from "@jambonz/ui-kit";
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { getAvailability, postSipRealms, useApiData } from "src/api";
 import { CurrentUserData } from "src/api/types";
 import { Section } from "src/components";
+import DomainInput from "src/components/domain-input";
 import { Message } from "src/components/forms";
 import { ROUTE_INTERNAL_ACCOUNTS } from "src/router/routes";
+import { hasValue } from "src/utils";
 
 export const EditSipRealm = () => {
   const [name, setName] = useState("");
   const [errorMessage, setErrorMessage] = useState("");
   const navigate = useNavigate();
   const [userData] = useApiData<CurrentUserData>("Users/me");
+  const typingTimeoutRef = useRef<number | null>(null);
+  const [isValidDomain, setIsValidDomain] = useState(false);
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
 
     const rootDomain = userData?.account?.root_domain;
     const account_sid = userData?.account?.account_sid;
 
-    getAvailability(`${name}.${rootDomain}`)
-      .then(({ json }) => {
-        if (!json.available) {
-          setErrorMessage("That subdomain is not available.");
-          return;
-        }
-        postSipRealms(account_sid || "", `${name}.${rootDomain}`)
-          .then(() => {
-            navigate(`${ROUTE_INTERNAL_ACCOUNTS}/${account_sid}/edit`);
-          })
-          .catch((error) => {
-            setErrorMessage(error.msg);
-          });
+    postSipRealms(account_sid || "", `${name}.${rootDomain}`)
+      .then(() => {
+        navigate(`${ROUTE_INTERNAL_ACCOUNTS}/${account_sid}/edit`);
       })
       .catch((error) => {
         setErrorMessage(error.msg);
       });
   };
+
+  useEffect(() => {
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    if (!name || name.length < 3) {
+      setIsValidDomain(false);
+      return;
+    }
+    setIsValidDomain(false);
+    typingTimeoutRef.current = setTimeout(() => {
+      getAvailability(`${name}.${userData?.account?.root_domain}`)
+        .then(({ json }) =>
+          setIsValidDomain(
+            Boolean(json.available) && hasValue(name) && name.length != 0
+          )
+        )
+        .catch((error) => {
+          setErrorMessage(error.msg);
+          setIsValidDomain(false);
+        });
+    }, 500);
+  }, [name]);
+
   return (
     <>
       <H1 className="h2">Edit Sip Realm</H1>
@@ -48,18 +66,15 @@ export const EditSipRealm = () => {
             </MS>
             {errorMessage && <Message message={errorMessage} />}
             <br />
-            <input
-              id="name"
-              required
-              type="text"
-              name="name"
-              placeholder="Name"
+            <DomainInput
+              id="sip_realm"
+              name="sip_realm"
               value={name}
-              onChange={(e) => setName(e.target.value)}
+              setValue={setName}
+              placeholder="Your name here"
+              root_domain={`.${userData?.account?.root_domain || ""}`}
+              is_valid={isValidDomain}
             />
-            <label htmlFor="fqdn">
-              FQDN: {name}.{userData?.account?.root_domain}
-            </label>
           </fieldset>
           <fieldset>
             <ButtonGroup left>
@@ -71,7 +86,7 @@ export const EditSipRealm = () => {
               >
                 Cancel
               </Button>
-              <Button type="submit" small>
+              <Button type="submit" small disabled={!isValidDomain}>
                 Change Sip Realm
               </Button>
             </ButtonGroup>

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

@@ -30,16 +30,24 @@ import {
   API_SIP_GATEWAY,
   API_SMPP_GATEWAY,
   CARRIER_REG_OK,
+  ENABLE_HOSTED_SYSTEM,
   USER_ACCOUNT,
 } from "src/api/constants";
 import { DeleteCarrier } from "./delete";
 
-import type { Account, Carrier, SipGateway, SmppGateway } from "src/api/types";
+import type {
+  Account,
+  Carrier,
+  CurrentUserData,
+  SipGateway,
+  SmppGateway,
+} from "src/api/types";
 import { Scope } from "src/store/types";
 import { getAccountFilter, setLocation } from "src/store/localStore";
 
 export const Carriers = () => {
   const user = useSelectState("user");
+  const [userData] = useApiData<CurrentUserData>("Users/me");
   const currentServiceProvider = useSelectState("currentServiceProvider");
   const [apiUrl, setApiUrl] = useState("");
   const [carrier, setCarrier] = useState<Carrier | null>(null);
@@ -130,7 +138,16 @@ export const Carriers = () => {
   return (
     <>
       <section className="mast">
-        <H1 className="h2">Carriers</H1>
+        <div>
+          <H1 className="h2">Carriers</H1>
+          {ENABLE_HOSTED_SYSTEM && (
+            <M>
+              Have your carrier send calls to{" "}
+              <span>{userData?.account?.sip_realm}</span>
+            </M>
+          )}
+        </div>
+
         <Link to={`${ROUTE_INTERNAL_CARRIERS}/add`} title="Add a Carrier">
           {" "}
           <Icon>

src/containers/login/sub-domain.tsx

@@ -1,41 +1,58 @@
 import { Button, H1, MS } from "@jambonz/ui-kit";
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { getAvailability, postSipRealms } from "src/api";
+import DomainInput from "src/components/domain-input";
 import { Message } from "src/components/forms";
 import { getToken, parseJwt } from "src/router/auth";
 import { ROUTE_INTERNAL_ACCOUNTS } from "src/router/routes";
 import { getRootDomain } from "src/store/localStore";
 import { UserData } from "src/store/types";
+import { hasValue } from "src/utils";
 
 export const RegisterChooseSubdomain = () => {
   const [name, setName] = useState("");
   const [errorMessage, setErrorMessage] = useState("");
+  const [isValidDomain, setIsValidDomain] = useState(false);
   const rootDomain = getRootDomain();
   const userData: UserData = parseJwt(getToken());
   const navigate = useNavigate();
+  const typingTimeoutRef = useRef<number | null>(null);
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     setErrorMessage("");
 
-    getAvailability(`${name}.${rootDomain}`)
-      .then(({ json }) => {
-        if (!json.available) {
-          setErrorMessage("That subdomain is not available.");
-          return;
-        }
-        postSipRealms(userData.account_sid || "", `${name}.${rootDomain}`)
-          .then(() => {
-            navigate(`${ROUTE_INTERNAL_ACCOUNTS}/${userData.account_sid}/edit`);
-          })
-          .catch((error) => {
-            setErrorMessage(error.msg);
-          });
+    postSipRealms(userData.account_sid || "", `${name}.${rootDomain}`)
+      .then(() => {
+        navigate(`${ROUTE_INTERNAL_ACCOUNTS}/${userData.account_sid}/edit`);
       })
       .catch((error) => {
         setErrorMessage(error.msg);
       });
   };
+
+  useEffect(() => {
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    if (!name || name.length < 3) {
+      setIsValidDomain(false);
+      return;
+    }
+    setIsValidDomain(false);
+    typingTimeoutRef.current = setTimeout(() => {
+      getAvailability(`${name}.${rootDomain}`)
+        .then(({ json }) =>
+          setIsValidDomain(
+            Boolean(json.available) && hasValue(name) && name.length != 0
+          )
+        )
+        .catch((error) => {
+          setErrorMessage(error.msg);
+          setIsValidDomain(false);
+        });
+    }, 500);
+  }, [name]);
   return (
     <>
       <H1 className="h2">Choose a subdomain</H1>
@@ -46,15 +63,18 @@ export const RegisterChooseSubdomain = () => {
           This will be the FQDN where your carrier will send calls, and where
           you can register devices to. This can be changed at any time.
         </MS>
-        <input
-          required
-          type="text"
-          name="username"
-          placeholder="Your Name"
+        <DomainInput
+          id="subdomain"
+          name="subdomain"
           value={name}
-          onChange={(e) => setName(e.target.value)}
+          setValue={setName}
+          placeholder="Your name here"
+          root_domain={rootDomain ? `.${rootDomain}` : ""}
+          is_valid={isValidDomain}
         />
-        <Button type="submit">Complete Registration →</Button>
+        <Button type="submit" disabled={!isValidDomain}>
+          Complete Registration →
+        </Button>
       </form>
     </>
   );