Update "New Volunteer Page" to use custom form

[dannyrb]

See: https://github.com/RosieSews/masksnow/wiki/New-Volunteer-Page

Improved "New Volunteer" Page

Our current volunteer onboarding form is hosted by Airtable, and links to the Location table in airtable. This puts the onus on the user to correctly find and choose an accurate location.

• Replace embedded form with a custom React form
  • Allows for users to specify a zip code, and we map to the correct location on the server
• POST form submission to a node Netlify lambda endpoint
  • Note: We will want to be very careful with regards to who can edit the table. Changes could break the form and submission.
• Have endpoint use airtable.js to update the appropriate table
  • Note: Max 5 requests per second. JS client has retry logic, but if we anticipate this being an issue we may need a caching proxy.

Additionally, once the user submits the volunteer form, we want to have a hook to send them a welcome email via SendGrid, and we want to point them toward their local Facebook group.

• Sengrid has a simple node.js client that we can leverage for this
• We would likely either want to immediately queue the email after airtable success, or long poll / cron, check the table for new entries, and dispatch when appropriate
  • Having a sendgrid hook to capture failed/success sends and update airtable would also be nice

Examples:

• Send Email Via Sendgrid
• Netlify + Airtable

Discussion:

• How do we share "base" table API documentation without exposing information or allowing for API key creation?
  • Are there different roles that account for this?
  • Do we need to have a "dummy" account and base that mirrors production that we can use as a reference?
• Should our welcome email include a link to "opt in" to communication that sets a flag in airtable?
• Do we have an email template?
• Are these API Keys already available on Netlify? If so, which keys are set?

[gvan12]

Awesome write up @dannyrb - thanks! I'll try to answer the discussion questions as best I can, @jcooter can fill in after.

How do we share "base" table API documentation without exposing information or allowing for API key creation?
Are there different roles that account for this?
Do we need to have a "dummy" account and base that mirrors production that we can use as a reference?

I think we'll maintain a non-prod/dummy base that we can use for development and store the production api keys in an ENV variable in netlify. Joe and I mulled over if we'd invite each dev to the non-prod base or use a dummy account we all share. We didn't land anywhere yet but I'm leaning towards 1 dummy account and we share the API key but not the base credentials giving us 1 point of contact if we need to refresh the non-prod key?

Should our welcome email include a link to "opt in" to communication that sets a flag in airtable?

This is probably necessary to do now that we're growing up a bit. We have folks who manage the airtable base so we can loop them in.

Do we have an email template?

Not that I'm aware of - we have people on the team who are more marketing/PR folks. We can ask them to write it for us.

[gvan12]

also we may want to consider if we want to use netlify's forms or if it's any work to just call it without their builtin form. I say this after looking into using Formik with netlify forms and this was a comment from the maintainer of Formik:

So netlify forms kinda blows with React or really any js framework for that matter. The reason is that Netlify needs to scan your static HTML for a

element and all the . To use Formik in the past with CRA, I ended up creating a dummy HTML form in my public/index.html file with all the names of all the inputs.

That being said - This is my first foray out with Netlify so I don't have the context to weigh the pros/cons well.

[jcooter]

We didn't land anywhere yet but I'm leaning towards 1 dummy account and we share the API key but not the base credentials giving us 1 point of contact if we need to refresh the non-prod key?

We're going to need to create a dummy account regardless, because airtable api keys are attached to the user and not the base. I don't have any strong opinion on whether or not we invite individual devs to the non-prod airtable base or use that dummy api key for everything. It might make more sense to have individual dev accounts so that if something weird happens we have a real user associated with the changes?

Should our welcome email include a link to "opt in" to communication that sets a flag in airtable?

Yes, with some caveats. Signing up to volunteer sort of inherently implies that they will be receiving communications from their state lead as part of the process. The state leads are organizing their individual groups and matching mask makers with drop off locations, etc. We should give volunteers notice that this is going to happen, but an opt-in isn't necessary.

However, I do want to allow volunteers to opt-in to a newsletter to let us send out updates, maybe weekly? We would be tying into sendgrid's marketing APIs for managing this list.

Do we have an email template?

No, but I believe sendgrid will manage templates for us. I haven't looked into the details yet, though. This is also a two-part question: the design elements of the emails, and the content.

[gvan12]

We want:

API will expect a POST message with these properties in the body.

1. name | REQUIRED | (string, longer than 3 char???)
2. zipcode | REQUIRED. (string for now unless you can get fancy and validate it's real.)
3. role | REQUIRED. (checkbox)
4. skills | (text)
5. email | REQUIRED. (validate is an email format at least)
6. comments | (text)

Will give 200 when successful
FUTURE UPLIFT - considering a response payload such as:
{ leaderName, leaderEmail, fbGroupUrl, }.

will give a 400 error if it's got bad data (shouldn't happen but might)
will give a 429 Rate limit if the function is hitting airtable's rate limits - though this is a little odd usage

[gvan12]

Gonna use material UI for components in the form. Formik for form state/validation