follow ES6 patterns and work on suggestions

Author: uds5501

app/components/forms/user-payment-info-form.js

@@ -1,15 +1,15 @@
 import Component from '@ember/component';
 import FormMixin from 'open-event-frontend/mixins/form';
 import { validPhoneNumber } from 'open-event-frontend/utils/validators';
-import { pick } from 'lodash-es';
+import { pick, orderBy } from 'lodash-es';
+import { action, computed } from '@ember/object';
+import { countries } from 'open-event-frontend/utils/dictionary/demography';
 
-export default Component.extend(FormMixin, {
-
-  async didInsertElement() {
-    this._super(...arguments);
-    let userBillingInfo = pick(this.authManager.currentUser, ['billingContactName', 'billingCity', 'billingPhone', 'company', 'billingTaxInfo', 'billingAddress', 'billingZipCode', 'billingAdditionalInfo']);
-    this.set('userBillingInfo', userBillingInfo);
-  },
+export default class extends Component.extend(FormMixin) {
+  didInsertElement() {
+    super.didInsertElement(...arguments);
+    this.set('userBillingInfo', pick(this.authManager.currentUser, ['billingContactName', 'billingCity', 'billingPhone', 'company', 'billingTaxInfo', 'billingCountry', 'billingState', 'billingAddress', 'billingZipCode', 'billingAdditionalInfo']));
+  }
 
   getValidationRules() {
     return {
@@ -88,19 +88,24 @@ export default Component.extend(FormMixin, {
         }
       }
     };
-  },
-  actions: {
-    submit() {
-      this.onValid(async() => {
-        try {
-          this.authManager.currentUser.setProperties(this.userBillingInfo);
-          await this.authManager.currentUser.save();
-          this.notify.success(this.l10n.t('Your billing details has been updated'));
-        } catch (error) {
-          this.authManager.currentUser.rollbackAttributes();
-          this.notify.error(this.l10n.t('An unexpected error occurred'));
-        }
-      });
-    }
   }
-});
+
+  @computed()
+  get countries() {
+    return orderBy(countries, 'name');
+  }
+
+  @action
+  submit() {
+    this.onValid(async() => {
+      try {
+        this.authManager.currentUser.setProperties(this.userBillingInfo);
+        await this.authManager.currentUser.save();
+        this.notify.success(this.l10n.t('Your billing details has been updated'));
+      } catch (error) {
+        this.authManager.currentUser.rollbackAttributes();
+        this.notify.error(this.l10n.t('An unexpected error occurred'));
+      }
+    });
+  }
+}

app/routes/account/billing/index.js

@@ -1,12 +1,13 @@
 import Route from '@ember/routing/route';
 import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
 
-export default Route.extend(AuthenticatedRouteMixin, {
+export default class extends Route.extend(AuthenticatedRouteMixin) {
   titleToken() {
     return this.l10n.t('Billing Info');
-  },
+  }
+
   beforeModel() {
-    this._super(...arguments);
+    super.beforeModel(...arguments);
     this.replaceWith('account.billing.payment-info');
   }
-});
+}

app/routes/account/billing/payment-info.js

@@ -1,8 +1,8 @@
 import Route from '@ember/routing/route';
 import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
 
-export default Route.extend(AuthenticatedRouteMixin, {
+export default class extends Route.extend(AuthenticatedRouteMixin) {
   titleToken() {
     return this.l10n.t('Payment Info');
   }
-});
+}

app/templates/components/forms/user-payment-info-form.hbs

@@ -4,43 +4,56 @@
   </h3>
   <div class="field">
     <label class="required" for="contactName">{{t 'Contact Name'}}</label>
-    {{input type='text' id='contactName' value=(mut userBillingInfo.billingContactName)}}
+    {{input type='text' id='contactName' value=userBillingInfo.billingContactName}}
   </div>
   <div class="field">
     <label class="required" for="phone">{{t 'Phone'}}</label>
-    {{input type='text' id='phone' value=(mut userBillingInfo.billingPhone)}}
+    {{input type='text' id='phone' value=userBillingInfo.billingPhone}}
   </div>
   <div class="field">
     <label class="required" for="company">{{t 'Company'}}</label>
-    {{input type='text' id='company' value=(mut userBillingInfo.company)}}
+    {{input type='text' id='company' value=userBillingInfo.company}}
   </div>
   <div class="field">
     <label for="taxID">{{t 'Tax ID or Business ID'}}</label>
-    {{input type='text' id='taxID' value=(mut userBillingInfo.billingTaxInfo)}}
+    {{input type='text' id='taxID' value=userBillingInfo.billingTaxInfo}}
   </div>
   <div class="field">
     <label class="required" for="address">{{t 'Address'}}</label>
-    {{textarea rows='2' id='address' value=(mut userBillingInfo.billingAddress)}}
+    {{textarea rows='2' id='address' value=userBillingInfo.billingAddress}}
   </div>
   <div class="field">
     <label class="required" for="city">{{t 'City'}}</label>
-    {{input type='text' id='city' value=(mut userBillingInfo.billingCity)}}
+    {{input type='text' id='city' value=userBillingInfo.billingCity}}
   </div>
   <div class="field">
     <label for="state">{{t 'State'}}</label>
-    {{input type='text' id='state' value=(mut userBillingInfo.billingState)}}
-  </div>
-  <div class="field">
-    <label class="required" for="country">{{t 'Country'}}</label>
-    {{input type='text' id='country' value=(mut userBillingInfo.billingCountry)}}
+    {{input type='text' id='state' value=userBillingInfo.billingState}}
+  </div>
+  <div class="field">
+    <label class="required">{{t 'Country'}}</label>
+    {{#ui-dropdown class='search selection' selected=userBillingInfo.billingCountry forceSelection=false
+                         fullTextSearch=true}}
+      {{input type='hidden' id='country' value=userBillingInfo.billingCountry}}
+      <i class="dropdown icon"></i>
+      <div class="default text">{{t 'Select country'}}</div>
+      <div class="menu">
+        {{#each countries as |country|}}
+          <div class="item" data-value="{{country.name}}">
+            <i class="{{lowercase country.code}} flag"></i>
+            {{country.name}}
+          </div>
+        {{/each}}
+      </div>
+    {{/ui-dropdown}}
   </div>
   <div class="field">
     <label class="required" for="zip">{{t 'Zip Code'}}</label>
-    {{input type='text' id='zip' value=(mut userBillingInfo.billingZipCode)}}
+    {{input type='text' id='zip' value=userBillingInfo.billingZipCode}}
   </div>
   <div class="field">
     <label for="additionalInfo">{{t 'Additional Information'}}</label>
-    {{textarea rows='4' id='additionalInfo' value=(mut userBillingInfo.billingAdditionalInfo)}}
+    {{textarea rows='4' id='additionalInfo' value=userBillingInfo.billingAdditionalInfo}}
   </div>
 
   <button type="submit" class="ui teal submit button update-changes">