FEATURE: Better UX for anonymous users (#25)

Improves the subscription flow for anonymous users by making the routes available, and showing a login button. Clicking login from this page will save a `destination_url` cookie so that when logging in they're redirected back to the subscription page they were at.

app/controllers/discourse_subscriptions/subscribe_controller.rb

@@ -5,7 +5,7 @@ module DiscourseSubscriptions
     include DiscourseSubscriptions::Stripe
     include DiscourseSubscriptions::Group
     before_action :set_api_key
-    requires_login
+    requires_login except: [:index, :show]
 
     def index
       begin

assets/javascripts/discourse/components/login-required.js.es6

@@ -0,0 +1,17 @@
+import Component from "@ember/component";
+import cookie from "discourse/lib/cookie";
+import DiscourseURL from "discourse/lib/url";
+import { default as getURL } from "discourse-common/lib/get-url";
+
+export default Component.extend({
+  classNames: ["login-required", "subscriptions"],
+  actions: {
+    createAccount() {
+      const destinationUrl = window.location.href;
+      const cookiePath = getURL("/");
+
+      cookie("destination_url", destinationUrl, { path: cookiePath });
+      DiscourseURL.redirectTo("/login");
+    },
+  },
+});

assets/javascripts/discourse/components/product-list.js.es6

@@ -1,17 +1,12 @@
 import discourseComputed from "discourse-common/utils/decorators";
-import User from "discourse/models/user";
 import { isEmpty } from "@ember/utils";
 import Component from "@ember/component";
 
 export default Component.extend({
   classNames: ["product-list"],
+
   @discourseComputed("products")
   emptyProducts(products) {
     return isEmpty(products);
   },
-
-  @discourseComputed()
-  isLoggedIn() {
-    return User.current();
-  },
 });

assets/javascripts/discourse/controllers/s-index.js.es6

@@ -1,3 +1,10 @@
 import Controller from "@ember/controller";
+import discourseComputed from "discourse-common/utils/decorators";
+import User from "discourse/models/user";
 
-export default Controller.extend({});
+export default Controller.extend({
+  @discourseComputed()
+  isLoggedIn() {
+    return User.current();
+  },
+});

assets/javascripts/discourse/controllers/s-show.js.es6

@@ -5,6 +5,7 @@ import I18n from "I18n";
 
 export default Controller.extend({
   selectedPlan: null,
+  isAnonymous: Ember.computed.not("currentUser"),
 
   init() {
     this._super(...arguments);

assets/javascripts/discourse/templates/components/login-required.hbs

@@ -0,0 +1,2 @@
+<h3>{{i18n 'discourse_subscriptions.subscribe.unauthenticated'}}</h3>
+{{d-button label="log_in" action="createAccount" icon="user" class="btn btn-primary"}}

assets/javascripts/discourse/templates/components/product-list.hbs

@@ -13,7 +13,7 @@
         <div class="product-purchase">
           {{#if product.subscribed}}
             <span class="purchased">&#x2713; {{i18n 'discourse_subscriptions.subscribe.purchased'}}</span>
-            <a class="billing-link" href="/my/billing">{{I18n 'discourse_subscriptions.subscribe.go_to_billing'}}</a> 
+            <a class="billing-link" href="/my/billing">{{I18n 'discourse_subscriptions.subscribe.go_to_billing'}}</a>
           {{else}}
             {{#link-to "s.show" product.id disabled=product.subscribed class="btn btn-primary"}}
               {{i18n 'discourse_subscriptions.subscribe.title'}}
@@ -24,9 +24,4 @@
     </div>
   {{/each}}
 
-  {{#unless isLoggedIn}}
-    <p>
-      {{i18n 'discourse_subscriptions.subscribe.unauthenticated'}}
-    </p>
-  {{/unless}}
 {{/if}}

assets/javascripts/discourse/templates/s/index.hbs

@@ -1 +1,4 @@
-{{product-list products=model}}
+{{#unless isLoggedIn}}
+  {{login-required}}
+{{/unless}}
+{{product-list products=model isLoggedIn=isLoggedIn}}

assets/javascripts/discourse/templates/s/show.hbs

@@ -26,11 +26,13 @@
 
       <hr>
 
-      {{subscribe-card cardElement=cardElement}}
-
       {{#if loading}}
         {{loading-spinner}}
+      {{else if isAnonymous}}
+        {{login-required}}
       {{else}}
+        {{subscribe-card cardElement=cardElement}}
+
         {{d-button
           disabled=loading
           action="stripePaymentHandler"

config/locales/client.en.yml

@@ -63,7 +63,7 @@ en:
       subscribe:
         title: Subscribe
         no_products: There are currently no products available.
-        unauthenticated: You need to create an account to subscribe.
+        unauthenticated: Log in or create an account to subscribe.
         card:
           title: Payment
         customer:

test/javascripts/helpers/product-pretender.js.es6

@@ -1,41 +1,41 @@
-export default function(helpers) {
+export default function (helpers) {
   const { response } = helpers;
 
-  this.get("/s/products", () => {
+  this.get("/s", () => {
     const products = [
       {
         id: "prod_23o8I7tU4g56",
         name: "Awesome Product",
         description:
-          "Subscribe to our awesome product. For only $230.10 per month, you can get access. This is a test site. No real credit card transactions."
+          "Subscribe to our awesome product. For only $230.10 per month, you can get access. This is a test site. No real credit card transactions.",
       },
       {
         id: "prod_B23dc9I7tU4eCy",
         name: "Special Product",
         description:
-          "This is another subscription product. You can have more than one. From $12 per month."
-      }
+          "This is another subscription product. You can have more than one. From $12 per month.",
+      },
     ];
 
     return response(products);
   });
 
-  this.get("/s/products/:id", () => {
-    const product = {};
-
-    return response(product);
-  });
-
-  this.get("/s/plans", () => {
+  this.get("/s/:id", () => {
+    const product = {
+      id: "prod_23o8I7tU4g56",
+      name: "Awesome Product",
+      description:
+        "Subscribe to our awesome product. For only $230.10 per month, you can get access. This is a test site. No real credit card transactions.",
+    };
     const plans = [
       {
         id: "plan_GHGHSHS8654G",
         amount: 200,
         currency: "usd",
-        interval: "month"
-      }
+        interval: "month",
+      },
     ];
 
-    return response(plans);
+    return response({ product, plans });
   });
 }