feat: add connect to bank dialog

packages/webapp/src/components/DialogsContainer.tsx

@@ -50,6 +50,7 @@ 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';
 
 /**
  * Dialogs container.
@@ -146,6 +147,7 @@ export default function DialogsContainer() {
       <EstimateMailDialog dialogName={DialogsName.EstimateMail} />
       <ReceiptMailDialog dialogName={DialogsName.ReceiptMail} />
       <PaymentMailDialog dialogName={DialogsName.PaymentMail} />
+      <ConnectBankDialog dialogName={DialogsName.ConnectBankCreditCard} />
     </div>
   );
 }

packages/webapp/src/constants/dialogs.ts

@@ -53,4 +53,5 @@ export enum DialogsName {
   EstimateMail = 'estimate-mail',
   ReceiptMail = 'receipt-mail',
   PaymentMail = 'payment-mail',
+  ConnectBankCreditCard = 'connect-bank-credit-card'
 }

packages/webapp/src/containers/Banking/Plaid/PlaidLanchLink.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+import { usePlaidExchangeToken } from '@/hooks/query';
 import React, { useEffect } from 'react';
 import {
   usePlaidLink,
@@ -30,6 +32,8 @@ export function LaunchLink(props: LaunchLinkProps) {
   // const { generateLinkToken, deleteLinkToken } = useLink();
   // const { setError, resetError } = useErrors();
 
+  const { mutateAsync: exchangeAccessToken } = usePlaidExchangeToken();
+
   // define onSuccess, onExit and onEvent functions as configs for Plaid Link creation
   const onSuccess = async (
     publicToken: string,
@@ -45,6 +49,12 @@ export function LaunchLink(props: LaunchLinkProps) {
       // regular link mode: exchange public token for access token
     } else {
       // call to Plaid api endpoint: /item/public_token/exchange in order to obtain access_token which is then stored with the created item
+      debugger;
+
+      await exchangeAccessToken({
+        public_token: publicToken,
+        institution_id: metadata.institution.institution_id,
+      });
       // await exchangeToken(
       //   publicToken,
       //   metadata.institution,

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

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React, { useState } from 'react';
 import {
   Button,
   NavbarGroup,
@@ -14,10 +13,7 @@ import {
   Icon,
   FormattedMessage as T,
 } from '@/components';
-import {
+import { useRefreshCashflowAccounts } from '@/hooks/query';
-  useGetPlaidLinkToken,
-  useRefreshCashflowAccounts,
-} from '@/hooks/query';
 import { CashflowAction, AbilitySubject } from '@/constants/abilityOption';
 
 import withDialogActions from '@/containers/Dialog/withDialogActions';
@@ -29,7 +25,6 @@ import { ACCOUNT_TYPE } from '@/constants';
 import { DialogsName } from '@/constants/dialogs';
 
 import { compose } from '@/utils';
-import { LaunchLink } from '@/containers/Banking/Plaid/PlaidLanchLink';
 
 /**
  * Cash Flow accounts actions bar.
@@ -66,21 +61,13 @@ function CashFlowAccountsActionsBar({
     const checked = event.target.checked;
     setCashflowAccountsTableState({ inactiveMode: checked });
   };
-
+  // Handle connect button click.
-  const { mutateAsync: getPlaidLinkToken } = useGetPlaidLinkToken();
-  const [linkToken, setLinkToken] = useState<string>('');
-
   const handleConnectToBank = () => {
-    getPlaidLinkToken()
+    openDialog(DialogsName.ConnectBankCreditCard);
-      .then((res) => {
-        setLinkToken(res.data.link_token);
-      })
-      .catch(() => {});
   };
 
   return (
     <DashboardActionsBar>
-      <LaunchLink userId={3} token={linkToken} />
       <NavbarGroup>
         <Can I={CashflowAction.Create} a={AbilitySubject.Cashflow}>
           <Button
@@ -120,15 +107,15 @@ function CashFlowAccountsActionsBar({
             onChange={handleInactiveSwitchChange}
           />
         </Can>
-
-        <Button
-          className={Classes.MINIMAL}
-          text={'Connect to Bank'}
-          onClick={handleConnectToBank}
-        />
       </NavbarGroup>
 
       <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          text={'Connect to Bank / Credit Card'}
+          onClick={handleConnectToBank}
+        />
+        <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="refresh-16" iconSize={14} />}

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

@@ -9,6 +9,7 @@ import { CashFlowAccountsProvider } from './CashFlowAccountsProvider';
 
 import CashflowAccountsGrid from './CashflowAccountsGrid';
 import CashFlowAccountsActionsBar from './CashFlowAccountsActionsBar';
+import { CashflowAccountsPlaidLink } from './CashflowAccountsPlaidLink';
 
 import withCashflowAccounts from '@/containers/CashFlow/AccountTransactions/withCashflowAccounts';
 import withCashflowAccountsTableActions from '@/containers/CashFlow/AccountTransactions/withCashflowAccountsTableActions';
@@ -38,6 +39,8 @@ function CashFlowAccountsList({
       <DashboardPageContent>
         <CashflowAccountsGrid />
       </DashboardPageContent>
+
+      <CashflowAccountsPlaidLink />
     </CashFlowAccountsProvider>
   );
 }

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

@@ -54,7 +54,7 @@ function CashflowBankAccount({
   // #withAlertsDialog
   openAlert,
 
-  // #withDial
+  // #withDialog
   openDialog,
 
   // #withDrawerActions

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

@@ -0,0 +1,8 @@
+import { LaunchLink } from '@/containers/Banking/Plaid/PlaidLanchLink';
+import { useGetBankingPlaidToken } from '@/hooks/state/banking';
+
+export function CashflowAccountsPlaidLink() {
+  const plaidToken = useGetBankingPlaidToken();
+
+  return <LaunchLink userId={3} token={plaidToken} />;
+}

packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialog.tsx

@@ -0,0 +1,32 @@
+// @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 (
+    <Dialog
+      name={dialogName}
+      title={'Securly connect your bank or credit card.'}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+    >
+      <DialogSuspense>
+        <ConnectBankDialogBody dialogName={dialogName} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const ConnectBankDialog = compose(withDialogRedux())(
+  ConnectBankDialogRoot,
+);

packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialogBody.tsx

@@ -0,0 +1,60 @@
+// @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();
+
+  const handleSubmit = (
+    values: ConnectBankDialogForm,
+    { setSubmitting }: FormikHelpers<ConnectBankDialogForm>,
+  ) => {
+    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 (
+    <div className={classNames(CLASSES.DIALOG_BODY)}>
+      <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+        <Form>
+          <ConnectBankDialogContent />
+        </Form>
+      </Formik>
+    </div>
+  );
+}
+
+export default R.compose(withDialogActions)(ConnectBankDialogBodyRoot);

packages/webapp/src/containers/CashFlow/ConnectBankDialog/ConnectBankDialogContent.tsx

@@ -0,0 +1,30 @@
+import { Button } from '@blueprintjs/core';
+import { FFormGroup, FSelect } from '@/components';
+import { useFormikContext } from 'formik';
+
+export function ConnectBankDialogContent() {
+  const { isSubmitting } = useFormikContext();
+
+  return (
+    <div>
+      <FFormGroup
+        label={'Banking Syncing Service Provider'}
+        name={'serviceProvider'}
+      >
+        <FSelect
+          name={'serviceProvider'}
+          valueAccessor={'key'}
+          textAccessor={'label'}
+          popoverProps={{ minimal: true }}
+          items={BankFeedsServiceProviders}
+        />
+      </FFormGroup>
+
+      <Button type={'submit'} loading={isSubmitting}>
+        Connect
+      </Button>
+    </div>
+  );
+}
+
+export const BankFeedsServiceProviders = [{ label: 'Plaid', key: 'plaid' }];

packages/webapp/src/containers/CashFlow/ConnectBankDialog/index.tsx

@@ -0,0 +1 @@
+export * from './ConnectBankDialog';

packages/webapp/src/hooks/query/plaid.ts

@@ -5,7 +5,7 @@ import useApiRequest from '../useRequest';
 /**
  * Retrieves the plaid link token.
  */
