Add Writefull promo banner to project list (#12843)

GitOrigin-RevId: a41746a29dfba867ff60401cfce1478812358644

services/web/app/src/Features/Project/ProjectListController.js

@@ -21,6 +21,7 @@ const UserPrimaryEmailCheckHandler = require('../User/UserPrimaryEmailCheckHandl
 const UserController = require('../User/UserController')
 const LimitationsManager = require('../Subscription/LimitationsManager')
 const NotificationsBuilder = require('../Notifications/NotificationsBuilder')
+const SplitTestHandler = require('../SplitTests/SplitTestHandler')
 
 /** @typedef {import("./types").GetProjectsRequest} GetProjectsRequest */
 /** @typedef {import("./types").GetProjectsResponse} GetProjectsResponse */
@@ -319,6 +320,23 @@ async function projectListPage(req, res, next) {
     showGroupsAndEnterpriseBanner &&
     _.sample(['did-you-know', 'on-premise', 'people', 'FOMO'])
 
+  let showWritefullPromoBanner = false
+  if (Features.hasFeature('saas') && !req.session.justRegistered) {
+    try {
+      const { variant } = await SplitTestHandler.promises.getAssignment(
+        req,
+        res,
+        'writefull-promo-banner'
+      )
+      showWritefullPromoBanner = variant === 'enabled'
+    } catch (error) {
+      logger.warn(
+        { err: error },
+        'failed to get "writefull-promo-banner" split test assignment'
+      )
+    }
+  }
+
   res.render('project/list-react', {
     title: 'your_projects',
     usersBestSubscription,
@@ -335,6 +353,7 @@ async function projectListPage(req, res, next) {
     prefetchedProjectsBlob,
     showGroupsAndEnterpriseBanner,
     groupsAndEnterpriseBannerVariant,
+    showWritefullPromoBanner,
     projectDashboardReact: true, // used in navbar
   })
 }

services/web/app/views/project/list-react.pug

@@ -26,6 +26,7 @@ block append meta
 		}))
 	meta(name="ol-currentUrl" data-type="string" content=currentUrl)
 	meta(name="ol-showGroupsAndEnterpriseBanner" data-type="boolean" content=showGroupsAndEnterpriseBanner)
+	meta(name="ol-showWritefullPromoBanner" data-type="boolean" content=showWritefullPromoBanner)
 	meta(name="ol-groupsAndEnterpriseBannerVariant" data-type="string" content=groupsAndEnterpriseBannerVariant)
 
 block content

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

@@ -3,6 +3,7 @@ import Institution from './groups/institution'
 import ConfirmEmail from './groups/confirm-email'
 import ReconfirmationInfo from './groups/affiliation/reconfirmation-info'
 import GroupsAndEnterpriseBanner from './groups-and-enterprise-banner'
+import WritefullPromoBanner from './writefull-promo-banner'
 
 function UserNotifications() {
   return (
@@ -13,6 +14,7 @@ function UserNotifications() {
         <ConfirmEmail />
         <ReconfirmationInfo />
         <GroupsAndEnterpriseBanner />
+        <WritefullPromoBanner />
       </ul>
     </div>
   )

services/web/frontend/stylesheets/app/project-list.less

@@ -248,6 +248,9 @@ input.project-list-table-select-item[type='checkbox'] {
         flex-wrap: nowrap;
       }
     }
+    &.centered-alert .alert {
+      align-items: center;
+    }
   }
 }
 .notification-body {