@quiltt/react 4.0.1 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @quiltt/react
 
+## 4.1.0
+
+### Minor Changes
+
+- [#342](https://github.com/quiltt/quiltt-js/pull/342) [`6a387ba`](https://github.com/quiltt/quiltt-js/commit/6a387ba0db77912df85c6cd1924f63edf50f9cdd) Thanks [@sirwolfgang](https://github.com/sirwolfgang)! - Create useQuilttInstitutions hook
+
+### Patch Changes
+
+- Updated dependencies [[`6a387ba`](https://github.com/quiltt/quiltt-js/commit/6a387ba0db77912df85c6cd1924f63edf50f9cdd)]:
+  - @quiltt/core@4.1.0
+
 ## 4.0.1
 
 ### Patch Changes

package/dist/index.js

@@ -4,7 +4,7 @@ export { u as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect-clie
 import { Q as QuilttAuthProvider } from './QuilttAuthProvider-client-CER-TOln.js';
 export { b as useAuthenticateSession, a as useIdentifySession, u as useImportSession, c as useRevokeSession } from './QuilttAuthProvider-client-CER-TOln.js';
 export { u as useQuilttClient } from './useQuilttClient-client-CAAUait1.js';
-import { u as useQuilttConnector } from './useQuilttConnector-client-sRplTzek.js';
+import { u as useQuilttConnector } from './useQuilttConnector-client-BB7kw8vs.js';
 export { u as useQuilttSession } from './useQuilttSession-client-D2mjVT4S.js';
 export { u as useQuilttSettings } from './useQuilttSettings-client-BOCBjFXe.js';
 export { u as useSession } from './useSession-client-CCAvnROP.js';

package/dist/{useQuilttConnector-client-sRplTzek.js → useQuilttConnector-client-BB7kw8vs.js}

@@ -4,13 +4,15 @@ import { cdnBase } from '@quiltt/core';
 import { u as useQuilttSession } from './useQuilttSession-client-D2mjVT4S.js';
 import { u as useScript } from './useScript-client-JCgaTW9n.js';
 
-var version = "4.0.1";
+var version = "4.1.0";
 
 const useQuilttConnector = (connectorId, options)=>{
     const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`, {
         nonce: options?.nonce
     });
-    const { session } = useQuilttSession();
+    // This ensures we're not destructuring `session` before the script has loaded
+    const useQuilttSessionReturn = useQuilttSession();
+    const session = useQuilttSessionReturn?.session || null;
     const [connector, setConnector] = useState();
     const [isOpening, setIsOpening] = useState(false);
     // Set Session

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "React Components and Hooks for Quiltt Connector",
   "keywords": [
     "quiltt",
@@ -35,7 +35,8 @@
   "main": "dist/index.js",
   "dependencies": {
     "@apollo/client": "^3.12.4",
-    "@quiltt/core": "4.0.1"
+    "use-debounce": "^10.0.4",
+    "@quiltt/core": "4.1.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",

package/src/hooks/useQuilttConnector.ts

@@ -22,7 +22,11 @@ export const useQuilttConnector = (
   const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`, {
     nonce: options?.nonce,
   })
-  const { session } = useQuilttSession()
+
+  // This ensures we're not destructuring `session` before the script has loaded
+  const useQuilttSessionReturn = useQuilttSession()
+  const session = useQuilttSessionReturn?.session || null
+
   const [connector, setConnector] = useState<ConnectorSDKConnector>()
   const [isOpening, setIsOpening] = useState<boolean>(false)
 

package/src/hooks/useQuilttInstitutions.ts

@@ -0,0 +1,124 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+import { useDebounce } from 'use-debounce'
+
+import { InstitutionsAPI } from '@quiltt/core'
+import type { ErrorData, InstitutionsData } from '@quiltt/core'
+
+import { version } from '@/version'
+import useSession from './useSession'
+
+export type UseQuilttInstitutions = (
+  connectorId: string,
+  onErrorCallback?: (msg: string) => void
+) => {
+  searchTerm: string
+  searchResults: InstitutionsData
+  isSearching: boolean
+  setSearchTerm: (term: string) => void
+}
+
+export const useQuilttInstitutions: UseQuilttInstitutions = (connectorId, onErrorCallback) => {
+  const agent = useMemo(() => {
+    // Try deprecated navigator.product first (still used in some RN versions)
+    if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
+      return `react-native-${version}`
+    }
+
+    // Detect React Native by its unique environment characteristics
+    const isReactNative = !!(
+      // Has window (unlike Node.js)
+      (
+        typeof window !== 'undefined' &&
+        // No document in window (unlike browsers)
+        typeof window.document === 'undefined' &&
+        // Has navigator (unlike Node.js)
+        typeof navigator !== 'undefined'
+      )
+    )
+
+    return isReactNative ? `react-native-${version}` : `react-${version}`
+  }, [])
+
+  const institutionsAPI = useMemo(
+    () => new InstitutionsAPI(connectorId, agent),
+    [connectorId, agent]
+  )
+  const [session] = useSession()
+
+  const [searchTermInput, setSearchTermInput] = useState('')
+  const [searchTerm] = useDebounce(searchTermInput, 350)
+  const [searchResults, setSearchResults] = useState<InstitutionsData>([])
+
+  const [isSearching, setIsSearching] = useState(false)
+
+  /**
+   * Start Search
+   * This function is used to initiate a search for institutions based on the provided term with
+   * a minimum length of 2 characters. Debouncing is applied to avoid excessive API calls.
+   */
+  const startSearch = useCallback((term: string) => {
+    if (term.trim().length < 2) {
+      setSearchResults([])
+      setIsSearching(false)
+      return
+    }
+
+    setIsSearching(true)
+    setSearchTermInput(term)
+  }, [])
+
+  const handleError = useCallback(
+    (message: string) => {
+      const errorMessage = message || 'Unknown error occurred while searching institutions'
+
+      console.error('Quiltt Institutions Search Error:', errorMessage)
+      if (onErrorCallback) onErrorCallback(errorMessage)
+    },
+    [onErrorCallback]
+  )
+
+  /**
+   * Run Search
+   * This effect will run when the searchTerm changes and is at least 2 characters long.
+   */
+  useEffect(() => {
+    if (!session?.token || !connectorId || !searchTerm || searchTerm.trim().length < 2) {
+      return
+    }
+
+    const abortController = new AbortController()
+
+    institutionsAPI
+      .search(session?.token, connectorId, searchTerm, abortController.signal)
+      .then((response) => {
+        if (!abortController.signal.aborted) {
+          if (response.status === 200) {
+            setSearchResults(response.data as InstitutionsData)
+          } else {
+            handleError((response.data as ErrorData).message || 'Failed to fetch institutions')
+          }
+          setIsSearching(false)
+        }
+      })
+      .catch((error) => {
+        if (!abortController.signal.aborted) {
+          handleError(error.message)
+          setIsSearching(false)
+        }
+      })
+
+    return () => abortController.abort()
+  }, [session?.token, connectorId, searchTerm, institutionsAPI, handleError])
+
+  return {
+    searchTerm,
+    searchResults,
+    isSearching,
+    setSearchTerm: startSearch,
+  }
+}
+
+export default useQuilttInstitutions