Merge pull request #18095 from overleaf/mf-general-contact-form-redesign

[web][website-redesign] General contact form redesign

GitOrigin-RevId: f5f3a37fea69afb48a37b263695c958e6753e095

services/web/frontend/extracted-translations.json

@@ -212,7 +212,6 @@
   "connected_users": "",
   "connection_lost": "",
   "contact_group_admin": "",
-  "contact_message_label": "",
   "contact_sales": "",
   "contact_support_to_change_group_subscription": "",
   "contact_us": "",
@@ -443,6 +442,7 @@
   "get_full_project_history": "",
   "get_git_integration": "",
   "get_github_sync": "",
+  "get_in_touch": "",
   "get_more_compile_time": "",
   "get_most_subscription_by_checking_features": "",
   "get_symbol_palette": "",
@@ -673,6 +673,7 @@
   "left": "",
   "length_unit": "",
   "let_us_know": "",
+  "let_us_know_how_we_can_help": "",
   "library": "",
   "license_for_educational_purposes": "",
   "limited_offer": "",
@@ -708,6 +709,7 @@
   "log_in_with_primary_email_address": "",
   "log_out_lowercase_dot": "",
   "log_viewer_error": "",
+  "logging_in_or_managing_your_account": "",
   "login_count": "",
   "login_to_accept_invitation": "",
   "login_with_service": "",
@@ -744,6 +746,7 @@
   "managed_users_is_enabled": "",
   "managed_users_terms": "",
   "managers_management": "",
+  "managing_your_subscription": "",
   "mark_as_resolved": "",
   "math_display": "",
   "math_inline": "",
@@ -855,6 +858,7 @@
   "or": "",
   "organization_name": "",
   "organize_projects": "",
+  "other": "",
   "other_logs_and_files": "",
   "other_output_files": "",
   "out_of_sync": "",
@@ -911,6 +915,7 @@
   "please_reconfirm_institutional_email": "",
   "please_reconfirm_your_affiliation_before_making_this_primary": "",
   "please_refresh": "",
+  "please_select": "",
   "please_select_a_file": "",
   "please_select_a_project": "",
   "please_select_an_output_file": "",
@@ -1142,6 +1147,7 @@
   "selected": "",
   "selection_deleted": "",
   "send_first_message": "",
+  "send_message": "",
   "sending": "",
   "sent": "",
   "server_error": "",
@@ -1491,6 +1497,9 @@
   "user_first_name_attribute": "",
   "user_last_name_attribute": "",
   "user_sessions": "",
+  "using_latex": "",
+  "using_premium_features": "",
+  "using_the_overleaf_editor": "",
   "valid": "",
   "valid_sso_configuration": "",
   "validation_issue_entry_description": "",
@@ -1526,6 +1535,7 @@
   "were_performing_maintenance": "",
   "weve_recently_reduced_the_compile_timeout_limit_which_may_have_affected_this_project": "",
   "weve_recently_reduced_the_compile_timeout_limit_which_may_have_affected_your_project": "",
+  "what_do_you_need_help_with": "",
   "what_does_this_mean": "",
   "what_does_this_mean_for_you": "",
   "what_happens_when_sso_is_enabled": "",

services/web/frontend/js/features/contact-form/index.js

@@ -21,3 +21,15 @@ document
       $('[data-ol-contact-form-modal="general"]').modal()
     })
   })
+
+document.querySelectorAll('[data-ol-contact-form').forEach(el => {
+  el.addEventListener('submit', function (e) {
+    const emailValue = document.querySelector(
+      '[data-ol-contact-form-email-input]'
+    ).value
+    const thankYouEmailEl = document.querySelector(
+      '[data-ol-contact-form-thank-you-email]'
+    )
+    thankYouEmailEl.textContent = emailValue
+  })
+})

services/web/frontend/stylesheets/app/cms-page.less

