[web] Set Subscription pages to have `layout-react` (#20969)

* [web] Set Subscription pages to have `layout-react`

* [web] import `header-footer-react` in Subscription pages (!!)

* [web] Add `ol-user` meta tag to the subscription pages (!!)

⚠️ invite_logged_out.pug should be updated instead of setting the user as `{}`

* [web] Fix unit test

* [web] Update User types to handle a logged out user, add `LOGGED_OUT_USER` const

* [web] Add type `User` to `getSessionUser`

* [web] Remove `LOGGED_OUT_USER` const

* [web] Just pass `{ id: null }` as the user

* [web] Remove comment in pugs, it breaks things

* [web] Don't pass the full user to the frontend!!!

Co-authored-by: Jakob Ackermann <jakob.ackermann@overleaf.com>

---------

Co-authored-by: Jakob Ackermann <jakob.ackermann@overleaf.com>
GitOrigin-RevId: 1768f1f13de924a18be43c1a08614000500dcbec

services/web/app/src/Features/Authentication/SessionManager.js

@@ -1,6 +1,12 @@
 const _ = require('lodash')
 
+/** @typedef {import('../../../../types/user').User} User */
+
 const SessionManager = {
+  /**
+   * @param session
+   * @returns {User | null}
+   */
   getSessionUser(session) {
     const sessionUser = _.get(session, ['user'])
     const sessionPassportUser = _.get(session, ['passport', 'user'])

services/web/app/src/Features/Subscription/TeamInvitesController.mjs

@@ -169,12 +169,16 @@ async function viewInvite(req, res, next) {
       invite.email
     )
 
+    /** @type {import('../../../../types/user').LoggedOutUser} */
+    const userWithoutSensitiveFields = { id: null }
+
     return res.render('subscriptions/team/invite_logged_out', {
       inviterName: invite.inviterName,
       inviteToken: invite.token,
       appName: settings.appName,
       accountExists: userByEmail != null,
       emailAddress: invite.email,
+      userWithoutSensitiveFields,
     })
   }
 }

services/web/app/views/layout-react.pug

@@ -37,6 +37,7 @@ block append meta
 			subdomainLang: settings.i18n.subdomainLang,
 			translatedLanguages: settings.translatedLanguages
 		})
+		meta(name="ol-user" data-type="json" content=(userWithoutSensitiveFields || getSessionUser()))
 
 block body
 	if (typeof suppressNavbar === "undefined")

services/web/app/views/subscriptions/canceled-subscription-react.pug

@@ -1,4 +1,4 @@
-extends ../layout-marketing
+extends ../layout-react
 
 block vars
 	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'

services/web/app/views/subscriptions/dashboard-react.pug

@@ -1,4 +1,4 @@
-extends ../layout-marketing
+extends ../layout-react
 
 block vars
 	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'

services/web/app/views/subscriptions/successful-subscription-react.pug

@@ -1,4 +1,4 @@
-extends ../layout-marketing
+extends ../layout-react
 
 block vars
 	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'

services/web/app/views/subscriptions/team/group-invites.pug

@@ -1,4 +1,4 @@
-extends ../../layout-marketing
+extends ../../layout-react
 
 block vars
 	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'

services/web/app/views/subscriptions/team/invite-managed.pug

@@ -1,4 +1,4 @@
-extends ../../layout-marketing
+extends ../../layout-react
 
 block vars
 	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'

services/web/app/views/subscriptions/team/invite.pug

@@ -1,4 +1,4 @@
-extends ../../layout-marketing
+extends ../../layout-react
 
 block vars
 	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'

services/web/app/views/subscriptions/team/invite_logged_out.pug

@@ -1,4 +1,4 @@
-extends ../../layout-marketing
+extends ../../layout-react
 
 block vars
 	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'

services/web/frontend/js/pages/user/subscription/base.js

@@ -6,3 +6,4 @@ import '../../../features/contact-form'
 import '../../../features/event-tracking'
 import '../../../features/cookie-banner'
 import '../../../features/link-helpers/slow-link'
+import '../../../features/header-footer-react'

services/web/frontend/js/shared/context/user-context.tsx

@@ -1,8 +1,10 @@
 import { createContext, FC, useContext, useMemo } from 'react'
 import getMeta from '../../utils/meta'
-import { User } from '../../../../types/user'
+import { LoggedOutUser, User } from '../../../../types/user'
 
-export const UserContext = createContext<User | undefined>(undefined)
+export const UserContext = createContext<User | LoggedOutUser | undefined>(
+  undefined
+)
 
 export const UserProvider: FC = ({ children }) => {
   const user = useMemo(() => getMeta('ol-user'), [])

services/web/frontend/js/utils/meta.ts

@@ -1,4 +1,4 @@
-import { User, Features } from '../../../types/user'
+import { User, Features, LoggedOutUser } from '../../../types/user'
 import { User as MinimalUser } from '../../../types/admin/user'
 import { User as ManagedUser } from '../../../types/group-management/user'
 import { UserSettings } from '../../../types/user-settings'
@@ -204,7 +204,7 @@ export interface Meta {
   'ol-usGovBannerVariant': USGovBannerVariant
   'ol-useShareJsHash': boolean
   'ol-usedLatex': 'never' | 'occasionally' | 'often' | undefined
-  'ol-user': User
+  'ol-user': User | LoggedOutUser
   'ol-userAffiliations': Affiliation[]
   'ol-userCanExtendTrial': boolean
   'ol-userCanNotStartRequestedTrial': boolean

services/web/types/user.ts

@@ -46,4 +46,20 @@ export type User = {
   }
 }
 
+export type LoggedOutUser = {
+  id: null
+  email?: undefined
+  first_name?: undefined
+  last_name?: undefined
+  signUpDate?: undefined
+  labsProgram?: boolean
+  alphaProgram?: boolean
+  betaProgram?: boolean
+  allowedFreeTrial?: boolean
+  features?: Features
+  refProviders?: RefProviders
+  writefull?: undefined
+  isAdmin?: boolean
+}
+
 export type MongoUser = Pick<User, Exclude<keyof User, 'id'>> & { _id: string }