Update track changes paywall modal (#24620)

* Update track changes paywall modal

* update list styling

GitOrigin-RevId: f5eda3a4b19c89105e163c8b5729ebcdd5dca2d0

services/web/frontend/extracted-translations.json

@@ -38,9 +38,11 @@
   "accept_change_error_title": "",
   "accept_invitation": "",
   "accept_or_reject_each_changes_individually": "",
+  "accept_or_reject_individual_edits": "",
   "accept_selected_changes": "",
   "accept_terms_and_conditions": "",
   "accepted_invite": "",
+  "access_all_premium_features": "",
   "access_denied": "",
   "access_edit_your_projects": "",
   "access_levels_changed": "",
@@ -603,6 +605,7 @@
   "get_exclusive_access_to_labs": "",
   "get_in_touch": "",
   "get_most_subscription_discover_premium_features": "",
+  "get_real_time_track_changes": "",
   "git": "",
   "git_authentication_token": "",
   "git_authentication_token_create_modal_info_1": "",
@@ -1429,6 +1432,7 @@
   "searched_path_for_lines_containing": "",
   "security": "",
   "see_changes_in_your_documents_live": "",
+  "see_suggestions_from_collaborators": "",
   "select_a_column_or_a_merged_cell_to_align": "",
   "select_a_column_to_adjust_column_width": "",
   "select_a_file": "",
@@ -1893,6 +1897,7 @@
   "upgrade_summary": "",
   "upgrade_to_add_more_editors_and_access_collaboration_features": "",
   "upgrade_to_get_feature": "",
+  "upgrade_to_review": "",
   "upgrade_to_track_changes": "",
   "upgrade_to_unlock_more_time": "",
   "upgrade_your_subscription": "",

services/web/frontend/js/features/review-panel-new/components/review-panel-track-changes-menu-button.tsx

@@ -3,7 +3,7 @@ import { Trans } from 'react-i18next'
 import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useProjectContext } from '@/shared/context/project-context'
-import UpgradeTrackChangesModal from '@/features/review-panel-new/components/upgrade-track-changes-modal'
+import UpgradeTrackChangesModalLegacy from './upgrade-track-changes-modal-legacy'
 import { send, sendMB } from '@/infrastructure/event-tracking'
 
 const sendAnalytics = () => {
@@ -52,7 +52,7 @@ const ReviewPanelTrackChangesMenuButton: FC<{
         <MaterialIcon type={menuExpanded ? 'expand_more' : 'chevron_right'} />
       </button>
 
-      <UpgradeTrackChangesModal show={showModal} setShow={setShowModal} />
+      <UpgradeTrackChangesModalLegacy show={showModal} setShow={setShowModal} />
     </>
   )
 }

services/web/frontend/js/features/review-panel-new/components/upgrade-track-changes-modal-legacy.tsx

