Merge pull request #22309 from overleaf/rh-plan-annual-toggle

[web] Plans page period toggle improvements

GitOrigin-RevId: 8900d9ce9c2116fd11f9688ada93d11211df045f

services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-tracking.ts

@@ -20,6 +20,10 @@ export function sendPlansViewEvent() {
         'ol-websiteRedesignPlansVariant'
       )
 
+      const periodToggleTestVariant = getSplitTestVariant(
+        'period-toggle-improvements'
+      )
+
       const device = window.matchMedia('(max-width: 767px)').matches
         ? 'mobile'
         : 'desktop'
@@ -35,6 +39,7 @@ export function sendPlansViewEvent() {
         'website-redesign-plans': websiteRedesignPlansTestVariant,
         'group-tab-improvements': groupTabImprovementsVariant,
         plan: planTabParam,
+        'period-toggle-improvements': periodToggleTestVariant,
       }
 
       const isPlansPage = window.location.href.includes(

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

@@ -20,6 +20,8 @@
 @table-4-column-width: 25%;
 @table-5-column-width: 20%;
 
+@plans-m-a-new-switch-height: 20px;
+
 .plans-new-design {
   padding-top: var(--header-height);
 
@@ -1176,3 +1178,77 @@
     }
   }
 }
+
+/// Toggle for monthly/annual toggle for period-toggle-improvements test
+/// Based on toggle in light-touch-redesign
+.monthly-annual-switch {
+  color: var(--neutral-90);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin-top: var(--spacing-09);
+  margin-bottom: var(--spacing-13);
+
+  .plans-new-discount-label {
+    margin-left: var(--spacing-04);
+    color: var(--green-50);
+  }
+
+  @media (max-width: @screen-xs-max) {
+    margin-top: var(--spacing-08);
+    margin-bottom: var(--spacing-08);
+  }
+
+  label {
+    position: relative;
+    display: inline-block;
+    width: 34px;
+    height: @plans-m-a-new-switch-height;
+    margin-right: var(--spacing-05);
+    margin-bottom: 0;
+
+    input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    input + span {
+      background-color: var(--neutral-70);
+    }
+
+    input:checked + span {
+      background-color: var(--green-50);
+    }
+
+    input:checked + span::before {
+      transform: translateX(14px);
+    }
+
+    span {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      transition: 0.4s;
+      border-radius: @plans-m-a-new-switch-height;
+
+      &::before {
+        position: absolute;
+        content: '';
+        height: @plans-m-a-new-switch-height - @plans-m-a-switch-padding -
+          @plans-m-a-switch-padding;
+        width: @plans-m-a-new-switch-height - @plans-m-a-switch-padding -
+          @plans-m-a-switch-padding;
+        left: @plans-m-a-switch-padding;
+        bottom: @plans-m-a-switch-padding;
+        background-color: @white;
+        transition: 0.4s;
+        border-radius: 50%;
+      }
+    }
+  }
+}

services/web/locales/en.json

@@ -151,6 +151,7 @@
   "an_error_occurred_when_verifying_the_coupon_code": "An error occurred when verifying the coupon code",
   "and": "and",
   "annual": "Annual",
+  "annual_discount": "Annual discount",
   "anonymous": "Anonymous",
   "anyone_with_link_can_edit": "Anyone with this link can edit this project",
   "anyone_with_link_can_view": "Anyone with this link can view this project",