Merge branch 'feature/react-query' of https://github.com/abouolia/Bigcapital into feature/react-query

client/src/components/Dialog/DialogContent.js

@@ -1,15 +1,18 @@
 import React from 'react';
 import { Spinner, Classes } from '@blueprintjs/core';
+import classNames from 'classnames';
 
 export default function DialogContent(props) {
   const { isLoading, children } = props;
 
   const loadingContent = (
-    <div className={Classes.DIALOG_BODY}><Spinner size={30} /></div>
-  );
-  return (
-    <div>
-      {isLoading ? loadingContent : children}
+    <div
+      className={classNames(Classes.DIALOG_BODY, {
+        'is-loading': isLoading,
+      })}
+    >
+      <Spinner size={30} />
     </div>
   );
-}
+  return <div>{isLoading ? loadingContent : children}</div>;
+}

client/src/containers/Items/ItemForm.js

@@ -94,8 +94,10 @@ function ItemForm({
   );
 
   // Transform API errors.
-  const transformApiErrors = (errors) => {
+  const transformApiErrors = (error) => {
+    const { response: { data: { errors } } } = error;
     const fields = {};
+
     if (errors.find((e) => e.type === 'ITEM.NAME.ALREADY.EXISTS')) {
       fields.name = formatMessage({ id: 'the_name_used_before' });
     }

client/src/containers/Items/ItemFormBody.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import { FastField, Field, ErrorMessage } from 'formik';
-import { FormGroup, Classes, Checkbox, ControlGroup } from '@blueprintjs/core';
+import {
+  FormGroup,
+  Classes,
+  TextArea,
+  Checkbox,
+  ControlGroup,
+} from '@blueprintjs/core';
 import {
   AccountsSelectList,
   MoneyInputGroup,
@@ -100,6 +106,25 @@ function ItemFormBody({ baseCurrency }) {
               </FormGroup>
             )}
           </FastField>
+
+          <FastField name={'sell_description'}>
+            {({ form: { values }, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'description'} />}
+                className={'form-group--sell-description'}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name={'description'} />}
+                inline={true}
+              >
+                <TextArea
+                  growVertically={true}
+                  height={280}
+                  {...field}
+                  disabled={!values.sellable}
+                />
+              </FormGroup>
+            )}
+          </FastField>
         </Col>
 
         <Col xs={6}>
@@ -174,6 +199,25 @@ function ItemFormBody({ baseCurrency }) {
               </FormGroup>
             )}
           </FastField>
+
+          <FastField name={'purchase_description'}>
+            {({ form: { values }, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'description'} />}
+                className={'form-group--purchase-description'}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name={'description'} />}
+                inline={true}
+              >
+                <TextArea
+                  growVertically={true}
+                  height={280}
+                  {...field}
+                  disabled={!values.purchasable}
+                />
+              </FormGroup>
+            )}
+          </FastField>
         </Col>
       </Row>
     </div>

client/src/services/axios.js

@@ -1,10 +1,6 @@
 import axios from 'axios';
-import React from 'react';
-import { Intent } from '@blueprintjs/core';
 import { store } from 'store/createStore';
 import { logout } from 'store/authentication/authentication.actions';
-import AppToaster from 'components/AppToaster';
-import { FormattedMessage as T, useIntl } from 'react-intl';
 import { setGlobalErrors } from 'store/globalErrors/globalErrors.actions';
 const http = axios.create();
 

client/src/style/components/Dialog/Dialog.scss

@@ -8,8 +8,12 @@
     background: #ebf1f5;
   }
 
-  .bp3-spinner{
-    padding-top: 10px;
-    margin-bottom: -10px;
+  &-body{
+    &.is-loading{
+      .bp3-spinner{
+        padding-top: 10px;
+        margin-bottom: -10px;
+      } 
+    }
   }
 }

client/src/style/pages/Items/PageForm.scss

@@ -46,6 +46,14 @@
     .form-group--purchasable {
       margin-bottom: 1rem;
     }
+
+    .form-group--purchase-description,
+    .form-group--sell-description{
+      
+      textarea{
+        width: 100%;
+      }
+    }
   }
 
   #{$self}__section {