feat(vendor): add vendor opening balance dialog.

src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceForm.js

@@ -3,6 +3,7 @@ import moment from 'moment';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
+import { defaultTo } from 'lodash';
 
 import { AppToaster } from 'components';
 import { CreateCustomerOpeningBalanceFormSchema } from './CustomerOpeningBalanceForm.schema';
@@ -35,6 +36,7 @@ function CustomerOpeningBalanceForm({
   const initialValues = {
     ...defaultInitialValues,
     ...customer,
+    opening_balance: defaultTo(customer.opening_balance, ''),
   };
 
   // Handles the form submit.

src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceDialogContent.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import 'style/pages/VendorOpeningBalance/VendorOpeningBalance.scss';
+
+import VendorOpeningBalanceForm from './VendorOpeningBalanceForm';
+import { VendorOpeningBalanceFormProvider } from './VendorOpeningBalanceFormProvider';
+
+/**
+ * Vendor Opening balance dialog content.
+ * @returns
+ */
+export default function VendorOpeningBalanceDialogContent({
+  // #ownProps
+  dialogName,
+  vendorId,
+}) {
+  return (
+    <VendorOpeningBalanceFormProvider
+      vendorId={vendorId}
+      dialogName={dialogName}
+    >
+      <VendorOpeningBalanceForm />
+    </VendorOpeningBalanceFormProvider>
+  );
+}

src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceForm.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import { defaultTo } from 'lodash';
+
+import { AppToaster } from 'components';
+import { CreateVendorOpeningBalanceFormSchema } from './VendorOpeningBalanceForm.schema';
+import { useVendorOpeningBalanceContext } from './VendorOpeningBalanceFormProvider';
+
+import VendorOpeningBalanceFormContent from './VendorOpeningBalanceFormContent';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  opening_balance: '0',
+  opening_balance_branch_id: '',
+  opening_balance_exchange_rate: 1,
+  opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
+};
+
+/**
+ * Vendor Opening balance form.
+ * @returns
+ */
+function VendorOpeningBalanceForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName, vendor, editVendorOpeningBalanceMutate } =
+    useVendorOpeningBalanceContext();
+
+  // Initial form values
+  const initialValues = {
+    ...defaultInitialValues,
+    ...vendor,
+    opening_balance: defaultTo(vendor.opening_balance, ''),
+
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const formValues = {
+      ...values,
+    };
+
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('vendor_opening_balance.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors) {
+      }
+      setSubmitting(false);
+    };
+
+    editVendorOpeningBalanceMutate([vendor.id, formValues])
+      .then(onSuccess)
+      .catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateVendorOpeningBalanceFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={VendorOpeningBalanceFormContent}
+    />
+  );
+}
+export default compose(withDialogActions)(VendorOpeningBalanceForm);

src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceForm.schema.js

@@ -0,0 +1,10 @@
+import * as Yup from 'yup';
+
+const Schema = Yup.object().shape({
+  opening_balance_branch_id: Yup.string(),
+  opening_balance: Yup.number().nullable(),
+  opening_balance_at: Yup.date(),
+  opening_balance_exchange_rate: Yup.number(),
+});
+
+export const CreateVendorOpeningBalanceFormSchema = Schema;

src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceFormContent.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import VendorOpeningBalanceFormFields from './VendorOpeningBalanceFormFields';
+import VendorOpeningBalanceFormFloatingActions from './VendorOpeningBalanceFormFloatingActions';
+
+/**
+ * Vendor Opening balance form content.
+ * @returns
+ */
+function VendorOpeningBalanceFormContent() {
+  return (
+    <Form>
+      <VendorOpeningBalanceFormFields />
+      <VendorOpeningBalanceFormFloatingActions />
+    </Form>
+  );
+}
+
+export default VendorOpeningBalanceFormContent;