@@ -0,0 +1,109 @@
+import { useTranslation } from 'react-i18next'
+import { useProjectContext } from '@/shared/context/project-context'
+import { useUserContext } from '@/shared/context/user-context'
+import teaserVideo from '../images/teaser-track-changes.mp4'
+import teaserImage from '../images/teaser-track-changes.gif'
+import { startFreeTrial, upgradePlan } from '@/main/account-upgrade'
+import { memo } from 'react'
+import OLModal, {
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/features/ui/components/ol/ol-modal'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import OLCol from '@/features/ui/components/ol/ol-col'
+import MaterialIcon from '@/shared/components/material-icon'
+
+type UpgradeTrackChangesModalProps = {
+  show: boolean
+  setShow: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+function UpgradeTrackChangesModalLegacy({
+  show,
+  setShow,
+}: UpgradeTrackChangesModalProps) {
+  const { t } = useTranslation()
+  const project = useProjectContext()
+  const user = useUserContext()
+
+  return (
+    <OLModal show={show} onHide={() => setShow(false)}>
+      <OLModalHeader closeButton>
+        <OLModalTitle>{t('upgrade_to_track_changes')}</OLModalTitle>
+      </OLModalHeader>
+      <OLModalBody>
+        <div className="teaser-video-container">
+          {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+          <video className="teaser-video" autoPlay loop>
+            <source src={teaserVideo} type="video/mp4" />
+            <img
+              src={teaserImage}
+              alt={t('demonstrating_track_changes_feature')}
+            />
+          </video>
+        </div>
+        <h4 className="teaser-title">
+          {t('see_changes_in_your_documents_live')}
+        </h4>
+        <OLRow>
+          <OLCol lg={{ span: 10, offset: 1 }}>
+            <ul className="list-unstyled">
+              {[
+                t('track_any_change_in_real_time'),
+                t('review_your_peers_work'),
+                t('accept_or_reject_each_changes_individually'),
+              ].map(translation => (
+                <li key={translation}>
+                  <MaterialIcon type="check" className="align-text-bottom" />
+                  &nbsp;{translation}
+                </li>
+              ))}
+            </ul>
+          </OLCol>
+        </OLRow>
+        <p className="small">
+          {t('already_subscribed_try_refreshing_the_page')}
+        </p>
+        {project.owner && (
+          <div className="text-center">
+            {project.owner._id === user.id ? (
+              user.allowedFreeTrial ? (
+                <OLButton
+                  variant="primary"
+                  onClick={() => startFreeTrial('track-changes')}
+                >
+                  {t('try_it_for_free')}
+                </OLButton>
+              ) : (
+                <OLButton
+                  variant="primary"
+                  onClick={() => upgradePlan('project-sharing')}
+                >
+                  {t('upgrade')}
+                </OLButton>
+              )
+            ) : (
+              <p>
+                <strong>
+                  {t(
+                    'please_ask_the_project_owner_to_upgrade_to_track_changes'
+                  )}
+                </strong>
+              </p>
+            )}
+          </div>
+        )}
+      </OLModalBody>
+      <OLModalFooter>
+        <OLButton variant="secondary" onClick={() => setShow(false)}>
+          {t('close')}
+        </OLButton>
+      </OLModalFooter>
+    </OLModal>
+  )
+}
+
+export default memo(UpgradeTrackChangesModalLegacy)

services/web/frontend/js/features/review-panel-new/components/upgrade-track-changes-modal.tsx

@@ -32,9 +32,9 @@ function UpgradeTrackChangesModal({
   return (
     <OLModal show={show} onHide={() => setShow(false)}>
       <OLModalHeader closeButton>
-        <OLModalTitle>{t('upgrade_to_track_changes')}</OLModalTitle>
+        <OLModalTitle>{t('upgrade_to_review')}</OLModalTitle>
       </OLModalHeader>
-      <OLModalBody>
+      <OLModalBody className="upgrade-track-changes-modal">
         <div className="teaser-video-container">
           {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
           <video className="teaser-video" autoPlay loop>
@@ -45,41 +45,36 @@ function UpgradeTrackChangesModal({
             />
           </video>
         </div>
-        <h4 className="teaser-title">
-          {t('see_changes_in_your_documents_live')}
-        </h4>
+        <h4 className="teaser-title">{t('get_real_time_track_changes')}</h4>
         <OLRow>
           <OLCol lg={{ span: 10, offset: 1 }}>
             <ul className="list-unstyled">
               {[
-                t('track_any_change_in_real_time'),
-                t('review_your_peers_work'),
-                t('accept_or_reject_each_changes_individually'),
+                t('see_suggestions_from_collaborators'),
+                t('accept_or_reject_individual_edits'),
+                t('access_all_premium_features'),
               ].map(translation => (
                 <li key={translation}>
-                  <MaterialIcon type="check" className="align-text-bottom" />
-                  &nbsp;{translation}
+                  <MaterialIcon type="check" className="check-icon" />
+                  <span>{translation}</span>
                 </li>
               ))}
             </ul>
           </OLCol>
         </OLRow>
-        <p className="small">
-          {t('already_subscribed_try_refreshing_the_page')}
-        </p>
         {project.owner && (
           <div className="text-center">
             {project.owner._id === user.id ? (
               user.allowedFreeTrial ? (
                 <OLButton
-                  variant="primary"
+                  variant="premium"
                   onClick={() => startFreeTrial('track-changes')}
                 >
                   {t('try_it_for_free')}
                 </OLButton>
               ) : (
                 <OLButton
-                  variant="primary"
+                  variant="premium"
                   onClick={() => upgradePlan('project-sharing')}
                 >
                   {t('upgrade')}

services/web/frontend/stylesheets/bootstrap-5/components/modal.scss

@@ -85,3 +85,26 @@
 .git-bridge-optional-tokens-actions {
   margin-top: var(--spacing-05);
 }
+
+.upgrade-track-changes-modal {
+  .teaser-title {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-05);
+    margin-bottom: var(--spacing-05);
+    margin-top: var(--spacing-05);
+    color: var(--content-secondary);
+  }
+
+  ul.list-unstyled li {
+    font-family: var(--font-sans);
+    padding: var(--spacing-02) 0;
+    color: var(--content-secondary);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-04);
+  }
+
+  ul.list-unstyled li .check-icon {
+    padding-top: 2px;
+  }
+}

services/web/locales/en.json

@@ -43,10 +43,12 @@
   "accept_change_error_title": "Accept Change Error",
   "accept_invitation": "Accept invitation",
   "accept_or_reject_each_changes_individually": "Accept or reject each change individually",
+  "accept_or_reject_individual_edits": "Accept or reject individual edits",
   "accept_selected_changes": "Accept selected changes",
   "accept_terms_and_conditions": "Accept terms and conditions",
   "accepted_invite": "Accepted invite",
   "accepting_invite_as": "You are accepting this invite as",
+  "access_all_premium_features": "Access all premium features, including more collaborators, full project history, and a longer compile time.",
   "access_denied": "Access Denied",
   "access_edit_your_projects": "Access and edit your projects",
   "access_levels_changed": "Access levels changed",
@@ -804,6 +806,7 @@
   "get_in_touch_having_problems": "<a href=\"__link__\">Get in touch with support</a> if you’re having problems",
   "get_involved": "Get involved",
   "get_most_subscription_discover_premium_features": "Get the most from your __appName__ subscription. <0>Discover premium features</0>.",
+  "get_real_time_track_changes": "Get real-time track changes",
   "get_the_best_overleaf_experience": "Get the best Overleaf experience",
   "get_the_most_out_headline": "Get the most out of __appName__ with features such as:",
   "git": "Git",
@@ -1894,6 +1897,7 @@
   "secondary_email_password_reset": "That email is registered as a secondary email. Please enter the primary email for your account.",
   "security": "Security",
   "see_changes_in_your_documents_live": "See changes in your documents, live",
+  "see_suggestions_from_collaborators": "See suggestions from collaborators",
   "select_a_column_or_a_merged_cell_to_align": "Select a column or a merged cell to align",
   "select_a_column_to_adjust_column_width": "Select a column to adjust column width",
   "select_a_file": "Select a File",
@@ -2431,6 +2435,7 @@
   "upgrade_summary": "Upgrade summary",
   "upgrade_to_add_more_editors_and_access_collaboration_features": "Upgrade to add more editors and access collaboration features like track changes and full project history.",
   "upgrade_to_get_feature": "Upgrade to get __feature__, plus:",
+  "upgrade_to_review": "Upgrade to Review",
   "upgrade_to_track_changes": "Upgrade to track changes",
   "upgrade_to_unlock_more_time": "Upgrade now to unlock 12x more compile time on our fastest servers.",
   "upgrade_your_subscription": "Upgrade your subscription",