Merge pull request #26934 from overleaf/ls-support-individual-to-group-plan-upgrade

Support individual to group plan upgrade in Stripe

GitOrigin-RevId: 24cbe7bd6de86a4d9410e1abc49b6457e0871f40

services/web/frontend/js/features/subscription/context/subscription-dashboard-context.tsx

@@ -22,7 +22,8 @@ import { Institution } from '../../../../../types/institution'
 import getMeta from '../../../utils/meta'
 import {
   loadDisplayPriceWithTaxPromise,
-  loadGroupDisplayPriceWithTaxPromise,
+  loadGroupDisplayPriceWithTaxForRecurlyPromise,
+  loadGroupDisplayPriceWithTaxForStripePromise,
 } from '../util/recurly-pricing'
 import { isRecurlyLoaded } from '../util/is-recurly-loaded'
 import { SubscriptionDashModalIds } from '../../../../../types/subscription/dashboard/modal-ids'
@@ -199,36 +200,46 @@ export function SubscriptionDashboardProvider({
 
   useEffect(() => {
     if (
-      isRecurlyLoaded() &&
-      groupPlanToChangeToCode &&
-      groupPlanToChangeToSize &&
-      groupPlanToChangeToUsage &&
-      personalSubscription?.payment
+      !groupPlanToChangeToCode ||
+      !groupPlanToChangeToSize ||
+      !groupPlanToChangeToUsage ||
+      !personalSubscription?.payment
     ) {
-      setQueryingGroupPlanToChangeToPrice(true)
-
-      const { currency, taxRate } = personalSubscription.payment
-      const fetchGroupDisplayPrice = async () => {
-        setGroupPlanToChangeToPriceError(false)
-        let priceData
-        try {
-          priceData = await loadGroupDisplayPriceWithTaxPromise(
-            groupPlanToChangeToCode,
-            currency,
-            taxRate,
-            groupPlanToChangeToSize,
-            groupPlanToChangeToUsage,
-            i18n.language
-          )
-        } catch (e) {
-          debugConsole.error(e)
-          setGroupPlanToChangeToPriceError(true)
-        }
-        setQueryingGroupPlanToChangeToPrice(false)
-        setGroupPlanToChangeToPrice(priceData)
-      }
-      fetchGroupDisplayPrice()
+      return
     }
+
+    let loadGroupDisplayPrice
+    if (personalSubscription.service?.includes('stripe')) {
+      loadGroupDisplayPrice = loadGroupDisplayPriceWithTaxForStripePromise
+    } else if (isRecurlyLoaded()) {
+      loadGroupDisplayPrice = loadGroupDisplayPriceWithTaxForRecurlyPromise
+    } else {
+      return
+    }
+
+    setQueryingGroupPlanToChangeToPrice(true)
+
+    const { currency, taxRate } = personalSubscription.payment
+    const fetchGroupDisplayPrice = async () => {
+      setGroupPlanToChangeToPriceError(false)
+      let priceData
+      try {
+        priceData = await loadGroupDisplayPrice(
+          groupPlanToChangeToCode,
+          currency,
+          taxRate,
+          groupPlanToChangeToSize,
+          groupPlanToChangeToUsage,
+          i18n.language
+        )
+      } catch (e) {
+        debugConsole.error(e)
+        setGroupPlanToChangeToPriceError(true)
+      }
+      setQueryingGroupPlanToChangeToPrice(false)
+      setGroupPlanToChangeToPrice(priceData)
+    }
+    fetchGroupDisplayPrice()
   }, [
     groupPlanToChangeToUsage,
     groupPlanToChangeToSize,

services/web/frontend/js/features/subscription/util/recurly-group-plan-code.ts

@@ -5,3 +5,11 @@ export function getRecurlyGroupPlanCode(
 ) {
   return `group_${planCode}_${size}_${usage}`
 }
+
+export function getConsolidatedGroupPlanCode(planCode: string, usage: string) {
+  if (usage === 'enterprise') {
+    return `group_${planCode}`
+  }
+
+  return `group_${planCode}_${usage}`
+}

services/web/frontend/js/features/subscription/util/recurly-pricing.ts

@@ -1,9 +1,15 @@
 import { SubscriptionPricingState } from '@recurly/recurly-js'
 import { PriceForDisplayData } from '../../../../../types/subscription/plan'
 import { CurrencyCode } from '../../../../../types/subscription/currency'
-import { getRecurlyGroupPlanCode } from './recurly-group-plan-code'
+import {
+  getRecurlyGroupPlanCode,
+  getConsolidatedGroupPlanCode,
+} from './recurly-group-plan-code'
 import { debugConsole } from '@/utils/debugging'
 import { formatCurrency } from '@/shared/utils/currency'
+import { getJSON } from '../../../infrastructure/fetch-json'
+
+let groupPlanPerUserPrices: Record<string, number> | undefined
 
 function queryRecurlyPlanPrice(planCode: string, currency: CurrencyCode) {
   return new Promise(resolve => {
@@ -73,7 +79,7 @@ export async function loadDisplayPriceWithTaxPromise(
     )
 }
 
-export async function loadGroupDisplayPriceWithTaxPromise(
+export async function loadGroupDisplayPriceWithTaxForRecurlyPromise(
   groupPlanCode: string,
   currencyCode: CurrencyCode,
   taxRate: number,
@@ -102,3 +108,44 @@ export async function loadGroupDisplayPriceWithTaxPromise(
 
   return price
 }
+
+export async function loadGroupDisplayPriceWithTaxForStripePromise(
+  groupPlanCode: string,
+  currencyCode: CurrencyCode,
+  taxRate: number,
+  size: string,
+  usage: string,
+  locale: string
+) {
+  if (!groupPlanPerUserPrices) {
+    groupPlanPerUserPrices = await getJSON<Record<string, number>>(
+      `/user/subscription/group/group-plan-per-user-prices?currency=${currencyCode}`
+    )
+  }
+
+  const planCode = getConsolidatedGroupPlanCode(groupPlanCode, usage)
+
+  if (!(planCode in groupPlanPerUserPrices)) {
+    throw new Error(
+      `Group plan code ${planCode} not found in groupPlanPerUserPrices`
+    )
+  }
+
+  const subtotalPrice = groupPlanPerUserPrices[planCode] * parseInt(size)
+
+  const result = formatPriceForDisplayData(
+    subtotalPrice.toString(),
+    taxRate,
+    currencyCode,
+    locale
+  )
+
+  result.perUserDisplayPrice = formatCurrency(
+    groupPlanPerUserPrices[planCode],
+    currencyCode,
+    locale,
+    true
+  )
+
+  return result
+}

services/web/frontend/js/utils/meta.ts

@@ -78,7 +78,6 @@ export interface Meta {
   // dynamic keys based on permissions
   'ol-canUseAddSeatsFeature': boolean
   'ol-canUseFlexibleLicensing': boolean
-  'ol-canUseFlexibleLicensingForConsolidatedPlans': boolean
   'ol-cannot-add-secondary-email': boolean
   'ol-cannot-change-password': boolean
   'ol-cannot-delete-own-account': boolean