re-structure to monorepo.

packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceDialogContent.tsx

@@ -0,0 +1,26 @@
+// @ts-nocheck
+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>
+  );
+}

packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceForm.schema.tsx

@@ -0,0 +1,11 @@
+// @ts-nocheck
+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;

packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceForm.tsx

@@ -0,0 +1,84 @@
+// @ts-nocheck
+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);

packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceFormContent.tsx

@@ -0,0 +1,21 @@
+// @ts-nocheck
+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;

packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceFormFields.tsx

@@ -0,0 +1,117 @@
+// @ts-nocheck
+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 '@/constants';
+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,
+);

packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceFormFloatingActions.tsx

@@ -0,0 +1,50 @@
+// @ts-nocheck
+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,
+);

packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceFormProvider.tsx

@@ -0,0 +1,64 @@
+// @ts-nocheck
+import React from 'react';
+import { DialogContent } from '@/components';
+import {
+  useBranches,
+  useVendor,
+  useEditVendorOpeningBalance,
+} from '@/hooks/query';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+import { transfromVendorToForm } from './utils';
+
+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: transfromVendorToForm(vendor),
+    isBranchesSuccess,
+    isBranchesLoading,
+    dialogName,
+    editVendorOpeningBalanceMutate,
+  };
+
+  return (
+    <DialogContent isLoading={isBranchesLoading || isVendorLoading}>
+      <VendorOpeningBalanceContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useVendorOpeningBalanceContext = () =>
+  React.useContext(VendorOpeningBalanceContext);
+
+export { VendorOpeningBalanceFormProvider, useVendorOpeningBalanceContext };

packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/index.tsx

@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React from 'react';
+
+import { Dialog, DialogSuspense, FormattedMessage as T } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+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);

packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/utils.tsx

@@ -0,0 +1,32 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { first, pick } 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]);
+};
+
+export function transfromVendorToForm(values) {
+  return {
+    ...pick(values, [
+      'id',
+      'opening_balance',
+      'opening_balance_exchange_rate',
+      'currency_code',
+    ]),
+  };
+}