[web] Migrate /user/subscription/canceled to BS5 (#20590)

* [web] Initialize BS5 in subscription page

* [web] Backend wiring for `/user/subscription/canceled` to BS5

* [web] Backend `Canceled` to BS5

GitOrigin-RevId: 660458145c06e0d2dd1343186d31b6a7662b01a0

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

@@ -458,7 +458,12 @@ function cancelSubscription(req, res, next) {
  * @param {import('express').NextFunction} next
  * @returns {Promise<void>}
  */
-function canceledSubscription(req, res, next) {
+async function canceledSubscription(req, res, next) {
+  await SplitTestHandler.promises.getAssignment(
+    req,
+    res,
+    'bootstrap-5-subscription'
+  )
   return res.render('subscriptions/canceled-subscription-react', {
     title: 'subscription_canceled',
   })
@@ -753,7 +758,7 @@ module.exports = {
   interstitialPaymentPage: expressify(interstitialPaymentPage),
   successfulSubscription: expressify(successfulSubscription),
   cancelSubscription,
-  canceledSubscription,
+  canceledSubscription: expressify(canceledSubscription),
   cancelV1Subscription,
   updateSubscription,
   cancelPendingSubscriptionChange,

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

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

@@ -1,25 +1,31 @@
 import { useTranslation } from 'react-i18next'
-import { Col, Row, Alert } from 'react-bootstrap'
+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 Canceled() {
   const { t } = useTranslation()
 
   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('subscription_canceled')}</h2>
             </div>
-            <Alert bsStyle="info">
-              <p>
-                {t('to_modify_your_subscription_go_to')}&nbsp;
-                <a href="/user/subscription" rel="noopener noreferrer">
-                  {t('manage_subscription')}.
-                </a>
-              </p>
-            </Alert>
+            <OLNotification
+              type="info"
+              content={
+                <p>
+                  {t('to_modify_your_subscription_go_to')}&nbsp;
+                  <a href="/user/subscription" rel="noopener noreferrer">
+                    {t('manage_subscription')}.
+                  </a>
+                </p>
+              }
+            />
             <p>
               <a
                 className="btn btn-primary"
@@ -29,9 +35,9 @@ function Canceled() {
                 &lt; {t('back_to_your_projects')}
               </a>
             </p>
-          </div>
-        </Col>
-      </Row>
+          </OLCard>
+        </OLCol>
+      </OLRow>
     </div>
   )
 }