[FE] Payment Info V2: Copay 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 create the copay card within the "Outstanding debts" section on My VA.

Outstanding debts frontend documentation

Tasks

• [x] Create the copay card per specs outlined in the copays card UX specs section.

Acceptance Criteria

• [x] The designs for copay cards for mobile and desktop adhere to the general specs outlined here
• [x] A user sees the copays card when they have copays in the debt portal that do not equal 0
• [x] A user does not see the copays card when there are no copays in the debt portal, or their copay total equals 0
• [x] Content for the copay card matches what is outlined in the content section of FE documentation, including total copay amount, number of outstanding copays, due date, and a link to "Manage your VA bills" 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/, as implemented in #45865

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 copays card match documentation linked in this ticket
3. To confirm data accuracy, compare the user's copay card 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]

validated "user has 1 copay" with user 11:

validated "user has no copays" with user 0:

user 36 has multiple copays but the amount is not matching what is shown in the debt portal - opened ticket #47722 to look into this.

closing this ticket since we validated and have another ticket to resolve the one outstanding issue.