Merge pull request #14929 from overleaf/tm-writefull-b2b-banner-rule

Workaround to prevent Writefull and B2B banners overlapping

GitOrigin-RevId: a6a933e4f16c35e08c9c07b3c17e292b461fd9a2

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

@@ -1,4 +1,4 @@
-import { JSXElementConstructor } from 'react'
+import { JSXElementConstructor, useState } from 'react'
 import Common from './groups/common'
 import Institution from './groups/institution'
 import ConfirmEmail from './groups/confirm-email'
@@ -10,6 +10,13 @@ import LATAMBanner from './ads/latam-banner'
 import getMeta from '../../../../utils/meta'
 import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
 import BackToSchoolModal from './ads/back-to-school-modal'
+import customLocalStorage from '../../../../infrastructure/local-storage'
+import { sendMB } from '../../../../infrastructure/event-tracking'
+
+const isChromium = () =>
+  (window.navigator as any).userAgentData?.brands?.some(
+    (item: { brand: string }) => item.brand === 'Chromium'
+  )
 
 type Subscription = {
   groupId: string
@@ -41,6 +48,24 @@ function UserNotifications() {
   )
   const showLATAMBanner = getMeta('ol-showLATAMBanner', false)
 
+  // Temporary workaround to prevent also showing groups/enterprise banner
+  const [showWritefull, setShowWritefull] = useState(() => {
+    if (isChromium()) {
+      const show =
+        getMeta('ol-showWritefullPromoBanner') &&
+        !customLocalStorage.getItem('has_dismissed_writefull_promo_banner')
+      if (show) {
+        sendMB('promo-prompt', {
+          location: 'dashboard-banner',
+          page: '/project',
+          name: 'writefull',
+        })
+      }
+      return show
+    }
+  })
+  const [dismissedWritefull, setDismissedWritefull] = useState(false)
+
   return (
     <div className="user-notifications">
       <ul className="list-unstyled">
@@ -56,6 +81,10 @@ function UserNotifications() {
         <Institution />
         <ConfirmEmail />
         <ReconfirmationInfo />
+        {!showLATAMBanner &&
+          !showInrGeoBanner &&
+          !showWritefull &&
+          !dismissedWritefull && <GroupsAndEnterpriseBanner />}
         {showLATAMBanner ? (
           <LATAMBanner />
         ) : showInrGeoBanner ? (
@@ -63,13 +92,17 @@ function UserNotifications() {
             variant={inrGeoBannerVariant}
             splitTestName={inrGeoBannerSplitTestName}
           />
-        ) : (
+        ) : null}
-          <GroupsAndEnterpriseBanner />
-        )}
         {showBackToSchoolModal ? (
           <BackToSchoolModal />
         ) : (
-          <WritefullPromoBanner />
+          <WritefullPromoBanner
+            show={showWritefull}
+            setShow={setShowWritefull}
+            onDismiss={() => {
+              setDismissedWritefull(true)
+            }}
+          />
         )}
       </ul>
     </div>

services/web/frontend/js/features/project-list/components/notifications/writefull-promo-banner.tsx

@@ -1,53 +1,41 @@
-import { memo, useCallback, useState } from 'react'
+import { memo, useCallback } from 'react'
 import Notification from './notification'
 import { sendMB } from '../../../../infrastructure/event-tracking'
-import getMeta from '../../../../utils/meta'
 import customLocalStorage from '../../../../infrastructure/local-storage'
 
-const STORAGE_KEY = 'has_dismissed_writefull_promo_banner'
-
 const eventSegmentation = {
   location: 'dashboard-banner',
   page: '/project',
   name: 'writefull',
 }
 
-const isChromium = () =>
+function WritefullPromoBanner({
-  (window.navigator as any).userAgentData?.brands?.some(
+  show,
-    (item: { brand: string }) => item.brand === 'Chromium'
+  setShow,
-  )
+  onDismiss,
-
+}: {
-function WritefullPromoBanner() {
+  show: boolean
-  const [show, setShow] = useState(() => {
+  setShow: (value: boolean) => void
-    const show =
+  onDismiss: () => void
-      getMeta('ol-showWritefullPromoBanner') &&
+}) {
-      !customLocalStorage.getItem(STORAGE_KEY)
-
-    if (show) {
-      sendMB('promo-prompt', eventSegmentation)
-    }
-
-    return show
-  })
-
   const handleOpenLink = useCallback(() => {
     sendMB('promo-click', eventSegmentation)
   }, [])
 
   const handleClose = useCallback(() => {
-    customLocalStorage.setItem(STORAGE_KEY, new Date())
+    customLocalStorage.setItem(
+      'has_dismissed_writefull_promo_banner',
+      new Date()
+    )
     setShow(false)
     sendMB('promo-dismiss', eventSegmentation)
-  }, [])
+    onDismiss()
+  }, [setShow, onDismiss])
 
   if (!show) {
     return null
   }
 
-  if (!isChromium()) {
-    return null
-  }
-
   return (
     <Notification
       bsStyle="info"