@@ -7,6 +7,7 @@
   &.website-redesign {
     h1 {
       font-size: 2rem; // 32px
+      line-height: 1.333;
     }
 
     h2 {
@@ -455,6 +456,58 @@
   padding-bottom: @padding-xxl;
 }
 
+@media (min-width: @screen-sm-min) {
+  .desktop-left-margin-sm {
+    margin-left: @margin-sm;
+  }
+  .desktop-left-margin-md {
+    margin-left: @margin-md;
+  }
+  .desktop-left-margin-lg {
+    margin-left: @margin-lg;
+  }
+  .desktop-left-margin-xl {
+    margin-left: @margin-xl;
+  }
+  .desktop-left-margin-xxl {
+    margin-left: @margin-xxl;
+  }
+
+  .desktop-right-margin-sm {
+    margin-right: @margin-sm;
+  }
+  .desktop-right-margin-md {
+    margin-right: @margin-md;
+  }
+  .desktop-right-margin-lg {
+    margin-right: @margin-lg;
+  }
+  .desktop-right-margin-xl {
+    margin-right: @margin-xl;
+  }
+  .desktop-right-margin-xxl {
+    margin-right: @margin-xxl;
+  }
+}
+
+@media (max-width: @screen-xs-max) {
+  .mobile-bottom-margin-sm {
+    margin-bottom: @margin-sm;
+  }
+  .mobile-bottom-margin-md {
+    margin-bottom: @margin-md;
+  }
+  .mobile-bottom-margin-lg {
+    margin-bottom: @margin-lg;
+  }
+  .mobile-bottom-margin-xl {
+    margin-bottom: @margin-xl;
+  }
+  .mobile-bottom-margin-xxl {
+    margin-bottom: @margin-xxl;
+  }
+}
+
 @media (max-width: @screen-sm-min) {
   .col-xs-padding-sm {
     .col-xs-12:not(:first-child) {

services/web/locales/en.json

@@ -663,6 +663,7 @@
   "get_full_project_history": "Get full project history",
   "get_git_integration": "Get Git integration",
   "get_github_sync": "Get GitHub Sync",
+  "get_in_touch": "Get in touch",
   "get_in_touch_having_problems": "<a href=\"__link__\">Get in touch with support</a> if you’re having problems",
   "get_involved": "Get involved",
   "get_more_compile_time": "Get more compile time",
@@ -984,6 +985,7 @@
   "left": "Left",
   "length_unit": "Length unit",
   "let_us_know": "Let us know",
+  "let_us_know_how_we_can_help": "Let us know how we can help",
   "let_us_know_what_you_think": "Let us know what you think",
   "library": "Library",
   "license": "License",
@@ -1040,6 +1042,7 @@
   "log_viewer_error": "There was a problem displaying this project’s compilation errors and logs.",
   "logged_in_with_email": "You are currently logged in to <b>__appName__</b> with the email <b>__email__</b>.",
   "logging_in": "Logging in",
+  "logging_in_or_managing_your_account": "Logging in or managing your account",
   "login": "Login",
   "login_count": "Login count",
   "login_error": "Login error",
@@ -1090,6 +1093,7 @@
   "managers_cannot_remove_admin": "Admins cannot be removed",
   "managers_cannot_remove_self": "Managers cannot remove themselves",
   "managers_management": "Managers management",
+  "managing_your_subscription": "Managing your subscription",
   "march": "March",
   "mark_as_resolved": "Mark as resolved",
   "math_display": "Math Display",
@@ -1252,6 +1256,7 @@
   "organization_name": "Organization name",
   "organization_type": "Organization Type",
   "organize_projects": "Organize Projects",
+  "other": "Other",
   "other_actions": "Other Actions",
   "other_logs_and_files": "Other logs and files",
   "other_output_files": "Download other output files",
@@ -1341,6 +1346,7 @@
   "please_reconfirm_your_affiliation_before_making_this_primary": "Please confirm your affiliation before making this the primary.",
   "please_refresh": "Please refresh the page to continue.",
   "please_request_a_new_password_reset_email_and_follow_the_link": "Please request a new password reset email and follow the link",
+  "please_select": "Please select",
   "please_select_a_file": "Please Select a File",
   "please_select_a_project": "Please Select a Project",
   "please_select_an_output_file": "Please Select an Output File",
@@ -1648,6 +1654,7 @@
   "selection_deleted": "Selection deleted",
   "send": "Send",
   "send_first_message": "Send your first message to your collaborators",
+  "send_message": "Send message",
   "send_test_email": "Send a test email",
   "sending": "Sending",
   "sent": "Sent",
@@ -2092,6 +2099,9 @@
   "user_not_found": "User not found",
   "user_sessions": "User Sessions",
   "user_wants_you_to_see_project": "__username__ would like you to join __projectname__",
+  "using_latex": "Using LaTeX",
+  "using_premium_features": "Using premium features",
+  "using_the_overleaf_editor": "Using the __appName__ Editor",
   "valid": "Valid",
   "valid_sso_configuration": "Valid SSO configuration",
   "validation_issue_entry_description": "A validation issue which prevented this project from compiling",
@@ -2132,6 +2142,7 @@
   "were_performing_maintenance": "We’re performing maintenance on Overleaf and you need to wait a moment. Sorry for any inconvenience. The editor will refresh automatically in __seconds__ seconds.",
   "weve_recently_reduced_the_compile_timeout_limit_which_may_have_affected_this_project": "We’ve recently <0>reduced the compile timeout limit</0> on our free plan, which may have affected this project.",
   "weve_recently_reduced_the_compile_timeout_limit_which_may_have_affected_your_project": "We’ve recently <0>reduced the compile timeout limit</0> on our free plan, which may have affected your project.",
+  "what_do_you_need_help_with": "What do you need help with?",
   "what_does_this_mean": "What does this mean?",
   "what_does_this_mean_for_you": "This means:",
   "what_happens_when_sso_is_enabled": "What happens when SSO is enabled?",

services/web/test/frontend/features/editor-left-menu/components/help-contact-us.test.jsx

@@ -25,7 +25,7 @@ describe('<HelpContactUs />', function () {
     expect(screen.queryByRole('dialog')).to.equal(null)
     fireEvent.click(screen.getByRole('button', { name: 'Contact Us' }))
     const modal = screen.getAllByRole('dialog')[0]
-    within(modal).getAllByText('Contact Us')
+    within(modal).getAllByText('Get in touch')
     within(modal).getByText('Subject')
   })
 })