From 6b4c48326947bb599e53b9af3de3d3c7da568606 Mon Sep 17 00:00:00 2001
From: Antoine Clausse <antoine.clausse@overleaf.com>
Date: Wed, 25 Sep 2024 12:11:51 +0200
Subject: [PATCH] [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
---
 .../Subscription/SubscriptionController.js    |  6 ++
 .../successful-subscription-react.pug         |  4 ++
 .../successful-subscription.tsx               | 65 +++++++++++--------
 3 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/services/web/app/src/Features/Subscription/SubscriptionController.js b/services/web/app/src/Features/Subscription/SubscriptionController.js
index 0255f3b0d5..cd9b0c3ad5 100644
--- a/services/web/app/src/Features/Subscription/SubscriptionController.js
+++ b/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,
diff --git a/services/web/app/views/subscriptions/successful-subscription-react.pug b/services/web/app/views/subscriptions/successful-subscription-react.pug
index fbe2767141..0d82346b6f 100644
--- a/services/web/app/views/subscriptions/successful-subscription-react.pug
+++ b/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'
 
diff --git a/services/web/frontend/js/features/subscription/components/successful-subscription/successful-subscription.tsx b/services/web/frontend/js/features/subscription/components/successful-subscription/successful-subscription.tsx
index 5704dcc2f6..9749cd91f2 100644
--- a/services/web/frontend/js/features/subscription/components/successful-subscription/successful-subscription.tsx
+++ b/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,37 +19,43 @@ 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">
-              {subscription.recurly.trial_ends_at && (
+            <OLNotification
+              type="success"
+              content={
                 <>
+                  {subscription.recurly.trial_ends_at && (
+                    <>
+                      <p>
+                        <Trans
+                          i18nKey="next_payment_of_x_collectected_on_y"
+                          values={{
+                            paymentAmmount: subscription.recurly.displayPrice,
+                            collectionDate:
+                              subscription.recurly.nextPaymentDueAt,
+                          }}
+                          shouldUnescape
+                          tOptions={{ interpolation: { escapeValue: true } }}
+                          components={[<strong />, <strong />]} // eslint-disable-line react/jsx-key
+                        />
+                      </p>
+                      <PriceExceptions subscription={subscription} />
+                    </>
+                  )}
                   <p>
-                    <Trans
-                      i18nKey="next_payment_of_x_collectected_on_y"
-                      values={{
-                        paymentAmmount: subscription.recurly.displayPrice,
-                        collectionDate: subscription.recurly.nextPaymentDueAt,
-                      }}
-                      shouldUnescape
-                      tOptions={{ interpolation: { escapeValue: true } }}
-                      components={[<strong />, <strong />]} // eslint-disable-line react/jsx-key
-                    />
+                    {t('to_modify_your_subscription_go_to')}&nbsp;
+                    <a href="/user/subscription" rel="noopener noreferrer">
+                      {t('manage_subscription')}.
+                    </a>
                   </p>
-                  <PriceExceptions subscription={subscription} />
                 </>
-              )}
-              <p>
-                {t('to_modify_your_subscription_go_to')}&nbsp;
-                <a href="/user/subscription" rel="noopener noreferrer">
-                  {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>
   )
 }