diff --git a/src/components/Tool/Appeal/Flow/ContactFlowRow/ContactFlowRow.test.tsx b/src/components/Tool/Appeal/Flow/ContactFlowRow/ContactFlowRow.test.tsx index 8d3901d26..1a168e6c5 100644 --- a/src/components/Tool/Appeal/Flow/ContactFlowRow/ContactFlowRow.test.tsx +++ b/src/components/Tool/Appeal/Flow/ContactFlowRow/ContactFlowRow.test.tsx @@ -1,70 +1,95 @@ import React from 'react'; import { ThemeProvider } from '@mui/material/styles'; +import { LocalizationProvider } from '@mui/x-date-pickers'; +import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon'; import { render, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; +import { I18nextProvider } from 'react-i18next'; import TestWrapper from '__tests__/util/TestWrapper'; -import { ContactRowFragment } from 'src/components/Contacts/ContactRow/ContactRow.generated'; +import i18n from 'src/lib/i18n'; import theme from 'src/theme'; import { AppealStatusEnum, AppealsContext, AppealsType, } from '../../AppealsContext/AppealsContext'; +import { AppealContactInfoFragment } from '../../AppealsContext/contacts.generated'; +import { defaultContact } from '../../List/ContactRow/ContactRowMock'; import { ContactFlowRow } from './ContactFlowRow'; -const accountListId = 'abc'; -const contact = { - id: '123', - name: 'Test Name', - starred: true, - avatar: 'avatar.jpg', - pledgeAmount: 100, - pledgeCurrency: 'USD', - pledgeReceived: false, - uncompletedTasksCount: 0, -} as ContactRowFragment; +const accountListId = 'account-list-1'; +const appealId = 'appealId'; const onContactSelected = jest.fn(); const toggleSelectionById = jest.fn(); const isChecked = jest.fn().mockImplementation(() => false); -const Components = () => ( - - - - - - - - - +type ComponentsProps = { + contact?: AppealContactInfoFragment; + appealStatus?: AppealStatusEnum; +}; +const Components = ({ + contact = defaultContact, + appealStatus = AppealStatusEnum.Asked, +}: ComponentsProps) => ( + + + + + + + + + + + + + ); describe('ContactFlowRow', () => { it('should display contact name and status', () => { const { getByText, getByTitle } = render(); - expect(getByText('Test Name')).toBeInTheDocument(); + expect(getByText(defaultContact.name)).toBeInTheDocument(); + expect(getByTitle('Outline Star Icon')).toBeInTheDocument(); + }); + + it('should display contact as starred', () => { + const { getByText, getByTitle } = render( + , + ); + expect(getByText(defaultContact.name)).toBeInTheDocument(); expect(getByTitle('Filled Star Icon')).toBeInTheDocument(); }); it('should call contact selected function', () => { const { getByText } = render(); - userEvent.click(getByText('Test Name')); - expect(getByText('Test Name')).toBeInTheDocument(); - expect(onContactSelected).toHaveBeenCalledWith('123', true, true); + userEvent.click(getByText(defaultContact.name)); + expect(getByText(defaultContact.name)).toBeInTheDocument(); + expect(onContactSelected).toHaveBeenCalledWith( + defaultContact.id, + true, + true, + ); }); it('should call check contact', async () => { @@ -72,7 +97,83 @@ describe('ContactFlowRow', () => { userEvent.click(getByRole('checkbox')); await waitFor(() => { - expect(toggleSelectionById).toHaveBeenLastCalledWith(contact.id); + expect(toggleSelectionById).toHaveBeenLastCalledWith(defaultContact.id); + }); + }); + + describe('Contact Row by status type', () => { + it('Excluded', () => { + const { getByText } = render( + , + ); + expect(getByText('CA$500')).toBeInTheDocument(); + expect(getByText('Monthly')).toBeInTheDocument(); + }); + + it('Asked', () => { + const { getByText } = render( + , + ); + expect(getByText('CA$500')).toBeInTheDocument(); + expect(getByText('Monthly')).toBeInTheDocument(); + }); + + it('Committed', () => { + const { getByText } = render( + , + ); + expect(getByText('$3,000')).toBeInTheDocument(); + expect(getByText('(Aug 8, 2024)')).toBeInTheDocument(); + }); + + it('Committed - with no pledges', () => { + const { getByText } = render( + , + ); + expect(getByText('$0')).toBeInTheDocument(); + }); + + it('Received', () => { + const { getByText } = render( + , + ); + expect(getByText('$3,000')).toBeInTheDocument(); + expect(getByText('(Aug 8, 2024)')).toBeInTheDocument(); + }); + + it('Given', () => { + const { getByText } = render( + , + ); + expect(getByText('$3,000 ($50) (Jun 25, 2019)')).toBeInTheDocument(); + }); + }); + + describe('Edit/Add Pledge', () => { + it('Open up Edit pledge modal', async () => { + const { getByTestId, findByText } = render( + , + ); + + userEvent.click(getByTestId('editPledgeButton')); + + expect(await findByText('Edit Commitment')).toBeInTheDocument(); + }); + + it('Open up delete pledge modal', async () => { + const { getByTestId, findByText } = render( + , + ); + + userEvent.click(getByTestId('deletePledgeButton')); + + expect(await findByText('Remove Commitment')).toBeInTheDocument(); }); }); }); diff --git a/src/components/Tool/Appeal/Flow/ContactFlowRow/ContactFlowRow.tsx b/src/components/Tool/Appeal/Flow/ContactFlowRow/ContactFlowRow.tsx index 9fc76efd4..8f6976d18 100644 --- a/src/components/Tool/Appeal/Flow/ContactFlowRow/ContactFlowRow.tsx +++ b/src/components/Tool/Appeal/Flow/ContactFlowRow/ContactFlowRow.tsx @@ -1,5 +1,13 @@ -import React, { useEffect, useMemo } from 'react'; -import { Box, Checkbox, ListItemIcon, Typography } from '@mui/material'; +import React, { useEffect, useState } from 'react'; +import DeleteIcon from '@mui/icons-material/Delete'; +import EditIcon from '@mui/icons-material/Edit'; +import { + Box, + Checkbox, + IconButton, + ListItemIcon, + Typography, +} from '@mui/material'; import { styled } from '@mui/material/styles'; import { useDrag } from 'react-dnd'; import { getEmptyImage } from 'react-dnd-html5-backend'; @@ -12,9 +20,9 @@ import { DraggableBox, } from 'src/components/Contacts/ContactFlow/ContactFlowRow/ContactFlowRow'; import { StarContactIconButton } from 'src/components/Contacts/StarContactIconButton/StarContactIconButton'; +import { useGetPledgeOrDonation } from 'src/components/Tool/Appeal/Shared/useGetPledgeOrDonation/useGetPledgeOrDonation'; import { StatusEnum } from 'src/graphql/types.generated'; import { useLocale } from 'src/hooks/useLocale'; -import { currencyFormat } from 'src/lib/intlFormat'; import theme from 'src/theme'; import { getLocalizedContactStatus } from 'src/utils/functions/getLocalizedContactStatus'; import { @@ -23,6 +31,15 @@ import { AppealsType, } from '../../AppealsContext/AppealsContext'; import { AppealContactInfoFragment } from '../../AppealsContext/contacts.generated'; +import { + DynamicDeletePledgeModal, + preloadDeletePledgeModal, +} from '../../Modals/DeletePledgeModal/DynamicDeletePledgeModal'; +import { + DynamicPledgeModal, + preloadPledgeModal, +} from '../../Modals/PledgeModal/DynamicPledgeModal'; +import { AmountAndFrequency } from '../../Shared/AmountAndFrequency/AmountAndFrequency'; // When making changes in this file, also check to see if you don't need to make changes to the below file // src/components/Contacts/ContactFlow/ContactFlowRow/ContactFlowRow.tsx @@ -53,6 +70,20 @@ const FlexCenterAlignedBox = styled(Box)(() => ({ width: '100%', })); +const CommitmentsBox = styled(Box)(() => ({ + display: 'flex', + alignItems: 'center', + width: '100%', + justifyContent: 'space-between', + marginTop: theme.spacing(2), +})); + +const CommitmentActionsBox = styled(Box)(() => ({ + display: 'flex', + alignItems: 'center', + gap: theme.spacing(1), +})); + export const ContactFlowRow: React.FC = ({ accountListId, contact, @@ -61,11 +92,19 @@ export const ContactFlowRow: React.FC = ({ onContactSelected, columnWidth, }) => { - const { id, name, starred, pledgeAmount, pledgeCurrency } = contact; + const { id, name, starred } = contact; const { t } = useTranslation(); const locale = useLocale(); - const { isRowChecked: isChecked, toggleSelectionById: onContactCheckToggle } = - React.useContext(AppealsContext) as AppealsType; + const { + appealId, + isRowChecked: isChecked, + toggleSelectionById: onContactCheckToggle, + } = React.useContext(AppealsContext) as AppealsType; + const [createPledgeModalOpen, setPledgeModalOpen] = useState(false); + const [deletePledgeModalOpen, setDeletePledgeModalOpen] = useState(false); + + const { pledgeValues, amountAndFrequency, pledgeDonations, pledgeOverdue } = + useGetPledgeOrDonation(appealStatus, contact, appealId ?? '', locale); const [{ isDragging }, drag, preview] = useDrag( () => ({ @@ -90,58 +129,113 @@ export const ContactFlowRow: React.FC = ({ preview(getEmptyImage(), { captureDraggingState: true }); }, []); - const pledgedAmount = useMemo(() => { - if (pledgeAmount && pledgeCurrency) { - return currencyFormat(pledgeAmount ?? 0, pledgeCurrency, locale); - } else { - return null; - } - }, [pledgeAmount, pledgeCurrency, locale]); + const handleEditContact = () => { + setPledgeModalOpen(true); + }; + const handleRemovePledge = () => { + setDeletePledgeModalOpen(true); + }; return ( - - - - - - - onContactSelected(id, true, true)}> - {name} - - - {getLocalizedContactStatus(t, contactStatus)} - - - - - - event.stopPropagation()} - onChange={() => onContactCheckToggle(contact.id)} + <> + + + + + - - - - - {pledgedAmount && ( - - {pledgedAmount} + + onContactSelected(id, true, true)}> + {name} + + + {getLocalizedContactStatus(t, contactStatus)} + + + + + + event.stopPropagation()} + onChange={() => onContactCheckToggle(contact.id)} + /> + - )} - - - + + + + + {appealStatus !== AppealStatusEnum.Processed && ( + + + + )} + + {appealStatus === AppealStatusEnum.Processed && + pledgeDonations?.map((donation, idx) => ( + + {amountAndFrequency} {donation} + + ))} + + + {(appealStatus === AppealStatusEnum.NotReceived || + appealStatus === AppealStatusEnum.Processed || + appealStatus === AppealStatusEnum.ReceivedNotProcessed) && ( + + + + + + + + + )} + + + + + + + {createPledgeModalOpen && ( + setPledgeModalOpen(false)} + pledge={pledgeValues} + /> + )} + {deletePledgeModalOpen && pledgeValues && ( + setDeletePledgeModalOpen(false)} + /> + )} + ); }; diff --git a/src/components/Tool/Appeal/List/ContactRow/ContactRow.test.tsx b/src/components/Tool/Appeal/List/ContactRow/ContactRow.test.tsx index d2bb921e6..d8381d50a 100644 --- a/src/components/Tool/Appeal/List/ContactRow/ContactRow.test.tsx +++ b/src/components/Tool/Appeal/List/ContactRow/ContactRow.test.tsx @@ -64,7 +64,8 @@ describe('ContactsRow', () => { const { getByText } = render(); expect(getByText('Test, Name')).toBeInTheDocument(); - expect(getByText('CA$500 Monthly')).toBeInTheDocument(); + expect(getByText('CA$500')).toBeInTheDocument(); + expect(getByText('Monthly')).toBeInTheDocument(); }); it('should render check event', async () => { @@ -111,7 +112,8 @@ describe('ContactsRow', () => { ); expect(getByText('Reason')).toBeInTheDocument(); - expect(getByText('CA$500 Monthly')).toBeInTheDocument(); + expect(getByText('CA$500')).toBeInTheDocument(); + expect(getByText('Monthly')).toBeInTheDocument(); }); it('Asked', () => { @@ -122,7 +124,8 @@ describe('ContactsRow', () => { ); expect(queryByText('Reason')).not.toBeInTheDocument(); - expect(getByText('CA$500 Monthly')).toBeInTheDocument(); + expect(getByText('CA$500')).toBeInTheDocument(); + expect(getByText('Monthly')).toBeInTheDocument(); }); it('Committed', () => { @@ -133,7 +136,8 @@ describe('ContactsRow', () => { ); expect(queryByText('Reason')).not.toBeInTheDocument(); - expect(getByText('$3,000 (Aug 8, 2024)')).toBeInTheDocument(); + expect(getByText('$3,000')).toBeInTheDocument(); + expect(getByText('(Aug 8, 2024)')).toBeInTheDocument(); }); it('Committed - with no pledges', () => { @@ -159,7 +163,8 @@ describe('ContactsRow', () => { ); expect(queryByText('Reason')).not.toBeInTheDocument(); - expect(getByText('$3,000 (Aug 8, 2024)')).toBeInTheDocument(); + expect(getByText('$3,000')).toBeInTheDocument(); + expect(getByText('(Aug 8, 2024)')).toBeInTheDocument(); }); it('Given', () => { diff --git a/src/components/Tool/Appeal/List/ContactRow/ContactRow.tsx b/src/components/Tool/Appeal/List/ContactRow/ContactRow.tsx index 2fd26f4ed..13340e5d6 100644 --- a/src/components/Tool/Appeal/List/ContactRow/ContactRow.tsx +++ b/src/components/Tool/Appeal/List/ContactRow/ContactRow.tsx @@ -18,7 +18,7 @@ import { StyledCheckbox, } from 'src/components/Contacts/ContactRow/ContactRow'; import { preloadContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/DynamicContactsRightPanel'; -import { useGetPledgeOrDonation } from 'src/hooks/useGetPledgeOrDonation'; +import { useGetPledgeOrDonation } from 'src/components/Tool/Appeal/Shared/useGetPledgeOrDonation/useGetPledgeOrDonation'; import { useLocale } from 'src/hooks/useLocale'; import theme from 'src/theme'; import { @@ -43,6 +43,7 @@ import { DynamicPledgeModal, preloadPledgeModal, } from '../../Modals/PledgeModal/DynamicPledgeModal'; +import { AmountAndFrequency } from '../../Shared/AmountAndFrequency/AmountAndFrequency'; // When making changes in this file, also check to see if you don't need to make changes to the below file // src/components/Contacts/ContactRow/ContactRow.tsx @@ -91,7 +92,7 @@ export const ContactRow: React.FC = ({ const { id: contactId, name } = contact; - const { pledgeValues, amountAndFrequency, pledgeDonations } = + const { pledgeValues, amountAndFrequency, pledgeDonations, pledgeOverdue } = useGetPledgeOrDonation(appealStatus, contact, appealId ?? '', locale); const handleCreatePledge = () => { @@ -188,7 +189,12 @@ export const ContactRow: React.FC = ({ justifyContent="center" > {appealStatus !== AppealStatusEnum.Processed && ( - {amountAndFrequency} + + + )} {appealStatus === AppealStatusEnum.Processed && diff --git a/src/components/Tool/Appeal/Shared/AmountAndFrequency/AmountAndFrequency.tsx b/src/components/Tool/Appeal/Shared/AmountAndFrequency/AmountAndFrequency.tsx new file mode 100644 index 000000000..810c59117 --- /dev/null +++ b/src/components/Tool/Appeal/Shared/AmountAndFrequency/AmountAndFrequency.tsx @@ -0,0 +1,25 @@ +import { UseGetPledgeOrDonation } from 'src/components/Tool/Appeal/Shared/useGetPledgeOrDonation/useGetPledgeOrDonation'; +import theme from 'src/theme'; + +export const AmountAndFrequency: React.FC< + Omit +> = ({ amountAndFrequency, pledgeOverdue }) => { + const amount = amountAndFrequency?.length ? amountAndFrequency[0] : ''; + const dateString = + amountAndFrequency?.length === 2 ? ( + + {amountAndFrequency[1]} + + ) : ( + '' + ); + return ( + <> + {amount} {dateString} + + ); +}; diff --git a/src/hooks/useGetPledgeOrDonation.test.ts b/src/components/Tool/Appeal/Shared/useGetPledgeOrDonation/useGetPledgeOrDonation.test.ts similarity index 55% rename from src/hooks/useGetPledgeOrDonation.test.ts rename to src/components/Tool/Appeal/Shared/useGetPledgeOrDonation/useGetPledgeOrDonation.test.ts index 1889ac7fd..ca7c9be91 100644 --- a/src/hooks/useGetPledgeOrDonation.test.ts +++ b/src/components/Tool/Appeal/Shared/useGetPledgeOrDonation/useGetPledgeOrDonation.test.ts @@ -7,15 +7,10 @@ const appealId = 'appealId'; describe('useGetPledgeOrDonation', () => { it('returns the normal donation amount when in appeal status Asked', () => { const { result } = renderHook(() => - useGetPledgeOrDonation( - AppealStatusEnum.Asked, - defaultContact, - appealId, - 'en-US', - ), + useGetPledgeOrDonation(AppealStatusEnum.Asked, defaultContact, appealId), ); - expect(result.current.amountAndFrequency).toEqual('CA$500 Monthly'); + expect(result.current.amountAndFrequency).toEqual(['CA$500', 'Monthly']); expect(result.current.pledgeDonations).toBeNull(); expect(result.current.pledgeValues).toBeUndefined(); @@ -27,11 +22,10 @@ describe('useGetPledgeOrDonation', () => { AppealStatusEnum.Excluded, defaultContact, appealId, - 'en-US', ), ); - expect(result.current.amountAndFrequency).toEqual('CA$500 Monthly'); + expect(result.current.amountAndFrequency).toEqual(['CA$500', 'Monthly']); expect(result.current.pledgeDonations).toBeNull(); expect(result.current.pledgeValues).toBeUndefined(); @@ -43,11 +37,13 @@ describe('useGetPledgeOrDonation', () => { AppealStatusEnum.NotReceived, defaultContact, appealId, - 'en-US', ), ); - expect(result.current.amountAndFrequency).toEqual('$3,000 (Aug 8, 2024)'); + expect(result.current.amountAndFrequency).toEqual([ + '$3,000', + '(Aug 8, 2024)', + ]); expect(result.current.pledgeDonations).toBeNull(); expect(result.current.pledgeValues).toEqual({ @@ -65,11 +61,13 @@ describe('useGetPledgeOrDonation', () => { AppealStatusEnum.ReceivedNotProcessed, defaultContact, appealId, - 'en-US', ), ); - expect(result.current.amountAndFrequency).toEqual('$3,000 (Aug 8, 2024)'); + expect(result.current.amountAndFrequency).toEqual([ + '$3,000', + '(Aug 8, 2024)', + ]); expect(result.current.pledgeDonations).toBeNull(); expect(result.current.pledgeValues).toEqual({ @@ -87,11 +85,10 @@ describe('useGetPledgeOrDonation', () => { AppealStatusEnum.Processed, defaultContact, appealId, - 'en-US', ), ); - expect(result.current.amountAndFrequency).toEqual('$3,000'); + expect(result.current.amountAndFrequency).toEqual(['$3,000']); expect(result.current.pledgeDonations).toEqual(['($50) (Jun 25, 2019)']); expect(result.current.pledgeValues).toEqual({ @@ -102,4 +99,58 @@ describe('useGetPledgeOrDonation', () => { id: 'pledge-1', }); }); + + describe('pledgeOverdue', () => { + it('returns an overdue date when appeal status Received', () => { + const contact = { + ...defaultContact, + pledges: [ + { + id: 'pledge-1', + amount: 3000, + amountCurrency: 'USD', + appeal: { + id: 'appealId', + }, + expectedDate: '2001-08-08', + }, + ], + }; + const { result } = renderHook(() => + useGetPledgeOrDonation(AppealStatusEnum.NotReceived, contact, appealId), + ); + expect(result.current.amountAndFrequency).toEqual([ + '$3,000', + '(Aug 8, 2001)', + ]); + expect(result.current.pledgeOverdue).toEqual(true); + }); + + it('returns an overdue date when appeal status Given', () => { + const contact = { + ...defaultContact, + donations: { + nodes: [ + { + id: 'donation-3', + appeal: { + id: 'appealId', + }, + donationDate: '2001-06-25', + appealAmount: { + amount: 50, + convertedAmount: 50, + convertedCurrency: 'USD', + }, + }, + ], + }, + }; + const { result } = renderHook(() => + useGetPledgeOrDonation(AppealStatusEnum.Processed, contact, appealId), + ); + expect(result.current.pledgeDonations).toEqual(['($50) (Jun 25, 2001)']); + expect(result.current.pledgeOverdue).toEqual(false); + }); + }); }); diff --git a/src/hooks/useGetPledgeOrDonation.ts b/src/components/Tool/Appeal/Shared/useGetPledgeOrDonation/useGetPledgeOrDonation.ts similarity index 77% rename from src/hooks/useGetPledgeOrDonation.ts rename to src/components/Tool/Appeal/Shared/useGetPledgeOrDonation/useGetPledgeOrDonation.ts index 6d464f6c4..c728b867a 100644 --- a/src/hooks/useGetPledgeOrDonation.ts +++ b/src/components/Tool/Appeal/Shared/useGetPledgeOrDonation/useGetPledgeOrDonation.ts @@ -7,6 +7,7 @@ import { AppealContactInfoFragment } from 'src/components/Tool/Appeal/AppealsCon import { PledgeFrequencyEnum } from 'src/graphql/types.generated'; import { currencyFormat, dateFormat } from 'src/lib/intlFormat'; import { getLocalizedPledgeFrequency } from 'src/utils/functions/getLocalizedPledgeFrequency'; +import { useLocale } from '../../../../../hooks/useLocale'; type FormatPledgeOrDonationProps = { amount?: number | null; @@ -30,6 +31,18 @@ const formatPledgeOrDonation = ({ ? currencyFormat(amount, currency, locale) : amount || currencyFormat(0, currency, locale); + let pledgeOverdue = false; + if ( + (appealStatus === AppealStatusEnum.NotReceived || + appealStatus === AppealStatusEnum.ReceivedNotProcessed) && + dateOrFrequency + ) { + const date = DateTime.fromISO(dateOrFrequency).startOf('day'); + if (date <= DateTime.local().startOf('day')) { + pledgeOverdue = true; + } + } + const pledgeOrDonationDate = appealStatus === AppealStatusEnum.Asked || appealStatus === AppealStatusEnum.Excluded @@ -45,21 +58,29 @@ const formatPledgeOrDonation = ({ return { amount: pledgeOrDonationAmount, dateOrFrequency: pledgeOrDonationDate, + pledgeOverdue, }; }; +export interface UseGetPledgeOrDonation { + pledgeValues: AppealContactInfoFragment['pledges'][0] | undefined; + amountAndFrequency: string[] | undefined; + pledgeDonations: string[] | null; + pledgeOverdue: boolean; +} // The return value doesn't change until `delay` milliseconds have elapsed since the last time `value` changed export const useGetPledgeOrDonation = ( appealStatus: AppealStatusEnum, contact: AppealContactInfoFragment, appealId: string, - locale: string, -) => { +): UseGetPledgeOrDonation => { + const locale = useLocale(); const { t } = useTranslation(); const [pledgeValues, setPledgeValues] = useState(); - const [amountAndFrequency, setAmountAndFrequency] = useState(); + const [amountAndFrequency, setAmountAndFrequency] = useState(); const [pledgeDonations, setPledgeDonations] = useState(null); + const [pledgeOverdue, setPledgeOverdue] = useState(false); useEffect(() => { const { @@ -82,7 +103,7 @@ export const useGetPledgeOrDonation = ( locale, t, }); - setAmountAndFrequency(`${amount} ${dateOrFrequency}`); + setAmountAndFrequency([`${amount}`, `${dateOrFrequency}`]); setPledgeValues(undefined); } else if ( appealStatus === AppealStatusEnum.NotReceived || @@ -93,7 +114,11 @@ export const useGetPledgeOrDonation = ( ); if (appealPledge) { - const { amount, dateOrFrequency } = formatPledgeOrDonation({ + const { + amount, + dateOrFrequency, + pledgeOverdue: overdue, + } = formatPledgeOrDonation({ amount: appealPledge?.amount, currency: appealPledge.amountCurrency, appealStatus, @@ -103,9 +128,10 @@ export const useGetPledgeOrDonation = ( }); setPledgeValues(appealPledge); - setAmountAndFrequency(`${amount} (${dateOrFrequency})`); + setAmountAndFrequency([`${amount}`, `(${dateOrFrequency})`]); + setPledgeOverdue(overdue); } else { - setAmountAndFrequency(`${currencyFormat(0, 'USD', locale)}`); + setAmountAndFrequency([`${currencyFormat(0, 'USD', locale)}`]); } } else if (appealStatus === AppealStatusEnum.Processed) { const appealPledge = pledges?.find( @@ -121,9 +147,9 @@ export const useGetPledgeOrDonation = ( t, }); setPledgeValues(appealPledge); - setAmountAndFrequency(`${amount}`); + setAmountAndFrequency([`${amount}`]); } else { - setAmountAndFrequency(`${currencyFormat(0, 'USD', locale)}`); + setAmountAndFrequency([`${currencyFormat(0, 'USD', locale)}`]); } // Currently we grab all the donations and filter them by the appeal id @@ -154,5 +180,5 @@ export const useGetPledgeOrDonation = ( } }, [appealStatus, contact, locale]); - return { pledgeValues, amountAndFrequency, pledgeDonations }; + return { pledgeValues, amountAndFrequency, pledgeDonations, pledgeOverdue }; };