From 33d3dcd768003718d9eae1e56576fe3664bb8861 Mon Sep 17 00:00:00 2001
From: James Dietrich <dietrich.james@gmail.com>
Date: Wed, 13 Nov 2024 19:45:34 +0100
Subject: [PATCH] chore(shareability): track successful shares (mobile only)
 (#7411)

* chore(shareability): track successful shares (mobile only)

* Apply PR feedback
---
 web/README.md                                | 2 +-
 web/src/features/panels/zone/ShareButton.tsx | 7 ++++++-
 web/src/hooks/useShare.ts                    | 4 +++-
 web/src/utils/analytics.ts                   | 1 +
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/README.md b/web/README.md
index 07e1cccde6..5a2847cc3f 100644
--- a/web/README.md
+++ b/web/README.md
@@ -8,7 +8,7 @@ _If you're looking for more info on the parsers, check out [how to setup Python
 
 Prerequisites:
 
-- Ensure you have `NodeJS` and `pnpm` installed locally (`brew install pnpm`)
+- Ensure you have `NodeJS` (`v20.9.0` or above) and `pnpm` installed locally (`brew install pnpm`)
 - Run `pnpm install` in both the web and mockserver directories
 
 1. Start the mockserver: `pnpm run mockserver`
diff --git a/web/src/features/panels/zone/ShareButton.tsx b/web/src/features/panels/zone/ShareButton.tsx
index d8d9d5c4f9..9e3d7e433c 100644
--- a/web/src/features/panels/zone/ShareButton.tsx
+++ b/web/src/features/panels/zone/ShareButton.tsx
@@ -24,6 +24,7 @@ interface ShareButtonProps
 }
 
 const trackShareClick = trackShare(ShareType.SHARE);
+const trackShareCompletion = trackShare(ShareType.COMPLETED_SHARE);
 
 export function ShareButton({
   iconSize = DEFAULT_ICON_SIZE,
@@ -51,7 +52,11 @@ export function ShareButton({
           url: shareUrl,
         },
         toastMessageCallback
-      );
+      ).then((shareCompleted) => {
+        if (shareCompleted) {
+          trackShareCompletion();
+        }
+      });
     } else {
       copyToClipboard(shareUrl, toastMessageCallback);
     }
diff --git a/web/src/hooks/useShare.ts b/web/src/hooks/useShare.ts
index 28ccda1a36..c5548f41f5 100644
--- a/web/src/hooks/useShare.ts
+++ b/web/src/hooks/useShare.ts
@@ -21,12 +21,14 @@ export function useShare() {
   const share = useCallback(
     async (shareData: ShareOptions, callback?: (argument: string) => void) => {
       try {
-        await CapShare.share(shareData);
+        const result = await CapShare.share(shareData);
+        return result;
       } catch (error) {
         if (error instanceof Error && !/AbortError|canceled/.test(error.toString())) {
           console.error(error);
           callback?.(t('share-button.share-error'));
         }
+        return;
       }
     },
     [t]
diff --git a/web/src/utils/analytics.ts b/web/src/utils/analytics.ts
index 5c36c511d1..7dbf751a11 100644
--- a/web/src/utils/analytics.ts
+++ b/web/src/utils/analytics.ts
@@ -33,6 +33,7 @@ export enum ShareType {
   REDDIT = 'reddit',
   COPY = 'copy',
   SHARE = 'share',
+  COMPLETED_SHARE = 'completed_share',
 }
 
 export const trackShare = (shareType: ShareType) => () =>