Merge pull request #30150 from overleaf/td-ciam-welcome-storybook

Add CIAM welcome interstitial page

GitOrigin-RevId: 6d333b4d3256e6af2604fbf6363bce7079c4c1ab

package-lock.json

@@ -38101,6 +38101,27 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lottie-react": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.4.1.tgz",
+      "integrity": "sha512-LQrH7jlkigIIv++wIyrOYFLHSKQpEY4zehPicL9bQsrt1rnoKRYCYgpCUe5maqylNtacy58/sQDZTkwMcTRxZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lottie-web": "^5.10.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/lottie-web": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.13.0.tgz",
+      "integrity": "sha512-+gfBXl6sxXMPe8tKQm7qzLnUy5DUPJPKIyRHwtpCpyUEYjHYRJC/5gjUvdkuO2c3JllrPtHXH5UJJK8LRYl5yQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/loupe": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz",
@@ -57107,6 +57128,7 @@
         "jsdom-global": "^3.0.2",
         "katex": "^0.16.25",
         "knip": "^5.64.1",
+        "lottie-react": "^2.4.1",
         "match-sorter": "^6.2.0",
         "mathjax": "^3.2.2",
         "mediatr-ts": "^2.0.1",

services/web/.prettierignore

@@ -37,3 +37,4 @@ modules/two-factor-authentication/app/views/_mixins.pug
 # minified files
 app/views/_google_analytics.pug
 app/views/_customer_io.pug
+frontend/js/shared/lottie/**

services/web/frontend/extracted-translations.json

@@ -1330,6 +1330,7 @@
   "po_number_must_not_exceed_x_characters": "",
   "po_number_must_not_exceed_x_characters_plural": "",
   "postal_code": "",
+  "powered_by_digital_science": "",
   "premium": "",
   "premium_feature": "",
   "premium_plan_label": "",
@@ -1673,6 +1674,8 @@
   "simplified_working_starts_here": "",
   "single_sign_on_sso": "",
   "size": "",
+  "skip": "",
+  "skip_welcome_animation": "",
   "something_not_right": "",
   "something_went_wrong": "",
   "something_went_wrong_canceling_your_subscription": "",
@@ -1862,6 +1865,7 @@
   "the_following_files_and_folders_already_exist_in_this_project": "",
   "the_following_folder_already_exists_in_this_project": "",
   "the_following_folder_already_exists_in_this_project_plural": "",
+  "the_home_of_research_writing": "",
   "the_latex_engine_used_for_compiling": "",
   "the_new_and_improved_overleaf_editor_design": "",
   "the_new_overleaf_editor_info": "",
@@ -2192,6 +2196,7 @@
   "webinars": "",
   "website_status": "",
   "wed_love_you_to_stay": "",
+  "welcome_to_overleaf_opening_workspace": "",
   "welcome_to_sl": "",
   "well_be_here_when_youre_ready": "",
   "were_making_some_changes_to_project_sharing_this_means_you_will_be_visible": "",

services/web/frontend/stylesheets/ciam/ciam-onboarding.scss

@@ -52,3 +52,53 @@ details.ciam-onboarding-privacy {
     @include ds-body-sm-regular;
   }
 }
+
+.ciam-welcome-interstitial {
+  @include full-height-stacked-page;
+
+  background-color: var(--ds-color-white);
+  align-items: center;
+  justify-content: space-around;
+  overflow-y: auto;
+  padding: var(--ds-spacing-800) 0;
+
+  main {
+    @include ciam-vertically-spaced;
+
+    text-align: center;
+  }
+
+  .ciam-welcome-logo {
+    height: 70px;
+    background: url(../../../public/img/ol-brand/overleaf-o.svg) center
+      no-repeat;
+    background-size: contain;
+  }
+
+  h1 {
+    padding-top: var(--ds-spacing-400);
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .ciam-welcome-animation {
+    margin: 0 auto;
+  }
+
+  .ciam-welcome-message {
+    @include ds-heading-sm-regular;
+
+    margin: 0;
+    padding: var(--ds-spacing-400) 0;
+  }
+
+  .ciam-welcome-ds-logo {
+    height: 28px;
+  }
+
+  .ciam-welcome-skip {
+    margin-top: var(--ds-spacing-1000);
+  }
+}

services/web/frontend/stylesheets/ds/components/selection-group.scss

@@ -21,7 +21,8 @@
   border-radius: var(--ds-border-radius-200);
   cursor: pointer;
 
-  &:has(input:checked) {
+  &:has(input:checked),
+  &:hover {
     border-color: var(--ds-color-neutral-950);
     background-color: var(--ds-color-neutral-50);
   }

services/web/locales/en.json

@@ -1742,6 +1742,7 @@
   "portal_add_affiliation_to_join": "It looks like you are already logged in to __appName__. If you have a __portalTitle__ email you can add it now.",
   "position": "Position",
   "postal_code": "Postal code",
+  "powered_by_digital_science": "Powered by <0>Digital Science</0>.",
   "premium": "Premium",
   "premium_feature": "Premium feature",
   "premium_plan_label": "You’re using <b>Overleaf Premium</b>",
@@ -2157,6 +2158,7 @@
   "size": "Size",
   "skip": "Skip",
   "skip_to_content": "Skip to content",
+  "skip_welcome_animation": "Skip animation and continue",
   "solutions": "Solutions",
   "something_not_right": "Something’s not right",
   "something_went_wrong": "Something went wrong",
@@ -2384,6 +2386,7 @@
   "the_following_files_and_folders_already_exist_in_this_project": "The following files and folders already exist in this project:",
   "the_following_folder_already_exists_in_this_project": "The following folder already exists in this project:",
   "the_following_folder_already_exists_in_this_project_plural": "The following folders already exist in this project:",
+  "the_home_of_research_writing": "The home of research writing.",
   "the_latex_engine_used_for_compiling": "The LaTeX engine used for compiling",
   "the_new_and_improved_overleaf_editor_design": "The new and improved __appName__ editor design brings you a cleaner, less cluttered interface to help you focus on what matters—your work.",
   "the_new_overleaf_editor_info": "__appName__’s new look is here. Disabling this option will switch you back to the old editor design.",
@@ -2748,6 +2751,7 @@
   "webinars": "Webinars",
   "website_status": "Website status",
   "wed_love_you_to_stay": "We’d love you to stay",
+  "welcome_to_overleaf_opening_workspace": "Welcome to Overleaf. Opening your workspace.",
   "welcome_to_sl": "Welcome to __appName__",
   "well_be_here_when_youre_ready": "We’ll be here when you’re ready to dive back in! 🦆",
   "were_making_some_changes_to_project_sharing_this_means_you_will_be_visible": "We’re making some <0>changes to project sharing</0>. This means, as someone with edit access, your name and email address will be visible to the project owner and other editors.",

services/web/package.json

@@ -346,6 +346,7 @@
     "jsdom-global": "^3.0.2",
     "katex": "^0.16.25",
     "knip": "^5.64.1",
+    "lottie-react": "^2.4.1",
     "match-sorter": "^6.2.0",
     "mathjax": "^3.2.2",
     "mediatr-ts": "^2.0.1",

services/web/tsconfig.json

@@ -3,6 +3,7 @@
     "target": "esnext" /* Specify ECMAScript target version */,
     "module": "esnext" /* Specify module code generation */,
     "allowJs": true /* Allow JavaScript files to be compiled. */,
+    "resolveJsonModule": true,
     //    "checkJs": true /* Report errors in .js files. */,
     "jsx": "preserve" /* Specify JSX code generation */,
     "noEmit": true /* Do not emit outputs. */,