Merge pull request #15498 from overleaf/rd-input-fields

Onboarding Data Collection (step3)

GitOrigin-RevId: 0e78de5ccb7b7660ab04c904bc2fec4436b36621

services/web/frontend/extracted-translations.json

@@ -450,6 +450,7 @@
   "go_page": "",
   "go_prev_page": "",
   "go_to_code_location_in_pdf": "",
+  "go_to_overleaf": "",
   "go_to_pdf_location_in_code": "",
   "go_to_settings": "",
   "group_admin": "",
@@ -516,6 +517,7 @@
   "how_it_works": "",
   "i_want_to_stay": "",
   "if_you_need_to_customize_your_table_further_you_can": "",
+  "if_your_occupation_not_listed_type_full_name": "",
   "ignore_validation_errors": "",
   "ill_take_it": "",
   "image_file": "",
@@ -789,6 +791,7 @@
   "open_target": "",
   "optional": "",
   "or": "",
+  "organization_name": "",
   "organize_projects": "",
   "other_logs_and_files": "",
   "other_output_files": "",
@@ -856,10 +859,10 @@
   "premium_plan_label": "",
   "price": "",
   "primarily_work_study_question": "",
+  "primarily_work_study_question_company": "",
   "primarily_work_study_question_government": "",
   "primarily_work_study_question_nonprofit_ngo": "",
   "primarily_work_study_question_other": "",
-  "primarily_work_study_question_private_company": "",
   "primarily_work_study_question_university_school": "",
   "priority_support": "",
   "private": "",
@@ -1093,6 +1096,7 @@
   "showing_x_results_of_total": "",
   "signature_algorithm": "",
   "single_sign_on_sso": "",
+  "skip": "",
   "something_not_right": "",
   "something_went_wrong_loading_pdf_viewer": "",
   "something_went_wrong_processing_the_request": "",
@@ -1134,6 +1138,9 @@
   "start_by_adding_your_email": "",
   "start_free_trial": "",
   "start_free_trial_without_exclamation": "",
+  "start_typing_find_your_company": "",
+  "start_typing_find_your_organization": "",
+  "start_typing_find_your_university": "",
   "stop_compile": "",
   "stop_on_first_error": "",
   "stop_on_first_error_enabled_description": "",
@@ -1142,6 +1149,7 @@
   "store_your_work": "",
   "student_disclaimer": "",
   "subject": "",
+  "subject_area": "",
   "subject_to_additional_vat": "",
   "submit_title": "",
   "subscribe": "",
@@ -1150,6 +1158,7 @@
   "subscription_canceled_and_terminate_on_x": "",
   "subscription_will_remain_active_until_end_of_billing_period_x": "",
   "subscription_will_remain_active_until_end_of_trial_period_x": "",
+  "suggested": "",
   "sure_you_want_to_cancel_plan_change": "",
   "sure_you_want_to_change_plan": "",
   "sure_you_want_to_delete": "",
@@ -1300,6 +1309,7 @@
   "understanding_labels": "",
   "unfold_line": "",
   "university": "",
+  "university_school": "",
   "unknown": "",
   "unlimited_collabs": "",
   "unlimited_projects": "",
@@ -1441,6 +1451,7 @@
   "your_project_exceeded_compile_timeout_limit_on_free_plan": "",
   "your_project_near_compile_timeout_limit": "",
   "your_projects": "",
+  "your_role": "",
   "your_subscription": "",
   "your_subscription_has_expired": "",
   "youre_about_to_disable_single_sign_on": "",

services/web/frontend/js/features/settings/components/emails/downshift-input.tsx

