Skip to content

Commit 8544dce

Browse files
zweatshirtzweatshirt
authored
Merge pull request #1812 from CruGlobal/MPDX-9653
MPDX-9653 - Simplify From Account -> To Account behavior in Savings Fund Transfer
2 parents 334b078 + b6569d3 commit 8544dce

5 files changed

Lines changed: 28 additions & 135 deletions

File tree

‎src/components/HrTools/SavingsFundTransfer/BalanceCard/BalanceCard.test.tsx‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@ describe('BalanceCard', () => {
6262
expect(getByText('Current Balance')).toBeInTheDocument();
6363
expect(getByText('$15,000.00')).toBeInTheDocument();
6464
expect(getByRole('button', { name: /transfer from/i })).toBeInTheDocument();
65-
expect(getByRole('button', { name: /transfer to/i })).toBeInTheDocument();
6665
});
6766

6867
it('should display title correctly', () => {
@@ -190,21 +189,6 @@ describe('BalanceCard', () => {
190189
});
191190
});
192191

193-
it('should call handleOpenTransferModal with correct parameters when Transfer To is clicked', async () => {
194-
const { findByRole } = render(<Components />);
195-
196-
const transferToButton = await findByRole('button', {
197-
name: /transfer to/i,
198-
});
199-
userEvent.click(transferToButton);
200-
201-
expect(mockHandleOpenTransferModal).toHaveBeenCalledWith({
202-
transfer: {
203-
transferTo: expect.any(String),
204-
},
205-
});
206-
});
207-
208192
it('should disable transfer from button when current balance goes beyond deficit limit', async () => {
209193
const { findByRole } = render(
210194
<Components

‎src/components/HrTools/SavingsFundTransfer/BalanceCard/BalanceCard.tsx‎

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
import React from 'react';
2-
import {
3-
Groups,
4-
MoveToInbox,
5-
Outbox,
6-
Savings,
7-
Wallet,
8-
} from '@mui/icons-material';
2+
import { Groups, Outbox, Savings, Wallet } from '@mui/icons-material';
93
import { Box, Button, Card, Typography } from '@mui/material';
104
import { useTranslation } from 'react-i18next';
115
import { SimpleScreenOnly } from 'src/components/Reports/styledComponents';
@@ -51,14 +45,6 @@ export const BalanceCard: React.FC<BalanceCardProps> = ({
5145
});
5246
};
5347

54-
const handleTransferTo = () => {
55-
handleOpenTransferModal({
56-
transfer: {
57-
transferTo: fund.fundType,
58-
},
59-
});
60-
};
61-
6248
return (
6349
<Card
6450
variant="outlined"
@@ -70,6 +56,8 @@ export const BalanceCard: React.FC<BalanceCardProps> = ({
7056
fontSize: '1.25rem',
7157
boxShadow: isSelected ? 3 : 1,
7258
transition: 'box-shadow 0.3s ease-in-out',
59+
display: 'flex',
60+
flexDirection: 'column',
7361
}}
7462
>
7563
<Box display={'flex'} flexDirection="row" alignItems="center" gap={1}>
@@ -99,6 +87,9 @@ export const BalanceCard: React.FC<BalanceCardProps> = ({
9987
'@media print': { fontSize: '12pt' },
10088
fontWeight: 500,
10189
fontSize: '13pt',
90+
minHeight: '3em',
91+
display: 'flex',
92+
alignItems: 'center',
10293
}}
10394
>
10495
{title}
@@ -107,7 +98,7 @@ export const BalanceCard: React.FC<BalanceCardProps> = ({
10798
</Box>
10899
<Box
109100
sx={{
110-
mt: 5,
101+
mt: 3,
111102
'@media print': { mt: 2 },
112103
}}
113104
>
@@ -135,21 +126,17 @@ export const BalanceCard: React.FC<BalanceCardProps> = ({
135126
<SimpleScreenOnly
136127
sx={{
137128
alignItems: 'left',
138-
mt: 2,
139-
ml: 0,
129+
mt: 'auto',
140130
}}
141131
>
142132
<Button
143133
onClick={handleTransferFrom}
144134
disabled={fund.endBalance <= fund.deficitLimit}
135+
fullWidth
145136
>
146137
<Outbox fontSize="small" sx={{ mr: 0.5 }} />
147138
{t('TRANSFER FROM')}
148139
</Button>
149-
<Button onClick={handleTransferTo}>
150-
<MoveToInbox fontSize="small" sx={{ mr: 0.5 }} />
151-
{t('TRANSFER TO')}
152-
</Button>
153140
</SimpleScreenOnly>
154141
</Card>
155142
);

‎src/components/HrTools/SavingsFundTransfer/TransferModal/TransferModal.test.tsx‎

Lines changed: 11 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ jest.mock('@mui/material', () => {
5353
});
5454

5555
const transferDefaultData: TransferModalData['transfer'] = {
56-
transferFrom: 'transferFrom',
56+
transferFrom: 'Staff Account',
5757
transferTo: '',
5858
amount: 0,
5959
schedule: ScheduleEnum.OneTime,
@@ -152,11 +152,8 @@ describe('TransferModal', () => {
152152
userEvent.type(amountField, '-100');
153153
userEvent.tab();
154154

155-
const fromAccount = getByRole('combobox', { name: /from account/i });
156155
const toAccount = getByRole('combobox', { name: /to account/i });
157156

158-
userEvent.click(fromAccount);
159-
userEvent.click(getByRole('option', { name: /staff account/i }));
160157
userEvent.click(toAccount);
161158
userEvent.click(getByRole('option', { name: /staff savings/i }));
162159

@@ -199,13 +196,9 @@ describe('TransferModal', () => {
199196
it('should submit form with valid data', async () => {
200197
const { getByRole } = render(<Components />);
201198

202-
const fromAccount = getByRole('combobox', { name: /from account/i });
203199
const toAccount = getByRole('combobox', { name: /to account/i });
204200
const amountField = getByRole('spinbutton', { name: /amount/i });
205201

206-
userEvent.click(fromAccount);
207-
userEvent.click(getByRole('option', { name: /staff account/i }));
208-
209202
userEvent.click(toAccount);
210203
userEvent.click(getByRole('option', { name: /staff savings/i }));
211204

@@ -227,14 +220,10 @@ describe('TransferModal', () => {
227220
it('should handle form submission successfully', async () => {
228221
const { getByRole } = render(<Components />);
229222

230-
const fromAccount = getByRole('combobox', { name: /from account/i });
231223
const toAccount = getByRole('combobox', { name: /to account/i });
232224
const amountField = getByRole('spinbutton', { name: /amount/i });
233225
const submitButton = getByRole('button', { name: /submit/i });
234226

235-
userEvent.click(fromAccount);
236-
userEvent.click(getByRole('option', { name: /staff account/i }));
237-
238227
userEvent.click(toAccount);
239228
userEvent.click(getByRole('option', { name: /staff savings/i }));
240229

@@ -274,55 +263,25 @@ describe('TransferModal', () => {
274263
expect(getByLabelText(/end date/i)).toHaveValue('');
275264
});
276265

277-
it('should validate that from and to accounts are different', async () => {
278-
const { getByRole, queryByRole, getAllByRole } = render(<Components />);
266+
it('locks the From Account to the launching card and excludes it from To Account options', async () => {
267+
const { getByRole, queryByRole } = render(<Components />);
279268

280-
const [fromAccount, toAccount] = getAllByRole('combobox');
269+
const fromAccount = getByRole('combobox', { name: /from account/i });
270+
expect(fromAccount).toHaveTextContent('Staff Account');
281271

282272
userEvent.click(fromAccount);
283-
expect(
284-
getByRole('option', { name: /staff account/i }),
285-
).toBeInTheDocument();
286-
userEvent.click(getByRole('option', { name: /staff account/i }));
273+
expect(queryByRole('listbox')).not.toBeInTheDocument();
274+
275+
userEvent.click(getByRole('combobox', { name: /to account/i }));
287276

288-
userEvent.click(toAccount);
289277
await waitFor(() =>
290278
expect(
291279
queryByRole('option', { name: /staff account/i }),
292280
).not.toBeInTheDocument(),
293281
);
294-
295-
userEvent.click(getByRole('option', { name: /staff savings/i }));
296-
userEvent.click(getByRole('button', { name: /submit/i }));
297-
});
298-
299-
it('should swap accounts when swap button is clicked', async () => {
300-
const { getByRole, getByTestId } = render(<Components />);
301-
302-
const icon = getByTestId('SwapHorizIcon');
303-
const swapButton = icon.closest('button');
304-
305-
expect(swapButton).toBeDisabled();
306-
307-
const fromAccount = getByRole('combobox', { name: /from account/i });
308-
const toAccount = getByRole('combobox', { name: /to account/i });
309-
310-
userEvent.click(fromAccount);
311-
userEvent.click(getByRole('option', { name: /staff account/i }));
312-
313-
userEvent.click(toAccount);
314-
userEvent.click(getByRole('option', { name: /staff savings/i }));
315-
316-
await waitFor(() => {
317-
expect(swapButton).not.toBeDisabled();
318-
});
319-
320-
userEvent.click(swapButton as HTMLButtonElement);
321-
322-
await waitFor(() => {
323-
expect(fromAccount).toHaveTextContent('Staff Savings');
324-
expect(toAccount).toHaveTextContent('Staff Account');
325-
});
282+
expect(
283+
getByRole('option', { name: /staff savings/i }),
284+
).toBeInTheDocument();
326285
});
327286

328287
it('should show/hide end date based on schedule selection', async () => {
@@ -393,12 +352,8 @@ describe('TransferModal', () => {
393352
it('should show information box when amount exceeds limit', async () => {
394353
const { getByRole, findByRole } = render(<Components />);
395354

396-
const fromAccount = getByRole('combobox', { name: /from account/i });
397355
const toAccount = getByRole('combobox', { name: /to account/i });
398356

399-
userEvent.click(fromAccount);
400-
userEvent.click(getByRole('option', { name: /staff account/i }));
401-
402357
userEvent.click(toAccount);
403358
userEvent.click(getByRole('option', { name: /staff savings/i }));
404359

@@ -441,9 +396,6 @@ describe('TransferModal', () => {
441396

442397
const amountField = getByRole('spinbutton', { name: /amount/i });
443398

444-
userEvent.click(getByRole('combobox', { name: /from account/i }));
445-
userEvent.click(getByRole('option', { name: /staff account/i }));
446-
447399
userEvent.click(getByRole('combobox', { name: /to account/i }));
448400
userEvent.click(getByRole('option', { name: /staff savings/i }));
449401

@@ -474,9 +426,6 @@ describe('TransferModal', () => {
474426

475427
const amountField = getByRole('spinbutton', { name: /amount/i });
476428

477-
userEvent.click(getByRole('combobox', { name: /from account/i }));
478-
userEvent.click(getByRole('option', { name: /staff account/i }));
479-
480429
userEvent.click(getByRole('combobox', { name: /to account/i }));
481430
userEvent.click(getByRole('option', { name: /staff savings/i }));
482431

‎src/components/HrTools/SavingsFundTransfer/TransferModal/TransferModal.tsx‎

Lines changed: 8 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { useState } from 'react';
2-
import East from '@mui/icons-material/East';
3-
import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
2+
import { ArrowRightAlt } from '@mui/icons-material';
43
import {
54
Alert,
65
Box,
@@ -11,12 +10,10 @@ import {
1110
FormHelperText,
1211
FormLabel,
1312
Grid,
14-
IconButton,
1513
InputLabel,
1614
Radio,
1715
RadioGroup,
1816
TextField,
19-
Tooltip,
2017
Typography,
2118
} from '@mui/material';
2219
import { Formik } from 'formik';
@@ -309,26 +306,17 @@ export const TransferModal: React.FC<TransferModalProps> = ({
309306
{t('From Account')}
310307
</InputLabel>
311308
<TransferModalSelect
312-
notSelected={transferTo}
313-
funds={funds}
309+
funds={funds.filter(
310+
(fund) => fund.fundType === transferFrom,
311+
)}
314312
label={t('From Account')}
315313
labelId="transferFrom"
316314
name="transferFrom"
317315
value={transferFrom}
318-
disabled={!isNew}
319-
onChange={handleChange}
320-
onBlur={handleBlur}
321-
error={
322-
touched.transferFrom &&
323-
Boolean(errors.transferFrom)
324-
}
316+
readOnly
317+
IconComponent={() => null}
325318
required
326319
/>
327-
{touched.transferFrom && errors.transferFrom && (
328-
<FormHelperText error={true}>
329-
{errors.transferFrom}
330-
</FormHelperText>
331-
)}
332320
</FormControl>
333321
</Grid>
334322

@@ -342,18 +330,7 @@ export const TransferModal: React.FC<TransferModalProps> = ({
342330
alignItems: 'center',
343331
}}
344332
>
345-
<IconButton
346-
onClick={() => {
347-
setFieldValue('transferFrom', transferTo);
348-
setFieldValue('transferTo', transferFrom);
349-
}}
350-
color="primary"
351-
disabled={!transferFrom || !transferTo}
352-
>
353-
<Tooltip title={t('Swap')}>
354-
<SwapHorizIcon />
355-
</Tooltip>
356-
</IconButton>
333+
<ArrowRightAlt />
357334
</Grid>
358335

359336
<Grid item xs={12} sm={5.5}>
@@ -398,7 +375,7 @@ export const TransferModal: React.FC<TransferModalProps> = ({
398375
<FundInfoDisplay fund={fund} />
399376
</Grid>
400377
<Grid item xs={12} sm={1} sx={{ textAlign: 'center' }}>
401-
<East />
378+
<ArrowRightAlt />
402379
</Grid>
403380
<Grid item xs={12} sm={5.5}>
404381
<FundInfoDisplay
@@ -527,7 +504,6 @@ export const TransferModal: React.FC<TransferModalProps> = ({
527504
id="transfer-note"
528505
label={t('Note (Optional)')}
529506
name="note"
530-
disabled={!isNew}
531507
value={note}
532508
onChange={handleChange}
533509
fullWidth

‎src/components/HrTools/SavingsFundTransfer/TransfersPage/TransfersPage.test.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -247,9 +247,6 @@ describe('TransfersPage', () => {
247247
expect(
248248
await findAllByRole('button', { name: 'TRANSFER FROM' }),
249249
).toHaveLength(2);
250-
expect(await findAllByRole('button', { name: 'TRANSFER TO' })).toHaveLength(
251-
2,
252-
);
253250

254251
const tables = await findAllByRole('grid');
255252
expect(tables.length).toBe(2);

0 commit comments

Comments
 (0)