Merge branch 'develop' of https://github.com/bigcapitalhq/client into develop

src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.js

@@ -106,6 +106,6 @@ export default compose(
     paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
     paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
     paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
-    preferredDepositAccount: paymentReceiveSettings?.depositAccount,
+    preferredDepositAccount: paymentReceiveSettings?.preferredDepositAccount,
   })),
 )(QuickPaymentReceiveForm);

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js

@@ -1,30 +1,22 @@
 import React from 'react';
-import styled from 'styled-components';
-import { Card, FormattedMessage as T } from 'components';
+import { Card } from 'components';
 import { ItemManuTransaction } from './utils';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import ItemPaymentTransactionContent from './ItemPaymentTransactionContent';
 
 export const ItemPaymentTransactions = () => {
-  const { value } = useItemDetailDrawerContext();
+  const { value, setValue } = useItemDetailDrawerContext();
+
+  // handle item change.
+  const handleItemChange = (item) => {
+    setValue(item);
+  };
 
   return (
     <Card>
-      <ItemManuTransactions>
-        <T id={'item.drawer_transactions_by'} />
-        <ItemManuTransaction />
-      </ItemManuTransactions>
+      <ItemManuTransaction onChange={handleItemChange} />
       <ItemPaymentTransactionContent tansactionType={value} />
     </Card>
   );
 };
 
-const ItemManuTransactions = styled.div`
-  display: flex;
-  align-items: center;
-  color: #727983;
-  .bp3-button {
-    padding-left: 6px;
-    font-weight: 500;
-  }
-`;

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js

@@ -7,19 +7,20 @@ import {
   PopoverInteractionKind,
   Position,
 } from '@blueprintjs/core';
+import styled from 'styled-components';
 import { FormattedMessage as T } from 'components';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import transactions from '../../../../common/itemPaymentTranactionsOption';
 
-export const ItemManuTransaction = () => {
+export const ItemManuTransaction = ({ onChange }) => {
   const { value, setValue } = useItemDetailDrawerContext();
 
-  // const handleClickItem = (item) => {
-  //   onChange && onChange(item);
-  // };
+  const handleClickItem = (item) => {
+    onChange && onChange(item);
+  };
 
   const content = transactions.map(({ name, label }) => (
-    <MenuItem onClick={() => setValue(name)} text={label} />
+    <MenuItem onClick={() => handleClickItem(name)} text={label} />
   ));
 
   return (
@@ -32,7 +33,28 @@ export const ItemManuTransaction = () => {
       }}
       content={<Menu>{content}</Menu>}
     >
-      <Button minimal={true} text={<T id={value} />} rightIcon={'caret-down'} />
+      <ItemSwitchButton
+        minimal={true}
+        text={<T id={'item.drawer_transactions_by'} />}
+        rightIcon={'caret-down'}
+      >
+        <ItemSwitchText>
+          <T id={value} />
+        </ItemSwitchText>
+      </ItemSwitchButton>
     </Popover>
   );
 };
+
+const ItemSwitchButton = styled(Button)`
+  .bp3-button-text {
+    display: flex;
+    color: #727983;
+  }
+`;
+
+const ItemSwitchText = styled.span`
+  font-weight: 600;
+  color: #33304a;
+  padding-left: 3px;
+`;

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js

@@ -1,8 +1,6 @@
 import React from 'react';
+
 import { DrawerBody } from 'components';
-
-import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
-
 import PaymentMadeDetails from './PaymentMadeDetails';
 import { PaymentMadeDetailProvider } from './PaymentMadeDetailProvider';
 

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js

@@ -1,13 +1,19 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import clsx from 'classnames';
 import { defaultTo } from 'lodash';
 
-import { DetailsMenu, DetailItem, FormatDate } from 'components';
+import {
+  Row,
+  Col,
+  FormatDate,
+  DetailsMenu,
+  DetailItem,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  ButtonLink,
+} from 'components';
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
-
 /**
  * Payment made - detail panel - header.
  */
