diff --git a/src/components/HrTools/SavingsFundTransfer/BalanceCard/BalanceCard.test.tsx b/src/components/HrTools/SavingsFundTransfer/BalanceCard/BalanceCard.test.tsx index effefdd9dd..09dea9cb8d 100644 --- a/src/components/HrTools/SavingsFundTransfer/BalanceCard/BalanceCard.test.tsx +++ b/src/components/HrTools/SavingsFundTransfer/BalanceCard/BalanceCard.test.tsx @@ -62,7 +62,6 @@ describe('BalanceCard', () => { expect(getByText('Current Balance')).toBeInTheDocument(); expect(getByText('$15,000.00')).toBeInTheDocument(); expect(getByRole('button', { name: /transfer from/i })).toBeInTheDocument(); - expect(getByRole('button', { name: /transfer to/i })).toBeInTheDocument(); }); it('should display title correctly', () => { @@ -190,21 +189,6 @@ describe('BalanceCard', () => { }); }); - it('should call handleOpenTransferModal with correct parameters when Transfer To is clicked', async () => { - const { findByRole } = render(); - - const transferToButton = await findByRole('button', { - name: /transfer to/i, - }); - userEvent.click(transferToButton); - - expect(mockHandleOpenTransferModal).toHaveBeenCalledWith({ - transfer: { - transferTo: expect.any(String), - }, - }); - }); - it('should disable transfer from button when current balance goes beyond deficit limit', async () => { const { findByRole } = render( = ({ }); }; - const handleTransferTo = () => { - handleOpenTransferModal({ - transfer: { - transferTo: fund.fundType, - }, - }); - }; - return ( = ({ fontSize: '1.25rem', boxShadow: isSelected ? 3 : 1, transition: 'box-shadow 0.3s ease-in-out', + display: 'flex', + flexDirection: 'column', }} > @@ -99,6 +87,9 @@ export const BalanceCard: React.FC = ({ '@media print': { fontSize: '12pt' }, fontWeight: 500, fontSize: '13pt', + minHeight: '3em', + display: 'flex', + alignItems: 'center', }} > {title} @@ -107,7 +98,7 @@ export const BalanceCard: React.FC = ({ @@ -135,21 +126,17 @@ export const BalanceCard: React.FC = ({ - ); diff --git a/src/components/HrTools/SavingsFundTransfer/TransferModal/TransferModal.test.tsx b/src/components/HrTools/SavingsFundTransfer/TransferModal/TransferModal.test.tsx index 8449ca81cc..970b751a26 100644 --- a/src/components/HrTools/SavingsFundTransfer/TransferModal/TransferModal.test.tsx +++ b/src/components/HrTools/SavingsFundTransfer/TransferModal/TransferModal.test.tsx @@ -53,7 +53,7 @@ jest.mock('@mui/material', () => { }); const transferDefaultData: TransferModalData['transfer'] = { - transferFrom: 'transferFrom', + transferFrom: 'Staff Account', transferTo: '', amount: 0, schedule: ScheduleEnum.OneTime, @@ -152,11 +152,8 @@ describe('TransferModal', () => { userEvent.type(amountField, '-100'); userEvent.tab(); - const fromAccount = getByRole('combobox', { name: /from account/i }); const toAccount = getByRole('combobox', { name: /to account/i }); - userEvent.click(fromAccount); - userEvent.click(getByRole('option', { name: /staff account/i })); userEvent.click(toAccount); userEvent.click(getByRole('option', { name: /staff savings/i })); @@ -199,13 +196,9 @@ describe('TransferModal', () => { it('should submit form with valid data', async () => { const { getByRole } = render(); - const fromAccount = getByRole('combobox', { name: /from account/i }); const toAccount = getByRole('combobox', { name: /to account/i }); const amountField = getByRole('spinbutton', { name: /amount/i }); - userEvent.click(fromAccount); - userEvent.click(getByRole('option', { name: /staff account/i })); - userEvent.click(toAccount); userEvent.click(getByRole('option', { name: /staff savings/i })); @@ -227,14 +220,10 @@ describe('TransferModal', () => { it('should handle form submission successfully', async () => { const { getByRole } = render(); - const fromAccount = getByRole('combobox', { name: /from account/i }); const toAccount = getByRole('combobox', { name: /to account/i }); const amountField = getByRole('spinbutton', { name: /amount/i }); const submitButton = getByRole('button', { name: /submit/i }); - userEvent.click(fromAccount); - userEvent.click(getByRole('option', { name: /staff account/i })); - userEvent.click(toAccount); userEvent.click(getByRole('option', { name: /staff savings/i })); @@ -274,55 +263,25 @@ describe('TransferModal', () => { expect(getByLabelText(/end date/i)).toHaveValue(''); }); - it('should validate that from and to accounts are different', async () => { - const { getByRole, queryByRole, getAllByRole } = render(); + it('locks the From Account to the launching card and excludes it from To Account options', async () => { + const { getByRole, queryByRole } = render(); - const [fromAccount, toAccount] = getAllByRole('combobox'); + const fromAccount = getByRole('combobox', { name: /from account/i }); + expect(fromAccount).toHaveTextContent('Staff Account'); userEvent.click(fromAccount); - expect( - getByRole('option', { name: /staff account/i }), - ).toBeInTheDocument(); - userEvent.click(getByRole('option', { name: /staff account/i })); + expect(queryByRole('listbox')).not.toBeInTheDocument(); + + userEvent.click(getByRole('combobox', { name: /to account/i })); - userEvent.click(toAccount); await waitFor(() => expect( queryByRole('option', { name: /staff account/i }), ).not.toBeInTheDocument(), ); - - userEvent.click(getByRole('option', { name: /staff savings/i })); - userEvent.click(getByRole('button', { name: /submit/i })); - }); - - it('should swap accounts when swap button is clicked', async () => { - const { getByRole, getByTestId } = render(); - - const icon = getByTestId('SwapHorizIcon'); - const swapButton = icon.closest('button'); - - expect(swapButton).toBeDisabled(); - - const fromAccount = getByRole('combobox', { name: /from account/i }); - const toAccount = getByRole('combobox', { name: /to account/i }); - - userEvent.click(fromAccount); - userEvent.click(getByRole('option', { name: /staff account/i })); - - userEvent.click(toAccount); - userEvent.click(getByRole('option', { name: /staff savings/i })); - - await waitFor(() => { - expect(swapButton).not.toBeDisabled(); - }); - - userEvent.click(swapButton as HTMLButtonElement); - - await waitFor(() => { - expect(fromAccount).toHaveTextContent('Staff Savings'); - expect(toAccount).toHaveTextContent('Staff Account'); - }); + expect( + getByRole('option', { name: /staff savings/i }), + ).toBeInTheDocument(); }); it('should show/hide end date based on schedule selection', async () => { @@ -393,12 +352,8 @@ describe('TransferModal', () => { it('should show information box when amount exceeds limit', async () => { const { getByRole, findByRole } = render(); - const fromAccount = getByRole('combobox', { name: /from account/i }); const toAccount = getByRole('combobox', { name: /to account/i }); - userEvent.click(fromAccount); - userEvent.click(getByRole('option', { name: /staff account/i })); - userEvent.click(toAccount); userEvent.click(getByRole('option', { name: /staff savings/i })); @@ -441,9 +396,6 @@ describe('TransferModal', () => { const amountField = getByRole('spinbutton', { name: /amount/i }); - userEvent.click(getByRole('combobox', { name: /from account/i })); - userEvent.click(getByRole('option', { name: /staff account/i })); - userEvent.click(getByRole('combobox', { name: /to account/i })); userEvent.click(getByRole('option', { name: /staff savings/i })); @@ -474,9 +426,6 @@ describe('TransferModal', () => { const amountField = getByRole('spinbutton', { name: /amount/i }); - userEvent.click(getByRole('combobox', { name: /from account/i })); - userEvent.click(getByRole('option', { name: /staff account/i })); - userEvent.click(getByRole('combobox', { name: /to account/i })); userEvent.click(getByRole('option', { name: /staff savings/i })); diff --git a/src/components/HrTools/SavingsFundTransfer/TransferModal/TransferModal.tsx b/src/components/HrTools/SavingsFundTransfer/TransferModal/TransferModal.tsx index d74adb7f92..7e50b486bc 100644 --- a/src/components/HrTools/SavingsFundTransfer/TransferModal/TransferModal.tsx +++ b/src/components/HrTools/SavingsFundTransfer/TransferModal/TransferModal.tsx @@ -1,6 +1,5 @@ import { useState } from 'react'; -import East from '@mui/icons-material/East'; -import SwapHorizIcon from '@mui/icons-material/SwapHoriz'; +import { ArrowRightAlt } from '@mui/icons-material'; import { Alert, Box, @@ -11,12 +10,10 @@ import { FormHelperText, FormLabel, Grid, - IconButton, InputLabel, Radio, RadioGroup, TextField, - Tooltip, Typography, } from '@mui/material'; import { Formik } from 'formik'; @@ -309,26 +306,17 @@ export const TransferModal: React.FC = ({ {t('From Account')} fund.fundType === transferFrom, + )} label={t('From Account')} labelId="transferFrom" name="transferFrom" value={transferFrom} - disabled={!isNew} - onChange={handleChange} - onBlur={handleBlur} - error={ - touched.transferFrom && - Boolean(errors.transferFrom) - } + readOnly + IconComponent={() => null} required /> - {touched.transferFrom && errors.transferFrom && ( - - {errors.transferFrom} - - )} @@ -342,18 +330,7 @@ export const TransferModal: React.FC = ({ alignItems: 'center', }} > - { - setFieldValue('transferFrom', transferTo); - setFieldValue('transferTo', transferFrom); - }} - color="primary" - disabled={!transferFrom || !transferTo} - > - - - - + @@ -398,7 +375,7 @@ export const TransferModal: React.FC = ({ - + = ({ id="transfer-note" label={t('Note (Optional)')} name="note" - disabled={!isNew} value={note} onChange={handleChange} fullWidth diff --git a/src/components/HrTools/SavingsFundTransfer/TransfersPage/TransfersPage.test.tsx b/src/components/HrTools/SavingsFundTransfer/TransfersPage/TransfersPage.test.tsx index a0e0f92dd0..36a7e65560 100644 --- a/src/components/HrTools/SavingsFundTransfer/TransfersPage/TransfersPage.test.tsx +++ b/src/components/HrTools/SavingsFundTransfer/TransfersPage/TransfersPage.test.tsx @@ -247,9 +247,6 @@ describe('TransfersPage', () => { expect( await findAllByRole('button', { name: 'TRANSFER FROM' }), ).toHaveLength(2); - expect(await findAllByRole('button', { name: 'TRANSFER TO' })).toHaveLength( - 2, - ); const tables = await findAllByRole('grid'); expect(tables.length).toBe(2);