131383/statementpage monthly

src/applications/combined-debt-portal/combined/actions/copays.js

@@ -10,6 +10,12 @@ export const MCP_STATEMENTS_FETCH_FAILURE = 'MCP_STATEMENTS_FETCH_FAILURE';
 export const MCP_DETAIL_FETCH_SUCCESS = 'MCP_DETAIL_FETCH_SUCCESS';
 export const MCP_DETAIL_FETCH_FAILURE = 'MCP_DETAIL_FETCH_FAILURE';
 export const MCP_DETAIL_FETCH_INIT = 'MCP_DETAIL_FETCH_INIT';
+export const MCP_MONTHLY_STATEMENT_FETCH_INIT =
+  'MCP_MONTHLY_STATEMENT_FETCH_INIT';
+export const MCP_MONTHLY_STATEMENT_FETCH_SUCCESS =
+  'MCP_MONTHLY_STATEMENT_FETCH_SUCCESS';
+export const MCP_MONTHLY_STATEMENT_FETCH_FAILURE =
+  'MCP_MONTHLY_STATEMENT_FETCH_FAILURE';
 
 export const mcpStatementsFetchInit = () => ({
   type: MCP_STATEMENTS_FETCH_INIT,
@@ -142,3 +148,31 @@ export const getCopayDetailStatement = copayId => async (
       });
     });
 };
+
+export const getMonthlyStatementCopay = copayId => async (
+  dispatch,
+  getState,
+) => {
+  dispatch({ type: MCP_MONTHLY_STATEMENT_FETCH_INIT });
+
+  const dataUrl = `${environment.API_URL}/v1/medical_copays/${copayId}`;
+
+  return apiRequest(dataUrl)
+    .then(response => {
+      const shouldUseLighthouseCopays =
+        showVHAPaymentHistory(getState()) && !response.isCerner;
+
+      return dispatch({
+        type: MCP_MONTHLY_STATEMENT_FETCH_SUCCESS,
+        response,
+        shouldUseLighthouseCopays,
+      });
+    })
+    .catch(err => {
+      const error = err?.errors?.[0] ?? err;
+      return dispatch({
+        type: MCP_MONTHLY_STATEMENT_FETCH_FAILURE,
+        error,
+      });
+    });
+};

src/applications/combined-debt-portal/combined/reducers/index.js

