feat: Create user payment information form (#3215)

* Create user payment information form

* default reroute billing info to payment info

* change route name to billing

* use authManager.currentUser

* follow ES6 patterns and work on suggestions

* add loader in the form

Author: uds5501

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-info/invoices.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-info/payment-info.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-info.js renamed to app/routes/account/billing.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/routes/account/billing/index.js

@@ -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'}}