[web] Set layout-react in Subscription pages (#21529)

* Update `User` type

* Set `layout-react`: `subscriptions/successful-subscription-react`

* Set `layout-react`: `subscriptions/canceled-subscription-react`

* Set `layout-react`: `subscriptions/dashboard-react`

* Set `layout-react`: `subscriptions/team/invite-managed`, `subscriptions/team/invite`, `subscriptions/team/invite_logged_out`

* Set `layout-react`: `subscriptions/team/group-invites`

* Add `header-footer-react` to subscription/base.js

* Fix: Replace `date-type` by `data-type`

* Fix SubscriptionControllerTests

GitOrigin-RevId: b9049a9093a700b3be1bf33809e3a1494022350a

services/web/app/src/Features/Subscription/SubscriptionController.js

@@ -435,6 +435,7 @@ async function successfulSubscription(req, res) {
       title: 'thank_you',
       personalSubscription,
       postCheckoutRedirect,
+      user,
     })
   }
 }
@@ -469,6 +470,7 @@ async function canceledSubscription(req, res, next) {
   )
   return res.render('subscriptions/canceled-subscription-react', {
     title: 'subscription_canceled',
+    user: SessionManager.getSessionUser(req.session),
   })
 }
 

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

@@ -65,8 +65,8 @@ async function createInvite(req, res, next) {
 
 async function viewInvite(req, res, next) {
   const { token } = req.params
-  const userId = SessionManager.getLoggedInUserId(req.session)
+  const sessionUser = SessionManager.getSessionUser(req.session)
-
+  const userId = sessionUser?._id
   const { invite, subscription } =
     await TeamInvitesHandler.promises.getInvite(token)
 
@@ -102,13 +102,13 @@ async function viewInvite(req, res, next) {
         await subscription.populate('groupPolicy')
       }
 
-      const user = await UserGetter.promises.getUser(userId)
+      const dbUser = await UserGetter.promises.getUser(userId)
 
       const isUserEnrolledInDifferentGroup =
         (
           await Modules.promises.hooks.fire(
             'isUserEnrolledInDifferentGroup',
-            user.enrollment,
+            dbUser.enrollment,
             subscription._id
           )
         )?.[0] === true
@@ -122,7 +122,7 @@ async function viewInvite(req, res, next) {
 
       validationStatus =
         await PermissionsManager.promises.getUserValidationStatus({
-          user,
+          user: dbUser,
           groupPolicy: subscription.groupPolicy,
           subscription,
         })
@@ -143,6 +143,7 @@ async function viewInvite(req, res, next) {
         currentManagedUserAdminEmail,
         groupSSOActive,
         subscriptionId: subscription._id.toString(),
+        user: sessionUser,
       })
     } else {
       let currentManagedUserAdminEmail
@@ -162,6 +163,7 @@ async function viewInvite(req, res, next) {
         currentManagedUserAdminEmail,
         groupSSOActive,
         subscriptionId: subscription._id.toString(),
+        user: sessionUser,
       })
     }
   } else {
@@ -175,18 +177,18 @@ async function viewInvite(req, res, next) {
       appName: settings.appName,
       accountExists: userByEmail != null,
       emailAddress: invite.email,
+      user: { id: null },
     })
   }
 }
 
 async function viewInvites(req, res, next) {
-  const userId = SessionManager.getLoggedInUserId(req.session)
+  const user = SessionManager.getSessionUser(req.session)
-  const userEmail = await UserGetter.promises.getUserEmail(userId)
   const groupSubscriptions =
-    await SubscriptionLocator.promises.getGroupsWithTeamInvitesEmail(userEmail)
+    await SubscriptionLocator.promises.getGroupsWithTeamInvitesEmail(user.email)
 
   const teamInvites = groupSubscriptions.map(groupSubscription =>
-    groupSubscription.teamInvites.find(invite => invite.email === userEmail)
+    groupSubscription.teamInvites.find(invite => invite.email === user.email)
   )
 
   await SplitTestHandler.promises.getAssignment(
@@ -197,6 +199,7 @@ async function viewInvites(req, res, next) {
 
   return res.render('subscriptions/team/group-invites', {
     teamInvites,
+    user,
   })
 }
 

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'
@@ -7,5 +7,8 @@ block vars
 block entrypointVar
 	- entrypoint = 'pages/user/subscription/canceled-subscription'
 
+block append meta
+	meta(name="ol-user" data-type="json" content=user)
+
 block content
 	main.content.content-alt#subscription-canceled-root

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'
@@ -10,6 +10,7 @@ block entrypointVar
 block append meta
 	meta(name="ol-subscription" data-type="json" content=personalSubscription)
 	meta(name="ol-postCheckoutRedirect" content=postCheckoutRedirect)
+	meta(name="ol-user" data-type="json" content=user)
 
 block content
 	main.content.content-alt#subscription-success-root

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'
@@ -9,6 +9,7 @@ block entrypointVar
 
 block append meta
 	meta(name="ol-teamInvites" data-type="json" content=teamInvites)
+	meta(name="ol-user" data-type="json" content=user)
 
 block content
 	main.content.content-alt.team-invite#group-invites-root

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'
@@ -16,6 +16,7 @@ block append meta
 	meta(name="ol-currentManagedUserAdminEmail" data-type="string" content=currentManagedUserAdminEmail)
 	meta(name="ol-groupSSOActive" data-type="boolean" content=groupSSOActive)
 	meta(name="ol-subscriptionId" data-type="string" content=subscriptionId)
+	meta(name="ol-user" data-type="json" content=user)
 
 block content
 	main.content.content-alt.team-invite#invite-managed-root

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'
@@ -9,12 +9,13 @@ block entrypointVar
 
 block append meta
 	meta(name="ol-hasIndividualRecurlySubscription" data-type="boolean" content=hasIndividualRecurlySubscription)
-	meta(name="ol-inviterName" date-type="string" content=inviterName)
+	meta(name="ol-inviterName" data-type="string" content=inviterName)
 	meta(name="ol-inviteToken" data-type="string" content=inviteToken)
 	meta(name="ol-currentManagedUserAdminEmail" data-type="string" content=currentManagedUserAdminEmail)
 	meta(name="ol-expired" data-type="boolean" content=expired)
 	meta(name="ol-groupSSOActive" data-type="boolean" content=groupSSOActive)
 	meta(name="ol-subscriptionId" data-type="string" content=subscriptionId)
+	meta(name="ol-user" data-type="json" content=user)
 
 block content
 	main.content.content-alt#invite-root

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

@@ -1,9 +1,12 @@
-extends ../../layout-marketing
+extends ../../layout-react
 
 block vars
 	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
 	- bootstrap5PageSplitTest = 'bootstrap-5-subscription'
 
+block append meta
+	meta(name="ol-user" data-type="json" content=user)
+
 block content
 	- var colClass = bootstrapVersion === 5 ? 'col-lg-8 m-auto' : 'col-md-8 col-md-offset-2'
 

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

@@ -5,3 +5,4 @@ import './../../../i18n'
 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/test/unit/src/Subscription/SubscriptionControllerTests.js

@@ -1017,6 +1017,7 @@ describe('SubscriptionController', function () {
           title: 'thank_you',
           personalSubscription: 'foo',
           postCheckoutRedirect: undefined,
+          user: this.user,
         })
         done()
       }

services/web/types/user.ts

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