Custom forms

[SeHarlan]

Describe your PR

Related to #295
Fixes #

Pages/Interfaces that will change

businesses.js - commented out Airtable embed added Custome form and added (closeOnOverlayClick={false}) to parent modal for better functionality (like a success message)
AllyFeed.js - same as above except with AllySignUpForm

Screenshots / video of changes

Steps to test

1. Must add new .env keys (uses same values)
   GATSBY_AIRTABLE_API_KEY=
   GATSBY_AIRTABLE_BASE_ID=
2. I tried a few different things here but Gatsby only seems to recognize keys on the FE when appended with GATSBY_

Additional notes

• Everything should be set up correctly. I'm hitting the Airtable api but getting 403 from it. So it appears there is still a permissions issue with my API key or something like that. Hopefully it'll work for someone who has proper writing access.
• using Chakra's "as" attribute still didn't let me use default browser validation when use as="form" so I made a basic custom one that checks the state for null values (the default any any we need to require). If it finds any it returns out of the submit function and renders a message, we can customize this further in the future if we want to.
• The BE team asked me to validate URLs for the business. I came up with a hacky way to do this using cors-anywhere but again its real hacky/questionable so I've commented it out. This is my first time trying to do custom validation so we way want to pass that part on to someone with a little more experience in the area.

[netlify]

Deploy request for rebuild-black-business accepted.

Accepted with commit 7e04277

https://app.netlify.com/sites/rebuild-black-business/deploys/5eff6130ab6404000854f7ae

[magnificode]

This is great @SeHarlan thank you so much for taking this on. It'll really help set us up to be able to handle the data in a much better way!

[magnificode]

@SeHarlan are we able to pull the skill types from Airtable via the API? Just thinking of ways we can possibly keep things as dynamic as possible!

[SeHarlan]

This is proving really difficult. I've looked through all the docs and as far as I can see they don't provide access to the select options. There are quite a few complaints about it in the community forums lol. I made a custom hook that grabs the first page of docs and filters for just the specialty field and then I reduce it to only unique items. But this really isn't performant. Not sure what you wanna do with it so I'll leave it in just in case.

[SeHarlan]

[SeHarlan]

the dynamic fetch wasn't catching the businesses "Other" category so I add it in conditionally on line 88 on AirtableServices.js

[SeHarlan]

Exports in components/index.js were left as airtable embeds cause I don't know everything those might be linked to and didn't wanna mess up any fallbacks that might exist.

[racedale]

With the change of adding GATSBY_ prefix to the airtable environment variables, the gatsby-config.js file will also need updated along with .env.EXAMPLE and README.md. After updating the gatsby-config I was able to get passing tests locally (an admin will need to update Circle CI after the code change to get a ✔️ to show here)

[magnificode]

@SeHarlan This has been merged, can't thank you enough for the hard work here! This will help us to be able to move on some of our tasks to help improve the UX around business submissions!