Onboarding data collection form (#15164)

* onboarding data collection react

* added stepper component

* stepper completed step

* move useValidateField to shared

* Revert "move useValidateField to shared"

This reverts commit 68fafd934dafedab8d61f581beb7bfdd8a0674c0.

* added multistep hook

* add story

* fix storybook

* img path

* remove pug page

* formatting

* using translations

* formating

* linting

* use small classname

* Onboarding data collection form - Step 2 (#15182)

* step 2 of onbarding data collection form

* sort locals

* styling changes

* checkbox font size

* aria-progressbar, bsStyle=null

GitOrigin-RevId: 9ee84b4631b30b670280cfa2086385274652b21e

services/web/frontend/extracted-translations.json

@@ -687,6 +687,7 @@
   "n_more_updates_below": "",
   "n_more_updates_below_plural": "",
   "name": "",
+  "name_usage_explanation": "",
   "navigate_log_source": "",
   "navigation": "",
   "need_anything_contact_us_at": "",
@@ -708,6 +709,7 @@
   "new_tag_name": "",
   "new_to_latex_look_at": "",
   "newsletter": "",
+  "newsletter_onboarding_accept": "",
   "next_payment_of_x_collectected_on_y": "",
   "no_actions": "",
   "no_borders": "",
@@ -1273,6 +1275,10 @@
   "url_to_fetch_the_file_from": "",
   "use_a_different_password": "",
   "use_your_own_machine": "",
+  "used_latex_before": "",
+  "used_latex_response_never": "",
+  "used_latex_response_occasionally": "",
+  "used_latex_response_often": "",
   "used_when_referring_to_the_figure_elsewhere_in_the_document": "",
   "user_deletion_error": "",
   "user_deletion_password_reset_tip": "",
@@ -1302,18 +1308,21 @@
   "visual_editor_is_only_available_for_tex_files": "",
   "want_change_to_apply_before_plan_end": "",
   "we_cant_find_any_sections_or_subsections_in_this_file": "",
+  "we_do_not_share_personal_information": "",
   "we_logged_you_in": "",
   "wed_love_you_to_stay": "",
   "welcome_to_sl": "",
   "what_does_this_mean": "",
   "what_does_this_mean_for_you": "",
   "what_happens_when_sso_is_enabled": "",
+  "what_should_we_call_you": "",
   "when_you_tick_the_include_caption_box": "",
   "wide": "",
   "with_premium_subscription_you_also_get": "",
   "word_count": "",
   "work_offline": "",
   "work_with_non_overleaf_users": "",
+  "would_you_like_to_receive_newsletter": "",
   "x_changes_in": "",
   "x_changes_in_plural": "",
   "x_price_for_first_month": "",

services/web/frontend/js/shared/components/stepper.tsx

@@ -0,0 +1,23 @@
+import classNames from 'classnames'
+
+export function Stepper({ steps, active }: { steps: number; active: number }) {
+  return (
+    <div
+      className="stepper"
+      role="progressbar"
+      aria-valuenow={active + 1}
+      aria-valuemax={steps}
+    >
+      {Array.from({ length: steps }).map((_, i) => (
+        <div
+          key={i}
+          className={classNames({
+            step: true,
+            active: i === active,
+            completed: i < active,
+          })}
+        />
+      ))}
+    </div>
+  )
+}

services/web/frontend/stylesheets/_style_includes.less

@@ -65,6 +65,7 @@
 @import 'components/divider.less';
 @import 'components/split-menu.less';
 @import 'components/group-members.less';
+@import 'components/stepper.less';
 
 // Components w/ JavaScript
 @import 'components/modals.less';
@@ -118,3 +119,4 @@
 @import 'modules/managed-users.less';
 
 @import 'modules/admin-panel.less';
+@import 'modules/overleaf-integration.less';

services/web/frontend/stylesheets/components/stepper.less

@@ -0,0 +1,18 @@
+.stepper {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+  height: 6px;
+
+  .step {
+    width: 100%;
+    border-radius: 6px;
+    background: @neutral-20;
+  }
+  .step.completed {
+    background: @green;
+  }
+  .step.active {
+    background: @green-20;
+  }
+}

services/web/frontend/stylesheets/main-style.less

@@ -76,6 +76,7 @@
 @import 'components/select.less';
 @import 'components/switch.less';
 @import 'components/switcher.less';
+@import 'components/stepper.less';
 
 // Components w/ JavaScript
 @import 'components/modals.less';
@@ -148,3 +149,4 @@
 @import 'modules/symbol-palette.less';
 @import 'modules/admin-panel.less';
 @import 'modules/managed-users.less';
+@import 'modules/overleaf-integration.less';

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

@@ -0,0 +1,70 @@
+#onboarding-data-collection {
+  width: 720px;
+  padding: 24px;
+  margin: 0 auto;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  p {
+    font-size: 20px;
+    margin-bottom: 5px;
+  }
+
+  .logo {
+    width: 130px;
+    margin: 0 auto;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    .group-horizontal {
+      display: flex;
+      justify-content: stretch;
+      gap: 24px;
+
+      .form-group {
+        flex-grow: 1;
+      }
+    }
+
+    .form-actions {
+      display: flex;
+      justify-content: space-between;
+
+      > div {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        button.btn-info-ghost {
+          color: @gray-dark;
+        }
+      }
+    }
+  }
+
+  .onboarding-step-2 {
+    .checkbox {
+      margin: 0;
+
+      p {
+        margin-bottom: 0;
+      }
+
+      label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        input {
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+}

services/web/locales/en.json

@@ -1083,6 +1083,7 @@
   "n_more_updates_below": "__count__ more update below",
   "n_more_updates_below_plural": "__count__ more updates below",
   "name": "Name",
+  "name_usage_explanation": "Your name will be displayed to your collaborators (so they know who they’re working with).",
   "native": "Native",
   "navigate_log_source": "Navigate to log position in source code: __location__",
   "navigation": "Navigation",
@@ -1114,6 +1115,7 @@
   "newsletter_info_summary": "Every few months we send a newsletter out summarizing the new features available.",
   "newsletter_info_title": "Newsletter Preferences",
   "newsletter_info_unsubscribed": "You are currently <0>unsubscribed</0> to the __appName__ newsletter.",
+  "newsletter_onboarding_accept": "Yes, I’d like to get relevant help resources, news, and feature updates.",
   "next_payment_of_x_collectected_on_y": "The next payment of <0>__paymentAmmount__</0> will be collected on <1>__collectionDate__</1>.",
   "nl": "Dutch",
   "no": "Norwegian",
@@ -1926,6 +1928,10 @@
   "usage_metrics_info": "Metrics that show how many users are accessing the licence, how many projects are being created and worked on, and how much collaboration is happening in Overleaf.",
   "use_a_different_password": "Please use a different password",
   "use_your_own_machine": "Use your own machine, with your own setup",
+  "used_latex_before": "Have you ever used LaTeX before?",
+  "used_latex_response_never": "No, never",
+  "used_latex_response_occasionally": "Yes, occasionally",
+  "used_latex_response_often": "Yes, very often",
   "used_when_referring_to_the_figure_elsewhere_in_the_document": "Used when referring to the figure elsewhere in the document",
   "user_already_added": "User already added",
   "user_deletion_error": "Sorry, something went wrong deleting your account. Please try again in a minute.",
@@ -1967,6 +1973,7 @@
   "visual_editor_is_only_available_for_tex_files": "Visual Editor is only available for TeX files",
   "want_change_to_apply_before_plan_end": "If you wish this change to apply before the end of your current billing period, please contact us.",
   "we_cant_find_any_sections_or_subsections_in_this_file": "We can’t find any sections or subsections in this file",
+  "we_do_not_share_personal_information": "We do not share or sell any personal information.",
   "we_logged_you_in": "We have logged you in.",
   "we_may_also_contact_you_from_time_to_time_by_email_with_a_survey": "<0>We may also contact you</0> from time to time by email with a survey, or to see if you would like to participate in other user research initiatives",
   "webinars": "Webinars",
@@ -1976,6 +1983,7 @@
   "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?",
+  "what_should_we_call_you": "What should we call you?",
   "when_you_tick_the_include_caption_box": "When you tick the box “Include caption” the image will be inserted into your document with a placeholder caption. To edit it, you simply select the placeholder text and type to replace it with your own.",
   "wide": "Wide",
   "will_need_to_log_out_from_and_in_with": "You will need to <b>log out</b> from your <b>__email1__</b> account and then log in with <b>__email2__</b>.",
@@ -1989,6 +1997,7 @@
   "work_with_non_overleaf_users": "Work with non Overleaf users",
   "work_with_word_users": "Work with Word users",
   "work_with_word_users_blurb": "__appName__ is so easy to get started with that you’ll be able to invite your non-LaTeX colleagues to contribute directly to your LaTeX documents. They’ll be productive from day one and be able to pick up small amounts of LaTeX as they go.",
+  "would_you_like_to_receive_newsletter": "Would you like to receive tailored content from Overleaf?",
   "would_you_like_to_see_a_university_subscription": "Would you like to see a university-wide __appName__ subscription at your university?",
   "x_changes_in": "__count__ change in",
   "x_changes_in_plural": "__count__ changes in",