From 8baffea673893da837edca73b4cbb819c05cb2d8 Mon Sep 17 00:00:00 2001
From: Manuel Rodriguez <marobej@gmail.com>
Date: Wed, 24 Jul 2024 08:42:32 -0700
Subject: [PATCH 1/5] Added gst input to fixed payments and updated check
 component to have a handler

---
 .../src/components/common/form/Check.tsx      |  5 ++++
 .../payment/modal/period/PeriodForm.tsx       | 26 +++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/source/frontend/src/components/common/form/Check.tsx b/source/frontend/src/components/common/form/Check.tsx
index d3ac6a5355..8975c44511 100644
--- a/source/frontend/src/components/common/form/Check.tsx
+++ b/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(field, !checked);
               } else {
                 setFieldValue(field, true);
+                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(field, false);
               }}
               onBlur={handleBlur}
             />
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.tsx
index cbf99141a1..f043d2e686 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.tsx
@@ -20,6 +20,7 @@ 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 { round } from '@/utils';
 import { toTypeCodeNullable } from '@/utils/formUtils';
 
 import { defaultFormLeasePeriod, FormLeasePeriod } from '../../models';
@@ -64,6 +65,23 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
     },
   ];
 
+  const onGstCheckChange = (
+    formikState: FormikProps<FormLeasePeriod>,
+    field: string,
+    values: boolean,
+  ) => {
+    console.log(field, values);
+    if (values === true) {
+      const gstConstant = 8;
+      const calculated = round((formikState.values.paymentAmount as number) * (gstConstant / 100));
+      formikState.setFieldValue('gstAmount', calculated);
+      console.log(calculated);
+      console.log(formikRef);
+    } else {
+      formikState.setFieldValue('gstAmount', null);
+    }
+  };
+
   return (
     <>
       <Formik<FormLeasePeriod>
@@ -168,9 +186,17 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
                         radioLabelOne="Y"
                         radioLabelTwo="N"
                         type="radio"
+                        handleChange={(field, value) => onGstCheckChange(formikProps, field, value)}
                       />
                     </Col>
                   </Row>
+                  {formikProps.values.isGstEligible === true && (
+                    <Row>
+                      <Col xs="6">
+                        <Input label="Gst Ammount" field="gstAmount" />
+                      </Col>
+                    </Row>
+                  )}
                   <Row>
                     <Col md={6}>
                       <Select

From 9c6a7e4ea6cfbafb7a184ece7a59d2efd1096922 Mon Sep 17 00:00:00 2001
From: FuriousLlama <marobej@gmail.com>
Date: Wed, 24 Jul 2024 15:22:09 -0700
Subject: [PATCH 2/5] Added gst calculation for periods and warning note

---
 .../payment/PeriodPaymentsContainer.tsx       |  3 +-
 .../payment/modal/period/PeriodForm.tsx       | 55 ++++++++++++---
 .../modal/period/VariablePeriodSubForm.tsx    | 67 ++++++++++++++++++-
 .../detail/LeasePages/payment/models.ts       | 25 +++----
 4 files changed, 121 insertions(+), 29 deletions(-)

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 ebca956575..4ae2306d19 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.tsx
@@ -185,9 +185,10 @@ export const PeriodPaymentsContainer: React.FunctionComponent<
         initialValues={editModalValues}
         onSave={onSavePeriod}
         lease={lease}
+        gstConstant={gstConstant}
       />
     ),
