From b34563c60c4976a423eef6190d5fecd49cf24392 Mon Sep 17 00:00:00 2001 From: Tyler Myracle Date: Tue, 16 Jan 2024 12:21:19 -0600 Subject: [PATCH] add useTeller hook --- libs/client/shared/src/hooks/index.ts | 1 + libs/client/shared/src/hooks/useTeller.ts | 71 +++++++++++++++++++++++ package.json | 1 + yarn.lock | 12 ++++ 4 files changed, 85 insertions(+) create mode 100644 libs/client/shared/src/hooks/useTeller.ts diff --git a/libs/client/shared/src/hooks/index.ts b/libs/client/shared/src/hooks/index.ts index 6481beb2..9410b7f4 100644 --- a/libs/client/shared/src/hooks/index.ts +++ b/libs/client/shared/src/hooks/index.ts @@ -9,5 +9,6 @@ export * from './useQueryParam' export * from './useScreenSize' export * from './useAccountNotifications' export * from './usePlaid' +export * from './useTeller' export * from './useProviderStatus' export * from './useModalManager' diff --git a/libs/client/shared/src/hooks/useTeller.ts b/libs/client/shared/src/hooks/useTeller.ts new file mode 100644 index 00000000..e44838f2 --- /dev/null +++ b/libs/client/shared/src/hooks/useTeller.ts @@ -0,0 +1,71 @@ +import { useState } from 'react' +import toast from 'react-hot-toast' +import * as Sentry from '@sentry/react' +import { useTellerConnect } from 'teller-connect-react' +import { useAccountContext, useUserAccountContext } from '../providers' +import { useLogger } from './useLogger' + +type TellerFailure = { + type: 'payee' | 'payment' + code: 'timeout' | 'error' + message: string +} + +export function useTeller() { + const logger = useLogger() + + const [institutionId, setInstitutionId] = useState(null) + + const { setExpectingAccounts } = useUserAccountContext() + const { setAccountManager } = useAccountContext() + + const tellerConfig = { + applicationId: process.env.NEXT_PUBLIC_TELLER_APP_ID, + institution: institutionId, + environment: process.env.NEXT_PUBLIC_TELLER_ENV, + selectAccount: 'disabled', + onInit: () => { + toast.dismiss(toastId) + logger.debug(`Teller Connect has initialized`) + }, + onSuccess: (enrollment) => { + logger.debug(`User enrolled successfully`, enrollment) + console.log(enrollment) + setExpectingAccounts(true) + }, + onExit: () => { + logger.debug(`Teller Connect exited`) + }, + onFailure: (failure: TellerFailure) => { + logger.error(`Teller Connect exited with error`, failure) + Sentry.captureEvent({ + level: 'error', + message: 'TELLER_CONNECT_ERROR', + tags: { + 'teller.error.code': failure.code, + 'teller.error.message': failure.message, + }, + }) + }, + } + + const { open, ready } = useTellerConnect(tellerConfig) + + useEffect(() => { + if (ready) { + open() + + if (selectAccount === 'disabled') { + setAccountManager({ view: 'idle' }) + } + } + }, [ready, open, setAccountManager]) + + return { + openTeller: async (institutionId: string) => { + toast('Initializing Teller...', { duration: 2_000 }) + setInstitutionId(institutionId) + }, + ready, + } +} diff --git a/package.json b/package.json index 96c52336..6b62db4a 100644 --- a/package.json +++ b/package.json @@ -153,6 +153,7 @@ "stripe": "^10.17.0", "superjson": "^1.11.0", "tailwindcss": "3.2.4", + "teller-connect-react": "^0.1.0", "tslib": "^2.3.0", "uuid": "^9.0.0", "winston": "^3.8.2", diff --git a/yarn.lock b/yarn.lock index e301ab27..1fb86738 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16600,6 +16600,11 @@ react-script-hook@^1.6.0: resolved "https://registry.yarnpkg.com/react-script-hook/-/react-script-hook-1.6.0.tgz#6a44ff5e65113cb29252eadad1b8306f5fe0c626" integrity sha512-aJm72XGWV+wJTKiqHmAaTNC/JQZV/Drv6A1kd1VQlzhzAXLqtBRBeTt3iTESImGe5TaBDHUOUeaGNw4v+7bqDw== +react-script-hook@^1.7.2: + version "1.7.2" + resolved "https://registry.yarnpkg.com/react-script-hook/-/react-script-hook-1.7.2.tgz#ec130d67f9a25fcde57fbfd1faa87e5b97521948" + integrity sha512-fhyCEfXb94fag34UPRF0zry1XGwmVY+79iibWwTqAoOiCzYJQOYTiWJ7CnqglA9tMSV8g45cQpHCMcBwr7dwhA== + react-shallow-renderer@^16.15.0: version "16.15.0" resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457" @@ -18532,6 +18537,13 @@ telejson@^6.0.8: lodash "^4.17.21" memoizerific "^1.11.3" +teller-connect-react@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/teller-connect-react/-/teller-connect-react-0.1.0.tgz#b3bae24f4410d622eb8c88c7668adb003eb7bfd7" + integrity sha512-ZI+OULCsuo/v1qetpjepOgM7TyIzwnMVE/54IruOPguQtJ/Ui3C1ax3wUb65AKZDyVQ7ZyjA+8ypT/yMYD9bIQ== + dependencies: + react-script-hook "^1.7.2" + terminal-link@^2.0.0: version "2.1.1" resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"