@@ -15,39 +21,53 @@ export default function PaymentMadeDetailHeader() {
   const { paymentMade } = usePaymentMadeDetailContext();
 
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel_header)}>
-      <DetailsMenu>
-        <DetailItem label={intl.get('amount')}>
-          <h3 class="big-number" children={paymentMade.formatted_amount} />
-        </DetailItem>
-        <DetailItem
-          label={intl.get('payment_made.details.payment_number')}
-          children={defaultTo(paymentMade.payment_number, '-')}
-        />
-        <DetailItem
-          label={intl.get('customer_name')}
-          children={paymentMade.vendor?.display_name}
-        />
-        <DetailItem
-          label={intl.get('payment_account')}
-          children={paymentMade.payment_account?.name}
-        />
-        <DetailItem
-          label={intl.get('payment_date')}
-          children={<FormatDate value={paymentMade.payment_date} />}
-        />
-      </DetailsMenu>
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <DetailItem label={intl.get('amount')}>
+            <h3 class="big-number">{paymentMade.formatted_amount}</h3>
+          </DetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
 
-      <DetailsMenu direction={'horizantal'} minLabelSize={'160px'}>
-        <DetailItem
-          label={intl.get('description')}
-          children={defaultTo(paymentMade.statement, '-')}
-        />
-        <DetailItem
-          label={intl.get('created_at')}
-          children={<FormatDate value={paymentMade.created_at} />}
-        />
-      </DetailsMenu>
-    </div>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('payment_made.details.payment_number')}
+              children={defaultTo(paymentMade.payment_number, '-')}
+            />
+            <DetailItem label={intl.get('vendor_name')}>
+              <ButtonLink>{paymentMade.vendor?.display_name}</ButtonLink>
+            </DetailItem>
+            <DetailItem
+              label={intl.get('payment_account')}
+              children={paymentMade.payment_account?.name}
+            />
+
+            <DetailItem
+              label={intl.get('payment_date')}
+              children={<FormatDate value={paymentMade.payment_date} />}
+            />
+          </DetailsMenu>
+        </Col>
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem
+              label={intl.get('description')}
+              children={defaultTo(paymentMade.statement, '-')}
+            />
+            <DetailItem
+              label={intl.get('created_at')}
+              children={<FormatDate value={paymentMade.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js

@@ -20,26 +20,14 @@ function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
       enabled: !!paymentMadeId,
     },
   );
-  // Handle fetch transaction by reference.
-  const {
-    data: { transactions },
-    isLoading: isTransactionLoading,
-  } = useTransactionsByReference(
-    {
-      reference_id: paymentMadeId,
-      reference_type: 'BillPayment',
-    },
-    { enabled: !!paymentMadeId },
-  );
 
   //provider.
   const provider = {
-    transactions,
     paymentMadeId,
     paymentMade,
   };
 
-  const loading = isTransactionLoading || isPaymentMadeLoading;
+  const loading = isPaymentMadeLoading;
 
   return (
     <DrawerLoading loading={loading}>

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js

@@ -1,28 +1,21 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { Card } from 'components';
+import { CommercialDocBox } from 'components';
 
-import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
 import PaymentMadeDetailHeader from './PaymentMadeDetailHeader';
 import PaymentMadeDetailTable from './PaymentMadeDetailTable';
 import PaymentMadeDetailFooter from './PaymentMadeDetailFooter';
 
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
-
 /**
  * Payment made detail tab.
+ * @returns {React.JSX}
  */
 export default function PaymentMadeDetailTab() {
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel)}>
-      <PaymentMadeDetailActionsBar />
-
-      <Card>
-        <PaymentMadeDetailHeader />
-        <PaymentMadeDetailTable />
-        <PaymentMadeDetailFooter />
-      </Card>
-    </div>
+    <CommercialDocBox>
+      <PaymentMadeDetailHeader />
+      <PaymentMadeDetailTable />
+      <PaymentMadeDetailFooter />
+    </CommercialDocBox>
   );
 }

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import clsx from 'classnames';
+
+import { CommercialDocEntriesTable } from 'components';
 
 import { usePaymentMadeEntriesColumns } from './utils';
-import { DataTable } from 'components';
-
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+import { TableStyle } from 'common';
 
 /**
  * Payment made read-only details table.
@@ -19,12 +18,10 @@ export default function PaymentMadeDetailTable() {
   const { paymentMade } = usePaymentMadeDetailContext();
 
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel_table)}>
-      <DataTable
-        columns={columns}
-        data={paymentMade.entries}
-        className={'table-constrant'}
-      />
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={paymentMade.entries}
+      styleName={TableStyle.Constrant}
+    />
   );
 }

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js

@@ -1,35 +1,47 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
 import { DrawerMainTabs } from 'components';
-import PaymentMadeDetailTab from './PaymentMadeDetailTab';
-import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
-import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
+import PaymentMadeDetailTab from './PaymentMadeDetailTab';
+import PaymentMadeGLEntriesPanel from './PaymentMadeGLEntriesPanel';
 
 /**
  * Payment made - view detail.
+ * @returns {React.JSX}
  */
