FEATURE: Add new stripe based pricing table (#202)

This commit adds an optional new stripe based pricing table.
If the user is logged in, the email field will be prepopulated with the users email.

The pricing table can be configured in the stripe dashboard.

Once the discourse_subscriptions_pricing_table setting is filled with the pricing table embed code from the stripe dashboard,
the pricing table will be displayed on /s/subscriptions

For more details see https://stripe.com/docs/payments/checkout/pricing-table
---------

Co-authored-by: spirobel <[email protected]>

assets/javascripts/discourse/controllers/subscriptions.js

@@ -0,0 +1,43 @@
+import Controller from "@ember/controller";
+import { computed } from "@ember/object";
+import { htmlSafe } from "@ember/template";
+import I18n from "I18n";
+
+export default Controller.extend({
+  init() {
+    this._super(...arguments);
+    if (this.currentUser) {
+      this.currentUser
+        .checkEmail()
+        .then(() => this.set("email", this.currentUser.email));
+    }
+  },
+  pricingTable: computed("email", function () {
+    try {
+      const pricingTableId =
+        this.siteSettings.discourse_subscriptions_pricing_table_id;
+      const publishableKey =
+        this.siteSettings.discourse_subscriptions_public_key;
+      const pricingTableEnabled =
+        this.siteSettings.discourse_subscriptions_pricing_table_enabled;
+
+      if (!pricingTableEnabled || !pricingTableId || !publishableKey) {
+        throw new Error("Pricing table not configured");
+      }
+
+      if (this.currentUser) {
+        return htmlSafe(`<stripe-pricing-table
+                pricing-table-id="${pricingTableId}"
+                publishable-key="${publishableKey}"
+                customer-email="${this.email}"></stripe-pricing-table>`);
+      } else {
+        return htmlSafe(`<stripe-pricing-table
+                pricing-table-id="${pricingTableId}"
+                publishable-key="${publishableKey}"
+                ></stripe-pricing-table>`);
+      }
+    } catch (error) {
+      return I18n.t("discourse_subscriptions.subscribe.no_products");
+    }
+  }),
+});

assets/javascripts/discourse/initializers/setup-subscriptions.js

@@ -8,11 +8,14 @@ export default {
       const siteSettings = container.lookup("service:site-settings");
       const isNavLinkEnabled =
         siteSettings.discourse_subscriptions_extra_nav_subscribe;
+      const isPricingTableEnabled =
+        siteSettings.discourse_subscriptions_pricing_table_enabled;
+      const subscribeHref = isPricingTableEnabled ? "/s/subscriptions" : "/s";
       if (isNavLinkEnabled) {
         api.addNavigationBarItem({
           name: "subscribe",
           displayName: I18n.t("discourse_subscriptions.navigation.subscribe"),
-          href: "/s",
+          href: subscribeHref,
         });
       }
 

assets/javascripts/discourse/subscriptions-route-map.js

@@ -1,4 +1,5 @@
 export default function () {
+  this.route("subscriptions", { path: "/s/subscriptions" });
   this.route("subscribe", { path: "/s" }, function () {
     this.route("show", { path: "/:subscription-id" });
   });

assets/javascripts/discourse/templates/subscriptions.hbs

@@ -0,0 +1,3 @@
+<div class="container">
+  {{pricingTable}}
+</div>