Merge remote-tracking branch 'refs/remotes/origin/develop' into develop

fix(webapp): show loading message of cost computing job on financial reports

packages/webapp/src/containers/FinancialStatements/BalanceSheet/components.tsx

@@ -21,19 +21,21 @@ export function BalanceSheetAlerts() {
     refetchBalanceSheet();
   };
   // Can't display any error if the report is loading.
-  if (isLoading) return null;
+  if (isLoading) {
-
+    return null;
+  }
+  // Can't continue if the cost compute job is not running.
+  if (!balanceSheet.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={balanceSheet.meta.is_cost_compute_running}>
+    <FinancialComputeAlert>
-      <FinancialComputeAlert>
+      <Icon icon="info-block" iconSize={12} />{' '}
-        <Icon icon="info-block" iconSize={12} />{' '}
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
-
+        <T id={'report.compute_running.refresh'} />
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
+      </Button>
-          <T id={'report.compute_running.refresh'} />
+    </FinancialComputeAlert>
-        </Button>
-      </FinancialComputeAlert>
-    </If>
   );
 }
 

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/components.tsx

@@ -7,6 +7,7 @@ import FinancialLoadingBar from '../FinancialLoadingBar';
 
 import { dynamicColumns } from './dynamicColumns';
 import { useCashFlowStatementContext } from './CashFlowStatementProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 
 /**
  * Retrieve cash flow statement columns.
@@ -27,6 +28,7 @@ export const useCashFlowStatementColumns = () => {
  */
 export function CashFlowStatementLoadingBar() {
   const { isCashFlowFetching } = useCashFlowStatementContext();
+
   return (
     <If condition={isCashFlowFetching}>
       <FinancialLoadingBar />
@@ -45,20 +47,21 @@ export function CashFlowStatementAlerts() {
   const handleRecalcReport = () => {
     refetchCashFlow();
   };
-
   // Can't display any error if the report is loading
   if (isCashFlowLoading) {
     return null;
   }
+  // Can't continue if the cost compute is not running.
+  if (!cashFlowStatement.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={cashFlowStatement.meta.is_cost_compute_running}>
+    <FinancialComputeAlert>
-      <div className="alert-compute-running">
+      <Icon icon="info-block" iconSize={12} />
-        <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'refresh'} />
-          <T id={'refresh'} />
+      </Button>
-        </Button>
+    </FinancialComputeAlert>
-      </div>
-    </If>
   );
 }

packages/webapp/src/containers/FinancialStatements/GeneralLedger/components.tsx

@@ -8,6 +8,7 @@ import { getColumnWidth } from '@/utils';
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
+import { FinancialComputeAlert } from '../FinancialReportPage';
 import { Align } from '@/constants';
 
 /**
@@ -116,17 +117,18 @@ export function GeneralLedgerSheetAlerts() {
   if (isLoading) {
     return null;
   }
-
+  // Can't continue if the cost compute job is not running.
+  if (!generalLedger.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={generalLedger.meta.is_cost_compute_running}>
+    <FinancialComputeAlert>
-      <div class="alert-compute-running">
+      <Icon icon="info-block" iconSize={12} />
-        <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'refresh'} />
-          <T id={'refresh'} />
+      </Button>
-        </Button>
+    </FinancialComputeAlert>
-      </div>
-    </If>
   );
 }
 

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/components.tsx

@@ -6,6 +6,7 @@ import { Icon, If, FormattedMessage as T } from '@/components';
 import { dynamicColumns } from './utils';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 
 /**
  * Retrieve inventory item details columns.
@@ -53,17 +54,19 @@ export function InventoryItemDetailsAlerts() {
   if (isInventoryItemDetailsLoading) {
     return null;
   }
+  // Can't continue if the cost compute job is running.
+  if (!inventoryItemDetails.meta.is_cost_compute_running) {
+    return null;
+  }
 
   return (
-    <If condition={inventoryItemDetails.meta.is_cost_compute_running}>
+    <FinancialComputeAlert>
-      <div className="alert-compute-running">
+      <Icon icon="info-block" iconSize={12} />
-        <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
 
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
+        <T id={'refresh'} />
-        </Button>
+      </Button>
-      </div>
+    </FinancialComputeAlert>
-    </If>
   );
 }

packages/webapp/src/containers/FinancialStatements/Journal/components.tsx

@@ -7,6 +7,7 @@ import { Button } from '@blueprintjs/core';
 import { Icon, If, FormattedMessage as T } from '@/components';
 import { useJournalSheetContext } from './JournalProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 
 import { Align } from '@/constants';
 
@@ -99,17 +100,18 @@ export function JournalSheetAlerts() {
   if (isLoading) {
     return null;
   }
-
+  // Can't continue if the cost compute job is running.
+  if (!journalSheet.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={journalSheet.meta.is_cost_compute_running}>
+    <FinancialComputeAlert>
-      <div class="alert-compute-running">
+      <Icon icon="info-block" iconSize={12} />
-        <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
 
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
+        <T id={'refresh'} />
-        </Button>
+      </Button>
-      </div>
+    </FinancialComputeAlert>
-    </If>
   );
 }

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.tsx

@@ -13,7 +13,7 @@ import withProfitLossActions from './withProfitLossActions';
 
 import { useProfitLossSheetQuery } from './utils';
 import { ProfitLossSheetProvider } from './ProfitLossProvider';
-import { ProfitLossSheetLoadingBar } from './components';
+import { ProfitLossSheetAlerts, ProfitLossSheetLoadingBar } from './components';
 import { ProfitLossBody } from './ProfitLossBody';
 
 /**
@@ -58,7 +58,7 @@ function ProfitLossSheet({
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <ProfitLossSheetLoadingBar />
-      {/* <ProfitLossSheetAlerts /> */}
+      <ProfitLossSheetAlerts />
 
       <DashboardPageContent>
         <ProfitLossSheetHeader

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/components.tsx