-    [editModalValues, formikRef, onSavePeriod, lease],
+    [formikRef, editModalValues, onSavePeriod, lease, gstConstant],
   );
 
   useEffect(() => {
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.tsx
index f043d2e686..9618276905 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.tsx
@@ -20,7 +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 { round } from '@/utils';
+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';
@@ -33,6 +35,7 @@ export interface IPeriodFormProps {
   onSave: (values: FormLeasePeriod) => void;
   initialValues?: FormLeasePeriod;
   lease: ApiGen_Concepts_Lease | undefined;
+  gstConstant: ISystemConstant;
 }
 
 /**
@@ -45,6 +48,7 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
   formikRef,
   onSave,
   lease,
+  gstConstant,
 }) => {
   const [displayWarningModal, setDisplayWarningModal] = useState(false);
   const lookups = useLookupCodeHelpers();
@@ -65,23 +69,27 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
     },
   ];
 
+  const initialGstAmount = initialValues.gstAmount;
+
   const onGstCheckChange = (
     formikState: FormikProps<FormLeasePeriod>,
     field: string,
     values: boolean,
   ) => {
-    console.log(field, values);
     if (values === true) {
-      const gstConstant = 8;
-      const calculated = round((formikState.values.paymentAmount as number) * (gstConstant / 100));
+      const gstDecimal = gstConstant !== undefined ? parseFloat(gstConstant.value) : undefined;
+      const calculated = round((formikState.values.paymentAmount as number) * (gstDecimal / 100));
       formikState.setFieldValue('gstAmount', calculated);
-      console.log(calculated);
-      console.log(formikRef);
     } else {
-      formikState.setFieldValue('gstAmount', null);
+      formikState.setFieldValue('gstAmount', '');
     }
   };
 
+  const calculateTotal = (amount: NumberFieldValue, gstAmount: NumberFieldValue): number => {
+    const total = Number(amount) + Number(gstAmount);
+    return isNaN(total) ? 0 : total;
+  };
+
   return (
     <>
       <Formik<FormLeasePeriod>
@@ -166,7 +174,7 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
                     <Col>
                       <FastCurrencyInput
                         formikProps={formikProps}
-                        label="Agreed payment ($)"
+                        label="Payment (before tax)"
                         field="paymentAmount"
                       />
                     </Col>
@@ -188,15 +196,34 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
                         type="radio"
                         handleChange={(field, value) => onGstCheckChange(formikProps, field, 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">
-                        <Input label="Gst Ammount" field="gstAmount" />
+                        <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
@@ -246,6 +273,8 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
                       frequencyField="leasePmtFreqTypeCode"
                       isGstEligibleField="isGstEligible"
                       paymentAmountField="paymentAmount"
+                      gstAmountField="gstAmount"
+                      gstConstant={gstConstant}
                     />
                   </StyledSection>
                   <StyledSection
@@ -265,6 +294,8 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
                       frequencyField="additionalRentFreqTypeCode"
                       isGstEligibleField="isAdditionalRentGstEligible"
                       paymentAmountField="additionalRentPaymentAmount"
+                      gstAmountField="additionalGstAmount"
+                      gstConstant={gstConstant}
                     />
                   </StyledSection>
                   <StyledSection
@@ -284,6 +315,8 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
                       frequencyField="variableRentFreqTypeCode"
                       isGstEligibleField="isVariableRentGstEligible"
                       paymentAmountField="variableRentPaymentAmount"
+                      gstAmountField="variableGstAmount"
+                      gstConstant={gstConstant}
                     />
                   </StyledSection>
                 </>
@@ -330,4 +363,8 @@ const StyledRadioGroup = styled(RadioGroup)`
   }
 `;
 
+const StyledRedCol = styled(Col)`
+  color: red;
+`;
+
 export default PeriodForm;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/VariablePeriodSubForm.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/VariablePeriodSubForm.tsx
index cb8cf6f5fa..aa4fa82ee5 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/VariablePeriodSubForm.tsx
+++ b/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) : undefined;
+      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;
+`;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/models.ts b/source/frontend/src/features/leases/detail/LeasePages/payment/models.ts
index 7aaf8fb545..57619ab9a3 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/models.ts
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/models.ts
@@ -4,7 +4,7 @@ import { ApiGen_Concepts_LeasePeriod } from '@/models/api/generated/ApiGen_Conce
 import { ApiGen_Concepts_Payment } from '@/models/api/generated/ApiGen_Concepts_Payment';
 import { getEmptyBaseAudit } from '@/models/defaultInitializers';
 import { NumberFieldValue } from '@/typings/NumberFieldValue';
-import { isValidIsoDateTime, round } from '@/utils';
+import { isValidIsoDateTime } from '@/utils';
 import { stringToNumber, stringToNumberOrNull } from '@/utils/formUtils';
 
 import { ApiGen_CodeTypes_LeasePaymentCategoryTypes } from './../../../../../models/api/generated/ApiGen_CodeTypes_LeasePaymentCategoryTypes';
@@ -37,10 +37,7 @@ export class FormLeasePeriod {
   payments: FormLeasePayment[] = [];
   rowVersion?: number;
 
-  public static toApi(
-    formLeasePeriod: FormLeasePeriod,
-    gstConstant?: number,
-  ): ApiGen_Concepts_LeasePeriod {
+  public static toApi(formLeasePeriod: FormLeasePeriod): ApiGen_Concepts_LeasePeriod {
     return {
       ...formLeasePeriod,
       isFlexible: formLeasePeriod.isFlexible === 'true',
@@ -57,19 +54,15 @@ export class FormLeasePeriod {
       ),
       variableRentPaymentAmount: stringToNumberOrNull(formLeasePeriod.variableRentPaymentAmount),
       gstAmount: stringToNumberOrNull(
-        formLeasePeriod.isGstEligible && gstConstant !== undefined
-          ? round((formLeasePeriod.paymentAmount as number) * (gstConstant / 100))
-          : null,
+        formLeasePeriod.isGstEligible ? formLeasePeriod.gstAmount : null,
       ),
       additionalRentGstAmount: stringToNumberOrNull(
-        formLeasePeriod.isAdditionalRentGstEligible && gstConstant !== undefined
-          ? round((formLeasePeriod.additionalRentPaymentAmount as number) * (gstConstant / 100))
+        formLeasePeriod.isAdditionalRentGstEligible
+          ? formLeasePeriod.additionalRentGstAmount
           : null,
       ),
       variableRentGstAmount: stringToNumberOrNull(
-        formLeasePeriod.isVariableRentGstEligible && gstConstant !== undefined
-          ? round((formLeasePeriod.variableRentPaymentAmount as number) * (gstConstant / 100))
-          : null,
+        formLeasePeriod.isVariableRentGstEligible ? formLeasePeriod.variableRentGstAmount : null,
       ),
       leasePmtFreqTypeCode: formLeasePeriod.leasePmtFreqTypeCode?.id
         ? formLeasePeriod.leasePmtFreqTypeCode
@@ -224,7 +217,7 @@ export class LeasePeriodByCategoryProjection {
     this.leasePmtFreqTypeCode = leasePeriod?.leasePmtFreqTypeCode ?? null;
     this.paymentAmount = leasePeriod?.paymentAmount ?? 0;
     this.isGstEligible = leasePeriod?.isGstEligible;
-    this.gstAmount = leasePeriod?.gstAmount ?? 0;
+    this.gstAmount = leasePeriod?.gstAmount ?? '';
     this.payments = leasePeriod?.payments ?? [];
     this.isTermExercised = leasePeriod?.isTermExercised;
     this.category = category ?? ApiGen_CodeTypes_LeasePaymentCategoryTypes.BASE;
@@ -233,12 +226,12 @@ export class LeasePeriodByCategoryProjection {
       this.isGstEligible = leasePeriod?.isAdditionalRentGstEligible;
       this.paymentAmount = leasePeriod?.additionalRentPaymentAmount ?? 0;
       this.leasePmtFreqTypeCode = leasePeriod?.additionalRentFreqTypeCode ?? null;
-      this.gstAmount = leasePeriod?.additionalRentGstAmount ?? 0;
+      this.gstAmount = leasePeriod?.additionalRentGstAmount ?? '';
     } else if (category === ApiGen_CodeTypes_LeasePaymentCategoryTypes.VBL) {
       this.isGstEligible = leasePeriod?.isVariableRentGstEligible;
       this.paymentAmount = leasePeriod?.variableRentPaymentAmount ?? 0;
       this.leasePmtFreqTypeCode = leasePeriod?.variableRentFreqTypeCode ?? null;
-      this.gstAmount = leasePeriod?.variableRentGstAmount ?? 0;
+      this.gstAmount = leasePeriod?.variableRentGstAmount ?? '';
     }
   }
 }

From 4c5cc4a7fc325ccac128a44f77269a31b3755e08 Mon Sep 17 00:00:00 2001
From: Manuel Rodriguez <marobej@gmail.com>
Date: Wed, 24 Jul 2024 22:14:40 -0700
Subject: [PATCH 3/5] Fixed tests

---
 .../frontend/src/components/common/form/Check.tsx  |  6 +++---
 .../LeasePages/payment/PeriodPaymentsContainer.tsx | 14 +++-----------
 .../payment/modal/period/PeriodForm.test.tsx       |  2 ++
 .../detail/LeasePages/payment/models.test.ts       | 14 +++++++++-----
 4 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/source/frontend/src/components/common/form/Check.tsx b/source/frontend/src/components/common/form/Check.tsx
index 8975c44511..1176956e79 100644
--- a/source/frontend/src/components/common/form/Check.tsx
+++ b/source/frontend/src/components/common/form/Check.tsx
@@ -115,10 +115,10 @@ export const Check: React.FC<React.PropsWithChildren<CheckProps>> = ({
             onChange={() => {
               if (type !== 'radio') {
                 setFieldValue(field, !checked);
-                handleChange(field, !checked);
+                handleChange && handleChange(field, !checked);
               } else {
                 setFieldValue(field, true);
-                handleChange(field, true);
+                handleChange && handleChange(field, true);
               }
             }}
             onBlur={handleBlur}
@@ -141,7 +141,7 @@ export const Check: React.FC<React.PropsWithChildren<CheckProps>> = ({
               checked={checked === false}
               onChange={() => {
                 setFieldValue(field, false);
-                handleChange(field, false);
+                handleChange && handleChange(field, false);
               }}
               onBlur={handleBlur}
             />
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 4ae2306d19..f8cd22538b 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.tsx
@@ -86,8 +86,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 +96,7 @@ export const PeriodPaymentsContainer: React.FunctionComponent<
         onSuccess();
       }
     },
-    [
-      addLeasePeriod,
-      getLeasePeriods,
-      gstDecimal,
-      leaseId,
-      updateLeasePeriod,
-      onSuccess,
-      setDisplayModal,
-    ],
+    [addLeasePeriod, getLeasePeriods, leaseId, updateLeasePeriod, onSuccess, setDisplayModal],
   );
 
   /**
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.test.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.test.tsx
index d5369d63e4..9229e21753 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.test.tsx
+++ b/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,
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/models.test.ts b/source/frontend/src/features/leases/detail/LeasePages/payment/models.test.ts
index 7c2f3b75df..42f575b6ee 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/models.test.ts
+++ b/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);
   });
 });

From c27062bc24af618e05931b84fe62b2cffc122d4c Mon Sep 17 00:00:00 2001
From: FuriousLlama <marobej@gmail.com>
Date: Thu, 25 Jul 2024 10:54:01 -0700
Subject: [PATCH 4/5] Fixed warnings

---
 .../leases/detail/LeasePages/payment/PeriodPaymentsContainer.tsx | 1 -
 1 file changed, 1 deletion(-)

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 f8cd22538b..c472947f7b 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.tsx
+++ b/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;

From 40ea454a55e222a2029752a1a1fc0e5cbbe430bd Mon Sep 17 00:00:00 2001
From: Manuel Rodriguez <marobej@gmail.com>
Date: Fri, 26 Jul 2024 08:53:36 -0700
Subject: [PATCH 5/5] PR fixes

---
 .../LeasePages/payment/modal/period/PeriodForm.tsx    | 11 ++++-------
 .../payment/modal/period/VariablePeriodSubForm.tsx    |  2 +-
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.tsx
index 9618276905..584733cd43 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/PeriodForm.tsx
@@ -71,13 +71,10 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
 
   const initialGstAmount = initialValues.gstAmount;
 
-  const onGstCheckChange = (
-    formikState: FormikProps<FormLeasePeriod>,
-    field: string,
-    values: boolean,
-  ) => {
+  const onGstCheckChange = (formikState: FormikProps<FormLeasePeriod>, values: boolean) => {
     if (values === true) {
-      const gstDecimal = gstConstant !== undefined ? parseFloat(gstConstant.value) : undefined;
+      const gstDecimal = gstConstant !== undefined ? parseFloat(gstConstant.value) : 5;
+
       const calculated = round((formikState.values.paymentAmount as number) * (gstDecimal / 100));
       formikState.setFieldValue('gstAmount', calculated);
     } else {
@@ -194,7 +191,7 @@ export const PeriodForm: React.FunctionComponent<React.PropsWithChildren<IPeriod
                         radioLabelOne="Y"
                         radioLabelTwo="N"
                         type="radio"
-                        handleChange={(field, value) => onGstCheckChange(formikProps, field, value)}
+                        handleChange={(field, value) => onGstCheckChange(formikProps, value)}
                       />
                       {initialGstAmount !== formikProps.values.gstAmount &&
                         formikProps.values.isGstEligible === false && (
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/VariablePeriodSubForm.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/VariablePeriodSubForm.tsx
index aa4fa82ee5..46e9c4bdf0 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/VariablePeriodSubForm.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/VariablePeriodSubForm.tsx
@@ -34,7 +34,7 @@ const VariablePeriodSubForm: React.FunctionComponent<IVariablePeriodSubFormProps
 
   const onGstCheckChange = (field: string, values: boolean) => {
     if (values === true) {
-      const gstDecimal = gstConstant !== undefined ? parseFloat(gstConstant.value) : undefined;
+      const gstDecimal = gstConstant !== undefined ? parseFloat(gstConstant.value) : 5;
       const calculated = round(
         (getIn(formikProps.values, paymentAmountField) as number) * (gstDecimal / 100),
       );