As a user, after successfully submitting my permit payment I would like to view a confirmation page that tells me how I get my physical permit.

[lauraGgit]

Notes

Acceptance Criteria

• [x] after confirming payment in pay.gov the user is returned to the FS site with a message indicating payment was successful and and email has been sent (don't send email yet)
• [x] system has to close out transaction to pay.gov

Tasks

• [x] update mock pay.gov to send back success url (shekar)
• [x] design new view for the confirm page (email sent verbiage, button to print (disabled)) (bryan)
• [x] tracer bullet from pay.gov mock to frontend view (shekar, seth)
• [x] implement the view layout in frontend (seth)
• [x] make view changes based on new design (will)
• [x] update backend to store tracking id (shekar)
• [x] send complete trans to pay.gov (shekar)
• [x] backend expire token (verify) (shekar)
• [x] e2e tests (seth, will)
• [x] unit tests
• [x] eslint config change and code fixes for specs (Will)
• [x] update application-fields.service.ts to refactor getInvalidElement function (Will)
• [x] List available services in readme (Seth)
• [x] Authentication service should use handle error from Util service. (Seth)
• [x] Remove commented out code on sidebar component (Cameron)
• [x] Move trees sidebar-component code into tree-guidelines.component and remove sidebar component (Cameron)
• [x] Remove test service (seth)
• [x] Create pay.gov api service to store xml templates and other pay.gov functions. (Shekar)
• [x] pay.gov post request function should be moved into it's own named function. (Shekar)
• [x] update workflow with confirmation page (Bryan)
• [x] Approve design (Mark)
• [ ] update view to have h3 instead of p for email instructions per Melissa (will)

Questions

• is storing the transId from pay.gov necessary for payment reconciliation? We are storing just in case

Definition of Done

• [x] Code unit / e2e tested and comply with QWASP
• [x] No new security vulnerabilities
• [x] Internal team code review
• [x] Documentation / readme.md / CircleCI updated
• [x] Docker updated
• [x] Compare finished design with mockup
• [x] Usability tested

[sadlerw]

I think that the flow here could be that the user makes the payment and is redirected back to the fs xmas site where they then see the actual permit with instructions on how to print and a message saying a copy has been emailed to them.

[sethalt]

@MelissaBraxton @ASprinkle We implemented a confirmation page with a simple message indicating that the permit has been paid. Please review and approve if it looks good.

[sethalt]

@ASprinkle @MelissaBraxton can we get approval on this page?

[bryanmcfadden]

First draft of confirmation page.

[ASprinkle]

For confirmation, I think that looks really good - it clearly says what's been purchased, for what forest, and that the information has been emailed to the address provided. Is it necessary to have a "print this page" option in addition to everything else in the event the user realized they incorrectly typed their email address? Given those comments, I think this page looks great! (where do the facebook and twitter logo links at the bottom of the pages take the user?) I have a couple of comments related to the info you submit in order to pay. It could be possible that I was using an old url? https://forest-service-trees-staging.app.cloud.gov/applications/christmas-trees/forests/mthood/new I realize this story is for "Confirmation" but I wasn't sure where to put these comments: Should there be a limited entry on the Card Number box for payment information. The way it is now, it appears I can type in more numbers than would be for a credit card. The payment page had an error because I didn't insert a "Billing Address 2" only information in the first box. Not everyone has a suite # or a second line to their address

[sadlerw]

Is it necessary to have a "print this page" option in addition to everything else in the event the >user realized they incorrectly typed their email address?

Covered in #140

(where do the facebook and twitter logo links at the bottom of the pages take the user?)

good question. @bryanmcfadden do we know why these are here?

Should there be a limited entry on the Card Number box for payment information.

That page is just a mock so nothing on it really works like pay.gov would work. Just ignore the man behind the curtains please! :-)

Ping me during day and we can discuss with Bryan and Melissa

Thanks,

Will /cc @ASprinkle @MelissaBraxton

[JaneZC]

@ASprinkle @sadlerw

Hi Amber! The social media links at the bottom of the page are part of the page template and appears to be part of the template for the larger permitting project. So, it is really something that was inherited (and not added intentionally as part of this project). I'm sure it'll sort itself out as we move forward, and we can keep an eye on it.

[sadlerw]

implementation of mock above - order summary has an hr under it - not sure why the image didn't pick that up

[tram]

👍 Big green "Print permit" button! Ship it. 👎 Consider giving new and important information like the order summary and next step (printing the permit) more prominence than details—especially details the purchaser has just entered themselves. 👎 In details, data labels are more heavily weighted than data. For instance, if the goal is to ensure the purchaser has entered a properly-spelled name, emphasis should be on the name the purchaser entered instead of "Name". 🤔 Are there possible next steps (in addition to Print) for the purchaser from here? Is there important information that should be reiterated (e.g. cutting locations' dates & hours)? Not sure; just asking. 🤔 Product reference in the story could be reframed as a need. Something like "As someone purchasing a christmas tree permit, after successfully submitting a payment, I would like my purchase confirmed and to have my permit."

[sadlerw]

addressing points above:

4. so next step is to print the permit after this screen or go check email - I think permit expiration date (season end date) would be good for here possibly. There will be a future story to add other stuff to print with the permit like the cutting locations and dates as well so that might be enough.

[tram]

Mentioned in a DM to @sadlerw and adding here, one way to help with the label/data weight balance is to put it in a definition list instead of using headers.

[sadlerw]

Is this better?

[JaneZC]

@tram @sadlerw

To answer the question about possible next steps (other than print). Yes, there are other places to go; I am not certain if we've decided 100 percent what they should be? To get us off the ground, we've only included a link back to the tree guidelines page (thinking people may want to 'continue planning their trip' and that page contains all the info available to do that, including cutting dates and times).

Other potential options include - a link to maps, a link to the main Forest website (so out of the permitting application altogether), a link to the rules (although my understanding is that people will receive the rules with their permit). I think the goal was to keep it simple for now with one link and expand upon it if/when usability research shows a need for it. I personally had a concern that if we include too many links it may be a bit overwhelming and/or have too many 'calls to action' on one page.

[tram]

Mocked up some of the above recommendations. A table can also be used to list the order details and could look like this. Also removed redundant order number.

[bryanmcfadden]

@tram - I like this design :) In regards to the emphasis on the data rather than the headings...this breaks the current design pattern followed from the intake module. (see below)

[sethalt]

@tram

[tram]

👍 Recommend tightening up order details a hair and giving Print permit button just a little more room, then ship it.

[tram]

Belay my last. Missed a couple things. Consider moving Print permit button above order details. Also consider removing redundant order number.

[tram]

Per discussion with @sadlerw, the design in the image above is approved.

[MelissaBraxton]

One minor thing. There is a discrepancy between the mock and what's on staging. Under "additional information" the text telling folks a link to their permit has been emailed to them has the p style, but it should be higher up in the hierarchy (h3), as it is in the last mock.