From 12abf7462022c66e5b532ac10ed943132fc49f11 Mon Sep 17 00:00:00 2001
From: Eric Mc Sween <5454374+emcsween@users.noreply.github.com>
Date: Thu, 20 Feb 2025 08:15:53 -0500
Subject: [PATCH] Merge pull request #23689 from
 overleaf/em-dp-mj-interstitial-join-project-bs5

Migrate interstitial join project page to Bootstrap 5

GitOrigin-RevId: 10f45eecb33e087373a9605074ef9f8562ca2b8f
---
 .../TokenAccess/TokenAccessController.mjs     |   1 +
 .../views/project/token/sharing-updates.pug   |   2 +
 .../components/sharing-updates-root.tsx       | 143 +++++++++---------
 .../bootstrap-5/components/invite.scss        |  17 +++
 4 files changed, 93 insertions(+), 70 deletions(-)

diff --git a/services/web/app/src/Features/TokenAccess/TokenAccessController.mjs b/services/web/app/src/Features/TokenAccess/TokenAccessController.mjs
index 94cf48894a..2add411d43 100644
--- a/services/web/app/src/Features/TokenAccess/TokenAccessController.mjs
+++ b/services/web/app/src/Features/TokenAccess/TokenAccessController.mjs
@@ -502,6 +502,7 @@ async function sharingUpdatesConsent(req, res, next) {
     page: req.path,
     name: 'link-sharing-collaborator',
   })
+  await SplitTestHandler.promises.getAssignment(req, res, 'bs5-misc-pages-core')
   res.render('project/token/sharing-updates', {
     projectId,
   })
diff --git a/services/web/app/views/project/token/sharing-updates.pug b/services/web/app/views/project/token/sharing-updates.pug
index a0afb0c621..d4fdb59123 100644
--- a/services/web/app/views/project/token/sharing-updates.pug
+++ b/services/web/app/views/project/token/sharing-updates.pug
@@ -7,6 +7,8 @@ block vars
 	- var suppressFooter = true
 	- var suppressCookieBanner = true
 	- var suppressSkipToContent = true
+	- bootstrap5PageStatus = 'enabled'
+	- bootstrap5PageSplitTest = 'bs5-misc-pages-core'
 
 block append meta
 	meta(name="ol-project_id" data-type="string" content=projectId)
diff --git a/services/web/frontend/js/features/token-access/components/sharing-updates-root.tsx b/services/web/frontend/js/features/token-access/components/sharing-updates-root.tsx
index 2d30c34510..476bc83881 100644
--- a/services/web/frontend/js/features/token-access/components/sharing-updates-root.tsx
+++ b/services/web/frontend/js/features/token-access/components/sharing-updates-root.tsx
@@ -11,6 +11,7 @@ import Notification from '@/shared/components/notification'
 import { sendMB } from '@/infrastructure/event-tracking'
 
 import LeaveProjectModal from './leave-project-modal'