@@ -17,6 +17,9 @@ import {
   MCP_STATEMENTS_FETCH_SUCCESS,
   MCP_STATEMENTS_FETCH_FAILURE,
   MCP_DETAIL_FETCH_INIT,
+  MCP_MONTHLY_STATEMENT_FETCH_INIT,
+  MCP_MONTHLY_STATEMENT_FETCH_SUCCESS,
+  MCP_MONTHLY_STATEMENT_FETCH_FAILURE,
 } from '../actions/copays';
 
 const debtInitialState = {
@@ -39,6 +42,9 @@ const mcpInitialState = {
   selectedStatement: null,
   shouldUseLighthouseCopays: null,
   isCopayDetailLoading: false,
+  monthlyStatementCopay: null,
+  isMonthlyStatementLoading: false,
+  monthlyStatementError: null,
 };
 
 export const medicalCopaysReducer = (state = mcpInitialState, action) => {
@@ -85,6 +91,27 @@ export const medicalCopaysReducer = (state = mcpInitialState, action) => {
         pending: false,
         error: action.error,
       };
+    case MCP_MONTHLY_STATEMENT_FETCH_INIT:
+      return {
+        ...state,
+        monthlyStatementCopay: null,
+        isMonthlyStatementLoading: true,
+        monthlyStatementError: null,
+      };
+    case MCP_MONTHLY_STATEMENT_FETCH_SUCCESS: {
+      return {
+        ...state,
+        monthlyStatementCopay: action.response.data,
+        isMonthlyStatementLoading: false,
+        monthlyStatementError: null,
+      };
+    }
+    case MCP_MONTHLY_STATEMENT_FETCH_FAILURE:
+      return {
+        ...state,
+        isMonthlyStatementLoading: false,
+        monthlyStatementError: action.error,
+      };
     default:
       return state;
   }

src/applications/combined-debt-portal/combined/routes.jsx

@@ -5,7 +5,7 @@ import OverviewPage from './containers/OverviewPage';
 import CombinedPortalApp from './containers/CombinedPortalApp';
 import CombinedStatements from './containers/CombinedStatements';
 import Details from '../medical-copays/containers/Details';
-import HTMLStatementPage from '../medical-copays/containers/HTMLStatementPage';
+import MonthlyStatementPage from '../medical-copays/containers/MonthlyStatementPage';
 import MCPOverview from '../medical-copays/containers/SummaryPage';
 import DebtDetails from '../debt-letters/containers/DebtDetails';
 import DebtLettersDownload from '../debt-letters/containers/DebtLettersDownload';
@@ -28,8 +28,8 @@ const Routes = () => (
       <Route exact path="/copay-balances/:id" component={Details} />
       <Route
         exact
-        path="/copay-balances/:id/statement"
-        component={HTMLStatementPage}
+        path="/copay-balances/:parentCopayId/previous-statements/:id"
+        component={MonthlyStatementPage}
       />
       <Route exact path="/copay-balances/:id/resolve" component={ResolvePage} />
       <Route exact path="/debt-balances" component={DebtLettersSummary} />

src/applications/combined-debt-portal/combined/tests/unit/actionsCopays.unit.spec.jsx

@@ -11,10 +11,14 @@ import {
   MCP_DETAIL_FETCH_INIT,
   MCP_DETAIL_FETCH_SUCCESS,
   MCP_DETAIL_FETCH_FAILURE,
+  MCP_MONTHLY_STATEMENT_FETCH_INIT,
+  MCP_MONTHLY_STATEMENT_FETCH_SUCCESS,
+  MCP_MONTHLY_STATEMENT_FETCH_FAILURE,
   mcpStatementsFetchInit,
   getAllCopayStatements,
   getCopaySummaryStatements,
   getCopayDetailStatement,
+  getMonthlyStatementCopay,
 } from '../../actions/copays';
 
 describe('copays actions', () => {
@@ -442,4 +446,53 @@ describe('copays actions', () => {
       });
     });
   });
+
+  describe('getMonthlyStatementCopay', () => {
+    it('should dispatch monthly statement INIT and SUCCESS with shouldUseLighthouseCopays', async () => {
+      const fakeResponse = {
+        data: { id: 'm-copay-1' },
+        isCerner: false,
+      };
+      apiRequestStub.resolves(fakeResponse);
+      showVHAPaymentHistoryStub.returns(true);
+
+      await getMonthlyStatementCopay('m-copay-1')(dispatch, () => ({}));
+
+      expect(dispatch.firstCall.args[0]).to.deep.equal({
+        type: MCP_MONTHLY_STATEMENT_FETCH_INIT,
+      });
+      expect(dispatch.secondCall.args[0]).to.deep.equal({
+        type: MCP_MONTHLY_STATEMENT_FETCH_SUCCESS,
+        response: fakeResponse,
+        shouldUseLighthouseCopays: true,
+      });
+    });
+
+    it('should set shouldUseLighthouseCopays false when Cerner', async () => {
+      const fakeResponse = {
+        data: { id: 'm-copay-1' },
+        isCerner: true,
+      };
+      apiRequestStub.resolves(fakeResponse);
+      showVHAPaymentHistoryStub.returns(true);
+
+      await getMonthlyStatementCopay('m-copay-1')(dispatch, () => ({}));
+
+      expect(dispatch.secondCall.args[0].shouldUseLighthouseCopays).to.be.false;
+    });
+
+    it('should dispatch MONTHLY_STATEMENT_FETCH_FAILURE on API error', async () => {
+      apiRequestStub.rejects({ errors: [errors.notFoundError] });
+
+      await getMonthlyStatementCopay('missing')(dispatch, () => ({}));
+
+      expect(dispatch.firstCall.args[0]).to.deep.equal({
+        type: MCP_MONTHLY_STATEMENT_FETCH_INIT,
+      });
+      expect(dispatch.secondCall.args[0]).to.deep.equal({
+        type: MCP_MONTHLY_STATEMENT_FETCH_FAILURE,
+        error: errors.notFoundError,
+      });
+    });
+  });
 });

