ref(replay): update canvas banner depending on sdk version (#76101)

fixes https://github.com/getsentry/sentry/issues/76097

sdk needs update:

<img width="629" alt="SCR-20240813-mrym"
src="https://github.com/user-attachments/assets/0fe1892b-2f83-45d3-b7cd-140fbd10cac5">



sdk is updated:
<img width="643" alt="SCR-20240813-lgme"
src="https://github.com/user-attachments/assets/f6285cac-539d-4906-a004-fedd240981bf">

static/app/components/replays/canvasSupportNotice.tsx

@@ -10,6 +10,7 @@ import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useDismissAlert from 'sentry/utils/useDismissAlert';
 import useOrganization from 'sentry/utils/useOrganization';
+import useProjectSdkNeedsUpdate from 'sentry/utils/useProjectSdkNeedsUpdate';
 
 const LOCAL_STORAGE_KEY = 'replay-canvas-supported';
 
@@ -20,6 +21,12 @@ export function CanvasSupportNotice() {
   const organization = useOrganization();
   const {dismiss, isDismissed} = useDismissAlert({key: LOCAL_STORAGE_KEY});
   const {isFetching, replay} = useReplayContext();
+  const projectId = replay?.getReplay().project_id;
+  const {needsUpdate} = useProjectSdkNeedsUpdate({
+    minVersion: '7.98.0',
+    organization,
+    projectId: [projectId ?? '-1'],
+  });
 
   // No need for notice if they are not feature flagged into the replayer
   if (!organization.features.includes('session-replay-enable-canvas-replayer')) {
@@ -53,20 +60,41 @@ export function CanvasSupportNotice() {
         />
       }
     >
-      {tct(
-        'This replay contains a [code:canvas] element. Support for recording [code:canvas] data was added in SDK version 7.98.0. [link:Learn more].',
-        {
-          code: <code />,
-          link: (
-            <ExternalLink
-              onClick={() => {
-                trackAnalytics('replay.canvas-detected-banner-clicked', {organization});
-              }}
-              href="https://docs.sentry.io/platforms/javascript/session-replay/#canvas-recording"
-            />
-          ),
-        }
-      )}
+      {needsUpdate
+        ? tct(
+            'This replay contains a [code:canvas] element. Please update your SDK to 7.98.0 or higher to enable [code:canvas] recording. [link:Learn more in our docs].',
+            {
+              code: <code />,
+              link: (
+                <ExternalLink
+                  onClick={() => {
+                    trackAnalytics('replay.canvas-detected-banner-clicked', {
+                      sdk_needs_update: true,
+                      organization,
+                    });
+                  }}
+                  href="https://docs.sentry.io/platforms/javascript/session-replay/#canvas-recording"
+                />
+              ),
+            }
+          )
+        : tct(
+            'This replay contains a [code:canvas] element. Learn how to enable [code:canvas] recording [link:in our docs].',
+            {
+              code: <code />,
+              link: (
+                <ExternalLink
+                  onClick={() => {
+                    trackAnalytics('replay.canvas-detected-banner-clicked', {
+                      sdk_needs_update: false,
+                      organization,
+                    });
+                  }}
+                  href="https://docs.sentry.io/platforms/javascript/session-replay/#canvas-recording"
+                />
+              ),
+            }
+          )}
     </StyledAlert>
   );
 }

static/app/utils/analytics/replayAnalyticsEvents.tsx

@@ -7,7 +7,9 @@ export type ReplayEventParameters = {
     issue_description: string;
     issue_impact: string | undefined;
   };
-  'replay.canvas-detected-banner-clicked': {};
+  'replay.canvas-detected-banner-clicked': {
+    sdk_needs_update?: boolean;
+  };
   'replay.details-data-loaded': {
     be_errors: number;
     fe_errors: number;