FE: Create Patient Check in confirmation screen

[MekoHong]

Description

As a Veteran, I want to receive confirmation that I have successfully checked in for my appointment and understand what to expect next.

As part of this story we want to:

• Update patient check in confirmation screen to be displayed upon successful check in

Note: Shell screen was created as part of ticket #5821

Documentation

• /v0/appointments/check-in

Acceptance Criteria

1. - [ ] Update patient check in confirmation screen [You're checked in](https://app.mural.co/t/adhoccorporateworkspace2583/m/adhoccorporateworkspace2583/1680618865216/19982c43fee09740dedbf4ebaf4e7f12f4787b84?wid=1-1684959351214) with the following information - Help icon is displayed on the top right - Description text: We'll come get you from the waiting room when it's time for your appointment to start. If you wait more than 15 minutes, tell a staff member. - redirect icon with link: Find out how to request travel pay reimbursement - Appointment card detail information Screen logic and transition 2. - [ ] Verify You're checked in screen is displayed if - user selects Check in now action button from the appts detail screen AND /v0/appointments/check-in service returns check in success Or - upon successful completion of demographics screen verification AND /v0/appointments/check-in service returns check in success 3. - [ ] Verify when user selects Close they land back on the appt details screen 6. - [ ] Verify when user selects the help icon the appointment help panel is displayed 7. - [ ] Verify when selecting link 'find out how to request travel pay reimbursement' display message box ['You're leaving the app'](https://app.mural.co/t/adhoccorporateworkspace2583/m/adhoccorporateworkspace2583/1680618865216/19982c43fee09740dedbf4ebaf4e7f12f4787b84?wid=0-1685721324818) with Cancel & Ok options. - If user selects yes direct them to web URL [How to file a VA travel reimbursement claime online](https://www.va.gov/resources/how-to-file-a-va-travel-reimbursement-claim-online/). See Check in code reference: [TravelPayReimbursementLink.jsx](https://github.com/department-of-veterans-affairs/vets-website/blob/223d00c67de107978b2ba8975151ecf8503fe0e9/src/applications/check-in/components/TravelPayReimbursementLink.jsx#L11C16-L11C76) - If cancel close the message box and continue to display the 'You're checked in screen **Accessibility Requirements** Standard: 1. Everything on the page should be read by the screen reader. - If anything is being conveyed visually only (buttons, menu items, list, tables, images, headings, forms, etc) the component type needs to be announced by the screenreader. (Include name (title), role, value) Each page should support text resizing based on the OS font scaling settings without loss of content, content overlap, or horizontal scroll. 2. Each touch target must be at minimum 44px by 44px 3. All elements on a page should be able to be traversed by an auxiliary keyboard. As a user uses the keyboard to navigate a page, its focus element should be clear. 4. The app needs to support operability by tap (no gestures) or voice control only. In cases where gestures occur, e.g. scroll, ensure these simple gestures are operable through the OS’ built-in capabilities. 5. For all lists with more than 1 option/result, screen reader should specify count of each option as it reads the option ## Notes & Open Questions - Dependencies/Roadblocks: - Any internal/external dependencies? - Test accounts needed? - Does this require QA? - Dev Notes: ## Ticket Checklist - [X] Acceptance criteria defined - [X] Labels added (front-end, back-end, feature) - [X] Linked to an Epic

[mistymg]

Content is correct in this ticket. (Note just for me)

[MekoHong]

Sent a ping on DSVA check in mobile channel to get the URL redirect for AC number 5 https://dsva.slack.com/archives/C05AH7BHP19/p1689973670945849