[web] Migrate /subscription/invites to BS5 (#20652)

* [web] Wiring work for `/subscription/invites` BS5 migration

* [web] Migrate group-invites.tsx to BS5

* [web] Migrate group-invites-item.tsx to BS5

GitOrigin-RevId: a12aafce3ad0040dc500f5f29b1a20fbae4a748e

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

@@ -14,6 +14,7 @@ const EmailHandler = require('../Email/EmailHandler')
 const { RateLimiter } = require('../../infrastructure/RateLimiter')
 const Modules = require('../../infrastructure/Modules')
 const UserAuditLogHandler = require('../User/UserAuditLogHandler')
+const SplitTestHandler = require('../SplitTests/SplitTestHandler')
 
 const rateLimiters = {
   resendGroupInvite: new RateLimiter('resend-group-invite', {
@@ -181,6 +182,12 @@ async function viewInvites(req, res, next) {
     groupSubscription.teamInvites.find(invite => invite.email === userEmail)
   )
 
+  await SplitTestHandler.promises.getAssignment(
+    req,
+    res,
+    'bootstrap-5-subscription'
+  )
+
   return res.render('subscriptions/team/group-invites', {
     teamInvites,
   })

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

@@ -1,5 +1,9 @@
 extends ../../layout-marketing
 
+block vars
+	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
+	- bootstrap5PageSplitTest = 'bootstrap-5-subscription'
+
 block entrypointVar
 	- entrypoint = 'pages/user/subscription/group-invites'
 

services/web/frontend/js/features/subscription/components/group-invites/group-invites-item.tsx

@@ -1,7 +1,9 @@
-import { Col, Row } from 'react-bootstrap'
 import { Trans } from 'react-i18next'
 import GroupInvitesItemFooter from './group-invites-item-footer'
 import type { TeamInvite } from '../../../../../../types/team-invite'
+import OLCard from '@/features/ui/components/ol/ol-card'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import OLCol from '@/features/ui/components/ol/ol-col'
 
 type GroupInvitesItemProps = {
   teamInvite: TeamInvite
@@ -11,9 +13,9 @@ export default function GroupInvitesItem({
   teamInvite,
 }: GroupInvitesItemProps) {
   return (
-    <Row className="row-spaced">
+    <OLRow className="row-spaced">
-      <Col md={8} mdOffset={2} className="text-center">
+      <OLCol lg={{ span: 8, offset: 2 }} className="text-center">
-        <div className="card">
+        <OLCard>
           <div className="page-header">
             <h2>
               <Trans
@@ -29,8 +31,8 @@ export default function GroupInvitesItem({
             </h2>
           </div>
           <GroupInvitesItemFooter teamInvite={teamInvite} />
-        </div>
+        </OLCard>
-      </Col>
+      </OLCol>
-    </Row>
+    </OLRow>
   )
 }

services/web/frontend/js/features/subscription/components/group-invites/group-invites.tsx

@@ -1,9 +1,10 @@
 import { useEffect } from 'react'
-import { Col, Row } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import getMeta from '@/utils/meta'
 import { useLocation } from '@/shared/hooks/use-location'
 import GroupInvitesItem from './group-invites-item'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import OLCol from '@/features/ui/components/ol/ol-col'
 
 function GroupInvites() {
   const { t } = useTranslation()
@@ -18,11 +19,11 @@ function GroupInvites() {
 
   return (
     <div className="container">
-      <Row>
+      <OLRow>
-        <Col md={8} mdOffset={2}>
+        <OLCol lg={{ span: 8, offset: 2 }}>
           <h1>{t('group_invitations')}</h1>
-        </Col>
+        </OLCol>
-      </Row>
+      </OLRow>
       {teamInvites.map(teamInvite => (
         <GroupInvitesItem teamInvite={teamInvite} key={teamInvite._id} />
       ))}