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

)
bigcapitalhq · Jun 3, 2024 · 175bc24 · 175bc24
1 parent 7c06c8b
commit 175bc24
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 227 deletions.
diff --git a/packages/server/src/config/index.ts b/packages/server/src/config/index.ts
@@ -204,10 +204,7 @@ module.exports = {
   plaid: {
     env: process.env.PLAID_ENV || 'sandbox',
     clientId: process.env.PLAID_CLIENT_ID,
-    secretDevelopment: process.env.PLAID_SECRET_DEVELOPMENT,
-    secretSandbox: process.env.PLAID_SECRET_SANDBOX,
-    redirectSandBox: process.env.PLAID_SANDBOX_REDIRECT_URI,
-    redirectDevelopment: process.env.PLAID_DEVELOPMENT_REDIRECT_URI,
+    secret: process.env.PLAID_SECRET,
     linkWebhook: process.env.PLAID_LINK_WEBHOOK,
   },
 

diff --git a/packages/server/src/lib/Plaid/Plaid.ts b/packages/server/src/lib/Plaid/Plaid.ts
@@ -70,10 +70,7 @@ export class PlaidClientWrapper {
       baseOptions: {
         headers: {
           'PLAID-CLIENT-ID': config.plaid.clientId,
-          'PLAID-SECRET':
-            config.plaid.env === 'development'
-              ? config.plaid.secretDevelopment
-              : config.plaid.secretSandbox,
+          'PLAID-SECRET': config.plaid.secret,
           'Plaid-Version': '2020-09-14',
         },
       },

diff --git a/packages/webapp/src/components/DialogsContainer.tsx b/packages/webapp/src/components/DialogsContainer.tsx
@@ -50,7 +50,6 @@ import InvoiceMailDialog from '@/containers/Sales/Invoices/InvoiceMailDialog/Inv
 import EstimateMailDialog from '@/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialog';
 import ReceiptMailDialog from '@/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialog';
 import PaymentMailDialog from '@/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialog';
-import { ConnectBankDialog } from '@/containers/CashFlow/ConnectBankDialog';
 import { ExportDialog } from '@/containers/Dialogs/ExportDialog';
 
 /**
@@ -97,7 +96,6 @@ export default function DialogsContainer() {
       <NotifyPaymentReceiveViaSMSDialog
         dialogName={DialogsName.NotifyPaymentViaForm}
       />
-
       <BadDebtDialog dialogName={DialogsName.BadDebtForm} />
       <SMSMessageDialog dialogName={DialogsName.SMSMessageForm} />
       <RefundCreditNoteDialog dialogName={DialogsName.RefundCreditNote} />
@@ -148,8 +146,6 @@ export default function DialogsContainer() {
       <EstimateMailDialog dialogName={DialogsName.EstimateMail} />
       <ReceiptMailDialog dialogName={DialogsName.ReceiptMail} />
       <PaymentMailDialog dialogName={DialogsName.PaymentMail} />
-      <ConnectBankDialog dialogName={DialogsName.ConnectBankCreditCard} />
-
       <ExportDialog dialogName={DialogsName.Export} />
     </div>
   );

diff --git a/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.tsx b/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>

diff --git a/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialog.tsx b/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialog.tsx
diff --git a/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialogBody.tsx b/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialogBody.tsx
diff --git a/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialogContent.tsx b/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialogContent.tsx
diff --git a/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankServiceCard.tsx b/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankServiceCard.tsx
diff --git a/packages/webapp/src/containers/CashFlow/ConnectBankDialog/index.tsx b/packages/webapp/src/containers/CashFlow/ConnectBankDialog/index.tsx
diff --git a/packages/webapp/src/hooks/utils/useOpenPlaidConnect.ts b/packages/webapp/src/hooks/utils/useOpenPlaidConnect.ts
@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { useSetBankingPlaidToken } from '../state/banking';
+import { AppToaster } from '@/components';
+import { useGetPlaidLinkToken } from '../query';
+import { Intent } from '@blueprintjs/core';
+
+export const useOpenPlaidConnect = () => {
+  const { mutateAsync: getPlaidLinkToken, isLoading } = useGetPlaidLinkToken();
+  const setPlaidId = useSetBankingPlaidToken();
+
+  const openPlaidAsync = useCallback(() => {
+    return getPlaidLinkToken()
+      .then((res) => {
+        setPlaidId(res.data.link_token);
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: 'Something went wrong.',
+          intent: Intent.DANGER,
+        });
+      });
+  }, [getPlaidLinkToken, setPlaidId]);
+
+  return { openPlaidAsync, isPlaidLoading: isLoading };
+};