From 6da4ad207956716c0b9cd9481c8e47f6eb4bc830 Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Tue, 18 Mar 2025 15:03:37 +0000
Subject: [PATCH] Merge pull request #24349 from
 overleaf/td-bs5-add-secondary-email

Migrate add secondary email page to Bootstrap 5

GitOrigin-RevId: f5d1992f2cb2d313f5950ccfd5c187b9bac72d82
---
 .../src/Features/User/UserEmailsController.js |  2 ++
 .../web/app/views/user/addSecondaryEmail.pug  |  5 +++--
 .../emails/add-secondary-email-prompt.tsx     | 20 +++++--------------
 .../pages/add-secondary-email-prompt.scss     | 16 +++++++++++++++
 .../stylesheets/bootstrap-5/pages/all.scss    |  1 +
 5 files changed, 27 insertions(+), 17 deletions(-)
 create mode 100644 services/web/frontend/stylesheets/bootstrap-5/pages/add-secondary-email-prompt.scss

diff --git a/services/web/app/src/Features/User/UserEmailsController.js b/services/web/app/src/Features/User/UserEmailsController.js
index 8d4745e891..f639d0861a 100644
--- a/services/web/app/src/Features/User/UserEmailsController.js
+++ b/services/web/app/src/Features/User/UserEmailsController.js
@@ -511,6 +511,8 @@ async function addSecondaryEmailPage(req, res) {
     'add-secondary-email-page-displayed'
   )
 
+  await SplitTestHandler.promises.getAssignment(req, res, 'bs5-misc-pages-b2c')
+
   res.render('user/addSecondaryEmail')
 }
 
diff --git a/services/web/app/views/user/addSecondaryEmail.pug b/services/web/app/views/user/addSecondaryEmail.pug
index b4c5b327ee..43332eaf64 100644
--- a/services/web/app/views/user/addSecondaryEmail.pug
+++ b/services/web/app/views/user/addSecondaryEmail.pug
@@ -1,9 +1,10 @@
-extends ../layout-marketing
+extends ../layout-react
 
 block vars
 	- var suppressNavbar = true
 	- var suppressSkipToContent = true
-	- bootstrap5PageStatus = 'disabled'
+	- bootstrap5PageStatus = 'enabled'
+	- bootstrap5PageSplitTest = 'bs5-misc-pages-b2c'
 
 block entrypointVar
 	- entrypoint = 'pages/user/add-secondary-email'
diff --git a/services/web/frontend/js/features/settings/components/emails/add-secondary-email-prompt.tsx b/services/web/frontend/js/features/settings/components/emails/add-secondary-email-prompt.tsx
index 79d97265e6..377cc16279 100644
--- a/services/web/frontend/js/features/settings/components/emails/add-secondary-email-prompt.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/add-secondary-email-prompt.tsx
@@ -1,6 +1,6 @@
 import { Interstitial } from '@/shared/components/interstitial'
 import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
-import { Button } from 'react-bootstrap'
+import OLButton from '@/features/ui/components/ol/ol-button'
 import { Trans, useTranslation } from 'react-i18next'
 import EmailInput from './add-email/input'
 import { useState } from 'react'
@@ -92,22 +92,12 @@ export function AddSecondaryEmailPrompt() {
             {error && <ErrorMessage error={error} />}
           </div>
 
-          <Button
-            bsStyle={null}
-            disabled={isSubmitting}
-            className="btn-primary"
-            type="submit"
-          >
+          <OLButton disabled={isSubmitting} variant="primary" type="submit">
             {isSubmitting ? <>{t('adding')}&hellip;</> : t('add_email_address')}
-          </Button>
-          <Button
-            bsStyle={null}
-            disabled={isSubmitting}
-            className="btn-secondary"
-            href="/project"
-          >
+          </OLButton>
+          <OLButton disabled={isSubmitting} variant="secondary" href="/project">
             {t('not_now')}
-          </Button>
+          </OLButton>
           <p className="add-secondary-email-learn-more">
             <Trans
               i18nKey="learn_more_about_account"
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/add-secondary-email-prompt.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/add-secondary-email-prompt.scss
new file mode 100644
index 0000000000..4a9ace96ab
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/add-secondary-email-prompt.scss
@@ -0,0 +1,16 @@
+.add-secondary-email {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-05);
+
+  .add-secondary-email-error {
+    display: flex;
+    gap: var(--spacing-03);
+    padding: var(--spacing-02);
+  }
+
+  .add-secondary-email-learn-more {
+    margin-top: var(--spacing-05);
+    margin-bottom: 0;
+  }
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
index 9b3ec278dc..b3701411e3 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
@@ -50,3 +50,4 @@
 @import 'onboarding';
 @import 'admin/admin';
 @import 'admin/project-url-lookup';
+@import 'add-secondary-email-prompt';