feat advance

src/common/types.ts

@@ -55,7 +55,11 @@ export interface AppSettings {
   sipUsername: string;
   sipPassword: string;
   sipDisplayName: string;
-  apiKey: string;
+}
+
+export interface AdvancedAppSettings {
+  apikey: string;
+  apiServer: string;
 }
 
 export interface CallHistory {

src/window/phone/index.tsx

@@ -14,7 +14,16 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
-import { Mic, MicOff, Pause, PhoneOff, Play } from "react-feather";
+import {
+  GitMerge,
+  List,
+  Mic,
+  MicOff,
+  Pause,
+  PhoneOff,
+  Play,
+  Users,
+} from "react-feather";
 import { Call, SipCallDirection, SipClientStatus } from "src/common/types";
 import { SipConstants, SipUA } from "src/lib";
 import IncommingCall from "./incomming-call";
@@ -381,11 +390,39 @@ export const Phone = ({
         )
       ) : (
         <VStack
-          spacing={4}
+          spacing={2}
           w="full"
           mt={5}
           className={isOnline() ? "" : "blurred"}
         >
+          <HStack spacing={2} align="start" w="full">
+            <Tooltip label="Call to user">
+              <IconButton
+                aria-label="Place call a user"
+                icon={<Users />}
+                variant="unstyled"
+                onClick={handleCallOnHold}
+              />
+            </Tooltip>
+            <Tooltip label="Call to a queue">
+              <IconButton
+                aria-label="Call to a queue"
+                icon={<GitMerge />}
+                variant="unstyled"
+                onClick={handleCallOnHold}
+              />
+            </Tooltip>
+
+            <Tooltip label="Call to an application">
+              <IconButton
+                aria-label="Place call app"
+                icon={<List />}
+                variant="unstyled"
+                onClick={handleCallOnHold}
+              />
+            </Tooltip>
+          </HStack>
+
           {isSipClientIdle(callStatus) ? (
             <Input
               value={inputNumber}

src/window/settings/advance.tsx

@@ -0,0 +1,69 @@
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  HStack,
+  Image,
+  Input,
+  Spacer,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import { useState } from "react";
+import PasswordInput from "src/components/password-input";
+import InfoIcon from "src/imgs/icons/Info.svg";
+import ResetIcon from "src/imgs/icons/Reset.svg";
+
+export const AdvanceSettings = () => {
+  const [apiKey, setApiKey] = useState("");
+  const [apiServer, setApiServer] = useState("");
+  const handleSubmit = () => {};
+  const resetSetting = () => {};
+  return (
+    <form onSubmit={handleSubmit}>
+      <VStack spacing={2} w="full" h="full" p={0}>
+        <VStack
+          spacing={2}
+          maxH="calc(100vh - 25em)"
+          overflowY="auto"
+          w="full"
+          p={0}
+        >
+          <FormControl id="jambonz_server_address">
+            <FormLabel>Jambonz API Server Base URL</FormLabel>
+            <Input
+              type="text"
+              placeholder="https://jambonz.cloud/api"
+              isRequired
+              value={apiServer}
+              onChange={(e) => setApiServer(e.target.value)}
+            />
+          </FormControl>
+          <FormControl id="api_key">
+            <FormLabel>API Key</FormLabel>
+            <PasswordInput password={[apiKey, setApiKey]} />
+          </FormControl>
+        </VStack>
+        <Button colorScheme="jambonz" type="submit" w="full">
+          Save
+        </Button>
+        <HStack w="full">
+          <HStack spacing={1}>
+            <Image src={InfoIcon} w="30px" h="30px" />
+            <Text fontSize="14px">Get help</Text>
+          </HStack>
+
+          <Spacer />
+          <HStack spacing={1}>
+            <Image src={ResetIcon} w="30px" h="30px" />
+            <Text fontSize="14px" onClick={resetSetting} cursor="pointer">
+              Reset settings
+            </Text>
+          </HStack>
+        </HStack>
+      </VStack>
+    </form>
+  );
+};
+
+export default AdvanceSettings;

src/window/settings/index.tsx

@@ -1,167 +1,26 @@
-import {
-  Button,
-  FormControl,
-  FormLabel,
-  HStack,
-  Input,
-  Spacer,
-  VStack,
-  useToast,
-  Image,
-  Box,
-  Flex,
-  Text,
-} from "@chakra-ui/react";
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
 import React, { useEffect, useState } from "react";
-import { DEFAULT_TOAST_DURATION } from "src/common/constants";
-import { AppSettings } from "src/common/types";
-import PasswordInput from "src/components/password-input";
-import { getSettings, saveSettings } from "src/storage";
-
-import InfoIcon from "src/imgs/icons/Info.svg";
-import ResetIcon from "src/imgs/icons/Reset.svg";
+import { DEFAULT_COLOR_SCHEME } from "src/common/constants";
+import BasicSettings from "./basic";
+import AdvanceSettings from "./advance";
 
 export const Settings = () => {
-  const [sipDomain, setSipDomain] = useState("");
-  const [sipServerAddress, setSipServerAddress] = useState("");
-  const [sipUsername, setSipUsername] = useState("");
-  const [sipPassword, setSipPassword] = useState("");
-  const [sipDisplayName, setSipDisplayName] = useState("");
-  const [apiKey, setApiKey] = useState("");
-  const toast = useToast();
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-
-    const settings: AppSettings = {
-      sipDomain,
-      sipServerAddress: sipServerAddress,
-      sipUsername,
-      sipPassword,
-      sipDisplayName,
-      apiKey,
-    };
-
-    saveSettings(settings);
-    toast({
-      title: "Settings saved successfully",
-      status: "success",
-      duration: DEFAULT_TOAST_DURATION,
-      isClosable: true,
-      colorScheme: "jambonz",
-    });
-  };
-
-  const resetSetting = () => {
-    saveSettings({} as AppSettings);
-    setSipDomain("");
-    setSipServerAddress("");
-    setSipUsername("");
-    setSipPassword("");
-    setSipDisplayName("");
-    setApiKey("");
-  };
-
-  useEffect(() => {
-    const settings = getSettings();
-    if (settings.sipDomain) {
-      setSipDomain(settings.sipDomain);
-    }
-    if (settings.sipServerAddress) {
-      setSipServerAddress(settings.sipServerAddress);
-    }
-    if (settings.sipUsername) {
-      setSipUsername(settings.sipUsername);
-    }
-    if (settings.sipPassword) {
-      setSipPassword(settings.sipPassword);
-    }
-    if (settings.sipDisplayName) {
-      setSipDisplayName(settings.sipDisplayName);
-    }
-    if (settings.apiKey) {
-      setApiKey(settings.apiKey);
-    }
-  }, []);
   return (
-    <form onSubmit={handleSubmit}>
-      <VStack spacing={2}>
-        <FormControl id="jambonz_sip_domain">
-          <FormLabel>Jambonz SIP Domain</FormLabel>
-          <Input
-            type="text"
-            placeholder="Domain"
-            isRequired
-            value={sipDomain}
-            onChange={(e) => setSipDomain(e.target.value)}
-          />
-        </FormControl>
+    <Tabs isFitted colorScheme={DEFAULT_COLOR_SCHEME}>
+      <TabList mb="1em" gap={1}>
+        <Tab>Basic</Tab>
+        <Tab>Advance</Tab>
+      </TabList>
 
-        <FormControl id="jambonz_server_address">
-          <FormLabel>Jambonz Server Address</FormLabel>
-          <Input
-            type="text"
-            placeholder="wss://sip.jambonz.cloud:8443/"
-            isRequired
-            value={sipServerAddress}
-            onChange={(e) => setSipServerAddress(e.target.value)}
-          />
-        </FormControl>
-
-        <FormControl id="username">
-          <FormLabel>SIP Username</FormLabel>
-          <Input
-            type="text"
-            placeholder="Username"
-            isRequired
-            value={sipUsername}
-            onChange={(e) => setSipUsername(e.target.value)}
-          />
-        </FormControl>
-
-        <FormControl id="password">
-          <FormLabel fontWeight="">SIP Password</FormLabel>
-          <PasswordInput
-            password={[sipPassword, setSipPassword]}
-            placeHolder="Enter your password"
-          />
-        </FormControl>
-
-        <FormControl id="sip_display_name">
-          <FormLabel>SIP Display Name</FormLabel>
-          <Input
-            type="text"
-            placeholder="Display name"
-            isRequired
-            value={sipDisplayName}
-            onChange={(e) => setSipDisplayName(e.target.value)}
-          />
-        </FormControl>
-
-        <FormControl id="api_key">
-          <FormLabel>API Key (optional)</FormLabel>
-          <PasswordInput password={[apiKey, setApiKey]} />
-        </FormControl>
-
-        <Button colorScheme="jambonz" type="submit" w="full">
-          Save
-        </Button>
-        <HStack w="full">
-          <HStack spacing={1}>
-            <Image src={InfoIcon} w="30px" h="30px" />
-            <Text fontSize="14px">Get help</Text>
-          </HStack>
-
-          <Spacer />
-          <HStack spacing={1}>
-            <Image src={ResetIcon} w="30px" h="30px" />
-            <Text fontSize="14px" onClick={resetSetting} cursor="pointer">
-              Reset settings
-            </Text>
-          </HStack>
-        </HStack>
-      </VStack>
-    </form>
+      <TabPanels mt={1}>
+        <TabPanel p={0}>
+          <BasicSettings />
+        </TabPanel>
+        <TabPanel p={0}>
+          <AdvanceSettings />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
   );
 };