Merge pull request #10958 from overleaf/jel-features-page-link

[web] Update features page link on dash for split test

GitOrigin-RevId: 5b51700a8a4ca89920288b54e08caf88f29dec96

services/web/frontend/js/features/project-list/components/current-plan-widget/commons-plan.tsx

@@ -2,9 +2,16 @@ import { useTranslation, Trans } from 'react-i18next'
 import { CommonsPlanSubscription } from '../../../../../../types/project/dashboard/subscription'
 import Tooltip from '../../../../shared/components/tooltip'
 
-type CommonsPlanProps = Pick<CommonsPlanSubscription, 'subscription' | 'plan'>
+type CommonsPlanProps = Pick<
+  CommonsPlanSubscription,
+  'subscription' | 'plan' | 'featuresPageURL'
+>
 
-function CommonsPlan({ subscription, plan }: CommonsPlanProps) {
+function CommonsPlan({
+  featuresPageURL,
+  subscription,
+  plan,
+}: CommonsPlanProps) {
   const { t } = useTranslation()
   const currentPlanLabel = (
     <Trans i18nKey="premium_plan_label" components={{ b: <strong /> }} />
@@ -21,10 +28,7 @@ function CommonsPlan({ subscription, plan }: CommonsPlanProps) {
         id="commons-plan"
         overlayProps={{ placement: 'bottom' }}
       >
-        <a
+        <a href={featuresPageURL} className="current-plan-label hidden-xs">
-          href="/learn/how-to/Overleaf_premium_features"
-          className="current-plan-label hidden-xs"
-        >
           {currentPlanLabel} <span className="info-badge" />
         </a>
       </Tooltip>

services/web/frontend/js/features/project-list/components/current-plan-widget/current-plan-widget.tsx

@@ -20,10 +20,16 @@ function CurrentPlanWidget() {
   const isGroupPlan = type === 'group'
   const isCommonsPlan = type === 'commons'
 
+  const newFeaturesPageVariant =
+    getMeta('ol-splitTestVariants')?.['features-page'] === 'new'
+  const featuresPageURL = newFeaturesPageVariant
+    ? '/about/features-overview'
+    : '/learn/how-to/Overleaf_premium_features'
+
   let currentPlan
 
   if (isFreePlan) {
-    currentPlan = <FreePlan />
+    currentPlan = <FreePlan featuresPageURL={featuresPageURL} />
   }
 
   if (isIndividualPlan) {
@@ -31,6 +37,7 @@ function CurrentPlanWidget() {
       <IndividualPlan
         remainingTrialDays={usersBestSubscription.remainingTrialDays}
         plan={usersBestSubscription.plan}
+        featuresPageURL={featuresPageURL}
       />
     )
   }
@@ -41,6 +48,7 @@ function CurrentPlanWidget() {
         subscription={usersBestSubscription.subscription}
         remainingTrialDays={usersBestSubscription.remainingTrialDays}
         plan={usersBestSubscription.plan}
+        featuresPageURL={featuresPageURL}
       />
     )
   }
@@ -50,6 +58,7 @@ function CurrentPlanWidget() {
       <CommonsPlan
         subscription={usersBestSubscription.subscription}
         plan={usersBestSubscription.plan}
+        featuresPageURL={featuresPageURL}
       />
     )
   }

services/web/frontend/js/features/project-list/components/current-plan-widget/free-plan.tsx

@@ -1,9 +1,12 @@
 import { useTranslation, Trans } from 'react-i18next'
 import { Button } from 'react-bootstrap'
+import { FreePlanSubscription } from '../../../../../../types/project/dashboard/subscription'
 import Tooltip from '../../../../shared/components/tooltip'
 import * as eventTracking from '../../../../infrastructure/event-tracking'
 
-function FreePlan() {
+type FreePlanProps = Pick<FreePlanSubscription, 'featuresPageURL'>
+
+function FreePlan({ featuresPageURL }: FreePlanProps) {
   const { t } = useTranslation()
   const currentPlanLabel = (
     <Trans i18nKey="free_plan_label" components={{ b: <strong /> }} />
@@ -21,10 +24,7 @@ function FreePlan() {
         id="free-plan"
         overlayProps={{ placement: 'bottom' }}
       >
-        <a
+        <a href={featuresPageURL} className="current-plan-label hidden-xs">
-          href="/learn/how-to/Overleaf_premium_features"
-          className="current-plan-label hidden-xs"
-        >
           {currentPlanLabel} <span className="info-badge" />
         </a>
       </Tooltip>{' '}

services/web/frontend/js/features/project-list/components/current-plan-widget/group-plan.tsx

@@ -4,10 +4,15 @@ import Tooltip from '../../../../shared/components/tooltip'
 
 type GroupPlanProps = Pick<
   GroupPlanSubscription,
-  'subscription' | 'plan' | 'remainingTrialDays'
+  'subscription' | 'plan' | 'remainingTrialDays' | 'featuresPageURL'
 >
 
-function GroupPlan({ subscription, plan, remainingTrialDays }: GroupPlanProps) {
+function GroupPlan({
+  featuresPageURL,
+  subscription,
+  plan,
+  remainingTrialDays,
+}: GroupPlanProps) {
   const { t } = useTranslation()
   const currentPlanLabel =
     remainingTrialDays >= 0 ? (
@@ -39,10 +44,7 @@ function GroupPlan({ subscription, plan, remainingTrialDays }: GroupPlanProps) {
         id="group-plan"
         overlayProps={{ placement: 'bottom' }}
       >
-        <a
+        <a href={featuresPageURL} className="current-plan-label hidden-xs">
-          href="/learn/how-to/Overleaf_premium_features"
-          className="current-plan-label hidden-xs"
-        >
           {currentPlanLabel} <span className="info-badge" />
         </a>
       </Tooltip>

services/web/frontend/js/features/project-list/components/current-plan-widget/individual-plan.tsx

@@ -4,10 +4,14 @@ import Tooltip from '../../../../shared/components/tooltip'
 
 type IndividualPlanProps = Pick<
   IndividualPlanSubscription,
-  'plan' | 'remainingTrialDays'
+  'plan' | 'remainingTrialDays' | 'featuresPageURL'
 >
 
-function IndividualPlan({ plan, remainingTrialDays }: IndividualPlanProps) {
+function IndividualPlan({
+  featuresPageURL,
+  plan,
+  remainingTrialDays,
+}: IndividualPlanProps) {
   const { t } = useTranslation()
   const currentPlanLabel =
     remainingTrialDays >= 0 ? (
@@ -32,10 +36,7 @@ function IndividualPlan({ plan, remainingTrialDays }: IndividualPlanProps) {
         id="individual-plan"
         overlayProps={{ placement: 'bottom' }}
       >
-        <a
+        <a href={featuresPageURL} className="current-plan-label hidden-xs">
-          href="/learn/how-to/Overleaf_premium_features"
-          className="current-plan-label hidden-xs"
-        >
           {currentPlanLabel} <span className="info-badge" />
         </a>
       </Tooltip>

services/web/test/frontend/features/project-list/components/current-plan-widget.test.tsx

@@ -243,4 +243,67 @@ describe('<CurrentPlanWidget />', function () {
       })
     })
   })
+
+  describe('features page split test', function () {
+    const variants = [
+      { name: 'default', link: '/learn/how-to/Overleaf_premium_features' },
+      { name: 'new', link: '/about/features-overview' },
+    ]
+
+    const plans = [
+      { type: 'free' },
+      {
+        type: 'individual',
+        plan: {
+          name: 'Abc',
+        },
+      },
+      {
+        type: 'group',
+        plan: {
+          name: 'Abc',
+        },
+        subscription: {
+          teamName: 'Example Team',
+          name: 'Example Name',
+        },
+      },
+      {
+        type: 'commons',
+        plan: {
+          name: 'Abc',
+        },
+        subscription: {
+          name: 'Example Name',
+        },
+      },
+    ]
+
+    for (const variant of variants) {
+      describe(`${variant.name} variant`, function () {
+        beforeEach(function () {
+          window.metaAttributesCache.set('ol-splitTestVariants', {
+            'features-page': variant.name,
+          })
+        })
+        afterEach(function () {
+          window.metaAttributesCache.delete('ol-splitTestVariants')
+        })
+
+        for (const plan of plans) {
+          it(`links to ${variant.name} features page on ${plan.type} plan`, function () {
+            window.metaAttributesCache.set('ol-usersBestSubscription', {
+              ...plan,
+            })
+            render(<CurrentPlanWidget />)
+
+            const links = screen.getAllByRole('link')
+            expect(links[0].getAttribute('href')).to.equal(variant.link)
+
+            window.metaAttributesCache.delete('ol-usersBestSubscription')
+          })
+        }
+      })
+    }
+  })
 })

services/web/types/project/dashboard/subscription.ts

@@ -1,7 +1,11 @@
-type FreePlanSubscription = {
+type SubscriptionBase = {
-  type: 'free'
+  featuresPageURL: string
 }
 
+export type FreePlanSubscription = {
+  type: 'free'
+} & SubscriptionBase
+
 type FreeSubscription = FreePlanSubscription
 
 type PaidSubscriptionBase = {
@@ -12,7 +16,7 @@ type PaidSubscriptionBase = {
     teamName?: string
     name: string
   }
-}
+} & SubscriptionBase
 
 export type IndividualPlanSubscription = {
   type: 'individual'