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 glenn@piludu.io 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.