[CST] Claim phases 1-4 accordion

[jacobworrell]

Value Statement

As a veteran checking the status of my compensation claim I want to see a clear description of each of the first four claim phases and understand where I am in the process So that I know what to expect next and understand what actions I can take to help my claim get a timely and favorable decision.

---

Background Context

This ticket represents one half of the claim phases that will ultimately need to be presented in an accordion. Design screenshots are below:

New Feature

• Why are we doing this work?
• Epic Link, Expand Claim Phases

Design

• Figma file
• Figma design for accordion

Enablement team (if needed)

@member of team

Engineering

• We should use the va-accordion web component for the accordion
  • The va-accordion-item has a prop called open that can be set to programatically open the accordion item
  • You can use the slot="icon" prop to make it so that icons will show up as part of the header on the accordion item
• We should use the va-icon web component for the icons
  • List of icons: https://design.va.gov/foundation/icons
  • Use something like className="vads-u-color--green" to change the color of the icon
• Icons we will use:
  • check_circle
  • flag
  • Having this surrounded by a circle may be difficult
  • autorenew (this one goes clockwise, as opposed to loop that goes counter-clockwise)
• Use claim.attributes.claimPhaseDates.phaseChangeDate to get the date the claim moved to its current phase

Open questions

• Can we get a link to the design?
• What are the links supposed to point to?
  • What type of links should we be using (engineering question)?
• What component in the design system should we use for the 'Step may repeat if we need more information' banner? - this will be a custom component.

Tasks

• [ ] Create a custom component for the "Step may repeat if we need more information" banner
• [ ] Add step 1 with subtext
• [ ] Add step 2 with subtext
• [ ] Add step 3 with subtext
  • [ ] Add the banner with icon + text
  • [ ] Add the "Learn more about VA claim exams" link
  • [ ] Add the "Submit evidence now" link
• [ ] Add step 4 with subtext
  • [ ] Add the banner with icon + text
• [ ] Update the flag icon
• [ ] Whatever step is active shows the date the claim moved into that step
• [ ] Hide the timeline when the ff is enabled

Definition of Done

• [ ] Meets acceptance criteria
• [ ] Passed E2E testing (90% coverage)
• [ ] Passed unit testing (90% coverage)
• [ ] Passed integration testing (if applicable)
• [ ] Code reviewed (internal)
• [ ] Submitted to staging
• [ ] Team approved production verification process
• [ ] Design performs design QA and verifies the implementation matches the design spec
• [ ] Accessibility specialist performs accessibility review (in code or design)
• [ ] Engineering identifies staging users required to test and shares account and credentials with design and product
• [ ] Product performs functional QA and verifies acceptance criteria was met

Acceptance Criteria

• [x] Will be behind the cst_claim_phases feature toggle.
• [x] Each claim phase "step" will be represented as an item in an accordion
• [x] When user clicks on "expand all" the entire accordion opens to show each step's descriptions
• [x] When a user clicks on "collapse all" the entire accordion collapses
• [x] Each accordion item corresponds to a claim phase or "step" and will have a title, visible in both the collapsed and expanded state, that calls out what the claim phase is.
• [x] If the user has already completed a step in the claim phase process, there will be a visual representation that indicates this step has been completed and this will be visual in the collapsed and expanded states.
• [x] If the user is presently in the claim phase "step" there will be visual indicator visible in both the expanded and collapsed state.
• [x] If the user is presently in the claim phase "step", there will be content telling them the date they entered that phase and it will be visible in the expanded state.
• [x] The expanded state of Step 1, the "claim received" phase will have a description of what that phase is.
• [x] The expanded state of Step 2, the "initial review" phase will have a description of what that phase is.
• [x] The expanded state of Step 3, the "evidence" phase will have a description of what that phase is.
• [x] Step 3 description will also include a link to an informational page in which I can learn more about claim exams.
• [x] Step 3 description will also include a link to the section of CST where a user can submit additional evidence.
• [x] The expanded state of Step 4, the "evidence review" phase will have a description of what that phase is.
• [x] Step 3 and Step 4 will indicate that this particular step can repeat when in the expanded state.
• [x] When the feature flag cst_claim_phases is enabled the current timeline is hidden.

[pmclaren19]

Design update: We are using the flag icon for now since thats what we demoed in mid point review and since we are waiting for platform design to add the new flag with a circle around it icon. convo about this in figma here.

[pmclaren19]

@uxgary @skylerschain left comments on the figma design. We still need to know the following...

• Where you are wanting the links to take users?
• For step one where should that date should be pulled from?
• What date are you wanting us to use as the date in the text 'Your claim is in this step as of .'?

[pmclaren19]

Spoke with @uxgary

• Gary added the links to the figma design
• The dates used should be claimDate and claimPhaseDate
• Clarified that the Alert that occurs when a claim goes backwards will be handled in another ticket

[pmclaren19]

@jacobworrell @uxgary this ticket is now in Staging. Please review for qa and product design.

[uxgary]

@jacobworrell I've completed design QA with Peri. When you have a chance, please perform product QA. Note, the current step being expanded by default was not part of the AC (Acceptance criteria) on this ticket, but it is on the companion ticket (phases 5-8). That feature will be included for all accordion panels once that ticket is complete.

[jacobworrell]

AC is met. Closing.