Merge pull request #24154 from overleaf/em-bs5-subscription-preview

Migrate the subscription change preview page to BS5

GitOrigin-RevId: beb398ef3a81be1b8d35536c524af6c110ea1b3d

services/web/app/views/subscriptions/preview-change.pug

@@ -1,5 +1,8 @@
 extends ../layout-marketing
 
+block vars
+	- bootstrap5PageStatus = 'enabled'
+
 block entrypointVar
 	- entrypoint = 'pages/user/subscription/preview-change'
 

services/web/frontend/js/features/subscription/components/preview-subscription-change/root.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react'
-import { Grid, Row, Col, Button } from 'react-bootstrap'
+import { Grid, Row } from 'react-bootstrap'
 import moment from 'moment'
 import { useTranslation, Trans } from 'react-i18next'
 import {
@@ -14,6 +14,9 @@ import { useLocation } from '@/shared/hooks/use-location'
 import { debugConsole } from '@/utils/debugging'
 import { postJSON } from '@/infrastructure/fetch-json'
 import Notification from '@/shared/components/notification'
+import OLCard from '@/features/ui/components/ol/ol-card'
+import OLCol from '@/features/ui/components/ol/ol-col'
+import OLButton from '@/features/ui/components/ol/ol-button'
 import { subscriptionUpdateUrl } from '@/features/subscription/data/subscription-url'
 import * as eventTracking from '@/infrastructure/event-tracking'
 import sparkleText from '@/shared/svgs/ai-sparkle-text.svg'
@@ -49,8 +52,8 @@ function PreviewSubscriptionChange() {
   return (
     <Grid>
       <Row>
-        <Col md={8} mdOffset={2}>
-          <div className="card p-5">
+        <OLCol md={{ offset: 2, span: 8 }}>
+          <OLCard className="p-3">
             {preview.change.type === 'add-on-purchase' ? (
               <h1>
                 {t('add_add_on_to_your_plan', {
@@ -77,7 +80,7 @@ function PreviewSubscriptionChange() {
             )}
 
             {aiAddOnChange && (
-              <div className="text-small">
+              <div>
                 <Trans
                   i18nKey="add_error_assist_to_your_projects"
                   components={{
@@ -95,46 +98,46 @@ function PreviewSubscriptionChange() {
               </div>
             )}
 
-            <div className="payment-summary-card mt-5">
+            <OLCard className="payment-summary-card mt-5">
               <h3>{t('due_today')}:</h3>
               <Row>
-                <Col xs={9}>{changeName}</Col>
-                <Col xs={3} className="text-right">
+                <OLCol xs={9}>{changeName}</OLCol>
+                <OLCol xs={3} className="text-end">
                   <strong>
                     {formatCurrency(
                       preview.immediateCharge.subtotal,
                       preview.currency
                     )}
                   </strong>
-                </Col>
+                </OLCol>
               </Row>
 
               {preview.immediateCharge.tax > 0 && (
                 <Row className="mt-1">
-                  <Col xs={9}>
+                  <OLCol xs={9}>
                     {t('vat')} {preview.nextInvoice.tax.rate * 100}%
-                  </Col>
-                  <Col xs={3} className="text-right">
+                  </OLCol>
+                  <OLCol xs={3} className="text-end">
                     {formatCurrency(
                       preview.immediateCharge.tax,
                       preview.currency
                     )}
-                  </Col>
+                  </OLCol>
                 </Row>
               )}
 
-              <Row>
-                <Col xs={9}>{t('total_today')}</Col>
-                <Col xs={3} className="text-right">
+              <Row className="mt-1">
+                <OLCol xs={9}>{t('total_today')}</OLCol>
+                <OLCol xs={3} className="text-end">
                   <strong>
                     {formatCurrency(
                       preview.immediateCharge.total,
                       preview.currency
                     )}
                   </strong>
-                </Col>
+                </OLCol>
               </Row>
-            </div>
+            </OLCard>
 
             <div className="mt-5">
               <Trans
@@ -154,65 +157,65 @@ function PreviewSubscriptionChange() {
             </div>
 
             <div className="mt-5">
-              <Button
-                bsStyle="primary"
-                bsSize="large"
+              <OLButton
+                variant="primary"
+                size="lg"
                 onClick={handlePayNowClick}
                 disabled={payNowTask.isLoading || payNowTask.isSuccess}
               >
                 {t('pay_now')}
-              </Button>
+              </OLButton>
             </div>
 
-            <div className="payment-summary-card mt-5">
+            <OLCard className="payment-summary-card mt-5">
               <h3>{t('future_payments')}:</h3>
               <Row className="mt-1">
-                <Col xs={9}>{preview.nextInvoice.plan.name}</Col>
-                <Col xs={3} className="text-right">
+                <OLCol xs={9}>{preview.nextInvoice.plan.name}</OLCol>
+                <OLCol xs={3} className="text-end">
                   {formatCurrency(
                     preview.nextInvoice.plan.amount,
                     preview.currency
                   )}
-                </Col>
+                </OLCol>
               </Row>
 
               {preview.nextInvoice.addOns.map(addOn => (
                 <Row className="mt-1" key={addOn.code}>
-                  <Col xs={9}>
+                  <OLCol xs={9}>
                     {addOn.name}
                     {addOn.quantity > 1 ? ` ×${addOn.quantity}` : ''}
-                  </Col>
-                  <Col xs={3} className="text-right">
+                  </OLCol>
+                  <OLCol xs={3} className="text-end">
                     {formatCurrency(addOn.amount, preview.currency)}
-                  </Col>
+                  </OLCol>
                 </Row>
               ))}
 
               {preview.nextInvoice.tax.rate > 0 && (
                 <Row className="mt-1">
-                  <Col xs={9}>
+                  <OLCol xs={9}>
                     {t('vat')} {preview.nextInvoice.tax.rate * 100}%
-                  </Col>
-                  <Col xs={3} className="text-right">
+                  </OLCol>
+                  <OLCol xs={3} className="text-end">
                     {formatCurrency(
                       preview.nextInvoice.tax.amount,
                       preview.currency
                     )}
-                  </Col>
+                  </OLCol>
                 </Row>
               )}
 
               <Row className="mt-1">
-                <Col xs={9}>
+                <OLCol xs={9}>
                   {preview.nextPlan.annual
                     ? t('total_per_year')
                     : t('total_per_month')}
-                </Col>
-                <Col xs={3} className="text-right">
+                </OLCol>
+                <OLCol xs={3} className="text-end">
                   {formatCurrency(preview.nextInvoice.total, preview.currency)}
-                </Col>
+                </OLCol>
               </Row>
-            </div>
+            </OLCard>
 
             <div className="mt-5">
               <Trans
@@ -223,8 +226,8 @@ function PreviewSubscriptionChange() {
                 tOptions={{ interpolation: { escapeValue: true } }}
               />
             </div>
-          </div>
-        </Col>
+          </OLCard>
+        </OLCol>
       </Row>
     </Grid>
   )

services/web/frontend/stylesheets/bootstrap-5/pages/subscription.scss

@@ -499,3 +499,15 @@
     }
   }
 }
+
+.payment-summary-card {
+  @extend .card-gray;
+
+  border-radius: var(--border-radius-large);
+
+  h3 {
+    margin-top: 0;
+    margin-bottom: var(--spacing-08);
+    font-weight: 600;
+  }
+}