diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 53330a94ec..44633faea4 100644 --- a/services/web/frontend/extracted-translations.json +++ b/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": "", diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-track-changes-menu-button.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-track-changes-menu-button.tsx index 60657e82d3..f4f3cea7fd 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-track-changes-menu-button.tsx +++ b/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<{ - + ) } diff --git a/services/web/frontend/js/features/review-panel-new/components/upgrade-track-changes-modal-legacy.tsx b/services/web/frontend/js/features/review-panel-new/components/upgrade-track-changes-modal-legacy.tsx new file mode 100644 index 0000000000..ccc5f1d452 --- /dev/null +++ b/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> +} + +function UpgradeTrackChangesModalLegacy({ + show, + setShow, +}: UpgradeTrackChangesModalProps) { + const { t } = useTranslation() + const project = useProjectContext() + const user = useUserContext() + + return ( + setShow(false)}> + + {t('upgrade_to_track_changes')} + + +
+ {/* eslint-disable-next-line jsx-a11y/media-has-caption */} + +
+

+ {t('see_changes_in_your_documents_live')} +

+ + +
    + {[ + t('track_any_change_in_real_time'), + t('review_your_peers_work'), + t('accept_or_reject_each_changes_individually'), + ].map(translation => ( +
  • + +  {translation} +
  • + ))} +
+
+
+

+ {t('already_subscribed_try_refreshing_the_page')} +

+ {project.owner && ( +
+ {project.owner._id === user.id ? ( + user.allowedFreeTrial ? ( + startFreeTrial('track-changes')} + > + {t('try_it_for_free')} + + ) : ( + upgradePlan('project-sharing')} + > + {t('upgrade')} + + ) + ) : ( +

+ + {t( + 'please_ask_the_project_owner_to_upgrade_to_track_changes' + )} + +

+ )} +
+ )} +
+ + setShow(false)}> + {t('close')} + + +
+ ) +} + +export default memo(UpgradeTrackChangesModalLegacy) diff --git a/services/web/frontend/js/features/review-panel-new/components/upgrade-track-changes-modal.tsx b/services/web/frontend/js/features/review-panel-new/components/upgrade-track-changes-modal.tsx index 2c3205d902..4948a00ce3 100644 --- a/services/web/frontend/js/features/review-panel-new/components/upgrade-track-changes-modal.tsx +++ b/services/web/frontend/js/features/review-panel-new/components/upgrade-track-changes-modal.tsx @@ -32,9 +32,9 @@ function UpgradeTrackChangesModal({ return ( setShow(false)}> - {t('upgrade_to_track_changes')} + {t('upgrade_to_review')} - +
{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-

- {t('see_changes_in_your_documents_live')} -

+

{t('get_real_time_track_changes')}

    {[ - 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 => (
  • - -  {translation} + + {translation}
  • ))}
-

- {t('already_subscribed_try_refreshing_the_page')} -

{project.owner && (
{project.owner._id === user.id ? ( user.allowedFreeTrial ? ( startFreeTrial('track-changes')} > {t('try_it_for_free')} ) : ( upgradePlan('project-sharing')} > {t('upgrade')} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss b/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss index 6689bdd0bb..e19e9c249e 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss +++ b/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; + } +} diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 7c40508cd3..20074a55ed 100644 --- a/services/web/locales/en.json +++ b/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": "Get in touch with support 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.", + "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",