[FE] Payment Info V2: Outstanding debts section + debt card implementation

[ajakabcin]

Background

For the next iteration on payment info we are creating two distinct sections on My VA (Outstanding debts and Benefit payments) where previously only one section existed on this topic (Benefit payments and debts). This ticket specifically is to:

1. Create the "Outstanding debts" section on My VA
2. Create the debt card/details within

Outstanding debts frontend documentation

Tasks

• [x] Create a new "Outstanding debts" section on My VA (separate from the newly revised "Benefit payments" section) as a section that always shows for LOA3 users
• [x] Create the debt card per specs outlined in the debts card UX specs section.
• [x] Implement logic so that when a user has no debts and no copays they see text indicating as such (per specs here) and see the secondary link to "learn about VA debt" (per specs here)

Acceptance Criteria

• [x] The "Outstanding debts" section displays for all LOA3 users.
• [x] The design for debt cards for mobile and desktop adhere to the general specs outlined here
• [x] A user sees the debts card when they have open/unpaid debts in the debt portal that do not equal 0
• [x] A user does not see the debts card when there are no debts in the debt portal, or their debt total equals 0
• [x] Content for the debt card matches what is outlined in the content section of FE documentation, including total debt amount, number of outstanding debts, last updated date, and a link to "Manage your VA debt" which links to https://www.va.gov/manage-va-debt/your-debt
• [x] When a user has no debts and no copays they see text that reads "You have no outstanding debts or copay bills" and they see a link to "Learn about VA debt" that links to https://www.va.gov/resources/va-debt-management/

Validation

Who can validate this ticket? (FE, BE, Design, PM)? PM, Design

How can this work be validated?

1. Select a test user in staging
2. Confirm designs/specs of "Outstanding debts" section and debts card match documentation linked in this ticket
3. To confirm data accuracy, compare the user's "Outstanding debts" section on My VA to the debt portal on staging (https://www.staging.va.gov/manage-va-debt/your-debt)

[tmitchellgcio]

Currently I am in the testing phase here to be sure we are testing for all scenarios. The frontend code is complete as far as I know, but a test could prove otherwise.

[tmitchellgcio]

Code complete. 0 effort left

[ericasauv09]

no debt: validated with user 36 has 1 debt: validated with user 11 has multiple debts: validated with user 1 All matched data in the debt portal