@@ -4,10 +4,13 @@ import classnames from 'classnames'
 
 type DownshiftInputProps = {
   items: string[]
+  itemsTitle?: string
   inputValue: string
   label: string
   setValue: React.Dispatch<React.SetStateAction<string>>
   inputRef?: React.ForwardedRef<HTMLInputElement>
+  showLabel?: boolean
+  showSuggestedText?: boolean
 } & React.InputHTMLAttributes<HTMLInputElement>
 
 const filterItemsByInputValue = (
@@ -17,12 +20,15 @@ const filterItemsByInputValue = (
 
 function Downshift({
   items,
+  itemsTitle,
   inputValue,
   placeholder,
   label,
   setValue,
   disabled,
   inputRef,
+  showLabel = false,
+  showSuggestedText = false,
 }: DownshiftInputProps) {
   const [inputItems, setInputItems] = useState(items)
 
@@ -68,7 +74,7 @@ function Downshift({
     >
       <div {...getComboboxProps()}>
         {/* eslint-disable-next-line jsx-a11y/label-has-for */}
-        <label {...getLabelProps()} className="sr-only">
+        <label {...getLabelProps()} className={showLabel ? '' : 'sr-only'}>
           {label}
         </label>
         <input
@@ -93,6 +99,9 @@ function Downshift({
         {...getMenuProps()}
         className="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu"
       >
+        {showSuggestedText && inputItems.length && (
+          <li className="ui-select-title">{itemsTitle}</li>
+        )}
         {inputItems.map((item, index) => (
           <li
             className="ui-select-choices-group"

services/web/frontend/stylesheets/components/radio-chip.less

@@ -3,6 +3,7 @@
   border: 1px solid @neutral-60;
   border-radius: 999px;
   color: @neutral-90;
+  cursor: pointer;
   display: inline-flex;
   font-weight: 400;
   gap: 4px;
@@ -24,6 +25,7 @@
 
   input[type='radio'] {
     accent-color: @green-50;
+    cursor: pointer;
     height: 16px;
     margin: 4px;
     width: 15px;
@@ -39,19 +41,15 @@
   }
 }
 
-.radio-group-col-1 {
-  align-items: flex-start;
+.radio-group {
   display: flex;
   flex-direction: column;
-  gap: 16px;
-}
-
-.radio-group-col-2 {
-  display: grid;
+  flex-wrap: wrap;
   grid-gap: 16px;
-  grid-template-columns: 1fr 1fr;
-
+  height: 180px;
+  width: 100%;
   @media (max-width: @screen-sm-min) {
-    grid-template-columns: 1fr;
+    flex-wrap: nowrap;
+    height: 100%;
   }
 }

services/web/frontend/stylesheets/modules/overleaf-integration.less

@@ -40,6 +40,17 @@
   flex-direction: column;
   gap: 24px;
 
+  .ui-select-container,
+  .select-wrapper {
+    label {
+      font-size: 14px; // override DownshiftInput and Select component label size
+    }
+    .select-trigger {
+      border: 1px solid @neutral-60;
+      color: @neutral-60;
+    }
+  }
+
   .onboarding-question-title {
     font-size: 20px;
   }
@@ -84,7 +95,7 @@
         gap: 8px;
 
         button.btn-info-ghost {
-          color: @gray-dark;
+          color: @neutral-90;
         }
       }
     }

services/web/frontend/stylesheets/vendor/select/select.css

@@ -277,6 +277,11 @@ body > .ui-select-bootstrap.open {
   white-space: nowrap;
 }
 
+.ui-select-title {
+  padding: 3px 20px;
+  font-size: 14px ;
+}
+
 .ui-select-bootstrap .ui-select-choices-row > span:hover, .ui-select-bootstrap .ui-select-choices-row > span:focus {
   text-decoration: none;
   color: #262626;

services/web/locales/en.json

@@ -711,6 +711,7 @@
   "go_prev_page": "Go to Previous Page",
   "go_to_account_settings": "Go to Account Settings",
   "go_to_code_location_in_pdf": "Go to code location in PDF",
+  "go_to_overleaf": "Go to Overleaf",
   "go_to_pdf_location_in_code": "Go to PDF location in code (Tip: double click on the PDF for best results)",
   "go_to_settings": "Go to settings",
   "group_admin": "Group admin",
@@ -797,6 +798,7 @@
   "if_have_existing_can_link": "If you have an existing <b>__appName__</b> account on another email, you can link it to your <b>__institutionName__</b> account by clicking <b>__clickText__</b>.",
   "if_owner_can_link": "If you own the <b>__appName__</b> account with <b>__email__</b>, you will be allowed to link it to your <b>__institutionName__</b> institutional account.",
   "if_you_need_to_customize_your_table_further_you_can": "If you need to customize your table further, you can. Using LaTeX code, you can change anything from table styles and border styles to colors and column widths. <0>Read our guide</0> to using tables in LaTeX to help you get started.",
+  "if_your_occupation_not_listed_type_full_name": "If your __occupation__ isn’t listed, you can type the full name.",
   "ignore_and_continue_institution_linking": "You can also ignore this and <a href=\"__link__\">continue to __appName__ with your <b>__email__</b> account</a>.",
   "ignore_validation_errors": "Don’t check syntax",
   "ill_take_it": "I’ll take it!",
@@ -1222,6 +1224,7 @@
   "optional": "Optional",
   "or": "or",
   "organization": "Organization",
+  "organization_name": "Organization name",
   "organization_type": "Organization Type",
   "organize_projects": "Organize Projects",
   "other_actions": "Other Actions",
@@ -1332,11 +1335,11 @@
   "press_and_awards": "Press &amp; awards",
   "price": "Price",
   "primarily_work_study_question": "Where do you primarily work or study?",
-  "primarily_work_study_question_government": "In the government",
-  "primarily_work_study_question_nonprofit_ngo": "In a nonprofit/NGO",
+  "primarily_work_study_question_company": "Company",
+  "primarily_work_study_question_government": "Government",
+  "primarily_work_study_question_nonprofit_ngo": "Nonprofit or NGO",
   "primarily_work_study_question_other": "Other",
-  "primarily_work_study_question_private_company": "In a private company",
-  "primarily_work_study_question_university_school": "In a university or school",
+  "primarily_work_study_question_university_school": "University or school",
   "primary_email_check_question": "Is <0>__email__</0> still your email address?",
   "priority_support": "Priority support",
   "priority_support_info": "Our helpful Support team will prioritise and escalate your support requests where necessary.",
@@ -1705,6 +1708,9 @@
   "start_by_adding_your_email": "Start by adding your email address.",
   "start_free_trial": "Start Free Trial!",
   "start_free_trial_without_exclamation": "Start Free Trial",
+  "start_typing_find_your_company": " Start typing to find your company",
+  "start_typing_find_your_organization": "Start typing to find your organization",
+  "start_typing_find_your_university": "Start typing to find your university",
   "start_using_latex_now": "start using LaTeX right now",
   "start_using_sl_now": "Start using __appName__ now",
   "state": "State",
@@ -1721,6 +1727,7 @@
   "student_disclaimer": "The educational discount applies to all students at secondary and postsecondary institutions (schools and universities). We may contact you to confirm that you’re eligible for the discount.",
   "student_plans": "Student Plans",
   "subject": "Subject",
+  "subject_area": "Subject area",
   "subject_to_additional_vat": "Prices may be subject to additional VAT, depending on your country.",
   "submit": "submit",
   "submit_title": "Submit",
@@ -1732,6 +1739,7 @@
   "subscription_canceled_and_terminate_on_x": " Your subscription has been canceled and will terminate on <0>__terminateDate__</0>. No further payments will be taken.",
   "subscription_will_remain_active_until_end_of_billing_period_x": "Your subscription will remain active until the end of your billing period, <0>__terminationDate__</0>.",
   "subscription_will_remain_active_until_end_of_trial_period_x": "Your subscription will remain active until the end of your trial period, <0>__terminationDate__</0>.",
+  "suggested": "Suggested",
   "suggestion": "Suggestion",
   "support_lots_of_features": "We support almost all LaTeX features, including inserting images, bibliographies, equations, and much more! Read about all the exciting things you can do with __appName__ in our <0>__help_guides_link__</0>",
   "sure_you_want_to_cancel_plan_change": "Are you sure you want to revert your scheduled plan change? You will remain subscribed to the <0>__planName__</0> plan.",
@@ -1929,6 +1937,7 @@
   "understanding_labels": "Understanding labels",
   "unfold_line": "Unfold line",
   "university": "University",
+  "university_school": "University or school name",
   "unknown": "Unknown",
   "unlimited": "Unlimited",
   "unlimited_bold": "<0>Unlimited</0>",
@@ -2126,6 +2135,7 @@
   "your_project_exceeded_compile_timeout_limit_on_free_plan": "Your project exceeded the compile timeout limit on our free plan.",
   "your_project_near_compile_timeout_limit": "Your project is near the compile timeout limit for our free plan.",
   "your_projects": "Your Projects",
+  "your_role": "Your role",
   "your_sessions": "Your Sessions",
   "your_subscription": "Your Subscription",
   "your_subscription_has_expired": "Your subscription has expired.",

services/web/test/acceptance/src/mocks/MockV1Api.js

@@ -313,18 +313,32 @@ class MockV1Api extends AbstractMockApi {
     })
 
     this.app.get('/universities/list', (req, res) => {
+      const response = []
+
+      const university1 = {
+        id: 1337,
+        name: 'Institution 1337',
+        country_code: 'en',
+        departments: [],
+      }
+
+      const university2 = {
+        id: 243,
+        name: 'Institution 243',
+        country_code: 'en',
+        departments: [],
+      }
+
       if (req.query.country_code === 'en') {
-        res.json([
-          {
-            id: 1337,
-            name: 'Institution 1337',
-            country_code: 'en',
-            departments: [],
-          },
-        ])
-      } else {
-        res.json([])
+        response.push(university1)
+      }
+      if (req.query.search === 'Institution') {
+        response.push(university1)
+        if (req.query.max_results !== '1') {
+          response.push(university2)
+        }
       }
+      res.json(response)
     })
 
     this.app.get('/universities/list/:id', (req, res) =>