Send additional call engagement properties in call completed data

demo-v1/src/components/App.tsx

@@ -17,6 +17,7 @@ import { useCallDurationTimer } from "../hooks/useTimer";
 import { WHITE } from "../visitor-ui-component-library/theme/ColorConstants";
 import { ScreenNames } from "../types/ScreenTypes";
 import Alert from "./Alert";
+import * as EngagementStatuses from "../types/EngagementStatuses";
 
 export const screens = [
   LoginScreen,
@@ -40,7 +41,8 @@ function App() {
   const [screenIndex, setScreenIndex] = useState(0);
   const [dialNumber, setDialNumber] = useState("+1");
   const [notes, setNotes] = useState("");
-  const { callDurationString, startTimer, stopTimer } = useCallDurationTimer();
+  const { callDuration, callDurationString, startTimer, stopTimer } =
+    useCallDurationTimer();
   const [showAlert, setShowAlert] = useState(true);
 
   const handleNextScreen = () => {
@@ -68,13 +70,19 @@ function App() {
 
   const handleEndCall = () => {
     stopTimer();
+    cti.callEnded({
+      callEndStatus: EngagementStatuses.INTERNAL_COMPLETED,
+    });
     handleNavigateToScreen(ScreenNames.CallEnded);
   };
 
   const handleSaveCall = () => {
     resetInputs();
     cti.callCompleted({
       engagementId,
+      hideWidget: false,
+      notes,
+      callDuration,
     });
     handleNavigateToScreen(ScreenNames.Keypad);
   };

demo-v1/src/hooks/useCti.ts

@@ -31,11 +31,6 @@ export const useCti = () => {
           const { engagementId } = data;
           setEngagementId(engagementId);
         },
-        onEndCall: (data: any, rawEvent: any) => {
-          window.setTimeout(() => {
-            cti.callEnded();
-          }, 500);
-        },
         onVisibilityChanged: (data: any, rawEvent: any) => {},
       },
     });

demo-v1/src/hooks/useTimer.ts

@@ -3,15 +3,11 @@ import { millisecondsToFormattedDuration } from "../utils/millisecondsToFormatte
 
 export const useCallDurationTimer = () => {
   let timerId = useRef<NodeJS.Timer>();
-  const [callDurationString, setCallDurationString] = useState(
-    millisecondsToFormattedDuration(0)
-  );
+  const [callDuration, setCallDuration] = useState(0);
 
   const startTimer = (callStartTime: number) => {
     const tick = () => {
-      setCallDurationString(
-        millisecondsToFormattedDuration(Date.now() - callStartTime)
-      );
+      setCallDuration(Date.now() - callStartTime);
     };
     timerId.current = setInterval(tick, 1000);
   };
@@ -20,5 +16,10 @@ export const useCallDurationTimer = () => {
     clearInterval(timerId.current);
   };
 
-  return { callDurationString, startTimer, stopTimer };
+  return {
+    callDuration,
+    callDurationString: millisecondsToFormattedDuration(callDuration),
+    startTimer,
+    stopTimer,
+  };
 };

demo-v1/src/types/EngagementStatuses.ts

@@ -0,0 +1,40 @@
+/** These are potential statuses from the BE client when calling from phone
+ * or detecting that a call has ended in the linked engagement */
+
+export const INTERNAL_CONNECTING = "CONNECTING";
+export const INTERNAL_CALLING_CRM_USER = "CALLING_CRM_USER";
+export const INTERNAL_IN_PROGRESS = "IN_PROGRESS";
+export const INTERNAL_CANCELED = "CANCELED";
+export const INTERNAL_FAILED = "FAILED";
+export const INTERNAL_BUSY = "BUSY";
+export const INTERNAL_NO_ANSWER = "NO_ANSWER";
+export const INTERNAL_COMPLETED = "COMPLETED";
+export const INTERNAL_ENDING = "ENDING";
+export const INTERNAL_QUEUED = "QUEUED";
+export const INTERNAL_RINGING = "RINGING";
+
+export const RINGING_STATUSES = [
+  INTERNAL_QUEUED,
+  INTERNAL_RINGING,
+  INTERNAL_CONNECTING,
+  INTERNAL_CALLING_CRM_USER,
+];
+
+export const IN_PROGRESS_STATUSES = [INTERNAL_IN_PROGRESS];
+
+export const ENDING_STATUSES = [INTERNAL_ENDING];
+
+export const END_STATUSES = [
+  INTERNAL_COMPLETED,
+  INTERNAL_FAILED,
+  INTERNAL_CANCELED,
+  INTERNAL_BUSY,
+  INTERNAL_NO_ANSWER,
+];
+
+export type EndStatus =
+  | typeof INTERNAL_COMPLETED
+  | typeof INTERNAL_FAILED
+  | typeof INTERNAL_CANCELED
+  | typeof INTERNAL_BUSY
+  | typeof INTERNAL_NO_ANSWER;