From effea6edc58b8e8de5cc566ebdcb94d39c98f196 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Mon, 17 Jun 2024 09:19:06 -0500
Subject: [PATCH] Merge pull request #18885 from overleaf/jel-plans-page-quotes

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

GitOrigin-RevId: dd88cce9acdc2ca07d5df1afa7278028820e673d
---
 .../app/views/subscriptions/plans-light-design.pug | 10 ++++------
 .../user/subscription/plans-v2/plans-v2-main.js    | 14 ++++++++++++++
 .../frontend/stylesheets/app/plans/plans-v2.less   | 10 +++++++---
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/services/web/app/views/subscriptions/plans-light-design.pug b/services/web/app/views/subscriptions/plans-light-design.pug
index 823634dceb..17e8ac878f 100644
--- a/services/web/app/views/subscriptions/plans-light-design.pug
+++ b/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()
 
 
diff --git a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js
index ad0ae6a2ca..0d68a3a06e 100644
--- a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js
+++ b/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) {
diff --git a/services/web/frontend/stylesheets/app/plans/plans-v2.less b/services/web/frontend/stylesheets/app/plans/plans-v2.less
index b460999183..6d265c6f73 100644
--- a/services/web/frontend/stylesheets/app/plans/plans-v2.less
+++ b/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;
+}