Merge pull request #21750 from overleaf/ds-checkout-left-section-description

Checkout redesign - Adding the left side description of the checkout page

GitOrigin-RevId: 62c3b9f7d9d4bec8f1d23cd760b76f1267089800

services/web/frontend/extracted-translations.json

@@ -428,6 +428,8 @@
   "editor_limit_exceeded_in_this_project": "",
   "editor_only_hide_pdf": "",
   "editor_theme": "",
+  "editors_per_proj": "",
+  "editors_per_proj_single": "",
   "educational_discount_for_groups_of_x_or_more": "",
   "educational_percent_discount_applied": "",
   "email": "",
@@ -1703,6 +1705,7 @@
   "university_school": "",
   "unknown": "",
   "unlimited_collabs": "",
+  "unlimited_editors": "",
   "unlimited_projects": "",
   "unlink": "",
   "unlink_all_users": "",

services/web/frontend/stylesheets/bootstrap-5/pages/subscription.scss

@@ -147,13 +147,42 @@
     gap: var(--spacing-10);
     justify-content: center;
 
+    .payment-review-panel {
+      h4 {
+        color: var(--neutral-70);
+        font-weight: 600;
+
+        @include heading-sm;
+      }
+
+      .price-feature-description {
+        color: var(--neutral-70);
+        font-weight: 400;
+
+        @include body-base;
+
+        h4 {
+          margin-bottom: var(--spacing-06);
+        }
+
+        .features-list {
+          margin-top: var(--spacing-08);
+        }
+      }
+
+      hr {
+        margin-top: var(--spacing-08);
+        margin-bottom: var(--spacing-08);
+      }
+    }
+
     .payment-right-section {
       padding: var(--spacing-08);
     }
   }
 
   @include media-breakpoint-up(md) {
-    .payment-left-section {
+    .payment-review-panel {
       padding: 0;
     }
   }

services/web/locales/en.json

@@ -572,6 +572,8 @@
   "editor_limit_exceeded_in_this_project": "Too many editors in this project",
   "editor_only_hide_pdf": "Editor only <0>(hide PDF)</0>",
   "editor_theme": "Editor theme",
+  "editors_per_proj": "__editorscount__ editors per project",
+  "editors_per_proj_single": "__editorscount__ editor per project",
   "educational_discount_applied": "40% educational discount applied!",
   "educational_discount_available_for_groups_of_ten_or_more": "The educational discount is available for groups of 10 or more",
   "educational_discount_disclaimer": "This license is for educational purposes (applies to students or faculty using Overleaf for teaching)",
@@ -2329,6 +2331,7 @@
   "unlimited_collaborators_per_project": "Unlimited collaborators per project",
   "unlimited_collabs": "Unlimited collaborators",
   "unlimited_collabs_rt": "<0>Unlimited</0> collaborators",
+  "unlimited_editors": "Unlimited editors",
   "unlimited_projects": "Unlimited projects",
   "unlimited_projects_info": "Your projects are private by default. This means that only you can view them, and only you can allow other people to access them.",
   "unlink": "Unlink",