src/applications/combined-debt-portal/combined/tests/unit/combinedHelpers.unit.spec.jsx

@@ -385,6 +385,10 @@ describe('Helper Functions', () => {
     it('should handle ISO date strings', () => {
       expect(formatDate('2023-05-15')).to.equal('May 15, 2023');
     });
+
+    it('should handle VBS compact pSStatementDate (MMddyyyy)', () => {
+      expect(formatDate('12112025')).to.equal('December 11, 2025');
+    });
   });
 
   describe('currency edge cases', () => {

src/applications/combined-debt-portal/combined/tests/unit/selectors.unit.spec.jsx

@@ -6,14 +6,16 @@ import {
   selectLighthouseStatementGroups,
   selectLighthousePreviousStatements,
   selectCurrentStatementMcpState,
+  selectMonthlyStatement,
 } from '../../utils/selectors';
 import { vbsCompositeId } from '../../utils/vbsCopayStatements';
+import { firstOfMonthDateFromCopayDate } from '../../utils/helpers';
 
 /**
  * Mock shapes align with vets-api medical copays:
  * - V0 GET /v0/medical_copays `data[]`: string `id`, `pSFacilityNum`, `pSStatementDateOutput`, …
  * - V1 GET /v1/medical_copays/{id} (non-Cerner): `selectedStatement` with `attributes.associatedStatements[]`
- *   (`id`, `date`, `compositeId` per schema; invoice display uses attributes.invoiceDate ?? invoiceDate ?? date).
+ *   (`id`, `date`, `compositeId`, `attributes.invoiceDate` per schema; previous-statement list date from `firstOfMonthDateFromCopayDate`).
  */
 
 const FACILITY = '648';
@@ -50,18 +52,42 @@ const mcpStateWithDetail = selectedStatement => ({
 });
 
 describe('combined utils/selectors', () => {
+  describe('firstOfMonthDateFromCopayDate', () => {
+    it('returns MMMM d, yyyy for the first day of the parsed month', () => {
+      expect(firstOfMonthDateFromCopayDate('02/28/2024')).to.equal(
+        'February 1, 2024',
+      );
+      expect(firstOfMonthDateFromCopayDate('2025-04-30')).to.equal(
+        'April 1, 2025',
+      );
+    });
+
+    it('returns empty string for empty or invalid input', () => {
+      expect(firstOfMonthDateFromCopayDate('')).to.equal('');
+      expect(firstOfMonthDateFromCopayDate(null)).to.equal('');
+      expect(firstOfMonthDateFromCopayDate(undefined)).to.equal('');
+    });
+
+    it('accepts an optional date-fns output format', () => {
+      expect(
+        firstOfMonthDateFromCopayDate('02/28/2024', 'MM/dd/yyyy'),
+      ).to.equal('02/01/2024');
+    });
+  });
+
   describe('groupVbsCopaysByStatements', () => {
-    it('returns id/pSStatementDateOutput for every copay in grouped output (all rows, including multiple per month)', () => {
+    it('returns one entry per group with statementId = compositeId and formatted first-of-month date', () => {
       const laterInFeb = '6fa85f64-5717-4562-b3fc-2c963f66afa9';
+      const febComposite = vbsCompositeId(FACILITY, 2, 2024);
       const grouped = [
         {
-          compositeId: vbsCompositeId(FACILITY, 2, 2024),
+          compositeId: febComposite,
           copays: [
             v0CopayRow(PRIOR_FEB_ID, '02/28/2024', {
-              compositeId: vbsCompositeId(FACILITY, 2, 2024),
+              compositeId: febComposite,
             }),
             v0CopayRow(laterInFeb, '02/05/2024', {
-              compositeId: vbsCompositeId(FACILITY, 2, 2024),
+              compositeId: febComposite,
             }),
           ],
         },
@@ -73,16 +99,12 @@ describe('combined utils/selectors', () => {
 
       expect(groupVbsCopaysByStatements(grouped)).to.deep.equal([
         {
-          id: PRIOR_FEB_ID,
-          pSStatementDateOutput: '02/28/2024',
-        },
-        {
-          id: laterInFeb,
-          pSStatementDateOutput: '02/05/2024',
+          statementId: febComposite,
+          date: 'February 1, 2024',
         },
         {
-          id: PRIOR_JAN_ID,
-          pSStatementDateOutput: '01/10/2024',
+          statementId: vbsCompositeId(FACILITY, 1, 2024),
+          date: 'January 1, 2024',
         },
       ]);
     });
@@ -173,7 +195,7 @@ describe('combined utils/selectors', () => {
   });
 
   describe('selectLighthousePreviousStatements', () => {
-    it('maps associated statements to id and invoiceDate (attributes.invoiceDate, then invoiceDate, then date)', () => {
+    it('maps one entry per compositeId; date is firstOfMonthDateFromCopayDate(lead.date)', () => {
       const state = mcpStateWithDetail({
         id: '675-K3FD983',
         type: 'medicalCopayDetails',
@@ -182,36 +204,30 @@ describe('combined utils/selectors', () => {
             {
               id: '4-1abZUKu7LncRZi',
               compositeId: 'composite-1',
-              date: '2025-04-30T00:00:00.000Z',
-              attributes: { invoiceDate: '2025-04-30T00:00:00.000Z' },
+              date: '04/30/2025',
             },
             {
               id: '4-1abZUKu7LncRZj',
               compositeId: 'composite-1',
-              date: '2025-03-15T00:00:00.000Z',
-              invoiceDate: '2025-03-15T00:00:00.000Z',
+              date: '03/15/2025',
             },
             {
               id: '4-1abZUKu7LncRZk',
               compositeId: 'composite-2',
-              date: '2025-02-01T00:00:00.000Z',
+              date: '02/01/2025',
             },
           ],
         },
       });
       const rows = selectLighthousePreviousStatements(state);
-      expect(rows).to.have.lengthOf(3);
+      expect(rows).to.have.lengthOf(2);
       expect(rows[0]).to.deep.include({
-        id: '4-1abZUKu7LncRZi',
-        invoiceDate: '2025-04-30T00:00:00.000Z',
+        statementId: 'composite-1',
+        date: 'April 1, 2025',
       });
       expect(rows[1]).to.deep.include({
-        id: '4-1abZUKu7LncRZj',
-        invoiceDate: '2025-03-15T00:00:00.000Z',
-      });
-      expect(rows[2]).to.deep.include({
-        id: '4-1abZUKu7LncRZk',
-        invoiceDate: '2025-02-01T00:00:00.000Z',
+        statementId: 'composite-2',
+        date: 'February 1, 2025',
       });
     });
   });
@@ -238,4 +254,40 @@ describe('combined utils/selectors', () => {
       expect(slice.statementsPending).to.be.false;
     });
   });
+
+  describe('selectMonthlyStatement', () => {
+    it('returns monthlyStatementCopay, loading flag, and error from mcp slice', () => {
+      const state = {
+        combinedPortal: {
+          mcp: {
+            monthlyStatementCopay: { id: 'mc-1' },
+            isMonthlyStatementLoading: true,
+            monthlyStatementError: null,
+          },
+        },
+      };
+      expect(selectMonthlyStatement(state)).to.deep.equal({
+        copay: { id: 'mc-1' },
+        isLoading: true,
+        error: null,
+      });
+    });
+
+    it('returns null copay when not loaded', () => {
+      const state = {
+        combinedPortal: {
+          mcp: {
+            monthlyStatementCopay: null,
+            isMonthlyStatementLoading: false,
+            monthlyStatementError: { title: 'x' },
+          },
+        },
+      };
+      expect(selectMonthlyStatement(state)).to.deep.equal({
+        copay: null,
+        isLoading: false,
+        error: { title: 'x' },
+      });
+    });
+  });
 });