Merge pull request #34888 from overleaf/td-onboarding-split-test

Implement onboarding split test

GitOrigin-RevId: bf3675437d7fbbffc9374ffb7c0ba95bbb5ec3b8

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

@@ -213,11 +213,21 @@
   gap: var(--ds-spacing-200);
 
   li {
-    background-image: url('../../../public/img/ciam-check-green.svg');
-    background-repeat: no-repeat;
-    background-position: left center;
-    background-size: 16px 16px;
+    position: relative;
     padding-left: calc(16px + var(--ds-spacing-200));
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 16px;
+      height: 16px;
+      background-color: var(--ds-color-green-500);
+      mask: url('../../../public/img/ciam-check.svg') no-repeat center / 16px
+        16px;
+    }
   }
 }
 

services/web/frontend/stylesheets/ciam/ciam-try-premium.scss

@@ -10,3 +10,40 @@
   width: 36px;
   height: 36px;
 }
+
+.ciam-try-premium-plan-selector {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-400);
+}
+
+.ciam-try-premium-plan-name {
+  @include ds-heading-xs-semibold;
+
+  margin: 0;
+}
+
+.ciam-try-premium-freemium {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-400);
+  padding: 0 0 var(--ds-spacing-400) 0;
+}
+
+.ciam-try-premium-paid-plan {
+  background-color: var(--ds-color-green-100);
+  border-radius: var(--ds-border-radius-200);
+  padding: var(--ds-spacing-600);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-400);
+
+  .ciam-try-premium-logo-container {
+    justify-content: flex-start;
+    gap: var(--ds-spacing-400);
+  }
+
+  .ciam-list-style-check-green li::before {
+    background-color: var(--ds-color-green-600);
+  }
+}

services/web/locales/en.json

@@ -492,6 +492,7 @@
   "continue_github_merge": "I have manually merged. Continue",
   "continue_to": "Continue to __appName__",
   "continue_using_free_features": "Continue using our free features",
+  "continue_with_free": "Continue with Free",
   "continue_with_free_plan": "Continue with free plan",
   "continue_with_service": "Continue with __service__",
   "conversion_error_details": "Conversion error details",
@@ -1012,6 +1013,7 @@
   "git_integration": "Git integration",
   "git_integration_info": "With Git integration, you can clone your Overleaf projects with Git. For full instructions on how to do this, <0>read our Git Integration help page</0>.",
   "github": "GitHub",
+  "github_and_git_integrations": "GitHub and Git integrations",
   "github_commit_message_placeholder": "Commit message for changes made in __appName__...",
   "github_credentials_expired": "Your GitHub authorization credentials have expired",
   "github_empty_repository_error": "It looks like your GitHub repository is empty or not yet available. Create a new file on GitHub.com then try again.",
@@ -2491,6 +2493,7 @@
   "sso_user_explanation_ready_with_admin_email": "Your group administered by <0>__adminEmail__</0> has SSO enabled so you can log in without needing to remember a password. Click <1>__buttonText__</1> to get started.",
   "sso_user_explanation_ready_with_group_name": "Your group <0>__groupName__</0> has SSO enabled so you can log in without needing to remember a password. Click <1>__buttonText__</1> to get started.",
   "standard": "Standard",
+  "start_7_day_trial": "Start 7-day trial",
   "start_by_adding_your_email": "Start by adding your email address.",
   "start_by_fixing_the_first_error_in_your_document": "Start by fixing the first error in the document to avoid cascading problems later on.",
   "start_editing": "Start editing",
@@ -3212,6 +3215,7 @@
   "zoom_out": "Zoom out",
   "zoom_to": "Zoom to",
   "zotero": "Zotero",
+  "zotero_and_mendeley_integrations": "Zotero and Mendeley integrations",
   "zotero_dynamic_sync_description": "With the Zotero integration, you can import your references into __appName__. You can either import all your references at once or dynamically search your Zotero library directly from __appName__.",
   "zotero_groups_loading_error": "There was an error loading groups from Zotero",
   "zotero_groups_relink": "There was an error accessing your Zotero data. This was likely caused by lack of permissions. Please re-link your account and try again.",

services/web/public/img/ciam-check-green.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M14.354 4.85403L6.35403 12.854C6.30759 12.9005 6.25245 12.9374 6.19175 12.9626C6.13105 12.9877 6.06599 13.0007 6.00028 13.0007C5.93457 13.0007 5.86951 12.9877 5.80881 12.9626C5.74811 12.9374 5.69296 12.9005 5.64653 12.854L2.14653 9.35403C2.05271 9.26021 2 9.13296 2 9.00028C2 8.8676 2.05271 8.74035 2.14653 8.64653C2.24035 8.55271 2.3676 8.5 2.50028 8.5C2.63296 8.5 2.76021 8.55271 2.85403 8.64653L6.00028 11.7934L13.6465 4.14653C13.7403 4.05271 13.8676 4 14.0003 4C14.133 4 14.2602 4.05271 14.354 4.14653C14.4478 4.24035 14.5006 4.3676 14.5006 4.50028C14.5006 4.63296 14.4478 4.76021 14.354 4.85403Z" fill="#26B072"/>
-</svg>

services/web/public/img/ciam-check.svg

@@ -0,0 +1,4 @@
+<!-- Phosphor "check" icon, regular weight. https://phosphoricons.com (MIT) -->
+<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+  <path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z" fill="#000"/>
+</svg>

services/web/public/img/third-party-icons/dropbox.svg

@@ -1,15 +1,3 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="40" height="40" fill="white"/>
-  <g clip-path="url(#clip0_904_845)">
-    <path d="M10.8329 4.33325L1.66667 10.1731L10.8329 16.013L20.0008 10.1731L10.8329 4.33325Z" fill="#0061FF"/>
-    <path d="M29.1671 4.33325L20.0008 10.1731L29.1671 16.013L38.3333 10.1731L29.1671 4.33325Z" fill="#0061FF"/>
-    <path d="M1.66667 21.8528L10.8329 27.6927L20.0008 21.8528L10.8329 16.0129L1.66667 21.8528Z" fill="#0061FF"/>
-    <path d="M29.1671 16.0129L20.0008 21.8528L29.1671 27.6927L38.3333 21.8528L29.1671 16.0129Z" fill="#0061FF"/>
-    <path d="M10.8329 29.6394L20.0008 35.4793L29.167 29.6394L20.0008 23.7996L10.8329 29.6394Z" fill="#0061FF"/>
-  </g>
-  <defs>
-    <clipPath id="clip0_904_845">
-      <rect width="36.6667" height="31.146" fill="white" transform="translate(1.66667 4.33325)"/>
-    </clipPath>
-  </defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40">
+  <path fill="#0061ff" d="m10.833 4.333-9.166 5.84 9.166 5.84L20 10.173zM29.167 4.333l-9.166 5.84 9.166 5.84 9.166-5.84zM1.667 21.853l9.166 5.84L20 21.853l-9.168-5.84zM29.167 16.013l-9.166 5.84 9.166 5.84 9.166-5.84zM10.833 29.64 20 35.48l9.166-5.84-9.166-5.84z"/>
 </svg>