re-structure to monorepo.

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceDialogContent.tsx

@@ -0,0 +1,26 @@
+// @ts-nocheck
+import React from 'react';
+
+import '@/style/pages/CustomerOpeningBalance/CustomerOpeningBalance.scss';
+
+import CustomerOpeningBalanceForm from './CustomerOpeningBalanceForm';
+import { CustomerOpeningBalanceFormProvider } from './CustomerOpeningBalanceFormProvider';
+
+/**
+ * Customer opening balance dialog content.
+ * @returns
+ */
+export default function CustomerOpeningBalanceDialogContent({
+  // #ownProps
+  dialogName,
+  customerId,
+}) {
+  return (
+    <CustomerOpeningBalanceFormProvider
+      customerId={customerId}
+      dialogName={dialogName}
+    >
+      <CustomerOpeningBalanceForm />
+    </CustomerOpeningBalanceFormProvider>
+  );
+}

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceFields.tsx

@@ -0,0 +1,116 @@
+// @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 { useCustomerOpeningBalanceContext } from './CustomerOpeningBalanceFormProvider';
+import { useSetPrimaryBranchToForm } from './utils';
+
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+import { compose } from '@/utils';
+
+/**
+ * Customer Opening balance fields.
+ * @returns
+ */
+function CustomerOpeningBalanceFields({
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  // Formik context.
+  const { values } = useFormikContext();
+
+  const { branches, customer } = useCustomerOpeningBalanceContext();
+
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/*------------ Opening balance -----------*/}
+      <FFormGroup
+        name={'opening_balance'}
+        label={<T id={'customer_opening_balance.label.opening_balance'} />}
+      >
+        <ControlGroup>
+          <InputPrependText text={customer.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={'customer_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, customer.currency_code)}>
+        {/*------------ Opening balance exchange rate -----------*/}
+        <ExchangeRateMutedField
+          name={'opening_balance_exchange_rate'}
+          fromCurrency={base_currency}
+          toCurrency={customer.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())(CustomerOpeningBalanceFields);

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceForm.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 CreateCustomerOpeningBalanceFormSchema = Schema;

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceForm.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 { CreateCustomerOpeningBalanceFormSchema } from './CustomerOpeningBalanceForm.schema';
+import { useCustomerOpeningBalanceContext } from './CustomerOpeningBalanceFormProvider';
+
+import CustomerOpeningBalanceFormContent from './CustomerOpeningBalanceFormContent';
+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'),
+};
+
+/**
+ * Customer Opening balance form.
+ * @returns
+ */
+function CustomerOpeningBalanceForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName, customer, editCustomerOpeningBalanceMutate } =
+    useCustomerOpeningBalanceContext();
+
+  // Initial form values
+  const initialValues = {
+    ...defaultInitialValues,
+    ...customer,
+    opening_balance: defaultTo(customer.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('customer_opening_balance.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors) {
+      }
+      setSubmitting(false);
+    };
+
+    editCustomerOpeningBalanceMutate([customer.id, formValues])
+      .then(onSuccess)
+      .catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateCustomerOpeningBalanceFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={CustomerOpeningBalanceFormContent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(CustomerOpeningBalanceForm);

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceFormContent.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import React from 'react';
+import { Form } from 'formik';
+
+import CustomerOpeningBalanceFields from './CustomerOpeningBalanceFields';
+import CustomerOpeningBalanceFormFloatingActions from './CustomerOpeningBalanceFormFloatingActions';
+
+/**
+ * Customer Opening balance form content.
+ * @returns
+ */
+export default function CustomerOpeningBalanceFormContent() {
+  return (
+    <Form>
+      <CustomerOpeningBalanceFields />
+      <CustomerOpeningBalanceFormFloatingActions />
+    </Form>
+  );
+}

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceFormFloatingActions.tsx

@@ -0,0 +1,51 @@
+// @ts-nocheck
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from '@/components';
+
+import { useCustomerOpeningBalanceContext } from './CustomerOpeningBalanceFormProvider';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+
+/**
+ * Customer Opening balance floating actions.
+ * @returns
+ */
+function CustomerOpeningBalanceFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // dialog context.
+  const { dialogName } = useCustomerOpeningBalanceContext();
+
+  // 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)(
+  CustomerOpeningBalanceFormFloatingActions,
+);

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceFormProvider.tsx

@@ -0,0 +1,66 @@
+// @ts-nocheck
+import React from 'react';
+import { DialogContent } from '@/components';
+import {
+  useBranches,
+  useCustomer,
+  useEditCustomerOpeningBalance,
+} from '@/hooks/query';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+import { transfromCustomertoForm } from './utils';
+
+const CustomerOpeningBalanceContext = React.createContext();
+
+/**
+ * Customer opening balance provider.
+ * @returns
+ */
+function CustomerOpeningBalanceFormProvider({
+  query,
+  customerId,
+  dialogName,
+  ...props
+}) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
+  const { mutateAsync: editCustomerOpeningBalanceMutate } =
+    useEditCustomerOpeningBalance();
+
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches(query, { enabled: isBranchFeatureCan });
+
+  // Handle fetch customer details.
+  const { data: customer, isLoading: isCustomerLoading } = useCustomer(
+    customerId,
+    { enabled: !!customerId },
+  );
+
+  // State provider.
+  const provider = {
+    branches,
+    customer: transfromCustomertoForm(customer),
+
+    isBranchesSuccess,
+    isBranchesLoading,
+    dialogName,
+    editCustomerOpeningBalanceMutate,
+  };
+
+  return (
+    <DialogContent isLoading={isBranchesLoading || isCustomerLoading}>
+      <CustomerOpeningBalanceContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useCustomerOpeningBalanceContext = () =>
+  React.useContext(CustomerOpeningBalanceContext);
+
+export { CustomerOpeningBalanceFormProvider, useCustomerOpeningBalanceContext };

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

@@ -0,0 +1,41 @@
+// @ts-nocheck
+import React from 'react';
+
+import { FormattedMessage as T } from '@/components';
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const CustomerOpeningBalanceDialogContent = React.lazy(() =>
+  import('./CustomerOpeningBalanceDialogContent'),
+);
+
+/**
+ * Customer opening balance dialog.
+ * @returns
+ */
+function CustomerOpeningBalanceDialog({
+  dialogName,
+  payload: { customerId },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'customer_opening_balance.label'} />}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--customer-opening-balance'}
+    >
+      <DialogSuspense>
+        <CustomerOpeningBalanceDialogContent
+          customerId={customerId}
+          dialogName={dialogName}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(CustomerOpeningBalanceDialog);

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

@@ -0,0 +1,32 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { first, pick } from 'lodash';
+
+import { useCustomerOpeningBalanceContext } from './CustomerOpeningBalanceFormProvider';
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useCustomerOpeningBalanceContext();
+
+  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 transfromCustomertoForm(values) {
+  return {
+    ...pick(values, [
+      'id',
+      'opening_balance',
+      'opening_balance_exchange_rate',
+      'currency_code',
+    ]),
+  };
+}