Update the callStatus to canceled when we end an incoming call

demos/demo-react-ts/src/components/App.tsx

@@ -15,7 +15,12 @@ import CallEndedScreen from "./screens/CallEndedScreen";
 import IncomingScreen from "./screens/IncomingScreen";
 import { useCti } from "../hooks/useCti";
 import { useCallDurationTimer } from "../hooks/useTimer";
-import { ScreenNames, Availability, Direction } from "../types/ScreenTypes";
+import {
+  ScreenNames,
+  Availability,
+  Direction,
+  CallStatus,
+} from "../types/ScreenTypes";
 import Alert from "./Alert";
 import { CALYPSO, GYPSUM, KOALA, OLAF, SLINKY } from "../utils/colors";
 import { FROM_NUMBER_ONE } from "../utils/phoneNumberUtils";
@@ -69,6 +74,7 @@ function App() {
   const [fromNumber, setFromNumber] = useState(FROM_NUMBER_ONE);
   const [incomingNumber, setIncomingNumber] = useState("+1");
   const [availability, setAvailability] = useState<Availability>("UNAVAILABLE");
+  const [callStatus, setCallStatus] = useState<CallStatus | null>(null);
 
   const {
     callDuration,
@@ -85,8 +91,9 @@ function App() {
     setIncomingNumber(incomingNumber);
   };
 
-  const { cti, phoneNumber, engagementId, callStatus, incomingContactName } =
-    useCti(initializeCallingStateForExistingCall);
+  const { cti, phoneNumber, engagementId, incomingContactName } = useCti(
+    initializeCallingStateForExistingCall
+  );
 
   const screens = direction === "OUTBOUND" ? OUTBOUND_SCREENS : INBOUND_SCREENS;
 
@@ -156,12 +163,13 @@ function App() {
         setFromNumber={setFromNumber}
         incomingNumber={incomingNumber}
         setIncomingNumber={setIncomingNumber}
-        callStatus={callStatus}
         availability={availability}
         setAvailability={setAvailability}
         direction={direction}
         setDirection={setDirection}
         incomingContactName={incomingContactName}
+        callStatus={callStatus}
+        setCallStatus={setCallStatus}
       />
     );
   }, [

demos/demo-react-ts/src/components/screens/CallEndedScreen.tsx

@@ -19,6 +19,7 @@ function CallEndedScreen({
   setNotes,
   callDuration,
   callDurationString,
+  callStatus,
 }: ScreenProps) {
   const handleNotes = (event: ChangeEvent<HTMLTextAreaElement>) => {
     setNotes(event.target.value);
@@ -36,6 +37,7 @@ function CallEndedScreen({
       engagementProperties: {
         hs_call_body: notes,
         hs_call_duration: callDuration.toString(),
+        hs_call_status: callStatus || "COMPLETED",
       },
     });
     handleSaveCall();

demos/demo-react-ts/src/components/screens/IncomingScreen.tsx

@@ -18,8 +18,8 @@ function IncomingScreen({
   handleEndCall,
   cti,
   startTimer,
-  callStatus,
   incomingContactName,
+  setCallStatus,
 }: ScreenProps) {
   const onAnswerCall = () => {
     const callStartTime = Date.now();
@@ -28,10 +28,9 @@ function IncomingScreen({
     handleNextScreen();
   };
 
-  const onEndCall = () => {
-    cti.callEnded({
-      callEndStatus: callStatus.INTERNAL_COMPLETED,
-    });
+  const onEndIncomingCall = () => {
+    setCallStatus("CANCELED");
+    cti.callEnded({ callEndStatus: "CANCELED" });
     handleEndCall();
   };
 
@@ -70,11 +69,15 @@ function IncomingScreen({
         <CallButton
           use="primary"
           onClick={onAnswerCall}
-          aria-label="start-call"
+          aria-label="answer-call"
         >
           {StartCallSvg}
         </CallButton>
-        <EndCallButton use="primary" onClick={onEndCall} aria-label="end-call">
+        <EndCallButton
+          use="primary"
+          onClick={onEndIncomingCall}
+          aria-label="cancel-call"
+        >
           {EndCallSvg}
         </EndCallButton>
       </Row>

demos/demo-react-ts/src/hooks/useCti.ts

@@ -5,8 +5,6 @@ import { useMemo, useState } from "react";
 
 // @ts-expect-error module not typed
 import CallingExtensions from "../../../../src/CallingExtensions";
-// @ts-expect-error module not typed
-import { callStatus } from "../../../../src/Constants";
 
 // @TODO Move it to CallingExtensions and export it once migrated to typescript
 type ObjectCoordinates = {
@@ -260,7 +258,6 @@ export const useCti = (
     phoneNumber,
     engagementId,
     cti,
-    callStatus,
     incomingContactName,
   };
 };

demos/demo-react-ts/src/types/ScreenTypes.ts

@@ -1,3 +1,4 @@
+export type CallStatus = "NO_ANSWER" | "CANCELED" | "COMPLETED";
 export type Availability = "AVAILABLE" | "UNAVAILABLE";
 export type Direction = "INBOUND" | "OUTBOUND";
 
@@ -29,12 +30,13 @@ export interface ScreenProps {
   handleSaveCall: Function;
   fromNumber: string;
   setFromNumber: Function;
-  callStatus: any;
   availability: Availability;
   setAvailability: (availability: Availability) => void;
   direction: Direction;
   setDirection: (direction: Direction) => void;
   incomingContactName: string;
   incomingNumber: string;
   setIncomingNumber: (number: string) => void;
+  callStatus: CallStatus | null;
+  setCallStatus: (callStatus: CallStatus) => void;
 }

demos/demo-react-ts/test/spec/components/screens/CallEndedScreen-test.tsx

@@ -68,7 +68,27 @@ describe("CallEndedScreen", () => {
       engagementProperties: {
         hs_call_body: "calling notes",
         hs_call_duration: "3000",
+        hs_call_status: "COMPLETED",
       },
     });
   });
+
+  it("Saves canceled call", () => {
+    const { getByRole } = renderWithContext(
+      <CallEndedScreen
+        {...props}
+        engagementId={1}
+        notes="calling notes"
+        callDuration={3000}
+        callStatus="CANCELED"
+      />
+    );
+    const button = getByRole("button", { name: /save-call/ });
+    button.click();
+    expect(props.handleSaveCall).toHaveBeenCalled();
+    expect(
+      (cti.callCompleted as jasmine.Spy).calls.argsFor(0)[0]
+        .engagementProperties.hs_call_status
+    ).toEqual("CANCELED");
+  });
 });

demos/demo-react-ts/test/spec/components/screens/IncomingScreen-test.tsx

@@ -34,6 +34,7 @@ const props: Partial<ScreenProps> = {
   callStatus: {
     INTERNAL_COMPLETED: "COMPLETED",
   },
+  setCallStatus: noop,
 };
 
 describe("IncomingScreen", () => {
@@ -91,7 +92,7 @@ describe("IncomingScreen", () => {
   it("Receives call", () => {
     // ARRANGE
     const { getByRole } = renderWithContext(<IncomingScreen {...props} />);
-    const button = getByRole("button", { name: /start-call/ });
+    const button = getByRole("button", { name: /answer-call/ });
 
     // ACT
     button.click();
@@ -105,15 +106,15 @@ describe("IncomingScreen", () => {
   it("Ends call", () => {
     // ARRANGE
     const { getByRole } = renderWithContext(<IncomingScreen {...props} />);
-    const button = getByRole("button", { name: /end-call/ });
+    const button = getByRole("button", { name: /cancel-call/ });
 
     // ACT
     button.click();
 
     // ASSERT
     expect(props.handleEndCall).toHaveBeenCalled();
     expect(cti.callEnded).toHaveBeenCalledWith({
-      callEndStatus: "COMPLETED",
+      callEndStatus: "CANCELED",
     });
   });
 });