refactoring: WIP payment receive and made form.

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

@@ -6,7 +6,8 @@ import {
   useAccounts,
   useCustomers,
   useCreatePaymentReceive,
-  useEditPaymentReceive
+  useEditPaymentReceive,
+  useDueInvoices,
 } from 'hooks/query';
 
 // Payment receive form context.
@@ -16,14 +17,16 @@ const PaymentReceiveFormContext = createContext();
  * Payment receive form provider.
  */
 function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
+  // Form state.
+  const [paymentCustomerId, setPaymentCustomerId] = React.useState(null);
+  const [submitPayload, setSubmitPayload] = React.useState({});
+
   // Fetches payment recevie details.
   const {
     data: paymentReceive,
     isLoading: isPaymentLoading,
     isFetching: isPaymentFetching,
-  } = usePaymentReceive(paymentReceiveId, {
-    enabled: !!paymentReceiveId,
-  });
+  } = usePaymentReceive(paymentReceiveId, { enabled: !!paymentReceiveId });
 
   // Handle fetch accounts data.
   const { data: accounts, isFetching: isAccountsFetching } = useAccounts();
@@ -37,7 +40,16 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
     isFetching: isCustomersFetching,
   } = useCustomers();
 
-  const [submitPayload, setSubmitPayload] = React.useState({});
+  // Fetches customer receivable invoices.
+  const {
+    data: dueInvoices,
+    isLoading: isDueInvoicesLoading,
+    isFetching: isDueInvoicesFetching,
+  } = useDueInvoices(paymentCustomerId, {
+    enabled: !!paymentCustomerId,
+  });
+
+  // Detarmines whether the new mode.
   const isNewMode = !paymentReceiveId;
 
   // Create and edit payment receive mutations.
@@ -49,27 +61,29 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
     paymentReceive,
     accounts,
     customers,
+    dueInvoices,
 
     isPaymentLoading,
     isPaymentFetching,
     isAccountsFetching,
     isCustomersFetching,
+    isDueInvoicesLoading,
+    isDueInvoicesFetching,
 
+    paymentCustomerId,
     submitPayload,
-    setSubmitPayload,
     isNewMode,
+    
+    setSubmitPayload,
+    setPaymentCustomerId,
 
     editPaymentReceiveMutate,
-    createPaymentReceiveMutate
+    createPaymentReceiveMutate,
   };
 
   return (
     <DashboardInsider
-      loading={
-        isPaymentLoading ||
-        isAccountsFetching ||
-        isCustomersFetching
-      }
+      loading={isPaymentLoading || isAccountsFetching || isCustomersFetching}
       name={'payment-receive-form'}
     >
       <PaymentReceiveFormContext.Provider value={provider} {...props} />