-export function useGetPlaidLinkToken(props) {
+export function useGetPlaidLinkToken(props = {}) {
   const apiRequest = useApiRequest();
 
   return useMutation(
@@ -15,3 +15,17 @@ export function useGetPlaidLinkToken(props) {
     },
   );
 }
+
+/**
+ * Retrieves the plaid link token.
+ */
+export function usePlaidExchangeToken(props = {}) {
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (data) => apiRequest.post('banking/plaid/exchange-token', data, {}),
+    {
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/state/banking.ts

@@ -0,0 +1,20 @@
+import { getPlaidToken, setPlaidId } from '@/store/banking/banking.reducer';
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+export const useSetBankingPlaidToken = () => {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (plaidId: string) => {
+      dispatch(setPlaidId(plaidId));
+    },
+    [dispatch],
+  );
+};
+
+export const useGetBankingPlaidToken = () => {
+  const plaidToken = useSelector(getPlaidToken);
+
+  return plaidToken;
+};

packages/webapp/src/store/banking/banking.reducer.ts

@@ -0,0 +1,20 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+
+interface StorePlaidState {
+  plaidToken: string;
+}
+
+export const PlaidSlice = createSlice({
+  name: 'plaid',
+  initialState: {
+    plaidToken: '',
+  } as StorePlaidState,
+  reducers: {
+    setPlaidId: (state: StorePlaidState, action: PayloadAction<string>) => {
+      state.plaidToken = action.payload;
+    },
+  },
+});
+
+export const { setPlaidId } = PlaidSlice.actions;
+export const getPlaidToken = (state: any) => state.plaid.plaidToken;

packages/webapp/src/store/reducers.tsx

@@ -37,6 +37,7 @@ import creditNotes from './CreditNote/creditNote.reducer';
 import vendorCredit from './VendorCredit/VendorCredit.reducer';
 import warehouseTransfers from './WarehouseTransfer/warehouseTransfer.reducer';
 import projects from './Project/projects.reducer';
+import { PlaidSlice } from './banking/banking.reducer';
 
 const appReducer = combineReducers({
   authentication,
@@ -73,6 +74,7 @@ const appReducer = combineReducers({
   vendorCredit,
   warehouseTransfers,
   projects,
+  plaid: PlaidSlice.reducer,
 });
 
 // Reset the state of a redux store