Updated VHA card to match VBA

- Changed heading structure
- Updated custom link to VALink
- Simplified current and past due copy

src/applications/combined-debt-portal/medical-copays/components/BalanceCard.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { VaLink } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import PropTypes from 'prop-types';
 import { CONTACTS } from '@department-of-veterans-affairs/component-library/contacts';
 import recordEvent from '~/platform/monitoring/record-event';
@@ -12,12 +12,12 @@ import {
 
 const CurrentContent = ({ id, date }) => (
   <p className="vads-u-margin--0">
-    Your balance was updated on {formatDate(date)}. Pay your full balance or
-    request financial help before
+    Your balance was updated on {formatDate(date)}. Pay your balance now or
+    request help by
     <strong className="vads-u-margin-left--0p5" data-testid={`due-date-${id}`}>
       {calcDueDate(date, 30)}
     </strong>
-    , to avoid late charges, interest, or collection actions.
+    .
   </p>
 );
 
@@ -32,11 +32,11 @@ const PastDueContent = ({ id, date, amount }) => (
     <strong data-testid={`due-date-${id}`} className="vads-u-margin-x--0p5">
       {formatDate(date)}
     </strong>
-    was {currency(amount)}. If you haven’t either paid your full balance or
+    was {currency(amount)}. If you haven’t paid your balance in full or
     requested financial help, contact the VA Health Resource Center at{' '}
     <va-telephone contact="8664001238" /> (
     <va-telephone tty contact={CONTACTS[711]} />
-    ). We’re here Monday through Friday, 8:00 a.m. to 8:00 p.m. ET.
+    ).
   </p>
 );
 
@@ -59,22 +59,23 @@ const BalanceCard = ({ id, amount, facility, city, date }) => {
       data-testid={`balance-card-${id}`}
     >
       <h3
+        data-testid={`facility-city-${id}`}
         className="vads-u-margin-top--0 vads-u-margin-bottom--1p5"
-        data-testid={`amount-${id}`}
       >
-        {currency(amount)}
-        <span
-          data-testid={`facility-city-${id}`}
-          className="vads-u-margin-top--1 vads-u-margin-bottom--1p5 vads-u-display--block vads-u-font-size--h4 vads-u-font-weight--normal"
-        >
-          Copay balance for {facility} - {city}
-        </span>
+        {facility} - {city}
       </h3>
+      <p
+        className="vads-u-margin-top--0 vads-u-margin-bottom--1p5 vads-u-font-size--h4 vads-u-font-family--serif"
+        data-testid={`amount-${id}`}
+      >
+        <span className="vads-u-font-weight--normal">Current balance: </span>
+        <strong>{currency(amount)}</strong>
+      </p>
       <div className="vads-u-display--flex vads-u-margin-top--0  vads-u-margin-bottom--1p5">
         <va-icon
           icon="warning"
           size={3}
-          srtext="Alert"
+          srtext="Important"
           class="icon-color--warning vads-u-padding-right--1"
         />
 
@@ -84,7 +85,7 @@ const BalanceCard = ({ id, amount, facility, city, date }) => {
           <PastDueContent id={id} date={date} amount={amount} />
         )}
       </div>
-      <Link
+      {/* <Link
         className="vads-u-font-weight--bold"
         to={`/copay-balances/${id}/detail`}
         data-testid={`detail-link-${id}`}
@@ -95,7 +96,17 @@ const BalanceCard = ({ id, amount, facility, city, date }) => {
       >
         {linkText}
         <va-icon icon="navigate_next" size={3} />
-      </Link>
+      </Link> */}
+      <VaLink
+        active
+        data-testid={`detail-link-${id}`}
+        onClick={() => {
+          recordEvent({ event: 'cta-link-click-copay-balance-card' });
+        }}
+        href={`/manage-va-debt/summary/copay-balances/${id}/detail`}
+        text={linkText}
+        aria-label={`Check details and resolve this debt for ${facility}`}
+      />
     </va-card>
   );
 };