update(calls): added skip, reconnect and connect (#4845)

packages/plugin-calls-ui/src/components/Form.tsx

@@ -10,10 +10,10 @@ import { IFormProps } from '@erxes/ui/src/types';
 import { __ } from '@erxes/ui/src/utils';
 import React, { useState } from 'react';
 
-interface Props {
+interface IProps {
   closeModal?: () => void;
   data: any;
-  callData?: { callerNumber: String };
+  callData?: { callerNumber: string };
   setConfig?: any;
 }
 
@@ -26,19 +26,25 @@ const renderInput = (
   return (
     <FormGroup>
       <ControlLabel>{label}</ControlLabel>
-      <FormControl name={name} value={defaultValue} disabled {...formProps} />
+      <FormControl
+        name={name}
+        value={defaultValue}
+        disabled={true}
+        {...formProps}
+      />
     </FormGroup>
   );
 };
 
-const CallIntegrationForm = (props: Props) => {
+const CallIntegrationForm = (props: IProps) => {
   const { closeModal, data = {}, setConfig } = props;
   const [selectedIntegrationId, setSelectedIntegrationId] = useState('');
   const integration = selectedIntegrationId
     ? data?.find(d => d._id === selectedIntegrationId)
     : data?.[0];
 
   const saveCallConfig = () => {
+    // tslint:disable-next-line:no-unused-expression
     integration &&
       localStorage.setItem(
         'config:call_integrations',
@@ -51,6 +57,7 @@ const CallIntegrationForm = (props: Props) => {
           isAvailable: true
         })
       );
+    // tslint:disable-next-line:no-unused-expression
     integration &&
       setConfig({
         inboxId: integration.inboxId,
@@ -63,6 +70,33 @@ const CallIntegrationForm = (props: Props) => {
     closeModal();
   };
 
+  const skipCallConnection = () => {
+    // tslint:disable-next-line:no-unused-expression
+    integration &&
+      localStorage.setItem(
+        'config:call_integrations',
+        JSON.stringify({
+          inboxId: integration?.inboxId,
+          phone: integration?.phone,
+          wsServer: integration?.wsServer,
+          token: integration?.token,
+          operators: integration?.operators,
+          isAvailable: false
+        })
+      );
+    // tslint:disable-next-line:no-unused-expression
+    integration &&
+      setConfig({
+        inboxId: integration.inboxId,
+        phone: integration.phone,
+        wsServer: integration.wsServer,
+        token: integration.token,
+        operators: integration.operators,
+        isAvailable: false
+      });
+    closeModal();
+  };
+
   const onChange = e => {
     setSelectedIntegrationId(e.target.value);
   };
@@ -124,6 +158,15 @@ const CallIntegrationForm = (props: Props) => {
           >
             Cancel
           </Button>
+
+          <Button
+            btnStyle="primary"
+            type="button"
+            onClick={skipCallConnection}
+            icon="times-circle"
+          >
+            Skip connection
+          </Button>
           <Button
             type="submit"
             btnStyle="success"

packages/plugin-calls-ui/src/components/Keypad.tsx

@@ -14,7 +14,8 @@ import {
   ContactItem,
   CallTabsContainer,
   CallTab,
-  CallTabContent
+  CallTabContent,
+  DisconnectCall
 } from '../styles';
 import { inCallTabs, numbers, symbols } from '../constants';
 import { FormControl } from '@erxes/ui/src/components/form';
@@ -158,13 +159,64 @@ const KeyPad = (props: Props, context) => {
   };
 
   const handleCallStop = () => {
-    const { stopCall, call } = context;
+    const { stopCall } = context;
 
     if (stopCall) {
       stopCall();
     }
   };
 
+  const handleCallConnect = () => {
+    const integration = callIntegrationsOfUser?.find(
+      integration => integration.phone === callFrom
+    );
+
+    localStorage.setItem(
+      'config:call_integrations',
+      JSON.stringify({
+        inboxId: integration?.inboxId,
+        phone: integration?.phone,
+        wsServer: integration?.wsServer,
+        token: integration?.token,
+        operators: integration?.operators,
+        isAvailable: true
+      })
+    );
+    setConfig({
+      inboxId: integration?.inboxId,
+      phone: integration?.phone,
+      wsServer: integration?.wsServer,
+      token: integration?.token,
+      operators: integration?.operators,
+      isAvailable: true
+    });
+  };
+
+  const handleCallDisConnect = () => {
+    const integration = callIntegrationsOfUser?.find(
+      integration => integration.phone === callFrom
+    );
+    localStorage.setItem(
+      'config:call_integrations',
+      JSON.stringify({
+        inboxId: integration?.inboxId,
+        phone: integration?.phone,
+        wsServer: integration?.wsServer,
+        token: integration?.token,
+        operators: integration?.operators,
+        isAvailable: false
+      })
+    );
+    setConfig({
+      inboxId: integration?.inboxId,
+      phone: integration?.phone,
+      wsServer: integration?.wsServer,
+      token: integration?.token,
+      operators: integration?.operators,
+      isAvailable: false
+    });
+  };
+
   const handNumPad = e => {
     let num = number;
     if (e === 'delete') {
@@ -441,11 +493,22 @@ const KeyPad = (props: Props, context) => {
           />
           <>
             {Sip.call?.status === CALL_STATUS_IDLE && (
-              <Button icon="outgoing-call" onClick={handleCall}>
-                Call
-              </Button>
+              <>
+                <Button icon="outgoing-call" onClick={handleCall}>
+                  Call
+                </Button>
+                <DisconnectCall>
+                  <Button
+                    btnStyle="danger"
+                    icon="signal-slash"
+                    onClick={handleCallDisConnect}
+                  >
+                    Disconnect Call
+                  </Button>
+                </DisconnectCall>
+              </>
             )}
-            {Sip.call?.status !== CALL_STATUS_IDLE && (
+            {Sip.call && Sip.call?.status !== CALL_STATUS_IDLE && (
               <Button
                 icon="phone-slash"
                 btnStyle="danger"
@@ -454,6 +517,11 @@ const KeyPad = (props: Props, context) => {
                 End Call
               </Button>
             )}
+            {!Sip.call && (
+              <Button btnStyle="success" onClick={handleCallConnect}>
+                Connect to Call
+              </Button>
+            )}
           </>
         </NumberInput>
       )}

packages/plugin-calls-ui/src/components/SipProvider/index.tsx

@@ -167,6 +167,14 @@ export default class SipProvider extends React.Component<
   }
 
   public componentDidMount() {
+    const callConfig = JSON.parse(
+      localStorage.getItem('config:call_integrations')
+    );
+
+    if (callConfig && !callConfig.isAvailable) {
+      return this.props.children(this.state);
+    }
+
     if (window.document.getElementById('sip-provider-audio')) {
       throw new Error(
         `Creating two SipProviders in one application is forbidden. If that's not the case ` +
@@ -184,6 +192,14 @@ export default class SipProvider extends React.Component<
   }
 
   public componentDidUpdate(prevProps) {
+    const callConfig = JSON.parse(
+      localStorage.getItem('config:call_integrations')
+    );
+
+    if (callConfig && !callConfig.isAvailable) {
+      return this.props.children(this.state);
+    }
+
     if (this.props.debug !== prevProps.debug) {
       this.reconfigureDebug();
     }

packages/plugin-calls-ui/src/components/Widget.tsx

@@ -3,7 +3,7 @@ import Tip from '@erxes/ui/src/components/Tip';
 import { __ } from '@erxes/ui/src/utils';
 import React from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
-import { NotifButton } from '@erxes/ui-notifications/src/components/styles';
+import { NotifButton } from '../styles';
 import WidgetPopover from './WidgetPopover';
 
 type Props = {

packages/plugin-calls-ui/src/containers/IncomingCall.tsx

@@ -10,12 +10,12 @@ import { Alert } from '@erxes/ui/src/utils';
 import client from '@erxes/ui/src/apolloClient';
 import queries from '../graphql/queries';
 
-interface Props {
+interface IProps {
   closeModal?: () => void;
   callIntegrationsOfUser: any;
 }
 
-const IncomingCallContainer = (props: Props, context) => {
+const IncomingCallContainer = (props: IProps, context) => {
   const [customer, setCustomer] = useState<any>(undefined);
   const [conversation, setConversation] = useState<any>(undefined);
 
@@ -91,16 +91,16 @@ const IncomingCallContainer = (props: Props, context) => {
       });
   };
 
-  const getCustomerDetail = (phoneNumber?: string) => {
-    if (!phoneNumber) {
+  const getCustomerDetail = (phone?: string) => {
+    if (!phone) {
       return null;
     }
 
     client
       .query({
         query: gql(queries.callCustomerDetail),
         fetchPolicy: 'network-only',
-        variables: { callerNumber: phoneNumber }
+        variables: { callerNumber: phone }
       })
       .then(({ data }: { data: any }) => {
         if (data && data.callsCustomerDetail) {
@@ -114,8 +114,8 @@ const IncomingCallContainer = (props: Props, context) => {
     return;
   };
 
-  const toggleSection = (phoneNumber): void => {
-    getCustomerDetail(phoneNumber);
+  const toggleSection = (phone): void => {
+    getCustomerDetail(phone);
   };
 
   const taggerRefetchQueries = [

packages/plugin-calls-ui/src/containers/SipProvider.tsx

@@ -24,7 +24,9 @@ const SipProviderContainer = props => {
     return null;
   }
 
-  if (error) return Alert.error(error.message);
+  if (error) {
+    return Alert.error(error.message);
+  }
   const { callIntegrationsOfUser } = data;
 
   if (!callIntegrationsOfUser || callIntegrationsOfUser.length === 0) {
@@ -48,6 +50,15 @@ const SipProviderContainer = props => {
       <ModalTrigger title="Call Config Modal" content={content} isOpen={true} />
     );
   }
+  if (!config.isAvailable) {
+    return (
+      <WidgetContainer
+        {...props}
+        callIntegrationsOfUser={callIntegrationsOfUser}
+        setConfig={handleSetConfig}
+      />
+    );
+  }
 
   const defaultIntegration = config || callIntegrationsOfUser?.[0];
 

packages/plugin-calls-ui/src/styles.ts

@@ -392,3 +392,31 @@ export const CallTabContent = styledTS<{ tab: string; show: boolean }>(
     flex: 1;
   }
 `;
+
+export const NotifButton = styled.div`
+  cursor: pointer;
+  text-align: center;
+  width: 100%;
+  position: relative;
+  transition: all 0.3s ease;
+  color: ${colors.textSecondary};
+
+  span {
+    position: absolute;
+    top: -4px;
+    right: -8px;
+    padding: 3px;
+    min-width: 18px;
+    min-height: 18px;
+    line-height: 12px;
+  }
+`;
+
+export const DisconnectCall = styled.div`
+  padding: 10px 20px;
+  width: 100%;
+  button {
+    margin: 0;
+    width: 100%;
+  }
+`;