Merge pull request #17508 from overleaf/dp-ac-ieee-deprecation-notifications

Update notifications for IEEE Retirement

GitOrigin-RevId: f4e02e5fd838c2b1a6227c86f48bb12dd6bdb9a3

services/web/frontend/js/features/project-list/components/notifications/groups/common.tsx

@@ -13,6 +13,7 @@ import {
 } from '../../../../../../../types/project/dashboard/notification'
 import { User } from '../../../../../../../types/user'
 import GroupInvitationNotification from './group-invitation/group-invitation'
+import IEEERetirementBanner from '../ieee-retirement-banner'
 import { debugConsole } from '@/utils/debugging'
 
 function Common() {
@@ -305,21 +306,7 @@ function CommonNotification({ notification }: CommonNotificationProps) {
       ) : templateKey === 'notification_group_invitation' ? (
         <GroupInvitationNotification notification={notification} />
       ) : templateKey === 'notification_ieee_collabratec_retirement' ? (
-        <Notification
-          bsStyle="warning"
-          onDismiss={() => id && handleDismiss(id)}
-          body={
-            <Trans
-              i18nKey="notification_ieee_collabratec_retirement_message"
-              components={[
-                // eslint-disable-next-line jsx-a11y/anchor-has-content,react/jsx-key
-                <a href="mailto:authors@ieee.org" />,
-                // eslint-disable-next-line jsx-a11y/anchor-has-content,react/jsx-key
-                <a href="/user/subscription" />,
-              ]}
-            />
-          }
-        />
+        <IEEERetirementBanner id={id} />
       ) : templateKey === 'notification_personal_and_group_subscriptions' ? (
         <Notification
           bsStyle="warning"

services/web/frontend/js/features/project-list/components/notifications/ieee-retirement-banner.tsx

@@ -0,0 +1,68 @@
+import { useCallback, useEffect } from 'react'
+import Notification from './notification'
+import { Trans } from 'react-i18next'
+import * as eventTracking from '../../../../infrastructure/event-tracking'
+import useAsyncDismiss from './hooks/useAsyncDismiss'
+
+let viewEventSent = false
+
+type IEEERetirementBannerProps = {
+  id: number | undefined
+}
+
+export default function IEEERetirementBanner({
+  id,
+}: IEEERetirementBannerProps) {
+  const { handleDismiss } = useAsyncDismiss()
+
+  const handleClose = useCallback(() => {
+    eventTracking.sendMB('promo-dismiss', {
+      name: 'ieee - retirement',
+    })
+    if (id) {
+      handleDismiss(id)
+    }
+  }, [id, handleDismiss])
+
+  const handleClickPlans = useCallback(() => {
+    eventTracking.sendMB('promo-click', {
+      name: 'ieee - retirement',
+      content: 'plans',
+    })
+  }, [])
+
+  const handleClickEmail = useCallback(() => {
+    eventTracking.sendMB('promo-click', {
+      name: 'ieee - retirement',
+      content: 'email',
+    })
+  }, [])
+
+  useEffect(() => {
+    if (!viewEventSent) {
+      eventTracking.sendMB('promo-prompt', {
+        name: 'ieee - retirement',
+      })
+      viewEventSent = true
+    }
+  }, [])
+
+  return (
+    <Notification
+      bsStyle="warning"
+      onDismiss={handleClose}
+      newNotificationStyle
+      body={
+        <Trans
+          i18nKey="notification_ieee_collabratec_retirement_message"
+          components={[
+            // eslint-disable-next-line jsx-a11y/anchor-has-content,react/jsx-key
+            <a href="mailto:authors@ieee.org" onClick={handleClickEmail} />,
+            // eslint-disable-next-line jsx-a11y/anchor-has-content,react/jsx-key
+            <a href="/user/subscription" onClick={handleClickPlans} />,
+          ]}
+        />
+      }
+    />
+  )
+}