Merge pull request #18885 from overleaf/jel-plans-page-quotes

[web] Handle hiding/showing quote rows on new plans page variants

GitOrigin-RevId: dd88cce9acdc2ca07d5df1afa7278028820e673d

services/web/app/views/subscriptions/plans-light-design.pug

@@ -36,16 +36,14 @@ block content
 					
 				+currency_and_payment_methods()
 
-				//- TODO: hide for groups/students
-				.plans-page-quote-row
+				//- TODO: changing .plans-page-quote-row-hidden causes flickering on page load
+				.plans-page-quote-row(data-ol-show-for-plan-type="individual")
 					+collinsQuote1()
 
-				//- TODO: hide for individual/students
-				.plans-page-quote-row
+				.plans-page-quote-row.plans-page-quote-row-hidden(data-ol-show-for-plan-type="group")
 					+bennettQuote1()
 
-				//- TODO: hide for groups/students
-				.plans-page-quote-row
+				.plans-page-quote-row.plans-page-quote-row-hidden(data-ol-show-for-plan-type="student")
 					+collinsQuote2()
 
 

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

@@ -22,6 +22,18 @@ import getMeta from '../../../../utils/meta'
 
 const currentCurrencyCode = getMeta('ol-recommendedCurrency')
 
+function showQuoteForTab(viewTab) {
+  // hide/display quote rows
+  document.querySelectorAll('.plans-page-quote-row').forEach(quoteRow => {
+    const showForPlanTypes = quoteRow.getAttribute('data-ol-show-for-plan-type')
+    if (showForPlanTypes?.includes(viewTab)) {
+      quoteRow.classList.remove('plans-page-quote-row-hidden')
+    } else {
+      quoteRow.classList.add('plans-page-quote-row-hidden')
+    }
+  })
+}
+
 function setUpSubscriptionTracking(linkEl) {
   linkEl.addEventListener('click', function () {
     const plan =
@@ -124,6 +136,8 @@ function selectTab(viewTab) {
 
   // update the hash to reflect the current view when switching individual, group, or student tabs
   setHashFromViewTab(viewTab, currentMonthlyAnnualSwitchValue)
+
+  showQuoteForTab(viewTab)
 }
 
 function updateMonthlyAnnualSwitchValue(viewTab) {

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

@@ -82,14 +82,14 @@
 
 .plans-page {
   p {
-    color: @neutral-70;
+    color: var(--neutral-70);
     margin-bottom: @line-height-computed;
   }
 
   .plans-header {
     h1,
     h2 {
-      color: @neutral-70;
+      color: var(--neutral-70);
     }
   }
 
@@ -102,7 +102,7 @@
     width: 120px;
     height: 120px;
     border-radius: 50%;
-    background-color: @brand-secondary;
+    background-color: @green-70;
     color: white;
     white-space: nowrap;
     line-height: 1;
@@ -1370,3 +1370,7 @@ p.plans-v2-table-green-highlighted-text {
 .plans-page-quote-row {
   margin: var(--spacing-13) 0;
 }
+
+.plans-page-quote-row-hidden {
+  display: none;
+}