Merge remote-tracking branch 'refs/remotes/origin/develop' into develop

fix: Lemon Squeezy redirect to base url

.env.example

@@ -75,30 +75,9 @@ PLAID_ENV=sandbox
 # Your Plaid keys, which can be found in the Plaid Dashboard.
 # https://dashboard.plaid.com/account/keys
 PLAID_CLIENT_ID=
-PLAID_SECRET_DEVELOPMENT=
-PLAID_SECRET_SANDBOX=
-
+PLAID_SECRET=
 PLAID_LINK_WEBHOOK=
 
-# (Optional) Redirect URI settings section
-# Only required for OAuth redirect URI testing (not common on desktop):
-# Sandbox Mode:
-# Set the PLAID_SANDBOX_REDIRECT_URI below to 'http://localhost:3001/oauth-link'.
-# The OAuth redirect flow requires an endpoint on the developer's website
-# that the bank website should redirect to. You will also need to configure
-# this redirect URI for your client ID through the Plaid developer dashboard
-# at https://dashboard.plaid.com/team/api.
-# Development mode:
-# When running in development mode, you must use an https:// url.
-# You will need to configure this https:// redirect URI in the Plaid developer dashboard.
-# Instructions to create a self-signed certificate for localhost can be found at
-# https://github.com/plaid/pattern/blob/master/README.md#testing-oauth.
-# If your system is not set up to run localhost with https://, you will be unable to test
-# the OAuth in development and should leave the PLAID_DEVELOPMENT_REDIRECT_URI blank.
-
-PLAID_SANDBOX_REDIRECT_URI=
-PLAID_DEVELOPMENT_REDIRECT_URI=
-
 # https://docs.lemonsqueezy.com/guides/developer-guide/getting-started#create-an-api-key
 LEMONSQUEEZY_API_KEY=
 LEMONSQUEEZY_STORE_ID=

.github/workflows/build-deploy-develop-container.yaml

