mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-17 21:05:04 -04:00
b2ef7a935f
* 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
146 lines
4.5 KiB
JavaScript
146 lines
4.5 KiB
JavaScript
import { updateGroupModalPlanPricing } from '../../../../features/plans/group-plan-modal'
|
|
import '../../../../features/plans/plans-v2-group-plan-modal'
|
|
import {
|
|
createLocalizedGroupPlanPrice,
|
|
formatCurrencyDefault,
|
|
} from '../../../../features/plans/utils/group-plan-pricing'
|
|
import getMeta from '../../../../utils/meta'
|
|
import { getSplitTestVariant } from '@/utils/splitTestUtils'
|
|
import { formatCurrencyLocalized } from '@/shared/utils/currency'
|
|
|
|
const MINIMUM_LICENSE_SIZE_EDUCATIONAL_DISCOUNT = 10
|
|
|
|
export function updateMainGroupPlanPricing() {
|
|
const currency = getMeta('ol-recommendedCurrency')
|
|
|
|
const formEl = document.querySelector(
|
|
'[data-ol-plans-v2-license-picker-form]'
|
|
)
|
|
const licenseSize = formEl.querySelector(
|
|
'[data-ol-plans-v2-license-picker-select]'
|
|
).value
|
|
|
|
const usage = formEl.querySelector(
|
|
'[data-ol-plans-v2-license-picker-educational-discount-input]'
|
|
).checked
|
|
? 'educational'
|
|
: 'enterprise'
|
|
|
|
const localCcyVariant = getSplitTestVariant('local-ccy-format')
|
|
const formatCurrency =
|
|
localCcyVariant === 'enabled'
|
|
? formatCurrencyLocalized
|
|
: formatCurrencyDefault
|
|
const {
|
|
localizedPrice: localizedPriceProfessional,
|
|
localizedPerUserPrice: localizedPerUserPriceProfessional,
|
|
} = createLocalizedGroupPlanPrice({
|
|
plan: 'professional',
|
|
licenseSize,
|
|
currency,
|
|
usage,
|
|
formatCurrency,
|
|
})
|
|
|
|
const {
|
|
localizedPrice: localizedPriceCollaborator,
|
|
localizedPerUserPrice: localizedPerUserPriceCollaborator,
|
|
} = createLocalizedGroupPlanPrice({
|
|
plan: 'collaborator',
|
|
licenseSize,
|
|
currency,
|
|
usage,
|
|
formatCurrency,
|
|
})
|
|
|
|
document.querySelector(
|
|
'[data-ol-plans-v2-group-total-price="professional"]'
|
|
).innerText = localizedPriceProfessional
|
|
|
|
document.querySelector(
|
|
'[data-ol-plans-v2-group-price-per-user="professional"]'
|
|
).innerText = localizedPerUserPriceProfessional
|
|
|
|
document.querySelector(
|
|
'[data-ol-plans-v2-group-total-price="collaborator"]'
|
|
).innerText = localizedPriceCollaborator
|
|
|
|
document.querySelector(
|
|
'[data-ol-plans-v2-group-price-per-user="collaborator"]'
|
|
).innerText = localizedPerUserPriceCollaborator
|
|
|
|
const notEligibleForEducationalDiscount =
|
|
licenseSize < MINIMUM_LICENSE_SIZE_EDUCATIONAL_DISCOUNT
|
|
|
|
formEl
|
|
.querySelector(
|
|
'[data-ol-plans-v2-license-picker-educational-discount-label]'
|
|
)
|
|
.classList.toggle('disabled', notEligibleForEducationalDiscount)
|
|
|
|
formEl.querySelector(
|
|
'[data-ol-plans-v2-license-picker-educational-discount-input]'
|
|
).disabled = notEligibleForEducationalDiscount
|
|
|
|
if (notEligibleForEducationalDiscount) {
|
|
// force disable educational discount checkbox
|
|
formEl.querySelector(
|
|
'[data-ol-plans-v2-license-picker-educational-discount-input]'
|
|
).checked = false
|
|
}
|
|
|
|
changeNumberOfUsersInTableHead()
|
|
changeNumberOfUsersInFeatureTable()
|
|
}
|
|
|
|
export function changeGroupPlanModalNumberOfLicenses() {
|
|
const modalEl = document.querySelector('[data-ol-group-plan-modal]')
|
|
const numberOfLicenses = document.querySelector(
|
|
'[data-ol-plans-v2-license-picker-select]'
|
|
).value
|
|
|
|
const groupPlanModalLicensePickerEl = modalEl.querySelector('#size')
|
|
|
|
groupPlanModalLicensePickerEl.value = numberOfLicenses
|
|
updateGroupModalPlanPricing()
|
|
}
|
|
|
|
export function changeGroupPlanModalEducationalDiscount() {
|
|
const modalEl = document.querySelector('[data-ol-group-plan-modal]')
|
|
const groupPlanModalEducationalDiscountEl = modalEl.querySelector('#usage')
|
|
const educationalDiscountChecked = document.querySelector(
|
|
'[data-ol-plans-v2-license-picker-educational-discount-input]'
|
|
).checked
|
|
|
|
groupPlanModalEducationalDiscountEl.checked = educationalDiscountChecked
|
|
updateGroupModalPlanPricing()
|
|
}
|
|
|
|
export function changeNumberOfUsersInFeatureTable() {
|
|
document
|
|
.querySelectorAll(
|
|
'[data-ol-plans-v2-table-cell-plan^="group"][data-ol-plans-v2-table-cell-feature="number_of_users"]'
|
|
)
|
|
.forEach(el => {
|
|
const licenseSize = document.querySelector(
|
|
'[data-ol-plans-v2-license-picker-select]'
|
|
).value
|
|
|
|
el.textContent = el.textContent.replace(/\d+/, licenseSize)
|
|
})
|
|
}
|
|
|
|
export function changeNumberOfUsersInTableHead() {
|
|
document
|
|
.querySelectorAll('[data-ol-plans-v2-table-th-group-license-size]')
|
|
.forEach(el => {
|
|
const licenseSize = el.getAttribute(
|
|
'data-ol-plans-v2-table-th-group-license-size'
|
|
)
|
|
const currentLicenseSize = document.querySelector(
|
|
'[data-ol-plans-v2-license-picker-select]'
|
|
).value
|
|
|
|
el.hidden = licenseSize !== currentLicenseSize
|
|
})
|
|
}
|