SONARCLOUD-121 display coupon's billing info (#720)

4 files changed, 64 insertions, 10 deletions

diff --git a/server/sonar-web/src/main/js/app/types.ts b/server/sonar-web/src/main/js/app/types.ts
index 1ddd5c5e0d5..435f7206b0f 100644
--- a/server/sonar-web/src/main/js/app/types.ts
+++ b/server/sonar-web/src/main/js/app/types.ts
@@ -161,6 +161,18 @@ export interface CoveredFile {
   coveredLines: number;
 }
 
+export interface Coupon {
+  billing?: {
+    address?: string;
+    country?: string;
+    email?: string;
+    name?: string;
+    use?: string;
+  };
+  maxNcloc: number;
+  planActiveUntil: string;
+}
+
 export interface CurrentUser {
   isLoggedIn: boolean;
   permissions?: { global: string[] };
diff --git a/server/sonar-web/src/main/js/apps/create/organization/BillingFormShim.tsx b/server/sonar-web/src/main/js/apps/create/organization/BillingFormShim.tsx
index 8c83ec676b3..bfa9c544027 100644
--- a/server/sonar-web/src/main/js/apps/create/organization/BillingFormShim.tsx
+++ b/server/sonar-web/src/main/js/apps/create/organization/BillingFormShim.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { CurrentUser, SubscriptionPlan } from '../../../app/types';
+import { CurrentUser, SubscriptionPlan, Coupon } from '../../../app/types';
 
 interface ChildrenProps {
   alertError: string | undefined;
@@ -45,7 +45,9 @@ interface Props {
   currentUser: CurrentUser;
   onClose: () => void;
   onCommit: () => void;
+  onCouponUpdate?: (coupon?: Coupon) => void;
   organizationKey: string | (() => Promise<string>);
+  skipBraintreeInit?: boolean;
   subscriptionPlans: SubscriptionPlan[];
 }
 
diff --git a/server/sonar-web/src/main/js/apps/create/organization/CouponForm.tsx b/server/sonar-web/src/main/js/apps/create/organization/CouponForm.tsx
index 4747165561d..f4ff3832680 100644
--- a/server/sonar-web/src/main/js/apps/create/organization/CouponForm.tsx
+++ b/server/sonar-web/src/main/js/apps/create/organization/CouponForm.tsx
@@ -21,7 +21,7 @@ import * as React from 'react';
 import * as classNames from 'classnames';
 import BillingFormShim from './BillingFormShim';
 import { withCurrentUser } from './withCurrentUser';
-import { CurrentUser } from '../../../app/types';
+import { CurrentUser, Coupon } from '../../../app/types';
 import { translate } from '../../../helpers/l10n';
 import DocTooltip from '../../../components/docs/DocTooltip';
 
@@ -31,11 +31,39 @@ interface Props {
   onSubmit: () => void;
 }
 
-export class CouponForm extends React.PureComponent<Props> {
+interface State {
+  coupon?: Coupon;
+}
+
+export class CouponForm extends React.PureComponent<Props, State> {
+  state: State = {};
+
   handleClose = () => {
     // do nothing
   };
 
+  handleCouponUpdate = (coupon?: Coupon) => {
+    this.setState({ coupon });
+  };
+
+  renderBillingInformation() {
+    if (!this.state.coupon || !this.state.coupon.billing) {
+      return null;
+    }
+    const { billing } = this.state.coupon;
+    return (
+      <div className="big-spacer-top big-spacer-bottom">
+        <h3 className="note">{translate('billing.upgrade.billing_info')}</h3>
+        <ul className="note">
+          {Boolean(billing.name) && <li>{billing.name}</li>}
+          {Boolean(billing.address) && <li>{billing.address}</li>}
+          {Boolean(billing.country) && <li>{billing.country}</li>}
+          {Boolean(billing.email) && <li>{billing.email}</li>}
+        </ul>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div className="huge-spacer-top">
@@ -43,11 +71,12 @@ export class CouponForm extends React.PureComponent<Props> {
           currentUser={this.props.currentUser}
           onClose={this.handleClose}
           onCommit={this.props.onSubmit}
+          onCouponUpdate={this.handleCouponUpdate}
           organizationKey={this.props.createOrganization}
+          skipBraintreeInit={true}
           subscriptionPlans={[]}>
           {form => (
             <form onSubmit={form.onSubmit}>
-              <div className="hidden">{form.renderBraintreeClient()}</div>
               {form.renderCouponInput(
                 <label htmlFor="coupon">
                   {translate('billing.upgrade.coupon')}
@@ -57,12 +86,21 @@ export class CouponForm extends React.PureComponent<Props> {
                   />
                 </label>
               )}
-              <h3 className="big-spacer-top">{translate('billing.upgrade.billing_info')}</h3>
-              {form.renderEmailInput()}
-              {form.renderTypeOfUseSelect()}
-              {form.renderBillingNameInput()}
-              {form.renderCountrySelect()}
-              {form.renderAdditionalInfo()}
+              {this.renderBillingInformation()}
+              {this.state.coupon &&
+                !this.state.coupon.billing && (
+                  <>
+                    <h3 className="big-spacer-top">{translate('billing.upgrade.billing_info')}</h3>
+                    {form.renderEmailInput()}
+                    {form.renderTypeOfUseSelect()}
+                    {form.renderBillingNameInput()}
+                    {form.renderCountrySelect()}
+                    {form.renderAdditionalInfo()}
+                  </>
+                )}
+              {this.state.coupon && (
+                <div className="big-spacer-bottom">{form.renderNextCharge()}</div>
+              )}
               {form.alertError && <p className="alert alert-danger">{form.alertError}</p>}
               <div className={classNames({ 'big-spacer-top': form.alertError !== undefined })}>
                 {form.renderSpinner()}
diff --git a/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/CouponForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/CouponForm-test.tsx.snap
index 738f9080adb..b9a3b2a5356 100644
--- a/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/CouponForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/CouponForm-test.tsx.snap
@@ -12,7 +12,9 @@ exports[`should render 1`] = `
     }
     onClose={[Function]}
     onCommit={[MockFunction]}
+    onCouponUpdate={[Function]}
     organizationKey={[MockFunction]}
+    skipBraintreeInit={true}
     subscriptionPlans={Array []}
   />
 </div>