Components
The Amplify app has a number of Vue components, which are documented here. Check back frequently for the most recent information. To report errata or suggest changes, email [email protected] or message Glenn on Slack.
Last updated: 10/1/2022
This component renders when a user completes the check-out process after generating a campaign letter. It will show the letter delivery date, the donation amount, and other campaign-related sub-components. Because Stripe payments require a redirect away from Amplify, this component will use the sessionId query parameter from Stripe to restore local state, which is stored in a user's Local Storage.
Importantly, this component is also responsible for creating a transaction record for the previously complete check-out.
Props: none.
Data:
- loading boolean: If true, a loading animation will render while the transaction is recorded and campaign letter are generated.
- email string: User's email address. Returned by the back-end when a transaction is recorded but currently has no use.
- amount number: The amount of a user's campaign donation, in cents. Returned from createTransactionRecord (which it gets from the Stripe API). Shown in success message.
- expectedDeliveryDate string: The expected campaign letter delivery date returned from LOB API.
- congressMembers array of objects: List of congress people to display in subcomponent. Currently not implemented.
Computed Properties:
- donationAmount number: amount converted from cents to dollars.
- selectedRep string: Returns from local state the Representative that was selected during the campaign letter generation process.
- userData object: Returns from local state user data to send to LOB API.
- letterId string: Returns from local state the campaign letter template id for LOB.
- lobReturnAddressId string: Returns from local state the return address id generated during the letter creation process.
Methods:
- createTransactionRecord(sessionId: string): void
- Verifies Stripe payment on the Amplify back-end and records the transaction into Amplify's database. Returns nothing, but modifies amount and email data attributes.
- createCampaignLetter(sessionId: string): void
- Creates a campaign letter with LOB. Returns nothing, but modifies expectedDelieryDate and loading data attributes.
Last updated: 10/1/2022
This component defines the footer of Amplify. It should hold important legalese, as well as site navigation and social media links.
Props: none.
Data:
- icons string[ ]: A list of icon identifiers for social media buttons.
Computed Properties: none.
Methods: none.
Last updated: 10/1/2022
This component controls the navigation bar for the app.
Props: none.
Data:
- dialog boolean: Present, but unused.
- menuItems Array<string, string>: List of navigation links and their paths.
Computed Properties: none.
Methods: none.
Last updated: 10/1/2022
Handles whether a user will see a log in or log out button in Step 1 of the Amplify letter generation process.
Props: none.
Data: none.
Computed Properties: none.
Methods: none.
Last updated: 10/1/2022
This component wraps the AuthenticationButton component.
Props: none.
Data: none.
Computed Properties: none.
Methods: none.
Last updated: 10/29/22
A single card for rendering campaign information
Props:
- campaign Campaign
Data:
- defaultCampaignLogoUrl string: * defaultCampaignLogoUrl string: a path for a default campaign image if none is sent with Campaign.
Methods:
- getCampaignLogo(campaign: Campaign): string
- returns a Campaign's image or the default campaign image.
Last updated: 10/29/22
A container to render CampaignCards.
Props: none.
Data:
- campaigns Campaign[ ]: an array of Campaigns returned from the campaign API.
- publicPath string: an environment variable exposing the public assets folder.
- defaultCampaignLogoUrl string: a path for a default campaign image if none is returned.
Computed Properties: none.
Methods:
- getCampaignLogo(campaign: Campaign): string
- returns a Campaign's image or the default campaign image.
Last Updated: 10/30/22
Holds one or more CampaignCards in a carousel element. Similar to CampaignCards.vue, but with more Vuetify. May be a good candidate to consolidate into one component.
Props: none.
Data:
- slides number: Indexes the v-slide-group that powers the carousel. See Veutify's side group docs for more info.
- defaultCampaignLogoUrl string: Path for a default campaign image if none is returned with the Campaign.
- campaings Campaign[ ]: An array of Campaigns returned from the Campaign API.
Computed Properties: none.
Methods:
- getCampaignLogo(campaign: Campaign): string *returns a Campaign's image or the default campaign image.
Last Updated: 10/30/22
Interface for the Amplify user to pick a donation amount and open a payment session.
Props: none.
Data:
- Donation number: the donation amount selected by the user in dollars.
Computed Properties: none.
Methods:
- submit(): void
- Creates a checkout session with the checkout API, dumps user's state into the browser's Local Storage, and redirects the user to Stripe.
Last Updated: 10/30/22
The Hero element for the Amplify home page.
Props: none.
Data: none.
Computed Properties: none.
Methods: none.
Last Updated: 10/30/22
Renders a campaign letter for the user, filling in representative details.
Props:
- repName string: Representative's name
- letterBody string: HTML string containing a letter from the Lob API.
- selectedRep object<string, any>: Information about the selected representative.
Data: none.
- Date Date: User's current date.
- isSubmitted: Controls if the letter content renders. Currently is always true.
Computed Properties: none.
Methods:
- currentDate(): Date
- Returns a formatted date. Is not currently used. As a side note, this type of formatting could be more easily done using the Intl module.
Last Updated: 11/31/22
Appears if user is not logged in.
Props: none.
Data: none.
Computed Properties: none.
Methods:
- login (): void
- Redirects an unauthenticated user to the 0Auth login.
Last Updated: 11/31/22
Logs a user out and redirects to home page.
Props: none.
Data: none.
Computed Properties: none.
Methods:
- login (): void
- Redirects an user to home back after logging them out.
Last Updated: 11/2/22
Renders information about a representative.
Props:
- member Representative: a congressperson or gov't official to be rendered.
Data: none.
Computed Properties: none.
Methods:
- handleRepClick(): void
- gets a letter from the Lob API and sets it in state, then emits the representative and the letter data to its parent component.
Last Updated: 11/2/22
Handles the zipcode search and will filter results by local, state, federal, etc.
Props: none.
Data:
- letterBody string: Letter content from Lob API.
- selectedRep Representative: The user-selected Representative.
- congressMembers Representative[]: List of Representatives returned from Representatives API.
- currentFilter string: The filter applied to Representatives (local, state, etc).
- hasContent boolean: shows congressMembers if there are results from the Representatives API.
- postalCode string: user's zipcode
- listVisible boolean: controls displayed representatives. Can probably be merged with hasContent.
- isActive boolean: controls styling of toggled filter buttons.
Computed Properties: none.
Methods:
- handleRepSelected(letterBody: string, selectedRep: Representative, step2: string): void
- Sets selectedRep and letterBody. Moves stepper to step 2.
- checkInputContent(): void
- Checks for postalCode and sets hasContent.
- createRepList(): void
- Gets Representatives from Representative API.
- filterList(): void
- Gets Representatives and also filters them. Needs to be combined with createRepList().