Feature/pluggy

apps/dashboard/package.json

@@ -58,6 +58,7 @@
     "next-themes": "^0.3.0",
     "nuqs": "^1.19.3",
     "papaparse": "^5.4.1",
+    "pluggy-connect-sdk": "^2.9.1",
     "react": "18.3.1",
     "react-colorful": "^5.6.1",
     "react-dom": "18.3.1",

apps/dashboard/src/actions/institutions/create-pluggy-link.ts

@@ -0,0 +1,29 @@
+"use server";
+
+import { client } from "@midday/engine/client";
+import { getSession } from "@midday/supabase/cached-queries";
+
+export const createPluggyLinkTokenAction = async () => {
+  const {
+    data: { session },
+  } = await getSession();
+
+  if (!session?.user.id) {
+    throw new Error("User not found");
+  }
+
+  const pluggyResponse = await client.auth.pluggy.link.$post({
+    json: {
+      userId: session.user.id,
+      environment: "production",
+    },
+  });
+
+  if (!pluggyResponse.ok) {
+    throw new Error("Failed to create pluggy link token");
+  }
+
+  const { data } = await pluggyResponse.json();
+
+  return data.access_token;
+};

apps/dashboard/src/components/connect-bank-provider.tsx

@@ -10,12 +10,14 @@ type Props = {
   provider: string;
   availableHistory: number;
   openPlaid: () => void;
+  openPluggy: (props: { institutionId?: string }) => void;
 };
 
 export function ConnectBankProvider({
   id,
   provider,
   openPlaid,
+  openPluggy,
   availableHistory,
 }: Props) {
   const { setParams } = useConnectParams();
@@ -51,7 +53,7 @@ export function ConnectBankProvider({
         />
       );
     }
-    case "plaid":
+    case "plaid": {
       return (
         <BankConnectButton
           onClick={() => {
@@ -60,6 +62,17 @@ export function ConnectBankProvider({
           }}
         />
       );
+    }
+    case "pluggy": {
+      return (
+        <BankConnectButton
+          onClick={() => {
+            updateUsage();
+            openPluggy({ institutionId: id });
+          }}
+        />
+      );
+    }
     default:
       return null;
   }

apps/dashboard/src/components/institution-info.tsx

@@ -20,6 +20,8 @@ export function InstitutionInfo({ provider, children }: Props) {
         return `With Plaid we can connect to 12,000+ financial institutions across the US, Canada, UK, and Europe are covered by Plaid's network`;
       case "teller":
         return "With Teller we can connect instantly to more than 5,000 financial institutions in the US.";
+      case "pluggy":
+        return "With Pluggy we can connect to all major financial institutions in Brazil.";
       default:
         break;
     }

apps/dashboard/src/components/modals/connect-transactions-modal.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import { createPlaidLinkTokenAction } from "@/actions/institutions/create-plaid-link";
+import { createPluggyLinkTokenAction } from "@/actions/institutions/create-pluggy-link";
 import { exchangePublicToken } from "@/actions/institutions/exchange-public-token";
 import { getInstitutions } from "@/actions/institutions/get-institutions";
 import { useConnectParams } from "@/hooks/use-connect-params";
+import { usePluggyLink } from "@/hooks/use-pluggy-link";
 import type { Institutions } from "@midday-ai/engine/resources/institutions/institutions";
 import { track } from "@midday/events/client";
 import { LogEvents } from "@midday/events/events";
@@ -18,6 +20,7 @@ import {
 import { Input } from "@midday/ui/input";
 import { Skeleton } from "@midday/ui/skeleton";
 import { useDebounce, useScript } from "@uidotdev/usehooks";
+import { useTheme } from "next-themes";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { usePlaidLink } from "react-plaid-link";
@@ -49,6 +52,7 @@ type SearchResultProps = {
   provider: string;
   availableHistory: number;
   openPlaid: () => void;
+  openPluggy: () => void;
 };
 
 function SearchResult({
@@ -58,6 +62,7 @@ function SearchResult({
   provider,
   availableHistory,
   openPlaid,
+  openPluggy,
 }: SearchResultProps) {
   return (
     <div className="flex justify-between">
@@ -79,6 +84,7 @@ function SearchResult({
         provider={provider}
         openPlaid={openPlaid}
         availableHistory={availableHistory}
+        openPluggy={openPluggy}
       />
     </div>
   );
@@ -92,9 +98,11 @@ export function ConnectTransactionsModal({
   countryCode: initialCountryCode,
 }: ConnectTransactionsModalProps) {
   const router = useRouter();
+  const { theme } = useTheme();
   const [loading, setLoading] = useState(true);
   const [results, setResults] = useState<Institutions["data"]>([]);
   const [plaidToken, setPlaidToken] = useState<string | undefined>();
+  const [pluggyToken, setPluggyToken] = useState<string | undefined>();
 
   const {
     countryCode,
@@ -144,6 +152,37 @@ export function ConnectTransactionsModal({
     },
   });
 
+  const { open: openPluggy } = usePluggyLink({
+    token: pluggyToken,
+    theme: theme === "dark" ? "dark" : "light",
+    language: "en",
+    onSuccess: (itemData) => {
+      // const { access_token, item_id } = await exchangePublicToken(public_token);
+
+      // setParams({
+      //   step: "account",
+      //   provider: "pluggy",
+      //   token: access_token,
+      //   ref: item_id,
+      //   institution_id: metadata.institution?.institution_id,
+      // });
+      track({
+        event: LogEvents.ConnectBankAuthorized.name,
+        channel: LogEvents.ConnectBankAuthorized.channel,
+        provider: "pluggy",
+      });
+    },
+    onExit: () => {
+      setParams({ step: "connect" });
+
+      track({
+        event: LogEvents.ConnectBankCanceled.name,
+        channel: LogEvents.ConnectBankCanceled.channel,
+        provider: "pluggy",
+      });
+    },
+  });
+
   const handleOnClose = () => {
     setParams(
       {
@@ -202,6 +241,21 @@ export function ConnectTransactionsModal({
     }
   }, [isOpen, countryCode]);
 
+  useEffect(() => {
+    async function createLinkToken() {
+      const token = await createPluggyLinkTokenAction();
+
+      if (token) {
+        setPluggyToken(token);
+      }
+    }
+
+    // NOTE: Only run where Pluggy is supported (Brazil)
+    if (isOpen && countryCode === "BR") {
+      createLinkToken();
+    }
+  }, [isOpen, countryCode]);
+
   return (
     <Dialog open={isOpen} onOpenChange={handleOnClose}>
       <DialogContent>
@@ -271,6 +325,10 @@ export function ConnectTransactionsModal({
                         setParams({ step: null });
                         openPlaid();
                       }}
+                      openPluggy={() => {
+                        setParams({ step: null });
+                        openPluggy({ institutionId: institution.id });
+                      }}
                     />
                   );
                 })}

apps/dashboard/src/components/modals/select-bank-accounts.tsx

@@ -227,7 +227,7 @@ export function SelectBankAccountsModal() {
   useEffect(() => {
     async function fetchData() {
       const { data } = await getAccounts({
-        provider: provider as "teller" | "plaid" | "gocardless",
+        provider: provider as "teller" | "plaid" | "gocardless" | "pluggy",
         id: ref ?? undefined,
         accessToken: token ?? undefined,
         institutionId: institution_id ?? undefined,

apps/dashboard/src/hooks/use-pluggy-link.ts

@@ -0,0 +1,53 @@
+import * as PluggyConnect from "pluggy-connect-sdk";
+import { useEffect, useState } from "react";
+
+type Props = {
+  token: string;
+  institutionId?: string;
+  onExit: () => void;
+  onSuccess: (itemData: any) => void;
+  onError: () => void;
+  includeSandbox?: boolean;
+  theme?: "light" | "dark";
+  language?: string;
+};
+
+export function usePluggyLink({
+  token,
+  institutionId,
+  onExit,
+  onSuccess,
+  onError,
+  includeSandbox = false,
+  language = "pt",
+  theme,
+}: Props) {
+  const [connectToken, setConnectToken] = useState<string>("");
+  const [selectedConnectorId, setSelectedConnectorId] = useState<
+    number | undefined
+  >(institutionId ? Number(institutionId) : undefined);
+
+  useEffect(() => {
+    setConnectToken(token);
+  }, [token]);
+
+  const pluggyConnect = new PluggyConnect.PluggyConnect({
+    connectToken,
+    includeSandbox,
+    selectedConnectorId,
+    onClose: onExit,
+    onSuccess,
+    onError,
+    theme,
+    language,
+  });
+
+  const handleOpen = ({ institutionId }: { institutionId?: string }) => {
+    setSelectedConnectorId(Number(institutionId));
+    pluggyConnect.init();
+  };
+
+  return {
+    open: handleOpen,
+  };
+}

apps/engine/.dev.vars-example

@@ -8,4 +8,6 @@ TYPESENSE_API_KEY=
 TYPESENSE_ENDPOINT=
 TYPESENSE_ENDPOINT_US=
 TYPESENSE_ENDPOINT_EU=
-TYPESENSE_ENDPOINT_AU=
+TYPESENSE_ENDPOINT_AU=
+PLUGGY_CLIENT_ID=
+PLUGGY_SECRET=

apps/engine/package.json

@@ -11,18 +11,19 @@
   "dependencies": {
     "@hono/swagger-ui": "^0.5.0",
     "@hono/zod-openapi": "^0.18.3",
-    "@hono/zod-validator": "^0.4.1",
-    "hono": "^4.6.13",
+    "@hono/zod-validator": "^0.4.2",
+    "hono": "^4.6.14",
     "plaid": "^30.0.0",
+    "pluggy-sdk": "^0.65.1",
     "typesense": "^1.8.2",
     "workers-ai-provider": "^0.0.10",
     "xior": "^0.6.1",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20241205.0",
+    "@cloudflare/workers-types": "^4.20241218.0",
     "@types/bun": "^1.1.14",
-    "wrangler": "^3.93.0"
+    "wrangler": "^3.99.0"
   },
   "exports": {
     "./client": "./src/client/index.ts",

apps/engine/src/common/bindings.ts

@@ -10,6 +10,8 @@ export type Bindings = {
   PLAID_CLIENT_ID: string;
   PLAID_ENVIRONMENT: string;
   PLAID_SECRET: string;
+  PLUGGY_CLIENT_ID: string;
+  PLUGGY_SECRET: string;
   TYPESENSE_API_KEY: string;
   TYPESENSE_ENDPOINT_AU: string;
   TYPESENSE_ENDPOINT_EU: string;

apps/engine/src/common/schema.ts

@@ -25,7 +25,7 @@ export const GeneralErrorSchema = z.object({
   }),
 });
 
-export const Providers = z.enum(["teller", "plaid", "gocardless"]);
+export const Providers = z.enum(["teller", "plaid", "gocardless", "pluggy"]);
 
 export const HeadersSchema = z.object({
   authorization: z.string().openapi({

apps/engine/src/providers/index.ts

@@ -1,6 +1,7 @@
 import { logger } from "@/utils/logger";
 import { GoCardLessProvider } from "./gocardless/gocardless-provider";
 import { PlaidProvider } from "./plaid/plaid-provider";
+import { PluggyProvider } from "./pluggy/pluggy-provider";
 import { TellerProvider } from "./teller/teller-provider";
 import type {
   DeleteAccountsRequest,
@@ -17,7 +18,12 @@ import type {
 export class Provider {
   #name?: string;
 
-  #provider: PlaidProvider | TellerProvider | GoCardLessProvider | null = null;
+  #provider:
+    | PlaidProvider
+    | TellerProvider
+    | GoCardLessProvider
+    | PluggyProvider
+    | null = null;
 
   constructor(params?: ProviderParams) {
     this.#name = params?.provider;
@@ -32,6 +38,9 @@ export class Provider {
       case "plaid":
         this.#provider = new PlaidProvider(params);
         break;
+      case "pluggy":
+        this.#provider = new PluggyProvider(params);
+        break;
       default:
     }
   }