LG-15980 Add passport info section to verify info form

[shanechesnutt-ft]

🎫 Ticket

Link to the relevant ticket:
LG-15980

🛠 Summary of changes

Add passport info section to verify info form

📜 Testing Plan

Scenario: Verify Info page in IPP Passport Flow

• Login through the oidc sinatra application selecting the Identity Verified level of service.
• Create a new account
• Complete the ID-IPP Passport flow reaching the Verify Info page
• Ensure Passport Book (Surname, First name, Date of Birth), Address, SSN info is displayed
• Ensure no update link is present in the passport section
• Ensure Address info can be updated using the update link
• Ensure SSN info can be updated using the update link
• Ensure Verify Info page matches Figma design

Scenario: Verify Info page in IPP State-ID Flow

• Login through the oidc sinatra application selecting the Identity Verified level of service.
• Create a new account
• Complete the ID-IPP State-ID flow reaching the Verify Info page
• Ensure State-ID, Address, SSN info is displayed
• Ensure State-ID info can be updated using the update link
• Ensure Address info can be updated using the update link
• Ensure SSN info can be updated using the update link

👀 Screenshots

Verify Info for Passport

Verify Info for State-ID

[gina-yamada]

✅ Ensure Verify Info page matches Figma design
There are slight variations. The mocks might just be out of date. For example, the data displayed is all caps in the mocks but not on your branch. (It bet they are not on main.) Also, the SSN section display is a little different. Both seem out of scope. I think the Figma probably just needs to be updated. I would not make any changes in your branch. New ticket if that should be changed. Shane and Annie worked together on an agreed solution. Screenshots in the description of this PR were updated since this comment. See comments below. Marking as done.
✅ Testing plan
✅ Tested diff scenarios with same address as ID and diff address as ID
✅ Expected step nav
✅ Expected page navigation

[gina-yamada]

I tested with the flags off as well. Working as I'd expect. Nice work Shane!

[anniehirshman-gsa]

❌ Ensure Verify Info page matches Figma design There are slight variations. The mocks might just be out of date. For example, the data displayed is all caps in the mocks but not on your branch. (It bet they are not on main.) Also, the SSN section display is a little different.

Thanks for flagging these!

• Data in all caps: this should be cap/lc reflecting what the user inputs - I'll make a note to update this in Figma
• SSN section: Should not display the second "Social Security number" label
• Additionally, the current section headings have 8px top/bottom padding, which makes them misaligned from the "Update" button, and the overall spacing above and below the hrs is not even (should be 16px)

If it's easy to fix the SSN label and spacing to match Figma now, that would be ideal, but keep me posted if it needs more time and a separate ticket. Thanks again!!

[anniehirshman-gsa]

Screenshot LGTM - with one comment about (preexisting) inconsistencies with Figma that would be great to fix if possible

[shanechesnutt-ft]

Screenshot LGTM - with one comment about (preexisting) inconsistencies with Figma that would be great to fix if possible

@anniehirshman-gsa I pushed up a fix for those inconsistencies with Figma. I also updated my screenshots with the changes that I have made.

[eileen-nava]

I know this is already merged, I just wanted to chime in and say LGTM. 👍🏻

[eileen-nava]

👏🏻 This is helpful for clarity.

[eileen-nava]

Nice use of a prefix and Faker to ensure the ssn will be recognized as fake. 👍🏻