MPDX-9648, MPDX-9649 Savings fund transfer & MPGA UAT

src/components/HrTools/SavingsFundTransfer/DownloadTable/downloadTable.test.tsx

@@ -18,7 +18,7 @@ const mockHeaders = [
   'Schedule',
   'Status',
   'Transfer Date',
-  'Stop Date',
+  'End Date',
   'Note',
 ];
 

src/components/HrTools/SavingsFundTransfer/DownloadTable/downloadTable.tsx

@@ -73,7 +73,7 @@ export const downloadCSV = (
     t('Schedule'),
     t('Status'),
     t('Transfer Date'),
-    t('Stop Date'),
+    t('End Date'),
     t('Note'),
   ];
 

src/components/HrTools/SavingsFundTransfer/IntroPage/IntroPage.tsx

@@ -99,14 +99,14 @@ export const SavingsFundTransfer: React.FC<SavingsFundTransferProps> = ({
               <StyledListItem>
                 <ListItemText
                   primary={t(
-                    'Want your monthly transfer to end at a certain point? You can set a stop date—super handy! Just a heads-up: once it’s there, it can’t be removed, but you can change it to a different date if needed.',
+                    'Want your monthly transfer to end at a certain point? You can set an end date—super handy! Just a heads-up: once it’s there, it can’t be removed, but you can change it to a different date if needed.',
                   )}
                 />
               </StyledListItem>
               <StyledListItem>
                 <ListItemText
                   primary={t(
-                    "Need to update the amount you're transferring each month? No problem! Just set a stop date for the end of the current month on your existing transfer. After that, go ahead and set up a brand-new monthly transfer with the updated amount.",
+                    "Need to update the amount you're transferring each month? No problem! Just set an end date for the end of the current month on your existing transfer. After that, go ahead and set up a brand-new monthly transfer with the updated amount.",
                   )}
                 />
               </StyledListItem>

src/components/HrTools/SavingsFundTransfer/Table/PrintTable.test.tsx

@@ -72,7 +72,7 @@ describe('PrintTable', () => {
     ).toBeInTheDocument();
     expect(getByRole('cell', { name: 'Jan 1, 2023' })).toBeInTheDocument();
     expect(
-      await findByRole('columnheader', { name: 'Stop Date' }),
+      await findByRole('columnheader', { name: 'End Date' }),
     ).toBeInTheDocument();
     expect(getByRole('cell', { name: '' })).toBeInTheDocument();
     expect(

src/components/HrTools/SavingsFundTransfer/Table/PrintTable.tsx

@@ -40,7 +40,7 @@ export const PrintTable: React.FC<PrintTableProps> = ({ transfers, type }) => {
               <TableCell>{t('Schedule')}</TableCell>
               <TableCell>{t('Status')}</TableCell>
               <TableCell>{t('Transfer Date')}</TableCell>
-              <TableCell>{t('Stop Date')}</TableCell>
+              <TableCell>{t('End Date')}</TableCell>
               <TableCell>{t('Note')}</TableCell>
             </TableRow>
           </TableHead>

src/components/HrTools/SavingsFundTransfer/Table/Row/createTableRow.tsx

@@ -230,7 +230,7 @@ export function populateTransferRows(options: Options) {
       ) : row.endDate ? (
         <>
           <IconButton
-            title={t('Edit Stop Date')}
+            title={t('Edit End Date')}
             onClick={(event) => {
               event.stopPropagation();
               handleCalendarOpen(row);
@@ -259,7 +259,7 @@ export function populateTransferRows(options: Options) {
       ) : (
         <>
           <IconButton
-            title={t('Add Stop Date')}
+            title={t('Add End Date')}
             onClick={(event) => {
               event.stopPropagation();
               handleCalendarOpen(row);

src/components/HrTools/SavingsFundTransfer/Table/TransfersTable.test.tsx

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
 import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -80,7 +80,7 @@
         'Schedule',
         'Status',
         'Transfer Date',
-        'Stop Date',
+        'End Date',
         'Note',
         'Actions',
       ]),
@@ -119,7 +119,7 @@
     ).toBeInTheDocument();
 
     expect(
-      within(actionCell).getByRole('button', { name: 'Add Stop Date' }),
+      within(actionCell).getByRole('button', { name: 'Add End Date' }),
     ).toBeInTheDocument();
     expect(
       within(actionCell).getByRole('img', { name: 'Stop Transfer' }),
@@ -178,7 +178,7 @@
   });
 
   describe('Calendar', () => {
-    it('opens the calendar when Add Stop Date is clicked', async () => {
+    it('opens the calendar when Add End Date is clicked', async () => {
       const { getByRole, findByRole } = render(<TestComponent />);
 
       const iconRow = getByRole('row', {
@@ -187,7 +187,7 @@
       const cells = within(iconRow).getAllByRole('gridcell');
       const actionCell = cells[7];
       const icon = within(actionCell).getByRole('button', {
-        name: 'Add Stop Date',
+        name: 'Add End Date',
       });
 
       userEvent.click(icon);
@@ -205,7 +205,7 @@
       const cells = within(iconRow).getAllByRole('gridcell');
       const actionCell = cells[7];
       const icon = within(actionCell).getByRole('button', {
-        name: 'Add Stop Date',
+        name: 'Add End Date',
       });
 
       userEvent.click(icon);
@@ -231,7 +231,7 @@
     const cells = within(iconRow).getAllByRole('gridcell');
     const actionCell = cells[7];
     const icon = within(actionCell).getByRole('button', {
-      name: 'Edit Stop Date',
+      name: 'Edit End Date',
     });
 
     userEvent.click(icon);
@@ -245,7 +245,7 @@
     userEvent.click(getByRole('button', { name: 'Yes' }));
 
     await waitFor(() => expect(mutationSpy).toHaveBeenCalled());
-    expect(mockEnqueue).toHaveBeenCalledWith('Stop date updated successfully', {
+    expect(mockEnqueue).toHaveBeenCalledWith('End date updated successfully', {
       variant: 'success',
     });
 
@@ -261,7 +261,7 @@
     const cells = within(iconRow).getAllByRole('gridcell');
     const actionCell = cells[7];
     const icon = within(actionCell).getByRole('button', {
-      name: 'Edit Stop Date',
+      name: 'Edit End Date',
     });
 
     userEvent.click(icon);
@@ -286,7 +286,7 @@
     userEvent.click(acceptButton);
 
     await waitFor(() => expect(mutationSpy).toHaveBeenCalled());
-    expect(mockEnqueue).toHaveBeenCalledWith('Stop date updated successfully', {
+    expect(mockEnqueue).toHaveBeenCalledWith('End date updated successfully', {
       variant: 'success',
     });
   });

src/components/HrTools/SavingsFundTransfer/Table/TransfersTable.tsx

@@ -142,12 +142,12 @@ export const TransfersTable: React.FC<TransfersTableProps> = ({
   ) => {
     const successMessage =
       actionType === ActionTypeEnum.Edit
-        ? t('Stop date updated successfully')
-        : t('Stop date added successfully');
+        ? t('End date updated successfully')
+        : t('End date added successfully');
     const errorMessage =
       actionType === ActionTypeEnum.Edit
-        ? t('Failed to update stop date')
-        : t('Failed to add stop date');
+        ? t('Failed to update end date')
+        : t('Failed to add end date');
     try {
       if (calendarRow) {
         const recurringEnd: string | null = date ? date.toISO() : null;
@@ -228,7 +228,7 @@ export const TransfersTable: React.FC<TransfersTableProps> = ({
     },
     {
       field: 'endDate',
-      headerName: t('Stop Date'),
+      headerName: t('End Date'),
       width: 145,
       renderCell: endDate,
     },

src/components/Reports/MPGAIncomeExpensesReport/CustomExport/CustomExport.test.tsx

@@ -1,7 +1,9 @@
 import { ReportTypeEnum } from '../Helper/MPGAReportEnum';
-import { mockData, months } from '../mockData';
+import { DataFields, mockData, months } from '../mockData';
 import { createTable, exportToCsv } from './CustomExport';
 
+const locale = 'en-US';
+
 const mockSetAttribute = jest.fn();
 const mockClick = jest.fn();
 
@@ -51,7 +53,12 @@ describe('CustomExport', () => {
     jest.spyOn(link, 'setAttribute').mockImplementation(mockSetAttribute);
     jest.spyOn(link, 'click').mockImplementation(mockClick);
 
-    const data = exportToCsv(mockData.income, ReportTypeEnum.Income, months);
+    const data = exportToCsv(
+      mockData.income,
+      ReportTypeEnum.Income,
+      months,
+      locale,
+    );
 
     expect(mockSetAttribute).toHaveBeenCalledWith(
       'href',
@@ -69,36 +76,79 @@ describe('CustomExport', () => {
   });
 
   it('should contain correct data', () => {
-    const csvData = createTable(mockHeaders, mockData.income);
+    const csvData = createTable(mockHeaders, mockData.income, locale);
 
     expect(csvData).toContain(mockHeaders);
     expect(csvData[1]).toEqual([
       'Contributions',
-      6770,
-      6090,
-      5770,
-      7355,
-      8035,
-      6575,
-      7556,
-      8239,
-      9799,
-      9729,
-      13020,
-      19215,
-      9013,
-      108156,
+      '6770',
+      '6090',
+      '5770',
+      '7355',
+      '8035',
+      '6575',
+      '7556',
+      '8239',
+      '9799',
+      '9729',
+      '13020',
+      '19215',
+      '9013',
+      '108156',
+    ]);
+  });
+
+  it('should round values to two decimal places', () => {
+    const decimalData: DataFields[] = [
+      {
+        id: 'rounding-test',
+        description: 'Rounding',
+        monthly: [10.234, 10.236, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        average: 9012.567,
+        total: 108155.555,
+      },
+    ];
+
+    const csvData = createTable(mockHeaders, decimalData, locale);
+
+    expect(csvData[1]).toEqual([
+      'Rounding',
+      '10.23',
+      '10.24',
+      '-',
+      '-',
+      '-',
+      '-',
+      '-',
+      '-',
+      '-',
+      '-',
+      '-',
+      '-',
+      '9012.57',
+      '108155.56',
     ]);
   });
 
   it('should display correct totals', () => {
-    const csvData = createTable(mockHeaders, dataWithTotal);
+    const csvData = createTable(mockHeaders, dataWithTotal, locale);
 
     expect(csvData[csvData.length - 1]).toEqual([
       'Overall Total',
-      ...monthlyTotals,
-      overallAverage,
-      overallTotal,
+      '6870',
+      '6190',
+      '5870',
+      '7455',
+      '8135',
+      '6675',
+      '7656',
+      '8239',
+      '9799',
+      '9729',
+      '13020',
+      '19215',
+      '9071',
+      '108856',
     ]);
   });
 });

src/components/Reports/MPGAIncomeExpensesReport/CustomExport/CustomExport.tsx

@@ -2,12 +2,30 @@ import { buildURI } from 'react-csv/lib/core';
 import { ReportTypeEnum } from '../Helper/MPGAReportEnum';
 import { DataFields } from '../mockData';
 
-export const createTable = (csvHeader: string[], data: DataFields[]) => {
+const round = (value: number, locale: string) =>
+  new Intl.NumberFormat(locale, {
+    style: 'decimal',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+    trailingZeroDisplay: 'stripIfInteger',
+    useGrouping: false,
+  }).format(value);
+
+export const createTable = (
+  csvHeader: string[],
+  data: DataFields[],
+  locale: string,
+) => {
   const csvData = data.map((item) => {
-    const monthlyData = item.monthly.map((month) =>
-      month === 0 ? '-' : month,
+    const monthlyData = item.monthly.map((monthlyAmount) =>
+      monthlyAmount === 0 ? '-' : round(monthlyAmount, locale),
     );
-    return [item.description, ...monthlyData, item.average, item.total];
+    return [
+      item.description,
+      ...monthlyData,
+      round(item.average, locale),
+      round(item.total, locale),
+    ];
   });
 
   return [csvHeader, ...csvData];
@@ -17,6 +35,7 @@ export const exportToCsv = (
   data: DataFields[],
   reportType: ReportTypeEnum,
   months: string[],
+  locale: string,
 ) => {
   const title =
     reportType === ReportTypeEnum.Income
@@ -46,7 +65,7 @@ export const exportToCsv = (
   ];
 
   const csvHeader = ['Description', ...last12Months, 'Average', 'Total'];
-  const csvData = createTable(csvHeader, dataWithTotal);
+  const csvData = createTable(csvHeader, dataWithTotal, locale);
 
   const csvBlob = buildURI(csvData, true);
 

src/components/Reports/MPGAIncomeExpensesReport/CustomToolbar/CustomToolbar.tsx

@@ -10,6 +10,7 @@ import {
   ToolbarButton,
 } from '@mui/x-data-grid';
 import { useTranslation } from 'react-i18next';
+import { useLocale } from 'src/hooks/useLocale';
 import { exportToCsv } from '../CustomExport/CustomExport';
 import { ReportTypeEnum } from '../Helper/MPGAReportEnum';
 import { TableCardHead } from '../Tables/TableCardHead';
@@ -27,6 +28,7 @@ export const CustomToolbar: React.FC<CustomToolbarProps> = ({
   months,
 }) => {
   const { t } = useTranslation();
+  const locale = useLocale();
 
   return (
     <Toolbar style={{ display: 'flex', justifyContent: 'left' }}>
@@ -71,7 +73,7 @@ export const CustomToolbar: React.FC<CustomToolbarProps> = ({
       />
 
       <Tooltip title={t('Download as CSV')}>
-        <ToolbarButton onClick={() => exportToCsv(data, type, months)}>
+        <ToolbarButton onClick={() => exportToCsv(data, type, months, locale)}>
           <FileDownloadIcon fontSize="small" color="primary" />
         </ToolbarButton>
       </Tooltip>