re-structure to monorepo.

packages/webapp/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteDialogContent.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+import { ReconcileCreditNoteFormProvider } from './ReconcileCreditNoteFormProvider';
+import ReconcileCreditNoteForm from './ReconcileCreditNoteForm';
+
+/**
+ * Reconcile credit note dialog content.
+ */
+export default function ReconcileCreditNoteDialogContent({
+  // #ownProps
+  dialogName,
+  creditNoteId,
+}) {
+  return (
+    <ReconcileCreditNoteFormProvider
+      creditNoteId={creditNoteId}
+      dialogName={dialogName}
+    >
+      <ReconcileCreditNoteForm />
+    </ReconcileCreditNoteFormProvider>
+  );
+}

packages/webapp/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteEntriesTable.tsx

@@ -0,0 +1,81 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { defaultTo } from 'lodash';
+
+import { DataTableEditable } from '@/components';
+import { compose, updateTableCell } from '@/utils';
+import { useDeepCompareEffect } from '@/hooks/utils';
+import {
+  useReconcileCreditNoteTableColumns,
+  maxAmountCreditFromRemaining,
+  maxCreditNoteAmountEntries,
+} from './utils';
+import { useReconcileCreditNoteContext } from './ReconcileCreditNoteFormProvider';
+
+/**
+ * Reconcile credit note entries table.
+ */
+export default function ReconcileCreditNoteEntriesTable({
+  onUpdateData,
+  entries,
+  errors,
+}) {
+  // Retrieve the reconcile credit note table columns.
+  const columns = useReconcileCreditNoteTableColumns();
+
+  // Reconcile credit note context provider.
+  const {
+    creditNote: { credits_remaining },
+  } = useReconcileCreditNoteContext();
+
+  // Handle update data.
+  const handleUpdateData = React.useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = compose(updateTableCell(rowIndex, columnId, value))(
+        entries,
+      );
+      onUpdateData(newRows);
+    },
+    [onUpdateData, entries],
+  );
+  // Deep compare entries to modify new entries.
+  useDeepCompareEffect(() => {
+    const newRows = compose(
+      maxCreditNoteAmountEntries(defaultTo(credits_remaining, 0)),
+      maxAmountCreditFromRemaining,
+    )(entries);
+
+    onUpdateData(newRows);
+  }, [entries]);
+
+  return (
+    <ReconcileCreditNoteEditableTable
+      columns={columns}
+      data={entries}
+      payload={{
+        errors: errors || [],
+        updateData: handleUpdateData,
+      }}
+    />
+  );
+}
+
+export const ReconcileCreditNoteEditableTable = styled(DataTableEditable)`
+  .table {
+    max-height: 400px;
+    overflow: auto;
+
+    .thead .tr .th {
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+
+    .tbody {
+      .tr .td {
+        padding: 2px 4px;
+        min-height: 38px;
+      }
+    }
+  }
+`;

packages/webapp/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteForm.schema.tsx

@@ -0,0 +1,13 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+
+const Schema = Yup.object().shape({
+  entries: Yup.array().of(
+    Yup.object().shape({
+      invoice_id: Yup.number().required(),
+      amount: Yup.number().nullable(),
+    }),
+  ),
+});
+
+export const CreateReconcileCreditNoteFormSchema = Schema;

packages/webapp/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteForm.tsx

