opensourcefellows/amplify-front-end

A 501c3 nonprofit that is creating accessibility to civic engagement for marginalized communities

amplify-front-end's Issues

Error 429: Too many requests

Receiving this error as soon as I search postal code (so after you click on a campaign, and search for a postal code). This means that nothing is loading as it times me out from the api as seen in the screenshot below.

I think the issue is the following code as it keeps sending requests to API which then makes it time out (I could be wrong). We also need to update this to send the whole member object, not just the name.

        async handleRepClick (member) {
            try{
                this.repName = `Dear ${member.name}`;
                this.shouldRender = false;
                //from campaign id find template id and then make get request with template id
                var campaignId =this.$route.params.campaignId;

                const versions = await axios.get(
                    'https://murmuring-headland-63935.herokuapp.com/api/Letter_Versions/'+ campaignId
                    );

                let latestVersion = versions.data[versions.data.length - 1].template_id;


                const letter = await axios.get(
                    'https://murmuring-headland-63935.herokuapp.com/api/lob/templates/' + latestVersion
                    );
                this.letterBody = letter.data.versions[0].html;
                this.isStep2 = true;


            } catch(e){
                console.error(e);
            }

        },

user send message button

After customizing and adding name, send button appears and creates lob letter object

1. Create sendmessage.vue component in src
2. vue-show set to false until name input added
3. Create letter request with the following info:

• file: template_id (from campaign id)
• from: format google civic info of representative name and address into Lob create letter request

Displaying the letter

Issues

FrontEnd

• User Input of Address
• Display message if us verification fails
• If verification passes, populate representatives from Google Civic API

Backend

• Format address into US verification object
• Return boolean after check with Lob
  

Architecture

• ORM set up
• Post and get functions

QA

• Deliverability tests

Working together

	Frontend	Backend	Architecture	QA/Security
Verify Address	based off of boolean check, display one of the screens	Format address input from FrontEnd to Lob, return boolean check	Make it easier for backend and database to connect	testing the data passed to APIs

This function uses the filter under the address to match the letter template to display once a representative is selected

Data tables

Fix casing in file names

Currently, file names have different cases. This needs to be fix so a standard is set to avoid errors like below

This dependency was not found:

* @/components/DonateMoney.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/takeAction.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save @/components/DonateMoney.vue

Send to Auth0

User Story:

