Looking for some creative ideas here... My Angular site allows users to register for events by filling out a form. They can also register themselves and other people at the same time. https://i.sstatic.net/a44I7.png
The current issue ~ when a user clicks "Add another ticket," it goes through a method that first validates all fields and checks if the checkbox is ticked. If any fields are invalid, an alert message appears indicating which fields need correction. The method then verifies if there are enough tickets available to add more attendees (this is what I'm currently working on - checking ticket availability). If there are sufficient tickets, the person is added to an 'attendees' array, and the form is reset to add more people.
If there aren't enough tickets to add more attendees, the 'Add another ticket' button is hidden, and a modal window pops up informing the user that no more tickets are available. The only option left is to click 'pay now' and complete the registration process for the lined-up attendees/tickets.
Since the 'Add another ticket' button cannot display the modal directly, I'm trying to implement this functionality in TypeScript. Currently, I have a test code displaying an alert message, but alerts are not very appealing visually.
Note that "Add another ticket" (along with attendee fields) acts as a child component, while the rest of the screen serves as the parent component. The parent triggers a method when the child's button is clicked:
public addAttendee(attendee: Attendee, waitlisted: boolean): void {
// We ensure all fields are valid before adding an attendee. Display error message & quit otherwise.
console.log("Add attendee button clicked");
this.attendeeComponent.AddAttendeeTermOfSale = true;
if (!this.attendeeComponent.areTheseFieldsValid(true)) {
this.areFormFieldsValid = false;
this.errorMessages = this.invalidFieldsAttendee();
return;
} else {
this.areFormFieldsValid = true;
this.attendeeComponent.AddAttendeeTermOfSale = false;
}
if (this.eventPassCapacityReached()) {
this.cantAddAdditionalAttendees();
return;
}
if (this.isAttendeeCountExceedingEventCapacity()) {
this.showEventCapacityExceedingErrorMessage();
return;
}...
}
The "EventPassCapacityReached" function validates ticket availability:
public eventPassCapacityReached() {
let attendeesBeingRegistered = this.attendees.length;
attendeesBeingRegistered += 1;
this.sumPass = this.sumPass - attendeesBeingRegistered;
if (this.sumPass <= 0)
return true;
else
return false;
}
Trying to replace the alert window...
public cantAddAdditionalAttendees() {
this.attendeeComponent.isPassesSoldOut = true;
alert("Oops... this was the last ticket for the event");
var AddAttendeeButton = document.getElementById("AddAnotherAttendee");
AddAttendeeButton.style.display = "none";
}
Here's the modal in the view:
<div class="modal fade" tabindex="-1" id="noPassesModal" role="dialog" aria-labelledby="noPassesModalLabel" aria-hidden="true" data-target="noPassesModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">No additional tickets available</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Unfortunately we don't have any additional tickets available for this event, and you wont be able to register additional people</p>
<p>If you have additional people who would like to come, we would suggest you contact our Events team via <a href="mailto:someemail@example.com">email</a> or by phone on 1800 161 236</p>
</div>
<div class="modal-footer">
<div class="row">
<div class="col align-self-end">
<button role="button" class="btn btn-secondary btn-block">OK</button>
</div>
</div>
</div>
</div>
</div>
</div>
Considering how to trigger this modal using TypeScript within "cantAddAdditionalAttendees":