[web] Migrate /user/subscription/thank-you to BS5 (#20588)

* [web] Initialize BS5 in subscription page

* [web] Backend wiring for `user/subscription/thank-you` to BS5

* [web] Update `SuccessfulSubscription` to BS5

GitOrigin-RevId: 45162664c116eb04b73e16443c84fa24ea8b220c

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

@@ -422,6 +422,12 @@ async function successfulSubscription(req, res) {
   if (!personalSubscription) {
     res.redirect('/user/subscription/plans')
   } else {
+    await SplitTestHandler.promises.getAssignment(
+      req,
+      res,
+      'bootstrap-5-subscription'
+    )
+
     res.render('subscriptions/successful-subscription-react', {
       title: 'thank_you',
       personalSubscription,

services/web/app/views/subscriptions/successful-subscription-react.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/successful-subscription'
 

services/web/frontend/js/features/subscription/components/successful-subscription/successful-subscription.tsx

@@ -1,9 +1,12 @@
 import { useTranslation, Trans } from 'react-i18next'
-import { Col, Row } from 'react-bootstrap'
 import { PriceExceptions } from '../shared/price-exceptions'
 import PremiumFeaturesLink from '../dashboard/premium-features-link'
 import getMeta from '../../../../utils/meta'
 import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import OLCol from '@/features/ui/components/ol/ol-col'
+import OLCard from '@/features/ui/components/ol/ol-card'
+import OLNotification from '@/features/ui/components/ol/ol-notification'
 
 function SuccessfulSubscription() {
   const { t } = useTranslation()
@@ -16,13 +19,16 @@ function SuccessfulSubscription() {
 
   return (
     <div className="container">
-      <Row>
-        <Col md={8} mdOffset={2}>
-          <div className="card">
+      <OLRow>
+        <OLCol lg={{ span: 8, offset: 2 }}>
+          <OLCard>
             <div className="page-header">
               <h2>{t('thanks_for_subscribing')}</h2>
             </div>
-            <div role="alert" className="alert alert-success">
+            <OLNotification
+              type="success"
+              content={
+                <>
                   {subscription.recurly.trial_ends_at && (
                     <>
                       <p>
@@ -30,7 +36,8 @@ function SuccessfulSubscription() {
                           i18nKey="next_payment_of_x_collectected_on_y"
                           values={{
                             paymentAmmount: subscription.recurly.displayPrice,
-                        collectionDate: subscription.recurly.nextPaymentDueAt,
+                            collectionDate:
+                              subscription.recurly.nextPaymentDueAt,
                           }}
                           shouldUnescape
                           tOptions={{ interpolation: { escapeValue: true } }}
@@ -46,7 +53,9 @@ function SuccessfulSubscription() {
                       {t('manage_subscription')}.
                     </a>
                   </p>
-            </div>
+                </>
+              }
+            />
             {subscription.groupPlan && (
               <p>
                 <a
@@ -97,9 +106,9 @@ function SuccessfulSubscription() {
                 &lt; {t('back_to_your_projects')}
               </a>
             </p>
-          </div>
-        </Col>
-      </Row>
+          </OLCard>
+        </OLCol>
+      </OLRow>
     </div>
   )
 }