make subscription update happen asynchronously on FE

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

@@ -2,6 +2,7 @@
   @action={{this.click}}
   class="wizard-subscription-badge {{this.subscription.subscriptionType}}"
   @title={{this.title}}
+  {{did-insert this.update}}
 >
   <svg
     width="300px"

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

@@ -1,7 +1,5 @@
 import { inject as service } from "@ember/service";
 import { action, computed } from "@ember/object";
-import { ajax } from "discourse/lib/ajax";
-import { popupAjaxError } from "discourse/lib/ajax-error";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import DiscourseURL from "discourse/lib/url";
@@ -39,24 +37,13 @@ export default class WizardSubscriptionBadge extends Component {
 
   @action
   update() {
-    this.subscription.retrieveSubscriptionStatus();
-    // this.updating = true;
-    // return ajax(`${this.basePath}/subscriptions`, {
-    //   type: "POST",
-    // })
-    //   .then(() => {
-    //     if (this.subscription.subscribed) {
-    //       this.updateIcon = "check";
-    //     } else {
-    //       this.updateIcon = "times";
-    //     }
-    //   })
-    //   .catch(popupAjaxError)
-    //   .finally(() => {
-    //     this.updating = false;
-    //     setTimeout(() => {
-    //       this.updateIcon = null;
-    //     }, 7000);
-    //   });
+    this.updating = true;
+    this.updateIcon = "check";
+    this.subscription.retrieveSubscriptionStatus().finally(() => {
+      this.updating = false;
+      setTimeout(() => {
+        this.updateIcon = null;
+      }, 5000);
+    })
   }
-}
+}

assets/javascripts/discourse/services/subscription.js

@@ -23,19 +23,15 @@ export default class SubscriptionService extends Service {
     this.retrieveSubscriptionStatus();
   }
 
-  retrieveSubscriptionStatus() {
-    debugger;
-    ajax("/admin/wizards/subscription")
-      .then((result) => {
-        debugger;
-        this.subscribed = result.subscribed;
-        this.subscriptionType = result.subscription_type;
-        this.subscriptionAttributes = result.subscription_attributes;
-        this.businessSubscription = this.subscriptionType === "business";
-        this.communitySubscription = this.subscriptionType === "community";
-        this.standardSubscription = this.subscriptionType === "standard";
-      })
-      .catch(popupAjaxError);
+  async retrieveSubscriptionStatus() {
+    let result = await ajax("/admin/wizards/subscription").catch(popupAjaxError);
+
+    this.subscribed = result.subscribed;
+    this.subscriptionType = result.subscription_type;
+    this.subscriptionAttributes = result.subscription_attributes;
+    this.businessSubscription = this.subscriptionType === "business";
+    this.communitySubscription = this.subscriptionType === "community";
+    this.standardSubscription = this.subscriptionType === "standard";
   }
 
   get subscriptionLink() {