agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-14 06:03:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update track changes paywall modal (#24620)

Browse Source 
* Update track changes paywall modal

* update list styling

GitOrigin-RevId: f5eda3a4b19c89105e163c8b5729ebcdd5dca2d0
This commit is contained in:
Domagoj Kriskovic
2025-04-07 08:04:56 +00:00
committed by Copybot
parent 221b5c575b
commit 7084fcf7a7
6 changed files with 154 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/extracted-translations.json
+5
View File
@@ -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
+2 -2
View File
@@ -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
+109
View File
@@ -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
+10 -15
View File
@@ -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
+23
View File
@@ -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
+5
View File
@@ -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",