Merge pull request #280 from paviliondev/improve_subscription_controls_ux

Update subscription admin ux

assets/javascripts/discourse/components/wizard-subscription-badge.hbs

@@ -1,3 +1,14 @@
+<DButton
+  @icon={{this.updateIcon}}
+  @action={{this.update}}
+  class="btn update"
+  @disabled={{this.updating}}
+  @title="admin.wizard.subscription.update.title"
+>
+  {{#if this.updating}}
+    {{loading-spinner size="small"}}
+  {{/if}}
+</DButton>
 <DButton
   @action={{this.click}}
   class="wizard-subscription-badge {{this.subscription.subscriptionType}}"
@@ -6,14 +17,3 @@
   {{d-icon "pavilion-logo"}}
   <span>{{this.label}}</span>
 </DButton>
-<DButton
-  @icon={{this.updateIcon}}
-  @action={{this.update}}
-  class="btn btn-primary update"
-  @disabled={{this.updating}}
-  @title="admin.wizard.subscription.update.title"
->
-  {{#if this.updating}}
-    {{loading-spinner size="small"}}
-  {{/if}}
-</DButton>

assets/javascripts/discourse/components/wizard-subscription-badge.js

@@ -2,7 +2,6 @@ import { inject as service } from "@ember/service";
 import { action, computed } from "@ember/object";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-import DiscourseURL from "discourse/lib/url";
 import I18n from "I18n";
 
 export default class WizardSubscriptionBadge extends Component {
@@ -32,7 +31,7 @@ export default class WizardSubscriptionBadge extends Component {
 
   @action
   click() {
-    DiscourseURL.routeTo(this.subscription.subscriptionLink);
+    window.open(this.subscription.subscriptionCtaLink, "_blank").focus();
   }
 
   @action

assets/javascripts/discourse/components/wizard-subscription-cta.hbs

@@ -1,7 +0,0 @@
-<DButton
-  @action={{this.click}}
-  class="btn btn-pavilion-support {{this.subscription.subscriptionType}}"
-  @title={{this.title}}
-  @label={{this.label}}
-  @icon={{this.icon}}
-/>

assets/javascripts/discourse/components/wizard-subscription-cta.js

@@ -1,34 +0,0 @@
-import { inject as service } from "@ember/service";
-import { action, computed } from "@ember/object";
-import Component from "@glimmer/component";
-
-export default class WizardSubscriptionCta extends Component {
-  @service subscription;
-
-  @computed("subscription.subscribed")
-  get i18nKey() {
-    return `admin.wizard.subscription.cta.${
-      this.subscription.subscribed ? "subscribed" : "none"
-    }`;
-  }
-
-  @computed("subscription.subscribed")
-  get icon() {
-    return this.subscription.subscribed ? "far-life-ring" : "external-link-alt";
-  }
-
-  @computed("i18nKey")
-  get title() {
-    return `${this.i18nKey}.title`;
-  }
-
-  @computed("i18nKey")
-  get label() {
-    return `${this.i18nKey}.label`;
-  }
-
-  @action
-  click() {
-    window.open(this.subscription.subscriptionCtaLink, "_blank").focus();
-  }
-}

assets/javascripts/discourse/components/wizard-subscription-status.hbs

@@ -1,4 +1,5 @@
 <div class="supplier-authorize">
+  <WizardSubscriptionBadge />
   {{#if authorized}}
     {{conditional-loading-spinner size="small" condition=unauthorizing}}
     <DButton
@@ -18,6 +19,4 @@
       @action={{this.authorize}}
     />
   {{/if}}
-  <WizardSubscriptionBadge />
-  <WizardSubscriptionCta />
 </div>

assets/javascripts/discourse/services/subscription.js

@@ -7,7 +7,7 @@ const PRODUCT_PAGE = "https://custom-wizard.pavilion.tech";
 const SUPPORT_MESSAGE =
   "https://coop.pavilion.tech/new-message?username=support&title=Custom%20Wizard%20Support";
 const MANAGER_CATEGORY =
-  "https://discourse.pluginmanager.org/c/discourse-custom-wizard";
+  "https://coop.pavilion.tech/c/support/discourse-custom-wizard";
 
 export default class SubscriptionService extends Service {
   @tracked subscribed = false;
@@ -16,7 +16,6 @@ export default class SubscriptionService extends Service {
   @tracked communitySubscription = false;
   @tracked standardSubscription = false;
   @tracked subscriptionAttributes = {};
-  subscriptionLandingUrl = PRODUCT_PAGE;
 
   async init() {
     super.init(...arguments);
@@ -49,10 +48,6 @@ export default class SubscriptionService extends Service {
     this.standardSubscription = this.subscriptionType === "standard";
   }
 
-  get subscriptionLink() {
-    return this.subscriptionLandingUrl;
-  }
-
   get subscriptionCtaLink() {
     switch (this.subscriptionType) {
       case "none":

assets/stylesheets/common/admin.scss

@@ -823,25 +823,6 @@ $error: #ef1700;
   vertical-align: middle;
 }
 
-.btn.btn-pavilion-support {
-  background: var(--pavilion-primary);
-  color: var(--pavilion-secondary);
-
-  .d-icon {
-    color: var(--pavilion-secondary);
-  }
-
-  &:hover,
-  &:focus {
-    background: darken($pavilion_primary, 5%);
-
-    &[href],
-    svg.d-icon {
-      color: darken($pavilion_secondary, 10%);
-    }
-  }
-}
-
 .wizard-subscription-container {
   width: 100%;
   padding: 1em;
@@ -877,35 +858,40 @@ $error: #ef1700;
   padding: 0.5em 0.65em;
   background-color: rgba($primary-medium, 0.05);
   border: 1.5px solid rgba($primary-medium, 0.5);
-  color: $primary-medium;
+  color: var(--secondary);
 
-  &:hover {
+  svg.d-icon-pavilion-logo {
-    color: $primary-medium;
-  }
-
-  svg {
     width: 15px;
     height: 15px;
     margin-right: 0.45em;
     margin-bottom: 0.15em;
+    color: var(--secondary);
+  }
+
+  &.none {
+    background-color: var(--subscription-none);
+    border: 1.5px solid var(--subscription-none);
   }
 
   &.standard {
-    background-color: rgba($subscription_standard, 0.05);
+    background-color: var(--subscription-standard);
-    border: 1.5px solid rgba($subscription_standard, 0.5);
+    border: 1.5px solid var(--subscription-standard);
-    color: $subscription_standard;
   }
 
   &.business {
-    background-color: $subscription_business;
+    background-color: var(--subscription-business);
-    border: 1.5px solid $subscription_business;
+    border: 1.5px solid var(--subscription-business);
-    color: $secondary;
   }
 
   &.community {
-    background-color: $subscription_community;
+    background-color: var(--subscription-community);
-    border: 1.5px solid $pavilion_primary;
+    border: 1.5px solid var(--pavilion-primary);
-    color: $pavilion_primary;
+    color: var(--pavilion-primary);
+
+    &:hover,
+    svg {
+      color: var(--pavilion-primary);
+    }
   }
 
   .d-icon {
@@ -942,42 +928,23 @@ $error: #ef1700;
       height: 34px;
     }
 
-    .btn-pavilion-support {
-      &:hover {
-        color: var(--pavilion-secondary);
-      }
-    }
-
     .wizard-subscription-badge {
       margin-right: 5px;
       svg {
         margin-right: 0.45em;
       }
-      &.none {
-        svg {
-          color: #919191;
-        }
-      }
-      &.community,
-      &.standard,
-      &.business {
-        svg {
-          color: #fff;
-        }
-      }
-    }
-
-    .loading-container {
-      svg,
-      div {
-        vertical-align: -moz-middle-with-baseline;
-        vertical-align: -webkit-baseline-middle;
-        margin-right: 3px;
-      }
     }
 
     .btn-primary {
       margin-right: 5px;
     }
+
+    .deauthorize {
+      background-color: var(--secondary);
+
+      &:hover {
+        color: var(--primary);
+      }
+    }
   }
 }

assets/stylesheets/common/admin/variables.scss

@@ -2,6 +2,7 @@ $pavilion_primary: #3c1c8c;
 $pavilion_secondary: #ffffff;
 $pavilion_warning: rgb(243, 163, 61);
 
+$subscription_none: $pavilion_primary;
 $subscription_standard: $pavilion_primary;
 $subscription_business: #333;
 $subscription_community: #fff;
@@ -10,6 +11,7 @@ $subscription_community: #fff;
   --pavilion-primary: #{$pavilion_primary};
   --pavilion-secondary: #{$pavilion_secondary};
   --pavilion-warning: #{$pavilion_warning};
+  --subscription-none: #{$subscription_none};
   --subscription-standard: #{$subscription_standard};
   --subscription-business: #{$subscription_business};
   --subscription-community: #{$subscription_community};

config/locales/client.en.yml

@@ -167,13 +167,13 @@ en:
             destroy_complete: Destruction complete
           subscription:
             documentation: Check out the subscription documentation
-            authorize: "Authorize this forum to use your Custom Wizard subscription plan on %{server}."
+            authorize: "Connect this forum to use your Custom Wizard subscription plan on %{server}."
-            not_subscribed: "You've authorized, but are not currently subscribed to a Custom Wizard plan on %{server}."
+            not_subscribed: "You've connected, but are not currently subscribed to a Custom Wizard plan on %{server}."
             subscription_expiring: "Your subscription is active, but will expire in the next 48 hours."
             subscription_active: "Your subscription is active."
             subscription_inactive: "Your subscription is inactive on this forum. Read more in <a href='https://pavilion.tech/products/discourse-custom-wizard-plugin/documentation/'>the documentation</a>."
-            unauthorized: "You're unauthorized. If you have a subscription, it will become inactive in the next 48 hours."
+            unauthorized: "You're not connected. If you have a subscription, it will become inactive in the next 48 hours."
-            unauthorize_failed: Failed to unauthorize.
+            unauthorize_failed: Failed to disconnect.
           submissions:
             select: "Select a wizard to see its submissions"
             viewing: "You're viewing the submissions of the %{wizardName}"
@@ -546,11 +546,11 @@ en:
         subscription:
           title: Subscriber Features
           authorize:
-            label: Authorize
+            label: Connect
-            title: Authorize your subscription on this site
+            title: Connect your subscription to this site
           deauthorize:
-            label: deauthorize
+            label: Disconnect
-            title: Deauthorize your subscription on this site
+            title: Disconnect your subscription from this site
           update:
             title: "Update subscription status"
           subscribed:
@@ -563,25 +563,17 @@ en:
             selector: not subscribed
           type:
             none:
-              label: Not Subscribed
+              label: Subscribe
               title: There is no Custom Wizard subscription active on this forum.
             business:
-              label: Business
+              label: Support
               title: There is a Custom Wizard Business subscription active on this forum.
             standard:
-              label: Standard
+              label: Support
               title: There is a Custom Wizard Standard subscription active on this forum.
             community:
-              label: Community
-              title: There is a Custom Wizard Community subscription active on this forum.
-          cta:
-            none:
-              label: Get a Subscription
-              title: Get a subscription for this forum.
-            subscribed:
               label: Support
-              title: Get support for your subscription.
+              title: There is a Custom Wizard Community subscription active on this forum.
-
 
   wizard_js:
     group:

plugin.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 # name: discourse-custom-wizard
 # about: Forms for Discourse. Better onboarding, structured posting, data enrichment, automated actions and much more.
-# version: 2.5.1
+# version: 2.5.2
 # authors: Angus McLeod, Faizaan Gagan, Robert Barrow, Keegan George, Kaitlin Maddever, Juan Marcos Gutierrez Ramos
 # url: https://github.com/paviliondev/discourse-custom-wizard
 # contact_emails: development@pavilion.tech

test/javascripts/acceptance/admin-wizards-business-subscription-test.js

@@ -71,10 +71,6 @@ acceptance("Admin | Custom Wizard Business Subscription", function (needs) {
     );
     assert.strictEqual(
       query("button.wizard-subscription-badge span").innerText.trim(),
-      "Business"
-    );
-    assert.strictEqual(
-      query("button.btn-pavilion-support span").innerText.trim(),
       "Support"
     );
   });

test/javascripts/acceptance/admin-wizards-standard-subscription-test.js

@@ -71,10 +71,6 @@ acceptance("Admin | Custom Wizard Standard Subscription", function (needs) {
     );
     assert.strictEqual(
       query("button.wizard-subscription-badge span").innerText.trim(),
-      "Standard"
-    );
-    assert.strictEqual(
-      query("button.btn-pavilion-support span").innerText.trim(),
       "Support"
     );
   });

test/javascripts/acceptance/admin-wizards-unsubscribed-test.js

@@ -84,11 +84,7 @@ acceptance("Admin | Custom Wizard Unsubscribed", function (needs) {
     );
     assert.strictEqual(
       query("button.wizard-subscription-badge span").innerText.trim(),
-      "Not Subscribed"
+      "Subscribe"
-    );
-    assert.strictEqual(
-      query("button.btn-pavilion-support span").innerText.trim(),
-      "Get a Subscription"
     );
   });