Merge pull request #24365 from overleaf/td-bs5-misc-clean-up

Remove BS3 code from a couple of places

GitOrigin-RevId: 110a8f4c96a5418da27be11471d2e93bb7e01ee8

services/web/frontend/js/features/subscription/components/dashboard/states/active/add-ons.tsx

@@ -1,12 +1,6 @@
 import { useTranslation } from 'react-i18next'
-import {
-  Dropdown as BS3Dropdown,
-  MenuItem as BS3MenuItem,
-} from 'react-bootstrap'
 import { Dropdown, DropdownMenu, DropdownToggle } from 'react-bootstrap-5'
 import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item'
-import ControlledDropdown from '@/shared/components/controlled-dropdown'
-import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import MaterialIcon from '@/shared/components/material-icon'
 import {
   ADD_ON_NAME,
@@ -15,8 +9,6 @@ import {
   AI_STANDALONE_PLAN_CODE,
 } from '@/features/subscription/data/add-on-codes'
 import sparkle from '@/shared/svgs/sparkle.svg'
-import { bsVersion } from '@/features/utils/bootstrap-5'
-import classnames from 'classnames'
 import { RecurlySubscription } from '../../../../../../../../types/subscription/dashboard/subscription'
 import { LICENSE_ADD_ON } from '@/features/group-management/components/upgrade-subscription/upgrade-subscription-plan-details'
 
@@ -78,51 +70,28 @@ function AddOn({
       </div>
       {!pendingCancellation && (
         <div className="ms-auto">
-          <BootstrapVersionSwitcher
-            bs3={
-              <ControlledDropdown id="add-ons-actions" pullRight>
-                <BS3Dropdown.Toggle
-                  noCaret
-                  bsStyle={null}
-                  className="add-on-options-toggle btn-secondary"
-                >
-                  <MaterialIcon
-                    type="more_vert"
-                    accessibilityLabel={t('more_options')}
-                  />
-                </BS3Dropdown.Toggle>
-                <BS3Dropdown.Menu>
-                  <BS3MenuItem onClick={() => handleCancelClick(addOnCode)}>
-                    {t('cancel')}
-                  </BS3MenuItem>
-                </BS3Dropdown.Menu>
-              </ControlledDropdown>
-            }
-            bs5={
-              <Dropdown align="end">
-                <DropdownToggle
-                  id="add-on-dropdown-toggle"
-                  className="add-on-options-toggle"
-                  variant="secondary"
-                >
-                  <MaterialIcon
-                    type="more_vert"
-                    accessibilityLabel={t('more_options')}
-                  />
-                </DropdownToggle>
-                <DropdownMenu flip={false}>
-                  <OLDropdownMenuItem
-                    onClick={() => handleCancelClick(addOnCode)}
-                    as="button"
-                    tabIndex={-1}
-                    variant="danger"
-                  >
-                    {t('cancel')}
-                  </OLDropdownMenuItem>
-                </DropdownMenu>
-              </Dropdown>
-            }
-          />
+          <Dropdown align="end">
+            <DropdownToggle
+              id="add-on-dropdown-toggle"
+              className="add-on-options-toggle"
+              variant="secondary"
+            >
+              <MaterialIcon
+                type="more_vert"
+                accessibilityLabel={t('more_options')}
+              />
+            </DropdownToggle>
+            <DropdownMenu flip={false}>
+              <OLDropdownMenuItem
+                onClick={() => handleCancelClick(addOnCode)}
+                as="button"
+                tabIndex={-1}
+                variant="danger"
+              >
+                {t('cancel')}
+              </OLDropdownMenuItem>
+            </DropdownMenu>
+          </Dropdown>
         </div>
       )}
     </div>
@@ -146,9 +115,7 @@ function AddOns({
 
   return (
     <>
-      <h2 className={classnames('h3', bsVersion({ bs5: 'fw-bold' }))}>
-        {t('add_ons')}
-      </h2>
+      <h2 className="h3 fw-bold">{t('add_ons')}</h2>
       {addOnsToDisplay && addOnsToDisplay.length > 0 ? (
         addOnsToDisplay.map(addOn => (
           <AddOn

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

@@ -1,5 +1,4 @@
 import { useCallback } from 'react'
-import { Grid, Row } from 'react-bootstrap'
 import moment from 'moment'
 import { useTranslation, Trans } from 'react-i18next'
 import {
@@ -15,6 +14,7 @@ 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 OLRow from '@/features/ui/components/ol/ol-row'
 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'
@@ -50,8 +50,8 @@ function PreviewSubscriptionChange() {
       : (preview.change as PremiumSubscriptionChange).plan.name
 
   return (
-    <Grid>
-      <Row>
+    <div className="container">
+      <OLRow>
         <OLCol md={{ offset: 2, span: 8 }}>
           <OLCard className="p-3">
             {preview.change.type === 'add-on-purchase' ? (
@@ -100,7 +100,7 @@ function PreviewSubscriptionChange() {
 
             <OLCard className="payment-summary-card mt-5">
               <h3>{t('due_today')}:</h3>
-              <Row>
+              <OLRow>
                 <OLCol xs={9}>{changeName}</OLCol>
                 <OLCol xs={3} className="text-end">
                   <strong>
@@ -110,10 +110,10 @@ function PreviewSubscriptionChange() {
                     )}
                   </strong>
                 </OLCol>
-              </Row>
+              </OLRow>
 
               {preview.immediateCharge.tax > 0 && (
-                <Row className="mt-1">
+                <OLRow className="mt-1">
                   <OLCol xs={9}>
                     {t('vat')} {preview.nextInvoice.tax.rate * 100}%
                   </OLCol>
@@ -123,10 +123,10 @@ function PreviewSubscriptionChange() {
                       preview.currency
                     )}
                   </OLCol>
-                </Row>
+                </OLRow>
               )}
 
-              <Row className="mt-1">
+              <OLRow className="mt-1">
                 <OLCol xs={9}>{t('total_today')}</OLCol>
                 <OLCol xs={3} className="text-end">
                   <strong>
@@ -136,7 +136,7 @@ function PreviewSubscriptionChange() {
                     )}
                   </strong>
                 </OLCol>
-              </Row>
+              </OLRow>
             </OLCard>
 
             <div className="mt-5">
@@ -169,7 +169,7 @@ function PreviewSubscriptionChange() {
 
             <OLCard className="payment-summary-card mt-5">
               <h3>{t('future_payments')}:</h3>
-              <Row className="mt-1">
+              <OLRow className="mt-1">
                 <OLCol xs={9}>{preview.nextInvoice.plan.name}</OLCol>
                 <OLCol xs={3} className="text-end">
                   {formatCurrency(
@@ -177,10 +177,10 @@ function PreviewSubscriptionChange() {
                     preview.currency
                   )}
                 </OLCol>
-              </Row>
+              </OLRow>
 
               {preview.nextInvoice.addOns.map(addOn => (
-                <Row className="mt-1" key={addOn.code}>
+                <OLRow className="mt-1" key={addOn.code}>
                   <OLCol xs={9}>
                     {addOn.name}
                     {addOn.quantity > 1 ? ` ×${addOn.quantity}` : ''}
@@ -188,11 +188,11 @@ function PreviewSubscriptionChange() {
                   <OLCol xs={3} className="text-end">
                     {formatCurrency(addOn.amount, preview.currency)}
                   </OLCol>
-                </Row>
+                </OLRow>
               ))}
 
               {preview.nextInvoice.tax.rate > 0 && (
-                <Row className="mt-1">
+                <OLRow className="mt-1">
                   <OLCol xs={9}>
                     {t('vat')} {preview.nextInvoice.tax.rate * 100}%
                   </OLCol>
@@ -202,10 +202,10 @@ function PreviewSubscriptionChange() {
                       preview.currency
                     )}
                   </OLCol>
-                </Row>
+                </OLRow>
               )}
 
-              <Row className="mt-1">
+              <OLRow className="mt-1">
                 <OLCol xs={9}>
                   {preview.nextPlan.annual
                     ? t('total_per_year')
@@ -214,7 +214,7 @@ function PreviewSubscriptionChange() {
                 <OLCol xs={3} className="text-end">
                   {formatCurrency(preview.nextInvoice.total, preview.currency)}
                 </OLCol>
-              </Row>
+              </OLRow>
             </OLCard>
 
             <div className="mt-5">
@@ -228,8 +228,8 @@ function PreviewSubscriptionChange() {
             </div>
           </OLCard>
         </OLCol>
-      </Row>
-    </Grid>
+      </OLRow>
+    </div>
   )
 }