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

src/components/Accounts/AccountMultiSelect.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import styled from 'styled-components';
+import { MenuItem } from '@blueprintjs/core';
+import { FMultiSelect } from '../Forms';
+import classNames from 'classnames';
+import { Classes } from '@blueprintjs/popover2';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} account
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const accountItemPredicate = (query, account, _index, exactMatch) => {
+  const normalizedTitle = account.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${account.code}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param {*} account
+ * @param {*} param1
+ * @returns
+ */
+const accountItemRenderer = (
+  account,
+  { handleClick, modifiers, query },
+  { isSelected },
+) => {
+  return (
+    <MenuItem
+      icon={isSelected ? 'tick' : 'blank'}
+      text={account.name}
+      label={account.code}
+      key={account.id}
+      onClick={handleClick}
+    />
+  );
+};
+
+const accountSelectProps = {
+  itemPredicate: accountItemPredicate,
+  itemRenderer: accountItemRenderer,
+  valueAccessor: (item) => item.id,
+  labelAccessor: (item) => item.code,
+  tagRenderer: (item) => item.name,
+};
+
+/**
+ * branches mulit select.
+ * @param {*} param0
+ * @returns {JSX.Element}
+ */
+export function AccountMultiSelect({ accounts, ...rest }) {
+  return (
+    <FMultiSelect
+      items={accounts}
+      popoverProps={{
+        minimal: true,
+      }}
+      {...accountSelectProps}
+      {...rest}
+    />
+  );
+}

src/components/Accounts/index.js

@@ -0,0 +1 @@
+export * from './AccountMultiSelect';

src/components/index.js

@@ -104,6 +104,7 @@ export * from './Warehouses';
 export * from './Currencies';
 export * from './FormTopbar'
 export * from './Paper';
+export * from './Accounts'
 
 const Hint = FieldHint;
 

src/containers/Drawers/BillDrawer/BillDetailActionsBar.js

@@ -95,9 +95,9 @@ function BillDetailActionsBar({
               onClick={handleQuickBillPayment}
             />
           </If>
-          <NavbarDivider />
         </Can>
         <Can I={BillAction.Delete} a={AbilitySubject.Bill}>
+          <NavbarDivider />
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'trash-16'} iconSize={16} />}

src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.js

@@ -131,17 +131,17 @@ function CustomerDetailsActionsBar({
           />
         </Popover>
 
-        <NavbarDivider />
         <Can I={CustomerAction.Edit} a={AbilitySubject.Customer}>
+          <NavbarDivider />
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="pen-18" />}
             text={intl.get('customer.drawer.action.edit')}
             onClick={handleEditContact}
           />
-          <NavbarDivider />
         </Can>
         <Can I={CustomerAction.Delete} a={AbilitySubject.Customer}>
+          <NavbarDivider />
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'trash-16'} iconSize={16} />}

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js

