fix(webapp): no default branch for customer/vendor opening balance branch

2026-02-15 20:30:33 +00:00 · 2023-06-28 18:07:47 +02:00
parent 7fbe51ddf2
commit 8d990ae85d
18 changed files with 100 additions and 293 deletions
--- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormTopBar.tsx
+++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormTopBar.tsx
@@ -11,6 +11,7 @@ import {
  FeatureCan,
  FormTopbar,
  DetailsBarSkeletonBase,
+  FormBranchSelectButton,
 } from '@/components';
 import { useMakeJournalFormContext } from './MakeJournalProvider';

@@ -51,18 +52,9 @@ function MakeJournalFormSelectBranch() {
    <BranchSelect
      name={'branch_id'}
      branches={branches}
-      input={MakeJournalBranchSelectButton}
+      input={FormBranchSelectButton}
      popoverProps={{ minimal: true }}
-    />
-  );
-}
-function MakeJournalBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('make_journal.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
    />
  );
 }
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx
@@ -10,7 +10,6 @@ import {
  InputPrependText,
  CurrencySelectList,
  BranchSelect,
-  BranchSelectButton,
  FeatureCan,
  Row,
  Col,
@@ -78,12 +77,10 @@ export default function CustomerFinancialPanel() {
              label={<T id={'customer.label.opening_branch'} />}
              name={'opening_balance_branch_id'}
              inline={true}
-              className={classNames('form-group--select-list', Classes.FILL)}
            >
              <BranchSelect
                name={'opening_balance_branch_id'}
                branches={branches}
-                input={BranchSelectButton}
                popoverProps={{ minimal: true }}
              />
            </FFormGroup>
--- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormTopBar.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormTopBar.tsx
@@ -1,16 +1,15 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
-import { Button, Alignment, NavbarGroup, Classes } from '@blueprintjs/core';
+import { Alignment, NavbarGroup, Classes } from '@blueprintjs/core';
 import { useSetPrimaryBranchToForm } from './utils';
 import { useFeatureCan } from '@/hooks/state';
 import { Features } from '@/constants';
 import {
-  Icon,
  BranchSelect,
  FeatureCan,
  FormTopbar,
  DetailsBarSkeletonBase,
+  FormBranchSelectButton,
 } from '@/components';
 import { useExpenseFormContext } from './ExpenseFormPageProvider';

@@ -51,19 +50,9 @@ function ExpenseFormSelectBranch() {
    <BranchSelect
      name={'branch_id'}
      branches={branches}
-      input={ExpenseBranchSelectButton}
+      input={FormBranchSelectButton}
      popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function ExpenseBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('expense.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
    />
  );
 }
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormTopBar.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormTopBar.tsx
@@ -1,11 +1,9 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
 import {
  Alignment,
  NavbarGroup,
  NavbarDivider,
-  Button,
  Classes,
 } from '@blueprintjs/core';
 import {
@@ -14,12 +12,13 @@ import {
 } from './utils';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  Icon,
  BranchSelect,
  FeatureCan,
  WarehouseSelect,
  FormTopbar,
  DetailsBarSkeletonBase,
+  FormWarehouseSelectButton,
+  FormBranchSelectButton,
 } from '@/components';
 import { useBillFormContext } from './BillFormProvider';
 import { Features } from '@/constants';
@@ -70,8 +69,9 @@ function BillFormSelectBranch() {
    <BranchSelect
      name={'branch_id'}
      branches={branches}
-      input={BillBranchSelectButton}
+      input={FormBranchSelectButton}
      popoverProps={{ minimal: true }}
+      fill={false}
    />
  );
 }
@@ -86,30 +86,9 @@ function BillFormSelectWarehouse() {
    <WarehouseSelect
      name={'warehouse_id'}
      warehouses={warehouses}
-      input={BillWarehouseSelectButton}
+      input={FormWarehouseSelectButton}
      popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function BillWarehouseSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('bill.warehouse_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
-    />
-  );
-}
-
-function BillBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('bill.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
    />
  );
 }
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.tsx
@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
 import {
  Alignment,
  NavbarGroup,
@@ -20,6 +19,8 @@ import {
  WarehouseSelect,
  FormTopbar,
  DetailsBarSkeletonBase,
+  FormWarehouseSelectButton,
+  FormBranchSelectButton,
 } from '@/components';
 import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
 import { Features } from '@/constants';
@@ -70,8 +71,9 @@ function VendorCreditNoteFormSelectBranch() {
    <BranchSelect
      name={'branch_id'}
      branches={branches}
-      input={VendorCreditNoteBranchSelectButton}
+      input={FormBranchSelectButton}
      popoverProps={{ minimal: true }}
+      fill={false}
    />
  );
 }
