From b590d2cb0367aa0bd533603667a99a579c50a8df Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Thu, 25 Jul 2024 11:01:26 +0200
Subject: [PATCH] fix: excess dialog

---
 .../webapp/src/constants/accountTypes.tsx     |  4 +-
 .../PaymentMadeExcessDialogContent.tsx        | 38 ++++++++++++++-----
 .../ExcessPaymentDialogContent.tsx            | 26 ++++++++++---
 3 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/packages/webapp/src/constants/accountTypes.tsx b/packages/webapp/src/constants/accountTypes.tsx
index e3fa6b287..5cb08e13f 100644
--- a/packages/webapp/src/constants/accountTypes.tsx
+++ b/packages/webapp/src/constants/accountTypes.tsx
@@ -4,9 +4,9 @@ export const ACCOUNT_TYPE = {
   BANK: 'bank',
   ACCOUNTS_RECEIVABLE: 'accounts-receivable',
   INVENTORY: 'inventory',
-  OTHER_CURRENT_ASSET: 'other-ACCOUNT_PARENT_TYPE.CURRENT_ASSET',
+  OTHER_CURRENT_ASSET: 'other-current-asset',
   FIXED_ASSET: 'fixed-asset',
-  NON_CURRENT_ASSET: 'non-ACCOUNT_PARENT_TYPE.CURRENT_ASSET',
+  NON_CURRENT_ASSET: 'non-current-asset',
 
   ACCOUNTS_PAYABLE: 'accounts-payable',
   CREDIT_CARD: 'credit-card',
diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/dialogs/PaymentMadeExcessDialog/PaymentMadeExcessDialogContent.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/dialogs/PaymentMadeExcessDialog/PaymentMadeExcessDialogContent.tsx
index 7078b3434..9389fb4dd 100644
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/dialogs/PaymentMadeExcessDialog/PaymentMadeExcessDialogContent.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/dialogs/PaymentMadeExcessDialog/PaymentMadeExcessDialogContent.tsx
@@ -1,12 +1,14 @@
 // @ts-nocheck
 import * as R from 'ramda';
 import * as Yup from 'yup';
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Button, Classes, Intent } from '@blueprintjs/core';
 import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
-import { AccountsSelect, FFormGroup } from '@/components';
+import { AccountsSelect, FFormGroup, FormatNumber } from '@/components';
 import { usePaymentMadeFormContext } from '../../PaymentMadeFormProvider';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { ACCOUNT_TYPE } from '@/constants';
