diff --git a/src/hooks/useGatewayEvents.ts b/src/hooks/useGatewayEvents.ts index 270949256..88d5f130a 100644 --- a/src/hooks/useGatewayEvents.ts +++ b/src/hooks/useGatewayEvents.ts @@ -1,16 +1,22 @@ +import Gleap from 'gleap'; import { useCallback } from 'react'; import { useSidebarLayoutEnabled } from '@/components/sidebar-navigation/hooks'; import { useNavigationStore } from '@/components/sidebar-navigation/store'; import type { PinnedApp } from '@/components/sidebar-navigation/utils'; +type GleapGatewayEvent = { + type: 'GLEAP'; + action: 'CLOSE' | 'OPEN'; +}; + type PinnedAppsGatewayEvent = { type: 'PINNED_APPS'; app?: PinnedApp; action: 'FEATURE_ENABLED' | 'PINNED' | 'UNPINNED'; }; -type GatewayEvent = PinnedAppsGatewayEvent; +type GatewayEvent = GleapGatewayEvent | PinnedAppsGatewayEvent; const COMPONENT_AUTHOR_ID_WHITELIST = ['near', 'discom.testnet', 'discom-dev.testnet']; @@ -18,6 +24,16 @@ export function useGatewayEvents() { const { sidebarLayoutEnabled } = useSidebarLayoutEnabled(); const modifyPinnedApps = useNavigationStore((store) => store.modifyPinnedApps); + const handleGleapEvent = useCallback((event: GleapGatewayEvent) => { + if (event.action === 'CLOSE') { + Gleap.close(); + } else if (event.action === 'OPEN') { + Gleap.open(); + } else { + console.error('Unimplemented gleap gateway event recorded:', event); + } + }, []); + const handlePinnedAppsEvent = useCallback( (event: PinnedAppsGatewayEvent) => { if (event.action === 'FEATURE_ENABLED') { @@ -34,13 +50,15 @@ export function useGatewayEvents() { const emitGatewayEvent = useCallback( (event: GatewayEvent) => { switch (event.type) { + case 'GLEAP': + return handleGleapEvent(event); case 'PINNED_APPS': return handlePinnedAppsEvent(event); default: console.error('Unimplemented gateway event recorded:', event); } }, - [handlePinnedAppsEvent], + [handleGleapEvent, handlePinnedAppsEvent], ); const shouldPassGatewayEventProps = useCallback((componentAuthorId: string) => { diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 028479d58..f03899aa2 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -5,6 +5,7 @@ import '@near-wallet-selector/modal-ui/styles.css'; import 'react-bootstrap-typeahead/css/Typeahead.css'; import 'react-bootstrap-typeahead/css/Typeahead.bs5.css'; +import Gleap from 'gleap'; import type { AppProps } from 'next/app'; import dynamic from 'next/dynamic'; import Head from 'next/head'; @@ -21,6 +22,7 @@ import { useHashUrlBackwardsCompatibility } from '@/hooks/useHashUrlBackwardsCom import { usePageAnalytics } from '@/hooks/usePageAnalytics'; import { useAuthStore } from '@/stores/auth'; import { init as initializeAnalytics, recordHandledError, setReferrer } from '@/utils/analytics'; +import { gleapSdkToken } from '@/utils/config'; import { setNotificationsLocalStorage } from '@/utils/notificationsLocalStorage'; import type { NextPageWithLayout } from '@/utils/types'; import { styleZendesk } from '@/utils/zendesk'; @@ -33,6 +35,10 @@ type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout; }; +if (typeof window !== 'undefined') { + if (gleapSdkToken) Gleap.initialize(gleapSdkToken); +} + export default function App({ Component, pageProps }: AppPropsWithLayout) { useBosLoaderInitializer(); useHashUrlBackwardsCompatibility();