FE: Implement Check-in Avail/Check In Status Label display logic

[MekoHong]

Description

As a veteran, I want to know if check in is available for any of my appts on my appt list view, so that I will know if I can initiate the check in process or have already checked in.

Check In Eligibility:

• e checkIn enabled
• status (NO ACTION TAKEN/TODAY, INPATIENT/NO ACT TAKN, NON-COUNT) or empty
• in-person appointment (clinic)
• within the 45 minutes before 15 minutes after start time window

As part of this story we want to:

Display status label for Check in avail and Checked on the Upcoming appt list in when applicable.

• Use a Informative label tag (FE: tagBlue)
• Use existing component: linked in the ACs

Refer to Mural Process & Lo Fi process map for reference:

Acceptance Criteria

1. - [ ] Display status labels 'Check-in available on the upcoming appointments list when "eCheckinAllowed": True and the user is within the day of appt window 2. - [ ] Display status label 'Checked-in on the upcoming appointments list if the user has already checked in for the appt (confirm with back end the flag that will confirm this in which service) Check-in available & Checked in style reference: - [Link to VA Design Library for label tag style](https://www.figma.com/file/QVLPB3eOunmKrgQOuOt0SU/%F0%9F%93%90-DesignLibrary2.0---VAMobile?type=design&node-id=760-2222&t=Xn6aIYG73DsNsnqd-4) 3. - [ ] Ensure when the appointment moves to Past the status label is shown as confirmed **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

[MekoHong]

@kidlaurenpeace when you have it, can you update AC 1 to include the status label colors? Thanks

[kidlaurenpeace]

@MekoHong -- Done!

[mistymg]

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

[MekoHong]

@kidlaurenpeace @mistymg FYI taking this through FE handoff today 7/13

[dumathane]

I think this already exists @kidlaurenpeace CC: @MekoHong ?

background: {
tagGreen: colors.greenLightest,

border: {
    tagGreen: colors.green,

green: '#2e8540',
greenLightest: '#e7f4e4',

[dumathane]

I think it's being used for refill in process tags in RX, let me try to find one

[dumathane]

[kidlaurenpeace]

Yep exactly @dumathane -- I went ahead and updated the language in the ACs to reflect that.

[dumathane]

I think this needs more discussion in handoff, I think we're missing some logic about how we would want this display and when and what would be a meaningful way to include it etc.

[MekoHong]

Logic of displaying has been added back to the ticket

[MekoHong]

Changes are needed for the tag label colors. Ticket will be updated with new label colors and will be dependent on completion of the label tag reconciliation & updates ticket slated for sprint 77. CC: @kidlaurenpeace

[MekoHong]

Ticket updated @jperk51 @dumathane for AC number 2 I wasn't sure which backend service would need to be reviewed to determine status Checked-in. If you could confirm and add those details to the ac. Thanks!