PSP-8746 | GST is modifiable for periods

source/frontend/src/components/common/form/Check.tsx

@@ -43,6 +43,7 @@ type OptionalAttributes = {
   toolTip?: string;
   /** id for tooltip */
   toolTipId?: string;
+  handleChange?: (field: string, value: boolean) => void;
 };
 
 // only "field" is required for <Check>, the rest are optional
@@ -67,6 +68,7 @@ export const Check: React.FC<React.PropsWithChildren<CheckProps>> = ({
   radioLabelTwo,
   toolTip,
   toolTipId,
+  handleChange,
   ...rest
 }) => {
   const { values, initialValues, setFieldValue, setFieldTouched, errors, touched, handleBlur } =
@@ -113,8 +115,10 @@ export const Check: React.FC<React.PropsWithChildren<CheckProps>> = ({
             onChange={() => {
               if (type !== 'radio') {
                 setFieldValue(field, !checked);
+                handleChange && handleChange(field, !checked);
               } else {
                 setFieldValue(field, true);
+                handleChange && handleChange(field, true);
               }
             }}
             onBlur={handleBlur}
@@ -137,6 +141,7 @@ export const Check: React.FC<React.PropsWithChildren<CheckProps>> = ({
               checked={checked === false}
               onChange={() => {
                 setFieldValue(field, false);
+                handleChange && handleChange(field, false);
               }}
               onBlur={handleBlur}
             />

source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.tsx

@@ -46,7 +46,6 @@ export const PeriodPaymentsContainer: React.FunctionComponent<
   const { updateLeasePayment, addLeasePayment } = useLeasePaymentRepository();
   const { getSystemConstant } = useSystemConstants();
   const gstConstant = getSystemConstant(SystemConstants.GST);
-  const gstDecimal = gstConstant !== undefined ? parseFloat(gstConstant.value) : undefined;
 
   const leaseId = lease?.id;
   const getLeasePeriodsFunc = getLeasePeriods.execute;
@@ -86,8 +85,8 @@ export const PeriodPaymentsContainer: React.FunctionComponent<
   const onSavePeriod = useCallback(
     async (values: FormLeasePeriod) => {
       const updatedPeriod = isValidId(values.id)
-        ? await updateLeasePeriod.execute(FormLeasePeriod.toApi(values, gstDecimal))
-        : await addLeasePeriod.execute(FormLeasePeriod.toApi(values, gstDecimal));
+        ? await updateLeasePeriod.execute(FormLeasePeriod.toApi(values))
+        : await addLeasePeriod.execute(FormLeasePeriod.toApi(values));
 
       if (isValidId(updatedPeriod?.id) && isValidId(leaseId)) {
         await getLeasePeriods.execute(leaseId);
@@ -96,15 +95,7 @@ export const PeriodPaymentsContainer: React.FunctionComponent<
         onSuccess();
       }
     },
-    [
-      addLeasePeriod,
-      getLeasePeriods,
-      gstDecimal,
-      leaseId,
-      updateLeasePeriod,
-      onSuccess,
-      setDisplayModal,
-    ],
+    [addLeasePeriod, getLeasePeriods, leaseId, updateLeasePeriod, onSuccess, setDisplayModal],
   );
 
   /**
@@ -185,9 +176,10 @@ export const PeriodPaymentsContainer: React.FunctionComponent<
         initialValues={editModalValues}
         onSave={onSavePeriod}
         lease={lease}
+        gstConstant={gstConstant}
       />
     ),
-    [editModalValues, formikRef, onSavePeriod, lease],
+    [formikRef, editModalValues, onSavePeriod, lease, gstConstant],
   );
 
   useEffect(() => {

source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.test.tsx

@@ -15,6 +15,7 @@ import {
 import { FormLeasePeriod, defaultFormLeasePeriod } from '../../models';
 import PeriodForm, { IPeriodFormProps } from './PeriodForm';
 import { createRef } from 'react';
+import { ISystemConstant } from '@/store/slices/systemConstants';
 
 const history = createMemoryHistory();
 const onSave = vi.fn();
@@ -32,6 +33,7 @@ describe('PeriodForm component', () => {
         formikRef={formikRef}
         initialValues={renderOptions?.initialValues ?? { ...defaultFormLeasePeriod }}
         lease={{} as any}
+        gstConstant={{ name: 'gstDecimal', value: '0.05' }}
       />,
       {
         ...renderOptions,

source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.tsx

@@ -20,6 +20,9 @@ import * as API from '@/constants/API';
 import { LeasePeriodStatusTypes } from '@/constants/leaseStatusTypes';
 import useLookupCodeHelpers from '@/hooks/useLookupCodeHelpers';
 import { ApiGen_Concepts_Lease } from '@/models/api/generated/ApiGen_Concepts_Lease';
+import { ISystemConstant } from '@/store/slices/systemConstants';
+import { NumberFieldValue } from '@/typings/NumberFieldValue';
+import { formatMoney, round } from '@/utils';
 import { toTypeCodeNullable } from '@/utils/formUtils';
 
 import { defaultFormLeasePeriod, FormLeasePeriod } from '../../models';
@@ -32,6 +35,7 @@ export interface IPeriodFormProps {
   onSave: (values: FormLeasePeriod) => void;
   initialValues?: FormLeasePeriod;
   lease: ApiGen_Concepts_Lease | undefined;
+  gstConstant: ISystemConstant;
 }
 
 /**
@@ -44,6 +48,7 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
   formikRef,
   onSave,
   lease,
+  gstConstant,
 }) => {
   const [displayWarningModal, setDisplayWarningModal] = useState(false);
   const lookups = useLookupCodeHelpers();
@@ -64,6 +69,24 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
     },
   ];
 
+  const initialGstAmount = initialValues.gstAmount;
+
+  const onGstCheckChange = (formikState: FormikProps<FormLeasePeriod>, values: boolean) => {
+    if (values === true) {
+      const gstDecimal = gstConstant !== undefined ? parseFloat(gstConstant.value) : 5;
+
+      const calculated = round((formikState.values.paymentAmount as number) * (gstDecimal / 100));
+      formikState.setFieldValue('gstAmount', calculated);
+    } else {
+      formikState.setFieldValue('gstAmount', '');
+    }
+  };
+
+  const calculateTotal = (amount: NumberFieldValue, gstAmount: NumberFieldValue): number => {
+    const total = Number(amount) + Number(gstAmount);
+    return isNaN(total) ? 0 : total;
+  };
+
   return (
     <>
       <Formik<FormLeasePeriod>
@@ -148,7 +171,7 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
                     <Col>
                       <FastCurrencyInput
                         formikProps={formikProps}
-                        label="Agreed payment ($)"
+                        label="Payment (before tax)"
                         field="paymentAmount"
                       />
                     </Col>
@@ -168,9 +191,36 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
                         radioLabelOne="Y"
                         radioLabelTwo="N"
                         type="radio"
+                        handleChange={(field, value) => onGstCheckChange(formikProps, value)}
                       />
+                      {initialGstAmount !== formikProps.values.gstAmount &&
+                        formikProps.values.isGstEligible === false && (
+                          <StyledRedCol className="pt-4">
+                            You have selected to remove subject to GST. GST amount previously added
+                            will be removed.
+                          </StyledRedCol>
+                        )}
                     </Col>
                   </Row>
+                  {formikProps.values.isGstEligible === true && (
+                    <Row>
+                      <Col xs="6">
+                        <FastCurrencyInput
+                          formikProps={formikProps}
+                          label="GST Ammount"
+                          field="gstAmount"
+                        />
+                      </Col>
+                    </Row>
+                  )}
+                  <SectionField label="Total Payment" labelWidth="auto">
+                    {formatMoney(
+                      calculateTotal(
+                        formikProps.values.paymentAmount,
+                        formikProps.values.gstAmount,
+                      ),
+                    )}
+                  </SectionField>
                   <Row>
                     <Col md={6}>
                       <Select
@@ -220,6 +270,8 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
                       frequencyField="leasePmtFreqTypeCode"
                       isGstEligibleField="isGstEligible"
                       paymentAmountField="paymentAmount"
+                      gstAmountField="gstAmount"
+                      gstConstant={gstConstant}
                     />
                   </StyledSection>
                   <StyledSection
@@ -239,6 +291,8 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
                       frequencyField="additionalRentFreqTypeCode"
                       isGstEligibleField="isAdditionalRentGstEligible"
                       paymentAmountField="additionalRentPaymentAmount"
+                      gstAmountField="additionalGstAmount"
+                      gstConstant={gstConstant}
                     />
                   </StyledSection>
                   <StyledSection
@@ -258,6 +312,8 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
                       frequencyField="variableRentFreqTypeCode"
                       isGstEligibleField="isVariableRentGstEligible"
                       paymentAmountField="variableRentPaymentAmount"
+                      gstAmountField="variableGstAmount"
+                      gstConstant={gstConstant}
                     />
                   </StyledSection>
                 </>
@@ -304,4 +360,8 @@ const StyledRadioGroup = styled(RadioGroup)`
   }
 `;
 
+const StyledRedCol = styled(Col)`
+  color: red;
+`;
+
 export default PeriodForm;

source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/VariablePeriodSubForm.tsx

@@ -1,25 +1,55 @@
-import { useFormikContext } from 'formik';
+import { getIn, useFormikContext } from 'formik';
 import * as React from 'react';
 import { Col, Row } from 'react-bootstrap';
+import styled from 'styled-components';
 
 import { Check, FastCurrencyInput, Select } from '@/components/common/form';
+import { SectionField } from '@/components/common/Section/SectionField';
 import * as API from '@/constants/API';
 import useLookupCodeHelpers from '@/hooks/useLookupCodeHelpers';
+import { ISystemConstant } from '@/store/slices/systemConstants';
+import { NumberFieldValue } from '@/typings/NumberFieldValue';
+import { formatMoney, round } from '@/utils';
+
+import { FormLeasePeriod } from '../../models';
 
 interface IVariablePeriodSubFormProps {
   frequencyField: string;
   paymentAmountField: string;
   isGstEligibleField: string;
+  gstAmountField: string;
+  gstConstant: ISystemConstant;
 }
 
 const VariablePeriodSubForm: React.FunctionComponent<IVariablePeriodSubFormProps> = ({
   frequencyField,
   paymentAmountField,
   isGstEligibleField,
+  gstAmountField,
+  gstConstant,
 }) => {
-  const formikProps = useFormikContext();
+  const formikProps = useFormikContext<FormLeasePeriod>();
   const lookups = useLookupCodeHelpers();
   const paymentFrequencyOptions = lookups.getOptionsByType(API.LEASE_PAYMENT_FREQUENCY_TYPES);
+
+  const onGstCheckChange = (field: string, values: boolean) => {
+    if (values === true) {
+      const gstDecimal = gstConstant !== undefined ? parseFloat(gstConstant.value) : 5;
+      const calculated = round(
+        (getIn(formikProps.values, paymentAmountField) as number) * (gstDecimal / 100),
+      );
+      formikProps.setFieldValue(gstAmountField, calculated);
+    } else {
+      formikProps.setFieldValue(gstAmountField, '');
+    }
+  };
+
+  const calculateTotal = (amount: NumberFieldValue, gstAmount: NumberFieldValue): number => {
+    const total = Number(amount) + Number(gstAmount);
+    return isNaN(total) ? 0 : total;
+  };
+
+  const initialGstAmount = getIn(formikProps.initialValues, gstAmountField) ?? '';
   return (
     <>
       <Row>
@@ -36,7 +66,7 @@ const VariablePeriodSubForm: React.FunctionComponent<IVariablePeriodSubFormProps
         <Col>
           <FastCurrencyInput
             formikProps={formikProps}
-            label="Agreed payment ($)"
+            label="Payment (before tax)"
             field={paymentAmountField}
           />
         </Col>
@@ -47,11 +77,42 @@ const VariablePeriodSubForm: React.FunctionComponent<IVariablePeriodSubFormProps
             radioLabelOne="Y"
             radioLabelTwo="N"
             type="radio"
+            handleChange={onGstCheckChange}
           />
+          {initialGstAmount !== getIn(formikProps.values, gstAmountField) &&
+            getIn(formikProps.values, isGstEligibleField) === false && (
+              <StyledRedCol className="pt-4">
+                You have selected to remove subject to GST. GST amount previously added will be
+                removed.
+              </StyledRedCol>
+            )}
         </Col>
       </Row>
+      {getIn(formikProps.values, isGstEligibleField) === true && (
+        <Row>
+          <Col xs="6">
+            <FastCurrencyInput
+              formikProps={formikProps}
+              label="GST Ammount"
+              field={gstAmountField}
+            />
+          </Col>
+        </Row>
+      )}
+      <SectionField label="Total Payment" labelWidth="auto">
+        {formatMoney(
+          calculateTotal(
+            getIn(formikProps.values, paymentAmountField),
+            getIn(formikProps.values, gstAmountField),
+          ),
+        )}
+      </SectionField>
     </>
   );
 };
 
 export default VariablePeriodSubForm;
+
+const StyledRedCol = styled(Col)`
+  color: red;
+`;

source/frontend/src/features/leases/detail/LeasePages/payment/models.test.ts

@@ -41,8 +41,10 @@ describe('payments model tests', () => {
         variableRentPaymentAmount: 1,
         additionalRentPaymentAmount: 1,
         paymentAmount: 1,
+        gstAmount: 7,
+        variableRentGstAmount: 8,
+        additionalRentGstAmount: 9
       } as FormLeasePeriod,
-      5,
     );
     expect(model.gstAmount).toBe(null);
     expect(model.variableRentGstAmount).toBe(null);
@@ -59,11 +61,13 @@ describe('payments model tests', () => {
         variableRentPaymentAmount: 1,
         additionalRentPaymentAmount: 1,
         paymentAmount: 1,
+        gstAmount: 7,
+        variableRentGstAmount: 8,
+        additionalRentGstAmount: 9
       } as FormLeasePeriod,
-      5,
     );
-    expect(model.gstAmount).toBe(0.05);
-    expect(model.variableRentGstAmount).toBe(0.05);
-    expect(model.additionalRentGstAmount).toBe(0.05);
+    expect(model.gstAmount).toBe(7);
+    expect(model.variableRentGstAmount).toBe(8);
+    expect(model.additionalRentGstAmount).toBe(9);
   });
 });