src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceFormFields.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import { Classes, Position, FormGroup, ControlGroup } from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { isEqual } from 'lodash';
+import { FastField, useFormikContext } from 'formik';
+import { momentFormatter, tansformDateValue, handleDateChange } from 'utils';
+import { Features } from 'common';
+import classNames from 'classnames';
+
+import {
+  If,
+  Icon,
+  FormattedMessage as T,
+  ExchangeRateMutedField,
+  BranchSelect,
+  BranchSelectButton,
+  FeatureCan,
+  InputPrependText,
+} from 'components';
+import { FMoneyInputGroup, FFormGroup } from '../../../components/Forms';
+
+import { useVendorOpeningBalanceContext } from './VendorOpeningBalanceFormProvider';
+import { useSetPrimaryBranchToForm } from './utils';
+
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { compose } from 'utils';
+
+/**
+ * Vendor Opening balance form fields.
+ * @returns
+ */
+function VendorOpeningBalanceFormFields({
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  // Formik context.
+  const { values } = useFormikContext();
+
+  const { branches, vendor } = useVendorOpeningBalanceContext();
+
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/*------------ Opening balance -----------*/}
+      <FFormGroup
+        name={'opening_balance'}
+        label={<T id={'vendor_opening_balance.label.opening_balance'} />}
+      >
+        <ControlGroup>
+          <InputPrependText text={vendor.currency_code} />
+          <FMoneyInputGroup
+            name={'opening_balance'}
+            allowDecimals={true}
+            allowNegativeValue={true}
+          />
+        </ControlGroup>
+      </FFormGroup>
+
+      {/*------------ Opening balance at -----------*/}
+      <FastField name={'opening_balance_at'}>
+        {({ form, field: { value } }) => (
+          <FormGroup
+            label={<T id={'vendor_opening_balance.label.opening_balance_at'} />}
+            className={Classes.FILL}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('opening_balance_at', formattedDate);
+              })}
+              value={tansformDateValue(value)}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <If condition={!isEqual(base_currency, vendor.currency_code)}>
+        {/*------------ Opening balance exchange rate -----------*/}
+        <ExchangeRateMutedField
+          name={'opening_balance_exchange_rate'}
+          fromCurrency={base_currency}
+          toCurrency={vendor.currency_code}
+          formGroupProps={{ label: '', inline: false }}
+          date={values.opening_balance_at}
+          exchangeRate={values.opening_balance_exchange_rate}
+        />
+      </If>
+
+      {/*------------ Opening balance branch id -----------*/}
+      <FeatureCan feature={Features.Branches}>
+        <FFormGroup
+          label={<T id={'branch'} />}
+          name={'opening_balance_branch_id'}
+          className={classNames('form-group--select-list', Classes.FILL)}
+        >
+          <BranchSelect
+            name={'opening_balance_branch_id'}
+            branches={branches}
+            input={BranchSelectButton}
+            popoverProps={{ minimal: true }}
+          />
+        </FFormGroup>
+      </FeatureCan>
+    </div>
+  );
+}
+
+export default compose(withCurrentOrganization())(
+  VendorOpeningBalanceFormFields,
+);

src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceFormFloatingActions.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+
+import { useVendorOpeningBalanceContext } from './VendorOpeningBalanceFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Vendor Opening balance floating actions.
+ * @returns
+ */
+function VendorOpeningBalanceFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // dialog context.
+  const { dialogName } = useVendorOpeningBalanceContext();
+
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+        >
+          {<T id={'edit'} />}
+        </Button>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+export default compose(withDialogActions)(
+  VendorOpeningBalanceFormFloatingActions,
+);

