[UX/UI] Update Print Preview/PDF page to be more user friendly

[exalate-issue-sync]

As a user, I want to be able to clearly distinguish between what it means to view a previously generated PDF/Print Preview and creating a new one with updated information so that I don’t accidentally look at “stale” data.

Acceptance Criteria

Given the user has accessed a Form 3X or 24 report,

When they go to the Print Preview/PDF page

If they have never generated a Print Preview/PDF before,

Then they will have the option to generate a Print Preview/PDF.

And if they have previously generated a Print Preview/PDF, they will see the time/date when they last generated the PDF

And they will have the option to either:

1. Open the previously generated PDF
2. Generate a new PDF

QA Notes

null

DEV Notes

null

Design

Current design (this is in GMT due to user location):

!image-20241028-172025.png|width=663,height=503,alt="image-20241028-172025.png"!

Usability concerns include:

Timestamp format

“Submitted on” is unclear verbiage

Difference between “Open PDF” and “Compile New PDF”, and what those actions mean

h3.

 

New Design

CSS Information : The Blue button hex code: 35BDBB | The Gray hex code is AEB0B5 

!2 Creating your print preview .png|width=543,height=511,alt="2 Creating your print preview .png"!

 

!3 Your print preview is ready!.png|width=540,height=510,alt="3 Your print preview is ready!.png"!

See full ticket and images here: FECFILE-1732

[exalate-issue-sync]

akhorsand commented: Note: This ticket is solely for a redesign. If we want to change the features available to the user, that will be a feature enhancement ticket.

[exalate-issue-sync]

Mitchell Jarrett commented: Wieres added. BA’s please review

[~accountid:712020:3243085d-540a-4657-ad08-d891487882d0] [~accountid:61b0b42cd5986c006a9e1c94]

[exalate-issue-sync]

akhorsand commented: [~accountid:61b0b42cc510bc006b5c03ed] [~accountid:712020:6466b08c-50a2-42ee-ad81-cfe79921d3e8] as per our processes please add completed wires with explanations to the “Design” section of the ticket, as well as any relevant CSS information.

[exalate-issue-sync]

Shannon Clark commented: [~accountid:61b0b42cd5986c006a9e1c94] i’m sorry i’ll do that now

[exalate-issue-sync]

Shannon Clark commented: [~accountid:61b0b42cd5986c006a9e1c94] I don’t see and additional CSS information. Please inform.

[exalate-issue-sync]

akhorsand commented: [~accountid:712020:6466b08c-50a2-42ee-ad81-cfe79921d3e8] I was referring to the hex codes at the bottom of the screenshots - may be helpful for devs.

[exalate-issue-sync]

Shannon Clark commented: [~accountid:61b0b42cd5986c006a9e1c94] oh okay, so you’d rather the hex codes be inside of the screen shot or just in the design section typed. Just clarifying, thank you

[exalate-issue-sync]

Shannon Clark commented: [~accountid:61b0b42cd5986c006a9e1c94] [~accountid:712020:3243085d-540a-4657-ad08-d891487882d0] please review.

[exalate-issue-sync]

akhorsand commented: [~accountid:712020:6466b08c-50a2-42ee-ad81-cfe79921d3e8] are there screenshots missing, or are the other ones from [https://fecgov.atlassian.net/browse/FECFILE-1790|https://fecgov.atlassian.net/browse/FECFILE-1790|smart-link] not needed? If we want all of them, what does “continue without reviewing” mean? Also, what determines which screen shows (for example, “Would you like to create a print preview?” vs “Your print preview is ready!” vs “What would you like to do next?”