add cta in accounts to unlock kactus

mathieudutour · mathieudutour · commit 7b786d1fce86 · 2017-08-27T07:50:07.000-07:00
diff --git a/app/src/lib/app-state.ts b/app/src/lib/app-state.ts
@@ -195,6 +195,8 @@ export enum PopupType {
   ExternalEditorFailed,
 }
 
+export type PremiumType = 'premium' | 'enterprise'
+
 export type Popup =
   | { type: PopupType.RenameBranch; repository: Repository; branch: Branch }
   | { type: PopupType.DeleteBranch; repository: Repository; branch: Branch }
@@ -226,7 +228,7 @@ export type Popup =
   | { type: PopupType.CreateSketchFile; repository: Repository }
   | {
       type: PopupType.PremiumUpsell
-      enterprise: boolean
+      kind: PremiumType | 'choice'
       user?: Account
       retryAction?: RetryAction
     }
diff --git a/app/src/lib/dispatcher/app-store.ts b/app/src/lib/dispatcher/app-store.ts
@@ -2986,7 +2986,7 @@ export class AppStore {
     if (premiumType) {
       await this._showPopup({
         type: PopupType.PremiumUpsell,
-        enterprise: premiumType.enterprise,
+        kind: premiumType.enterprise ? 'enterprise' : 'premium',
         user: premiumType.user,
         retryAction,
       })
diff --git a/app/src/ui/app.tsx b/app/src/ui/app.tsx
@@ -1090,7 +1090,7 @@ export class App extends React.Component<IAppProps, IAppState> {
       case PopupType.PremiumUpsell:
         return (
           <PremiumUpsell
-            enterprise={popup.enterprise}
+            kind={popup.kind}
             retryAction={popup.retryAction}
             user={popup.user}
             dispatcher={this.props.dispatcher}
diff --git a/app/src/ui/preferences/accounts.tsx b/app/src/ui/preferences/accounts.tsx
@@ -16,6 +16,7 @@ interface IAccountsProps {
   readonly onDotComSignIn: () => void
   readonly onEnterpriseSignIn: () => void
   readonly onLogout: (account: Account) => void
+  readonly onShowUnlockKactusPopup: (account: Account) => void
 }
 
 enum SignInType {
@@ -61,9 +62,19 @@ export class Accounts extends React.Component<IAccountsProps, {}> {
             @{account.login}
           </div>
         </div>
-        <Button onClick={this.logout(account)}>
-          {__DARWIN__ ? 'Sign Out' : 'Sign out'}
-        </Button>
+        <div className="actions-wrapper">
+          {account.unlockedEnterpriseKactus || account.unlockedEnterpriseKactus
+            ? <span className="kactus-unlocked">✅ Kactus unlocked</span>
+            : <Button
+                className="action-button"
+                onClick={this.unlockKactus(account)}
+              >
+                Unlock Kactus
+              </Button>}
+          <Button onClick={this.logout(account)}>
+            {__DARWIN__ ? 'Sign Out' : 'Sign out'}
+          </Button>
+        </div>
       </Row>
     )
   }
@@ -113,4 +124,10 @@ export class Accounts extends React.Component<IAccountsProps, {}> {
       this.props.onLogout(account)
     }
   }
+
+  private unlockKactus = (account: Account) => {
+    return () => {
+      this.props.onShowUnlockKactusPopup(account)
+    }
+  }
 }
diff --git a/app/src/ui/preferences/preferences.tsx b/app/src/ui/preferences/preferences.tsx
@@ -19,6 +19,7 @@ import {
   setGlobalConfigValue,
 } from '../../lib/git/config'
 import { lookupPreferredEmail } from '../../lib/email'
+import { PopupType } from '../../lib/app-state'
 
 interface IPreferencesProps {
   readonly dispatcher: Dispatcher
@@ -132,6 +133,14 @@ export class Preferences extends React.Component<
     this.props.dispatcher.removeAccount(account)
   }
 
+  private onShowUnlockKactusPopup = (account: Account) => {
+    this.props.dispatcher.showPopup({
+      type: PopupType.PremiumUpsell,
+      kind: 'choice',
+      user: account,
+    })
+  }
+
   private renderActiveTab() {
     const index = this.state.selectedIndex
     switch (index) {
@@ -143,6 +152,7 @@ export class Preferences extends React.Component<
             onDotComSignIn={this.onDotComSignIn}
             onEnterpriseSignIn={this.onEnterpriseSignIn}
             onLogout={this.onLogout}
+            onShowUnlockKactusPopup={this.onShowUnlockKactusPopup}
           />
         )
       case PreferencesTab.Git: {
diff --git a/app/src/ui/premium-upsell/premium-upsell.tsx b/app/src/ui/premium-upsell/premium-upsell.tsx
@@ -12,14 +12,15 @@ import { shell } from '../../lib/dispatcher/app-shell'
 import { CouponInput } from './coupon-input'
 import { LinkButton } from '../lib/link-button'
 import { CallToAction } from '../lib/call-to-action'
+import { PremiumType } from '../../lib/app-state'
 
 interface IPremiumUpsellProps {
   /** A function called when the dialog is dismissed. */
   readonly onDismissed: () => void
   readonly dispatcher: Dispatcher
   readonly user?: Account
   readonly isUnlockingKactusFullAccess: boolean
-  readonly enterprise: boolean
+  readonly kind: PremiumType | 'choice'
   readonly retryAction?: RetryAction
 }
 
@@ -28,10 +29,42 @@ interface IPremiumUpsellState {
   readonly showingCheckout: boolean
   readonly loadingCheckout: boolean
   readonly coupon: string
-  readonly plan: string
   readonly couponState: IAPICoupon | 'loading' | null
+  readonly choice: PremiumType
 }
 
+const EnterpriseCopy = () =>
+  <ul>
+    <li>Unlimited public repositories</li>
+    <li>
+      No locked-in commitment: you can always generate the sketch files to
+      switch back
+    </li>
+    <li>
+      <strong>Unlimited private repositories</strong>
+    </li>
+    <li>
+      <strong>Support single sign-on and on-premises deployment</strong>
+    </li>
+    <li>
+      <strong>
+        Support any git server (BitBucket, Gitlab, self-hosted, etc.)
+      </strong>
+    </li>
+  </ul>
+
+const PremiumCopy = () =>
+  <ul>
+    <li>Unlimited public repositories</li>
+    <li>
+      No locked-in commitment: you can always generate the sketch files to
+      switch back
+    </li>
+    <li>
+      <strong>Unlimited private repositories</strong>
+    </li>
+  </ul>
+
 export class PremiumUpsell extends React.Component<
   IPremiumUpsellProps,
   IPremiumUpsellState
@@ -45,8 +78,8 @@ export class PremiumUpsell extends React.Component<
     this.state = {
       showingCheckout: false,
       loadingCheckout: false,
+      choice: this.props.kind !== 'choice' ? this.props.kind : 'premium',
       coupon: '',
-      plan: 'kactus-1-month',
       couponState: null,
     }
   }
@@ -83,7 +116,7 @@ export class PremiumUpsell extends React.Component<
     }
     await this.props.dispatcher.unlockKactus(this.props.user, token.id, {
       email: token.email,
-      enterprise: this.props.enterprise,
+      enterprise: this.state.choice === 'enterprise',
       coupon: this.state.coupon !== '' ? this.state.coupon : undefined,
     })
 
@@ -152,8 +185,10 @@ export class PremiumUpsell extends React.Component<
             <div>
               <p>
                 Hey! This feature is only available in the{' '}
-                {this.props.enterprise ? 'enterprise' : 'full access'} version
-                of Kactus.
+                {this.state.choice === 'enterprise'
+                  ? 'enterprise'
+                  : 'full access'}{' '}
+                version of Kactus.
               </p>
               <p>
                 You need to login to Kactus using GitHub before unlocking it.
@@ -172,8 +207,9 @@ export class PremiumUpsell extends React.Component<
     }
 
     if (
-      (!this.props.enterprise && this.props.user.unlockedKactus) ||
-      (this.props.enterprise && this.props.user.unlockedEnterpriseKactus)
+      (this.state.choice === 'premium' && this.props.user.unlockedKactus) ||
+      (this.state.choice === 'enterprise' &&
+        this.props.user.unlockedEnterpriseKactus)
     ) {
       return (
         <Dialog
@@ -186,67 +222,37 @@ export class PremiumUpsell extends React.Component<
       )
     }
 
-    const copy = this.props.enterprise
-      ? <div>
-          <p>
-            Hey! This feature is only available in the enterprise version of
-            Kactus.
-          </p>
-          <ul>
-            <li>Unlimited public repositories</li>
-            <li>
-              No locked-in commitment: you can always generate the sketch files
-              to switch back
-            </li>
-            <li>
-              <strong>Unlimited private repositories</strong>
-            </li>
-            <li>
-              <strong>Support single sign-on and on-premises deployment</strong>
-            </li>
-            <li>
-              <strong>
-                Support any git server (BitBucket, Gitlab, self-hosted, etc.)
-              </strong>
-            </li>
-          </ul>
-          <p>
-            More information available{' '}
-            <LinkButton onClick={this.onExternalLink}>here</LinkButton>.
-          </p>
-          <CouponInput
-            couponState={couponState}
-            coupon={coupon}
-            onValueChanged={this.onCouponChange}
-          />
-        </div>
-      : <div>
-          <p>
-            Hey! This feature is only available in the full access version of
-            Kactus.
-          </p>
-          <ul>
-            <li>Unlimited public repositories</li>
-            <li>
-              No locked-in commitment: you can always generate the sketch files
-              to switch back
-            </li>
-            <li>
-              <strong>Unlimited private repositories</strong>
-            </li>
-          </ul>
-          <p>
-            More information available{' '}
-            <LinkButton onClick={this.onExternalLink}>here</LinkButton>.
-          </p>
-          <CouponInput
-            couponState={couponState}
-            coupon={coupon}
-            onValueChanged={this.onCouponChange}
-          />
-        </div>
+    const copy =
+      this.props.kind === 'choice'
+        ? <div className="choices">
+            <div
+              className={
+                'plan' + (this.state.choice === 'premium' ? ' selected' : '')
+              }
+              onClick={this.selectPremiumPlan}
+            >
+              <h2>Premium</h2>
+              <h3>$4.99</h3>
+              <h4>per month</h4>
+              <PremiumCopy />
+            </div>
+            <div
+              className={
+                'plan' + (this.state.choice === 'enterprise' ? ' selected' : '')
+              }
+              onClick={this.selectEnterprisePlan}
+            >
+              <h2>Enterprise</h2>
+              <h3>$11.99</h3>
+              <h4>per month</h4>
+              <EnterpriseCopy />
+            </div>
+          </div>
+        : this.state.choice === 'enterprise'
+          ? <EnterpriseCopy />
+          : <PremiumCopy />
 
-    let price = this.props.enterprise ? 11.99 : 4.99
+    let price = this.state.choice === 'enterprise' ? 11.99 : 4.99
     if (couponState && couponState !== 'loading') {
       if (couponState.percent_off) {
         price = price * (100 - couponState.percent_off) / 100
@@ -263,7 +269,7 @@ export class PremiumUpsell extends React.Component<
             onLoaded={this.finishedLoadingCheckout}
             onToken={this.onToken}
             user={this.props.user}
-            enterprise={this.props.enterprise}
+            enterprise={this.state.choice === 'enterprise'}
             price={price}
           />}
         {!showingCheckout &&
@@ -276,6 +282,16 @@ export class PremiumUpsell extends React.Component<
           >
             <DialogContent>
               {copy}
+              <p>
+                More information available{' '}
+                <LinkButton onClick={this.onExternalLink}>here</LinkButton>.
+              </p>
+              {this.props.kind === 'choice' &&
+                <CouponInput
+                  couponState={couponState}
+                  coupon={coupon}
+                  onValueChanged={this.onCouponChange}
+                />}
             </DialogContent>
 
             <DialogFooter>
@@ -331,4 +347,16 @@ export class PremiumUpsell extends React.Component<
   private signInEnterprise = () => {
     this.props.dispatcher.showEnterpriseSignInDialog(this.props.retryAction)
   }
+
+  private selectPremiumPlan = () => {
+    this.setState({
+      choice: 'premium',
+    })
+  }
+
+  private selectEnterprisePlan = () => {
+    this.setState({
+      choice: 'enterprise',
+    })
+  }
 }
diff --git a/app/styles/ui/_button.scss b/app/styles/ui/_button.scss
@@ -26,14 +26,17 @@
     box-shadow: 0 0 0 1px var(--secondary-button-focus-shadow-color);
   }
 
-  &:disabled { opacity: 0.6; }
+  &:disabled {
+    opacity: 0.6;
+  }
 
   .octicon {
     vertical-align: middle;
   }
 }
 
