diff --git a/services/web/app/src/Features/Subscription/PaymentProviderEntities.js b/services/web/app/src/Features/Subscription/PaymentProviderEntities.js
index 064dbfcf29..12600175fd 100644
--- a/services/web/app/src/Features/Subscription/PaymentProviderEntities.js
+++ b/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,
diff --git a/services/web/frontend/stylesheets/app/plans.less b/services/web/frontend/stylesheets/app/plans.less
index 1870b77636..8665b85c54 100644
--- a/services/web/frontend/stylesheets/app/plans.less
+++ b/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);
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index fd4a0953f6..c00428bbe6 100644
--- a/services/web/locales/en.json
+++ b/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",
diff --git a/services/web/public/img/ai-assist/editing-tools.png b/services/web/public/img/ai-assist/editing-tools.png
new file mode 100644
index 0000000000..c98f77f6aa
Binary files /dev/null and b/services/web/public/img/ai-assist/editing-tools.png differ
diff --git a/services/web/public/img/ai-assist/equation-generator.png b/services/web/public/img/ai-assist/equation-generator.png
new file mode 100644
index 0000000000..98635334b5
Binary files /dev/null and b/services/web/public/img/ai-assist/equation-generator.png differ
diff --git a/services/web/public/img/ai-assist/error-assist.png b/services/web/public/img/ai-assist/error-assist.png
new file mode 100644
index 0000000000..23cfa3710e
Binary files /dev/null and b/services/web/public/img/ai-assist/error-assist.png differ
diff --git a/services/web/public/img/ai-assist/language-suggestions.png b/services/web/public/img/ai-assist/language-suggestions.png
new file mode 100644
index 0000000000..ed821a83ed
Binary files /dev/null and b/services/web/public/img/ai-assist/language-suggestions.png differ
diff --git a/services/web/public/img/ai-assist/table-generator.png b/services/web/public/img/ai-assist/table-generator.png
new file mode 100644
index 0000000000..60d909e159
Binary files /dev/null and b/services/web/public/img/ai-assist/table-generator.png differ
diff --git a/services/web/public/img/ai-assist/texgpt.png b/services/web/public/img/ai-assist/texgpt.png
new file mode 100644
index 0000000000..80cf7fa7bb
Binary files /dev/null and b/services/web/public/img/ai-assist/texgpt.png differ
diff --git a/services/web/public/img/check-circle-blue-filled.svg b/services/web/public/img/check-circle-blue-filled.svg
new file mode 100644
index 0000000000..1a195007cc
--- /dev/null
+++ b/services/web/public/img/check-circle-blue-filled.svg
@@ -0,0 +1,5 @@
+
diff --git a/services/web/public/img/check-circle-blue.svg b/services/web/public/img/check-circle-blue.svg
new file mode 100644
index 0000000000..456ba2bfa4
--- /dev/null
+++ b/services/web/public/img/check-circle-blue.svg
@@ -0,0 +1,7 @@
+
diff --git a/services/web/public/img/sparkle-2-stars.svg b/services/web/public/img/sparkle-2-stars.svg
new file mode 100644
index 0000000000..5e4fc5e657
--- /dev/null
+++ b/services/web/public/img/sparkle-2-stars.svg
@@ -0,0 +1,16 @@
+