76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
import getMeta from '@/utils/meta'
|
|
import { useMemo } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Card, Row, Col } from 'react-bootstrap-5'
|
|
import MaterialIcon from '@/shared/components/material-icon'
|
|
import { formatCurrency } from '@/shared/utils/currency'
|
|
|
|
export const LICENSE_ADD_ON = 'additional-license'
|
|
|
|
function UpgradeSubscriptionPlanDetails() {
|
|
const { t } = useTranslation()
|
|
const preview = getMeta('ol-subscriptionChangePreview')
|
|
const totalLicenses = getMeta('ol-totalLicenses')
|
|
|
|
const licenseUnitPrice = useMemo(() => {
|
|
const additionalLicenseAddOn = preview.nextInvoice.addOns.filter(
|
|
addOn => addOn.code === LICENSE_ADD_ON
|
|
)
|
|
// Legacy plans might not have additional-license add-on.
|
|
// Hence we need to compute unit price
|
|
return additionalLicenseAddOn.length > 0
|
|
? additionalLicenseAddOn[0].unitAmount
|
|
: preview.nextInvoice.plan.amount / totalLicenses
|
|
}, [
|
|
preview.nextInvoice.addOns,
|
|
preview.nextInvoice.plan.amount,
|
|
totalLicenses,
|
|
])
|
|
|
|
return (
|
|
<Card
|
|
className="group-subscription-upgrade-features card-description-secondary border-1"
|
|
border="light"
|
|
>
|
|
<Card.Body className="d-grid gap-3 p-3">
|
|
<b>{preview.nextInvoice.plan.name}</b>
|
|
<Row xs="auto" className="gx-2">
|
|
<Col>
|
|
<span className="per-user-price" data-testid="per-user-price">
|
|
<b>
|
|
{formatCurrency(
|
|
licenseUnitPrice,
|
|
preview.currency,
|
|
getMeta('ol-i18n')?.currentLangCode ?? 'en',
|
|
true
|
|
)}
|
|
</b>
|
|
</span>
|
|
</Col>
|
|
<Col className="d-flex flex-column justify-content-center">
|
|
<div className="per-user-price-text">{t('per_license')}</div>
|
|
<div className="per-user-price-text">{t('billed_yearly')}</div>
|
|
</Col>
|
|
</Row>
|
|
<div className="feature-list-item">
|
|
<b>{t('all_features_in_group_standard_plus')}</b>
|
|
</div>
|
|
<div className="ps-2 feature-list-item">
|
|
<MaterialIcon type="check" className="me-1" />
|
|
{t('unlimited_collaborators_per_project')}
|
|
</div>
|
|
<div className="ps-2 feature-list-item">
|
|
<MaterialIcon type="check" className="me-1" />
|
|
{t('sso')}
|
|
</div>
|
|
<div className="ps-2 feature-list-item">
|
|
<MaterialIcon type="check" className="me-1" />
|
|
{t('managed_user_accounts')}
|
|
</div>
|
|
</Card.Body>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default UpgradeSubscriptionPlanDetails
|