-export default function PaymentMadeDetails() {
-  const { transactions } = usePaymentMadeDetailContext();
 
+function PaymentMadeDetailsTabs() {
   return (
-    <div className={clsx(PaymentDrawerCls.root)}>
-      <DrawerMainTabs defaultSelectedTabId="details">
-        <Tab
-          id={'details'}
-          title={intl.get('details')}
-          panel={<PaymentMadeDetailTab />}
-        />
-        <Tab
-          id={'journal_entries'}
-          title={intl.get('journal_entries')}
-          panel={<JournalEntriesTable transactions={transactions} />}
-        />
-      </DrawerMainTabs>
-    </div>
+    <DrawerMainTabs defaultSelectedTabId="details">
+      <Tab
+        id={'details'}
+        title={intl.get('details')}
+        panel={<PaymentMadeDetailTab />}
+      />
+      <Tab
+        id={'journal_entries'}
+        title={intl.get('journal_entries')}
+        panel={<PaymentMadeGLEntriesPanel />}
+      />
+    </DrawerMainTabs>
   );
 }
+
+/**
+ * Payment made view detail.
+ * @returns {React.JSX}
+ */
+export default function PaymentMadeDetail() {
+  return (
+    <PaymentMadeDetailsRoot>
+      <PaymentMadeDetailActionsBar />
+      <PaymentMadeDetailsTabs />
+    </PaymentMadeDetailsRoot>
+  );
+}
+
+const PaymentMadeDetailsRoot = styled.div``;

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeGLEntriesPanel.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from 'components';
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../JournalEntriesTable/JournalEntriesTable';
+
+import { useTransactionsByReference } from 'hooks/query';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+/**
+ * Payment made GL entries table panel.
+ * @returns {React.JSX}
+ */
+export default function PaymentMadeGLEntriesPanel() {
+  const { paymentMadeId } = usePaymentMadeDetailContext();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: paymentMadeId,
+      reference_type: 'BillPayment',
+    },
+    { enabled: !!paymentMadeId },
+  );
+
+  return (
+    <PaymentMadeGLEntriesRoot>
+      <AmountDisplayedBaseCurrencyMessage />
+      <JournalEntriesTable
+        loading={isTransactionLoading}
+        transactions={transactions}
+      />
+    </PaymentMadeGLEntriesRoot>
+  );
+}
+
+const PaymentMadeGLEntriesRoot = styled(Card)``;

src/containers/Preferences/Accountant/Accountant.schema.js

@@ -4,9 +4,9 @@ const Schema = Yup.object().shape({
   accounting_basis: Yup.string().required(),
   account_code_required: Yup.boolean().nullable(),
   account_code_unique: Yup.boolean().nullable(),
-  deposit_account: Yup.number().nullable(),
   withdrawal_account: Yup.number().nullable(),
-  advance_deposit: Yup.number().nullable(),
+  preferred_deposit_account: Yup.number().nullable(),
+  preferred_advance_deposit: Yup.number().nullable(),
 });
 
 export const AccountantSchema = Schema;

src/containers/Preferences/Accountant/AccountantForm.js

@@ -17,6 +17,7 @@ import {
   FieldRequiredHint,
 } from 'components';
 import { handleStringChange, inputIntent } from 'utils';
+import { ACCOUNT_TYPE } from 'common/accountTypes';
 
 import { useAccountantFormContext } from './AccountantFormProvider';
 
@@ -113,7 +114,7 @@ export default function AccountantForm() {
       </FastField>
 
       {/* ----------- Deposit customer account ----------- */}
-      <FastField name={'deposit_account'}>
+      <FastField name={'preferred_deposit_account'}>
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -138,11 +139,15 @@ export default function AccountantForm() {
             <AccountsSelectList
               accounts={accounts}
               onAccountSelected={({ id }) => {
-                setFieldValue('deposit_account', id);
+                setFieldValue('preferred_deposit_account', id);
               }}
               selectedAccountId={value}
               defaultSelectText={<T id={'select_payment_account'} />}
-              // filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
+              filterByTypes={[
+                ACCOUNT_TYPE.CASH,
+                ACCOUNT_TYPE.BANK,
+                ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+              ]}
             />
           </FormGroup>
         )}
