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);