feat: organize Plaid env variables for sandbox and development envs.

docker-compose.prod.yml

@@ -114,6 +114,13 @@ services:
       - NEW_RELIC_LICENSE_KEY=${NEW_RELIC_LICENSE_KEY}
       - NEW_RELIC_APP_NAME=${NEW_RELIC_APP_NAME}
 
+      # S3
+      - S3_REGION=${S3_REGION}
+      - S3_ACCESS_KEY_ID=${S3_ACCESS_KEY_ID}
+      - S3_SECRET_ACCESS_KEY=${S3_SECRET_ACCESS_KEY}
+      - S3_ENDPOINT=${S3_ENDPOINT}
+      - S3_BUCKET=${S3_BUCKET}
+
   database_migration:
     container_name: bigcapital-database-migration
     build:

packages/server/package.json

@@ -86,7 +86,7 @@
     "multer-s3": "^3.0.1",
     "mustache": "^3.0.3",
     "mysql": "^2.17.1",
-    "mysql2": "^3.9.8",
+    "mysql2": "^1.6.5",
     "newrelic": "^11.15.0",
     "node-cache": "^4.2.1",
     "nodemailer": "^6.3.0",

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,
   },
 
@@ -218,6 +215,7 @@ module.exports = {
     key: process.env.LEMONSQUEEZY_API_KEY,
     storeId: process.env.LEMONSQUEEZY_STORE_ID,
     webhookSecret: process.env.LEMONSQUEEZY_WEBHOOK_SECRET,
+    redirectTo: `${process.env.BASE_URL}/setup`,
   },
 
   /**

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',
         },
       },

packages/server/src/services/Subscription/LemonSqueezyService.ts

@@ -2,6 +2,7 @@ import { Service } from 'typedi';
 import { createCheckout } from '@lemonsqueezy/lemonsqueezy.js';
 import { SystemUser } from '@/system/models';
 import { configureLemonSqueezy } from './utils';
+import config from '@/config';
 
 @Service()
 export class LemonSqueezyService {
@@ -28,7 +29,7 @@ export class LemonSqueezyService {
       },
       productOptions: {
         enabledVariants: [variantId],
-        redirectUrl: `http://localhost:4000/dashboard/billing/`,
+        redirectUrl: config.lemonSqueezy.redirectTo,
         receiptButtonText: 'Go to Dashboard',
         receiptThankYouNote: 'Thank you for signing up to Lemon Stand!',
       },

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>
   );

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>

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

@@ -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 (
-    <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

@@ -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<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

@@ -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 (
-    <div>
-      <TopDesc>
-        Connect your bank accounts and fetch the bank transactions using
-        one of our supported third-party service providers.
-      </TopDesc>
-
-      <Stack>
-        <BankServiceCard
-          title={'Plaid (US, UK & Canada)'}
-          icon={<PlaidIcon />}
-        >
-          Plaid gives the connection to 12,000 financial institutions across US, UK and Canada.
-        </BankServiceCard>
-
-        <BankServiceCard
-          title={'Teller (US) — Soon'}
-          icon={<TellerIcon />}
-          disabled
-        >
-          Connect instantly with more than 5,000 financial institutions across US.
-        </BankServiceCard>
-
-        <BankServiceCard
-          title={'Yodlee (Global) — Soon'}
-          icon={<YodleeIcon />}
-          disabled
-        >
-          Connect instantly with a global network of financial institutions.
-        </BankServiceCard>
-      </Stack>
-    </div>
-  );
-}

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

@@ -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 (
-    <BankServiceCardRoot disabled={disabled}>
-      <Group>
-        <BankServiceIcon>{icon}</BankServiceIcon>
-        <BankServiceContent>
-          <BankServiceTitle>{title}</BankServiceTitle>
-          <BankServiceDesc>{children}</BankServiceDesc>
-        </BankServiceContent>
-      </Group>
-    </BankServiceCardRoot>
-  );
-}

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

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

packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlan.tsx

@@ -26,7 +26,7 @@ function SubscriptionPricing({
     useGetLemonSqueezyCheckout();
 
   const handleClick = () => {
-    getLemonCheckout({ variantId: '338516' })
+    getLemonCheckout({ variantId: '337977' })
       .then((res) => {
         const checkoutUrl = res.data.data.attributes.url;
         window.LemonSqueezy.Url.Open(checkoutUrl);

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 };
+};

pnpm-lock.yaml

@@ -58,7 +58,7 @@ importers:
         version: 0.8.8
       '@types/knex':
         specifier: ^0.16.1
-        version: 0.16.1(mysql2@3.9.8)(mysql@2.18.1)
+        version: 0.16.1(mysql2@1.7.0)(mysql@2.18.1)
       '@types/mathjs':
         specifier: ^6.0.12
         version: 6.0.12
@@ -181,7 +181,7 @@ importers:
         version: 8.5.1
       knex:
         specifier: ^0.95.15
-        version: 0.95.15(mysql2@3.9.8)(mysql@2.18.1)
+        version: 0.95.15(mysql2@1.7.0)(mysql@2.18.1)
       knex-cleaner:
         specifier: ^1.3.0
         version: 1.3.1
@@ -234,8 +234,8 @@ importers:
         specifier: ^2.17.1
         version: 2.18.1
       mysql2:
-        specifier: ^3.9.8
-        version: 3.9.8
+        specifier: ^1.6.5
+        version: 1.7.0
       newrelic:
         specifier: ^11.15.0
         version: 11.17.0
@@ -6480,11 +6480,11 @@ packages:
       '@types/node': 14.18.63
     dev: false
 
-  /@types/knex@0.16.1(mysql2@3.9.8)(mysql@2.18.1):
+  /@types/knex@0.16.1(mysql2@1.7.0)(mysql@2.18.1):
     resolution: {integrity: sha512-54gWD1HWwdVx5iLHaJ1qxH3I6KyBsj5fFqzRpXFn7REWiEB2jwspeVCombNsocSrqPd7IRPqKrsIME7/cD+TFQ==}
     deprecated: This is a stub types definition. knex provides its own type definitions, so you do not need this installed.
     dependencies:
-      knex: 0.95.15(mysql2@3.9.8)(mysql@2.18.1)
+      knex: 0.95.15(mysql2@1.7.0)(mysql@2.18.1)
     transitivePeerDependencies:
       - mysql
       - mysql2
@@ -10788,11 +10788,6 @@ packages:
     engines: {node: '>=0.10'}
     dev: false
 
-  /denque@2.1.0:
-    resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
-    engines: {node: '>=0.10'}
-    dev: false
-
   /depd@1.1.2:
     resolution: {integrity: sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==}
     engines: {node: '>= 0.6'}
@@ -14219,6 +14214,13 @@ packages:
     dependencies:
       safer-buffer: 2.1.2
 
+  /iconv-lite@0.5.2:
+    resolution: {integrity: sha512-kERHXvpSaB4aU3eANwidg79K8FlrN77m8G9V+0vOR3HYaRifrlwMEpT7ZBJqLSEIHnEgJTHcWK82wwLwwKwtag==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      safer-buffer: 2.1.2
+    dev: false
+
   /iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -16529,7 +16531,7 @@ packages:
     dependencies:
       bluebird: 3.7.2
       glob: 7.2.3
-      knex: 0.95.15(mysql2@3.9.8)(mysql@2.18.1)
+      knex: 0.95.15(mysql2@1.7.0)(mysql@2.18.1)
       lodash: 4.17.21
     dev: false
 
@@ -16539,7 +16541,7 @@ packages:
       lodash: 4.17.21
     dev: true
 
-  /knex@0.95.15(mysql2@3.9.8)(mysql@2.18.1):
+  /knex@0.95.15(mysql2@1.7.0)(mysql@2.18.1):
     resolution: {integrity: sha512-Loq6WgHaWlmL2bfZGWPsy4l8xw4pOE+tmLGkPG0auBppxpI0UcK+GYCycJcqz9W54f2LiGewkCVLBm3Wq4ur/w==}
     engines: {node: '>=10'}
     hasBin: true
@@ -16573,7 +16575,7 @@ packages:
       interpret: 2.2.0
       lodash: 4.17.21
       mysql: 2.18.1
-      mysql2: 3.9.8
+      mysql2: 1.7.0
       pg-connection-string: 2.5.0
       rechoir: 0.7.0
       resolve-from: 5.0.0
@@ -17087,6 +17089,10 @@ packages:
       '@sinonjs/commons': 1.8.6
     dev: true
 
+  /long@4.0.0:
+    resolution: {integrity: sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==}
+    dev: false
+
   /long@5.2.3:
     resolution: {integrity: sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==}
     dev: false
@@ -17141,11 +17147,6 @@ packages:
     resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
     engines: {node: '>=12'}
 
-  /lru-cache@8.0.5:
-    resolution: {integrity: sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==}
-    engines: {node: '>=16.14'}
-    dev: false
-
   /luxon@1.28.1:
     resolution: {integrity: sha512-gYHAa180mKrNIUJCbwpmD0aTu9kV0dREDrwNnuyFAsO1Wt0EVYSZelPnJlbj9HplzXX/YWXHFTL45kvZ53M0pw==}
     dev: false
@@ -17381,7 +17382,6 @@ packages:
 
   /memory-pager@1.5.0:
     resolution: {integrity: sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==}
-    requiresBuild: true
     dev: false
 
   /memorystream@0.3.1:
@@ -17990,15 +17990,15 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dev: true
 
-  /mysql2@3.9.8:
-    resolution: {integrity: sha512-+5JKNjPuks1FNMoy9TYpl77f+5frbTklz7eb3XDwbpsERRLEeXiW2PDEkakYF50UuKU2qwfGnyXpKYvukv8mGA==}
+  /mysql2@1.7.0:
+    resolution: {integrity: sha512-xTWWQPjP5rcrceZQ7CSTKR/4XIDeH/cRkNH/uzvVGQ7W5c7EJ0dXeJUusk7OKhIoHj7uFKUxDVSCfLIl+jluog==}
     engines: {node: '>= 8.0'}
     dependencies:
-      denque: 2.1.0
+      denque: 1.5.1
       generate-function: 2.3.1
-      iconv-lite: 0.6.3
-      long: 5.2.3
-      lru-cache: 8.0.5
+      iconv-lite: 0.5.2
+      long: 4.0.0
+      lru-cache: 5.1.1
       named-placeholders: 1.1.3
       seq-queue: 0.0.5
       sqlstring: 2.3.3
@@ -18866,7 +18866,7 @@ packages:
       ajv: 8.13.0
       ajv-formats: 2.1.1(ajv@8.13.0)
       db-errors: 0.2.3
-      knex: 0.95.15(mysql2@3.9.8)(mysql@2.18.1)
+      knex: 0.95.15(mysql2@1.7.0)(mysql@2.18.1)
     dev: false
 
   /oblivious-set@1.0.0:
@@ -23472,7 +23472,6 @@ packages:
 
   /sparse-bitfield@3.0.3:
     resolution: {integrity: sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ==}
-    requiresBuild: true
     dependencies:
       memory-pager: 1.5.0
     dev: false