Show "Pricings" for first activation

Before, we showed people without a registered card a form without any
explanation. We felt this was confusing. Updated the activation button
to redirect people to "Pricings" for more information.

app/assets/javascripts/components/__tests__/upgrade_subscription_link-test.jsx

@@ -22,11 +22,14 @@ it('renders appropriately', () => {
 
 it('renders appropriately', () => {
   const ajaxSpy = sinon.spy(Ajax, 'upgradeSubscription');
+  const nextTier = { price: 49, title: "Chihuahua" }
 
   const wrapper = mount(
     <UpgradeSubscriptionLink
       authenticityToken={"csrf_token"}
+      nextTier={nextTier}
       repoId={1}
+      userHasCard={true}
     />
   );
 

app/assets/javascripts/components/notify_tier_change.jsx

@@ -60,7 +60,13 @@ class NotifyTierChange extends React.Component {
   }
 
   render() {
-    const { authenticity_token, repo_id, repo_name } = this.props;
+    const {
+      authenticity_token,
+      next_tier,
+      repo_id,
+      repo_name,
+      user_has_card,
+    } = this.props;
 
     const tierUsage = this.getTierUsage();
 
@@ -89,7 +95,9 @@ class NotifyTierChange extends React.Component {
 
           <UpgradeSubscriptionLink
             authenticityToken={authenticity_token}
+            nextTier={next_tier}
             repoId={repo_id}
+            userHasCard={user_has_card}
           />
           <a className="button tier-change-cancel" href="/repos">Cancel</a>
         </div>

app/assets/javascripts/components/repos_container.jsx

@@ -11,7 +11,6 @@ class ReposContainer extends React.Component {
     filterTerm: null,
     repos: [],
     organizations: [],
-    userHasCard: this.props.userHasCard
   }
 
   fetchReposAndOrgs() {
@@ -90,17 +89,6 @@ class ReposContainer extends React.Component {
     });
   }
 
-  activatePaidRepo(repo) {
-    if (this.state.userHasCard) {
-      this.createSubscriptionWithExistingCard(repo);
-    } else {
-      this.showCreditCardForm(
-        repo,
-        (token) => this.createSubscriptionWithNewCard(repo, token)
-      );
-    }
-  }
-
   updateSubscribedRepoCount() {
     this.getUser().then(user => {
       const subscribedRepoCount = user.subscribed_repo_count;
@@ -151,20 +139,6 @@ class ReposContainer extends React.Component {
     }).catch(error => this.onSubscriptionError(repo, error));
   }
 
-  createSubscriptionWithNewCard(repo, stripeToken) {
-    Ajax.createSubscription({
-      repo_id: repo.id,
-      card_token: stripeToken.id,
-      email_address: stripeToken.email
-    }).then( resp => {
-      this.activateAndTrackRepoSubscription(
-        repo, resp.stripe_subscription_id
-      );
-    }).then( () => {
-      this.setState({ userHasCard: true });
-    }).catch(error => this.onSubscriptionError(repo, error));
-  }
-
   activateFreeRepo(repo) {
     Ajax.activateRepo(
       repo
@@ -189,7 +163,7 @@ class ReposContainer extends React.Component {
       }
     } else {
       if (repo.price_in_dollars > 0) {
-        this.activatePaidRepo(repo);
+        this.createSubscriptionWithExistingCard(repo);
       } else {
         this.activateFreeRepo(repo);
       }
@@ -198,20 +172,6 @@ class ReposContainer extends React.Component {
     this.setState({isProcessingId: null});
   }
 
-  showCreditCardForm(options, successCallback) {
-    StripeCheckout.configure({
-      key: Hound.settings.stripePublishableKey,
-      image: Hound.settings.iconPath,
-      token: successCallback
-    }).open({
-      name: options.full_plan_name,
-      amount: options.price_in_cents,
-      email: Hound.settings.userEmailAddress,
-      panelLabel: options.buttonText || "{{amount}} per month",
-      allowRememberMe: false
-    });
-  }
-
   getUser() {
     return $.ajax({
       url: "/user.json",

app/assets/javascripts/components/upgrade_subscription_link.jsx

@@ -5,14 +5,50 @@ class UpgradeSubscriptionLink extends React.Component {
     $.ajaxSetup({ headers: { "X-XSRF-Token": this.props.authenticityToken } });
   }
 
-  render() {
-    const repoId = this.props.repoId;
+  upgradeWithNewCard(token) {
+    const { repoId } = this.props;
+    Ajax.upgradeSubscription(repoId, { card_token: token.id })
+  }
+
+  checkout() {
+    const { stripePublishableKey, iconPath } = Hound.settings;
+
+    return StripeCheckout.configure({
+      key: stripePublishableKey,
+      image: iconPath,
+      token: (token) => this.upgradeWithNewCard(token),
+    })
+  }
+
+  showCreditCardForm() {
+    const { userEmailAddress } = Hound.settings;
+    const { price, title } = this.props.nextTier;
 
+    this.checkout().open({
+      name: title,
+      amount: price * 100,
+      email: userEmailAddress,
+      panelLabel: "{{amount}} per month",
+      allowRememberMe: false
+    });
+  }
+
+  handleClick() {
+    const { repoId, userHasCard } = this.props;
+
+    if (userHasCard) {
+      Ajax.upgradeSubscription(repoId);
+    } else {
+      this.showCreditCardForm();
+    }
+  }
+
+  render() {
     return(
       <a
         className="repo-toggle tier-change-accept"
         href="javascript:void(0);"
-        onClick={() => Ajax.upgradeSubscription(repoId)}
+        onClick={() => this.handleClick()}
       >Upgrade</a>
     );
   }

app/assets/javascripts/lib/ajax.jsx

@@ -42,11 +42,12 @@ export function updateOwner(id, params) {
   });
 }
 
-export function upgradeSubscription(id) {
+export function upgradeSubscription(id, params) {
   return $.ajax({
-    dataType: "json",
-    type: "PUT",
     url: `/repos/${id}/subscription.json`,
+    type: "PUT",
+    dataType: "json",
+    data: params,
     success: () => {
       document.location.href = "/repos";
     }

app/controllers/subscriptions_controller.rb

@@ -6,7 +6,7 @@ class FailedToActivate < StandardError; end
 
   def create
     if Tier.new(current_user).full?
-      head 402
+      render json: {}, status: :payment_required
     elsif activator.activate && create_subscription
       render json: repo, status: :created
     else

app/models/tier.rb

@@ -10,7 +10,7 @@ def current
   end
 
   def full?
-    has_repos? && pricing_changes?
+    pricing_changes?
   end
 
   def next
@@ -29,10 +29,6 @@ def count
     repos.count
   end
 
-  def has_repos?
-    count.positive?
-  end
-
   def previous_repo_count
     count.pred
   end

app/views/pricings/index.html.erb

@@ -1,7 +1,11 @@
+<%= render "settings" %>
+
 <%= react_component(
   "app.NotifyTierChange",
   authenticity_token: form_authenticity_token,
+  next_tier: current_user.next_tier,
   plans: @pricings,
   repo_id: @repo.id,
   repo_name: @repo.name,
+  user_has_card: current_user.stripe_customer_id.present?,
 ) %>

spec/features/user_activates_a_repo_spec.rb

@@ -14,7 +14,7 @@
     sign_in_as(user, "letmein")
     click_on "Activate"
 
-    expect(page).to have_text "Private Repos 1 / 4"
+    expect(page).to have_text "Pricing: Change of Plans"
   end
 
   scenario "user upgrades within a tier" do

spec/models/tier_spec.rb

@@ -27,11 +27,11 @@
     end
 
     context "when the user has no repos" do
-      it "returns false" do
+      it "is full" do
         user = create(:user)
         tier = Tier.new(user)
 
-        expect(tier).to_not be_full
+        expect(tier).to be_full
       end
     end