fix: Organize Plaid env variables for development and sandbox envs (#480)

packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.tsx

@@ -15,6 +15,7 @@ import {
   FeatureCan,
 } from '@/components';
 import { useRefreshCashflowAccounts } from '@/hooks/query';
+import { useOpenPlaidConnect } from '@/hooks/utils/useOpenPlaidConnect';
 import { CashflowAction, AbilitySubject } from '@/constants/abilityOption';
 
 import withDialogActions from '@/containers/Dialog/withDialogActions';
@@ -39,6 +40,9 @@ function CashFlowAccountsActionsBar({
 }) {
   const { refresh } = useRefreshCashflowAccounts();
 
+  // Opens the Plaid popup.
+  const { openPlaidAsync, isPlaidLoading } = useOpenPlaidConnect();
+
   // Handle refresh button click.
   const handleRefreshBtnClick = () => {
     refresh();
@@ -64,7 +68,7 @@ function CashFlowAccountsActionsBar({
   };
   // Handle connect button click.
   const handleConnectToBank = () => {
-    openDialog(DialogsName.ConnectBankCreditCard);
+    openPlaidAsync();
   };
 
   return (
@@ -116,6 +120,7 @@ function CashFlowAccountsActionsBar({
             className={Classes.MINIMAL}
             text={'Connect to Bank / Credit Card'}
             onClick={handleConnectToBank}
+            disabled={isPlaidLoading}
           />
           <NavbarDivider />
         </FeatureCan>