Update contact form to use frontend-only services

[traycn]

Dependency

• [ ] Talk to Bonnie about Netlify or AWS Serverless function

Overview

We need to update the contact form to use front-end only services for 311-Data users to submit their concerns as a github issue. Users would then receive a confirmation email.

This issue is created from the previous issue - Spike: Fix contact form to use frontend-only service

---

Solution:

Add 2 events after the existing form is submitted. For reference to the data we are using, the values collected 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 - POST body data model  (open to change)
{
    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.

Action Items

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

Event 1:

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

ContactForm.jsx

• [x] 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 previously mentioned code snippet Octokit - POST body 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.

ContactForm.jsx

• [ ] 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.

Resources/Instructions

Octokit

Octokit/Core.js documentation Octokit/Core.js package Create a new Github Access Token Create a new issue - Octokit documentation

EmailJS

Sign-Up for EmailJS Send an email after Contact Form is submitted