Merge pull request #592 from bigcapitalhq/matching-reconcile-branches

fix: Should not load branches on reconcile matching form if the branches not enabled

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionBoot.tsx

@@ -1,6 +1,8 @@
-import { useAccounts, useBranches } from '@/hooks/query';
-import { Spinner } from '@blueprintjs/core';
 import React from 'react';
+import { Spinner } from '@blueprintjs/core';
+import { Features } from '@/constants';
+import { useAccounts, useBranches } from '@/hooks/query';
+import { useFeatureCan } from '@/hooks/state';
 
 interface MatchingReconcileTransactionBootProps {
   children: React.ReactNode;
@@ -15,8 +17,17 @@ const MatchingReconcileTransactionBootContext =
 export function MatchingReconcileTransactionBoot({
   children,
 }: MatchingReconcileTransactionBootProps) {
+  // Detarmines whether the feature is enabled.
+  const { featureCan } = useFeatureCan();
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
   const { data: accounts, isLoading: isAccountsLoading } = useAccounts({}, {});
-  const { data: branches, isLoading: isBranchesLoading } = useBranches({}, {});
+  const { data: branches, isLoading: isBranchesLoading } = useBranches(
+    {},
+    {
+      enabled: isBranchFeatureCan,
+    },
+  );
 
   const provider = {
     accounts,

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionForm.tsx

@@ -10,6 +10,7 @@ import {
   Box,
   BranchSelect,
   FDateInput,
+  FeatureCan,
   FFormGroup,
   FInputGroup,
   FMoneyInputGroup,
@@ -30,6 +31,7 @@ import { useAccountTransactionsContext } from '../../AccountTransactions/Account
 import { MatchingReconcileFormSchema } from './MatchingReconcileTransactionForm.schema';
 import { initialValues, transformToReq } from './_utils';
 import { withBanking } from '../../withBanking';
+import { Features } from '@/constants';
 
 interface MatchingReconcileTransactionFormProps {
   onSubmitSuccess?: (values: any) => void;
@@ -205,26 +207,28 @@ function CreateReconcileTransactionContent() {
         <FInputGroup name={'reference_no'} />
       </FFormGroup>
 
-      <FFormGroup
-        name={'branchId'}
-        label={'Branch'}
-        labelInfo={<Tag minimal>Required</Tag>}
-        fastField
-      >
-        <BranchSelect
+      <FeatureCan feature={Features.Branches}>
+        <FFormGroup
           name={'branchId'}
-          branches={branches}
-          popoverProps={{
-            minimal: false,
-            position: Position.LEFT,
-            modifiers: {
-              preventOverflow: { enabled: true },
-            },
-            boundary: 'viewport',
-          }}
+          label={'Branch'}
+          labelInfo={<Tag minimal>Required</Tag>}
           fastField
-        />
-      </FFormGroup>
+        >
+          <BranchSelect
+            name={'branchId'}
+            branches={branches}
+            popoverProps={{
+              minimal: false,
+              position: Position.LEFT,
+              modifiers: {
+                preventOverflow: { enabled: true },
+              },
+              boundary: 'viewport',
+            }}
+            fastField
+          />
+        </FFormGroup>
+      </FeatureCan>
     </Box>
   );
 }