feat: Create user payment information form

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

@@ -0,0 +1,113 @@
+import Component from '@ember/component';
+import FormMixin from 'open-event-frontend/mixins/form';
+import { validPhoneNumber } from 'open-event-frontend/utils/validators';
+import { pick, orderBy } from 'lodash-es';
+import { action, computed } from '@ember/object';
+import { countries } from 'open-event-frontend/utils/dictionary/demography';
+
+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 {
+      inline : true,
+      delay  : false,
+      on     : 'blur',
+
+      fields: {
+        name: {
+          identifier : 'contactName',
+          rules      : [
+            {
+              type   : 'empty',
+              prompt : this.l10n.t('Please enter your name')
+            }
+          ]
+        },
+        company: {
+          identifier : 'company',
+          rules      : [
+            {
+              type   : 'empty',
+              prompt : this.l10n.t('Please enter your company')
+            }
+          ]
+        },
+        country: {
+          identifier : 'country',
+          rules      : [
+            {
+              type   : 'empty',
+              prompt : this.l10n.t('Please enter your country')
+            }
+          ]
+        },
+        address: {
+          identifier : 'address',
+          rules      : [
+            {
+              type   : 'empty',
+              prompt : this.l10n.t('Please enter your billing address')
+            }
+          ]
+        },
+        city: {
+          identifier : 'city',
+          rules      : [
+            {
+              type   : 'empty',
+              prompt : this.l10n.t('Please enter your billing city')
+            }
+          ]
+        },
+        zipCode: {
+          identifier : 'zip',
+          rules      : [
+            {
+              type   : 'empty',
+              prompt : this.l10n.t('Please enter the zip code')
+            }
+          ]
+        },
+        phone: {
+          identifier : 'phone',
+          rules      : [
+            {
+              type   : 'empty',
+              prompt : this.l10n.t('Please enter a phone number.')
+            },
+            {
+              type   : 'regExp',
+              value  : validPhoneNumber,
+              prompt : this.l10n.t('Please enter a valid phone number.')
+            }
+          ]
+        }
+      }
+    };
+  }
+
+  @computed()
+  get countries() {
+    return orderBy(countries, 'name');
+  }
+
+  @action
+  submit() {
+    this.onValid(async() => {
+      this.set('isLoading', true);
+      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'));
+      }
+      this.set('isLoading', false);
+    });
+  }
+}

app/models/user.js

