fix: BIG-148 items entries ordered by index.

src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js

@@ -28,7 +28,7 @@ import { AppToaster } from 'components';
 import { transactionNumber, compose } from 'utils';
 
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
-import { defaultPaymentReceive, transformToEditForm } from './utils';
+import { defaultPaymentReceive, transformToEditForm, transformFormToRequest } from './utils';
 
 /**
  * Payment Receive form.
@@ -91,15 +91,8 @@ function PaymentReceiveForm({
   ) => {
     setSubmitting(true);
 
-    // Filters entries that have no `invoice_id` and `payment_amount`.
-    const entries = values.entries
-      .filter((entry) => entry.invoice_id && entry.payment_amount)
-      .map((entry) => ({
-        ...pick(entry, ['invoice_id', 'payment_amount']),
-      }));
-
     // Calculates the total payment amount of entries.
-    const totalPaymentAmount = sumBy(entries, 'payment_amount');
+    const totalPaymentAmount = sumBy(values.entries, 'payment_amount');
 
     if (totalPaymentAmount <= 0) {
       AppToaster.show({
@@ -108,13 +101,8 @@ function PaymentReceiveForm({
       });
       return;
     }
-    const form = {
-      ...omit(values, ['payment_receive_no_manually', 'payment_receive_no']),
-      ...(values.payment_receive_no_manually && {
-        payment_receive_no: values.payment_receive_no,
-      }),
-      entries,
-    };
+    // Transformes the form values to request body.
+    const form = transformFormToRequest(values);
 
     // Handle request response success.
     const onSaved = (response) => {

src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.js

@@ -1,15 +1,18 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
 import moment from 'moment';
+import { omit, pick } from 'lodash';
 import {
   defaultFastFieldShouldUpdate,
   transactionNumber,
   transformToForm,
   safeSumBy,
+  orderingLinesIndexes
 } from 'utils';
 
 // Default payment receive entry.
 export const defaultPaymentReceiveEntry = {
+  index: '',
   payment_amount: '',
   invoice_id: '',
   invoice_no: '',
@@ -32,8 +35,23 @@ export const defaultPaymentReceive = {
   entries: [],
 };
 
+export const defaultRequestPaymentEntry = {
+  index: '',
+  payment_amount: '',
+  invoice_id: '',
+};
+
+export const defaultRequestPayment = {
+  customer_id: '',
+  deposit_account_id: '',
+  payment_date: '',
+  payment_receive_no: '',
+  statement: '',
+  entries: []
+};
+
 /**
- *
+ * Transformes the edit payment receive to initial values of the form.
  */
 export const transformToEditForm = (paymentReceive, paymentReceiveEntries) => ({
   ...transformToForm(paymentReceive, defaultPaymentReceive),
@@ -124,3 +142,23 @@ export const accountsFieldShouldUpdate = (newProps, oldProps) => {
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };
+
+/**
+ * Tranformes form values to request.
+ */
+export const transformFormToRequest = (form) => {
+  // Filters entries that have no `invoice_id` and `payment_amount`.
+  const entries = form.entries
+    .filter((entry) => entry.invoice_id && entry.payment_amount)
+    .map((entry) => ({
+      ...pick(entry, Object.keys(defaultRequestPaymentEntry)),
+    }));
+
+  return {
+    ...omit(form, ['payment_receive_no_manually', 'payment_receive_no']),
+    ...(form.payment_receive_no_manually && {
+      payment_receive_no: form.payment_receive_no,
+    }),
+    entries: orderingLinesIndexes(entries),
+  };
+};