Merge pull request #24349 from overleaf/td-bs5-add-secondary-email

Migrate add secondary email page to Bootstrap 5

GitOrigin-RevId: f5d1992f2cb2d313f5950ccfd5c187b9bac72d82

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')
 }
 

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'

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"

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;
+  }
+}

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';