AI assist section for plans page (#26187)

* AI assist plans section

* fix merge issues, add tests

* translate img alt

* startInterval only if there are images found

* update casing for TeXGPT

* update mobile price font

* small design tweaks

GitOrigin-RevId: 87d993bb5da1929f99ab3b4721316961d78a46f5

services/web/app/src/Features/Subscription/PaymentProviderEntities.js

@@ -11,9 +11,10 @@ const PlansLocator = require('./PlansLocator')
 
 let SubscriptionHelper = null // Work around circular import (loaded at the bottom of the file)
 
-const AI_ADD_ON_CODE = 'assistant'
 const MEMBERS_LIMIT_ADD_ON_CODE = 'additional-license'
-const STANDALONE_AI_ADD_ON_CODES = ['assistant', 'assistant-annual']
+const AI_ASSIST_STANDALONE_MONTHLY_PLAN_CODE = 'assistant'
+const AI_ASSIST_STANDALONE_ANNUAL_PLAN_CODE = 'assistant-annual'
+const AI_ADD_ON_CODE = 'assistant'
 
 class PaymentProviderSubscription {
   /**
@@ -588,7 +589,10 @@ class PaymentProviderAccount {
  * @param {string} planCode
  */
 function isStandaloneAiAddOnPlanCode(planCode) {
-  return STANDALONE_AI_ADD_ON_CODES.includes(planCode)
+  return (
+    planCode === AI_ASSIST_STANDALONE_MONTHLY_PLAN_CODE ||
+    planCode === AI_ASSIST_STANDALONE_ANNUAL_PLAN_CODE
+  )
 }
 
 /**
@@ -619,7 +623,8 @@ function subscriptionChangeIsAiAssistUpgrade(subscriptionChange) {
 module.exports = {
   AI_ADD_ON_CODE,
   MEMBERS_LIMIT_ADD_ON_CODE,
-  STANDALONE_AI_ADD_ON_CODES,
+  AI_ASSIST_STANDALONE_MONTHLY_PLAN_CODE,
+  AI_ASSIST_STANDALONE_ANNUAL_PLAN_CODE,
   PaymentProviderSubscription,
   PaymentProviderSubscriptionAddOn,
   PaymentProviderSubscriptionChange,

services/web/frontend/stylesheets/app/plans.less

@@ -747,6 +747,236 @@
     border-left: var(--border-width-base) solid var(--green-50);
   }
 
+  .ai-assist {
+    color: var(--neutral-90);
+
+    @media (min-width: @screen-sm-min) {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
+
+    .ai-assist-heading {
+      margin-top: var(--spacing-12);
+      margin-bottom: var(--spacing-12);
+      text-align: center;
+    }
+
+    .ai-assist-container {
+      padding: var(--spacing-10);
+      border: 4px solid var(--neutral-10);
+      border-radius: var(--border-radius-large-new);
+      background:
+        linear-gradient(270deg, var(--blue-10), #fff) 0.13%,
+        #fff 63.21%;
+
+      @media (max-width: @screen-sm-max) {
+        background: #fff;
+        border-width: 2px;
+        border-radius: var(--border-radius-medium-new);
+        border-color: var(--premium-gradient);
+        padding: var(--spacing-09);
+      }
+
+      .ai-assist-content {
+        display: flex;
+        justify-content: space-between;
+        gap: var(--spacing-07);
+
+        @media (max-width: @screen-sm-max) {
+          flex-direction: column;
+        }
+        .ai-assist-left {
+          display: flex;
+          gap: var(--spacing-07);
+          flex-direction: column;
+          max-width: @screen-xs;
+
+          @media (max-width: @screen-sm-max) {
+            max-width: 100%;
+          }
+
+          .ai-assist-price {
+            font-weight: 600;
+            font-size: var(--font-size-03);
+
+            @media (max-width: @screen-sm-max) {
+              font-weight: normal;
+              font-size: var(--font-size-02);
+              .price {
+                font-size: var(--font-size-08);
+                font-weight: 600;
+              }
+            }
+          }
+          .ai-assist-annually-price {
+            display: block;
+          }
+          .ai-assist-monthly-price {
+            display: none;
+          }
+          .ai-assist-header-switch {
+            display: none;
+          }
+
+          .ai-assist-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .ai-assist-header-content {
+              display: flex;
+              gap: var(--spacing-06);
+              align-items: center;
+
+              h3 {
+                font-size: var(--font-size-07);
+                margin: 0;
+                padding: 0;
+
+                @media (max-width: @screen-sm-max) {
+                  font-size: var(--font-size-05);
+                }
+              }
+
+              img {
+                @media (max-width: @screen-sm-max) {
+                  width: 24px;
+                }
+              }
+            }
+
+            .ai-assist-header-switch {
+              align-items: center;
+              gap: var(--spacing-03);
+              user-select: none;
+
+              input {
+                margin: 0;
+              }
+
+              label {
+                margin: 0;
+                font-weight: normal;
+              }
+            }
+          }
+        }
+        .ai-assist-right {
+          display: flex;
+          align-items: center;
+          gap: var(--spacing-06);
+
+          .ai-assist-features {
+            list-style: none;
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-05);
+            min-width: 200px;
+            margin-bottom: 0;
+
+            .feature-item {
+              display: flex;
+              align-items: center;
+              font-size: var(--font-size-02);
+              cursor: default;
+
+              .feature-icon {
+                margin-right: var(--spacing-05);
+                color: var(--neutral-70);
+                width: 16px;
+                height: 16px;
+              }
+
+              .feature-text {
+                color: var(--neutral-90);
+              }
+            }
+
+            @media (min-width: @screen-sm-min) {
+              .feature-item-selected {
+                .feature-text {
+                  color: var(--blue-50);
+                  font-weight: 600;
+                }
+
+                .feature-icon {
+                  content: url(../../../public/img/check-circle-blue-filled.svg);
+                }
+              }
+            }
+          }
+
+          .ai-assist-images {
+            display: flex;
+            align-items: flex-start;
+            width: 280px;
+            justify-content: center;
+
+            @media (max-width: @screen-sm-max) {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
+    .ai-assist-header-switch {
+      display: flex !important;
+    }
+
+    .ai-assist-button-container {
+      display: flex;
+      gap: var(--spacing-05);
+
+      &.mobile {
+        display: none;
+        margin-top: var(--spacing-06);
+        flex-direction: column;
+      }
+
+      @media (max-width: @screen-sm-max) {
+        &.mobile {
+          display: flex;
+        }
+        &.desktop {
+          display: none;
+        }
+      }
+
+      .btn.monthly {
+        display: none;
+      }
+    }
+
+    .overleaf-assist-screenshot {
+      height: auto;
+      max-width: 280px;
+      max-height: 200px;
+      border-radius: var(--border-radius-base-new);
+      display: none;
+
+      &.selected {
+        display: block;
+        -webkit-animation: fade-in 1s;
+        animation: fade-in 1s;
+      }
+    }
+  }
+  .ai-assist.monthly-period {
+    .ai-assist-annually-price {
+      display: none !important;
+    }
+    .ai-assist-monthly-price {
+      display: block !important;
+    }
+    .ai-assist-button-container .btn.annual {
+      display: none !important;
+    }
+    .ai-assist-button-container .btn.monthly {
+      display: block !important;
+    }
+  }
+
   .plans-new-organizations {
     padding: var(--spacing-13) var(--spacing-08);
 

services/web/locales/en.json

@@ -99,6 +99,8 @@
   "add_new_email": "Add new email",
   "add_on": "Add-on",
   "add_ons": "Add-ons",
+  "add_ons_for_any_plan": "Add-ons for any plan",
+  "add_ons_for_any_plan_subheading": "Buy add-ons for any Overleaf plan (including the free plan) to unlock additional features.",
   "add_or_remove_project_from_tag": "Add or remove project from tag __tagName__",
   "add_people": "Add people",
   "add_role_and_department": "Add role and department",
@@ -128,6 +130,8 @@
   "aggregate_to": "to",
   "agree": "Agree",
   "agree_with_the_terms": "I agree with the Overleaf terms",
+  "ai_assist": "AI Assist",
+  "ai_assist_description": "AI Assist combines AI tools from Overleaf and Writefull to help you write faster, smarter and with confidence.",
   "ai_assist_in_overleaf_is_included_via_writefull_groups": "AI Assist in Overleaf is included as part of your group or organization’s Writefull subscription. To make changes you’ll need to speak to your subscription admin",
   "ai_assist_in_overleaf_is_included_via_writefull_individual": "AI Assist in Overleaf is included as part of your Writefull subscription. You can cancel or manage your access to AI Assist in your Writefull subscription settings.",
   "ai_assist_unavailable_due_to_subscription_type": "We’re sorry—it looks like AI Assist isn’t available to you just yet due to your current subscription type.",
@@ -250,6 +254,7 @@
   "browser": "Browser",
   "built_in": "Built-In",
   "bullet_list": "Bullet list",
+  "buy_add_on": "Buy add-on",
   "buy_licenses": "Buy licenses",
   "buy_more_licenses": "Buy more licenses",
   "buy_now_no_exclamation_mark": "Buy now",
@@ -2249,7 +2254,7 @@
   "test_configuration": "Test configuration",
   "test_configuration_successful": "Test configuration successful",
   "tex_live_version": "TeX Live version",
-  "texgpt": "TexGPT",
+  "texgpt": "TeXGPT",
   "text": "Text",
   "thank_you": "Thank you!",
   "thank_you_email_confirmed": "Thank you, your email is now confirmed",

services/web/public/img/check-circle-blue-filled.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7.90039" cy="8" r="7" fill="#366CBF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8008 5.5166C14.1341 6.28324 14.3008 7.11114 14.3008 8L14.293 8.32715C14.2565 9.08412 14.0924 9.80296 13.8008 10.4834L13.6689 10.7705C13.3493 11.4303 12.9322 12.018 12.417 12.5332L12.1953 12.7441C11.6679 13.2229 11.0643 13.6088 10.3838 13.9004C9.61715 14.2337 8.78925 14.4004 7.90039 14.4004L7.57324 14.3926C6.81627 14.3561 6.09743 14.192 5.41699 13.9004C4.63921 13.5671 3.95608 13.111 3.36719 12.5332C2.78941 11.9443 2.33333 11.2612 2 10.4834C1.7084 9.80296 1.5443 9.08412 1.50781 8.32715L1.5 8C1.5 7.11115 1.66669 6.28324 2 5.5166C2.29164 4.83611 2.67749 4.23247 3.15625 3.70508L3.36719 3.4834C3.88242 2.96817 4.47005 2.55105 5.12988 2.23145L5.41699 2.09961C6.19475 1.7663 7.02265 1.59961 7.90039 1.59961L8.23047 1.60742C8.995 1.64384 9.71286 1.80791 10.3838 2.09961L10.6709 2.23145C11.3294 2.55104 11.9115 2.96821 12.417 3.4834C13.0059 4.06118 13.4674 4.73882 13.8008 5.5166ZM14.8564 10.5342C15.1535 9.72879 15.3008 8.88186 15.3008 8C15.3008 7.10999 15.1533 6.26057 14.8545 5.45898L14.7178 5.11816C14.3825 4.33724 13.9322 3.63797 13.3672 3.02637L13.1172 2.76953C12.4496 2.09262 11.6692 1.5633 10.7822 1.18262C9.88199 0.791261 8.91754 0.599609 7.90039 0.599609C7.01853 0.599609 6.1716 0.746894 5.36621 1.04395L5.02344 1.18066C4.24213 1.51551 3.53918 1.9653 2.91992 2.52832L2.66016 2.77637C1.99035 3.44618 1.46448 4.22955 1.08301 5.11816C0.691652 6.0184 0.5 6.98285 0.5 8C0.5 9.00792 0.692469 9.97013 1.08105 10.877L1.23047 11.2061C1.59508 11.9615 2.06987 12.6387 2.65332 13.2334L2.66699 13.2471C3.34667 13.9139 4.1347 14.4384 5.02344 14.8193L5.36621 14.9561C6.1716 15.2531 7.01853 15.4004 7.90039 15.4004C8.91754 15.4004 9.88199 15.2087 10.7822 14.8174L10.7812 14.8164C11.6701 14.4349 12.4541 13.9102 13.124 13.2402L13.3721 12.9805C13.9351 12.3612 14.3849 11.6583 14.7197 10.877L14.8564 10.5342Z" fill="#366CBF"/>
+<path d="M10.7559 6.56348C10.733 6.67379 10.6755 6.77461 10.584 6.86621L7.4668 9.9834L7.37207 10.0635C7.27429 10.1321 7.16726 10.1669 7.05078 10.167L6.93652 10.1553C6.86301 10.14 6.79371 10.1093 6.72852 10.0635L6.63379 9.9834L5.2168 8.56641C5.09485 8.44435 5.03428 8.30568 5.03418 8.15039C5.03418 7.98381 5.09471 7.83898 5.2168 7.7168C5.33902 7.59457 5.47823 7.5332 5.63379 7.5332C5.78932 7.53322 5.92858 7.59459 6.05078 7.7168L7.05078 8.7002L9.75 6.0166C9.8722 5.8944 10.0115 5.83302 10.167 5.83301C10.3225 5.83301 10.4618 5.89438 10.584 6.0166C10.7061 6.1388 10.7666 6.28357 10.7666 6.4502L10.7559 6.56348Z" fill="white"/>
+</svg>

services/web/public/img/sparkle-2-stars.svg

@@ -0,0 +1,16 @@
+<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.2344 23.5171C20.275 21.2682 18.7323 19.7255 16.4837 9.76641C16.3807 9.31122 15.9756 8.987 15.5074 8.987C15.0392 8.987 14.6341 9.3112 14.531 9.76641C12.281 19.7259 10.7394 21.2686 0.780336 23.5171C0.324219 23.6212 0 24.0253 0 24.4935C0 24.9616 0.324203 25.3659 0.780336 25.4698C10.7398 27.7199 12.2813 29.2624 14.531 39.2205C14.6341 39.6757 15.0392 39.9999 15.5074 39.9999C15.9756 39.9999 16.3807 39.6757 16.4837 39.2205C18.7338 29.2622 20.2754 27.7196 30.2344 25.4698C30.6906 25.3657 31.0139 24.9616 31.0139 24.4935C31.0139 24.0253 30.6897 23.6211 30.2344 23.5171Z" fill="url(#paint0_linear_4820_1102)"/>
+<path d="M39.2371 8.01179C33.9428 6.81627 33.1993 6.07299 32.004 0.779476C31.8998 0.32336 31.4958 6.10352e-05 31.0276 6.10352e-05C30.5595 6.10352e-05 30.1552 0.323168 30.0513 0.779476C28.8558 6.07255 28.1125 6.81607 22.819 8.01179C22.3628 8.11589 22.0396 8.51996 22.0396 8.98812C22.0396 9.45629 22.3627 9.86054 22.819 9.96447C28.112 11.16 28.8556 11.9033 30.0513 17.1976C30.1554 17.6528 30.5595 17.977 31.0276 17.977C31.4958 17.977 31.9 17.6528 32.004 17.1976C33.1995 11.9033 33.9427 11.1598 39.2371 9.96447C39.6923 9.86036 40.0165 9.45629 40.0165 8.98812C40.0165 8.51996 39.6923 8.11571 39.2371 8.01179Z" fill="url(#paint1_linear_4820_1102)"/>
+<defs>
+<linearGradient id="paint0_linear_4820_1102" x1="31.0139" y1="8.987" x2="-5.13702" y2="25.3634" gradientUnits="userSpaceOnUse">
+<stop stop-color="#214475"/>
+<stop offset="0.295154" stop-color="#254C84"/>
+<stop offset="1" stop-color="#6597E0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4820_1102" x1="40.0165" y1="6.2448e-05" x2="19.0617" y2="9.49231" gradientUnits="userSpaceOnUse">
+<stop stop-color="#214475"/>
+<stop offset="0.295154" stop-color="#254C84"/>
+<stop offset="1" stop-color="#6597E0"/>
+</linearGradient>
+</defs>
+</svg>