Spike: Fix contact form to use frontend-only service

[edwinjue]

Overview

We need to fix entire workflow from when submit button gets clicked on the contact form to having the submission appear in a github issue, so that we can know when to process requests.

Action Items

• [x] Review the original code from 311-data:
• [x] Identify if any of it is reusable
• [x] define plan for how we will restructure to account for no backend
• [x] get plan sign-off from dev lead and product
• [x] document findings and create an issue to implement

Resources/Instructions

Original code locations

• https://github.com/edwinjue/311-data-v2/blob/6ea06bc6c5a0dbee18cd6a19a10661e4db5bb05c/redux/sagas/data.js#L68
• API endpoint code
• github code
  • await github.create_issue(feedback.title, feedback.body)
  • await github.add_issue_to_project(id)
• email code
  • await email.respond_to_feedback(feedback.body, number)

[alexlaw528]

@edwinjue A potential solution we can employ is to trigger a Github Action whenever a user makes an Issue request. We'll need someone with pull request access to make a access token since there's no way to create an issue without providing credentials .

Can you create a Personal Access Token and add it to Github secrets so I can use for testing? I don't have rights to do this on the 311 repo.

[edwinjue]

@alexlaw528 Thank you so much for being so proactive on this! I will take a look when I have some time in the evening. In the meanwhile, feel free to fork our main branch into your own personal github repo to get started. Once we have something working on your own personal repo, we can work together to port it over to 311-data. I really appreciate it and will follow up later!

[ryanfchase]

@traycn 's suggestions (she will expand on these in her work)

• https://docs.github.com/en/rest/issues?apiVersion=2022-11-28
• https://www.emailjs.com/

[traycn]

Availability: 2/2 - 2/5: 4AM - 9AM PT

[Skydodle]

@traycn thank you so much for picking up this issue! Just a gentle reminder to move this issue to 'in progress' on the Project Board as soon as you assign yourself so that this issue will no longer be on the 'priortized backlog' for other devs to pick up. Thanks again!

[traycn]

Solution Proposal:

Add 2 events after the existing form is submitted. For reference to the data we are using, the values we are collecting on the forms submit are below.

// Contact Form field values:
{
     FirstName,
     LastName,
     Email,
     Association (optional),
     Message
}

Event 1: Create a new Github Issue:

Create a Github Issue using Octokit/Core.js. Documentation for the Create an issue POST here.

• Set contact form field values into the POST request body as follows:

  // Octokit - Create a Github Issue POST 
  {
  owner: 'hackforla',
  repo: '311-data',
  title: 'Contact Form - {FirstName, LastName Association}',
  body: '{FirstName, ` `, LastName,` `, Association} <br>
           Email - {Email} <br>
           Message - {Message}
        ',
  assignees: [
    '[insert default assignee here]'
  ],
  milestone: [insert default milestone here],
  labels: [
    'bug'
  ],
  headers: {
    'X-GitHub-Api-Version': '2022-11-28'
  }
  }

  On success trigger to send an email. Refer to Event 2.

Event 2: Send an email using EmailJS

Documentation for the sendForm() function here.

---

Development work:

Loc: 311-data.components.contact.ContactForm.jsx

Event 1:

• Create a personal access token for HackForLA github account, docs here.

For the 311-Data repo

• Install octokit/core.js package here.
• Create octokit instance w/access token (do not make this token public)
  • Write a octokit.request POST function with the previous mentioned code snippet of the data model.
  • Execute the octokit.request POST function on the contact form submit.

Event 2:

• Create a EmailJS account using HackForLA, sign up here.
  • Create an email service.
  • Create an email template.
  • Gather the email service and email template ID.

For the 311-Data repo

• Create the sendForm() function, doc here with the email service and template ID.
  • Define values of request body based on Contact Form field values and Email template values.
  • Execute the sendForm() function after receiving a 201 code response from Octokit.

-- Let me know your thoughts on this proposal @ryanfchase @edwinjue

[traycn]

Created new issue for the Spike item: https://github.com/hackforla/311-data/issues/1682