@@ -86,30 +88,9 @@ function VendorCreditFormSelectWarehouse() {
    <WarehouseSelect
      name={'warehouse_id'}
      warehouses={warehouses}
-      input={VendorCreditNoteWarehouseSelectButton}
+      input={FormWarehouseSelectButton}
      popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function VendorCreditNoteWarehouseSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('vendor_credit.warehouse_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
-    />
-  );
-}
-
-function VendorCreditNoteBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('vendor_credit.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
    />
  );
 }
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.tsx
@@ -1,15 +1,14 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
-import { Alignment, NavbarGroup, Button, Classes } from '@blueprintjs/core';
+import { Alignment, NavbarGroup, Classes } from '@blueprintjs/core';
 import { useSetPrimaryBranchToForm } from './utils';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  Icon,
  BranchSelect,
  FeatureCan,
  FormTopbar,
  DetailsBarSkeletonBase,
+  FormBranchSelectButton,
 } from '@/components';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
 import { Features } from '@/constants';
@@ -50,19 +49,9 @@ function PaymentMadeFormSelectBranch() {
    <BranchSelect
      name={'branch_id'}
      branches={branches}
-      input={PaymentMadeBranchSelectButton}
+      input={FormBranchSelectButton}
      popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function PaymentMadeBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('payment_made.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
    />
  );
 }
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormTopBar.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormTopBar.tsx
@@ -1,11 +1,10 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
+
 import {
  Alignment,
  NavbarGroup,
  NavbarDivider,
-  Button,
  Classes,
 } from '@blueprintjs/core';
 import {
@@ -15,12 +14,13 @@ import {
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  Icon,
  BranchSelect,
  FeatureCan,
  WarehouseSelect,
  FormTopbar,
  DetailsBarSkeletonBase,
+  FormWarehouseSelectButton,
+  FormBranchSelectButton,
 } from '@/components';
 import { useCreditNoteFormContext } from './CreditNoteFormProvider';

@@ -70,8 +70,9 @@ function CreditNoteFormSelectBranch() {
    <BranchSelect
      name={'branch_id'}
      branches={branches}
-      input={CreditNoteBranchSelectButton}
+      input={FormBranchSelectButton}
      popoverProps={{ minimal: true }}
+      fill={false}
    />
  );
 }
@@ -86,30 +87,9 @@ function CreditFormSelectWarehouse() {
    <WarehouseSelect
      name={'warehouse_id'}
      warehouses={warehouses}
-      input={CreditNoteWarehouseSelectButton}
+      input={FormWarehouseSelectButton}
      popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function CreditNoteWarehouseSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('credit_note.warehouse_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
-    />
-  );
-}
-
-function CreditNoteBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('credit_note.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
    />
  );
 }
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimtaeFormTopBar.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimtaeFormTopBar.tsx
@@ -1,11 +1,9 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
 import {
  Alignment,
  NavbarGroup,
  NavbarDivider,
-  Button,
  Classes,
 } from '@blueprintjs/core';
 import {
@@ -15,12 +13,13 @@ import {
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  Icon,
  BranchSelect,
  FeatureCan,
  WarehouseSelect,
  FormTopbar,
  DetailsBarSkeletonBase,
+  FormWarehouseSelectButton,
+  FormBranchSelectButton,
 } from '@/components';
 import { useEstimateFormContext } from './EstimateFormProvider';

@@ -70,8 +69,9 @@ function EstimateFormSelectBranch() {
    <BranchSelect
      name={'branch_id'}
      branches={branches}
-      input={EstimateBranchSelectButton}
+      input={FormBranchSelectButton}
      popoverProps={{ minimal: true }}
+      fill={false}
    />
  );
 }
