Files
piratepoet/assets/js/src/common/subscribers_in_plan.tsx
2021-01-11 14:55:44 +01:00

43 lines
1.1 KiB
TypeScript

import React from 'react';
import MailPoet from 'mailpoet';
import HelpTooltip from 'help-tooltip.jsx';
import ReactStringReplace from 'react-string-replace';
type Props = {
subscribersInPlan: number | false;
subscribersInPlanLimit: number | false;
};
const SubscribersInPlan = ({
subscribersInPlan,
subscribersInPlanLimit,
}: Props) => {
if (subscribersInPlan === false) {
return null;
}
const subscribersInPlanCount = subscribersInPlanLimit ? (
<b key="subscribers_count">
{MailPoet.I18n.t('subscribersInPlanCount')
.replace('%$1d', subscribersInPlan.toLocaleString())
.replace('%$2d', subscribersInPlanLimit.toLocaleString())}
</b>
) : (
<b key="subscribers_count">{subscribersInPlan}</b>
);
return (
<div className="mailpoet-subscribers-in-plan">
{ReactStringReplace(MailPoet.I18n.t('subscribersInPlan'), '%s', () => subscribersInPlanCount)}
{' '}
<HelpTooltip
tooltip={MailPoet.I18n.t('subscribersInPlanTooltip')}
place="right"
/>
<span className="mailpoet-subscribers-in-plan-spacer">{' '}</span>
</div>
);
};
export default SubscribersInPlan;