Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MPDX-8264 Fix status and frequency #1089

Merged
merged 4 commits into from
Sep 24, 2024
Merged

MPDX-8264 Fix status and frequency #1089

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
67d1bb7
Update frequency options and status options
caleballdrin Sep 24, 2024
01f3834
Add tests
caleballdrin Sep 24, 2024
077367b
Add useMemo
caleballdrin Sep 24, 2024
b7e58f1
Fix useMemo
caleballdrin Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 37 additions & 72 deletions src/components/Tool/FixCommitmentInfo/Contact.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,20 @@ import { ThemeProvider } from '@mui/material/styles';
import userEvent from '@testing-library/user-event';
import TestRouter from '__tests__/util/TestRouter';
import TestWrapper from '__tests__/util/TestWrapper';
import {
fireEvent,
render,
waitFor,
} from '__tests__/util/testingLibraryReactMock';
import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
import { fireEvent, render } from '__tests__/util/testingLibraryReactMock';
import { LoadConstantsQuery } from 'src/components/Constants/LoadConstants.generated';
import { loadConstantsMockData } from 'src/components/Constants/LoadConstantsMock';
import { TabKey } from 'src/components/Contacts/ContactDetails/ContactDetails';
import { PledgeFrequencyEnum } from 'src/graphql/types.generated';
import { PledgeFrequencyEnum, StatusEnum } from 'src/graphql/types.generated';
import theme from '../../../theme';
import Contact from './Contact';

