Create user payment information form

Author: uds5501

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

@@ -0,0 +1,92 @@
+import Component from '@ember/component';
+import FormMixin from 'open-event-frontend/mixins/form';
+import { validPhoneNumber } from 'open-event-frontend/utils/validators';
+import { computed } from "@ember/object";
+
+export default Component.extend(FormMixin, {
+
+  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.')
+            }
+          ]
+        }
+      }
+    };
+  },
+  user: computed(function() {
+    return this.authManager.currentUser;
+  }),
+  actions: {
+    submit() {
+      this.onValid(async() => {
+        try {
+          await this.user.save();
+          this.notify.success(this.l10n.t('Your billing details has been updated'));
+        } catch (error) {
+          this.notify.error(this.l10n.t('An unexpected error occurred'));
+        }
+      });
+    }
+  }
+});

app/controllers/account/password.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/controllers/account/profile.js

@@ -4,5 +4,9 @@ import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-rout
 export default Route.extend(AuthenticatedRouteMixin, {
   titleToken() {
     return this.l10n.t('Billing Info');
+  },
+  beforeModel() {
+    this._super(...arguments);
+    this.replaceWith('account.billing-info.payment-info');
   }
 });

app/models/user.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/routes/account/billing-info.js

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

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

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