From d5bc7c450caa22f4e02e48627bdb03c8d99bd801 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Tue, 28 Jun 2022 09:36:13 -0400
Subject: [PATCH] Implement interstitial payment page for free trial button on
 project page with split test (#8311)

GitOrigin-RevId: b24b4f91d281c2756aed68ec176d138fcdd52e54
---
 .../src/Features/Project/ProjectController.js  | 15 +++++++++++++++
 .../web/frontend/js/main/account-upgrade.js    | 12 +++++++++++-
 .../js/pages/user/subscription/plans.js        | 18 +++++++++++++++++-
 .../components/start-free-trial-button.js      | 17 +++++++++++++++--
 4 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js
index a23f315b7b..405a553af4 100644
--- a/services/web/app/src/Features/Project/ProjectController.js
+++ b/services/web/app/src/Features/Project/ProjectController.js
@@ -919,6 +919,21 @@ const ProjectController = {
             }
           )
         },
+        interstitialPaymentFromPaywallAssignment(cb) {
+          SplitTestHandler.getAssignment(
+            req,
+            res,
+            'interstitial-payment-from-paywall',
+            (error, assignment) => {
+              // do not fail editor load if assignment fails
+              if (error) {
+                cb(null, { variant: 'default' })
+              } else {
+                cb(null, assignment)
+              }
+            }
+          )
+        },
         latexLogParserAssignment(cb) {
           SplitTestHandler.getAssignment(
             req,
diff --git a/services/web/frontend/js/main/account-upgrade.js b/services/web/frontend/js/main/account-upgrade.js
index 785c149bed..2855f26149 100644
--- a/services/web/frontend/js/main/account-upgrade.js
+++ b/services/web/frontend/js/main/account-upgrade.js
@@ -1,4 +1,9 @@
 import * as eventTracking from '../infrastructure/event-tracking'
+import getMeta from '../utils/meta'
+
+const interstitialPaymentAfterPaywallVariant =
+  getMeta('ol-splitTestVariants')?.['interstitial-payment-from-paywall'] ??
+  'default'
 
 function startFreeTrial(source, version, $scope) {
   const plan = 'collaborator_free_trial_7_days'
@@ -11,7 +16,12 @@ function startFreeTrial(source, version, $scope) {
     }
     eventTracking.sendMB('paywall-click', { 'paywall-type': source })
 
-    url = `/user/subscription/new?planCode=${plan}&ssp=true`
+    if (interstitialPaymentAfterPaywallVariant === 'active') {
+      url = '/user/subscription/choose-your-plan'
+    } else {
+      url = `/user/subscription/new?planCode=${plan}&ssp=true`
+    }
+
     url = `${url}&itm_campaign=${source}`
     if (version) {
       url = `${url}&itm_content=${version}`
diff --git a/services/web/frontend/js/pages/user/subscription/plans.js b/services/web/frontend/js/pages/user/subscription/plans.js
index 0fb3d963fc..3fdcb41af6 100644
--- a/services/web/frontend/js/pages/user/subscription/plans.js
+++ b/services/web/frontend/js/pages/user/subscription/plans.js
@@ -77,6 +77,8 @@ function setUpSubscriptionTracking(linkEl) {
   })
 }
 
+const searchParams = new URLSearchParams(window.location.search)
+
 export function updateLinkTargets() {
   document.querySelectorAll('[data-ol-start-new-subscription]').forEach(el => {
     if (el.hasAttribute('data-ol-has-custom-href')) return
@@ -87,7 +89,21 @@ export function updateLinkTargets() {
     const planCode = `${plan}${suffix}`
 
     const location = el.getAttribute('data-ol-location')
-    el.href = `/user/subscription/new?planCode=${planCode}&currency=${currentCurrencyCode}&itm_campaign=plans&itm_content=${location}`
+    const itmCampaign = searchParams.get('itm_campaign') || 'plans'
+    const itmContent =
+      itmCampaign === 'plans' ? location : searchParams.get('itm_content')
+
+    const queryString = new URLSearchParams({
+      planCode,
+      currency: currentCurrencyCode,
+      itm_campaign: itmCampaign,
+    })
+
+    if (itmContent) {
+      queryString.set('itm_content', itmContent)
+    }
+
+    el.href = `/user/subscription/new?${queryString.toString()}`
   })
 }
 
diff --git a/services/web/frontend/js/shared/components/start-free-trial-button.js b/services/web/frontend/js/shared/components/start-free-trial-button.js
index 3a855d19a2..2add72491a 100644
--- a/services/web/frontend/js/shared/components/start-free-trial-button.js
+++ b/services/web/frontend/js/shared/components/start-free-trial-button.js
@@ -2,6 +2,7 @@ import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from 'react-bootstrap'
 import PropTypes from 'prop-types'
+import { useSplitTestContext } from '../context/split-test-context'
 import * as eventTracking from '../../infrastructure/event-tracking'
 
 export default function StartFreeTrialButton({
@@ -13,6 +14,12 @@ export default function StartFreeTrialButton({
 }) {
   const { t } = useTranslation()
 
+  const { splitTestVariants } = useSplitTestContext({
+    splitTestVariants: PropTypes.object,
+  })
+  const interstitialPaymentFromPaywallVariant =
+    splitTestVariants['interstitial-payment-from-paywall']
+
   useEffect(() => {
     eventTracking.sendMB('paywall-prompt', { 'paywall-type': source })
   }, [source])
@@ -34,9 +41,15 @@ export default function StartFreeTrialButton({
         itm_campaign: source,
       })
 
-      window.open(`/user/subscription/new?${params}`)
+      if (interstitialPaymentFromPaywallVariant === 'active') {
+        window.open(
+          `/user/subscription/choose-your-plan?itm_campaign=${source}`
+        )
+      } else {
+        window.open(`/user/subscription/new?${params}`)
+      }
     },
-    [setStartedFreeTrial, source]
+    [setStartedFreeTrial, source, interstitialPaymentFromPaywallVariant]
   )
 
   return (