let testData = {
const testData = {
id: 'test 1',
name: 'Tester 1',
avatar: '',
statusTitle: 'Partner - Financial',
statusValue: 'NEW_CONNECTION',
status: 'PARTNER_FINANCIAL',
frequencyTitle: 'Monthly',
frequencyValue: PledgeFrequencyEnum.Monthly,
amount: 50,
Expand All @@ -44,28 +42,30 @@ const router = {
const setContactFocus = jest.fn();
const handleShowModal = jest.fn();

const TestComponent = ({
statuses = ['Partner - Financial', 'test_option_1'],
}: {
statuses?: string[];
}) => (
const TestComponent = ({ status = testData.status }: { status?: string }) => (
<ThemeProvider theme={theme}>
<TestWrapper>
<Contact
id={testData.id}
name={testData.name}
donations={testData.donations.nodes}
key={testData.name}
showModal={handleShowModal}
statusTitle={testData.statusTitle}
statusValue={testData.statusValue}
amount={testData.amount}
amountCurrency={testData.amountCurrency}
frequencyValue={testData.frequencyValue}
statuses={statuses}
setContactFocus={setContactFocus}
avatar={testData.avatar}
/>
<GqlMockedProvider<{
LoadConstants: LoadConstantsQuery;
}>
mocks={{
LoadConstants: loadConstantsMockData,
}}
>
<Contact
id={testData.id}
name={testData.name}
donations={testData.donations.nodes}
key={testData.name}
showModal={handleShowModal}
status={status}
amount={testData.amount}
amountCurrency={testData.amountCurrency}
frequencyValue={testData.frequencyValue}
setContactFocus={setContactFocus}
avatar={testData.avatar}
/>
</GqlMockedProvider>
</TestWrapper>
</ThemeProvider>
);
Expand Down Expand Up @@ -104,44 +104,8 @@ describe('FixCommitmentContact', () => {
expect(setContactFocus).toHaveBeenCalledWith(testData.id, TabKey.Donations);
});

it('should fail validation', async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we be removing this? Seems like it's a good test to have in place to ensure the status is filled in before the form can be submitted

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For this tool we actually want users to be able to change certain fields without changing all the fields. So we want them to be able to leave some fields blank. I'll remove required from the yup.

testData = {
id: 'test 2',
name: 'Tester 2',
avatar: '',
statusTitle: '',
statusValue: '',
frequencyTitle: '',
frequencyValue: PledgeFrequencyEnum.Annual,
amount: null!,
amountCurrency: '',
donations: {
nodes: [
{
amount: {
amount: 0,
currency: 'UGX',
conversionDate: '2021-12-24',
convertedCurrency: 'UGX',
},
},
],
},
};

const { getByTestId } = render(<TestComponent />);
userEvent.click(getByTestId('confirmButton'));
await waitFor(() => {
expect(getByTestId('statusSelectError')).toHaveTextContent(
'Please select a status',
);
});
});

it('should should render select field options and inputs', async () => {
const { getByTestId } = render(
<TestComponent statuses={['Partner - Financial', 'test_option_1']} />,
);
const { getByTestId } = render(<TestComponent />);

const frequency = getByTestId('pledgeFrequency-input');
fireEvent.change(frequency, {
Expand All @@ -159,7 +123,7 @@ describe('FixCommitmentContact', () => {
fireEvent.change(status, {
target: { value: 'Partner - Financial' },
});
expect(status).toHaveValue('Partner - Financial');
expect(status).toHaveValue(StatusEnum.PartnerFinancial);

const amount = getByTestId('pledgeAmount-input');
fireEvent.change(amount, {
Expand All @@ -171,7 +135,7 @@ describe('FixCommitmentContact', () => {
it('should render with correct styles', async () => {
const { getByTestId } = render(
<TestRouter router={router}>
<TestComponent statuses={['Partner - Financial', 'test_option_1']} />
<TestComponent />
</TestRouter>,
);

Expand All @@ -181,14 +145,15 @@ describe('FixCommitmentContact', () => {
});

it('should render donation data', async () => {
const { getByTestId } = render(
const { getByTestId, getByText } = render(
<TestRouter router={router}>
<TestComponent statuses={['Partner - Financial', 'test_option_1']} />
<TestComponent status="" />
</TestRouter>,
);
expect(getByText('Current: ARM 50 Monthly')).toBeInTheDocument();
const donationDate = getByTestId('donationDate');
expect(donationDate).toHaveTextContent('12/24/2021');
expect(donationDate).toHaveTextContent('10/15/2019');
const donationAmount = getByTestId('donationAmount');
expect(donationAmount).toHaveTextContent('0 UGX');
expect(donationAmount).toHaveTextContent('175 USD');
});
});
84 changes: 42 additions & 42 deletions src/components/Tool/FixCommitmentInfo/Contact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { ReactElement } from 'react';
import React, { ReactElement, useMemo } from 'react';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import {
Avatar,
Expand Down Expand Up @@ -26,13 +26,14 @@ import * as yup from 'yup';
import { SetContactFocus } from 'pages/accountLists/[accountListId]/tools/useToolsHelper';
import { useApiConstants } from 'src/components/Constants/UseApiConstants';
import { TabKey } from 'src/components/Contacts/ContactDetails/ContactDetails';
import { PledgeFrequencyEnum } from 'src/graphql/types.generated';
import { PledgeFrequencyEnum, StatusEnum } from 'src/graphql/types.generated';
import { useLocale } from 'src/hooks/useLocale';
import {
PledgeCurrencyOptionFormatEnum,
getPledgeCurrencyOptions,
} from 'src/lib/getCurrencyOptions';
import { currencyFormat } from 'src/lib/intlFormat';
import { getLocalizedContactStatus } from 'src/utils/functions/getLocalizedContactStatus';
import { getLocalizedPledgeFrequency } from 'src/utils/functions/getLocalizedPledgeFrequency';
import theme from '../../../theme';
import { StyledInput } from '../StyledInput';
Expand Down Expand Up @@ -166,8 +167,7 @@ interface Props {
id: string;
name: string;
donations: DonationsType[];
statusTitle: string | null | undefined;
statusValue: string;
status: string | undefined;
amount: number;
amountCurrency: string;
frequencyValue: PledgeFrequencyEnum | null;
Expand All @@ -177,7 +177,6 @@ interface Props {
title: string,
updateType: UpdateTypeEnum,
) => void;
statuses: string[];
setContactFocus: SetContactFocus;
avatar?: string;
suggestedChanges?: SuggestedChangesType;
Expand All @@ -187,13 +186,11 @@ const Contact: React.FC<Props> = ({
id,
name,
donations,
statusTitle,
statusValue,
status,
amount,
amountCurrency,
frequencyValue,
showModal,
statuses,
setContactFocus,
avatar,
suggestedChanges,
Expand All @@ -202,12 +199,29 @@ const Contact: React.FC<Props> = ({
const locale = useLocale();
const { classes } = useStyles();
const { t } = useTranslation();
const constants = useApiConstants();
const frequencyOptions = constants?.pledgeFrequency;
const statusOptions = constants?.status;

const suggestedAmount = suggestedChanges?.pledge_amount || null;

const suggestedFrequency = suggestedChanges?.pledge_frequency || null;
const suggestedFrequency = useMemo(
() =>
frequencyOptions?.find((frequency) => {
return frequency?.key === suggestedChanges?.pledge_frequency;
})?.id || '',
[statusOptions, suggestedChanges?.pledge_frequency],
);
caleballdrin marked this conversation as resolved.
Show resolved Hide resolved

const suggestedStatus = suggestedChanges?.status || null;
const suggestedStatus = useMemo(
() =>
statusOptions?.find(
(status) =>
status.id === suggestedChanges?.status?.toUpperCase() ||
status.value === suggestedChanges?.status,
)?.id || '',
[statusOptions, suggestedChanges?.status],
);

const onSubmit = async ({
status,
Expand Down Expand Up @@ -235,7 +249,7 @@ const Contact: React.FC<Props> = ({
};

const commitmentInfoFormSchema = yup.object({
statusValue: yup.string().required('Please select a status'),
status: yup.string().nullable(),
pledgeCurrency: yup.string().nullable(),
pledgeAmount: yup.number().nullable(),
pledgeFrequency: yup.string().nullable(),
Expand All @@ -245,7 +259,7 @@ const Contact: React.FC<Props> = ({
<Grid container className={classes.container}>
<Formik
initialValues={{
statusValue: suggestedStatus || statusValue,
status: suggestedStatus || status,
pledgeCurrency: amountCurrency,
pledgeAmount: suggestedAmount || amount,
pledgeFrequency: suggestedFrequency || frequencyValue,
Expand All @@ -256,19 +270,14 @@ const Contact: React.FC<Props> = ({
}}
>
{({
values: {
statusValue,
pledgeCurrency,
pledgeAmount,
pledgeFrequency,
},
values: { status, pledgeCurrency, pledgeAmount, pledgeFrequency },
handleSubmit,
setFieldValue,
errors,
}): ReactElement => {
const modalContact = {
id: id,
status: statusValue,
status,
name: name,
pledgeCurrency,
pledgeAmount,
Expand All @@ -279,7 +288,7 @@ const Contact: React.FC<Props> = ({
<Grid container className={classes.formWrapper}>
<Card className={classes.formInner}>
<Grid container>
<Grid item md={4} xs={12}>
<Grid item sm={12} md={4}>
<Box
display="flex"
p={2}
Expand All @@ -301,7 +310,10 @@ const Contact: React.FC<Props> = ({
<Typography variant="subtitle1">{name}</Typography>
</Link>
<Typography variant="subtitle2">
{`Current: ${statusTitle || ''} ${
{`Current: ${getLocalizedContactStatus(
t,
status as StatusEnum,
)} ${
amount && amountCurrency
? currencyFormat(amount, amountCurrency, locale)
: ''
Expand All @@ -313,18 +325,12 @@ const Contact: React.FC<Props> = ({
</Box>
</Box>
</Grid>
<Grid item xs={12} md={8} className={classes.right}>
<Grid item sm={12} md={8} className={classes.right}>
<Grid
container
style={{ paddingRight: theme.spacing(1) }}
>
<Grid
item
xs={12}
md={6}
lg={12}
className={classes.boxTop}
>
<Grid item xs={12} className={classes.boxTop}>
<FormControl fullWidth size="small">
<InputLabel id="status-label">
{t('Status')}
Expand All @@ -340,30 +346,24 @@ const Contact: React.FC<Props> = ({
}}
data-testid="statusSelect"
style={{ width: '100%' }}
value={statusValue}
value={status}
onChange={(event) =>
setFieldValue('statusValue', event.target.value)
setFieldValue('status', event.target.value)
}
>
{statuses.map((status) => (
{Object.values(StatusEnum).map((status) => (
<MenuItem
value={status}
key={status}
data-testid="statusSelectOptions"
>
{status}
{getLocalizedContactStatus(t, status)}
</MenuItem>
))}
</Select>
</FormControl>
<FormHelperText
error={true}
data-testid="statusSelectError"
>
{errors.statusValue && errors.statusValue}
</FormHelperText>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<Grid item xs={12} sm={4}>
<Box className={classes.boxBottom}>
<FormControl fullWidth size="small">
<InputLabel id="currency-label">
Expand Down Expand Up @@ -402,7 +402,7 @@ const Contact: React.FC<Props> = ({
</FormHelperText>
</Box>
</Grid>
<Grid item xs={12} lg={4}>
<Grid item xs={12} sm={4}>
<Box className={classes.boxBottom}>
<FormControl fullWidth size="small">
<Field
Expand Down Expand Up @@ -446,7 +446,7 @@ const Contact: React.FC<Props> = ({
</FormHelperText>
</Box>
</Grid>
<Grid item xs={12} lg={4}>
<Grid item xs={12} sm={4}>
<Box
className={classes.boxBottom}
data-testid="BoxBottom"
Expand Down
Loading
Loading