+import { usePaymentMadeExcessAmount } from '../../utils';
 
 interface ExcessPaymentValues {
   accountId: string;
@@ -20,15 +22,17 @@ const Schema = Yup.object().shape({
   accountId: Yup.number().required(),
 });
 
-const DEFAULT_ACCOUNT_SLUG = 'depreciation-expense';
+const DEFAULT_ACCOUNT_SLUG = 'prepaid-expenses';
 
 function ExcessPaymentDialogContentRoot({ dialogName, closeDialog }) {
   const {
     setFieldValue,
     submitForm,
+    values: { currency_code: currencyCode },
   } = useFormikContext();
   const { setIsExcessConfirmed } = usePaymentMadeFormContext();
 
+  // Handles the form submitting.
   const handleSubmit = (
     values: ExcessPaymentValues,
     { setSubmitting }: FormikHelpers<ExcessPaymentValues>,
@@ -42,13 +46,15 @@ function ExcessPaymentDialogContentRoot({ dialogName, closeDialog }) {
       closeDialog(dialogName);
     });
   };
-
   // Handle close button click.
   const handleCloseBtn = () => {
     closeDialog(dialogName);
   };
+  // Retrieves the default excess account id.
   const defaultAccountId = useDefaultExcessPaymentDeposit();
 
+  const excessAmount = usePaymentMadeExcessAmount();
+
   return (
     <Formik
       initialValues={{
@@ -59,7 +65,12 @@ function ExcessPaymentDialogContentRoot({ dialogName, closeDialog }) {
       onSubmit={handleSubmit}
     >
       <Form>
-        <ExcessPaymentDialogContentForm onClose={handleCloseBtn} />
+        <ExcessPaymentDialogContentForm
+          excessAmount={
+            <FormatNumber value={excessAmount} currency={currencyCode} />
+          }
+          onClose={handleCloseBtn}
+        />
       </Form>
     </Formik>
   );
@@ -70,10 +81,12 @@ export const ExcessPaymentDialogContent = R.compose(withDialogActions)(
 );
 
 interface ExcessPaymentDialogContentFormProps {
+  excessAmount: string | number | React.ReactNode;
   onClose?: () => void;
 }
 
 function ExcessPaymentDialogContentForm({
+  excessAmount,
   onClose,
 }: ExcessPaymentDialogContentFormProps) {
   const { submitForm, isSubmitting } = useFormikContext();
@@ -85,19 +98,26 @@ function ExcessPaymentDialogContentForm({
   return (
     <>
       <div className={Classes.DIALOG_BODY}>
-        <p>
-          Would you like to record the excess amount of $1000 as advanced
-          payment from the customer.
+        <p style={{ marginBottom: 20 }}>
+          Would you like to record the excess amount of{' '}
+          <strong>{excessAmount}</strong> as advanced payment from the customer.
         </p>
 
         <FFormGroup
           name={'accountId'}
           label={'The excessed amount will be deposited in the'}
+          helperText={
+            'Only other current asset and non current asset accounts will show.'
+          }
         >
           <AccountsSelect
             name={'accountId'}
             items={accounts}
             buttonProps={{ small: true }}
+            filterByTypes={[
+              ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+              ACCOUNT_TYPE.NON_CURRENT_ASSET,
+            ]}
           />
         </FFormGroup>
       </div>
@@ -109,7 +129,7 @@ function ExcessPaymentDialogContentForm({
             loading={isSubmitting}
             onClick={() => submitForm()}
           >
-            Continue to Payment
+            Save Payment
           </Button>
           <Button onClick={handleCloseBtn}>Cancel</Button>
         </div>
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/dialogs/ExcessPaymentDialog/ExcessPaymentDialogContent.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/dialogs/ExcessPaymentDialog/ExcessPaymentDialogContent.tsx
index dcfec7e2f..a15572045 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/dialogs/ExcessPaymentDialog/ExcessPaymentDialogContent.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/dialogs/ExcessPaymentDialog/ExcessPaymentDialogContent.tsx
@@ -4,10 +4,11 @@ import * as Yup from 'yup';
 import * as R from 'ramda';
 import { Button, Classes, Intent } from '@blueprintjs/core';
 import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
-import { AccountsSelect, FFormGroup } from '@/components';
+import { AccountsSelect, FFormGroup, FormatNumber } from '@/components';
 import { usePaymentReceiveFormContext } from '../../PaymentReceiveFormProvider';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { usePaymentReceivedTotalExceededAmount } from '../../utils';
+import { ACCOUNT_TYPE } from '@/constants';
 
 interface ExcessPaymentValues {
   accountId: string;
@@ -21,10 +22,14 @@ const Schema = Yup.object().shape({
   accountId: Yup.number().required(),
 });
 
-const DEFAULT_ACCOUNT_SLUG = 'depreciation-expense';
+const DEFAULT_ACCOUNT_SLUG = 'unearned-revenue';
 
 export function ExcessPaymentDialogContentRoot({ dialogName, closeDialog }) {
-  const { setFieldValue, submitForm } = useFormikContext();
+  const {
+    setFieldValue,
+    submitForm,
+    values: { currency_code: currencyCode },
+  } = useFormikContext();
   const { setIsExcessConfirmed } = usePaymentReceiveFormContext();
   const initialAccountId = useDefaultExcessPaymentDeposit();
   const exceededAmount = usePaymentReceivedTotalExceededAmount();
@@ -57,7 +62,9 @@ export function ExcessPaymentDialogContentRoot({ dialogName, closeDialog }) {
     >
       <Form>
         <ExcessPaymentDialogContentForm
-          exceededAmount={exceededAmount}
+          exceededAmount={
+            <FormatNumber value={exceededAmount} currency={currencyCode} />
+          }
           onClose={handleClose}
         />
       </Form>
@@ -80,7 +87,7 @@ function ExcessPaymentDialogContentForm({ onClose, exceededAmount }) {
   return (
     <>
       <div className={Classes.DIALOG_BODY}>
-        <p>
+        <p style={{ marginBottom: 20 }}>
           Would you like to record the excess amount of{' '}
           <strong>{exceededAmount}</strong> as advanced payment from the
           customer.
@@ -89,11 +96,18 @@ function ExcessPaymentDialogContentForm({ onClose, exceededAmount }) {
         <FFormGroup
           name={'accountId'}
           label={'The excessed amount will be deposited in the'}
+          helperText={
+            'Only other other current liability and non current liability accounts will show.'
+          }
         >
           <AccountsSelect
             name={'accountId'}
             items={accounts}
             buttonProps={{ small: true }}
+            filterByTypes={[
+              ACCOUNT_TYPE.OTHER_CURRENT_LIABILITY,
+              ACCOUNT_TYPE.NON_CURRENT_LIABILITY,
+            ]}
           />
         </FFormGroup>
       </div>
@@ -106,7 +120,7 @@ function ExcessPaymentDialogContentForm({ onClose, exceededAmount }) {
             disabled={isSubmitting}
             onClick={() => submitForm()}
           >
-            Continue to Payment
+            Save Payment
           </Button>
           <Button onClick={handleCloseBtn}>Cancel</Button>
         </div>