feat: Create user payment information form

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

@@ -0,0 +1,99 @@
+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';
+
+export default Component.extend(FormMixin, {
+
+  async didInsertElement() {
+    this._super(...arguments);
+    let actualUser = await this.authManager.currentUser;
+    let userBillingInfo = pick(actualUser, ['billingContactName', 'billingCity', 'billingPhone', 'company', 'billingTaxInfo', 'billingAddress', 'billingZipCode', 'billingAdditionalInfo']);
+    this.set('userBillingInfo', userBillingInfo);
+    this.set('actualUser', actualUser);
+  },
+
+  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')
+            }
+          ]
+        },
+        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.')
+            }
+          ]
+        }
+      }
+    };
+  },
+  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'));
+        }
+      });
+    }
+  }
+});

app/models/user.js

@@ -47,6 +47,20 @@ 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'),
+
   status: computed('lastAccessedAt', 'deletedAt', function() {
     if (this.deletedAt == null) {
       if (this.lastAccessedAt == null) {

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

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

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

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

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

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

app/templates/account/billing-info/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,41 @@
+<form class="ui form" {{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=(mut userBillingInfo.billingContactName)}}
+  </div>
+  <div class="field">
+    <label class="required" for="phone">{{t 'Phone'}}</label>
+    {{input type='text' id='phone' value=(mut userBillingInfo.billingPhone)}}
+  </div>
+  <div class="field">
+    <label class="required" for="company">{{t 'Company'}}</label>
+    {{input type='text' id='company' value=(mut 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)}}
+  </div>
+  <div class="field">
+    <label class="required" for="address">{{t 'Address'}}</label>
+    {{textarea rows='2' id='address' value=(mut userBillingInfo.billingAddress)}}
+  </div>
+  <div class="field">
+    <label class="required" for="city">{{t 'City'}}</label>
+    {{input type='text' id='city' value=(mut userBillingInfo.billingCity)}}
+  </div>
+  <div class="field">
+    <label class="required" for="zip">{{t 'Zip Code'}}</label>
+    {{input type='text' id='zip' value=(mut userBillingInfo.billingZipCode)}}
+  </div>
+  <div class="field">
+    <label for="additionalInfo">{{t 'Additional Information'}}</label>
+    {{textarea rows='4' id='additionalInfo' value=(mut userBillingInfo.billingAdditionalInfo)}}
+  </div>
+
+  <button type="submit" class="ui teal submit button update-changes">
+    {{t 'Submit'}}
+  </button>
+</form>

tests/acceptance/billing-info-test.js

@@ -16,6 +16,6 @@ module('Acceptance | account/billing-info', function(hooks) {
   test('visiting account/billing-info with login', async function(assert) {
     await login(assert);
     await visit('account/billing-info');
-    assert.equal(currentURL(), 'account/billing-info');
+    assert.equal(currentURL(), '/account/billing-info/payment-info');
   });
 });