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.

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"