fix clients make user confuse (#298)

* fix clients make user confuse

* fix

src/containers/internal/views/accounts/subscription.tsx

@@ -1,11 +1,16 @@
 import React from "react";
-import { STRIPE_PUBLISHABLE_KEY } from "src/api/constants";
+import {
+  ENABLE_HOSTED_SYSTEM,
+  STRIPE_PUBLISHABLE_KEY,
+} from "src/api/constants";
 
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import SubscriptionForm from "./subscription-form";
 
-export const stripePromise = loadStripe(STRIPE_PUBLISHABLE_KEY);
+export const stripePromise = ENABLE_HOSTED_SYSTEM
+  ? loadStripe(STRIPE_PUBLISHABLE_KEY)
+  : null;
 
 export const Subscription = () => {
   return (

src/containers/internal/views/clients/add.tsx

@@ -5,7 +5,7 @@ import ClientsForm from "./form";
 export const ClientsAdd = () => {
   return (
     <>
-      <H1 className="h2">Add client</H1>
+      <H1 className="h2">Add sip client</H1>
       <ClientsForm />
     </>
   );

src/containers/internal/views/clients/delete.tsx

@@ -17,7 +17,7 @@ export const ClientsDelete = ({
     <>
       <Modal handleCancel={handleCancel} handleSubmit={handleSubmit}>
         <P>
-          Are you sure you want to delete the client{" "}
+          Are you sure you want to delete the sip client{" "}
           <strong>{client.username}</strong>?
         </P>
       </Modal>

src/containers/internal/views/clients/edit.tsx

@@ -21,7 +21,7 @@ export const ClientsEdit = () => {
 
   return (
     <>
-      <H1 className="h2">Edit client</H1>
+      <H1 className="h2">Edit sip client</H1>
       <ClientsForm client={{ data, refetch, error }} />
     </>
   );

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

@@ -2,7 +2,7 @@ import { Button, H1, Icon, M } from "@jambonz/ui-kit";
 import React, { useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import { deleteClient, useApiData, useServiceProviderData } from "src/api";
-import { Account, Client } from "src/api/types";
+import { Account, Client, CurrentUserData } from "src/api/types";
 import {
   AccountFilter,
   Icons,
@@ -20,10 +20,14 @@ import { USER_ACCOUNT } from "src/api/constants";
 
 export const Clients = () => {
   const user = useSelectState("user");
+  const [userData] = useApiData<CurrentUserData>("Users/me");
   const [accounts] = useServiceProviderData<Account[]>("Accounts");
   const [clients, refetch] = useApiData<Client[]>("Clients");
 
   const [accountSid, setAccountSid] = useState("");
+  const [selectedAccount, setSelectedAccount] = useState<
+    Account | null | undefined
+  >(null);
   const [filter, setFilter] = useState("");
   const [client, setClient] = useState<Client | null>();
 
@@ -33,6 +37,12 @@ export const Clients = () => {
       return clients;
     }
 
+    setSelectedAccount(
+      accountSid
+        ? accounts?.find((a: Account) => a.account_sid === accountSid)
+        : null
+    );
+
     return clients
       ? clients.filter((c) => {
           return accountSid
@@ -52,7 +62,7 @@ export const Clients = () => {
         .then(() => {
           toastSuccess(
             <>
-              Deleted outbound call route <strong>{client.username}</strong>
+              Deleted sip client <strong>{client.username}</strong>
             </>
           );
           setClient(null);
@@ -67,8 +77,48 @@ export const Clients = () => {
   return (
     <>
       <section className="mast">
-        <H1 className="h2">Clients</H1>
-        <Link to={`${ROUTE_INTERNAL_CLIENTS}/add`} title="Add a client">
+        <div>
+          <H1 className="h2">SIP client credentials</H1>
+          {user?.scope === USER_ACCOUNT ? (
+            userData?.account?.sip_realm ? (
+              <>
+                <M>
+                  Your sip realm is <span>{userData?.account?.sip_realm}</span>
+                </M>
+                <M>
+                  You can add sip credentials below to allow sip devices to
+                  register to this realm and make calls.
+                </M>
+              </>
+            ) : (
+              <M>
+                You need to associate a sip realm to this account in order to
+                add sip credentials.
+              </M>
+            )
+          ) : selectedAccount ? (
+            selectedAccount?.sip_realm ? (
+              <>
+                <M>
+                  Your sip realm is <span>{selectedAccount.sip_realm}</span>
+                </M>
+                <M>
+                  You can add sip credentials below to allow sip devices to
+                  register to this realm and make calls.
+                </M>
+              </>
+            ) : (
+              <M>
+                You need to associate a sip realm to this account in order to
+                add sip credentials.
+              </M>
+            )
+          ) : (
+            <></>
+          )}
+        </div>
+
+        <Link to={`${ROUTE_INTERNAL_CLIENTS}/add`} title="Add sip client">
           {" "}
           <Icon>
             <Icons.Plus />
@@ -156,13 +206,13 @@ export const Clients = () => {
               </div>
             ))
           ) : (
-            <M>No Clients.</M>
+            <M>No sip clients.</M>
           )}
         </div>
       </Section>
       <Section clean>
         <Button small as={Link} to={`${ROUTE_INTERNAL_CLIENTS}/add`}>
-          Add client
+          Add sip client
         </Button>
       </Section>
       {client && (