@@ -96,9 +96,9 @@ function EstimateDetailActionsBar({
             intent={Intent.DANGER}
             onClick={handleDeleteEstimate}
           />
-          <NavbarDivider />
         </Can>
         <Can I={SaleEstimateAction.NotifyBySms} a={AbilitySubject.Estimate}>
+          <NavbarDivider />
           <MoreMenuItems
             payload={{
               onNotifyViaSMS: handleNotifyViaSMS,

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js

@@ -55,9 +55,9 @@ function ExpenseDrawerActionBar({
             text={<T id={'edit_expense'} />}
             onClick={handleEditExpense}
           />
-          <NavbarDivider />
         </Can>
         <Can I={ExpenseAction.Delete} a={AbilitySubject.Expense}>
+          <NavbarDivider />
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="trash-16" iconSize={16} />}

src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.js

@@ -5,7 +5,7 @@ import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
 import clsx from 'classnames';
 
-import { DetailsMenu, DetailItem } from 'components';
+import { DetailsMenu, DetailItem, FormatDate } from 'components';
 import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
 
 import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdjustmentDrawer.module.scss';
@@ -20,7 +20,7 @@ export default function InventoryAdjustmentDetailHeader() {
     <div className={clsx(InventoryAdjustmentDrawerCls.detail_panel_header)}>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <DetailItem label={intl.get('date')}>
-          {moment(inventoryAdjustment.date).format('YYYY MMM DD')}
+          <FormatDate value={inventoryAdjustment.date} />
         </DetailItem>
 
         <DetailItem label={intl.get('type')}>
@@ -36,7 +36,7 @@ export default function InventoryAdjustmentDetailHeader() {
         </DetailItem>
 
         <DetailItem label={intl.get('published_at')}>
-          {moment(inventoryAdjustment.published_at).format('YYYY MMM DD')}
+          <FormatDate value={inventoryAdjustment.published_at} />
         </DetailItem>
 
         <DetailItem label={intl.get('reason')}>
@@ -44,7 +44,7 @@ export default function InventoryAdjustmentDetailHeader() {
         </DetailItem>
 
         <DetailItem label={intl.get('created_at')}>
-          {moment(inventoryAdjustment.created_at).format('YYYY MMM DD')}
+          <FormatDate value={inventoryAdjustment.created_at} />
         </DetailItem>
       </DetailsMenu>
     </div>

src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.js

@@ -55,10 +55,9 @@ function ItemDetailActionsBar({
             text={<T id={'edit_item'} />}
             onClick={handleEditItem}
           />
-
-          <NavbarDivider />
         </Can>
         <Can I={ItemAction.Delete} a={AbilitySubject.Item}>
+          <NavbarDivider />
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'trash-16'} iconSize={16} />}

src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js

@@ -55,9 +55,9 @@ function ManualJournalDrawerActionBar({
             text={<T id={'edit_journal'} />}
             onClick={handleEditManualJournal}
           />
-          <NavbarDivider />
         </Can>
         <Can I={ManualJournalAction.Delete} a={AbilitySubject.ManualJournal}>
+          <NavbarDivider />
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="trash-16" iconSize={16} />}

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js

@@ -58,9 +58,9 @@ function PaymentMadeDetailActionsBar({
             text={<T id={'edit_payment_made'} />}
             onClick={handleEditPaymentMade}
           />
-          <NavbarDivider />
         </Can>
         <Can I={PaymentMadeAction.Delete} a={AbilitySubject.PaymentMade}>
+          <NavbarDivider />
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'trash-16'} iconSize={16} />}

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js

@@ -95,12 +95,12 @@ function PaymentReceiveActionsBar({
             intent={Intent.DANGER}
             onClick={handleDeletePaymentReceive}
           />
-          <NavbarDivider />
         </Can>
         <Can
           I={PaymentReceiveAction.NotifyBySms}
           a={AbilitySubject.PaymentReceive}
         >
+          <NavbarDivider />
           <MoreMenuItems
             payload={{
               onNotifyViaSMS: handleNotifyViaSMS,

src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js

@@ -92,9 +92,9 @@ function ReceiptDetailActionBar({
             intent={Intent.DANGER}
             onClick={safeCallback(onDeleteReceipt)}
           />
-          <NavbarDivider />
         </Can>
         <Can I={SaleReceiptAction.NotifyBySms} a={AbilitySubject.Receipt}>
+          <NavbarDivider />
           <MoreMenuItems
             payload={{
               onNotifyViaSMS: handleNotifyViaSMS,

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js

@@ -79,10 +79,10 @@ function VendorCreditDetailActionsBar({
               text={<T id={'refund'} />}
               onClick={handleRefundVendorCredit}
             />
-            <NavbarDivider />
           </If>
         </Can>
         <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+          <NavbarDivider />
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'trash-16'} iconSize={16} />}

src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.js

@@ -102,17 +102,17 @@ function VendorDetailsActionsBar({
             icon={<Icon icon={'plus'} />}
           />
         </Popover>
-        <NavbarDivider />
         <Can I={VendorAction.Edit} a={AbilitySubject.Vendor}>
+          <NavbarDivider />
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="pen-18" />}
             text={<T id={'vendor.drawer.action.edit'} />}
             onClick={safeCallback(onEditContact)}
           />
-          <NavbarDivider />
         </Can>
         <Can I={VendorAction.Delete} a={AbilitySubject.Vendor}>
+          <NavbarDivider />
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'trash-16'} iconSize={16} />}

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderDimensionsProvider.js

@@ -18,6 +18,7 @@ function APAgingSummaryHeaderDimensionsProvider({ query, ...props }) {
   // Fetches the branches list.
   const { isLoading: isBranchesLoading, data: branches } = useBranches(query, {
     enabled: isBranchFeatureCan,
+    keepPreviousData: true,
   });
 
   // Provider

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderDimensionsProvider.js

@@ -18,6 +18,7 @@ function ARAgingSummaryHeaderDimensionsProvider({ query, ...props }) {
   // Fetches the branches list.
   const { isLoading: isBranchesLoading, data: branches } = useBranches(query, {
     enabled: isBranchFeatureCan,
+    keepPreviousData: true,
   });
 
   // Provider

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsProvider.js

@@ -19,6 +19,7 @@ function BalanceSheetHeaderDimensionsProvider({ query, ...props }) {
   // Fetches the branches list.
   const { isLoading: isBranchesLoading, data: branches } = useBranches(query, {
     enabled: isBranchFeatureCan,
+    keepPreviousData: true,
   });
 
   // Provider

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanelProvider.js

@@ -10,16 +10,16 @@ const CashFlowStatementDimensionsPanelContext = React.createContext();
  * cash flow statement dimensions panel provider.
  * @returns
  */
-function CashFlowStatementDimensionsPanelProvider({ query,...props }) {
+function CashFlowStatementDimensionsPanelProvider({ query, ...props }) {
   // Features guard.
   const { featureCan } = useFeatureCan();
   const isBranchFeatureCan = featureCan(Features.Branches);
 
   // Fetches the branches list.
-  const { isLoading: isBranchesLoading, data: branches } = useBranches(
+  const { isLoading: isBranchesLoading, data: branches } = useBranches(query, {
-    query,
+    enabled: isBranchFeatureCan,
-    { enabled: isBranchFeatureCan },
+    keepPreviousData: true,
-  );
+  });
 
   // Provider
   const provider = {

src/containers/FinancialStatements/CashFlowStatement/components.js

@@ -26,9 +26,9 @@ export const useCashFlowStatementColumns = () => {
  * Cash flow statement loading bar.
  */
 export function CashFlowStatementLoadingBar() {
-  const { isCashFlowLoading } = useCashFlowStatementContext();
+  const { isCashFlowFetching } = useCashFlowStatementContext();
   return (
-    <If condition={isCashFlowLoading}>
+    <If condition={isCashFlowFetching}>
       <FinancialLoadingBar />
     </If>
   );

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanelProvider.js

@@ -19,6 +19,7 @@ function GeneralLedgerHeaderDimensionsPanelProvider({ query, ...props }) {
   // Fetches the branches list.
   const { isLoading: isBranchesLoading, data: branches } = useBranches(query, {
     enabled: isBranchFeatureCan,
+    keepPreviousData: true,
   });
 
   // Provider

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js

@@ -3,7 +3,8 @@ import { FormGroup, Classes } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 
-import { AccountsMultiSelect, Row, Col } from 'components';
+import { AccountMultiSelect, Row, Col } from 'components';
+import { FFormGroup } from '../../../components/Forms';
 
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
@@ -44,12 +45,13 @@ function GLHeaderGeneralPaneContent() {
       </Row>
       <Row>
         <Col xs={4}>
-          <FormGroup
+          <FFormGroup
             label={<T id={'specific_accounts'} />}
-            className={classNames('form-group--select-list', Classes.FILL)}
+            name={'accounts'}
+            className={Classes.FILL}
           >
-            <AccountsMultiSelect items={accounts} />
+            <AccountMultiSelect name="accounts" accounts={accounts} />
-          </FormGroup>
+          </FFormGroup>
         </Col>
       </Row>
 

src/containers/FinancialStatements/GeneralLedger/common.js

@@ -32,6 +32,7 @@ export const getDefaultGeneralLedgerQuery = () => {
     basis: 'accural',
     filterByOption: 'with-transactions',
     branchesIds: [],
+    accounts: [],
   };
 };
 

src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanelProvider.js

@@ -24,12 +24,13 @@ function InventoryValuationHeaderDimensionsProvider({ ...props }) {
   // Fetches the warehouses list.
   const { data: warehouses, isLoading: isWarehouesLoading } = useWarehouses(
     null,
-    { enabled: isWarehouseFeatureCan },
+    { enabled: isWarehouseFeatureCan, keepPreviousData: true },
   );
 
   // Fetches the branches list.
   const { data: branches, isLoading: isBranchLoading } = useBranches(null, {
     enabled: isBranchFeatureCan,
+    keepPreviousData: true,
   });
 
   // Provider

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossProvider.js

@@ -15,9 +15,12 @@ function ProfitLossSheetProvider({ query, ...props }) {
     isFetching,
     isLoading,
     refetch,
-  } = useProfitLossSheet({
+  } = useProfitLossSheet(
-    ...transformFilterFormToQuery(query),
+    {
-  });
+      ...transformFilterFormToQuery(query),
+    },
+    { keepPreviousData: true },
+  );
 
   const provider = {
     profitLossSheet,

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsProvider.js

@@ -19,6 +19,7 @@ function ProfitLossSheetHeaderDimensionsProvider({ query, ...props }) {
   // Fetches the branches list.
   const { isLoading: isBranchesLoading, data: branches } = useBranches(query, {
     enabled: isBranchFeatureCan,
+    keepPreviousData: true,
   });
 
   // Provider

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanelProvider.js

@@ -18,6 +18,7 @@ function TrialBLHeaderDimensionsPanelProvider({ query, ...props }) {
   // Fetches the branches list.
   const { isLoading: isBranchesLoading, data: branches } = useBranches(query, {
     enabled: isBranchFeatureCan,
+    keepPreviousData: true,
   });
 
   // Provider

src/containers/Items/ItemFormPrimarySection.js

@@ -47,11 +47,6 @@ export default function ItemFormPrimarySection() {
       <div class="mb1">
         <FormattedHTMLMessage id={'products_you_buy_and_or_sell'} />
       </div>
-      <div class="mb1">
-        <FormattedHTMLMessage
-          id={'products_you_buy_and_or_sell_but_don_t_need'}
-        />
-      </div>
     </>
   );
 
@@ -86,7 +81,6 @@ export default function ItemFormPrimarySection() {
               disabled={!isNewMode && item.type === 'inventory'}
             >
               <Radio label={<T id={'service'} />} value="service" />
-              <Radio label={<T id={'non_inventory'} />} value="non-inventory" />
               <Radio label={<T id={'inventory'} />} value="inventory" />
             </RadioGroup>
           </FormGroup>
@@ -126,7 +120,11 @@ export default function ItemFormPrimarySection() {
                 helperText={<ErrorMessage name={'code'} />}
                 inline={true}
               >
-                <InputGroup medium={true} intent={inputIntent({ error, touched })} {...field} />
+                <InputGroup
+                  medium={true}
+                  intent={inputIntent({ error, touched })}
+                  {...field}
+                />
               </FormGroup>
             )}
           </FastField>

src/containers/Items/utils.js

@@ -64,7 +64,6 @@ export const transitionItemTypeKeyToLabel = (itemTypeKey) => {
   const table = {
     service: intl.get('service'),
     inventory: intl.get('inventory'),
-    'non-inventory': intl.get('non_inventory'),
   };
   return typeof table[itemTypeKey] === 'string' ? table[itemTypeKey] : '';
 };