@upbudget/belvo-js
Version:
React component for Belvo
82 lines • 2.42 kB
JavaScript
import React, {
createContext,
useContext,
useMemo,
useCallback
} from "react";
import { BelvoEvents } from "../types";
import { useBelvoScript } from "../hooks/use-belvo-script";
import { useBelvoAccessToken } from "../hooks/use-belvo-access-token";
const BelvoWidgetContext = createContext(null);
function BelvoWidgetProvider({
getAccessToken,
analytics,
children
}) {
const { ready: scriptReady, error: scriptError } = useBelvoScript(
void 0,
analytics
);
const { fetchToken } = useBelvoAccessToken(getAccessToken, analytics);
const open = useCallback(
async (extra = {}) => {
if (!scriptReady) throw new Error("Belvo script not loaded");
if (!window.belvoSDK) throw new Error("Belvo SDK not available");
const access = await fetchToken();
if (!access) throw new Error("Failed to fetch access token");
analytics?.track(BelvoEvents.WIDGET_OPENED, {
external_id: extra.external_id
});
const defaultConfig = {
locale: "pt",
mode: "webapp",
integration_type: "openfinance"
};
return new Promise((resolve) => {
window.belvoSDK.createWidget(access, {
...defaultConfig,
...extra,
callback(link, institution) {
analytics?.track(BelvoEvents.CONNECTION_SUCCESS, {
link,
institution
});
extra.onSuccess?.(link, institution);
resolve();
},
onExit(data) {
analytics?.track(
BelvoEvents.CONNECTION_EXIT,
data
);
extra.onExit?.(data);
resolve();
},
onEvent(data) {
analytics?.track(
BelvoEvents.WIDGET_EVENT,
data
);
extra.onEvent?.(data);
}
}).build();
});
},
[scriptReady, fetchToken, analytics]
);
const value = useMemo(
() => ({ open, scriptReady, scriptError, analytics }),
[open, scriptReady, scriptError, analytics]
);
return /* @__PURE__ */ React.createElement(BelvoWidgetContext.Provider, { value }, children);
}
function useBelvo() {
const ctx = useContext(BelvoWidgetContext);
if (!ctx) throw new Error("useBelvoWidget must be inside <BelvoProvider>");
return ctx;
}
export {
BelvoWidgetProvider,
useBelvo
};
//# sourceMappingURL=belvo-provider.js.map