From 8d990ae85d6cfcb549b31c9235e2fb332b7bca7b Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Wed, 28 Jun 2023 18:07:47 +0200
Subject: [PATCH] fix(webapp): no default branch for customer/vendor opening
 balance branch

---
 .../src/components/Branches/BranchSelect.tsx  | 61 ++++---------------
 .../webapp/src/components/Forms/Select.tsx    |  2 +-
 .../PageForm/FormTopbarSelectInputs.tsx       | 27 ++++++++
 .../webapp/src/components/PageForm/index.ts   |  1 +
 .../components/Warehouses/WarehouseSelect.tsx |  2 +-
 .../MakeJournal/MakeJournalFormTopBar.tsx     | 14 +----
 .../CustomerForm/CustomerFinancialPanel.tsx   |  3 -
 .../ExpenseForm/ExpenseFormTopBar.tsx         | 19 ++----
 .../Bills/BillForm/BillFormTopBar.tsx         | 33 ++--------
 .../VendorCreditNoteFormTopBar.tsx            | 31 ++--------
 .../PaymentForm/PaymentMadeFormTopBar.tsx     | 19 ++----
 .../CreditNoteForm/CreditNoteFormTopBar.tsx   | 34 +++--------
 .../EstimateForm/EstimtaeFormTopBar.tsx       | 33 ++--------
 .../InvoiceForm/InvoiceFormTopBar.tsx         | 33 ++--------
 .../PaymentReceiveFormTopBar.tsx              | 26 +++-----
 .../ReceiptForm/ReceiptFormTopbar.tsx         | 34 ++---------
 .../VendorForm/VendorFinanicalPanelTab.tsx    |  3 -
 packages/webapp/src/lang/en/index.json        | 18 +-----
 18 files changed, 100 insertions(+), 293 deletions(-)
 create mode 100644 packages/webapp/src/components/PageForm/FormTopbarSelectInputs.tsx

diff --git a/packages/webapp/src/components/Branches/BranchSelect.tsx b/packages/webapp/src/components/Branches/BranchSelect.tsx
index 6e463ad9a..2641f2704 100644
--- a/packages/webapp/src/components/Branches/BranchSelect.tsx
+++ b/packages/webapp/src/components/Branches/BranchSelect.tsx
@@ -5,59 +5,20 @@ import { MenuItem, Button } from '@blueprintjs/core';
 import { FSelect } from '../Forms';
 
 /**
- *
- * @param {*} query
- * @param {*} branch
- * @param {*} _index
- * @param {*} exactMatch
- * @returns
- */
-const branchItemPredicate = (query, branch, _index, exactMatch) => {
-  const normalizedTitle = branch.name.toLowerCase();
-  const normalizedQuery = query.toLowerCase();
-
-  if (exactMatch) {
-    return normalizedTitle === normalizedQuery;
-  } else {
-    return `${branch.code}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
-  }
-};
-
-/**
- *
- * @param {*} film
- * @param {*} param1
- * @returns
- */
-const branchItemRenderer = (branch, { handleClick, modifiers, query }) => {
-  const text = `${branch.name}`;
-
-  return (
-    <MenuItem
-      active={modifiers.active}
-      disabled={modifiers.disabled}
-      label={branch.code}
-      key={branch.id}
-      onClick={handleClick}
-      text={text}
-    />
-  );
-};
-
-const branchSelectProps = {
-  itemPredicate: branchItemPredicate,
-  itemRenderer: branchItemRenderer,
-  valueAccessor: 'id',
-  labelAccessor: 'name',
-};
-
-/**
- *
+ * Branch select field.
  * @param {*} param0
- * @returns
+ * @returns {JSX.Element}
  */
 export function BranchSelect({ branches, ...rest }) {
-  return <FSelect {...branchSelectProps} {...rest} items={branches} />;
+  return (
+    <FSelect
+      valueAccessor={'id'}
+      textAccessor={'name'}
+      labelAccessor={'code'}
+      {...rest}
+      items={branches}
+    />
+  );
 }
 
 /**
diff --git a/packages/webapp/src/components/Forms/Select.tsx b/packages/webapp/src/components/Forms/Select.tsx
index 459912b62..6916e115c 100644
--- a/packages/webapp/src/components/Forms/Select.tsx
+++ b/packages/webapp/src/components/Forms/Select.tsx
@@ -16,7 +16,7 @@ export function FSelect({ ...props }) {
       />
     );
   };
-  return <Select input={input} {...props} fill={true} />;
+  return <Select input={input} fill={true} {...props} />;
 }
 
 const SelectButton = styled(Button)`
diff --git a/packages/webapp/src/components/PageForm/FormTopbarSelectInputs.tsx b/packages/webapp/src/components/PageForm/FormTopbarSelectInputs.tsx
new file mode 100644
index 000000000..f3f2f1f84
--- /dev/null
+++ b/packages/webapp/src/components/PageForm/FormTopbarSelectInputs.tsx
@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Button } from '@blueprintjs/core';
+import { Icon } from '@/components';
+
+export function FormWarehouseSelectButton({ text }) {
+  return (
+    <Button
+      text={intl.get('page_form.warehouse_button.label', { text })}
+      minimal={true}
+      small={true}
+      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
+    />
+  );
+}
+
+export function FormBranchSelectButton({ text }) {
+  return (
+    <Button
+      text={intl.get('page_form.branch_button.label', { text })}
+      minimal={true}
+      small={true}
+      icon={<Icon icon={'branch-16'} iconSize={16} />}
+    />
+  );
+}
diff --git a/packages/webapp/src/components/PageForm/index.ts b/packages/webapp/src/components/PageForm/index.ts
index f4fac33f0..56a507b60 100644
--- a/packages/webapp/src/components/PageForm/index.ts
+++ b/packages/webapp/src/components/PageForm/index.ts
@@ -1,3 +1,4 @@
 // @ts-nocheck
 export * from './FormTopbar';
+export * from './FormTopbarSelectInputs';
 export * from './PageFormBigNumber';
diff --git a/packages/webapp/src/components/Warehouses/WarehouseSelect.tsx b/packages/webapp/src/components/Warehouses/WarehouseSelect.tsx
index c681e7205..5582a9de2 100644
--- a/packages/webapp/src/components/Warehouses/WarehouseSelect.tsx
+++ b/packages/webapp/src/components/Warehouses/WarehouseSelect.tsx
@@ -18,4 +18,4 @@ export function WarehouseSelect({ warehouses, ...rest }) {
       items={warehouses}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormTopBar.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormTopBar.tsx
index 784fe7906..c4607181f 100644
--- 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}
     />
   );
 }
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx
index 8de4eb45c..f6104ae44 100644
--- 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>
diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormTopBar.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormTopBar.tsx
index 9d7d4561b..20f00eecb 100644
--- 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}
     />
   );
 }
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormTopBar.tsx b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormTopBar.tsx
index dcccafddd..2c400b032 100644
--- 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}
     />
   );
 }
diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.tsx
index ce3195301..de22808f7 100644
--- 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}
     />
   );
 }
diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.tsx
index 031fd8e60..f9d683924 100644
--- 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}
     />
   );
 }
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormTopBar.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormTopBar.tsx
index 5c45e44dd..fe826612c 100644
--- 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}
     />
   );
 }
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimtaeFormTopBar.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimtaeFormTopBar.tsx
index cd8ccd3d0..1670a40ff 100644
--- 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}
     />
   );
 }
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.tsx
index 064cacc9a..a2726304f 100644
--- 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}
     />
   );
 }
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormTopBar.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormTopBar.tsx
index 073fbc42b..8d48a416a 100644
--- 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}
     />
   );
 }
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormTopbar.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormTopbar.tsx
index c1cb46eaf..82db65c66 100644
--- 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}
     />
   );
 }
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.tsx
index 511ba5cc2..c9c56549e 100644
--- 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>
diff --git a/packages/webapp/src/lang/en/index.json b/packages/webapp/src/lang/en/index.json
index ed0537d77..2010d32b1 100644
--- a/packages/webapp/src/lang/en/index.json
+++ b/packages/webapp/src/lang/en/index.json
@@ -1938,8 +1938,8 @@
   "warehouse.alert.mark_primary_message": "The given warehouse has been marked as primary.",
   "warehouse.alert.are_you_sure_you_want_to_make": "Are you sure you want to make a primary warehouse?",
   "make_primary": "Make as Primary",
-  "invoice.branch_button.label": "Branch: {label}",
-  "invoice.warehouse_button.label": "Warehouse: {label}",
+  "page_form.branch_button.label": "Branch: {text}",
+  "page_form.warehouse_button.label": "Warehouse: {text}",
   "branches_multi_select.label": "Branches",
   "branches_multi_select.placeholder": "Filter by branches…",
   "warehouses_multi_select.label": "Warehouses",
@@ -2024,20 +2024,6 @@
   "make_journal.label.total": "TOTAL",
   "expense.label.subtotal": "Subtotal",
   "expense.label.total": "TOTAL",
-  "expense.branch_button.label": "Branch: {label}",
-  "make_journal.branch_button.label": "Branch: {label}",
-  "bill.branch_button.label": "Branch: {label}",
-  "bill.warehouse_button.label": "Warehouse: {label}",
-  "vendor_credit.branch_button.label": "Branch: {label}",
-  "vendor_credit.warehouse_button.label": "Warehouse: {label}",
-  "payment_receive.branch_button.label": "Branch: {label}",
-  "payment_made.branch_button.label": "Branch: {label}",
-  "credit_note.branch_button.label": "Branch: {label}",
-  "credit_note.warehouse_button.label": "Warehouse: {label}",
-  "estimate.branch_button.label": "Branch: {label}",
-  "estimate.warehouse_button.label": "Warehouse: {label}",
-  "receipt.branch_button.label": "Branch: {label}",
-  "receipt.warehouse_button.label": "Warehouse: {label}",
   "warehouse_transfer.empty_status.title": "Manage transfer orders between warehouses.",
   "warehouse_transfer.empty_status.description": "Business with multiply warehouses often transfers items from on warehouse to another when they are in immediate need of vendors.",
   "warehouse_transfer.form.reason.label": "Reason",