overleaf/services/web/frontend/js/features/subscription/util/recurly-pricing.ts
Antoine Clausse b2ef7a935f [web] Use localized number formatting for currencies (#17622)
* Add a unit test on `SubscriptionFormatters.formatPrice`

* Add JSDoc to `formatPrice`

Also: Name the functions before exporting:
This fixes my IDE (WebStorm) navigation

* Make `'USD'` the default param instead of reassigning

* Create `formatCurrency` function

* Use `formatCurrency` in SubscriptionFormatters

* Use an `isNoCentsCurrency` logic for `CLP` `JPY` `KRW` `VND`

And remove custom `CLP` logic and locale

* Add `locale` param to `formatPrice`

* Generate `groups.json` and `localizedPlanPricing.json`

```
bin/exec web node ./scripts/recurly/recurly_prices.js --download -o prices.json
bin/exec web node ./scripts/plan-prices/plans.js -f ../../prices.json -o dir
```

* Update scripts/plan-prices/plans.js to generate numbers instead of localized amounts

* Generate `groups.json` and `localizedPlanPricing.json`

```
bin/exec web node ./scripts/recurly/recurly_prices.js --download -o prices.json
bin/exec web node ./scripts/plan-prices/plans.js -f ../../prices.json -o dir
```

* Remove generation of `plans.json`

As /services/web/frontend/js/main/plans.js was removed in https://github.com/overleaf/internal/pull/12593

* Sort currencies in alphabetical order in scripts/plan-prices/plans.js

* Generate `groups.json` and `localizedPlanPricing.json`

```
bin/exec web node ./scripts/recurly/recurly_prices.js --download -o prices.json
bin/exec web node ./scripts/plan-prices/plans.js -f ../../prices.json -o dir
```

* Use `formatCurrency` in price-summary.tsx

* Use `formatCurrency` in Subscription Pug files

* Fix unit tests SubscriptionHelperTests.js

* Remove unused `currencySymbol`

* Change to `formatCurrency` in other React components

* Add `CurrencyCode` JSDoc types

* Duplicate `formatCurrency` into services/web/app/src/util

* Wrap tests in a top-level describe block

* Use `narrowSymbol`

* Fix tests with `narrowSymbol` expects

* Revert deletion of old `formatPrice` in SubscriptionFormatters.js

* Rename `formatCurrency` -> `formatCurrencyLocalized`

* Revert deletion of `CurrencySymbol`

* Add split-test in SubscriptionController.js

* Add split-test in SubscriptionViewModelBuilder.js

* Add split-test in plans

* Add split-test in subscription-dashboard-context.tsx

* Add split-test in 4 more components

* Update tests

* Show currency and payment methods in interstitial page

* Fix `–` being printed. Use `–` instead

* Fix test with NOK

* Storybook: Fix missing `SplitTestProvider`

* Storybook: Revert "Remove unused `currencySymbol`"

This reverts commit e55387d4753f97bbf8e39e0fdc3ad17312122aaa.

* Replace `getSplitTestVariant` by `useSplitTestContext`

* Use parameterize currencyFormat in `generateInitialLocalizedGroupPrice`

* Fixup import paths of `formatCurrencyLocalized`

* Replace `% 1 === 0` by `Number.isInteger`

* Add comment explaining that any combinations of languages/currencies could happen

* Fixup after rebase: import `useSplitTestContext`

* Revert "Remove SplitTestProvider from subscription root"

This reverts commit be9f378fda715b86589ab0759737581c72321d87.

* Revert "Remove split test provider from some tests"

This reverts commit 985522932b550cfd38fa6a4f4c3d2ebaee6ff7df.

GitOrigin-RevId: 59a83cbbe0f7cc7e45f189c654e23fcf9bfa37af
2024-04-19 08:03:54 +00:00

129 lines
3.1 KiB
TypeScript

import { SubscriptionPricingState } from '@recurly/recurly-js'
import { PriceForDisplayData } from '../../../../../types/subscription/plan'
import { currencies, CurrencyCode } from '../data/currency'
import { getRecurlyGroupPlanCode } from './recurly-group-plan-code'
import { debugConsole } from '@/utils/debugging'
function queryRecurlyPlanPrice(planCode: string, currency: CurrencyCode) {
return new Promise(resolve => {
recurly.Pricing.Subscription()
.plan(planCode, { quantity: 1 })
.currency(currency)
.catch(debugConsole.error)
.done(response => {
if (response) {
resolve(response)
} else {
resolve(undefined)
}
})
})
}
type FormatCurrency = (
price: number,
currency: CurrencyCode,
locale: string,
stripIfInteger?: boolean
) => string
export const formatCurrencyDefault: FormatCurrency = (
price: number,
currency: CurrencyCode,
_locale: string,
stripIfInteger = false
) => {
const currencySymbol = currencies[currency]
const number =
stripIfInteger && price % 1 === 0 ? Number(price) : price.toFixed(2)
return `${currencySymbol}${number}`
}
export function formatPriceForDisplayData(
price: string,
taxRate: number,
currencyCode: CurrencyCode,
locale: string,
formatCurrency: FormatCurrency
): PriceForDisplayData {
const totalPriceExTax = parseFloat(price)
let taxAmount = totalPriceExTax * taxRate
if (isNaN(taxAmount)) {
taxAmount = 0
}
const totalWithTax = totalPriceExTax + taxAmount
return {
totalForDisplay: formatCurrency(totalWithTax, currencyCode, locale, true),
totalAsNumber: totalWithTax,
subtotal: formatCurrency(totalPriceExTax, currencyCode, locale),
tax: formatCurrency(taxAmount, currencyCode, locale),
includesTax: taxAmount !== 0,
}
}
function getPerUserDisplayPrice(
totalPrice: number,
currency: CurrencyCode,
size: string,
locale: string,
formatCurrency: FormatCurrency
): string {
return formatCurrency(totalPrice / parseInt(size), currency, locale, true)
}
export async function loadDisplayPriceWithTaxPromise(
planCode: string,
currencyCode: CurrencyCode,
taxRate: number,
locale: string,
formatCurrency: FormatCurrency
) {
if (!recurly) return
const price = (await queryRecurlyPlanPrice(
planCode,
currencyCode
)) as SubscriptionPricingState['price']
if (price)
return formatPriceForDisplayData(
price.next.total,
taxRate,
currencyCode,
locale,
formatCurrency
)
}
export async function loadGroupDisplayPriceWithTaxPromise(
groupPlanCode: string,
currencyCode: CurrencyCode,
taxRate: number,
size: string,
usage: string,
locale: string,
formatCurrency: FormatCurrency
) {
if (!recurly) return
const planCode = getRecurlyGroupPlanCode(groupPlanCode, size, usage)
const price = await loadDisplayPriceWithTaxPromise(
planCode,
currencyCode,
taxRate,
locale,
formatCurrency
)
if (price) {
price.perUserDisplayPrice = getPerUserDisplayPrice(
price.totalAsNumber,
currencyCode,
size,
locale,
formatCurrency
)
}
return price
}