Update event console logging (#70)

* Update event handling console log messages

* Move logging to iframe manager

demo-v1/package.json

@@ -14,7 +14,7 @@
   },
   "license": "ISC",
   "dependencies": {
-    "@hubspot/calling-extensions-sdk": "^0.0.10",
+    "@hubspot/calling-extensions-sdk": "^0.0.11-alpha.0",
     "react": "^18.2.0",
     "react-aria": "^3.22.0",
     "react-dom": "^18.2.0",

demo-v1/src/components/App.tsx

@@ -66,8 +66,9 @@ function App() {
 
   const handleEndCall = () => {
     stopTimer();
-    cti.callAnswered();
-    cti.callEnded();
+    cti.callCompleted({
+      engagementId,
+    });
     handleNavigateToScreen(ScreenNames.CallEnded);
   };
 

demo-v1/src/components/screens/CallEndedScreen.tsx

@@ -1,8 +1,12 @@
 import { ChangeEvent } from "react";
 import styled from "styled-components";
-import { RoundedButton, Row, Timer, TextArea } from "../Components";
+import { RoundedButton, Row, Timer, TextArea, Wrapper } from "../Components";
 import { ScreenProps } from "../../types/ScreenTypes";
 
+const StyledRow = styled(Row)`
+  justify-content: flex-start;
+`;
+
 function CallEndedScreen({
   handleSaveCall,
   dialNumber,
@@ -15,7 +19,7 @@ function CallEndedScreen({
   };
 
   return (
-    <>
+    <Wrapper>
       <div style={{ textAlign: "center" }}>
         <h2>Call with {dialNumber} ended</h2>
         <Timer>{callDurationString}</Timer>
@@ -34,7 +38,7 @@ function CallEndedScreen({
           Save Call
         </RoundedButton>
       </Row>
-    </>
+    </Wrapper>
   );
 }
 

demo-v1/src/components/screens/CallingScreen.tsx

@@ -1,13 +1,14 @@
 import { useState, ChangeEvent } from "react";
 import styled from "styled-components";
-import { ScreenNames, ScreenProps } from "../../types/ScreenTypes";
+import { ScreenProps } from "../../types/ScreenTypes";
 import {
   CallActionButton,
   EndCallButton,
   Row,
   Timer,
   Tooltip,
   TextArea,
+  Wrapper,
 } from "../Components";
 import { KeypadPopover } from "../Keypad";
 
@@ -46,7 +47,7 @@ function CallingScreen({
   };
 
   return (
-    <>
+    <Wrapper>
       <div style={{ textAlign: "center" }}>
         <h2>Call with {dialNumber}</h2>
         <Timer>{callDurationString}</Timer>
@@ -150,7 +151,7 @@ function CallingScreen({
           placeholder="Enter notes from your call ..."
         ></TextArea>
       </Row>
-    </>
+    </Wrapper>
   );
 }
 

demo-v1/src/components/screens/DialingScreen.tsx

@@ -1,22 +1,24 @@
 import { useEffect } from "react";
-import { EndCallButton, Row, Timer } from "../Components";
-import { ScreenNames, ScreenProps } from "../../types/ScreenTypes";
+import { EndCallButton, Row, Timer, Wrapper } from "../Components";
+import { ScreenProps } from "../../types/ScreenTypes";
 
 function DialingScreen({
   handleNextScreen,
   dialNumber,
   callDurationString,
   handleEndCall,
+  cti,
 }: ScreenProps) {
   useEffect(() => {
     const timer = setTimeout(() => {
+      cti.callAnswered();
       handleNextScreen();
     }, 2500);
     return () => clearTimeout(timer);
   }, []);
 
   return (
-    <>
+    <Wrapper>
       <div style={{ textAlign: "center" }}>
         <h2>Dialing {dialNumber} ...</h2>
         <Timer>{callDurationString}</Timer>
@@ -26,7 +28,7 @@ function DialingScreen({
           End Call
         </EndCallButton>
       </Row>
-    </>
+    </Wrapper>
   );
 }
 

demo-v1/src/components/screens/KeypadScreen.tsx

@@ -95,7 +95,7 @@ function KeypadScreen({
   }, [cursorEnd, cursorStart, dialNumber]);
 
   return (
-    <Wrapper data-testid="keypad">
+    <Wrapper>
       <StyledRow>
         <LinkButton onClick={handleLogout}>Log out</LinkButton>
       </StyledRow>

demo-v1/src/components/screens/LoginScreen.tsx

@@ -7,7 +7,7 @@ import {
   LinkButton,
   Row,
 } from "../Components";
-import { ScreenNames, ScreenProps } from "../../types/ScreenTypes";
+import { ScreenProps } from "../../types/ScreenTypes";
 
 function LoginScreen({ cti, handleNextScreen }: ScreenProps) {
   const usernameInput = useAutoFocus();
@@ -27,7 +27,7 @@ function LoginScreen({ cti, handleNextScreen }: ScreenProps) {
   }: ChangeEvent<HTMLInputElement>) => setPassword(value);
 
   return (
-    <Wrapper data-testid="login">
+    <Wrapper style={{ color: "#2d3e50" }}>
       <h4 style={{ textAlign: "center" }}>Log into your calling account</h4>
       <div style={{ marginBottom: "5px", fontSize: "14px" }}>User Name</div>
       <RoundedInput

demo-v1/src/hooks/useCti.ts

@@ -4,9 +4,6 @@ import { useMemo, useState } from "react";
 // import CallingExtensions from "@hubspot/calling-extensions-sdk";
 import CallingExtensions from "../../../src/CallingExtensions";
 
-const handleMessage = (event: any) => {
-  console.log("Incoming Message: ", event.type, event);
-};
 export const useCti = () => {
   const defaultSize = { width: 400, height: 600 };
   const [phoneNumber, setPhoneNumber] = useState("");
@@ -19,7 +16,6 @@ export const useCti = () => {
           cti.initialized({ isLoggedIn: true, sizeInfo: defaultSize });
         },
         onDialNumber: (data: any, rawEvent: any) => {
-          handleMessage(rawEvent);
           const { phoneNumber } = data;
           setPhoneNumber(phoneNumber);
           window.setTimeout(
@@ -34,16 +30,13 @@ export const useCti = () => {
         onEngagementCreated: (data: any, rawEvent: any) => {
           const { engagementId } = data;
           setEngagementId(engagementId);
-          handleMessage(rawEvent);
         },
         onEndCall: (data: any, rawEvent: any) => {
           window.setTimeout(() => {
             cti.callEnded();
           }, 500);
         },
-        onVisibilityChanged: (data: any, rawEvent: any) => {
-          handleMessage(rawEvent);
-        },
+        onVisibilityChanged: (data: any, rawEvent: any) => {},
       },
     });
   }, []);

src/IFrameManager.js

@@ -148,7 +148,7 @@ class IFrameManager {
     const { type } = message;
     if (type !== messageType.SYNC && !this.isReady) {
       // Do not send a message unless the iFrame is ready to receive.
-      console.warn("iFrame not initialized to send a message", message);
+      console.warn("[To HubSpot]", "iFrame not initialized to send a message", message);
       return;
     }
 
@@ -166,7 +166,7 @@ class IFrameManager {
       messageId
     });
 
-    this.logDebugMessage("postMessage", type, message);
+    this.logDebugMessage("[To HubSpot]", type, message);
     this.destinationWindow.postMessage(newMessage, this.destinationHost);
   }
 
@@ -210,7 +210,7 @@ class IFrameManager {
       return;
     }
 
-    this.logDebugMessage("onMessage", type, { data });
+    this.logDebugMessage("[From HubSpot]", type, { data });
     if (this.instanceRegexp.test(messageId)) {
       // This is a response to some message generated by HubSpot
       const callBack = this.callbacks[messageId];