Add ability to send no-show email to attendees

[JasonTheAdams]

Resolves #29

Description

This PR provides the ability for an admin to be able to send a no-show email to attendees of an event that did not show up or were unknown. The admin simply clicks an email button next to the attendees name and the email is sent.

The email message can be updated via the RSVP Email Settings and supports the {first_name} and {event_title} tags.

There were a number of formatting clean ups and optimizations included in this as well. I'm doing some basic auditing of code and looking for opportunities to make things faster and more efficient.

Visuals

[dreazee]

@JasonTheAdams This looks amazing BUT can we move that Email button somewhere else that is not right next to the X/Attended button? In the current placement, there is too high a probability for user error to press the incorrect button.

While in-person, we have a self check-in process with multiple devices set up— volunteers find their name and press the red X to check themselves in. This is already asking a lot and comes with errors at times. Having the button so close would most definitely cause issues.

[JasonTheAdams]

Hi @dreazee!

Thanks for the feedback. I definitely don't want folks to be accidentally emailed. Hahah! I'm trying to think where else we'd like to put the email button as there's limited room on that screen. Another option would be to add a prompt — which I almost did — so the user clicks on the email button, a prompt pops up saying "Are you sure you want to send a no-show email to {name}?", and then they have to click "Yes" for the email to be sent.

What do you think? 😃

cc: @mathetos

[dreazee]

Hi @JasonTheAdams ! Yes. putting that email button next to the delete button could prove even more disastrous. Hmmmm... yeah and it wouldn't make much sense before their name.... Well even if the email icon is moved, the prompt actually sounds like a VERY good idea. I am very much a fan of the "are you sure you want to perform this action" prompt. I think that keeping the email button where it is and adding a prompt makes the most sense.

cc: @mathetos

[mathetos]

@dreazee Thanks for your input, I think you raise really important questions here. As I think through this, there's actually quite a few different things happening all at the same time on this small table now. Somehow we have to account for ALL of the following:

1. Attended = Yes and No
2. Actions = Delete, Email as Unattended

Because volunteers will be clicking the "Attended" item, it's best if we separate the "Actions" from them a bit. "Delete" and "Email" both seem more like Admin (SDRT Leadership) activities here. So moving the "Email" into the "Actions" column makes a lot of sense to me.

I think the colors are a bit deceiving here as well. So here's my suggestion:

1. Attended = No = Grey -- As they show up, they are a "?" until they click on that.
2. Attended = Yes = Green -- That seems obvious
3. Delete = X = Red -- also very obvious
4. Email = Blue -- Just giving it a different color will help as well.

With all that in mind, here's my quick and dirty mock-up:

I think this makes everything as clear as possible and potentially as SAFE as possible, without having to add the additional friction of a "are you sure?" popup.

[JasonTheAdams]

Hi @mathetos and @dreazee!

I took the feedback you provided and put together the following:

Few notes:

• Clicking the "?" marks the attendee as attended
• Clicking the "X" deletes the user but first raises a confirmation to make sure the action is intentional
• Clicking the email button emails the user but first raises a confirmation to make sure the action is intentional

How does that look? Are we ticking all the boxes?

[mathetos]

I love it. Looks perfect @JasonTheAdams !

[dreazee]

Ditto to what @mathetos said. Looks AMAZING @JasonTheAdams !

[mathetos]

@JasonTheAdams One thing that I overlooked is that we need the ability to reverse an attandance. It's possible that someone might click someone elses' name on accident. Currently it looks like we can't "un-attend" someone after that "attended" status is achieved.

I think it's just a matter of making the ✔ be a link still, that will set the "attended" status back to "unknown" or "no".

[dreazee]

@mathetos @JasonTheAdams That would be great. It just gets confusing because once that attended circle is checked, a confirmation email gets sent. Would there also be a way to create a function that a user is not allowed to receive more than one confirmation email for the same event? Like a simple line of code or is that just a dream. hahahahaha

[JasonTheAdams]

@mathetos @dreazee Thanks for the input. Due to the fact that clicking it sends an email, I'd suggest having a confirmation like I've done with the other two, something like:

Are you sure you want to mark Chun, Helen as attended? Doing so will send an email to vgi2@cdc.gov.

Even if we made it possible to reverse it and prevented a second email from going out, that would still mean the admin sent an email incorrectly the first time. As such it seems like we should just try to prevent accidental clicks.

What do you think?

[dreazee]

@JasonTheAdams @mathetos It's not that big of an issue since an accidental check-in rarely happens. During these tutoring events, an admin is not the one doing the check-in; sdrt users self check-in in a rapid fashion. Having an extra step to confirm check-in would impede that quickness, which we do not want. It seems better to just leave it be than put in that extra step for the user to deal with.

[mathetos]

@JasonTheAdams Considering Andrea's feedback, let's just add the ability to reverse the attandance alone.

[JasonTheAdams]

@dreazee @mathetos Thanks for the feedback! I made the following changes:

• Clicking the green check circle will now mark the rvsp as not attended (putting it back to gray)
• The email will only go out once. Setting it back to tardy and then back again to attended will not resend the email.
• As a bonus, the attendance button is now AJAX, so it just happens immediately without requiring a page reload.

You can see it in action here:

Sorry about the slight jump in the button when it changes. There was some legacy styling there that is strangely hard to tweak in this case. I can work more on it but didn't feel it was worth the effort unless told otherwise.

I've pushed this to staging. Let me know what you think!

[dreazee]

@JasonTheAdams So great, Jason. I don't know what AJAX stands for but I LOVE it! (Ajax was also the name of a previous dog of mine, so by name alone, it's great)

[JasonTheAdams]

Ajax was also the name of a previous dog of mine, so by name alone, it's great

This is, without a doubt, my favorite response to talking about AJAX I've ever received. 😆

AJAX is simply a technique for moving around data without having to refresh the page. So, in this case, clicking the attendance button used to refresh the page in order to mark the RSVP as attended. Now, via AJAX, you click it and it immediately changes without needing to reload.