@@ -178,13 +183,18 @@ export default function AccountantForm() {
               }}
               selectedAccountId={value}
               defaultSelectText={<T id={'select_payment_account'} />}
+              filterByTypes={[
+                ACCOUNT_TYPE.CASH,
+                ACCOUNT_TYPE.BANK,
+                ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+              ]}
             />
           </FormGroup>
         )}
       </FastField>
 
       {/* ----------- Withdrawal customer account ----------- */}
-      <FastField name={'advance_deposit'}>
+      <FastField name={'preferred_advance_deposit'}>
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -209,7 +219,7 @@ export default function AccountantForm() {
             <AccountsSelectList
               accounts={accounts}
               onAccountSelected={({ id }) => {
-                setFieldValue('advance_deposit', id);
+                setFieldValue('preferred_advance_deposit', id);
               }}
               selectedAccountId={value}
               defaultSelectText={<T id={'select_payment_account'} />}

src/containers/Preferences/Accountant/AccountantFormPage.js

@@ -28,15 +28,13 @@ function AccountantFormPage({
   accountsSettings,
   billPaymentSettings,
 }) {
-  
-
   const { saveSettingMutate } = useAccountantFormContext();
 
   const accountantSettings = {
     ...billPaymentSettings,
     ...accountsSettings,
     ...pick(organizationSettings, ['accountingBasis']),
-    ...pick(paymentReceiveSettings, ['depositAccount', 'advanceDeposit']),
+    ...pick(paymentReceiveSettings, ['preferredDepositAccount', 'preferredAdvanceDeposit']),
   };
 
   const initialValues = {

src/containers/Preferences/Accountant/utils.js

@@ -11,13 +11,13 @@ export const transformToOptions = (option) => {
       group: 'bill_payments',
     },
     {
-      key: 'deposit_account',
-      value: option.deposit_account,
+      key: 'preferred_deposit_account',
+      value: option.preferred_deposit_account,
       group: 'payment_receives',
     },
     {
-      key: 'advance_deposit',
-      value: option.advance_deposit,
+      key: 'preferred_advance_deposit',
+      value: option.preferred_advance_deposit,
       group: 'payment_receives',
     },
     {

src/containers/Preferences/Item/ItemPreferencesFormPage.js

@@ -3,6 +3,7 @@ import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import intl from 'react-intl-universal';
+import { pick, omit } from 'lodash';
 import { ItemPreferencesSchema } from './ItemPreferences.schema';
 import ItemPreferencesForm from './ItemPreferencesForm';
 
@@ -23,12 +24,16 @@ function ItemPreferencesFormPage({
 }) {
   const { saveSettingMutate } = useItemPreferencesFormContext();
 
+  const itemPerferencesSettings = {
+    ...omit(itemsSettings, ['tableSize']),
+  };
+  
   // Initial values.
   const initialValues = {
     preferred_sell_account: '',
     preferred_cost_account: '',
     preferred_inventory_account: '',
-    ...transformGeneralSettings(itemsSettings),
+    ...transformGeneralSettings(itemPerferencesSettings),
   };
 
   useEffect(() => {
@@ -37,8 +42,10 @@ function ItemPreferencesFormPage({
 
   // Handle form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
-    const options = optionsMapToArray(values)
-      .map((option) => ({ ...option, group: 'items' }));
+    const options = optionsMapToArray(values).map((option) => ({
+      ...option,
+      group: 'items',
+    }));
 
     const onSuccess = () => {
       AppToaster.show({

src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js

@@ -28,7 +28,11 @@ import { AppToaster } from 'components';
 import { transactionNumber, compose } from 'utils';
 
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
-import { defaultPaymentReceive, transformToEditForm, transformFormToRequest } from './utils';
+import {
+  defaultPaymentReceive,
+  transformToEditForm,
+  transformFormToRequest,
+} from './utils';
 
 /**
  * Payment Receive form.
@@ -61,6 +65,7 @@ function PaymentReceiveForm({
     paymentReceiveNumberPrefix,
     paymentReceiveNextNumber,
   );
+  console.log(preferredDepositAccount, 'XX');
   // Form initial values.
   const initialValues = useMemo(
     () => ({
@@ -194,7 +199,7 @@ export default compose(
     paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
     paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
     paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
-    preferredDepositAccount: paymentReceiveSettings?.depositAccount,
+    preferredDepositAccount: paymentReceiveSettings?.preferredDepositAccount,
   })),
   withCurrentOrganization(),
 )(PaymentReceiveForm);