From c06ae3704802a3c50195eb18400f7300566fa016 Mon Sep 17 00:00:00 2001
From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Date: Tue, 2 May 2023 09:24:28 -0500
Subject: [PATCH] DEV: Use angle bracket syntax (#158)

---
 ...lugins-discourse-subscriptions-coupons.hbs |  32 ++---
 ...gins-discourse-subscriptions-dashboard.hbs |  18 ++-
 ...ns-discourse-subscriptions-plans-index.hbs |  18 +--
 ...discourse-subscriptions-products-index.hbs |  30 ++---
 ...subscriptions-products-show-plans-show.hbs | 116 +++++++++---------
 ...-discourse-subscriptions-products-show.hbs |  70 +++++------
 ...-discourse-subscriptions-subscriptions.hbs |  24 ++--
 .../admin/plugins-discourse-subscriptions.hbs |  46 +++----
 .../templates/components/campaign-banner.hbs  |  30 ++---
 .../components/create-coupon-form.hbs         |  43 ++++---
 .../templates/components/login-required.hbs   |  10 +-
 .../templates/components/payment-plan.hbs     |   2 +-
 .../templates/components/product-item.hbs     |  40 +++---
 .../connectors/user-main-nav/billing.hbs      |   4 +-
 .../modal/admin-cancel-subscription.hbs       |  29 ++---
 .../discourse/templates/subscribe/show.hbs    |  30 ++---
 .../discourse/templates/user/billing.hbs      |  32 ++---
 .../user/billing/subscriptions/card.hbs       |  12 +-
 .../user/billing/subscriptions/index.hbs      |  26 ++--
 19 files changed, 315 insertions(+), 297 deletions(-)

diff --git a/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-coupons.hbs b/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-coupons.hbs
index fa5c82b..9d33500 100644
--- a/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-coupons.hbs
+++ b/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-coupons.hbs
@@ -22,19 +22,19 @@
             <td>{{coupon.discount}}</td>
             <td>{{coupon.times_redeemed}}</td>
             <td>
-              {{input
-                type="checkbox"
-                checked=coupon.active
-                click=(action "toggleActive" coupon)
-              }}
+              <Input
+                @type="checkbox"
+                @checked={{coupon.active}}
+                {{on "click" (action "toggleActive" coupon)}}
+              />
             </td>
             <td>
-              {{d-button
-                action=(action "deleteCoupon")
-                actionParam=coupon
-                icon="trash-alt"
+              <DButton
+                @action={{this.deleteCoupon}}
+                @actionParam={{coupon}}
+                @icon="trash-alt"
                 class="btn-danger btn btn-icon btn-no-text"
-              }}
+              />
             </td>
           </tr>
         {{/each}}
@@ -43,13 +43,13 @@
   {{/if}}
 
   {{#unless creating}}
-    {{d-button
-      action=(action "openCreateForm")
-      label="discourse_subscriptions.admin.coupons.create"
-      title="discourse_subscriptions.admin.coupons.create"
-      icon="plus"
+    <DButton
+      @action={{this.openCreateForm}}
+      @label="discourse_subscriptions.admin.coupons.create"
+      @title="discourse_subscriptions.admin.coupons.create"
+      @icon="plus"
       class="btn btn-icon btn-primary create-coupon"
-    }}
+    />
   {{/unless}}
 
   {{#if creating}}
diff --git a/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-dashboard.hbs b/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-dashboard.hbs
index d9aba62..ff20ca0 100644
--- a/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-dashboard.hbs
+++ b/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-dashboard.hbs
@@ -1,6 +1,6 @@
 <h3>{{i18n "discourse_subscriptions.admin.dashboard.title"}}</h3>
 
-{{#load-more selector=".discourse-patrons-table tr" action=(action "loadMore")}}
+<LoadMore @selector=".discourse-patrons-table tr" @action={{action "loadMore"}}>
   {{#if model}}
     <table class="table discourse-patrons-table">
       <thead>
@@ -38,14 +38,20 @@
         {{#each model as |payment|}}
           <tr>
             <td>
-              {{#link-to "adminUser.index" payment.user_id payment.username}}
+              <LinkTo
+                @route="adminUser.index"
+                @models={{array payment.user_id payment.username}}
+              >
                 {{payment.username}}
-              {{/link-to}}
+              </LinkTo>
             </td>
             <td>
-              {{#link-to "patrons.show" payment.payment_intent_id}}
+              <LinkTo
+                @route="patrons.show"
+                @model={{payment.payment_intent_id}}
+              >
                 {{html-safe payment.payment_intent_id}}
-              {{/link-to}}
+              </LinkTo>
             </td>
             <td>{{payment.receipt_email}}</td>
             <td>{{html-safe (format-duration payment.created_at_age)}}</td>
@@ -55,4 +61,4 @@
       </tbody>
     </table>
   {{/if}}
-{{/load-more}}
\ No newline at end of file
+</LoadMore>
\ No newline at end of file
diff --git a/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-plans-index.hbs b/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-plans-index.hbs
index 58ea9ff..21e7a60 100644
--- a/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-plans-index.hbs
+++ b/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-plans-index.hbs
@@ -14,17 +14,17 @@
         <td>{{plan.interval}}</td>
         <td>{{plan.unit_amount}}</td>
         <td class="td-right">
-          {{d-button
-            action=(action "editPlan" plan.id)
-            icon="far-edit"
+          <DButton
+            @action={{action "editPlan" plan.id}}
+            @icon="far-edit"
             class="btn no-text btn-icon"
-          }}
-          {{d-button
-            action=(route-action "destroyPlan")
-            actionParam=plan
-            icon="trash-alt"
+          />
+          <DButton
+            @action={{route-action "destroyPlan"}}
+            @actionParam={{plan}}
+            @icon="trash-alt"
             class="btn-danger btn no-text btn-icon"
-          }}
+          />
         </td>
       </tr>
     {{/each}}
diff --git a/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-index.hbs b/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-index.hbs
index 6830242..3e9f654 100644
--- a/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-index.hbs
+++ b/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-index.hbs
@@ -7,16 +7,16 @@
   </p>
 {{else}}
   <p class="btn-right">
-    {{#link-to
-      "adminPlugins.discourse-subscriptions.products.show"
-      "new"
+    <LinkTo
+      @route="adminPlugins.discourse-subscriptions.products.show"
+      @model="new"
       class="btn btn-primary"
-    }}
+    >
       {{d-icon "plus"}}
       <span>
         {{i18n "discourse_subscriptions.admin.products.operations.new"}}
       </span>
-    {{/link-to}}
+    </LinkTo>
   </p>
 
   {{#if model}}
@@ -46,20 +46,20 @@
             <td class="td-right">{{product.active}}</td>
             <td class="td-right">
               <div class="align-buttons">
-                {{#link-to
-                  "adminPlugins.discourse-subscriptions.products.show"
-                  product.id
+                <LinkTo
+                  @route="adminPlugins.discourse-subscriptions.products.show"
+                  @model={{product.id}}
                   class="btn no-text btn-icon"
-                }}
+                >
                   {{d-icon "far-edit"}}
-                {{/link-to}}
+                </LinkTo>
 
-                {{d-button
-                  action=(route-action "destroyProduct")
-                  actionParam=product
-                  icon="trash-alt"
+                <DButton
+                  @action={{route-action "destroyProduct"}}
+                  @actionParam="product"
+                  @icon="trash-alt"
                   class="btn-danger btn no-text btn-icon"
-                }}
+                />
               </div>
             </td>
           </tr>
diff --git a/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-show-plans-show.hbs b/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-show-plans-show.hbs
index 1a2a000..783bf5f 100644
--- a/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-show-plans-show.hbs
+++ b/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-show-plans-show.hbs
@@ -6,12 +6,12 @@
       {{i18n "discourse_subscriptions.admin.products.product.name"}}
     </label>
 
-    {{input
-      type="text"
+    <Input
+      @type="text"
       name="product_name"
-      value=model.product.name
-      disabled=true
-    }}
+      @value={{model.product.name}}
+      disabled={{true}}
+    />
   </p>
 
   <p>
@@ -19,7 +19,7 @@
       {{i18n "discourse_subscriptions.admin.plans.plan.nickname"}}
     </label>
 
-    {{input type="text" name="name" value=model.plan.nickname}}
+    <Input @type="text" name="name" @value={{model.plan.nickname}} />
 
     <div class="control-instructions">
       {{i18n "discourse_subscriptions.admin.plans.plan.nickname_help"}}
@@ -31,12 +31,12 @@
       {{i18n "discourse_subscriptions.admin.plans.plan.group"}}
     </label>
 
-    {{combo-box
-      valueProperty="name"
-      content=availableGroups
-      value=selectedGroup
-      onChange=(action (mut model.plan.metadata.group_name))
-    }}
+    <ComboBox
+      @valueProperty="name"
+      @content={{availableGroups}}
+      @value={{selectedGroup}}
+      @onChange={{action (mut model.plan.metadata.group_name)}}
+    />
 
     <div class="control-instructions">
       {{i18n "discourse_subscriptions.admin.plans.plan.group_help"}}
@@ -49,27 +49,27 @@
     </label>
 
     {{#if planFieldDisabled}}
-      {{input
+      <Input
         class="plan-amount plan-currency"
-        disabled=true
-        value=model.plan.currency
-      }}
+        disabled={{true}}
+        @value={{model.plan.currency}}
+      />
     {{else}}
-      {{combo-box
-        disabled=planFieldDisabled
-        content=currencies
-        value=model.plan.currency
-        onChange=(action (mut model.plan.currency))
-      }}
+      <ComboBox
+        @disabled={{planFieldDisabled}}
+        @content={{currencies}}
+        @value={{model.plan.currency}}
+        @onChange={{action (mut model.plan.currency)}}
+      />
     {{/if}}
 
-    {{input
+    <Input
       class="plan-amount"
-      type="text"
+      @type="text"
       name="name"
-      value=model.plan.amountDollars
-      disabled=planFieldDisabled
-    }}
+      @value={{model.plan.amountDollars}}
+      disabled={{planFieldDisabled}}
+    />
   </p>
 
   <p>
@@ -78,19 +78,19 @@
     </label>
 
     {{#if planFieldDisabled}}
-      {{input
-        type="checkbox"
+      <Input
+        @type="checkbox"
         name="recurring"
-        checked=model.plan.isRecurring
-        disabled=true
-      }}
+        @checked={{model.plan.isRecurring}}
+        disabled={{true}}
+      />
     {{else}}
-      {{input
-        type="checkbox"
+      <Input
+        @type="checkbox"
         name="recurring"
-        checked=model.plan.isRecurring
-        change=(action "changeRecurring")
-      }}
+        @checked={{model.plan.isRecurring}}
+        {{on "change" this.changeRecurring}}
+      />
     {{/if}}
   </p>
 
@@ -101,14 +101,14 @@
       </label>
 
       {{#if planFieldDisabled}}
-        {{input disabled=true value=selectedInterval}}
+        <Input disabled={{true}} @value={{selectedInterval}} />
       {{else}}
-        {{combo-box
-          valueProperty="name"
-          content=availableIntervals
-          value=selectedInterval
-          onChange=(action (mut selectedInterval))
-        }}
+        <ComboBox
+          @valueProperty="name"
+          @content={{availableIntervals}}
+          @value={{selectedInterval}}
+          @onChange={{action (mut selectedInterval)}}
+        />
       {{/if}}
     </p>
 
@@ -118,7 +118,11 @@
         ({{i18n "discourse_subscriptions.optional"}})
       </label>
 
-      {{input type="text" name="trial" value=model.plan.trial_period_days}}
+      <Input
+        @type="text"
+        name="trial"
+        @value={{model.plan.trial_period_days}}
+      />
 
       <div class="control-instructions">
         {{i18n "discourse_subscriptions.admin.plans.plan.trial_help"}}
@@ -130,7 +134,7 @@
     <label for="active">
       {{i18n "discourse_subscriptions.admin.plans.plan.active"}}
     </label>
-    {{input type="checkbox" name="active" checked=model.plan.active}}
+    <Input @type="checkbox" name="active" @checked={{model.plan.active}} />
   </p>
 </form>
 
@@ -143,19 +147,19 @@
 
   <div class="pull-right">
     {{#if model.plan.isNew}}
-      {{d-button
-        label="discourse_subscriptions.admin.plans.operations.create"
-        action=(action "createPlan")
-        icon="plus"
+      <DButton
+        @label="discourse_subscriptions.admin.plans.operations.create"
+        @action={{action "createPlan"}}
+        @icon="plus"
         class="btn btn-primary"
-      }}
+      />
     {{else}}
-      {{d-button
-        label="discourse_subscriptions.admin.plans.operations.update"
-        action=(action "updatePlan")
-        icon="check"
+      <DButton
+        @label="discourse_subscriptions.admin.plans.operations.update"
+        @action={{action "updatePlan"}}
+        @icon="check"
         class="btn btn-primary"
-      }}
+      />
     {{/if}}
   </div>
 </section>
\ No newline at end of file
diff --git a/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-show.hbs b/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-show.hbs
index b4d8f63..10df788 100644
--- a/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-show.hbs
+++ b/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-show.hbs
@@ -5,7 +5,7 @@
     <label for="name">
       {{i18n "discourse_subscriptions.admin.products.product.name"}}
     </label>
-    {{input type="text" name="name" value=model.product.name}}
+    <Input @type="text" name="name" @value={{model.product.name}} />
   </p>
 
   <p>
@@ -13,11 +13,11 @@
       {{i18n "discourse_subscriptions.admin.products.product.description"}}
     </label>
 
-    {{textarea
+    <Textarea
       name="description"
-      value=model.product.metadata.description
+      @value={{model.product.metadata.description}}
       class="discourse-subscriptions-admin-textarea"
-    }}
+    />
 
     <div class="control-instructions">
       {{i18n "discourse_subscriptions.admin.products.product.description_help"}}
@@ -31,11 +31,11 @@
       }}
     </label>
 
-    {{input
-      type="text"
+    <Input
+      @type="text"
       name="statement_descriptor"
-      value=model.product.statement_descriptor
-    }}
+      @value={{model.product.statement_descriptor}}
+    />
 
     <div class="control-instructions">
       {{i18n
@@ -49,11 +49,11 @@
       {{i18n "discourse_subscriptions.admin.products.product.repurchaseable"}}
     </label>
 
-    {{input
-      type="checkbox"
+    <Input
+      @type="checkbox"
       name="repurchaseable"
-      checked=model.product.metadata.repurchaseable
-    }}
+      @checked={{model.product.metadata.repurchaseable}}
+    />
 
     <div class="control-instructions">
       {{i18n "discourse_subscriptions.admin.products.product.repurchase_help"}}
@@ -65,7 +65,7 @@
       {{i18n "discourse_subscriptions.admin.products.product.active"}}
     </label>
 
-    {{input type="checkbox" name="active" checked=model.product.active}}
+    <Input @type="checkbox" name="active" @checked={{model.product.active}} />
 
     <div class="control-instructions">
       {{i18n "discourse_subscriptions.admin.products.product.active_help"}}
@@ -88,14 +88,13 @@
           {{i18n "discourse_subscriptions.admin.plans.plan.amount"}}
         </th>
         <th class="td-right">
-          {{#link-to
-            "adminPlugins.discourse-subscriptions.products.show.plans.show"
-            model.product.id
-            "new"
+          <LinkTo
+            @route="adminPlugins.discourse-subscriptions.products.show.plans.show"
+            @models={{array model.product.id "new"}}
             class="btn"
-          }}
+          >
             {{i18n "discourse_subscriptions.admin.plans.operations.add"}}
-          {{/link-to}}
+          </LinkTo>
         </th>
       </thead>
 
@@ -111,14 +110,13 @@
               {{format-currency plan.currency plan.amountDollars}}
             </td>
             <td class="td-right">
-              {{#link-to
-                "adminPlugins.discourse-subscriptions.products.show.plans.show"
-                model.product.id
-                plan.id
+              <LinkTo
+                @route="adminPlugins.discourse-subscriptions.products.show.plans.show"
+                @models={{array model.product.id plan.id}}
                 class="btn no-text btn-icon"
-              }}
+              >
                 {{d-icon "far-edit"}}
-              {{/link-to}}
+              </LinkTo>
             </td>
           </tr>
         {{else}}
@@ -137,22 +135,22 @@
 {{/unless}}
 
 <div class="pull-right">
-  {{d-button label="cancel" action=(action "cancelProduct") icon="times"}}
+  <DButton @label="cancel" @action={{this.cancelProduct}} @icon="times" />
 
   {{#if model.product.isNew}}
-    {{d-button
-      label="discourse_subscriptions.admin.products.operations.create"
-      action=(action "createProduct")
-      icon="plus"
+    <DButton
+      @label="discourse_subscriptions.admin.products.operations.create"
+      @action={{action "createProduct"}}
+      @icon="plus"
       class="btn btn-primary"
-    }}
+    />
   {{else}}
-    {{d-button
-      label="discourse_subscriptions.admin.products.operations.update"
-      action=(action "updateProduct")
-      icon="check"
+    <DButton
+      @label="discourse_subscriptions.admin.products.operations.update"
+      @action={{action "updateProduct"}}
+      @icon="check"
       class="btn btn-primary"
-    }}
+    />
   {{/if}}
 </div>
 
diff --git a/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-subscriptions.hbs b/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-subscriptions.hbs
index a4ae4e5..30586c0 100644
--- a/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-subscriptions.hbs
+++ b/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-subscriptions.hbs
@@ -6,10 +6,10 @@
     </a>
   </p>
 {{else}}
-  {{#load-more
-    selector=".discourse-patrons-table tr"
-    action=(action "loadMore")
-  }}
+  <LoadMore
+    @selector=".discourse-patrons-table tr"
+    @action={{action "loadMore"}}
+  >
     <table class="table discourse-patrons-table">
       <thead>
         <tr>
@@ -72,19 +72,19 @@
               {{#if subscription.loading}}
                 {{loading-spinner size="small"}}
               {{else}}
-                {{d-button
-                  disabled=subscription.canceled
-                  label="cancel"
-                  action=(action "showCancelModal" subscription)
-                  icon="times"
-                }}
+                <DButton
+                  @disabled={{subscription.canceled}}
+                  @label="cancel"
+                  @action={{action "showCancelModal" subscription}}
+                  @icon="times"
+                />
               {{/if}}
             </td>
           </tr>
         {{/each}}
       </tbody>
     </table>
-  {{/load-more}}
+  </LoadMore>
 
-  {{conditional-loading-spinner condition=loading}}
+  <ConditionalLoadingSpinner @condition={{loading}} />
 {{/if}}
\ No newline at end of file
diff --git a/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions.hbs b/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions.hbs
index 71311d2..21bde02 100644
--- a/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions.hbs
+++ b/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions.hbs
@@ -3,36 +3,36 @@
 {{#if stripeConfigured}}
   <div class="discourse-subscriptions-buttons">
     {{#if campaignEnabled}}
-      {{d-button
-        label="discourse_subscriptions.campaign.refresh_campaign"
-        icon="sync-alt"
-        action=(action "triggerManualRefresh")
-      }}
+      <DButton
+        @label="discourse_subscriptions.campaign.refresh_campaign"
+        @icon="sync-alt"
+        @action={{action "triggerManualRefresh"}}
+      />
     {{else}}
       {{#unless campaignProductSet}}
-        {{d-button
-          label="discourse_subscriptions.campaign.one_click_campaign"
-          icon="plus-square"
-          action=(action "createOneClickCampaign")
-          isLoading=loading
-        }}
+        <DButton
+          @label="discourse_subscriptions.campaign.one_click_campaign"
+          @icon="plus-square"
+          @action={{action "createOneClickCampaign"}}
+          @isLoading="loading"
+        />
       {{/unless}}
     {{/if}}
   </div>
 
   <ul class="nav nav-pills">
-    {{nav-item
-      route="adminPlugins.discourse-subscriptions.products"
-      label="discourse_subscriptions.admin.products.title"
-    }}
-    {{nav-item
-      route="adminPlugins.discourse-subscriptions.coupons"
-      label="discourse_subscriptions.admin.coupons.title"
-    }}
-    {{nav-item
-      route="adminPlugins.discourse-subscriptions.subscriptions"
-      label="discourse_subscriptions.admin.subscriptions.title"
-    }}
+    <NavItem
+      @route="adminPlugins.discourse-subscriptions.products"
+      @label="discourse_subscriptions.admin.products.title"
+    />
+    <NavItem
+      @route="adminPlugins.discourse-subscriptions.coupons"
+      @label="discourse_subscriptions.admin.coupons.title"
+    />
+    <NavItem
+      @route="adminPlugins.discourse-subscriptions.subscriptions"
+      @label="discourse_subscriptions.admin.subscriptions.title"
+    />
   </ul>
 
   <hr />
diff --git a/assets/javascripts/discourse/templates/components/campaign-banner.hbs b/assets/javascripts/discourse/templates/components/campaign-banner.hbs
index 097aabd..c58e075 100644
--- a/assets/javascripts/discourse/templates/components/campaign-banner.hbs
+++ b/assets/javascripts/discourse/templates/components/campaign-banner.hbs
@@ -3,7 +3,7 @@
     class="campaign-banner"
     style={{html-safe (concat "box-shadow: 5px 5px #" dropShadowColor)}}
   >
-    {{d-button icon="times" action=(action "dismissBanner") class="close"}}
+    <DButton @icon="times" @action={{this.dismissBanner}} class="close" />
 
     <div class="campaign-banner-info" style={{html-safe this.bannerInfoStyle}}>
       {{#if isGoalMet}}
@@ -24,25 +24,25 @@
         </p>
 
         {{#if product}}
-          {{#link-to
-            "subscribe.show"
-            product
-            disabled=product.subscribed
+          <LinkTo
+            @route="subscribe.show"
+            @model={{product}}
+            @disabled={{product.subscribed}}
             class="btn btn-primary campaign-banner-info-button"
-          }}
+          >
             {{d-icon "far-heart"}}
             {{d-icon "heart" class="hover-heart"}}
             {{i18n "discourse_subscriptions.campaign.button"}}
-          {{/link-to}}
+          </LinkTo>
         {{else}}
-          {{#link-to
-            "subscribe"
+          <LinkTo
+            @route="subscribe"
             class="btn btn-primary campaign-banner-info-button"
-          }}
+          >
             {{d-icon "far-heart"}}
             {{d-icon "heart" class="hover-heart"}}
             {{i18n "discourse_subscriptions.campaign.button"}}
-          {{/link-to}}
+          </LinkTo>
         {{/if}}
       {{/if}}
     </div>
@@ -80,7 +80,7 @@
           </p>
 
           {{#if showContributors}}
-            {{#conditional-loading-spinner condition=loading size="small"}}
+            <ConditionalLoadingSpinner @condition={{loading}} @size="small">
               <div class="campaign-banner-progress-users">
                 <p class="campaign-banner-progress-users-title">
                   <strong>
@@ -102,7 +102,7 @@
                   {{/each}}
                 </div>
               </div>
-            {{/conditional-loading-spinner}}
+            </ConditionalLoadingSpinner>
           {{/if}}
         {{/if}}
       {{else}}
@@ -143,7 +143,7 @@
         {{/if}}
 
         {{#if showContributors}}
-          {{#conditional-loading-spinner condition=loading size="small"}}
+          <ConditionalLoadingSpinner @condition={{loading}} @size="small">
             <div class="campaign-banner-progress-users">
               <p class="campaign-banner-progress-users-title">
                 <strong>
@@ -165,7 +165,7 @@
                 {{/each}}
               </div>
             </div>
-          {{/conditional-loading-spinner}}
+          </ConditionalLoadingSpinner>
         {{/if}}
       {{/if}}
     </div>
diff --git a/assets/javascripts/discourse/templates/components/create-coupon-form.hbs b/assets/javascripts/discourse/templates/components/create-coupon-form.hbs
index e3930e3..bae0168 100644
--- a/assets/javascripts/discourse/templates/components/create-coupon-form.hbs
+++ b/assets/javascripts/discourse/templates/components/create-coupon-form.hbs
@@ -4,42 +4,47 @@
       <label for="promo_code">
         {{i18n "discourse_subscriptions.admin.coupons.promo_code"}}
       </label>
-      {{input type="text" name="promo_code" value=promoCode}}
+      <Input @type="text" name="promo_code" @value={{promoCode}} />
     </p>
 
     <p>
       <label for="amount">
         {{i18n "discourse_subscriptions.admin.coupons.discount"}}
       </label>
-      {{combo-box
-        content=discountTypes
-        value=discountType
-        onChange=(action (mut discountType))
-      }}
-      {{input class="discount-amount" type="text" name="amount" value=discount}}
+      <ComboBox
+        @content={{discountTypes}}
+        @value={{discountType}}
+        @onChange={{action (mut discountType)}}
+      />
+      <Input
+        class="discount-amount"
+        @type="text"
+        name="amount"
+        @value={{discount}}
+      />
     </p>
 
     <p>
       <label for="active">
         {{i18n "discourse_subscriptions.admin.coupons.active"}}
       </label>
-      {{input type="checkbox" name="active" checked=active}}
+      <Input @type="checkbox" name="active" @checked={{active}} />
     </p>
   </form>
 
-  {{d-button
-    action=(action "createNewCoupon")
-    label="discourse_subscriptions.admin.coupons.create"
-    title="discourse_subscriptions.admin.coupons.create"
-    icon="plus"
+  <DButton
+    @action={{action "createNewCoupon"}}
+    @label="discourse_subscriptions.admin.coupons.create"
+    @title="discourse_subscriptions.admin.coupons.create"
+    @icon="plus"
     class="btn-primary btn btn-icon"
-  }}
+  />
 
-  {{d-button
-    action=(action "cancelCreate")
+  <DButton
+    @action={{action "cancelCreate"}}
     label="cancel"
-    title="cancel"
-    icon="times"
+    @title="cancel"
+    @icon="times"
     class="btn btn-icon"
-  }}
+  />
 </div>
\ No newline at end of file
diff --git a/assets/javascripts/discourse/templates/components/login-required.hbs b/assets/javascripts/discourse/templates/components/login-required.hbs
index 1c808d1..21c67ce 100644
--- a/assets/javascripts/discourse/templates/components/login-required.hbs
+++ b/assets/javascripts/discourse/templates/components/login-required.hbs
@@ -1,8 +1,8 @@
 <h3>{{i18n "discourse_subscriptions.subscribe.unauthenticated"}}</h3>
 
-{{d-button
-  label="log_in"
-  action=(action "createAccount")
-  icon="user"
+<DButton
+  @label="log_in"
+  @action={{this.createAccount}}
+  @icon="user"
   class="btn btn-primary"
-}}
\ No newline at end of file
+/>
\ No newline at end of file
diff --git a/assets/javascripts/discourse/templates/components/payment-plan.hbs b/assets/javascripts/discourse/templates/components/payment-plan.hbs
index f36793a..60fd936 100644
--- a/assets/javascripts/discourse/templates/components/payment-plan.hbs
+++ b/assets/javascripts/discourse/templates/components/payment-plan.hbs
@@ -1,6 +1,6 @@
 <DButton
   @action={{action "planClick"}}
-  @class={{concat-class "btn-discourse-subscriptions-subscribe" selectedClass}}
+  class={{concat-class "btn-discourse-subscriptions-subscribe" selectedClass}}
 >
   <span class="interval">
     {{#if this.recurringPlan}}
diff --git a/assets/javascripts/discourse/templates/components/product-item.hbs b/assets/javascripts/discourse/templates/components/product-item.hbs
index 4832b55..08866ef 100644
--- a/assets/javascripts/discourse/templates/components/product-item.hbs
+++ b/assets/javascripts/discourse/templates/components/product-item.hbs
@@ -7,18 +7,22 @@
 {{#if isLoggedIn}}
   <div class="product-purchase">
     {{#if product.repurchaseable}}
-      {{#link-to "subscribe.show" product.id class="btn btn-primary"}}
+      <LinkTo
+        @route="subscribe.show"
+        @model={{product.id}}
+        class="btn btn-primary"
+      >
         {{i18n "discourse_subscriptions.subscribe.title"}}
-      {{/link-to}}
+      </LinkTo>
 
       {{#if product.subscribed}}
-        {{#link-to
-          "user.billing.subscriptions"
-          currentUser.username
+        <LinkTo
+          @route="user.billing.subscriptions"
+          @model={{currentUser.username}}
           class="billing-link"
-        }}
+        >
           {{i18n "discourse_subscriptions.subscribe.view_past"}}
-        {{/link-to}}
+        </LinkTo>
       {{/if}}
     {{else}}
       {{#if product.subscribed}}
@@ -27,22 +31,22 @@
           {{i18n "discourse_subscriptions.subscribe.purchased"}}
         </span>
 
-        {{#link-to
-          "user.billing.subscriptions"
-          currentUser.username
+        <LinkTo
+          @route="user.billing.subscriptions"
+          @model={{currentUser.username}}
           class="billing-link"
-        }}
+        >
           {{i18n "discourse_subscriptions.subscribe.go_to_billing"}}
-        {{/link-to}}
+        </LinkTo>
       {{else}}
-        {{#link-to
-          "subscribe.show"
-          product.id
-          disabled=product.subscribed
+        <LinkTo
+          @route="subscribe.show"
+          @model={{product.id}}
+          @disabled={{product.subscribed}}
           class="btn btn-primary"
-        }}
+        >
           {{i18n "discourse_subscriptions.subscribe.title"}}
-        {{/link-to}}
+        </LinkTo>
       {{/if}}
     {{/if}}
   </div>
diff --git a/assets/javascripts/discourse/templates/connectors/user-main-nav/billing.hbs b/assets/javascripts/discourse/templates/connectors/user-main-nav/billing.hbs
index 500275a..1ab30b6 100644
--- a/assets/javascripts/discourse/templates/connectors/user-main-nav/billing.hbs
+++ b/assets/javascripts/discourse/templates/connectors/user-main-nav/billing.hbs
@@ -1,6 +1,6 @@
 {{#if (user-viewing-self model)}}
-  {{#link-to "user.billing"}}
+  <LinkTo @route="user.billing">
     {{d-icon "far-credit-card"}}
     {{i18n "discourse_subscriptions.navigation.billing"}}
-  {{/link-to}}
+  </LinkTo>
 {{/if}}
\ No newline at end of file
diff --git a/assets/javascripts/discourse/templates/modal/admin-cancel-subscription.hbs b/assets/javascripts/discourse/templates/modal/admin-cancel-subscription.hbs
index 4c84ac7..bfac168 100644
--- a/assets/javascripts/discourse/templates/modal/admin-cancel-subscription.hbs
+++ b/assets/javascripts/discourse/templates/modal/admin-cancel-subscription.hbs
@@ -1,26 +1,27 @@
 <div>
-  {{#d-modal-body
-    rawTitle=(i18n
+  <DModalBody
+    @rawTitle={{i18n
       "discourse_subscriptions.user.subscriptions.operations.destroy.confirm"
-    )
-  }}
-    {{input type="checkbox" checked=refund}}
+    }}
+  >
+    <Input @type="checkbox" @checked={{refund}} />
     {{i18n "discourse_subscriptions.admin.ask_refund"}}
-  {{/d-modal-body}}
+  </DModalBody>
 
   <div class="modal-footer">
     {{#if model.loading}}
       {{loading-spinner}}
     {{else}}
-      {{d-button
-        label="yes_value"
-        action=(route-action
-          "cancelSubscription" (hash subscription=model refund=refund)
-        )
-        icon="times"
+      <DButton
+        @label="yes_value"
+        @action={{route-action
+          "cancelSubscription"
+          (hash subscription=model refund=refund)
+        }}
+        @icon="times"
         class="btn-danger"
-      }}
-      {{d-button label="no_value" action=(route-action "closeModal")}}
+      />
+      <DButton @label="no_value" @action={{route-action "closeModal"}} />
     {{/if}}
   </div>
 </div>
\ No newline at end of file
diff --git a/assets/javascripts/discourse/templates/subscribe/show.hbs b/assets/javascripts/discourse/templates/subscribe/show.hbs
index beb6f70..70ab0d9 100644
--- a/assets/javascripts/discourse/templates/subscribe/show.hbs
+++ b/assets/javascripts/discourse/templates/subscribe/show.hbs
@@ -30,31 +30,31 @@
       {{else if isAnonymous}}
         {{login-required}}
       {{else}}
-        {{input
-          type="text"
+        <Input
+          @type="text"
           name="promo_code"
-          placeholder=(i18n "discourse_subscriptions.subscribe.promo_code")
-          value=promoCode
+          placeholder={{i18n "discourse_subscriptions.subscribe.promo_code"}}
+          @value={{promoCode}}
           class="subscribe-promo-code"
-        }}
+        />
 
-        {{d-button
-          disabled=loading
-          action=(action "stripePaymentHandler")
+        <DButton
+          @disabled={{loading}}
+          @action={{this.stripePaymentHandler}}
           class="btn btn-primary btn-payment"
-          label="discourse_subscriptions.plans.payment_button"
-        }}
+          @label="discourse_subscriptions.plans.payment_button"
+        />
       {{/if}}
     {{else}}
       <h2>{{i18n "discourse_subscriptions.subscribe.already_purchased"}}</h2>
 
-      {{#link-to
-        "user.billing.subscriptions"
-        currentUser.username
+      <LinkTo
+        @route="user.billing.subscriptions"
+        @model={{currentUser.username}}
         class="btn btn-primary"
-      }}
+      >
         {{i18n "discourse_subscriptions.subscribe.go_to_billing"}}
-      {{/link-to}}
+      </LinkTo>
     {{/if}}
   </div>
 </div>
\ No newline at end of file
diff --git a/assets/javascripts/discourse/templates/user/billing.hbs b/assets/javascripts/discourse/templates/user/billing.hbs
index 5e733d1..42ff18c 100644
--- a/assets/javascripts/discourse/templates/user/billing.hbs
+++ b/assets/javascripts/discourse/templates/user/billing.hbs
@@ -1,26 +1,26 @@
-{{#d-section
-  pageClass="user-billing"
-  class="user-secondary-navigation"
-  scrollTop="false"
-}}
-  {{#mobile-nav
-    class="activity-nav"
-    desktopClass="action-list nav-stacked"
-    currentPath=router._router.currentPath
-  }}
+<DSection
+  @pageClass="user-billing"
+  @class="user-secondary-navigation"
+  @scrollTop="false"
+>
+  <MobileNav
+    @class="activity-nav"
+    @desktopClass="action-list nav-stacked"
+    @currentPath={{router._router.currentPath}}
+  >
     <li>
-      {{#link-to "user.billing.subscriptions"}}
+      <LinkTo @route="user.billing.subscriptions">
         {{i18n "discourse_subscriptions.navigation.subscriptions"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
 
     <li>
-      {{#link-to "user.billing.payments"}}
+      <LinkTo @route="user.billing.payments">
         {{i18n "discourse_subscriptions.navigation.payments"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
-  {{/mobile-nav}}
-{{/d-section}}
+  </MobileNav>
+</DSection>
 
 <section class="user-content">
   {{outlet}}
diff --git a/assets/javascripts/discourse/templates/user/billing/subscriptions/card.hbs b/assets/javascripts/discourse/templates/user/billing/subscriptions/card.hbs
index a03832b..56d2867 100644
--- a/assets/javascripts/discourse/templates/user/billing/subscriptions/card.hbs
+++ b/assets/javascripts/discourse/templates/user/billing/subscriptions/card.hbs
@@ -8,10 +8,10 @@
     {{subscribe-card cardElement=cardElement class="input-xxlarge"}}
   </div>
 
-  {{save-controls
-    action=(action "updatePaymentMethod")
-    saved=saved
-    saveDisabled=loading
-    savingText="discourse_subscriptions.user.subscriptions.update_card.single"
-  }}
+  <SaveControls
+    @action={{action "updatePaymentMethod"}}
+    @saved={{saved}}
+    @saveDisabled={{loading}}
+    @savingText="discourse_subscriptions.user.subscriptions.update_card.single"
+  />
 </div>
\ No newline at end of file
diff --git a/assets/javascripts/discourse/templates/user/billing/subscriptions/index.hbs b/assets/javascripts/discourse/templates/user/billing/subscriptions/index.hbs
index 139648e..4fd0afc 100644
--- a/assets/javascripts/discourse/templates/user/billing/subscriptions/index.hbs
+++ b/assets/javascripts/discourse/templates/user/billing/subscriptions/index.hbs
@@ -25,22 +25,22 @@
               {{loading-spinner size="small"}}
             {{else}}
               {{#if subscription.canceled_at}}
-                {{d-button
-                  disabled=subscription.canceled_at
-                  label="discourse_subscriptions.user.subscriptions.cancelled"
-                }}
+                <DButton
+                  @disabled={{subscription.canceled_at}}
+                  @label="discourse_subscriptions.user.subscriptions.cancelled"
+                />
               {{else}}
-                {{d-button
-                  action=(route-action "updateCard" subscription.id)
-                  icon="far-edit"
+                <DButton
+                  @action={{route-action "updateCard" subscription.id}}
+                  @icon="far-edit"
                   class="btn no-text btn-icon"
-                }}
-                {{d-button
+                />
+                <DButton
                   class="btn-danger btn no-text btn-icon"
-                  icon="trash-alt"
-                  disabled=subscription.canceled_at
-                  action=(route-action "cancelSubscription" subscription)
-                }}
+                  @icon="trash-alt"
+                  @disabled={{subscription.canceled_at}}
+                  @action={{route-action "cancelSubscription" subscription}}
+                />
               {{/if}}
             {{/if}}
           </td>