From cad3660f0b4b7631d8c0b097dbfd7c204ba0c89e Mon Sep 17 00:00:00 2001 From: Jessica Lawshe Date: Tue, 21 Feb 2023 09:24:37 -0600 Subject: [PATCH] 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 --- .../modals/change-to-group-modal.tsx | 12 ++-- .../subscription/util/recurly-pricing.tsx | 66 ++++++++++--------- .../util/recurly-pricing.test.tsx | 9 +-- 3 files changed, 47 insertions(+), 40 deletions(-) diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx index 0742902ea8..4002b72c75 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx +++ b/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() {
- diff --git a/services/web/frontend/js/features/subscription/util/recurly-pricing.tsx b/services/web/frontend/js/features/subscription/util/recurly-pricing.tsx index 640584cc24..db3490721d 100644 --- a/services/web/frontend/js/features/subscription/util/recurly-pricing.tsx +++ b/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 | 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) } diff --git a/services/web/test/frontend/features/subscription/util/recurly-pricing.test.tsx b/services/web/test/frontend/features/subscription/util/recurly-pricing.test.tsx index a9a62aabcb..292e405e0b 100644 --- a/services/web/test/frontend/features/subscription/util/recurly-pricing.test.tsx +++ b/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,