@@ -24,8 +24,8 @@ import { Link } from 'react-router'; | |||
import CheckIcon from '../../../components/icons-components/CheckIcon'; | |||
import RecommendedIcon from '../../../components/icons-components/RecommendedIcon'; | |||
import { Alert } from '../../../components/ui/Alert'; | |||
import { formatPrice } from '../organization/utils'; | |||
import { translate } from '../../../helpers/l10n'; | |||
import { formatPrice, TRIAL_DURATION_DAYS } from '../organization/utils'; | |||
import { translate, translateWithParameters } from '../../../helpers/l10n'; | |||
import * as theme from '../../../app/theme'; | |||
import './CardPlan.css'; | |||
@@ -139,7 +139,9 @@ export function PaidCardPlan({ isRecommended, ...props }: PaidProps) { | |||
translate('billing.upgrade_box.unlimited_private_projects'), | |||
translate('billing.upgrade_box.strict_control_private_data'), | |||
translate('billing.upgrade_box.cancel_anytime'), | |||
translate('billing.upgrade_box.free_trial') | |||
<strong key="trial"> | |||
{translateWithParameters('billing.upgrade_box.free_trial_x', TRIAL_DURATION_DAYS)} | |||
</strong> | |||
]; | |||
return ( | |||
@@ -151,14 +153,14 @@ export function PaidCardPlan({ isRecommended, ...props }: PaidProps) { | |||
<ul className="note"> | |||
{advantages.map((text, idx) => ( | |||
<li className="display-flex-center" key={idx}> | |||
<CheckIcon className="spacer-right" fill={theme.green} /> | |||
<CheckIcon className="spacer-right" fill={theme.lightGreen} /> | |||
{text} | |||
</li> | |||
))} | |||
</ul> | |||
<div className="big-spacer-left"> | |||
<Link className="spacer-left" target="_blank" to="/documentation/sonarcloud-pricing/"> | |||
{translate('learn_more')} | |||
{translate('billing.pricing.learn_more')} | |||
</Link> | |||
</div> | |||
</> |
@@ -94,7 +94,7 @@ exports[`#PaidCardPlan should render correctly 1`] = ` | |||
> | |||
<CheckIcon | |||
className="spacer-right" | |||
fill="#00aa00" | |||
fill="#b0d513" | |||
/> | |||
billing.upgrade_box.unlimited_private_projects | |||
</li> | |||
@@ -104,7 +104,7 @@ exports[`#PaidCardPlan should render correctly 1`] = ` | |||
> | |||
<CheckIcon | |||
className="spacer-right" | |||
fill="#00aa00" | |||
fill="#b0d513" | |||
/> | |||
billing.upgrade_box.strict_control_private_data | |||
</li> | |||
@@ -114,7 +114,7 @@ exports[`#PaidCardPlan should render correctly 1`] = ` | |||
> | |||
<CheckIcon | |||
className="spacer-right" | |||
fill="#00aa00" | |||
fill="#b0d513" | |||
/> | |||
billing.upgrade_box.cancel_anytime | |||
</li> | |||
@@ -124,9 +124,13 @@ exports[`#PaidCardPlan should render correctly 1`] = ` | |||
> | |||
<CheckIcon | |||
className="spacer-right" | |||
fill="#00aa00" | |||
fill="#b0d513" | |||
/> | |||
billing.upgrade_box.free_trial | |||
<strong | |||
key="trial" | |||
> | |||
billing.upgrade_box.free_trial_x.14 | |||
</strong> | |||
</li> | |||
</ul> | |||
<div | |||
@@ -139,7 +143,7 @@ exports[`#PaidCardPlan should render correctly 1`] = ` | |||
target="_blank" | |||
to="/documentation/sonarcloud-pricing/" | |||
> | |||
learn_more | |||
billing.pricing.learn_more | |||
</Link> | |||
</div> | |||
</CardPlan> |
@@ -35,6 +35,8 @@ export const ORGANIZATION_IMPORT_BINDING_IN_PROGRESS_TIMESTAMP = | |||
export const ORGANIZATION_IMPORT_REDIRECT_TO_PROJECT_TIMESTAMP = | |||
'sonarcloud.import_org.redirect_to_projects'; | |||
export const TRIAL_DURATION_DAYS = 14; | |||
export enum Step { | |||
OrganizationDetails, | |||
Plan |
@@ -27,24 +27,23 @@ interface Props { | |||
} | |||
export default function UpgradeOrganizationBox({ organization }: Props) { | |||
if (!hasMessage('billing.upgrade_box.button')) { | |||
return null; | |||
} | |||
return ( | |||
<div className="boxed-group boxed-group-inner upgrade-organization-box"> | |||
<h3 className="spacer-bottom">{translate('billing.upgrade_box.header')}</h3> | |||
<p>{translate('billing.upgrade_box.text')}</p> | |||
{hasMessage('billing.upgrade_box.button') && ( | |||
<div className="big-spacer-top"> | |||
<Link | |||
className="button" | |||
to={{ | |||
pathname: `organizations/${organization}/extension/billing/billing`, | |||
query: { page: 'upgrade' } | |||
}}> | |||
{translate('billing.upgrade_box.button')} | |||
</Link> | |||
</div> | |||
)} | |||
<div className="big-spacer-top"> | |||
<Link | |||
className="button" | |||
to={{ | |||
pathname: `organizations/${organization}/extension/billing/billing`, | |||
query: { page: 'upgrade' } | |||
}}> | |||
{translate('billing.upgrade_box.button')} | |||
</Link> | |||
</div> | |||
</div> | |||
); | |||
} |