Merge branch 'feature/landed-cost' of https://github.com/abouolia/Ratteb into feature/landed-cost

client/src/components/DataTableCells/CheckBoxFieldCell.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Classes, Checkbox, FormGroup, Intent } from '@blueprintjs/core';
+
+const CheckboxEditableCell = ({
+  row: { index },
+  column: { id },
+  cell: { value: initialValue },
+  payload,
+}) => {
+  const [value, setValue] = React.useState(initialValue);
+
+  const onChange = (e) => {
+    setValue(e.target.value);
+  };
+  const onBlur = () => {
+    payload.updateData(index, id, value);
+  };
+  React.useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = payload.errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      // intent={error ? Intent.DANGER : null}
+      className={classNames(Classes.FILL)}
+    >
+      <Checkbox
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        minimal={true}
+        className="ml2"
+      />
+    </FormGroup>
+  );
+};
+
+export default CheckboxEditableCell;

client/src/components/DataTableCells/index.js

@@ -6,6 +6,7 @@ import ItemsListCell from './ItemsListCell';
 import PercentFieldCell from './PercentFieldCell';
 import { DivFieldCell, EmptyDiv } from './DivFieldCell';
 import NumericInputCell from './NumericInputCell';
+import CheckBoxFieldCell from './CheckBoxFieldCell'
 
 export {
   AccountsListFieldCell,
@@ -16,5 +17,6 @@ export {
   PercentFieldCell,
   DivFieldCell,
   EmptyDiv,
-  NumericInputCell
+  NumericInputCell,
+  CheckBoxFieldCell
 };

client/src/containers/Alerts/Expenses/ExpenseDeleteAlert.js

@@ -21,11 +21,7 @@ function ExpenseDeleteAlert({
   isOpen,
   payload: { expenseId },
 }) {
-  
+  const { mutateAsync: deleteExpenseMutate, isLoading } = useDeleteExpense();
-  const {
-    mutateAsync: deleteExpenseMutate,
-    isLoading,
-  } = useDeleteExpense();
 
   // Handle cancel expense journal.
   const handleCancelExpenseDelete = () => {
@@ -34,17 +30,34 @@ function ExpenseDeleteAlert({
 
   // Handle confirm delete expense.
   const handleConfirmExpenseDelete = () => {
-    deleteExpenseMutate(expenseId).then(() => {
+    deleteExpenseMutate(expenseId)
-      AppToaster.show({
+      .then(() => {
-        message: intl.get(
+        AppToaster.show({
-          'the_expense_has_been_deleted_successfully',
+          message: intl.get('the_expense_has_been_deleted_successfully', {
-          { number: expenseId },
+            number: expenseId,
-        ),
+          }),
-        intent: Intent.SUCCESS,
+          intent: Intent.SUCCESS,
-      });
+        });
-    }).finally(() => {
+        closeAlert('expense-delete');
-      closeAlert('expense-delete');
+      })
-    });
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          if (
+            errors.find((e) => e.type === 'EXPENSE_HAS_ASSOCIATED_LANDED_COST')
+          ) {
+            AppToaster.show({
+              intent: Intent.DANGER,
+              message: intl.get(
+                'couldn_t_delete_expense_transaction_has_associated_located_landed_cost_transaction',
+              ),
+            });
+          }
+        },
+      );
   };
 
   return (
@@ -68,4 +81,4 @@ function ExpenseDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-)(ExpenseDeleteAlert);
+)(ExpenseDeleteAlert);

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostDialogProvider.js

@@ -1,27 +1,50 @@
 import React from 'react';
 import { DialogContent } from 'components';
-import { useBill } from 'hooks/query';
+import { useBill, useCreateLandedCost } from 'hooks/query';
 
-import { pick } from 'lodash';
+import { map, omit, pick } from 'lodash';
+import * as R from 'ramda';
 
 const AllocateLandedCostDialogContext = React.createContext();
 
 /**
  * Allocate landed cost provider.
  */
-function AllocateLandedCostDialogProvider({ billId, dialogName, ...props }) {
+function AllocateLandedCostDialogProvider({
+  billId,
+  query,
+  dialogName,
+  ...props
+}) {
   // Handle fetch bill details.
   const { isLoading: isBillLoading, data: bill } = useBill(billId, {
     enabled: !!billId,
   });
 
+  // Create landed cost mutations.
+  const { mutateAsync: createLandedCostMutate } = useCreateLandedCost();
+
+  // const L = [bill].map(({ entries: items }) => ({
+  //   items,
+  // }));
+  // let obj = { oldKey: 1, b: 2, c: 3 };
+  // const { oldKey: newKey, ...rest } = obj;
+  // obj = { newKey, ...rest };
+
+  // const obj = { ...pick(bill, ['entries']).map((index) => index) };
+
+
   // provider payload.
   const provider = {
-    bill: {
+    items: {
       ...pick(bill, ['entries']),
     },
     dialogName,
+    query,
+    createLandedCostMutate,
+    billId,
   };
+
   return (
     <DialogContent isLoading={isBillLoading} name={'allocate-landed-cost'}>
       <AllocateLandedCostDialogContext.Provider value={provider} {...props} />

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { DataTable, MoneyFieldCell, DataTableEditable } from 'components';
+import { MoneyFieldCell, DataTableEditable } from 'components';
 import { compose, updateTableRow } from 'utils';
 
 /**
@@ -10,12 +10,13 @@ export default function AllocateLandedCostEntriesTable({
   onUpdateData,
   entries,
 }) {
+
   // allocate landed cost entries table columns.
   const columns = React.useMemo(
     () => [
       {
         Header: intl.get('item'),
-        accessor: 'item_id',
+        accessor: 'item.name',
         disableSortBy: true,
         width: '150',
       },
@@ -59,38 +60,14 @@ export default function AllocateLandedCostEntriesTable({
     [onUpdateData, entries],
   );
 
-  const LL = [
+  return (
-    {
+    <DataTableEditable
-      item_id: 'ITEM',
+      columns={columns}
-      quantity: '30000',
+      data={entries}
-      rate: '100000',
+      payload={{
-      amount: '400',
+        errors: [],
-    },
+        updateData: handleUpdateData,
-    {
+      }}
-      item_id: 'ITEM',
+    />
-      quantity: '30000',
+  );
-      rate: '100000',
-      amount: '400',
-    },
-    {
-      item_id: 'ITEM',
-      quantity: '30000',
-      rate: '100000',
-      amount: '400',
-    },
-    {
-      item_id: 'ITEM',
-      quantity: '30000',
-      rate: '100000',
-      amount: '400',
-    },
-    {
-      item_id: 'ITEM',
-      quantity: '30000',
-      rate: '100000',
-      amount: '400',
-    },
-  ];
-
-  return <DataTableEditable columns={columns} data={LL} />;
 }

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.js

@@ -13,7 +13,6 @@ function AllocateLandedCostFloatingActions({
 }) {
   // Formik context.
   const { isSubmitting } = useFormikContext();
-
   const { dialogName } = useAllocateLandedConstDialogContext();
 
   // Handle cancel button click.

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.js

@@ -1,24 +1,27 @@
 import React from 'react';
 import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
 import moment from 'moment';
+import { pick, omit } from 'lodash';
 
 import 'style/pages/AllocateLandedCost/AllocateLandedCostForm.scss';
 
+import { AppToaster } from 'components';
 import { AllocateLandedCostFormSchema } from './AllocateLandedCostForm.schema';
 import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogProvider';
 import AllocateLandedCostFormContent from './AllocateLandedCostFormContent';
 import withDialogActions from 'containers/Dialog/withDialogActions';
-
 import { compose } from 'utils';
 
 const defaultInitialValues = {
-  transaction_type: 'bills',
+  transaction_type: 'Bill',
   transaction_date: moment(new Date()).format('YYYY-MM-DD'),
   transaction_id: '',
   transaction_entry_id: '',
   amount: '',
   allocation_method: 'quantity',
-  entries: {
+  items: {
     entry_id: '',
     cost: '',
   },
@@ -31,26 +34,59 @@ function AllocateLandedCostForm({
   // #withDialogActions
   closeDialog,
 }) {
-  const { bill, dialogName } = useAllocateLandedConstDialogContext();
+  const { items, dialogName, createLandedCostMutate } =
+    useAllocateLandedConstDialogContext();
 
   // Initial form values.
   const initialValues = {
     ...defaultInitialValues,
-    ...bill,
+    ...items,
   };
 
-
   // Handle form submit.
-  const handleFormSubmit = (values, { setSubmitting }) => {};
+  const handleFormSubmit = (values, { setSubmitting }) => {
+    setSubmitting(false);
+    closeDialog(dialogName);
+
+    const entries = [values]
+      .filter((entry) => entry.id && entry.cost)
+      .map((entry) => ({
+        entry_id: entry.id,
+        ...pick(entry, ['cost']),
+      }));
+
+    const form = {
+      ...values,
+      // items:{entries},
+    };
+
+    // Handle the request success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('the_landed_cost_has_been_created_successfully'),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+    };
+
+    // Handle the request error.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+    createLandedCostMutate(form).then(onSuccess).catch(onError);
+  };
 
   return (
     <Formik
       validationSchema={AllocateLandedCostFormSchema}
       initialValues={initialValues}
       onSubmit={handleFormSubmit}
-    >
+      component={AllocateLandedCostFormContent}
-      <AllocateLandedCostFormContent />
+    />
-    </Formik>
   );
 }
 

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormBody.js

@@ -13,12 +13,14 @@ export default function AllocateLandedCostFormBody() {
           field: { value },
           meta: { error, touched },
         }) => (
-          <AllocateLandedCostEntriesTable
+          <>
-            entries={value}
+            <AllocateLandedCostEntriesTable
-            onUpdateData={(newEntries) => {
+              entries={value}
-              setFieldValue('entries', newEntries);
+              onUpdateData={(newEntries) => {
-            }}
+                setFieldValue('entries', newEntries);
-          />
+              }}
+            />
+          </>
         )}
       </FastField>
     </div>

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormContent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Form } from 'formik';
 import AllocateLandedCostFormFields from './AllocateLandedCostFormFields';
 import AllocateLandedCostFloatingActions from './AllocateLandedCostFloatingActions';
+
 /**
  * Allocate landed cost form content.
  */

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.js

@@ -1,34 +1,39 @@
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
 import {
   Classes,
   FormGroup,
   RadioGroup,
   Radio,
   InputGroup,
-  Position,
 } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
 import classNames from 'classnames';
 import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
-import {
+import { inputIntent, handleStringChange } from 'utils';
-  inputIntent,
-  momentFormatter,
-  tansformDateValue,
-  handleDateChange,
-  handleStringChange,
-} from 'utils';
 import { FieldRequiredHint, ListSelect } from 'components';
 import { CLASSES } from 'common/classes';
 import allocateLandedCostType from 'common/allocateLandedCostType';
-import AccountsSuggestField from 'components/AccountsSuggestField';
+import { useLandedCostTransaction } from 'hooks/query';
+
 import AllocateLandedCostFormBody from './AllocateLandedCostFormBody';
+import { getEntriesByTransactionId } from './utils';
 
 /**
  * Allocate landed cost form fields.
  */
 export default function AllocateLandedCostFormFields() {
+  const { values } = useFormikContext();
+
+  const {
+    data: { transactions },
+  } = useLandedCostTransaction(values.transaction_type);
+
+  const transactionEntry = getEntriesByTransactionId(
+    transactions,
+    values.transaction_id,
+  );
+
   return (
     <div className={Classes.DIALOG_BODY}>
       {/*------------Transaction type -----------*/}
@@ -61,69 +66,64 @@ export default function AllocateLandedCostFormFields() {
         )}
       </FastField>
 
-      {/*------------Transaction date -----------*/}
-      <FastField name={'transaction_date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'transaction_date'} />}
-            // labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="transaction_date" />}
-            minimal={true}
-            className={classNames(CLASSES.FILL, 'form-group--transaction_date')}
-            inline={true}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('transaction_date', formattedDate);
-              })}
-              value={tansformDateValue(value)}
-              popoverProps={{
-                position: Position.BOTTOM,
-                minimal: true,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
       {/*------------ Transaction  -----------*/}
-      <FastField name={'transaction_id'}>
+      <Field name={'transaction_id'}>
-        {({ form, field, meta: { error, touched } }) => (
+        {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'transaction_id'} />}
             // labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name="transaction_id" />}
-            className={'form-group--transaction_id'}
+            className={classNames(CLASSES.FILL, 'form-group--transaction_id')}
             inline={true}
           >
-            <AccountsSuggestField
+            <ListSelect
-              accounts={[]}
+              items={transactions}
-              onAccountSelected={({ id }) =>
+              onItemSelect={({ id }) => {
-                form.setFieldValue('transaction_id', id)
+                form.setFieldValue('transaction_id', id);
-              }
-              inputProps={{
-                placeholder: intl.get('select_transaction'),
               }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'id'}
+              textProp={'name'}
+              labelProp={'id'}
+              defaultText={intl.get('select_transaction')}
+              popoverProps={{ minimal: true }}
             />
           </FormGroup>
         )}
-      </FastField>
+      </Field>
+
       {/*------------ Transaction line  -----------*/}
-      <FastField name={'transaction_entry_id'}>
+      <Field name={'transaction_entry_id'}>
-        {({ form, field, meta: { error, touched } }) => (
+        {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'transaction_line'} />}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name="transaction_entry_id" />}
-            className={'form-group--transaction_entry_id'}
+            className={classNames(
+              CLASSES.FILL,
+              'form-group--transaction_entry_id',
+            )}
             inline={true}
           >
-            <InputGroup {...field} />
+            <ListSelect
+              items={transactionEntry}
+              onItemSelect={({ id }) => {
+                form.setFieldValue('transaction_entry_id', id);
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'id'}
+              textProp={'name'}
+              labelProp={'id'}
+              defaultText={intl.get('select_transaction')}
+              popoverProps={{ minimal: true }}
+            />
           </FormGroup>
         )}
-      </FastField>
+      </Field>
+
       {/*------------ Amount -----------*/}
       <FastField name={'amount'}>
         {({ form, field, meta: { error, touched } }) => (
@@ -138,6 +138,7 @@ export default function AllocateLandedCostFormFields() {
           </FormGroup>
         )}
       </FastField>
+
       {/*------------ Allocation method -----------*/}
       <FastField name={'allocation_method'}>
         {({ form, field: { value }, meta: { touched, error } }) => (
@@ -158,7 +159,7 @@ export default function AllocateLandedCostFormFields() {
               inline={true}
             >
               <Radio label={<T id={'quantity'} />} value="quantity" />
-              <Radio label={<T id={'valuation'} />} value="valuation" />
+              <Radio label={<T id={'valuation'} />} value="value" />
             </RadioGroup>
           </FormGroup>
         )}

client/src/containers/Dialogs/AllocateLandedCostDialog/utils.js

@@ -0,0 +1,4 @@
+export function getEntriesByTransactionId(transactions, id) {
+  const transaction = transactions.find((trans) => trans.id === id);
+  return transaction ? transaction.entries : [];
+}

client/src/containers/Drawers/BillDrawer/BillDrawerAlerts.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import BillTransactionDeleteAlert from 'containers/Alerts/Bills/BillTransactionDeleteAlert';
+
+/**
+ * Bill drawer alert.
+ */
+export default function BillDrawerAlerts() {
+  return (
+    <div class="bills-alerts">
+      <BillTransactionDeleteAlert name="transaction-delete" />
+    </div>
+  );
+}

client/src/containers/Drawers/BillDrawer/BillDrawerContent.js

@@ -1,16 +1,19 @@
 import React from 'react';
 import { BillDrawerProvider } from './BillDrawerProvider';
 import BillDrawerDetails from './BillDrawerDetails';
+import BillDrawerAlerts from './BillDrawerAlerts';
+
 /**
  * Bill drawer content.
  */
 export default function BillDrawerContent({
   // #ownProp
-  billId,
+  bill,
 }) {
   return (
-    <BillDrawerProvider billId={billId}>
+    <BillDrawerProvider billId={bill}>
       <BillDrawerDetails />
+      <BillDrawerAlerts />
     </BillDrawerProvider>
   );
 }

client/src/containers/Drawers/BillDrawer/BillDrawerProvider.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { useBillLocatedLandedCost } from 'hooks/query';
 
 const BillDrawerContext = React.createContext();
 
@@ -8,10 +9,18 @@ const BillDrawerContext = React.createContext();
  * Bill drawer provider.
  */
 function BillDrawerProvider({ billId, ...props }) {
+  // Handle fetch bill located landed cost transaction.
+  const { isLoading: isLandedCostLoading, data: transactions } =
+    useBillLocatedLandedCost(billId, {
+      enabled: !!billId,
+    });
+
   //provider.
-  const provider = {};
+  const provider = {
+    transactions,
+  };
   return (
-    <DashboardInsider>
+    <DashboardInsider loading={isLandedCostLoading}>
       <DrawerHeaderContent
         name="bill-drawer"
         title={intl.get('bill_details')}

client/src/containers/Expenses/ExpenseForm/ExpenseForm.js

@@ -79,7 +79,10 @@ function ExpenseForm({
     }
     const categories = values.categories.filter(
       (category) =>
-        category.amount && category.index && category.expense_account_id,
+        category.amount &&
+        category.index &&
+        category.expense_account_id &&
+        category.landed_cost,
     );
 
     const form = {

client/src/containers/Expenses/ExpenseForm/components.js

@@ -7,6 +7,7 @@ import {
   InputGroupCell,
   MoneyFieldCell,
   AccountsListFieldCell,
+  CheckBoxFieldCell,
 } from 'components/DataTableCells';
 import { formattedAmount, safeSumBy } from 'utils';
 
@@ -49,19 +50,6 @@ const ActionsCellRenderer = ({
   );
 };
 
-/**
- * Landed cost cell.
- */
-const LandedCostCell = ({
-  row: { index },
-  column: { id },
-  cell: { value: initialValue },
-  data,
-  payload,
-}) => {
-  return <Checkbox minimal={true} className="ml2" />;
-};
-
 /**
  * Landed cost header cell.
  */
@@ -142,7 +130,7 @@ export function useExpenseFormTableColumns() {
       {
         Header: LandedCostHeaderCell,
         accessor: 'landed_cost',
-        Cell: LandedCostCell,
+        Cell: CheckBoxFieldCell,
         disableSortBy: true,
         disableResizing: true,
         width: 70,

client/src/containers/Expenses/ExpenseForm/utils.js

@@ -27,7 +27,7 @@ export const defaultExpenseEntry = {
   amount: '',
   expense_account_id: '',
   description: '',
-  landed_cost: false,
+  landed_cost: 0,
 };
 
 export const defaultExpense = {

client/src/containers/Purchases/Bills/BillForm/utils.js

@@ -51,4 +51,14 @@ export const handleDeleteErrors = (errors) => {
       intent: Intent.DANGER,
     });
   }
+  if (
+    errors.find((error) => error.type === 'BILL_HAS_ASSOCIATED_LANDED_COSTS')
+  ) {
+    AppToaster.show({
+      message: intl.get(
+        'cannot_delete_bill_that_has_associated_landed_cost_transactions',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
 };

client/src/hooks/query/landedCost.js

@@ -63,8 +63,11 @@ export function useLandedCostTransaction(query, props) {
       params: { transaction_type: query },
     },
     {
-      select: (res) => res.data.transactions,
+      select: (res) => res.data,
-      defaultData: [],
+
+      defaultData: {
+        transactions: [],
+      },
       ...props,
     },
   );

client/src/lang/en/index.json

@@ -1126,22 +1126,25 @@
   "manual_journal_number": "Manual journal {number}",
   "conditions_and_terms": "Conditions and terms",
   "allocate_landed_coast": "Allocate landed cost",
-  "transaction_date":"Transaction date",
+  "transaction_date": "Transaction date",
-  "transaction_type":"Transaction type",
+  "transaction_type": "Transaction type",
-  "transaction_id":"Transaction #",
+  "transaction_id": "Transaction #",
-  "transaction_number":"Transaction number",
+  "transaction_number": "Transaction number",
-  "transaction_line":"Transaction line",
+  "transaction_line": "Transaction line",
-  "allocation_method":"Allocation method",
+  "allocation_method": "Allocation method",
-  "valuation":"Valuation",
+  "valuation": "Valuation",
-  "select_transaction":"Select transaction account",
+  "select_transaction": "Select transaction account",
-  "details":"Details",
+  "details": "Details",
-  "located_landed_cost":"Located Landed Cost",
+  "located_landed_cost": "Located Landed Cost",
-  "delete_transaction":"Delete transaction",
+  "delete_transaction": "Delete transaction",
   "all_items": "All items",
   "Specific items": "Specific items",
   "Selected contacts": "Selected contacts",
   "All contacts": "All contacts",
   "Selected items ({count})": "Selected items ({count})",
   "All items": "All items",
-  "No items": "No items"
+  "No items": "No items",
+  "cannot_delete_bill_that_has_associated_landed_cost_transactions": "Cannot delete bill that has associated landed cost transactions.",
+  "couldn_t_delete_expense_transaction_has_associated_located_landed_cost_transaction": "Couldn't delete expense transaction has associated located landed cost transaction",
+  "the_landed_cost_has_been_created_successfully": "The landed cost has been created successfully"
 }