DEV: Refactor bootbox dialogs (#137)

.discourse-compatibility

@@ -0,0 +1 @@
+2.9.0.beta9: 39b7253c082270e33839f4b0821fbf75abfdd826

assets/javascripts/discourse/controllers/admin-plugins-discourse-subscriptions-products-show-plans-show.js

@@ -2,7 +2,7 @@ import discourseComputed from "discourse-common/utils/decorators";
 import DiscourseURL from "discourse/lib/url";
 import Controller from "@ember/controller";
 import { alias } from "@ember/object/computed";
-import bootbox from "bootbox";
+import { popupAjaxError } from "discourse/lib/ajax-error";
 
 const RECURRING = "recurring";
 const ONE_TIME = "one_time";
@@ -83,9 +83,7 @@ export default Controller.extend({
       this.get("model.plan")
         .save()
         .then(() => this.redirect(this.productId))
-        .catch((data) =>
+        .catch(popupAjaxError);
-          bootbox.alert(data.jqXHR.responseJSON.errors.join("\n"))
-        );
     },
 
     updatePlan() {
@@ -95,9 +93,7 @@ export default Controller.extend({
       this.get("model.plan")
         .update()
         .then(() => this.redirect(this.productId))
-        .catch((data) =>
+        .catch(popupAjaxError);
-          bootbox.alert(data.jqXHR.responseJSON.errors.join("\n"))
-        );
     },
   },
 });

assets/javascripts/discourse/controllers/admin-plugins-discourse-subscriptions.js

@@ -4,10 +4,12 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
 import Controller from "@ember/controller";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "I18n";
-import bootbox from "bootbox";
+import { inject as service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
 
 export default Controller.extend({
   loading: false,
+  dialog: service(),
 
   @discourseComputed
   stripeConfigured() {
@@ -29,26 +31,20 @@ export default Controller.extend({
     ajax(`/s/admin/refresh`, {
       method: "post",
     }).then(() => {
-      bootbox.alert(
+      this.dialog.alert(
-        I18n.t("discourse_subscriptions.campaign.refresh_page"),
+        I18n.t("discourse_subscriptions.campaign.refresh_page")
-        () => {
-          this.transitionToRoute(
-            "adminPlugins.discourse-subscriptions.products"
-          );
-        }
       );
     });
   },
 
   @action
   createOneClickCampaign() {
-    bootbox.confirm(
+    this.dialog.yesNoConfirm({
-      I18n.t("discourse_subscriptions.campaign.confirm_creation"),
+      title: I18n.t("discourse_subscriptions.campaign.confirm_creation_title"),
-      (result) => {
+      message: htmlSafe(
-        if (!result) {
+        I18n.t("discourse_subscriptions.campaign.confirm_creation")
-          return;
+      ),
-        }
+      didConfirm: () => {
-
         this.set("loading", true);
 
         ajax(`/s/admin/create-campaign`, {
@@ -56,15 +52,15 @@ export default Controller.extend({
         })
           .then(() => {
             this.set("loading", false);
-            bootbox.alert(
+            this.dialog.confirm({
-              I18n.t("discourse_subscriptions.campaign.created"),
+              message: I18n.t("discourse_subscriptions.campaign.created"),
-              () => {
+              shouldDisplayCancel: false,
-                this.send("showSettings");
+              didConfirm: () => this.send("showSettings"),
-              }
+              didCancel: () => this.send("showSettings"),
-            );
+            });
           })
           .catch(popupAjaxError);
-      }
+      },
-    );
+    });
   },
 });

assets/javascripts/discourse/controllers/subscribe-show.js

@@ -4,9 +4,10 @@ import Transaction from "discourse/plugins/discourse-subscriptions/discourse/mod
 import I18n from "I18n";
 import { not } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
-import bootbox from "bootbox";
+import { inject as service } from "@ember/service";
 
 export default Controller.extend({
+  dialog: service(),
   selectedPlan: null,
   promoCode: null,
   isAnonymous: not("currentUser"),
@@ -23,7 +24,7 @@ export default Controller.extend({
   },
 
   alert(path) {
-    bootbox.alert(I18n.t(`discourse_subscriptions.${path}`));
+    this.dialog.alert(I18n.t(`discourse_subscriptions.${path}`));
   },
 
   @discourseComputed("model.product.repurchaseable", "model.product.subscribed")
@@ -63,7 +64,7 @@ export default Controller.extend({
           return result;
         } else {
           this.set("loading", false);
-          bootbox.alert(result.error.message || result.error);
+          this.dialog.alert(result.error.message || result.error);
           return result;
         }
       });
@@ -99,7 +100,7 @@ export default Controller.extend({
       transaction
         .then((result) => {
           if (result.error) {
-            bootbox.alert(result.error.message || result.error);
+            this.dialog.alert(result.error.message || result.error);
           } else if (
             result.status === "incomplete" ||
             result.status === "open"
@@ -122,7 +123,7 @@ export default Controller.extend({
           }
         })
         .catch((result) => {
-          bootbox.alert(
+          this.dialog.alert(
             result.jqXHR.responseJSON.errors[0] || result.errorThrown
           );
           this.set("loading", false);

assets/javascripts/discourse/controllers/user-billing-subscriptions-card.js

@@ -3,9 +3,10 @@ import { action } from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import I18n from "I18n";
-import bootbox from "bootbox";
+import { inject as service } from "@ember/service";
 
 export default Controller.extend({
+  dialog: service(),
   loading: false,
   saved: false,
   init() {
@@ -29,7 +30,7 @@ export default Controller.extend({
     });
 
     if (paymentMethodObject.error) {
-      bootbox.alert(
+      this.dialog.alert(
         paymentMethodObject.error?.message || I18n.t("generic_error")
       );
       this.set("loading", false);

assets/javascripts/discourse/routes/admin-plugins-discourse-subscriptions-products-index.js

@@ -2,24 +2,23 @@ import Route from "@ember/routing/route";
 import AdminProduct from "discourse/plugins/discourse-subscriptions/discourse/models/admin-product";
 import I18n from "I18n";
 import { action } from "@ember/object";
-import bootbox from "bootbox";
+import { inject as service } from "@ember/service";
 
 export default Route.extend({
+  dialog: service(),
+
   model() {
     return AdminProduct.findAll();
   },
 
   @action
   destroyProduct(product) {
-    bootbox.confirm(
+    this.dialog.yesNoConfirm({
-      I18n.t(
+      message: I18n.t(
         "discourse_subscriptions.admin.products.operations.destroy.confirm"
       ),
-      I18n.t("no_value"),
+      didConfirm: () => {
-      I18n.t("yes_value"),
+        return product
-      (confirmed) => {
-        if (confirmed) {
-          product
           .destroy()
           .then(() => {
             this.controllerFor(
@@ -29,10 +28,9 @@ export default Route.extend({
               .removeObject(product);
           })
           .catch((data) =>
-              bootbox.alert(data.jqXHR.responseJSON.errors.join("\n"))
+            this.dialog.alert(data.jqXHR.responseJSON.errors.join("\n"))
-            );
-        }
-      }
           );
       },
+    });
+  },
 });

assets/javascripts/discourse/routes/admin-plugins-discourse-subscriptions-products-show.js

@@ -4,9 +4,10 @@ import AdminPlan from "discourse/plugins/discourse-subscriptions/discourse/model
 import I18n from "I18n";
 import { hash } from "rsvp";
 import { action } from "@ember/object";
-import bootbox from "bootbox";
+import { inject as service } from "@ember/service";
 
 export default Route.extend({
+  dialog: service(),
   model(params) {
     const product_id = params["product-id"];
     let product;
@@ -24,26 +25,22 @@ export default Route.extend({
 
   @action
   destroyPlan(plan) {
-    bootbox.confirm(
+    this.dialog.yesNoConfirm({
-      I18n.t("discourse_subscriptions.admin.plans.operations.destroy.confirm"),
+      message: I18n.t(
-      I18n.t("no_value"),
+        "discourse_subscriptions.admin.plans.operations.destroy.confirm"
-      I18n.t("yes_value"),
+      ),
-      (confirmed) => {
+      didConfirm: () => {
-        if (confirmed) {
         plan
           .destroy()
           .then(() => {
-              this.controllerFor(
+            this.controllerFor("adminPluginsDiscourseSubscriptionsProductsShow")
-                "adminPluginsDiscourseSubscriptionsProductsShow"
-              )
               .get("model.plans")
               .removeObject(plan);
           })
           .catch((data) =>
-              bootbox.alert(data.jqXHR.responseJSON.errors.join("\n"))
+            this.dialog.alert(data.jqXHR.responseJSON.errors.join("\n"))
-            );
-        }
-      }
           );
       },
+    });
+  },
 });

assets/javascripts/discourse/routes/admin-plugins-discourse-subscriptions-subscriptions.js

@@ -2,9 +2,10 @@ import I18n from "I18n";
 import Route from "@ember/routing/route";
 import AdminSubscription from "discourse/plugins/discourse-subscriptions/discourse/models/admin-subscription";
 import { action } from "@ember/object";
-import bootbox from "bootbox";
+import { inject as service } from "@ember/service";
 
 export default Route.extend({
+  dialog: service(),
   model() {
     return AdminSubscription.find();
   },
@@ -19,9 +20,11 @@ export default Route.extend({
       .then((result) => {
         subscription.set("status", result.status);
         this.send("closeModal");
-        bootbox.alert(I18n.t("discourse_subscriptions.admin.canceled"));
+        this.dialog.alert(I18n.t("discourse_subscriptions.admin.canceled"));
       })
-      .catch((data) => bootbox.alert(data.jqXHR.responseJSON.errors.join("\n")))
+      .catch((data) =>
+        this.dialog.alert(data.jqXHR.responseJSON.errors.join("\n"))
+      )
       .finally(() => {
         subscription.set("loading", false);
         this.refresh();

assets/javascripts/discourse/routes/user-billing-subscriptions-index.js

@@ -2,9 +2,10 @@ import Route from "@ember/routing/route";
 import UserSubscription from "discourse/plugins/discourse-subscriptions/discourse/models/user-subscription";
 import I18n from "I18n";
 import { action } from "@ember/object";
-import bootbox from "bootbox";
+import { inject as service } from "@ember/service";
 
 export default Route.extend({
+  dialog: service(),
   model() {
     return UserSubscription.findAll();
   },
@@ -15,28 +16,24 @@ export default Route.extend({
   },
   @action
   cancelSubscription(subscription) {
-    bootbox.confirm(
+    this.dialog.yesNoConfirm({
-      I18n.t(
+      message: I18n.t(
         "discourse_subscriptions.user.subscriptions.operations.destroy.confirm"
       ),
-      I18n.t("no_value"),
+      didConfirm: () => {
-      I18n.t("yes_value"),
-      (confirmed) => {
-        if (confirmed) {
         subscription.set("loading", true);
 
         subscription
           .destroy()
           .then((result) => subscription.set("status", result.status))
           .catch((data) =>
-              bootbox.alert(data.jqXHR.responseJSON.errors.join("\n"))
+            this.dialog.alert(data.jqXHR.responseJSON.errors.join("\n"))
           )
           .finally(() => {
             subscription.set("loading", false);
             this.refresh();
           });
-        }
+      },
-      }
+    });
-    );
   },
 });

config/locales/client.en.yml

@@ -47,9 +47,8 @@ en:
         refresh_page: Campaign data is now syncing from Stripe in the background. Refresh the page in a few moments to load the updated info.
         supporter: Supporter
         supporters: Supporters
+        confirm_creation_title: Do you want to automatically create a campaign for your community?
         confirm_creation: |-
-          <p>Do you want to automatically create a campaign for your community?</p>
-
           <p>Continuing will create:</p>
 
           <ul>