@@ -0,0 +1,98 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+
+import '@/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss';
+import { AppToaster } from '@/components';
+import { CreateReconcileCreditNoteFormSchema } from './ReconcileCreditNoteForm.schema';
+import { useReconcileCreditNoteContext } from './ReconcileCreditNoteFormProvider';
+import ReconcileCreditNoteFormContent from './ReconcileCreditNoteFormContent';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose, transformToForm } from '@/utils';
+import { transformErrors } from './utils';
+
+// Default form initial values.
+const defaultInitialValues = {
+  entries: [
+    {
+      invoice_id: '',
+      amount: '',
+    },
+  ],
+};
+
+/**
+ * Reconcile credit note form.
+ */
+function ReconcileCreditNoteForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const {
+    dialogName,
+    creditNoteId,
+    reconcileCreditNotes,
+    createReconcileCreditNoteMutate,
+  } = useReconcileCreditNoteContext();
+
+  // Initial form values.
+  const initialValues = {
+    entries: reconcileCreditNotes.map((entry) => ({
+      ...entry,
+      invoice_id: entry.id,
+      amount: '',
+    })),
+  };
+
+  // Handle form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+
+    // Filters the entries.
+    const entries = values.entries
+      .filter((entry) => entry.invoice_id && entry.amount)
+      .map((entry) => transformToForm(entry, defaultInitialValues.entries[0]));
+
+    const form = {
+      ...values,
+      entries: entries,
+    };
+    // Handle the request success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('reconcile_credit_note.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+      closeDialog(dialogName);
+    };
+    // Handle the request error.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors) {
+        transformErrors(errors, { setErrors });
+      }
+      setSubmitting(false);
+    };
+
+    createReconcileCreditNoteMutate([creditNoteId, form])
+      .then(onSuccess)
+      .catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateReconcileCreditNoteFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={ReconcileCreditNoteFormContent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(ReconcileCreditNoteForm);

packages/webapp/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormContent.tsx

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import React from 'react';
+import { Form } from 'formik';
+import { Choose } from '@/components';
+
+import ReconcileCreditNoteFormFields from './ReconcileCreditNoteFormFields';
+import ReconcileCreditNoteFormFloatingActions from './ReconcileCreditNoteFormFloatingActions';
+import { EmptyStatuCallout } from './utils';
+import { useReconcileCreditNoteContext } from './ReconcileCreditNoteFormProvider';
+
+/**
+ * Reconcile credit note form content.
+ */
+export default function ReconcileCreditNoteFormContent() {
+  const { isEmptyStatus } = useReconcileCreditNoteContext();
+  return (
+    <Choose>
+      <Choose.When condition={isEmptyStatus}>
+        <EmptyStatuCallout />
+      </Choose.When>
+      <Choose.Otherwise>
+        <Form>
+          <ReconcileCreditNoteFormFields />
+          <ReconcileCreditNoteFormFloatingActions />
+        </Form>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}

packages/webapp/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFields.tsx

@@ -0,0 +1,116 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { FastField, useFormikContext } from 'formik';
+import { Classes } from '@blueprintjs/core';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from '@/components';
+import { subtract } from 'lodash';
+import { getEntriesTotal } from '@/containers/Entries/utils';
+import ReconcileCreditNoteEntriesTable from './ReconcileCreditNoteEntriesTable';
+import { useReconcileCreditNoteContext } from './ReconcileCreditNoteFormProvider';
+import { formattedAmount } from '@/utils';
+
+/**
+ * Reconcile credit note form fields.
+ */
+export default function ReconcileCreditNoteFormFields() {
+  const {
+    creditNote: { formatted_credits_remaining },
+  } = useReconcileCreditNoteContext();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <CreditRemainingRoot>
+        <T id={'reconcile_credit_note.dialog.credits_balance'} />
+
+        <CreditRemainingBalance>
+          {formatted_credits_remaining}
+        </CreditRemainingBalance>
+      </CreditRemainingRoot>
+
+      {/*------------ Reconcile credit entries table -----------*/}
+      <FastField name={'entries'}>
+        {({ form: { setFieldValue }, field: { value }, meta: { error } }) => (
+          <ReconcileCreditNoteEntriesTable
+            entries={value}
+            errors={error}
+            onUpdateData={(newEntries) => {
+              setFieldValue('entries', newEntries);
+            }}
+          />
+        )}
+      </FastField>
+
+      <ReconcileCreditNoteTotalLines />
+    </div>
+  );
+}
+
+/**
+ * Reconcile credit note total lines.
+ * @returns {React.JSX}
+ */
+function ReconcileCreditNoteTotalLines() {
+  // Reconcile credit note context.
+  const {
+    creditNote: { credits_remaining, currency_code },
+  } = useReconcileCreditNoteContext();
+
+  // Formik form context.
+  const { values } = useFormikContext();
+
+  // Calculate the total amount of credit entries.
+  const totalAmount = React.useMemo(
+    () => getEntriesTotal(values.entries),
+    [values.entries],
+  );
+  // Calculate the total amount of credit remaining.
+  const creditsRemaining = subtract(credits_remaining, totalAmount);
+
+  return (
+    <ReconcileCreditNoteTotalLinesRoot>
+      <ReconcileTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={
+            <T id={'reconcile_credit_note.dialog.total_amount_to_credit'} />
+          }
+          value={formattedAmount(totalAmount, currency_code)}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'reconcile_credit_note.dialog.remaining_credits'} />}
+          value={formattedAmount(creditsRemaining, currency_code)}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </ReconcileTotalLines>
+    </ReconcileCreditNoteTotalLinesRoot>
+  );
+}
+
+export const CreditRemainingRoot = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 15px;
+`;
+
+export const CreditRemainingBalance = styled.span`
+  font-weight: 600;
+  color: #343463;
+  margin-left: 5px;
+`;
+
+export const ReconcileCreditNoteTotalLinesRoot = styled.div`
+  margin-top: 15px;
+`;
+
+export const ReconcileTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

packages/webapp/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFloatingActions.tsx

@@ -0,0 +1,48 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { FormattedMessage as T } from '@/components';
+
+import { useReconcileCreditNoteContext } from './ReconcileCreditNoteFormProvider';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+/**
+ * Reconcile credit note floating actions.
+ */
+function ReconcileCreditNoteFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  const { dialogName } = useReconcileCreditNoteContext();
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button
+          intent={Intent.PRIMARY}
+          style={{ minWidth: '95px' }}
+          type="submit"
+          loading={isSubmitting}
+        >
+          {<T id={'save'} />}
+        </Button>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
+          <T id={'cancel'} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+export default compose(withDialogActions)(
+  ReconcileCreditNoteFormFloatingActions,
+);

packages/webapp/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormProvider.tsx

@@ -0,0 +1,65 @@
+// @ts-nocheck
+import React from 'react';
+import { DialogContent } from '@/components';
+import {
+  useCreditNote,
+  useReconcileCreditNote,
+  useCreateReconcileCreditNote,
+} from '@/hooks/query';
+import { isEmpty } from 'lodash';
+
+const ReconcileCreditNoteDialogContext = React.createContext();
+
+/**
+ * Reconcile credit note provider.
+ */
+function ReconcileCreditNoteFormProvider({
+  creditNoteId,
+  dialogName,
+  ...props
+}) {
+  // Handle fetch reconcile credit note details.
+  const { isLoading: isReconcileCreditLoading, data: reconcileCreditNotes } =
+    useReconcileCreditNote(creditNoteId, {
+      enabled: !!creditNoteId,
+    });
+
+  // Handle fetch vendor credit details.
+  const { data: creditNote, isLoading: isCreditNoteLoading } = useCreditNote(
+    creditNoteId,
+    {
+      enabled: !!creditNoteId,
+    },
+  );
+
+  // Create reconcile credit note mutations.
+  const { mutateAsync: createReconcileCreditNoteMutate } =
+    useCreateReconcileCreditNote();
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus = isEmpty(reconcileCreditNotes);
+
+  // provider payload.
+  const provider = {
+    dialogName,
+    reconcileCreditNotes,
+    createReconcileCreditNoteMutate,
+    isEmptyStatus,
+    creditNote,
+    creditNoteId,
+  };
+
+  return (
+    <DialogContent
+      isLoading={isReconcileCreditLoading || isCreditNoteLoading}
+      name={'reconcile-credit-note'}
+    >
+      <ReconcileCreditNoteDialogContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useReconcileCreditNoteContext = () =>
+  React.useContext(ReconcileCreditNoteDialogContext);
+
+export { ReconcileCreditNoteFormProvider, useReconcileCreditNoteContext };

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

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+import { FormattedMessage as T, Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const ReconcileCreditNoteDialogContent = React.lazy(() =>
+  import('./ReconcileCreditNoteDialogContent'),
+);
+
+/**
+ * Reconcile credit note dialog.
+ */
+function ReconcileCreditNoteDialog({
+  dialogName,
+  payload: { creditNoteId },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'reconcile_credit_note.label'} />}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      className="dialog--reconcile-credit-form"
+    >
+      <DialogSuspense>
+        <ReconcileCreditNoteDialogContent
+          creditNoteId={creditNoteId}
+          dialogName={dialogName}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(ReconcileCreditNoteDialog);

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

@@ -0,0 +1,121 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+import clsx from 'classnames';
+import { Callout, Intent, Classes } from '@blueprintjs/core';
+
+import { CLASSES } from '@/constants/classes';
+import { MoneyFieldCell, FormatDateCell, AppToaster, T } from '@/components';
+
+export const transformErrors = (errors, { setErrors }) => {
+  if (errors.some((e) => e.type === 'INVOICES_HAS_NO_REMAINING_AMOUNT')) {
+    AppToaster.show({
+      message:
+        'The amount credit from the given invoice has no remaining amount.',
+      intent: Intent.DANGER,
+    });
+  }
+  if (
+    errors.find((error) => error.type === 'CREDIT_NOTE_HAS_NO_REMAINING_AMOUNT')
+  ) {
+    AppToaster.show({
+      message: 'The total amount bigger than from remaining credit note amount',
+      intent: Intent.DANGER,
+    });
+  }
+};
+
+/**
+ * Empty status callout.
+ * @returns {React.JSX}
+ */
+export function EmptyStatuCallout() {
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <Callout intent={Intent.PRIMARY}>
+        <p>
+          <T
+            id={'reconcile_credit_note.alert.there_is_no_open_sale_invoices'}
+          />
+        </p>
+      </Callout>
+    </div>
+  );
+}
+
+/**
+ * Retrieves reconcile credit note table columns.
+ * @returns
+ */
+export const useReconcileCreditNoteTableColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('invoice_date'),
+        accessor: 'formatted_invoice_date',
+        Cell: FormatDateCell,
+        disableSortBy: true,
+        width: '120',
+      },
+      {
+        Header: intl.get('invoice_no'),
+        accessor: 'invoice_no',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'formatted_amount',
+        disableSortBy: true,
+        align: 'right',
+        width: '100',
+      },
+      {
+        Header: intl.get('reconcile_credit_note.column.remaining_amount'),
+        accessor: 'formatted_due_amount',
+        disableSortBy: true,
+        align: 'right',
+        width: '150',
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        Header: intl.get('reconcile_credit_note.column.amount_to_credit'),
+        accessor: 'amount',
+        Cell: MoneyFieldCell,
+        disableSortBy: true,
+        width: '150',
+      },
+    ],
+    [],
+  );
+};
+
+/**
+ * Sets max credit amount from sale invoicue balance.
+ */
+export const maxAmountCreditFromRemaining = (entries) => {
+  return entries.map((entry) => ({
+    ...entry,
+    amount: entry.amount ? Math.min(entry.balance, entry.amount) : '',
+  }));
+};
+
+/**
+ * Adjusts entries amount based on the given total.
+ */
+export const maxCreditNoteAmountEntries = R.curry((total, entries) => {
+  let balance = total;
+
+  return entries.map((entry) => {
+    const oldBalance = balance;
+    balance -= entry.amount ? entry.amount : 0;
+
+    return {
+      ...entry,
+      amount: entry.amount
+        ? Math.max(Math.min(entry.amount, oldBalance), 0)
+        : '',
+    };
+  });
+});