Wire up analytics for Legacy/EC/Jitsi voip options (#28348)

* Wire up analytics for Legacy/EC/Jitsi voip options

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update @matrix-org/analytics-events

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

package.json

@@ -84,7 +84,7 @@
     "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@formatjs/intl-segmenter": "^11.5.7",
-        "@matrix-org/analytics-events": "^0.28.0",
+        "@matrix-org/analytics-events": "^0.29.0",
         "@matrix-org/emojibase-bindings": "^1.3.3",
         "@vector-im/matrix-wysiwyg": "2.37.13",
         "@matrix-org/react-sdk-module-api": "^2.4.0",

src/components/views/rooms/RoomHeader.tsx

@@ -27,7 +27,7 @@ import { useRoomMemberCount, useRoomMembers } from "../../../hooks/useRoomMember
 import { _t } from "../../../languageHandler";
 import { Flex } from "../../utils/Flex";
 import { Box } from "../../utils/Box";
-import { getPlatformCallTypeChildren, getPlatformCallTypeLabel, useRoomCall } from "../../../hooks/room/useRoomCall";
+import { getPlatformCallTypeProps, useRoomCall } from "../../../hooks/room/useRoomCall";
 import { useRoomThreadNotifications } from "../../../hooks/room/useRoomThreadNotifications";
 import { useGlobalNotificationState } from "../../../hooks/useGlobalNotificationState";
 import SdkConfig from "../../../SdkConfig";
@@ -167,18 +167,21 @@ export default function RoomHeader({
                     side="left"
                     align="start"
                 >
-                    {callOptions.map((option) => (
+                    {callOptions.map((option) => {
-                        <MenuItem
+                        const { label, children } = getPlatformCallTypeProps(option);
-                            key={option}
+                        return (
-                            label={getPlatformCallTypeLabel(option)}
+                            <MenuItem
-                            aria-label={getPlatformCallTypeLabel(option)}
+                                key={option}
-                            children={getPlatformCallTypeChildren(option)}
+                                label={label}
-                            className="mx_RoomHeader_videoCallOption"
+                                aria-label={label}
-                            onClick={(ev) => videoCallClick(ev, option)}
+                                children={children}
-                            Icon={VideoCallIcon}
+                                className="mx_RoomHeader_videoCallOption"
-                            onSelect={() => {} /* Dummy handler since we want the click event.*/}
+                                onClick={(ev) => videoCallClick(ev, option)}
-                        />
+                                Icon={VideoCallIcon}
-                    ))}
+                                onSelect={() => {} /* Dummy handler since we want the click event.*/}
+                            />
+                        );
+                    })}
                 </Menu>
             ) : (
                 <IconButton

src/hooks/room/useRoomCall.tsx

@@ -36,30 +36,41 @@ import { useGuestAccessInformation } from "./useGuestAccessInformation";
 import SettingsStore from "../../settings/SettingsStore";
 import { UIFeature } from "../../settings/UIFeature";
 import { BetaPill } from "../../components/views/beta/BetaCard";
+import { InteractionName } from "../../PosthogTrackers";
 
 export enum PlatformCallType {
     ElementCall,
     JitsiCall,
     LegacyCall,
 }
-export const getPlatformCallTypeLabel = (platformCallType: PlatformCallType): string => {
+
+export const getPlatformCallTypeProps = (
+    platformCallType: PlatformCallType,
+): {
+    label: string;
+    children?: ReactNode;
+    analyticsName: InteractionName;
+} => {
     switch (platformCallType) {
         case PlatformCallType.ElementCall:
-            return _t("voip|element_call");
+            return {
+                label: _t("voip|element_call"),
+                analyticsName: "WebVoipOptionElementCall",
+                children: <BetaPill />,
+            };
         case PlatformCallType.JitsiCall:
-            return _t("voip|jitsi_call");
+            return {
+                label: _t("voip|jitsi_call"),
+                analyticsName: "WebVoipOptionJitsi",
+            };
         case PlatformCallType.LegacyCall:
-            return _t("voip|legacy_call");
+            return {
-    }
+                label: _t("voip|legacy_call"),
-};
+                analyticsName: "WebVoipOptionLegacy",
-export const getPlatformCallTypeChildren = (platformCallType: PlatformCallType): ReactNode => {
+            };
-    switch (platformCallType) {
-        case PlatformCallType.ElementCall:
-            return <BetaPill />;
-        default:
-            return null;
     }
 };
+
 const enum State {
     NoCall,
     NoOneHere,

src/utils/room/placeCall.ts

@@ -10,10 +10,11 @@ import { CallType } from "matrix-js-sdk/src/webrtc/call";
 import { Room } from "matrix-js-sdk/src/matrix";
 
 import LegacyCallHandler from "../../LegacyCallHandler";
-import { PlatformCallType } from "../../hooks/room/useRoomCall";
+import { getPlatformCallTypeProps, PlatformCallType } from "../../hooks/room/useRoomCall";
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../../dispatcher/actions";
+import PosthogTrackers from "../../PosthogTrackers";
 
 /**
  * Helper to place a call in a room that works with all the legacy modes
@@ -27,6 +28,9 @@ export const placeCall = async (
     platformCallType: PlatformCallType,
     skipLobby: boolean,
 ): Promise<void> => {
+    const { analyticsName } = getPlatformCallTypeProps(platformCallType);
+    PosthogTrackers.trackInteraction(analyticsName);
+
     if (platformCallType == PlatformCallType.LegacyCall || platformCallType == PlatformCallType.JitsiCall) {
         await LegacyCallHandler.instance.placeCall(room.roomId, callType);
     } else if (platformCallType == PlatformCallType.ElementCall) {

yarn.lock

@@ -1931,10 +1931,10 @@
   resolved "https://registry.yarnpkg.com/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz#497c67a1cef50d1a2459ba60f315e448d2ad87fe"
   integrity sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==
 
-"@matrix-org/analytics-events@^0.28.0":
+"@matrix-org/analytics-events@^0.29.0":
-  version "0.28.0"
+  version "0.29.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.28.0.tgz#91f501bb25435b9418f785ca850ca858aa6efc76"
+  resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.29.0.tgz#ebadd922f50c0932a5c6af8b5e156f8f839f3236"
-  integrity sha512-RvvGBYzgJrk2wTRVGk2fWhGM1f69f6nBraRqTiuqlqE2eQd2hZ2onHyRhvhxJeKVC/oNBsvrupObqrrWowXsnQ==
+  integrity sha512-7L+dQJuFt2iIhxhWwvJVp89/UdOfl2P455Ki9Krw0LGCMazPOwo5bc9GUjj/OKXO+eNHq+Qml1+RkYW+8LCk2Q==
 
 "@matrix-org/emojibase-bindings@^1.3.3":
   version "1.3.3"