From 14f5e85a5fc9da3f4164c96542402c52d52bbba1 Mon Sep 17 00:00:00 2001 From: Esme Ling Date: Tue, 7 May 2024 11:41:51 -0700 Subject: [PATCH 1/2] Update the callStatus to canceled when we end an incoming call --- demos/demo-react-ts/src/components/App.tsx | 16 +++++++++++---- .../components/screens/CallEndedScreen.tsx | 2 ++ .../src/components/screens/IncomingScreen.tsx | 17 +++++++++------- demos/demo-react-ts/src/hooks/useCti.ts | 3 --- demos/demo-react-ts/src/types/ScreenTypes.ts | 4 +++- .../screens/CallEndedScreen-test.tsx | 20 +++++++++++++++++++ .../screens/IncomingScreen-test.tsx | 4 ++-- 7 files changed, 49 insertions(+), 17 deletions(-) diff --git a/demos/demo-react-ts/src/components/App.tsx b/demos/demo-react-ts/src/components/App.tsx index 0d5e23aa..4a691517 100644 --- a/demos/demo-react-ts/src/components/App.tsx +++ b/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("UNAVAILABLE"); + const [callStatus, setCallStatus] = useState(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} /> ); }, [ diff --git a/demos/demo-react-ts/src/components/screens/CallEndedScreen.tsx b/demos/demo-react-ts/src/components/screens/CallEndedScreen.tsx index ddf73cf3..ddec2640 100644 --- a/demos/demo-react-ts/src/components/screens/CallEndedScreen.tsx +++ b/demos/demo-react-ts/src/components/screens/CallEndedScreen.tsx @@ -19,6 +19,7 @@ function CallEndedScreen({ setNotes, callDuration, callDurationString, + callStatus, }: ScreenProps) { const handleNotes = (event: ChangeEvent) => { 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(); diff --git a/demos/demo-react-ts/src/components/screens/IncomingScreen.tsx b/demos/demo-react-ts/src/components/screens/IncomingScreen.tsx index c8af9c56..c019f775 100644 --- a/demos/demo-react-ts/src/components/screens/IncomingScreen.tsx +++ b/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({ {StartCallSvg} - + {EndCallSvg} diff --git a/demos/demo-react-ts/src/hooks/useCti.ts b/demos/demo-react-ts/src/hooks/useCti.ts index f98f6d80..4bfb390c 100644 --- a/demos/demo-react-ts/src/hooks/useCti.ts +++ b/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, }; }; diff --git a/demos/demo-react-ts/src/types/ScreenTypes.ts b/demos/demo-react-ts/src/types/ScreenTypes.ts index f7431a9f..13b7f993 100644 --- a/demos/demo-react-ts/src/types/ScreenTypes.ts +++ b/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,7 +30,6 @@ export interface ScreenProps { handleSaveCall: Function; fromNumber: string; setFromNumber: Function; - callStatus: any; availability: Availability; setAvailability: (availability: Availability) => void; direction: Direction; @@ -37,4 +37,6 @@ export interface ScreenProps { incomingContactName: string; incomingNumber: string; setIncomingNumber: (number: string) => void; + callStatus: CallStatus | null; + setCallStatus: (callStatus: CallStatus) => void; } diff --git a/demos/demo-react-ts/test/spec/components/screens/CallEndedScreen-test.tsx b/demos/demo-react-ts/test/spec/components/screens/CallEndedScreen-test.tsx index 3695827d..cc4482f7 100644 --- a/demos/demo-react-ts/test/spec/components/screens/CallEndedScreen-test.tsx +++ b/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( + + ); + 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"); + }); }); diff --git a/demos/demo-react-ts/test/spec/components/screens/IncomingScreen-test.tsx b/demos/demo-react-ts/test/spec/components/screens/IncomingScreen-test.tsx index 53cef213..87c4fbd6 100644 --- a/demos/demo-react-ts/test/spec/components/screens/IncomingScreen-test.tsx +++ b/demos/demo-react-ts/test/spec/components/screens/IncomingScreen-test.tsx @@ -91,7 +91,7 @@ describe("IncomingScreen", () => { it("Receives call", () => { // ARRANGE const { getByRole } = renderWithContext(); - const button = getByRole("button", { name: /start-call/ }); + const button = getByRole("button", { name: /answer-call/ }); // ACT button.click(); @@ -113,7 +113,7 @@ describe("IncomingScreen", () => { // ASSERT expect(props.handleEndCall).toHaveBeenCalled(); expect(cti.callEnded).toHaveBeenCalledWith({ - callEndStatus: "COMPLETED", + callEndStatus: "ENDING", }); }); }); From d11bdeed4d952b8885ad89f07d97edd4fd4fb226 Mon Sep 17 00:00:00 2001 From: Esme Ling Date: Tue, 7 May 2024 11:59:43 -0700 Subject: [PATCH 2/2] Update tests --- .../demo-react-ts/src/components/screens/IncomingScreen.tsx | 2 +- .../test/spec/components/screens/IncomingScreen-test.tsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/demos/demo-react-ts/src/components/screens/IncomingScreen.tsx b/demos/demo-react-ts/src/components/screens/IncomingScreen.tsx index c019f775..3a3e66a6 100644 --- a/demos/demo-react-ts/src/components/screens/IncomingScreen.tsx +++ b/demos/demo-react-ts/src/components/screens/IncomingScreen.tsx @@ -76,7 +76,7 @@ function IncomingScreen({ {EndCallSvg} diff --git a/demos/demo-react-ts/test/spec/components/screens/IncomingScreen-test.tsx b/demos/demo-react-ts/test/spec/components/screens/IncomingScreen-test.tsx index 87c4fbd6..205c9205 100644 --- a/demos/demo-react-ts/test/spec/components/screens/IncomingScreen-test.tsx +++ b/demos/demo-react-ts/test/spec/components/screens/IncomingScreen-test.tsx @@ -34,6 +34,7 @@ const props: Partial = { callStatus: { INTERNAL_COMPLETED: "COMPLETED", }, + setCallStatus: noop, }; describe("IncomingScreen", () => { @@ -105,7 +106,7 @@ describe("IncomingScreen", () => { it("Ends call", () => { // ARRANGE const { getByRole } = renderWithContext(); - const button = getByRole("button", { name: /end-call/ }); + const button = getByRole("button", { name: /cancel-call/ }); // ACT button.click(); @@ -113,7 +114,7 @@ describe("IncomingScreen", () => { // ASSERT expect(props.handleEndCall).toHaveBeenCalled(); expect(cti.callEnded).toHaveBeenCalledWith({ - callEndStatus: "ENDING", + callEndStatus: "CANCELED", }); }); });