+import OLButton from '@/features/ui/components/ol/ol-button'
 
 function SharingUpdatesRoot() {
   const [showModal, setShowModal] = useState(false)
@@ -67,86 +68,88 @@ function SharingUpdatesRoot() {
         handleCloseModal={() => setShowModal(false)}
       />
       <div className="row">
-        <div className="col-md-6 col-md-offset-3">
+        <div className="col-md-6 col-md-offset-3 offset-md-3">
           <div className="card sharing-updates">
-            <div className="row">
-              <div className="col-md-12">
-                <h1 className="sharing-updates-h1">
-                  {t('updates_to_project_sharing')}
-                </h1>
-              </div>
-            </div>
-
-            <div className="row row-spaced">
-              <div className="col-md-12">
-                <p>
-                  <Trans
-                    i18nKey="were_making_some_changes_to_project_sharing_this_means_you_will_be_visible"
-                    components={[
-                      // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
-                      <a
-                        href="/blog/changes-to-project-sharing"
-                        rel="noopener noreferrer"
-                        target="_blank"
-                        onClick={() => {
-                          sendMB('notification-click', {
-                            name: 'link-sharing-collaborator',
-                            button: 'learn',
-                          })
-                        }}
-                      />,
-                    ]}
-                  />
-                </p>
-              </div>
-            </div>
-
-            <div className="row row-spaced">
-              <div className="col-md-12">
-                <button
-                  className="btn btn-primary"
-                  onClick={() => joinProject()}
-                  disabled={isLoading}
-                >
-                  {t('ok_continue_to_project')}
-                </button>
-              </div>
-            </div>
-
-            {isError && (
-              <div className="row row-spaced">
+            <div className="card-body">
+              <div className="row">
                 <div className="col-md-12">
-                  <Notification
-                    type="error"
-                    content={t('generic_something_went_wrong')}
-                  />
+                  <h1 className="sharing-updates-h1">
+                    {t('updates_to_project_sharing')}
+                  </h1>
                 </div>
               </div>
-            )}
 
-            <div className="row row-spaced">
-              <div className="col-md-12">
-                <p>
-                  <small>
+              <div className="row row-spaced">
+                <div className="col-md-12">
+                  <p>
                     <Trans
-                      i18nKey="you_can_also_choose_to_view_anonymously_or_leave_the_project"
+                      i18nKey="were_making_some_changes_to_project_sharing_this_means_you_will_be_visible"
                       components={[
-                        // eslint-disable-next-line react/jsx-key
-                        <button
-                          className="btn btn-inline-link"
-                          onClick={() => viewProject()}
-                          disabled={isLoading || isSuccess}
-                        />,
-                        // eslint-disable-next-line react/jsx-key
-                        <button
-                          className="btn btn-inline-link"
-                          onClick={() => setShowModal(true)}
-                          disabled={isLoading || isSuccess}
+                        // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+                        <a
+                          href="/blog/changes-to-project-sharing"
+                          rel="noopener noreferrer"
+                          target="_blank"
+                          onClick={() => {
+                            sendMB('notification-click', {
+                              name: 'link-sharing-collaborator',
+                              button: 'learn',
+                            })
+                          }}
                         />,
                       ]}
                     />
-                  </small>
-                </p>
+                  </p>
+                </div>
+              </div>
+
+              <div className="row row-spaced">
+                <div className="col-md-12">
+                  <OLButton
+                    variant="primary"
+                    onClick={joinProject}
+                    disabled={isLoading}
+                  >
+                    {t('ok_continue_to_project')}
+                  </OLButton>
+                </div>
+              </div>
+
+              {isError && (
+                <div className="row row-spaced">
+                  <div className="col-md-12">
+                    <Notification
+                      type="error"
+                      content={t('generic_something_went_wrong')}
+                    />
+                  </div>
+                </div>
+              )}
+
+              <div className="row row-spaced">
+                <div className="col-md-12">
+                  <p>
+                    <small>
+                      <Trans
+                        i18nKey="you_can_also_choose_to_view_anonymously_or_leave_the_project"
+                        components={[
+                          // eslint-disable-next-line react/jsx-key
+                          <button
+                            className="btn btn-inline-link"
+                            onClick={() => viewProject()}
+                            disabled={isLoading || isSuccess}
+                          />,
+                          // eslint-disable-next-line react/jsx-key
+                          <button
+                            className="btn btn-inline-link"
+                            onClick={() => setShowModal(true)}
+                            disabled={isLoading || isSuccess}
+                          />,
+                        ]}
+                      />
+                    </small>
+                  </p>
+                </div>
               </div>
             </div>
           </div>
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/invite.scss b/services/web/frontend/stylesheets/bootstrap-5/components/invite.scss
index 6be4249ee2..86f68ea3b7 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/invite.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/invite.scss
@@ -6,3 +6,20 @@
     line-height: var(--line-height-06);
   }
 }
+
+.sharing-updates {
+  h1 {
+    // heading-sm
+    font-size: var(--font-size-05);
+    line-height: var(--line-height-04);
+    color: var(--content-primary);
+  }
+
+  p {
+    color: var(--content-secondary);
+  }
+
+  small {
+    font-size: var(--font-size-02);
+  }
+}