1. User has not authenticated
2. User clicks on send letter button
3. User Authentication is checked and returns false
4. User is sent to universal login page to authenticate (sms passwordless)
5. Routed back to amplify (handled by auth0

Checking User Authentication

checking accessToken sent by backend @teakopp can add more here?
Using an if else logic to either
(if accessToken = authenticated) route to sending the letter with user information being collected
(if accessToken = not authenticate) route to auth0 universal login

User sent to Universal login page

@mahrsbar FrontEnd is sending the user to dev-3huf08ov.us.auth0.com/login

if we want to embed it in the app, we can look at lock

Security Consideration vs Embedded Login
Seamless CSRF protection. This helps prevent third-party impersonation or the hijacking of sessions

Advocats Onboarding

Onboarding Specs Doc

• convert into wiki
• components structure
• updating links
• update Logic model
• implementation log

Project Issues:

• Overall Project board within PE repo
• Corresponding Issues in Advocats Board
• Optimization issue template

OSS Architecture:

• Secrets in frontend
• Test Suite
• Administrative Action
• SRE?

Community

• Onboarding Deck
• Finish ramp issue
• Discussion setup? (Frontend notes from standup and one for team changes?)
• Jonathan and Manisha attend one of the bimonthly C4A?

Epic Outline: Browsing Campaigns

• Display Campaign Cards
• Update front-end code to insert images manually
• Insert SVG images into cards

Display message if US Verification fails

sa

Screen 1

• Have stepper buttons automatically disable and enable as user moves through the three steps

Screen 2: Preview letter

• Improve search functionality of postal code; currently slow and doesn't work consistently, entering 1 number displays postal codes, need some kind of postal code verification, might also be related to back-end
• Filter by levels (#20)
• clicking on representative displays letter, default to using "federal" not the first one listed (#19)
• Ensure letter does not display html tags; use <span v-html="letterBody"></span>

@username getting up to speed

Hi and welcome to being one of the AdvoCats! Here is a self paced guide to get familiar with the projects stack as well as how to use available resources.

Resources:

• Wiki for API Endpoints
• Project Specification
• Invision Prototypes

Week 1

• Read Project Specification : understand app stucture
• set up your repo: are you able to run npm?
• pick an issue with label "good first issue"

Week 2:

• Read Project Specifications: Vuetify
• Drop into a pair hour

Week 3:

• Read Project Specification: Data Structures
• Write 2 questions that came up
• Submit a pull request: caching input,

Week 4:

• Read Project Specifications: Features
• Submit an issue for optimization or bug fix
• Submit a pull request on any of these labels: letter append, payment verification

Week 5:

• suggest subbtask issues

Bug: Vuetify colors not showing up

All across the application, Vuetify theme colors aren't applying.
For example, <v-btn color="primary"> doesn't work.

I tried this Stack overflow solution but it didn't fix anything.

Also need to ensure that custom theme colors as found in plugins/vuetify.js are also being applied:

Populate representatives after address verification

Sfgdvcfe

Screen 3: Auth0

• Clicking login to send displays Auth0 in a popup format that automatically redirects user to next screen after successfully authentication (#22)

tests on validating data

Display delivery date from Lob

Epic: Review Letter

User Flow:

Once user has authenticated, routes are opened to review letter, send letter, and add any donations

These backend functions use the API endpoints from Lob and Stripe. We are able to perform the folllowing functions:

• review letter
  • letter displayed: use get function to show contents of letter
  • customizeable message: frontend caches message to append
  • append letter if there is a custom message : use append function to send new version of letter

Epic Outline: Letter Payment

To do

• OpenSourceFellows/amplify#46
• #53
• #54
• ProgramEquity/amplify#47

User Story

- User picks a donation amount - User can choose to send letter without donation amount (need to make this more clear) - User is directed to complete transaction via stripe checkout - Once payment is successful, letter is sent

Data Structures

Stripe API

• Send zipcode from constituent table for payment
• donation amounts are translated as item numbers in checkout

Lob API

• Used to post lob letter template object

Checkout button

Display Letter object

Send Letter

Context

Part of the Letter Payment Epic, once the user has successfully completed payment #53, the letter can be sent out

To do

• check successful payment
• create a lob post request

Successful Payment

If successful, have send message button appear
If unsuccessful, prompt them back to second accordion

Lob post request

Use the create/post function with the letter id template of the given campaign
color: false for black and white
to: representative address
from: user address
file: letter id template

Is this
backend?
update letters sent once successful lob object is created
Throttle API

User input name

Purpose: Frontend record user name when user is ready to send letter via an input box

1. Import campaign.js from backend and volunteer API
2. Frontend: Gather input in a component in campaign.vue
3. POST User name to volunteer table in backend

User Input of Address

Front End: Screen 3 - Enter Address

Screen 3

User Story: After address is entered, table of representatives that can be clicked individually for a letter template.

Display Representatives

• Table in BootStrap Vue

Message Preview

Message + Button Structure

• Creating a Grid
• Button

Representative Filter + Relational Database

• When user clicks on the representative, Backend to create an index by officeDiv
  • Use the message components here

Show Message

• Reorient current amplify message box to new grid structure
• structure for display:

- function to populate message:

Send Mail Button

• Button structure

• BackEnd: Pass template iD + User Address

Stripe Integration UI

Front End: Screen 1 Gallery

Screen 1

User story: Browsing campaigns to support, clicking a card goes to screen 2 via Vue Show component transition (everything is ocourring on the same page)

Feature breakdown

• Amplify banner
• purpose, approach, community container
• grid structure gallery
• card structure
• hover
• 'add a campaign' button

Resources

• overall styling elements (figma)
• Airtable wiki for field data in Campaigns

Building features

Campaign Card routing from backend info

• b-card calling on variables:
  • Using a card structure to house the information Potentially using:
  • 'b-card-header' : title of campaign
  • 'b-card-img' : picture of
  • internally how we've implemented it for the library

Creating the Grid - Code Reference

Adding a campaign

• button: links to this form https://airtable.com/shrOBoQB6Y3lrcCix

Hover

• trigger: whenever the campaign card is hovered over

  • The v-hover component is a wrapper that should contain only one child element, and can trigger an event when hovered over. In order for v-hover to work properly, either the value prop should be set to true or the wrapped element should contain v-slot="{ wrapper }".

• display: code reference for the below

Auth0 Implementation

Issue

Auth0 does not accept callback urls ending with a wildcard such as /campaign/* but we require users to log in from any campaign page, such as campaign/1, campaign/2, etc.

Fix

We've attempted to implement a single callback url (e.g. /campaign) that handles redirect to url with campaign id in LoginButton.vue file following the logic presented in solution one here.

Remaining

Currently, /campaign does not exist as a page in our app, only /campaign/campaignId does, so we need to create an empty page (e.g. /campaign/callback) that handles this redirect.

Design best Mobile View:

Design best Mobile View:

Originally posted by @manishapriya94 in https://github.com/ProgramEquity/amplify-front-end/discussions/63#discussioncomment-2039470

Hi all I decided to tackle this and I'm proposig this

descriptors + image of figma brainstorm

I have some questioons oon solvencyy:

These are references that have used a simiilar design:

Letter checkout

Caching inputs

Translate letters

Create text field Component

• Create text field component that looks like this:

• Change "bio(optional)" to "I'm in support because of (optional)"
• Create a variable named ""

Display letter object with template_id

Purpose: Use Lob to retrieve html that is displayed for the letter once representative is selected

1. This is triggered by selectRepresentative in LetterDisplay.Vue

2. Call backend for template_id (hardcode this variable until backend gives you variable:)

3. Use GET Function from lob to retrieve the template object via template_id, use html attribute to display current letter Docs

Getting Started 1/31-2/7

Resources:

• Overall Project Board
• FrontEnd Project Board
• Feature Breakdown

What do we want in our readme?

• issue labels meaning
• stack
• ???

Research:

• Setting up structure for client side in Vue
  • using express too instantiate

Working on:

• First screen to implement

Checkout

Review letter: User Input

Context

Part of the series of panels for sending letter OpenSourceFellows/amplify#50 . This screen comes after the user has reviewed the advocacy letter.

To do

• input for name: sent via lob ("from" field) and adds user name to volunteer data table
• input fields for user address: text fields for street address, state, city, and zip. This will be verified in OpenSourceFellows/amplify#48
• user guideline checkbox: user guidelines prohibit spam interactions, boolean in letters_sent: guidelines
• required to transition to next screen
• hyperlink to guidelines
• sign up checkbox: give permission for advocacy groups to contact user. Added to letter sent boolean field: permissions
• optional
• add to volunteers table
• distributed to marketing and the cause organization

Context:

User Story
As a constituent, I want to add my information to get updates and verify my identity

Data Structures

Learn how to use with the wiki

User input message

User input representative

Front End: Screen 2 - Default Empty

Screen 2

User Story: The screen that appears after user clicks on campaign. Waiting for user to input address and filter choice. Default is to include all office divisions?

Building it:

• Assets & Styling in Figma

Toggle Banner

• Collapse function or banner?
• summary comes from this table
• Grid structure: Flexbox

Filter:

• create button

• use google civic api division variable to connect

Search button (aspect code from amplify here)