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 [email protected] 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