Components

Amplify 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.

ActionComplete.vue

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.

Views:

• CompletePage.vue

AppFooter.vue

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.

Views:

• Home.vue