Merge pull request #19811 from overleaf/mf-group-tab-educational-discount-new-plans-page

[web] Implement educational discount for group plans in new plans page

GitOrigin-RevId: bd8c76c3bbcdad25ac0b1f2353c52b318db55c83

services/web/frontend/stylesheets/app/plans/plans-new-design.less

@@ -418,7 +418,7 @@
     }
   }
 
-  .plans-new-group-member-picker-container {
+  .plans-new-group-member-picker {
     .plans-new-group-member-picker-text {
       font-size: var(--font-size-02);
       line-height: var(--line-height-02);
@@ -426,7 +426,7 @@
       margin-bottom: var(--spacing-02);
     }
 
-    .plans-new-group-member-picker {
+    .plans-new-group-member-picker-form {
       position: relative;
 
       .plans-new-group-member-picker-button {
@@ -486,14 +486,15 @@
 
       li {
         position: relative;
-        border-radius: var(--border-radius-base-new);
 
         &:not(:last-child) {
           margin-bottom: var(--spacing-02);
         }
 
         &:not(.plans-new-group-member-picker-footer):hover {
-          background-color: var(--neutral-10);
+          input[type='radio']:not(:checked) + p {
+            background-color: var(--neutral-10);
+          }
         }
 
         input[type='radio'] {
@@ -501,12 +502,19 @@
           opacity: 0;
           cursor: pointer;
 
-          &:focus + label {
+          &:focus + p {
             &:extend(.input-focus-style);
           }
+
+          + p {
+            padding: var(--spacing-05) var(--spacing-08) var(--spacing-05)
+              var(--spacing-04);
+            margin-bottom: 0;
+            border-radius: var(--border-radius-base-new);
+          }
         }
 
-        input[type='radio']:checked + label {
+        input[type='radio']:checked + p {
           background-color: var(--green-10);
           color: var(--green-70);
           position: relative;
@@ -529,8 +537,6 @@
           width: 100%;
           font-size: var(--font-size-02);
           line-height: var(--line-height-02);
-          padding: var(--spacing-05) var(--spacing-08) var(--spacing-05)
-            var(--spacing-04);
           margin-bottom: var(--spacing-00);
           font-weight: 400;
           cursor: pointer;
@@ -542,6 +548,39 @@
           }
         }
       }
+
+      .plans-new-edu-discount {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--spacing-04);
+        margin-bottom: var(--spacing-06);
+        font-weight: 400;
+
+        input[type='checkbox'] {
+          margin: var(--spacing-02);
+          accent-color: var(--green-50);
+
+          &:focus-visible {
+            .box-shadow-button-input();
+          }
+        }
+
+        .plans-new-edu-discount-content {
+          display: flex;
+          flex-direction: column;
+
+          span {
+            line-height: var(--line-height-03);
+            color: var(--neutral-90);
+          }
+
+          small {
+            color: var(--neutral-70);
+            font-size: var(--font-size-01);
+            line-height: var(--line-height-01);
+          }
+        }
+      }
     }
   }
 
@@ -773,11 +812,6 @@
           margin-top: var(--spacing-08);
           line-height: var(--line-height-03);
         }
-        .group-plans-card-cta-buy-now-mobile {
-          width: 100%;
-          margin-top: var(--spacing-04);
-          line-height: var(--line-height-03);
-        }
       }
     }
   }

services/web/locales/en.json

@@ -133,6 +133,7 @@
   "app_on_x": "__appName__ on __social__",
   "apply_educational_discount": "Apply educational discount",
   "apply_educational_discount_info": "Overleaf offers a 40% educational discount for groups of 10 or more. Applies to students or faculty using Overleaf for teaching.",
+  "apply_educational_discount_info_new": "40% discount for groups of 10 or more using __appName__ for teaching",
   "apply_suggestion": "Apply suggestion",
   "april": "April",
   "archive": "Archive",