CALL-3878: Migrate to TS and add CJS & ESM Builds

.github/workflows/preview.yml

@@ -8,7 +8,8 @@ on:
       - reopened
       - synchronize
     paths:
-      - 'demos/**'
+      - "demos/**"
+  workflow_dispatch:
 
 defaults:
   run:

.gitignore

@@ -9,3 +9,5 @@ lib
 demos/build/*
 !demos/build/.gitkeep
 dist-test
+.yalc
+yalc.lock

README.md

@@ -137,6 +137,12 @@ const options = {
     },
     onUpdateEngagementFailed: event => {
       /* HubSpot has failed to update an engagement for this call. */
+    },
+    onCallerIdMatchSucceeded: event => {
+      /* HubSpot has fetched caller id matches for this call. */
+    },
+    onCallerIdMatchFailed: event => {
+      /* HubSpot has failed to fetch caller id matches for this call. */
     }
     onVisibilityChanged: event => {
       /* Call widget's visibility is changed. */
@@ -217,6 +223,42 @@ extensions.outgoingCall(callInfo);
 </p>
 </details>
 
+<details>
+ <summary>incomingCall</summary>
+ <p>
+
+```ts
+// Sends a message to notify HubSpot that an outgoing call has started.
+
+const callInfo = {
+  fromNumber: string, // Required: The caller's number
+  toNumber: string, // Required: The recipient's number
+  createEngagement: boolean, // Whether HubSpot should create an engagement for this call
+};
+extensions.incomingCall(callInfo);
+```
+
+</p>
+</details>
+
+<details>
+ <summary>navigateToRecord</summary>
+ <p>
+
+```ts
+// Sends a message to notify HubSpot that we need to navigate to a record page for a caller id match.
+type ObjectCoordinates = {
+  portalId: number;
+  objectTypeId: string;
+  objectId: number;
+}
+
+extensions.navigateToRecord({ objectCoordinates });
+```
+
+</p>
+</details>
+
 <details>
  <summary>callAnswered</summary>
  <p>
@@ -304,11 +346,20 @@ extensions.resizeWidget(data);
  <summary>onReady</summary>
  <p>
 
-```js
+```ts
+// Receive an engagementId for an existing inbound call
+type Payload = {
+  engagementId: number | undefined
+}
+
 // Message indicating that HubSpot is ready to receive messages
-onReady() {
+onReady(payload) {
     // Send initialized message to HubSpot to indicate that the call widget is also ready
     extensions.initialized(payload);
+    if (payload.engagementId) {
+      // Initialize calling state in the app for existing inbound call
+      ...
+    }
     ...
 }
 ```
@@ -408,6 +459,58 @@ onDialNumber(data) {
 </p>
 </details>
 
+<details>
+ <summary>onCallerIdMatchSucceeded</summary>
+ <p>
+
+```js
+  // Message indicating that HubSpot has updated an engagement
+  onCallerIdMatchSucceeded(data) {
+    const {
+      callerIdMatches: (ContactIdMatch | CompanyIdMatch)[];
+    } = data;
+      ...
+  }
+
+  type ObjectCoordinates = {
+    portalId: number;
+    objectTypeId: string;
+    objectId: number;
+  }
+
+  type ContactIdMatch = {
+    callerIdType: 'CONTACT';
+    objectCoordinates: ObjectCoordinates;
+    firstName: string;
+    lastName: string;
+    email: string;
+  }
+
+  type CompanyIdMatch = {
+    callerIdType: 'COMPANY';
+    objectCoordinates: ObjectCoordinates;
+    name: string;
+  }
+```
+</p>
+</details>
+
+<details>
+ <summary>onCallerIdMatchFailed</summary>
+ <p>
+
+```js
+  // Message indicating that HubSpot has failed to update an engagement
+  onCallerIdMatchFailed(data) {
+    const {
+      error: { message: string }
+    } = data;
+      ...
+  }
+```
+</p>
+</details>
+
 <details>
  <summary>onVisibilityChanged</summary>
  <p>

demos/demo-minimal-js/index.html

@@ -85,6 +85,10 @@
         font-weight: 300;
         margin-bottom: 1rem;
       }
+      p.other-events {
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+        padding-top: 0.5rem;
+      }
     </style>
   </head>
 
@@ -120,7 +124,29 @@
           type="button"
           value="log out"
         />
-        <p>3. Start a call</p>
+        <p>3. Set inbound calling availability</p>
+        <input
+          disabled
+          id="useravailable"
+          onclick="userAvailable()"
+          type="button"
+          value="user available"
+        />
+        <input
+          disabled
+          id="userunavailable"
+          onclick="userUnavailable()"
+          type="button"
+          value="user unavailable"
+        />
+        <p>4. Start a call</p>
+        <input
+          disabled
+          id="incomingcall"
+          onclick="incomingCall()"
+          type="button"
+          value="incoming call started"
+        />
         <input
           disabled
           id="outgoingcall"
@@ -135,7 +161,7 @@
           type="button"
           value="call answered"
         />
-        <p>4. End a call</p>
+        <p>5. End a call</p>
         <input
           disabled
           id="endcall"
@@ -150,8 +176,7 @@
           type="button"
           value="call completed"
         />
-        <hr />
-        <p>Other events</p>
+        <p class="other-events">Other events</p>
         <input
           disabled
           id="senderror"