@@ -48,6 +48,21 @@ export default ModelBase.extend({
   deletedAt      : attr('moment'),
   lastAccessedAt : attr('moment', { readOnly: true }),
 
+  /**
+   * Billing Contact Information
+   */
+
+  billingContactName    : attr('string'),
+  billingPhone          : attr('string'),
+  billingCountry        : attr('string'),
+  company               : attr('string'),
+  billingAddress        : attr('string'),
+  billingCity           : attr('string'),
+  billingZipCode        : attr('string'),
+  billingTaxInfo        : attr('string'),
+  billingAdditionalInfo : attr('string'),
+  billingState          : attr('string'),
+
   status: computed('lastAccessedAt', 'deletedAt', function() {
     if (this.deletedAt == null) {
       if (this.lastAccessedAt == null) {

app/router.js

@@ -113,7 +113,7 @@ router.map(function() {
     this.route('email-preferences');
     this.route('applications');
     this.route('danger-zone');
-    this.route('billing-info', function() {
+    this.route('billing', function() {
       this.route('payment-info');
       this.route('invoices');
     });

app/routes/account/billing/index.js

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

app/routes/account/billing/invoices.js

@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default class extends Route {
+  titleToken() {
+    return this.l10n.t('Invoices');
+  }
+}

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

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

app/templates/account.hbs

@@ -4,7 +4,7 @@
       {{#link-to 'account.profile' class='item'}}
         {{t 'Profile'}}
       {{/link-to}}
-      {{#link-to 'account.billing-info' class='item'}}
+      {{#link-to 'account.billing' class='item'}}
         {{t 'Billing Info'}}
       {{/link-to}}
       {{#link-to 'account.password' class='item'}}

app/templates/account/billing-info.hbs → app/templates/account/billing.hbs

@@ -2,10 +2,10 @@
   <div class="row">
     <div class="{{if device.isMobile 'sixteen' 'three'}} wide column">
       {{#tabbed-navigation isVertical=true}}
-        {{#link-to 'account.billing-info.payment-info' class='item'}}
+        {{#link-to 'account.billing.payment-info' class='item'}}
           {{t 'Payment Information'}}
         {{/link-to}}
-        {{#link-to 'account.billing-info.invoices' class='item'}}
+        {{#link-to 'account.billing.invoices' class='item'}}
           {{t 'Invoices'}}
         {{/link-to}}
       {{/tabbed-navigation}}

app/templates/account/billing/payment-info.hbs

@@ -0,0 +1,3 @@
+<div class="ui basic {{if isLoading 'loading' ''}} segment">
+  {{forms/user-payment-info-form}}
+</div>

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

@@ -0,0 +1,62 @@
+<form class="ui form {{if isLoading 'loading'}}" {{action 'submit' on='submit'}}> 
+  <h3 class="ui header">
+    {{t 'Payment Information'}}
+  </h3>
+  <div class="field">
+    <label class="required" for="contactName">{{t 'Contact Name'}}</label>
+    {{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=userBillingInfo.billingPhone}}
+  </div>
+  <div class="field">
+    <label class="required" for="company">{{t 'Company'}}</label>
+    {{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=userBillingInfo.billingTaxInfo}}
+  </div>
+  <div class="field">
+    <label class="required" for="address">{{t 'Address'}}</label>
+    {{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=userBillingInfo.billingCity}}
+  </div>
+  <div class="field">
+    <label for="state">{{t 'State'}}</label>
+    {{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=userBillingInfo.billingZipCode}}
+  </div>
+  <div class="field">
+    <label for="additionalInfo">{{t 'Additional Information'}}</label>
+    {{textarea rows='4' id='additionalInfo' value=userBillingInfo.billingAdditionalInfo}}
+  </div>
+
+  <button type="submit" class="ui teal submit button">
+    {{t 'Submit'}}
+  </button>
+</form>

tests/acceptance/billing-info-test.js

@@ -4,18 +4,18 @@ import { currentURL, visit } from '@ember/test-helpers';
 import { login } from 'open-event-frontend/tests/helpers/custom-helpers';
 
 
-module('Acceptance | account/billing-info', function(hooks) {
+module('Acceptance | account/billing', function(hooks) {
   setupApplicationTest(hooks);
 
 
-  test('visiting account/billing-info without login', async function(assert) {
-    await visit('account/billing-info');
+  test('visiting account/billing without login', async function(assert) {
+    await visit('account/billing');
     assert.equal(currentURL(), '/login');
   });
 
-  test('visiting account/billing-info with login', async function(assert) {
+  test('visiting account/billing with login', async function(assert) {
     await login(assert);
-    await visit('account/billing-info');
-    assert.equal(currentURL(), 'account/billing-info');
+    await visit('account/billing');
+    assert.equal(currentURL(), '/account/billing/payment-info');
   });
 });

tests/acceptance/invoices-test.js

@@ -4,18 +4,18 @@ import { currentURL, visit } from '@ember/test-helpers';
 import { login } from 'open-event-frontend/tests/helpers/custom-helpers';
 
 
-module('Acceptance | account/billing-info/invoices', function(hooks) {
+module('Acceptance | account/billing/invoices', function(hooks) {
   setupApplicationTest(hooks);
 
 
-  test('visiting account/billing-info/invoices without login', async function(assert) {
-    await visit('account/billing-info/invoices');
+  test('visiting account/billing/invoices without login', async function(assert) {
+    await visit('account/billing/invoices');
     assert.equal(currentURL(), '/login');
   });
 
-  test('visiting account/billing-info/invoices with login', async function(assert) {
+  test('visiting account/billing/invoices with login', async function(assert) {
     await login(assert);
-    await visit('/account/billing-info/invoices');
-    assert.equal(currentURL(), '/account/billing-info/invoices');
+    await visit('/account/billing/invoices');
+    assert.equal(currentURL(), '/account/billing/invoices');
   });
 });

tests/acceptance/payment-info-test.js

@@ -4,18 +4,18 @@ import { currentURL, visit } from '@ember/test-helpers';
 import { login } from 'open-event-frontend/tests/helpers/custom-helpers';
 
 
-module('Acceptance | account/billing-info/payment-info', function(hooks) {
+module('Acceptance | account/billing/payment-info', function(hooks) {
   setupApplicationTest(hooks);
 
 
-  test('visiting account/billing-info/payment-info without login', async function(assert) {
-    await visit('account/billing-info/payment-info');
+  test('visiting account/billing/payment-info without login', async function(assert) {
+    await visit('account/billing/payment-info');
     assert.equal(currentURL(), '/login');
   });
 
-  test('visiting account/billing-info/payment-info with login', async function(assert) {
+  test('visiting account/billing/payment-info with login', async function(assert) {
     await login(assert);
-    await visit('/account/billing-info/payment-info');
-    assert.equal(currentURL(), '/account/billing-info/payment-info');
+    await visit('/account/billing/payment-info');
+    assert.equal(currentURL(), '/account/billing/payment-info');
   });
 });