fix: BIG-195 Allocate landed cost amount max number should be transaction remaining amount.

src/components/Dialog/DialogFooterActions.js

@@ -2,6 +2,10 @@ import React from 'react';
 import styled from 'styled-components';
 import { Classes } from '@blueprintjs/core';
 
+/**
+ * Dialog footer actions.
+ * @returns {React.JSX}
+ */
 export function DialogFooterActions({ alignment = 'right', children }) {
   return (
     <DialogFooterActionsRoot
@@ -13,6 +17,19 @@ export function DialogFooterActions({ alignment = 'right', children }) {
   );
 }
 
+/**
+ * Dialog footer.
+ * @returns {React.JSX}
+ */
+export function DialogFooter({ ...props }) {
+  return <DialogFooterRoot {...props} />;
+}
+
+const DialogFooterRoot = styled.div`
+  flex: 0 0 auto;
+  margin: 0 20px;
+`;
+
 const DialogFooterActionsRoot = styled.div`
   margin-left: -10px;
   margin-right: -10px;

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.js

@@ -1,6 +1,10 @@
 import React from 'react';
-import { Intent, Button, Classes } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { Intent, Button } from '@blueprintjs/core';
+import {
+  DialogFooter,
+  DialogFooterActions,
+  FormattedMessage as T,
+} from 'components';
 
 import { useFormikContext } from 'formik';
 import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogProvider';
@@ -21,21 +25,21 @@ function AllocateLandedCostFloatingActions({
   };
 
   return (
-    <div className={Classes.DIALOG_FOOTER}>
-      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+    <DialogFooter>
+      <DialogFooterActions alignment={'right'}>
         <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
           <T id={'cancel'} />
         </Button>
         <Button
           intent={Intent.PRIMARY}
-          style={{ minWidth: '85px' }}
+          style={{ minWidth: '95px' }}
           type="submit"
           loading={isSubmitting}
         >
           {<T id={'save'} />}
         </Button>
-      </div>
-    </div>
+      </DialogFooterActions>
+    </DialogFooter>
   );
 }
 

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.js

@@ -49,11 +49,9 @@ function AllocateLandedCostForm({
       cost: '',
     })),
   };
-  const amount = sumBy(initialValues.items, 'amount');
-
   // Handle form submit.
   const handleFormSubmit = (values, { setSubmitting }) => {
-    setSubmitting(false);
+    setSubmitting(true);
 
     // Filters the entries has no cost.
     const entries = values.items
@@ -77,17 +75,33 @@ function AllocateLandedCostForm({
       setSubmitting(false);
       closeDialog(dialogName);
     };
-
     // Handle the request error.
-    const onError = () => {
+    const onError = (res) => {
+      const { errors } = res.response.data;
       setSubmitting(false);
-      AppToaster.show({ message: 'Something went wrong!', intent: Intent.DANGER });
+
+      if (
+        errors.some(
+          (e) => e.type === 'COST_AMOUNT_BIGGER_THAN_UNALLOCATED_AMOUNT',
+        )
+      ) {
+        AppToaster.show({
+          message:
+            'The total located cost is bigger than the transaction line.',
+          intent: Intent.DANGER,
+        });
+      } else {
+        AppToaster.show({
+          message: 'Something went wrong!',
+          intent: Intent.DANGER,
+        });
+      }
     };
     createLandedCostMutate([billId, form]).then(onSuccess).catch(onError);
   };
 
   // Computed validation schema.
-  const validationSchema =  AllocateLandedCostFormSchema(amount);
+  const validationSchema = AllocateLandedCostFormSchema();
 
   return (
     <Formik

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.schema.js

@@ -1,13 +1,13 @@
 import * as Yup from 'yup';
 import intl from 'react-intl-universal';
 
-export const AllocateLandedCostFormSchema = (minAmount) =>
+export const AllocateLandedCostFormSchema = () =>
   Yup.object().shape({
     transaction_type: Yup.string().label(intl.get('transaction_type')),
     transaction_date: Yup.date().label(intl.get('transaction_date')),
     transaction_id: Yup.string().label(intl.get('transaction_number')),
     transaction_entry_id: Yup.string().label(intl.get('transaction_line')),
-    amount: Yup.number().max(minAmount).label(intl.get('amount')),
+    amount: Yup.number().label(intl.get('amount')),
     allocation_method: Yup.string().trim(),
     items: Yup.array().of(
       Yup.object().shape({

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.js

@@ -116,15 +116,16 @@ export default function AllocateLandedCostFormFields() {
             >
               <ListSelect
                 items={transactionEntries}
-                onItemSelect={({ id, amount }) => {
+                onItemSelect={(entry) => {
+                  const { id, unallocated_cost_amount: unallocatedAmount } = entry;
                   const { items, allocation_method } = form.values;
 
-                  form.setFieldValue('amount', amount);
+                  form.setFieldValue('amount', unallocatedAmount);
                   form.setFieldValue('transaction_entry_id', id);
 
                   form.setFieldValue(
                     'items',
-                    allocateCostToEntries(amount, allocation_method, items),
+                    allocateCostToEntries(unallocatedAmount, allocation_method, items),
                   );
                 }}
                 filterable={false}