Implementation of donation tickets in Open Event Project
This blog post explains the implementation details of donation tickets in the Open Event Project (Eventyay). Eventyay is the Open Event management solution which allows users to buy & sell tickets, organize events & promote their brand. This was developed at FOSSASIA.
Prior to the integration of this feature, the organizer had the option to provide only paid and free tickets. These tickets had a fixed price and therefore, imbibing and integrating this into the system was relatively easier. The biggest challenge in the implementation of donation tickets was variable prices. The subtotal, total and validation checks had to updated dynamically and shouldn’t be breaking any of the previous features.
The organizer requires an option to add donation tickets when they create/edit an event by specifying the appropriate minimum price, maximum price and quantity.
Organizer View – Donation Tickets
To integrate these features pertaining to donation tickets, fields for minimum and maximum prices had to be introduced into the tickets model. The maximum & minimum prices for free and paid tickets would be the same as the normal price but it’s variant for donations.
isDonationPriceValid: computed('donationTickets.@each.orderQuantity', 'donationTickets.@each.price', function() {
for (const donationTicket of this.donationTickets) {
if (donationTicket.orderQuantity > 0) {
if (donationTicket.price < donationTicket.minPrice || donationTicket.price > donationTicket.maxPrice) {
return false;
}
}
}
return true;
})
Check for valid donation price
To validate the minimum and maximum prices, ember validations have been implemented which checks whether the min price is lesser than or equal to the max price to ensure a proper flow. Also, in addition to front-end validations, server side checks have also been implemented to ensure that incorrect data does now propagate through the server.
In addition to that, these checks also had to be integrated in the pre-existing shouldDisableOrderButton computed property. Therefore, if the order has invalid donation tickets, the order button would be disabled.
For the public event page, the donation tickets segment have a section which specifies the price range in which the price must lie in. If the user enters a price out of the valid range, a validation error occurs.
The way in which these validation rules have been implemented was the biggest challenge in this feature as multiple sets of donation tickets might be present. As each set of donation tickets have a different price range, these validation rules had to be generated dynamically using semantic ui validations
donationTicketsValidation: computed('donationTickets.@each.id', 'donationTickets.@each.minPrice', 'donationTickets.@each.maxPrice', function() {
const validationRules = {};
for (let donationTicket of this.donationTickets) {
validationRules[donationTicket.id] = {
identifier : donationTicket.id,
optional : true,
rules : [
{
type : `integer[${donationTicket.minPrice}..${donationTicket.maxPrice}]`,
prompt : this.l10n.t(`Please enter a donation amount between ${donationTicket.minPrice} and ${donationTicket.maxPrice}`)
}
]
};
}
return validationRules;
})
Dynamic validation rule generation for donation tickets
Each donation ticket had to be looped through to add a validation rule corresponding to the donation ticket’s ID. These rules were then returned from a computed property.
Resources:
Related work and code repo:
- Front-End Repository
- API Server Repository
- Donation tickets integration
- Donation tickets quantity/min max validation
Tags:
Eventyay, FOSSASIA, Flask, SQLAlchemy, Open Event, Python, JWT