feat: add auto set for primary warehouse and branch of invoice form.

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.js

@@ -56,10 +56,18 @@ function InvoiceFormProvider({ invoiceId, ...props }) {
   } = useCustomers({ page_size: 10000 });
 
   // Fetch warehouses list.
-  const { data: warehouses, isLoading: isWarehouesLoading } = useWarehouses();
+  const {
+    data: warehouses,
+    isLoading: isWarehouesLoading,
+    isSuccess: isWarehousesSuccess,
+  } = useWarehouses();
 
   // Fetches the branches list.
-  const { data: branches, isLoading: isBranchesLoading } = useBranches();
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches();
 
   // Handle fetching settings.
   const { isLoading: isSettingsLoading } = useSettingsInvoices();
@@ -100,6 +108,8 @@ function InvoiceFormProvider({ invoiceId, ...props }) {
     isBranchesLoading,
     isFeatureLoading,
     isForeignCustomer,
+    isBranchesSuccess,
+    isWarehousesSuccess,
 
     createInvoiceMutate,
     editInvoiceMutate,

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js

@@ -9,6 +9,10 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
+import {
+  useSetPrimaryWarehouseToForm,
+  useSetPrimaryBranchToForm,
+} from './utils';
 
 import { useFeatureCan } from 'hooks/state';
 import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components';
@@ -23,6 +27,12 @@ export default function InvoiceFormTopBar() {
   // Features guard.
   const { featureCan } = useFeatureCan();
 
+  // Sets the primary warehouse to form.
+  useSetPrimaryWarehouseToForm();
+
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
+
   // Can't display the navigation bar if warehouses or branches feature is not enabled.
   if (!featureCan(Features.Warehouses) || !featureCan(Features.Branches)) {
     return null;
@@ -79,7 +89,7 @@ function InvoiceFormSelectWarehouse() {
 function InvoiceWarehouseSelectButton({ label }) {
   return (
     <Button
-      text={intl.get('invoice.branch_button.label', { label })}
+      text={intl.get('invoice.warehouse_button.label', { label })}
       minimal={true}
       small={true}
       icon={<Icon icon={'warehouse-16'} iconSize={16} />}
@@ -90,7 +100,7 @@ function InvoiceWarehouseSelectButton({ label }) {
 function InvoiceBranchSelectButton({ label }) {
   return (
     <Button
-      text={intl.get('invoice.warehouse_button.label', { label })}
+      text={intl.get('invoice.branch_button.label', { label })}
       minimal={true}
       small={true}
       icon={<Icon icon={'branch-16'} iconSize={16} />}

src/containers/Sales/Invoices/InvoiceForm/utils.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
-import { omit } from 'lodash';
+import { omit, first } from 'lodash';
 import {
   compose,
   transformToForm,
@@ -9,11 +9,12 @@ import {
   transactionNumber,
 } from 'utils';
 import { useFormikContext } from 'formik';
+import intl from 'react-intl-universal';
 
 import { defaultFastFieldShouldUpdate } from 'utils';
-import intl from 'react-intl-universal';
 import { ERROR } from 'common/errors';
 import { AppToaster } from 'components';
+import { useInvoiceFormContext } from './InvoiceFormProvider';
 import {
   updateItemsEntriesTotal,
   ensureEntriesHaveEmptyLine,
@@ -167,3 +168,34 @@ export function transformValueToRequest(values) {
     delivered: false,
   };
 }
+
+export const useSetPrimaryWarehouseToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { warehouses, isWarehousesSuccess } = useInvoiceFormContext();
+
+  React.useEffect(() => {
+    if (isWarehousesSuccess) {
+      const primaryWarehouse =
+        warehouses.find((b) => b.primary) || first(warehouses);
+
+      if (primaryWarehouse) {
+        setFieldValue('warehouse_id', primaryWarehouse.id);
+      }
+    }
+  }, [isWarehousesSuccess, setFieldValue, warehouses]);
+};
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useInvoiceFormContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
+};