Merge pull request #11839 from overleaf/jel-subscription-dash-change-to-group-pt2

[web] Continue change to group plan via React subscription dash

GitOrigin-RevId: b7e743f18e40383ecc1dbf02914f663ff0bc1846

services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx

@@ -98,6 +98,13 @@ export function ChangeToGroupModal() {
     setGroupPlanToChangeToCode(defaultPlanOption)
   }, [personalSubscription, setGroupPlanToChangeToCode])
 
+  function handleGetInTouchButton() {
+    handleCloseModal()
+
+    // @ts-ignore
+    $('[data-ol-contact-form-modal="contact-us"]').modal()
+  }
+
   if (
     modalIdShown !== modalId ||
     !groupPlans ||
@@ -256,10 +263,7 @@ export function ChangeToGroupModal() {
           <hr className="thin" />
           <button className="btn btn-primary btn-lg">{t('upgrade_now')}</button>
           <hr className="thin" />
-          <button
-            className="btn-inline-link"
-            data-ol-open-contact-form-for-more-than-50-licenses
-          >
+          <button className="btn-inline-link" onClick={handleGetInTouchButton}>
             <Trans i18nKey="need_more_than_x_licenses" values={{ x: 50 }} />{' '}
             {t('please_get_in_touch')}
           </button>

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

@@ -1,9 +1,33 @@
 import { SubscriptionPricingState } from '@recurly/recurly-js'
-import getMeta from '../../../utils/meta'
 import { currencies, CurrencyCode } from '../data/currency'
 
-export function formatPriceForDisplayData(price: string, taxRate: number) {
-  const currencyCode: CurrencyCode = getMeta('ol-recommendedCurrency')
+function queryRecurlyPlanPrice(planCode: string, currency: CurrencyCode) {
+  return new Promise(resolve => {
+    recurly.Pricing.Subscription()
+      .plan(planCode, { quantity: 1 })
+      .currency(currency)
+      .catch(function (error) {
+        console.error(error)
+      })
+      .done(response => {
+        if (response) {
+          resolve(response)
+        } else {
+          resolve(undefined)
+        }
+      })
+  })
+}
+
+function priceWithCents(price: number): string | number {
+  return price % 1 !== 0 ? price.toFixed(2) : price
+}
+
+export function formatPriceForDisplayData(
+  price: string,
+  taxRate: number,
+  currencyCode: CurrencyCode
+) {
   const currencySymbol = currencies[currencyCode]
 
   const totalPriceExTax = parseFloat(price)
@@ -14,9 +38,7 @@ export function formatPriceForDisplayData(price: string, taxRate: number) {
   const totalWithTax = totalPriceExTax + taxAmount
 
   return {
-    totalForDisplay: `${currencySymbol}${
-      totalWithTax % 1 !== 0 ? totalWithTax.toFixed(2) : totalWithTax
-    }`,
+    totalForDisplay: `${currencySymbol}${priceWithCents(totalWithTax)}`,
     totalAsNumber: totalWithTax,
     subtotal: `${currencySymbol}${totalPriceExTax.toFixed(2)}`,
     tax: `${currencySymbol}${taxAmount.toFixed(2)}`,
@@ -24,33 +46,17 @@ export function formatPriceForDisplayData(price: string, taxRate: number) {
   }
 }
 
-export function loadDisplayPriceWithTaxPromise(
+export async function loadDisplayPriceWithTaxPromise(
   planCode: string,
-  currency: CurrencyCode,
+  currencyCode: CurrencyCode,
   taxRate: number
 ) {
   if (!recurly) return
 
-  return new Promise<ReturnType<typeof formatPriceForDisplayData> | undefined>(
-    resolve => {
-      recurly.Pricing.Subscription()
-        .plan(planCode, { quantity: 1 })
-        .currency(currency)
-        .catch(function (error) {
-          console.error(error)
-        })
-        .done(response => {
-          if (response) {
-            const price =
-              response as unknown as SubscriptionPricingState['price']
-            // type expects response to be {price: {next: ...}}
-            // but the real response is {next: ...}
-            const data = formatPriceForDisplayData(price.next.total, taxRate)
-            resolve(data)
-          } else {
-            resolve(undefined)
-          }
-        })
-    }
-  )
+  const price = (await queryRecurlyPlanPrice(
+    planCode,
+    currencyCode
+  )) as SubscriptionPricingState['price']
+  if (price)
+    return formatPriceForDisplayData(price.next.total, taxRate, currencyCode)
 }

services/web/test/frontend/features/subscription/util/recurly-pricing.test.tsx

@@ -9,8 +9,7 @@ describe('formatPriceForDisplayData', function () {
     window.metaAttributesCache = new Map()
   })
   it('should handle no tax rate', function () {
-    window.metaAttributesCache.set('ol-recommendedCurrency', 'USD')
-    const data = formatPriceForDisplayData('1000', 0)
+    const data = formatPriceForDisplayData('1000', 0, 'USD')
     expect(data).to.deep.equal({
       totalForDisplay: '$1000',
       totalAsNumber: 1000,
@@ -22,8 +21,7 @@ describe('formatPriceForDisplayData', function () {
   })
 
   it('should handle a tax rate', function () {
-    window.metaAttributesCache.set('ol-recommendedCurrency', 'EUR')
-    const data = formatPriceForDisplayData('380', 0.2)
+    const data = formatPriceForDisplayData('380', 0.2, 'EUR')
     expect(data).to.deep.equal({
       totalForDisplay: '€456',
       totalAsNumber: 456,
@@ -34,8 +32,7 @@ describe('formatPriceForDisplayData', function () {
   })
 
   it('should handle total with cents', function () {
-    window.metaAttributesCache.set('ol-recommendedCurrency', 'EUR')
-    const data = formatPriceForDisplayData('8', 0.2)
+    const data = formatPriceForDisplayData('8', 0.2, 'EUR')
     expect(data).to.deep.equal({
       totalForDisplay: '€9.60',
       totalAsNumber: 9.6,