115 lines
4.2 KiB
TypeScript
115 lines
4.2 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import { Card, ListGroup } from 'react-bootstrap-5'
|
|
import { formatCurrency } from '@/shared/utils/currency'
|
|
import { formatTime } from '@/features/utils/format-date'
|
|
import {
|
|
GroupPlanUpgrade,
|
|
SubscriptionChangePreview,
|
|
} from '../../../../../../types/subscription/subscription-change-preview'
|
|
import { MergeAndOverride } from '../../../../../../types/utils'
|
|
import getMeta from '@/utils/meta'
|
|
|
|
export type SubscriptionChange = MergeAndOverride<
|
|
SubscriptionChangePreview,
|
|
{ change: GroupPlanUpgrade }
|
|
>
|
|
|
|
type UpgradeSummaryProps = {
|
|
subscriptionChange: SubscriptionChange
|
|
}
|
|
|
|
function UpgradeSummary({ subscriptionChange }: UpgradeSummaryProps) {
|
|
const { t } = useTranslation()
|
|
const totalLicenses = getMeta('ol-totalLicenses')
|
|
|
|
return (
|
|
<Card className="card-gray card-description-secondary">
|
|
<Card.Body className="d-grid gap-2 p-3">
|
|
<div>
|
|
<div className="fw-bold">{t('upgrade_summary')}</div>
|
|
{t('you_have_x_licenses_on_your_subscription', {
|
|
groupSize: totalLicenses,
|
|
})}
|
|
</div>
|
|
<div>
|
|
<ListGroup>
|
|
<ListGroup.Item className="bg-transparent border-0 px-0 gap-3 card-description-secondary">
|
|
<span className="me-auto">
|
|
{subscriptionChange.nextInvoice.plan.name} x {totalLicenses}{' '}
|
|
{t('licenses')}
|
|
</span>
|
|
<span data-testid="subtotal">
|
|
{formatCurrency(
|
|
subscriptionChange.immediateCharge.subtotal,
|
|
subscriptionChange.currency
|
|
)}
|
|
</span>
|
|
</ListGroup.Item>
|
|
{subscriptionChange.immediateCharge.discount !== 0 && (
|
|
<ListGroup.Item className="bg-transparent border-0 px-0 gap-3 card-description-secondary">
|
|
<span className="me-auto">{t('discount')}</span>
|
|
<span data-testid="discount">
|
|
(
|
|
{formatCurrency(
|
|
subscriptionChange.immediateCharge.discount,
|
|
subscriptionChange.currency
|
|
)}
|
|
)
|
|
</span>
|
|
</ListGroup.Item>
|
|
)}
|
|
<ListGroup.Item className="bg-transparent border-0 px-0 gap-3 card-description-secondary">
|
|
<span className="me-auto">{t('vat')}</span>
|
|
<span data-testid="tax">
|
|
{formatCurrency(
|
|
subscriptionChange.immediateCharge.tax,
|
|
subscriptionChange.currency
|
|
)}
|
|
</span>
|
|
</ListGroup.Item>
|
|
<ListGroup.Item className="bg-transparent border-0 px-0 gap-3 card-description-secondary">
|
|
<strong className="me-auto">{t('total_due_today')}</strong>
|
|
<strong data-testid="total">
|
|
{formatCurrency(
|
|
subscriptionChange.immediateCharge.total,
|
|
subscriptionChange.currency
|
|
)}
|
|
</strong>
|
|
</ListGroup.Item>
|
|
</ListGroup>
|
|
<hr className="m-0" />
|
|
</div>
|
|
<div>
|
|
{t(
|
|
'we_will_charge_you_now_for_your_new_plan_based_on_the_remaining_months_of_your_current_subscription'
|
|
)}
|
|
</div>
|
|
<div>
|
|
{t(
|
|
'after_that_well_bill_you_x_total_y_subtotal_z_tax_annually_on_date_unless_you_cancel',
|
|
{
|
|
totalAmount: formatCurrency(
|
|
subscriptionChange.nextInvoice.total,
|
|
subscriptionChange.currency
|
|
),
|
|
subtotalAmount: formatCurrency(
|
|
subscriptionChange.nextInvoice.subtotal,
|
|
subscriptionChange.currency
|
|
),
|
|
taxAmount: formatCurrency(
|
|
subscriptionChange.nextInvoice.tax.amount,
|
|
subscriptionChange.currency
|
|
),
|
|
date: formatTime(subscriptionChange.nextInvoice.date, 'MMMM D'),
|
|
}
|
|
)}
|
|
{subscriptionChange.immediateCharge.discount !== 0 &&
|
|
` ${t('coupons_not_included')}.`}
|
|
</div>
|
|
</Card.Body>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default UpgradeSummary
|