@@ -0,0 +1,127 @@
+# This workflow will build a docker container, publish it to Github Registry.
+name: Build and Deploy Develop Docker Container
+on:
+  push:
+    branches:
+      - develop
+
+env:
+  WEBAPP_IMAGE_NAME: bigcapitalhq/webapp
+  SERVER_IMAGE_NAME: bigcapitalhq/server
+
+jobs:
+  build-publish-webapp:
+    strategy:
+      fail-fast: false
+    name: Build and deploy webapp container
+    runs-on: ubuntu-latest
+    environment: production
+    steps:
+      - name: Prepare
+        run: |
+          platform=${{ matrix.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
+
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # Login to Container registry.
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        with:
+          images: ${{ env.WEBAPP_IMAGE_NAME }}
+
+      # Builds and push the Docker image.
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        id: build
+        with:
+          context: ./
+          file: ./packages/webapp/Dockerfile
+          platforms: linux/amd64
+          push: true
+          labels: ${{ steps.meta.outputs.labels }}
+          tags: bigcapitalhq/webapp:develop
+
+      - name: Export digest
+        run: |
+          mkdir -p /tmp/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-webapp
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
+      # Send notification to Slack channel.
+      - name: Slack Notification built and published webapp container successfully.
+        uses: rtCamp/action-slack-notify@v2
+        env:
+          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
+
+  build-publish-server:
+    name: Build and deploy server container
+    runs-on: ubuntu-latest
+    steps:
+      - name: Prepare
+        run: |
+          platform=${{ matrix.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
+
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # Login to Container registry.
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      # Builds and push the Docker image.
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        id: build
+        with:
+          context: ./
+          file: ./packages/server/Dockerfile
+          platforms: linux/amd64
+          push: true
+          tags: bigcapitalhq/server:develop
+          labels: ${{ steps.meta.outputs.labels }}
+
+      - name: Export digest
+        run: |
+          mkdir -p /tmp/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-server
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+      # Send notification to Slack channel.
+      - name: Slack Notification built and published server container successfully.
+        uses: rtCamp/action-slack-notify@v2
+        env:
+          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}

docker-compose.prod.yml

@@ -22,11 +22,15 @@ services:
       - server
       - webapp
     restart: on-failure
+    networks:
+      - bigcapital_network
 
   webapp:
     container_name: bigcapital-webapp
     image: bigcapitalhq/webapp:latest
     restart: on-failure
+    networks:
+      - bigcapital_network
 
   server:
     container_name: bigcapital-server
@@ -89,14 +93,17 @@ services:
       - GOTENBERG_URL=${GOTENBERG_URL}
       - GOTENBERG_DOCS_URL=${GOTENBERG_DOCS_URL}
 
+      # Exchange Rate
+      - EXCHANGE_RATE_SERVICE=${EXCHANGE_RATE_SERVICE}
+      - OPEN_EXCHANGE_RATE_APP_ID-${OPEN_EXCHANGE_RATE_APP_ID}
+
       # Bank Sync
       - BANKING_CONNECT=${BANKING_CONNECT}
 
       # Plaid
       - PLAID_ENV=${PLAID_ENV}
       - PLAID_CLIENT_ID=${PLAID_CLIENT_ID}
-      - PLAID_SECRET_DEVELOPMENT=${PLAID_SECRET_DEVELOPMENT}
-      - PLAID_SECRET_SANDBOX=${b8cf42b441e110451e2f69ad7e1e9f}
+      - PLAID_SECRET=${PLAID_SECRET}
       - PLAID_LINK_WEBHOOK=${PLAID_LINK_WEBHOOK}
 
       # Lemon Squeez
@@ -114,6 +121,15 @@ 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}
+    networks:
+      - bigcapital_network
+
   database_migration:
     container_name: bigcapital-database-migration
     build:
@@ -130,6 +146,8 @@ services:
       - TENANT_DB_NAME_PERFIX=${TENANT_DB_NAME_PERFIX}
     depends_on:
       - mysql
+    networks:
+      - bigcapital_network
 
   mysql:
     container_name: bigcapital-mysql
@@ -145,6 +163,8 @@ services:
       - mysql:/var/lib/mysql
     expose:
       - '3306'
+    networks:
+      - bigcapital_network
 
   mongo:
     container_name: bigcapital-mongo
@@ -154,6 +174,8 @@ services:
       - '27017'
     volumes:
       - mongo:/var/lib/mongodb
+    networks:
+      - bigcapital_network
 
   redis:
     container_name: bigcapital-redis
@@ -164,11 +186,15 @@ services:
       - '6379'
     volumes:
       - redis:/data
+    networks:
+      - bigcapital_network
 
   gotenberg:
     image: gotenberg/gotenberg:7
     expose:
       - '9000'
+    networks:
+      - bigcapital_network
 
 # Volumes
 volumes:
@@ -183,3 +209,8 @@ volumes:
   redis:
     name: bigcapital_prod_redis
     driver: local
+
+# Networks
+networks:
+  bigcapital_network:
+    driver: bridge

packages/server/src/api/controllers/Attachments/AttachmentsController.ts

@@ -4,12 +4,16 @@ import { Router, Response, NextFunction, Request } from 'express';
 import { body, param } from 'express-validator';
 import BaseController from '@/api/controllers/BaseController';
 import { AttachmentsApplication } from '@/services/Attachments/AttachmentsApplication';
+import { AttachmentUploadPipeline } from '@/services/Attachments/S3UploadPipeline';
 
 @Service()
 export class AttachmentsController extends BaseController {
   @Inject()
   private attachmentsApplication: AttachmentsApplication;
 
+  @Inject()
+  private uploadPipelineService: AttachmentUploadPipeline;
+
   /**
    * Router constructor.
    */
@@ -18,7 +22,8 @@ export class AttachmentsController extends BaseController {
 
     router.post(
       '/',
-      this.attachmentsApplication.uploadPipeline.single('file'),
+      this.uploadPipelineService.validateS3Configured,
+      this.uploadPipelineService.uploadPipeline().single('file'),
       this.validateUploadedFileExistance,
       this.uploadAttachment.bind(this)
     );

packages/server/src/commands/bigcapital.ts

@@ -71,6 +71,10 @@ function getAllSystemTenants(knex) {
   return knex('tenants');
 }
 
+function getAllInitializedSystemTenants(knex) {
+  return knex('tenants').whereNotNull('initializedAt');
+}
+
 // module.exports = {
 //   log,
 //   success,
@@ -183,7 +187,7 @@ commander
   .action(async (cmd) => {
     try {
       const sysKnex = await initSystemKnex();
-      const tenants = await getAllSystemTenants(sysKnex);
+      const tenants = await getAllInitializedSystemTenants(sysKnex);
       const tenantsOrgsIds = tenants.map((tenant) => tenant.organizationId);
 
       if (cmd.tenant_id && tenantsOrgsIds.indexOf(cmd.tenant_id) === -1) {
@@ -220,7 +224,6 @@ commander
         const oper = migrateTenant(cmd.tenant_id);
         migrateOpers.push(oper);
       }
-
       Promise.all(migrateOpers).then(() => {
         success('All tenants are migrated.');
       });
@@ -280,4 +283,3 @@ commander
       exit(error);
     }
   });
-

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`,
   },
 
   /**
@@ -237,6 +235,6 @@ module.exports = {
     accessKeyId: process.env.S3_ACCESS_KEY_ID,
     secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
     endpoint: process.env.S3_ENDPOINT,
-    bucket: process.env.S3_BUCKET,
+    bucket: process.env.S3_BUCKET || 'bigcapital-documents',
   },
 };

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/Attachments/AttachmentsApplication.ts

@@ -2,11 +2,9 @@ import { Inject, Service } from 'typedi';
 import { UploadDocument } from './UploadDocument';
 import { DeleteAttachment } from './DeleteAttachment';
 import { GetAttachment } from './GetAttachment';
-import { AttachmentUploadPipeline } from './S3UploadPipeline';
 import { LinkAttachment } from './LinkAttachment';
 import { UnlinkAttachment } from './UnlinkAttachment';
 import { getAttachmentPresignedUrl } from './GetAttachmentPresignedUrl';
-import type { Multer } from 'multer';
 
 @Service()
 export class AttachmentsApplication {
@@ -19,9 +17,6 @@ export class AttachmentsApplication {
   @Inject()
   private getDocumentService: GetAttachment;
 
-  @Inject()
-  private uploadPipelineService: AttachmentUploadPipeline;
-
   @Inject()
   private linkDocumentService: LinkAttachment;
 
@@ -31,14 +26,6 @@ export class AttachmentsApplication {
   @Inject()
   private getPresignedUrlService: getAttachmentPresignedUrl;
 
-  /**
-   * Express middleware for uploading attachments to an S3 bucket.
-   * @returns {Multer}
-   */
-  get uploadPipeline(): Multer {
-    return this.uploadPipelineService.uploadPipeline();
-  }
-
   /**
    * Saves the metadata of uploaded document to S3 on database.
    * @param {number} tenantId

packages/server/src/services/Attachments/S3UploadPipeline.ts

@@ -1,12 +1,38 @@
 import multer from 'multer';
-import type { Multer } from 'multer'
+import type { Multer } from 'multer';
 import multerS3 from 'multer-s3';
 import { s3 } from '@/lib/S3/S3';
 import { Service } from 'typedi';
 import config from '@/config';
+import { NextFunction, Request, Response } from 'express';
 
 @Service()
 export class AttachmentUploadPipeline {
+  /**
+   * Middleware to ensure that S3 configuration is properly set before proceeding.
+   * This function checks if the necessary S3 configuration keys are present and throws an error if any are missing.
+   *
+   * @param req The HTTP request object.
+   * @param res The HTTP response object.
+   * @param next The callback to pass control to the next middleware function.
+   */
+  public validateS3Configured(req: Request, res: Response, next: NextFunction) {
+    if (
+      !config.s3.region ||
+      !config.s3.accessKeyId ||
+      !config.s3.secretAccessKey
+    ) {
+      const missingKeys = [];
+      if (!config.s3.region) missingKeys.push('region');
+      if (!config.s3.accessKeyId) missingKeys.push('accessKeyId');
+      if (!config.s3.secretAccessKey) missingKeys.push('secretAccessKey');
+      const missing = missingKeys.join(', ');
+
+      throw new Error(`S3 configuration error: Missing ${missing}`);
+    }
+    next();
+  }
+
   /**
    * Express middleware for uploading attachments to an S3 bucket.
    * It utilizes the multer middleware for handling multipart/form-data, specifically for file uploads.

packages/server/src/services/Banking/Plaid/utils.ts

@@ -42,7 +42,12 @@ export const transformPlaidTrxsToCashflowCreate = R.curry(
   ): CreateUncategorizedTransactionDTO => {
     return {
       date: plaidTranasction.date,
-      amount: plaidTranasction.amount,
+
+      // Plaid: Positive values when money moves out of the account; negative values
+      // when money moves in. For example, debit card purchases are positive;
+      // credit card payments, direct deposits, and refunds are negative.
+      amount: -1 * plaidTranasction.amount,
+
       description: plaidTranasction.name,
       payee: plaidTranasction.payment_meta?.payee,
       currencyCode: plaidTranasction.iso_currency_code,

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