src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceFormProvider.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import {
+  useBranches,
+  useVendor,
+  useEditVendorOpeningBalance,
+} from 'hooks/query';
+import { useFeatureCan } from 'hooks/state';
+import { Features } from 'common';
+import { pick, defaultTo } from 'lodash';
+
+const VendorOpeningBalanceContext = React.createContext();
+
+/**
+ * Vendor Opening balance provider.
+ * @returns
+ */
+function VendorOpeningBalanceFormProvider({
+  query,
+  vendorId,
+  dialogName,
+  ...props
+}) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
+  const { mutateAsync: editVendorOpeningBalanceMutate } =
+    useEditVendorOpeningBalance();
+
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches(query, { enabled: isBranchFeatureCan });
+
+  // Handle fetch vendor details.
+  const { data: vendor, isLoading: isVendorLoading } = useVendor(vendorId, {
+    enabled: !!vendorId,
+  });
+
+  // State provider.
+  const provider = {
+    branches,
+    vendor: {
+      ...pick(vendor, [
+        'id',
+        'opening_balance',
+        'opening_balance_exchange_rate',
+        'currency_code',
+      ]),
+    },
+
+    isBranchesSuccess,
+    isBranchesLoading,
+    dialogName,
+    editVendorOpeningBalanceMutate,
+  };
+
+  return (
+    <DialogContent isLoading={isBranchesLoading || isVendorLoading}>
+      <VendorOpeningBalanceContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useVendorOpeningBalanceContext = () =>
+  React.useContext(VendorOpeningBalanceContext);
+
+export { VendorOpeningBalanceFormProvider, useVendorOpeningBalanceContext };

src/containers/Dialogs/VendorOpeningBalanceDialog/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'redux';
+
+const VendorOpeningBalanceDialogContent = React.lazy(() =>
+  import('./VendorOpeningBalanceDialogContent'),
+);
+
+/**
+ * Vendor Opening balance dialog.
+ * @returns
+ */
+function VendorOpeningBalanceDialog({
+  dialogName,
+  payload: { vendorId },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'vendor_opening_balance.label'} />}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--vendor-opening-balance'}
+    >
+      <DialogSuspense>
+        <VendorOpeningBalanceDialogContent
+          vendorId={vendorId}
+          dialogName={dialogName}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(VendorOpeningBalanceDialog);

src/containers/Dialogs/VendorOpeningBalanceDialog/utils.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { first } from 'lodash';
+
+import { useVendorOpeningBalanceContext } from './VendorOpeningBalanceFormProvider';
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useVendorOpeningBalanceContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('opening_balance_branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
+};

src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.js

@@ -19,8 +19,10 @@ import { useVendorDetailsDrawerContext } from './VendorDetailsDrawerProvider';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { Can, Icon, FormattedMessage as T } from 'components';
+import { VendorMoreMenuItem } from './utils';
 import {
   AbilitySubject,
   SaleInvoiceAction,
@@ -33,13 +35,16 @@ import { safeCallback, compose } from 'utils';
  * Vendor details actions bar.
  */
 function VendorDetailsActionsBar({
+  // #withDialogActions
+  openDialog,
+
   // #withAlertsActions
   openAlert,
 
   // #withDrawerActions
   closeDrawer,
 }) {
-  const { vendor, vendorId } = useVendorDetailsDrawerContext();
+  const { vendorId } = useVendorDetailsDrawerContext();
   const history = useHistory();
 
   // Handle edit vendor.
@@ -63,6 +68,10 @@ function VendorDetailsActionsBar({
     closeDrawer('vendor-details-drawer');
   };
 
+  const handleEditOpeningBalance = () => {
+    openDialog('vendor-opening-balance', { vendorId });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -112,6 +121,12 @@ function VendorDetailsActionsBar({
             onClick={safeCallback(onDeleteContact)}
           />
         </Can>
+        <NavbarDivider />
+        <VendorMoreMenuItem
+          payload={{
+            onEditOpeningBalance: handleEditOpeningBalance,
+          }}
+        />
       </NavbarGroup>
     </DashboardActionsBar>
   );
@@ -120,4 +135,5 @@ function VendorDetailsActionsBar({
 export default compose(
   withDrawerActions,
   withAlertsActions,
+  withDialogActions,
 )(VendorDetailsActionsBar);

src/containers/Drawers/VendorDetailsDrawer/utils.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+} from '@blueprintjs/core';
+import { Icon, FormattedMessage as T } from 'components';
+
+/**
+ * Vendor more actions menu items.
+ * @param {*} param0
+ */
+export function VendorMoreMenuItem({ payload: { onEditOpeningBalance } }) {
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={
+        <Menu>
+          <MenuItem
+            text={<T id={'vendor.drawer.action.edit_opending_balance'} />}
+            onClick={onEditOpeningBalance}
+          />
+        </Menu>
+      }
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+}