diff --git a/packages/server/src/config/index.ts b/packages/server/src/config/index.ts index 91277c057..a9e2212b1 100644 --- 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 index d067757fb..532d3cfe8 100644 --- 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 index 02f18d071..c603a624f 100644 --- 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() { - @@ -148,8 +146,6 @@ export default function DialogsContainer() { - - ); diff --git a/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.tsx b/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.tsx index 0515fdf8d..33400e653 100644 --- 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} /> diff --git a/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialog.tsx b/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialog.tsx deleted file mode 100644 index 2742d7957..000000000 --- a/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialog.tsx +++ /dev/null @@ -1,32 +0,0 @@ -// @ts-nocheck -import React from 'react'; -import { Dialog, DialogSuspense } from '@/components'; -import withDialogRedux from '@/components/DialogReduxConnect'; -import { compose } from '@/utils'; - -const ConnectBankDialogBody = React.lazy( - () => import('./ConnectBankDialogBody'), -); - -/** - * Connect bank dialog. - */ -function ConnectBankDialogRoot({ dialogName, payload = {}, isOpen }) { - return ( - - - - - - ); -} - -export const ConnectBankDialog = compose(withDialogRedux())( - ConnectBankDialogRoot, -); diff --git a/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialogBody.tsx b/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialogBody.tsx deleted file mode 100644 index 83062d7a3..000000000 --- a/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialogBody.tsx +++ /dev/null @@ -1,61 +0,0 @@ -// @ts-nocheck -import * as R from 'ramda'; -import { Form, Formik, FormikHelpers } from 'formik'; -import classNames from 'classnames'; -import { ConnectBankDialogContent } from './ConnectBankDialogContent'; -import { useGetPlaidLinkToken } from '@/hooks/query'; -import { useSetBankingPlaidToken } from '@/hooks/state/banking'; -import withDialogActions from '@/containers/Dialog/withDialogActions'; -import { CLASSES } from '@/constants'; -import { AppToaster } from '@/components'; -import { Intent } from '@blueprintjs/core'; -import { DialogsName } from '@/constants/dialogs'; - -const initialValues: ConnectBankDialogForm = { - serviceProvider: 'plaid', -}; - -interface ConnectBankDialogForm { - serviceProvider: 'plaid'; -} - -function ConnectBankDialogBodyRoot({ - // #withDialogActions - closeDialog, -}) { - const { mutateAsync: getPlaidLinkToken } = useGetPlaidLinkToken(); - const setPlaidId = useSetBankingPlaidToken(); - - // Handles the form submitting. - const handleSubmit = ( - values: ConnectBankDialogForm, - { setSubmitting }: FormikHelpers, - ) => { - setSubmitting(true); - getPlaidLinkToken() - .then((res) => { - setSubmitting(false); - closeDialog(DialogsName.ConnectBankCreditCard); - setPlaidId(res.data.link_token); - }) - .catch(() => { - setSubmitting(false); - AppToaster.show({ - message: 'Something went wrong.', - intent: Intent.DANGER, - }); - }); - }; - - return ( -
- -
- - -
-
- ); -} - -export default R.compose(withDialogActions)(ConnectBankDialogBodyRoot); diff --git a/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialogContent.tsx b/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialogContent.tsx deleted file mode 100644 index 1bbc9c970..000000000 --- a/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialogContent.tsx +++ /dev/null @@ -1,48 +0,0 @@ -// @ts-nocheck -import styled from 'styled-components'; -import { Stack } from '@/components'; -import { TellerIcon } from '../Icons/TellerIcon'; -import { YodleeIcon } from '../Icons/YodleeIcon'; -import { PlaidIcon } from '../Icons/PlaidIcon'; -import { BankServiceCard } from './ConnectBankServiceCard'; - -const TopDesc = styled('p')` - margin-bottom: 20px; - color: #5f6b7c; -`; - -export function ConnectBankDialogContent() { - return ( -
- - Connect your bank accounts and fetch the bank transactions using - one of our supported third-party service providers. - - - - } - > - Plaid gives the connection to 12,000 financial institutions across US, UK and Canada. - - - } - disabled - > - Connect instantly with more than 5,000 financial institutions across US. - - - } - disabled - > - Connect instantly with a global network of financial institutions. - - -
- ); -} diff --git a/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankServiceCard.tsx b/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankServiceCard.tsx deleted file mode 100644 index 72b0852a6..000000000 --- a/packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankServiceCard.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import styled from 'styled-components'; -import { Group } from '@/components'; - -const BankServiceIcon = styled('div')` - height: 40px; - width: 40px; - border: 1px solid #c8cad0; - border-radius: 3px; - display: flex; - - svg { - margin: auto; - } -`; -const BankServiceContent = styled(`div`)` - flex: 1 0; -`; -const BankServiceCardRoot = styled('button')` - border-radius: 3px; - border: 1px solid #c8cad0; - transition: all 0.1s ease-in-out; - background: transparent; - text-align: inherit; - padding: 14px; - - &:not(:disabled) { - cursor: pointer; - } - &:hover:not(:disabled) { - border-color: #0153cc; - } - &:disabled { - background: #f9fdff; - } -`; -const BankServiceTitle = styled(`h3`)` - font-weight: 600; - font-size: 14px; - color: #2d333d; -`; -const BankServiceDesc = styled('p')` - margin-top: 4px; - margin-bottom: 6px; - font-size: 13px; - color: #738091; -`; - -interface BankServiceCardProps { - title: string; - children: React.ReactNode; - disabled?: boolean; - icon: React.ReactNode; -} - -export function BankServiceCard({ - title, - children, - icon, - disabled, -}: BankServiceCardProps) { - return ( - - - {icon} - - {title} - {children} - - - - ); -} diff --git a/packages/webapp/src/containers/CashFlow/ConnectBankDialog/index.tsx b/packages/webapp/src/containers/CashFlow/ConnectBankDialog/index.tsx deleted file mode 100644 index 2267439d5..000000000 --- a/packages/webapp/src/containers/CashFlow/ConnectBankDialog/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './ConnectBankDialog'; diff --git a/packages/webapp/src/hooks/utils/useOpenPlaidConnect.ts b/packages/webapp/src/hooks/utils/useOpenPlaidConnect.ts new file mode 100644 index 000000000..a32ba1804 --- /dev/null +++ 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 }; +};