feat(inventoryadjustment): add branch & warehouse.

src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.js

@@ -27,6 +27,8 @@ const defaultInitialValues = {
   reference_no: '',
   quantity_on_hand: '',
   publish: '',
+  branch_id: '',
+  warehouse_id: '',
 };
 
 /**
@@ -36,13 +38,8 @@ function InventoryAdjustmentForm({
   // #withDialogActions
   closeDialog,
 }) {
-  const {
+  const { dialogName, item, itemId, submitPayload, createInventoryAdjMutate } =
-    dialogName,
+    useInventoryAdjContext();
-    item,
-    itemId,
-    submitPayload,
-    createInventoryAdjMutate,
-  } = useInventoryAdjContext();
 
   // Initial form values.
   const initialValues = {
@@ -63,7 +60,9 @@ function InventoryAdjustmentForm({
         closeDialog(dialogName);
 
         AppToaster.show({
-          message: intl.get('the_adjustment_transaction_has_been_created_successfully'),
+          message: intl.get(
+            'the_adjustment_transaction_has_been_created_successfully',
+          ),
           intent: Intent.SUCCESS,
         });
       })

src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.schema.js

@@ -23,6 +23,8 @@ const Schema = Yup.object().shape({
   reference_no: Yup.string(),
   new_quantity: Yup.number().required(),
   publish: Yup.boolean(),
+  branch_id: Yup.string(),
+  warehouse_id: Yup.string(),
 });
 
 export const CreateInventoryAdjustmentFormSchema = Schema;

src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 import { FastField, ErrorMessage, Field } from 'formik';
 import {
   Classes,
@@ -12,7 +13,17 @@ import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
 import { DateInput } from '@blueprintjs/datetime';
 import { useAutofocus } from 'hooks';
-import { ListSelect, FieldRequiredHint, Col, Row } from 'components';
+import {
+  ListSelect,
+  FieldRequiredHint,
+  Col,
+  Row,
+  FeatureCan,
+  BranchSelect,
+  WarehouseSelect,
+  BranchSelectButton,
+  WarehouseSelectButton,
+} from 'components';
 import {
   inputIntent,
   momentFormatter,
@@ -21,26 +32,76 @@ import {
   toSafeNumber,
 } from 'utils';
 import { CLASSES } from 'common/classes';
+import { Features } from 'common';
 import adjustmentType from 'common/adjustmentType';
 
 import AccountsSuggestField from 'components/AccountsSuggestField';
 import { useInventoryAdjContext } from './InventoryAdjustmentFormProvider';
-import { diffQuantity } from './utils';
+import {
+  diffQuantity,
+  useSetPrimaryBranchToForm,
+  useSetPrimaryWarehouseToForm,
+} from './utils';
+import { useFeatureCan } from 'hooks/state';
 import InventoryAdjustmentQuantityFields from './InventoryAdjustmentQuantityFields';
 
 /**
  * Inventory adjustment form dialogs fields.
  */
 export default function InventoryAdjustmentFormDialogFields() {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
   const dateFieldRef = useAutofocus();
 
   // Inventory adjustment dialog context.
-  const { accounts } = useInventoryAdjContext();
+  const { accounts, branches, warehouses } = useInventoryAdjContext();
 
-  // Intl context.
+  // Sets the primary warehouse to form.
+  useSetPrimaryWarehouseToForm();
+
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
 
   return (
     <div className={Classes.DIALOG_BODY}>
+      <Row>
+        <FeatureCan feature={Features.Branches}>
+          <Col xs={5}>
+            <FormGroup
+              label={<T id={'branch'} />}
+              className={classNames('form-group--select-list', Classes.FILL)}
+            >
+              <BranchSelect
+                name={'branch_id'}
+                branches={branches}
+                input={BranchSelectButton}
+                popoverProps={{ minimal: true }}
+              />
+            </FormGroup>
+          </Col>
+        </FeatureCan>
+        <FeatureCan feature={Features.Warehouses}>
+          <Col xs={5}>
+            <FormGroup
+              label={<T id={'warehouse'} />}
+              className={classNames('form-group--select-list', Classes.FILL)}
+            >
+              <WarehouseSelect
+                name={'warehouse_id'}
+                warehouses={warehouses}
+                input={WarehouseSelectButton}
+                popoverProps={{ minimal: true }}
+              />
+            </FormGroup>
+          </Col>
+        </FeatureCan>
+      </Row>
+
+      {featureCan(Features.Warehouses) && featureCan(Features.Branches) && (
+        <FeatureRowDivider />
+      )}
+
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -173,3 +234,9 @@ export default function InventoryAdjustmentFormDialogFields() {
     </div>
   );
 }
+
+export const FeatureRowDivider = styled.div`
+  height: 2px;
+  background: #e9e9e9;
+  margin-bottom: 15px;
+`;

src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormProvider.js

@@ -1,8 +1,12 @@
 import React, { useState, createContext } from 'react';
 import { DialogContent } from 'components';
+import { Features } from 'common';
+import { useFeatureCan } from 'hooks/state';
 import {
   useItem,
   useAccounts,
+  useBranches,
+  useWarehouses,
   useCreateInventoryAdjustment,
 } from 'hooks/query';
 
@@ -12,29 +16,59 @@ const InventoryAdjustmentContext = createContext();
  * Inventory adjustment dialog provider.
  */
 function InventoryAdjustmentFormProvider({ itemId, dialogName, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isWarehouseFeatureCan = featureCan(Features.Warehouses);
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
   // Fetches accounts list.
   const { isFetching: isAccountsLoading, data: accounts } = useAccounts();
 
   // Fetches the item details.
   const { isFetching: isItemLoading, data: item } = useItem(itemId);
 
+  // Fetch warehouses list.
   const {
-    mutateAsync: createInventoryAdjMutate,
+    data: warehouses,
-  } = useCreateInventoryAdjustment();
+    isLoading: isWarehouesLoading,
+    isSuccess: isWarehousesSuccess,
+  } = useWarehouses({}, { enabled: isWarehouseFeatureCan });
+
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches({}, { enabled: isBranchFeatureCan });
+
+  const { mutateAsync: createInventoryAdjMutate } =
+    useCreateInventoryAdjustment();
 
   // Submit payload.
   const [submitPayload, setSubmitPayload] = useState({});
 
+  // Determines whether the warehouse and branches are loading.
+  const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
+
   // State provider.
   const provider = {
-    itemId,
-    isAccountsLoading,
-    accounts,
-    isItemLoading,
     item,
-    submitPayload,
+    itemId,
+    branches,
+    warehouses,
+    accounts,
+
     dialogName,
-    
+    submitPayload,
+
+    isBranchesSuccess,
+    isWarehousesSuccess,
+    isAccountsLoading,
+    isItemLoading,
+    isFeatureLoading,
+    isWarehouesLoading,
+    isBranchesLoading,
+
     createInventoryAdjMutate,
     setSubmitPayload,
   };
@@ -46,6 +80,7 @@ function InventoryAdjustmentFormProvider({ itemId, dialogName, ...props }) {
   );
 }
 
-const useInventoryAdjContext = () => React.useContext(InventoryAdjustmentContext);
+const useInventoryAdjContext = () =>
+  React.useContext(InventoryAdjustmentContext);
 
 export { InventoryAdjustmentFormProvider, useInventoryAdjContext };

src/containers/Dialogs/InventoryAdjustmentFormDialog/utils.js

@@ -1,3 +1,7 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { useInventoryAdjContext } from './InventoryAdjustmentFormProvider';
+import { first } from 'lodash';
 
 export const decrementQuantity = (newQuantity, quantityOnHand) => {
   return quantityOnHand - newQuantity;
@@ -12,3 +16,34 @@ export const diffQuantity = (newQuantity, quantityOnHand, type) => {
     ? decrementQuantity(newQuantity, quantityOnHand)
     : incrementQuantity(newQuantity, quantityOnHand);
 };
+
+export const useSetPrimaryWarehouseToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { warehouses, isWarehousesSuccess } = useInventoryAdjContext();
+
+  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 } = useInventoryAdjContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
+};

src/lang/en/index.json

@@ -1844,6 +1844,7 @@
   "branches.column.code": "Code",
   "select_branch": "Select branch",
   "branch": "Branch",
+  "warehouse":"Warehouse",
   "branch.dialog.label_new_branch": "New Branch",
   "branch.dialog.label_edit_branch": "New Branch",
   "branch.dialog.label.branch_name": "Branch Name",

src/style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss

@@ -1,8 +1,6 @@
 .dialog--quick-payment-receive {
-  .bp3-dialog-body {
-    line-height: 14px;
     .bp3-form-group {
-      margin-bottom: 13px;
+      margin-bottom: 15px;
 
       label.bp3-label {
         margin-bottom: 3px;
@@ -25,5 +23,4 @@
 
   .bp3-dialog-footer {
     padding-top: 10px;
-  }
 }