Issue 54/contact us modal

[andycwilliams]

This PR:

Resolves #54

Adds contact form modal to the Volunteer and Contact Us buttons in VolunteerBrief.jsx and CallToAction.jsx, respectively.

Uses the emailjs dependency that routes messages to a test email account.

I applied minimal styling, focusing first on setting up functionality.

Also removed Contact Us button from the main page hero, as it was related. So this PR could potentially close #58 (if that's all the issue requires).

---

Screenshots (if applicable):

---

Future Steps/PRs Needed to Finish This Work (optional):

• Determine modal styling
• Further test emailjs and determine whether that is what we ultimately want to go with
• Decide all the places/buttons where we want the modal to be used
• Maybe make a "volunteer" version of the modal, perhaps changing just the title

[andycwilliams]

@xscottxbrownx

I've implemented your recommendations minus refactoring the component for now because first I want to confirm everywhere we want this modal to be used. That'd help me focus, anyway. For example, there's the Contact Us button in the footer that currently is not connected to the modal.

Also, I neglected sharing a screenshot of what email actually looks like to the recipient (whose address I still need to set up with the emailjs account, either the test one I'm using for this or a separate one just for them).

EDIT: Almost forgot to ask. How much do we want some kind of notification that the message was successfully (or unsuccessfully) sent?

[xscottxbrownx]

@xscottxbrownx

I've implemented your recommendations minus refactoring the component for now because first I want to confirm everywhere we want this modal to be used. That'd help me focus, anyway. For example, there's the Contact Us button in the footer that currently is not connected to the modal.

Also, I neglected sharing a screenshot of what email actually looks like to the recipient (whose address I still need to set up with the emailjs account, either the test one I'm using for this or a separate one just for them).

EDIT: Almost forgot to ask. How much do we want some kind of notification that the message was successfully (or unsuccessfully) sent?

Personally, I always err on the side of some sort of feedback to the user. Doesn't hurt anything, and could prevent users from doing it a second (or more) time thinking it may not have gone through.

[andycwilliams]

@xscottxbrownx I've moved the modal import to Home.jsx and am passing the state down. Let me know if this resolves your requests.

Also, for the moment I haven't placed it into the Contact Us button in the footer. None of the buttons there are finished so I'm wondering whether we want to tackle all of those at once.

And I can keep working adding an alert for a successful message or failure. It can be in this PR or another. one Either works for me, though I lean towards just making that a separate issue.

[Jared-Krajewski]

Overall thoughts...

I think I would vote for this to be in the Contact Us button in the CallToAction section and footer. I feel the Volunteer button should go to the volunteer page personally, because those are the steps we wish people to take and it automates it, rather than putting it on hugh/flo/volunteers to explain manually.

BUT if we do use this modal for volunteer button, then yeah vote to just make the title an attribute that's passed to the component to make it reusable instead of a whole new component.

Volunteer link on home page should go to volunteer page.

[andycwilliams]

Going to merge it now.

Whoever sent the test email, I received it just fine.

We'll have to set up an EmailJS account specifically for CODE PDX. I'm not sure what email to route that too. Maybe Hugh's? Either way, it won't take long and the code will need very little editing.