@@ -4,6 +4,7 @@ import { Button } from '@blueprintjs/core';
 import { Icon, If, FormattedMessage as T } from '@/components';
 
 import { useProfitLossSheetContext } from './ProfitLossProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
@@ -34,17 +35,18 @@ export function ProfitLossSheetAlerts() {
   if (isLoading) {
     return null;
   }
-
+  // Can't continue if the cost compute job is not running.
+  if (!profitLossSheet.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={profitLossSheet.meta.is_cost_compute_running}>
+    <FinancialComputeAlert>
-      <div class="alert-compute-running">
+      <Icon icon="info-block" iconSize={12} />
-        <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
 
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
+        <T id={'refresh'} />
-        </Button>
+      </Button>
-      </div>
+    </FinancialComputeAlert>
-    </If>
   );
 }

packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/components.tsx

@@ -8,9 +8,9 @@ import { getColumnWidth } from '@/utils';
 import { CellTextSpan } from '@/components/Datatable/Cells';
 import { If, Icon, FormattedMessage as T } from '@/components';
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
-
 /**
  * Retrieves the credit column.
  */
@@ -114,17 +114,19 @@ export function TrialBalanceSheetAlerts() {
   if (isLoading) {
     return null;
   }
+  // Can't continue if the cost compute job is not running.
+  if (!meta.is_cost_compute_running) {
+    return null;
+  }
 
   return (
-    <If condition={meta.is_cost_compute_running}>
+    <FinancialComputeAlert>
-      <div class="alert-compute-running">
+      <Icon icon="info-block" iconSize={12} />
-        <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
 
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
+        <T id={'refresh'} />
-        </Button>
+      </Button>
-      </div>
+    </FinancialComputeAlert>
-    </If>
   );
 }

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx

@@ -176,7 +176,7 @@ function BillFormVendorField() {
         name={'vendor_id'}
         items={vendors}
         placeholder={<T id={'select_vender_account'} />}
-        onItemChange={(contact) => {
+        onItemSelect={(contact) => {
           setFieldValue('vendor_id', contact.id);
           setFieldValue('currency_code', contact?.currency_code);
         }}

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx

@@ -85,7 +85,6 @@ function VendorCreditNoteFormHeaderFields({
         name={'exchange_rate'}
         formGroupProps={{ label: ' ', inline: true }}
       />
-
       {/* ------- Vendor Credit date ------- */}
       <FastField name={'vendor_credit_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (
@@ -194,7 +193,7 @@ function VendorCreditFormVendorSelect() {
         name={'vendor_id'}
         items={vendors}
         placeholder={<T id={'select_vender_account'} />}
-        onItemChange={(contact) => {
+        onItemSelect={(contact) => {
           setFieldValue('vendor_id', contact.id);
           setFieldValue('currency_code', contact?.currency_code);
         }}

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx

@@ -248,7 +248,7 @@ function PaymentFormVendorSelect() {
         name={'vendor_id'}
         items={vendors}
         placeholder={<T id={'select_vender_account'} />}
-        onItemChange={(contact) => {
+        onItemSelect={(contact) => {
           setFieldValue('vendor_id', contact.id);
           setFieldValue('currency_code', contact?.currency_code);
           setPaymentVendorId(contact.id);

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx

@@ -110,7 +110,7 @@ function CreditNoteCustomersSelect() {
         name={'customer_id'}
         items={customers}
         placeholder={<T id={'select_customer_account'} />}
-        onItemChange={(customer) => {
+        onItemSelect={(customer) => {
           setFieldValue('customer_id', customer.id);
           setFieldValue('currency_code', customer?.currency_code);
         }}

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx

@@ -165,7 +165,7 @@ function EstimateFormCustomerSelect() {
         name={'customer_id'}
         items={customers}
         placeholder={<T id={'select_customer_account'} />}
-        onItemChange={(customer) => {
+        onItemSelect={(customer) => {
           setFieldValue('customer_id', customer.id);
           setFieldValue('currency_code', customer?.currency_code);
         }}

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx

@@ -178,7 +178,7 @@ function InvoiceFormCustomerSelect() {
         name={'customer_id'}
         items={customers}
         placeholder={<T id={'select_customer_account'} />}
-        onItemChange={(customer) => {
+        onItemSelect={(customer) => {
           setFieldValue('customer_id', customer.id);
           setFieldValue('currency_code', customer?.currency_code);
         }}

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx

@@ -263,7 +263,7 @@ function PaymentReceiveCustomerSelect() {
         name={'customer_id'}
         items={customers}
         placeholder={<T id={'select_customer_account'} />}
-        onItemChange={(customer) => {
+        onItemSelect={(customer) => {
           setFieldValue('customer_id', customer.id);
           setFieldValue('full_amount', '');
           setFieldValue('currency_code', customer?.currency_code);

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx

@@ -162,7 +162,7 @@ function ReceiptFormCustomerSelect() {
         name={'customer_id'}
         items={customers}
         placeholder={<T id={'select_customer_account'} />}
-        onItemChange={(customer) => {
+        onItemSelect={(customer) => {
           setFieldValue('customer_id', customer.id);
           setFieldValue('currency_code', customer?.currency_code);
         }}