@@ -86,30 +86,9 @@ function EstimateFormSelectWarehouse() {
    <WarehouseSelect
      name={'warehouse_id'}
      warehouses={warehouses}
-      input={EstimateWarehouseSelectButton}
+      input={FormWarehouseSelectButton}
      popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function EstimateWarehouseSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('estimate.warehouse_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
-    />
-  );
-}
-
-function EstimateBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('estimate.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
    />
  );
 }
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.tsx
@@ -1,12 +1,10 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import {
  Alignment,
  NavbarGroup,
  NavbarDivider,
-  Button,
  Classes,
 } from '@blueprintjs/core';
 import {
@@ -18,11 +16,12 @@ import { Features } from '@/constants';
 import { useInvoiceFormContext } from './InvoiceFormProvider';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  Icon,
  BranchSelect,
  FeatureCan,
  WarehouseSelect,
  FormTopbar,
+  FormWarehouseSelectButton,
+  FormBranchSelectButton,
 } from '@/components';

 /**
@@ -70,8 +69,9 @@ function InvoiceFormSelectBranch() {
    <BranchSelect
      name={'branch_id'}
      branches={branches}
-      input={InvoiceBranchSelectButton}
+      input={FormBranchSelectButton}
      popoverProps={{ minimal: true }}
+      fill={false}
    />
  );
 }
@@ -86,30 +86,9 @@ function InvoiceFormSelectWarehouse() {
    <WarehouseSelect
      name={'warehouse_id'}
      warehouses={warehouses}
-      input={InvoiceWarehouseSelectButton}
+      input={FormWarehouseSelectButton}
      popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function InvoiceWarehouseSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('invoice.warehouse_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
-    />
-  );
-}
-
-function InvoiceBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('invoice.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
    />
  );
 }
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormTopBar.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormTopBar.tsx
@@ -1,22 +1,21 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
-import { Alignment, NavbarGroup, Button, Classes } from '@blueprintjs/core';
+import { Alignment, NavbarGroup, Classes } from '@blueprintjs/core';
 import { useSetPrimaryBranchToForm } from './utils';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  Icon,
  BranchSelect,
  FeatureCan,
  FormTopbar,
  DetailsBarSkeletonBase,
+  FormBranchSelectButton,
 } from '@/components';
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
 import { Features } from '@/constants';

 /**
 * Payment receive from top bar.
- * @returns
+ * @returns {JSX.Element}
 */
 export default function PaymentReceiveFormTopBar() {
  // Features guard.
@@ -29,7 +28,6 @@ export default function PaymentReceiveFormTopBar() {
  if (!featureCan(Features.Branches)) {
    return null;
  }
-
  return (
    <FormTopbar>
      <NavbarGroup align={Alignment.LEFT}>
@@ -41,6 +39,10 @@ export default function PaymentReceiveFormTopBar() {
  );
 }

+/**
+ * Branch select of payment receive form.
+ * @returns {JSX.Element}
+ */
 function PaymentReceiveFormSelectBranch() {
  // payment receive form context.
  const { branches, isBranchesLoading } = usePaymentReceiveFormContext();
@@ -51,19 +53,9 @@ function PaymentReceiveFormSelectBranch() {
    <BranchSelect
      name={'branch_id'}
      branches={branches}
-      input={PaymentReceiveBranchSelectButton}
+      input={FormBranchSelectButton}
      popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function PaymentReceiveBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('payment_receive.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
    />
  );
 }
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormTopbar.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormTopbar.tsx
@@ -1,12 +1,9 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
-import styled from 'styled-components';
 import {
  Alignment,
  NavbarGroup,
  NavbarDivider,
-  Button,
  Classes,
 } from '@blueprintjs/core';
 import {
@@ -18,12 +15,13 @@ import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import { useReceiptFormContext } from './ReceiptFormProvider';
 import {
-  Icon,
  BranchSelect,
  FeatureCan,
  WarehouseSelect,
  FormTopbar,
  DetailsBarSkeletonBase,
+  FormBranchSelectButton,
+  FormWarehouseSelectButton,
 } from '@/components';

 /**
@@ -76,8 +74,9 @@ function ReceiptFormSelectBranch() {
    <BranchSelect
      name={'branch_id'}
      branches={branches}
-      input={ReceiptBranchSelectButton}
+      input={FormBranchSelectButton}
      popoverProps={{ minimal: true }}
+      fill={false}
    />
  );
 }
@@ -96,30 +95,9 @@ function ReceiptFormSelectWarehouse() {
    <WarehouseSelect
      name={'warehouse_id'}
      warehouses={warehouses}
-      input={ReceiptWarehouseSelectButton}
+      input={FormWarehouseSelectButton}
      popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function ReceiptBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('receipt.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
-    />
-  );
-}
-
-function ReceiptWarehouseSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('receipt.warehouse_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
+      fill={false}
    />
  );
 }
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.tsx
@@ -9,7 +9,6 @@ import {
  InputPrependText,
  CurrencySelectList,
  BranchSelect,
-  BranchSelectButton,
  FeatureCan,
  Row,
  Col,
@@ -75,12 +74,10 @@ export default function VendorFinanicalPanelTab() {
              label={<T id={'vendor.label.opening_branch'} />}
              name={'opening_balance_branch_id'}
              inline={true}
-              className={classNames('form-group--select-list', Classes.FILL)}
            >
              <BranchSelect
                name={'opening_balance_branch_id'}
                branches={branches}
-                input={BranchSelectButton}
                popoverProps={{ minimal: true }}
              />
            </FFormGroup>