From 55f4cec2b61db55919e5fd730271ebca521cdbf1 Mon Sep 17 00:00:00 2001
From: MoxAmber <amber.steele@overleaf.com>
Date: Mon, 7 Apr 2025 11:58:06 +0100
Subject: [PATCH] Merge pull request #24545 from
 overleaf/as-customerio-toolbar-placeholders

[web] Create placeholders for customer.io inline messages

GitOrigin-RevId: 862362cd9336e5c1899dfaeeabac9f3da181ccf9
---
 .../components/history-toggle-button.jsx        |  1 +
 .../components/share-project-button.jsx         |  1 +
 .../components/track-changes-toggle-button.jsx  |  1 +
 .../bootstrap-5/pages/editor/toolbar.scss       | 17 +++++++++++++++++
 4 files changed, 20 insertions(+)

diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/history-toggle-button.jsx b/services/web/frontend/js/features/editor-navigation-toolbar/components/history-toggle-button.jsx
index 644efd7a1a..23a2adfd09 100644
--- a/services/web/frontend/js/features/editor-navigation-toolbar/components/history-toggle-button.jsx
+++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/history-toggle-button.jsx
@@ -11,6 +11,7 @@ function HistoryToggleButton({ onClick }) {
         <MaterialIcon type="history" className="align-middle" />
         <p className="toolbar-label">{t('history')}</p>
       </button>
+      <div id="toolbar-cio-history" className="toolbar-cio-tooltip" />
     </div>
   )
 }
diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/share-project-button.jsx b/services/web/frontend/js/features/editor-navigation-toolbar/components/share-project-button.jsx
index f0aed3674d..6c4123f03d 100644
--- a/services/web/frontend/js/features/editor-navigation-toolbar/components/share-project-button.jsx
+++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/share-project-button.jsx
@@ -11,6 +11,7 @@ function ShareProjectButton({ onClick }) {
         <MaterialIcon type="group_add" className="align-middle" />
         <p className="toolbar-label">{t('share')}</p>
       </button>
+      <div id="toolbar-cio-share" className="toolbar-cio-tooltip" />
     </div>
   )
 }
diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.jsx b/services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.jsx
index 5b74c71e84..469dc7cd29 100644
--- a/services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.jsx
+++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.jsx
@@ -25,6 +25,7 @@ function TrackChangesToggleButton({
         <MaterialIcon type="rate_review" className="align-middle" />
         <p className="toolbar-label">{t('review')}</p>
       </button>
+      <div id="toolbar-cio-review" className="toolbar-cio-tooltip" />
     </div>
   )
 }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss
index 70b5dac91c..d3d2dca6fd 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss
@@ -248,6 +248,23 @@
 
   .toolbar-item {
     display: flex;
+    justify-content: center;
+  }
+
+  .toolbar-cio-tooltip {
+    position: absolute;
+    top: var(--toolbar-height);
+    width: 391px;
+  }
+
+  #toolbar-cio-history {
+    @include media-breakpoint-down(lg) {
+      right: 10px;
+
+      /* The iframe a message renders in isn't aware of the page width, so we
+         make it 1px narrower to enable max-width media queries */
+      width: 390px;
+    }
   }
 }