diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.test.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.test.tsx index 0ea1d78067..ae42ef7d5c 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.test.tsx +++ b/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.test.tsx @@ -120,6 +120,7 @@ describe('PeriodsPaymentsContainer component', () => { return { component, + periodStartDateInput: () => document.querySelector('#datepicker-startDate') as HTMLElement, }; }; @@ -149,7 +150,8 @@ describe('PeriodsPaymentsContainer component', () => { try { mockGetLeasePeriods.response = []; const { - component: { getAllByText, getByDisplayValue }, + component: { getAllByText }, + periodStartDateInput, } = await setup({ claims: [Claims.LEASE_EDIT, Claims.LEASE_ADD] }); mockAxios.onPost().reply(200, { id: 1 }); @@ -158,7 +160,48 @@ describe('PeriodsPaymentsContainer component', () => { userEvent.click(addButton); }); - expect(getByDisplayValue('Jan 01, 2020')).toBeVisible(); + expect(periodStartDateInput()).toHaveValue('Jan 01, 2020'); + } finally { + mockGetLeasePeriods.response = temp; + } + }); + + it('when adding a new sequential period, the start date is set to one day after the previous period expiry date', async () => { + const { + component: { getAllByText }, + periodStartDateInput, + } = await setup({ claims: [Claims.LEASE_EDIT, Claims.LEASE_ADD] }); + + const addButton = getAllByText('Add a Period')[0]; + await act(async () => { + userEvent.click(addButton); + }); + + expect(periodStartDateInput()).toHaveValue('Jan 02, 2020'); + }); + + it('when adding a new seqquential period, the start date is set to empty when previous period is flexible and no expiry date', async () => { + const temp = mockGetLeasePeriods.response; + try { + mockGetLeasePeriods.response = [ + FormLeasePeriod.toApi({ + ...defaultFormLeasePeriod, + isFlexible: 'true', + expiryDate: null, + payments: [], + }), + ]; + const { + component: { getAllByText }, + periodStartDateInput, + } = await setup({ claims: [Claims.LEASE_EDIT, Claims.LEASE_ADD] }); + + const addButton = getAllByText('Add a Period')[0]; + await act(async () => { + userEvent.click(addButton); + }); + + expect(periodStartDateInput()).toHaveValue(''); } finally { mockGetLeasePeriods.response = temp; } diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.tsx index 51927e6517..ebca956575 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.tsx +++ b/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.tsx @@ -1,5 +1,6 @@ import { FormikProps } from 'formik/dist/types'; import { find, noop } from 'lodash'; +import moment from 'moment'; import { useCallback, useContext, useEffect, useMemo, useState } from 'react'; import { FaExclamationCircle, FaPlusCircle } from 'react-icons/fa'; @@ -57,6 +58,7 @@ export const PeriodPaymentsContainer: React.FunctionComponent< }, [getLeasePeriodsFunc], ); + useDeepCompareEffect(() => { if (isValidId(leaseId)) { refreshLeasePeriods(leaseId); @@ -145,11 +147,20 @@ export const PeriodPaymentsContainer: React.FunctionComponent< isAdditionalRentGstEligible: isReceivableLease ? true : false, isVariableRentGstEligible: isReceivableLease ? true : false, }; + + if (getLeasePeriods?.response?.length > 0) { + const lastPeriod = getLeasePeriods?.response.slice(-1)[0]; + const startDate = isValidIsoDateTime(lastPeriod.expiryDate) + ? moment(lastPeriod.expiryDate).add(1, 'days') + : ''; + + values.startDate = startDate ? startDate.toISOString() : ''; + } } setEditModalValues(values); }, - [getLeasePeriods?.response?.length, lease?.paymentReceivableType?.id, lease.startDate], + [getLeasePeriods?.response, lease?.paymentReceivableType?.id, lease.startDate], ); const onEditPayment = useCallback((values: FormLeasePayment) => { @@ -178,6 +189,7 @@ export const PeriodPaymentsContainer: React.FunctionComponent< ), [editModalValues, formikRef, onSavePeriod, lease], ); + useEffect(() => { if (editModalValues) { setModalContent({