From 6c6e4021538a227690f7990fdb0ad7982a9aac2d Mon Sep 17 00:00:00 2001 From: Angus McLeod Date: Fri, 17 Nov 2023 16:17:10 +0100 Subject: [PATCH] Update subscription admin ux --- .../components/wizard-subscription-badge.hbs | 22 ++--- .../components/wizard-subscription-badge.js | 3 +- .../components/wizard-subscription-cta.hbs | 7 -- .../components/wizard-subscription-cta.js | 34 ------- .../components/wizard-subscription-status.hbs | 3 +- .../discourse/services/subscription.js | 7 +- assets/stylesheets/common/admin.scss | 89 ++++++------------- .../stylesheets/common/admin/variables.scss | 2 + config/locales/client.en.yml | 18 ++-- ...dmin-wizards-business-subscription-test.js | 4 - ...dmin-wizards-standard-subscription-test.js | 4 - .../admin-wizards-unsubscribed-test.js | 6 +- 12 files changed, 50 insertions(+), 149 deletions(-) delete mode 100644 assets/javascripts/discourse/components/wizard-subscription-cta.hbs delete mode 100644 assets/javascripts/discourse/components/wizard-subscription-cta.js diff --git a/assets/javascripts/discourse/components/wizard-subscription-badge.hbs b/assets/javascripts/discourse/components/wizard-subscription-badge.hbs index dee4724f..992504bb 100644 --- a/assets/javascripts/discourse/components/wizard-subscription-badge.hbs +++ b/assets/javascripts/discourse/components/wizard-subscription-badge.hbs @@ -1,3 +1,14 @@ + + {{#if this.updating}} + {{loading-spinner size="small"}} + {{/if}} + {{d-icon "pavilion-logo"}} {{this.label}} - - - {{#if this.updating}} - {{loading-spinner size="small"}} - {{/if}} \ No newline at end of file diff --git a/assets/javascripts/discourse/components/wizard-subscription-badge.js b/assets/javascripts/discourse/components/wizard-subscription-badge.js index e103c95b..be14b6f8 100644 --- a/assets/javascripts/discourse/components/wizard-subscription-badge.js +++ b/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 diff --git a/assets/javascripts/discourse/components/wizard-subscription-cta.hbs b/assets/javascripts/discourse/components/wizard-subscription-cta.hbs deleted file mode 100644 index 945eb90c..00000000 --- a/assets/javascripts/discourse/components/wizard-subscription-cta.hbs +++ /dev/null @@ -1,7 +0,0 @@ - \ No newline at end of file diff --git a/assets/javascripts/discourse/components/wizard-subscription-cta.js b/assets/javascripts/discourse/components/wizard-subscription-cta.js deleted file mode 100644 index 47b2f382..00000000 --- a/assets/javascripts/discourse/components/wizard-subscription-cta.js +++ /dev/null @@ -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(); - } -} diff --git a/assets/javascripts/discourse/components/wizard-subscription-status.hbs b/assets/javascripts/discourse/components/wizard-subscription-status.hbs index a5c69a1b..5309558c 100644 --- a/assets/javascripts/discourse/components/wizard-subscription-status.hbs +++ b/assets/javascripts/discourse/components/wizard-subscription-status.hbs @@ -1,4 +1,5 @@
+ {{#if authorized}} {{conditional-loading-spinner size="small" condition=unauthorizing}} {{/if}} - -
\ No newline at end of file diff --git a/assets/javascripts/discourse/services/subscription.js b/assets/javascripts/discourse/services/subscription.js index 08ea5278..499e734c 100644 --- a/assets/javascripts/discourse/services/subscription.js +++ b/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": diff --git a/assets/stylesheets/common/admin.scss b/assets/stylesheets/common/admin.scss index f8722c2d..f188ee1d 100644 --- a/assets/stylesheets/common/admin.scss +++ b/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 { - color: $primary-medium; - } - - svg { + svg.d-icon-pavilion-logo { 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); - border: 1.5px solid rgba($subscription_standard, 0.5); - color: $subscription_standard; + background-color: var(--subscription-standard); + border: 1.5px solid var(--subscription-standard); } &.business { - background-color: $subscription_business; - border: 1.5px solid $subscription_business; - color: $secondary; + background-color: var(--subscription-business); + border: 1.5px solid var(--subscription-business); } &.community { - background-color: $subscription_community; - border: 1.5px solid $pavilion_primary; - color: $pavilion_primary; + background-color: var(--subscription-community); + border: 1.5px solid var(--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); + } + } } } diff --git a/assets/stylesheets/common/admin/variables.scss b/assets/stylesheets/common/admin/variables.scss index 33a67c2d..8b263fd5 100644 --- a/assets/stylesheets/common/admin/variables.scss +++ b/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}; diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 0a088855..e5704cde 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -549,7 +549,7 @@ en: label: Authorize title: Authorize your subscription on this site deauthorize: - label: deauthorize + label: Deauthorize title: Deauthorize your subscription on this site update: title: "Update subscription status" @@ -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: diff --git a/test/javascripts/acceptance/admin-wizards-business-subscription-test.js b/test/javascripts/acceptance/admin-wizards-business-subscription-test.js index ea8cbac2..5a17a023 100644 --- a/test/javascripts/acceptance/admin-wizards-business-subscription-test.js +++ b/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" ); }); diff --git a/test/javascripts/acceptance/admin-wizards-standard-subscription-test.js b/test/javascripts/acceptance/admin-wizards-standard-subscription-test.js index 0670e703..ffed5287 100644 --- a/test/javascripts/acceptance/admin-wizards-standard-subscription-test.js +++ b/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" ); }); diff --git a/test/javascripts/acceptance/admin-wizards-unsubscribed-test.js b/test/javascripts/acceptance/admin-wizards-unsubscribed-test.js index 52038d5e..6c34a935 100644 --- a/test/javascripts/acceptance/admin-wizards-unsubscribed-test.js +++ b/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" - ); - assert.strictEqual( - query("button.btn-pavilion-support span").innerText.trim(), - "Get a Subscription" + "Subscribe" ); });