This blog post elaborates on the recent addition of user billing form in Eventyay which is an open source event management solution which allows users to buy & sell tickets, organize events & promote their brand, developed by FOSSASIA. As this project moves forward with the implementation of event invoices coming up,. In the past few weeks, I have collaborated with fellow developers in planning the integration of event invoice payments and this is a necessary step for the same due to its involvement in order invoice templates. This implementation focuses on event invoices billing ( the calculated amount an event organiser has to pay to the platform for their event’s revenue ).

This form includes basic details like contact details, tax ID, billing location and additional information (if any). The following is a specimen of this form :

First step of this form creation is to employ the account/billing/payment-info route for serving the relevant model data to the frontend.

// app/routes/account/billing/payment-info.js 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'); } }

Since the field additions have been done in the user schema in the server side, the corresponding changes have to made in the ember user model as well.

// app/models/user.js /**   * 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'),

This form has a speciality. Instead of using the current user information directly, it uses an intermediate object and employs manipulation in current user record only when the submit button is clicked. This has been implemented in the following way : 

// app/components/user-payment-info-form.js 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'])); } @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);   }); } }

The usual form validations are employed as expected in this one too and works well in storing the invoice based information.

Resources

• Flask Documentation
• Ember Documetation

Related Work and Code Repository

• Front-End Repository
• API Server Repository
• Creating billing order form on frontend
• Field implementations for billing form