SONARCLOUD-175 Update paid plan promotion box and billing form

server/sonar-web/src/main/js/apps/create/components/CardPlan.tsx

@@ -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>
       </>

server/sonar-web/src/main/js/apps/create/components/__tests__/__snapshots__/CardPlan-test.tsx.snap

@@ -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>

server/sonar-web/src/main/js/apps/create/organization/utils.ts

@@ -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

server/sonar-web/src/main/js/components/common/UpgradeOrganizationBox.tsx

@@ -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>
   );
 }