-.button-component[type='submit'] {
+.button-component[type='submit'],
+.button-component.action-button {
   background-color: var(--button-background);
   color: var(--button-text-color);
   border: 1px solid var(--button-background);
diff --git a/app/styles/ui/_preferences.scss b/app/styles/ui/_preferences.scss
diff --git a/app/styles/ui/dialogs/_premium-upsell.scss b/app/styles/ui/dialogs/_premium-upsell.scss

Original file line number	Diff line number	Diff line change
`@@ -26,14 +26,17 @@`
`26`	`26`	`box-shadow: 0 0 0 1px var(--secondary-button-focus-shadow-color);`
`27`	`27`	`}`
`28`	`28`
`29`		`- &:disabled { opacity: 0.6; }`
	`29`	`+ &:disabled {`
	`30`	`+ opacity: 0.6;`
	`31`	`+ }`
`30`	`32`
`31`	`33`	`.octicon {`
`32`	`34`	`vertical-align: middle;`
`33`	`35`	`}`
`34`	`36`	`}`
`35`	`37`
`36`		`-.button-component[type='submit'] {`
	`38`	`+.button-component[type='submit'],`
	`39`	`+.button-component.action-button {`
`37`	`40`	`background-color: var(--button-background);`
`38`	`41`	`color: var(--button-text-color);`
`39`	`42`	`border: 1px solid var(--button-background);`