UNPKG

react-use-zendesk

Version:

React Zendesk Web Widget integration written in typescript

1 lines 18 kB
{"version":3,"sources":["../src/provider.tsx","../src/context.ts","../src/initialize.ts","../src/utils.ts","../src/api.ts","../src/useZendesk.tsx"],"names":["React","useEffect","useLayoutEffect","useRef","createContext","ZendeskContext","IdScript","initialize","apiKey","onLoad","setup","removeNodes","appendScript","scriptElement","frameElement","s","x","isSSR","ZendeskApi","scope","method","args","ZendeskProvider","onOpen","onClose","onUnreadMessages","onResetWidget","onProactiveMessageDisplayed","onProactiveMessageClicked","onConversationStarted","onConversationOpened","onNewConversationButtonClicked","onConversationWithAgentRequested","onConversationAgentAssigned","onMessagesShown","children","isRegisteredCb","isOpen","setIsOpen","unreadMessages","setUnreadMessages","onOpenRef","onCloseRef","onUnreadMessagesRef","onResetWidgetRef","onProactiveMessageDisplayedRef","onProactiveMessageClickedRef","onConversationStartedRef","onConversationOpenedRef","onNewConversationButtonClickedRef","onConversationWithAgentRequestedRef","onConversationAgentAssignedRef","onMessagesShownRef","registerCallback","event","resetWidget","show","hide","open","close","setLocale","newLocale","setZIndex","newZIndex","setCookies","range","setConversationFields","conversationFields","setConversationTags","conversationTags","newConversation","conversationOptions","loginUser","jwtToken","loginCallback","jwtTokenCb","logoutUser","callback","setCustomize","customization","useSessionAuth","initialProviderValue","useZendesk","context"],"mappings":"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","sourcesContent":["\"use client\";\nimport React, { useEffect, useLayoutEffect, useRef } from \"react\";\nimport { ZendeskContext } from \"./context\";\nimport {\n EventMessagingConversationAgentAssigned,\n EventMessagingConversationOpened,\n EventMessagingConversationStarted,\n EventMessagingConversationWithAgentRequested,\n EventMessagingMessagesShown,\n EventMessagingNewConversationButtonClicked,\n EventMessagingOpenedClosed,\n EventMessagingProactiveMessageClicked,\n EventMessagingProactiveMessageDisplayed,\n LoginFailedError,\n ZendeskContextValues,\n ZendeskConversationField,\n ZendeskConversationOptions,\n ZendeskCustomizationTheme,\n ZendeskProviderProps,\n} from \"./types\";\nimport { PropsWithChildren } from \"react\";\nimport { initialize } from \"./initialize\";\nimport { ZendeskApi } from \"./api\";\n\nexport const ZendeskProvider: React.FC<\n PropsWithChildren<ZendeskProviderProps>\n> = ({\n apiKey,\n onOpen,\n onClose,\n onUnreadMessages,\n onResetWidget,\n onProactiveMessageDisplayed,\n onProactiveMessageClicked,\n onConversationStarted,\n onConversationOpened,\n onNewConversationButtonClicked,\n onConversationWithAgentRequested,\n onConversationAgentAssigned,\n onMessagesShown,\n children,\n}) => {\n const isRegisteredCb = useRef(false);\n\n const [isOpen, setIsOpen] = React.useState(false);\n const [unreadMessages, setUnreadMessages] = React.useState<\n number | undefined\n >(undefined);\n\n const onOpenRef = useRef(onOpen);\n const onCloseRef = useRef(onClose);\n const onUnreadMessagesRef = useRef(onUnreadMessages);\n const onResetWidgetRef = useRef(onResetWidget);\n const onProactiveMessageDisplayedRef = useRef(onProactiveMessageDisplayed);\n const onProactiveMessageClickedRef = useRef(onProactiveMessageClicked);\n const onConversationStartedRef = useRef(onConversationStarted);\n const onConversationOpenedRef = useRef(onConversationOpened);\n const onNewConversationButtonClickedRef = useRef(\n onNewConversationButtonClicked,\n );\n const onConversationWithAgentRequestedRef = useRef(\n onConversationWithAgentRequested,\n );\n const onConversationAgentAssignedRef = useRef(onConversationAgentAssigned);\n const onMessagesShownRef = useRef(onMessagesShown);\n\n useLayoutEffect(() => {\n onOpenRef.current = onOpen;\n onCloseRef.current = onClose;\n onUnreadMessagesRef.current = onUnreadMessages;\n onResetWidgetRef.current = onResetWidget;\n onProactiveMessageDisplayedRef.current = onProactiveMessageDisplayed;\n onProactiveMessageClickedRef.current = onProactiveMessageClicked;\n onConversationStartedRef.current = onConversationStarted;\n onConversationOpenedRef.current = onConversationOpened;\n onNewConversationButtonClickedRef.current = onNewConversationButtonClicked;\n onConversationWithAgentRequestedRef.current =\n onConversationWithAgentRequested;\n onConversationAgentAssignedRef.current = onConversationAgentAssigned;\n onMessagesShownRef.current = onMessagesShown;\n });\n\n function registerCallback() {\n if (isRegisteredCb.current) {\n return;\n }\n\n ZendeskApi(\n \"messenger:on\",\n \"open\",\n function (event: EventMessagingOpenedClosed) {\n setIsOpen(true);\n !!onOpenRef.current && onOpenRef.current(event);\n },\n );\n\n ZendeskApi(\n \"messenger:on\",\n \"close\",\n function (event: EventMessagingOpenedClosed) {\n setIsOpen(false);\n !!onCloseRef.current && onCloseRef.current(event);\n },\n );\n\n ZendeskApi(\n \"messenger:on\",\n \"unreadMessages\",\n function (unreadMessages: number) {\n setUnreadMessages(unreadMessages);\n !!onUnreadMessagesRef.current &&\n onUnreadMessagesRef.current(unreadMessages);\n },\n );\n\n ZendeskApi(\n \"messenger:on\",\n \"proactiveMessageDisplayed\",\n function (event: EventMessagingProactiveMessageDisplayed) {\n !!onProactiveMessageDisplayedRef.current &&\n onProactiveMessageDisplayedRef.current(event);\n },\n );\n\n ZendeskApi(\n \"messenger:on\",\n \"proactiveMessageClicked\",\n function (event: EventMessagingProactiveMessageClicked) {\n !!onProactiveMessageClickedRef.current &&\n onProactiveMessageClickedRef.current(event);\n },\n );\n\n ZendeskApi(\n \"messenger:on\",\n \"conversationStarted\",\n function (event: EventMessagingConversationStarted) {\n !!onConversationStartedRef.current &&\n onConversationStartedRef.current(event);\n },\n );\n\n ZendeskApi(\n \"messenger:on\",\n \"conversationOpened\",\n function (event: EventMessagingConversationOpened) {\n !!onConversationOpenedRef.current &&\n onConversationOpenedRef.current(event);\n },\n );\n\n ZendeskApi(\n \"messenger:on\",\n \"newConversationButtonClicked\",\n function (event: EventMessagingNewConversationButtonClicked) {\n !!onNewConversationButtonClickedRef.current &&\n onNewConversationButtonClickedRef.current(event);\n },\n );\n\n ZendeskApi(\n \"messenger:on\",\n \"conversationWithAgentRequested\",\n function (event: EventMessagingConversationWithAgentRequested) {\n !!onConversationWithAgentRequestedRef.current &&\n onConversationWithAgentRequestedRef.current(event);\n },\n );\n\n ZendeskApi(\n \"messenger:on\",\n \"conversationAgentAssigned\",\n function (event: EventMessagingConversationAgentAssigned) {\n !!onConversationAgentAssignedRef.current &&\n onConversationAgentAssignedRef.current(event);\n },\n );\n\n ZendeskApi(\n \"messenger:on\",\n \"messagesShown\",\n function (event: EventMessagingMessagesShown) {\n !!onMessagesShownRef.current && onMessagesShownRef.current(event);\n },\n );\n\n isRegisteredCb.current = true;\n }\n\n useEffect(() => {\n initialize(apiKey, registerCallback);\n return () => {\n isRegisteredCb.current = false;\n resetWidget();\n };\n }, [apiKey]);\n\n const show = React.useCallback(() => {\n ZendeskApi(\"messenger\", \"show\");\n }, []);\n\n const hide = React.useCallback(() => {\n ZendeskApi(\"messenger\", \"hide\");\n }, []);\n\n const open = React.useCallback(() => {\n ZendeskApi(\"messenger\", \"open\");\n }, []);\n\n const close = React.useCallback(() => {\n ZendeskApi(\"messenger\", \"close\");\n }, []);\n\n const setLocale = React.useCallback((newLocale: string) => {\n ZendeskApi(\"messenger:set\", \"locale\", newLocale);\n }, []);\n\n const setZIndex = React.useCallback((newZIndex: number) => {\n ZendeskApi(\"messenger:set\", \"zIndex\", newZIndex);\n }, []);\n\n const setCookies = React.useCallback((range: string) => {\n ZendeskApi(\"messenger:set\", \"cookies\", range);\n }, []);\n\n const setConversationFields = React.useCallback(\n (conversationFields: Array<ZendeskConversationField>) => {\n ZendeskApi(\"messenger:set\", \"conversationFields\", conversationFields);\n },\n [],\n );\n\n const setConversationTags = React.useCallback(\n (conversationTags: Array<string>) => {\n ZendeskApi(\"messenger:set\", \"conversationTags\", conversationTags);\n },\n [],\n );\n\n const newConversation = React.useCallback(\n (conversationOptions?: Partial<ZendeskConversationOptions>) => {\n ZendeskApi(\"messenger:ui\", \"newConversation\", conversationOptions);\n },\n [],\n );\n\n const loginUser = React.useCallback(\n (\n jwtToken: string,\n loginCallback?: (error: null | LoginFailedError) => void,\n ) => {\n ZendeskApi(\n \"messenger\",\n \"loginUser\",\n (jwtTokenCb: (token: string) => void) => {\n jwtTokenCb(jwtToken);\n },\n loginCallback,\n );\n },\n [],\n );\n\n const logoutUser = React.useCallback(() => {\n ZendeskApi(\"messenger\", \"logoutUser\");\n }, []);\n\n const resetWidget = React.useCallback(() => {\n ZendeskApi(\"messenger\", \"resetWidget\", (callback: () => void) => {\n !!onResetWidgetRef.current && onResetWidgetRef.current();\n });\n }, []);\n\n const setCustomize = React.useCallback(\n (customization: Partial<ZendeskCustomizationTheme>) => {\n ZendeskApi(\"messenger:set\", \"customization\", customization);\n },\n [],\n );\n\n const useSessionAuth = React.useCallback(() => {\n ZendeskApi(\"messenger\", \"useSessionAuth\");\n }, []);\n\n const initialProviderValue: ZendeskContextValues = {\n show,\n hide,\n open,\n close,\n setLocale,\n setZIndex,\n setCookies,\n setConversationFields,\n setConversationTags,\n loginUser,\n logoutUser,\n resetWidget,\n setCustomize,\n newConversation,\n useSessionAuth,\n isOpen,\n unreadMessages,\n };\n\n return (\n <ZendeskContext.Provider value={initialProviderValue}>\n {children}\n </ZendeskContext.Provider>\n );\n};\n","\"use client\";\n\nimport { createContext } from \"react\";\nimport { ZendeskContextValues } from \"./types\";\n\nexport const ZendeskContext = createContext<ZendeskContextValues | undefined>(\n undefined,\n);\n","const IdScript = \"ze-snippet\";\n\nexport function initialize(apiKey: string, onLoad: () => void) {\n if (\n !!apiKey &&\n typeof window !== \"undefined\"\n // && typeof window.zE === \"undefined\"\n ) {\n const setup = () => {\n removeNodes();\n appendScript(apiKey, onLoad);\n };\n if (document.readyState === \"complete\") {\n setup();\n } else if (window.attachEvent) {\n window.attachEvent(\"onload\", setup);\n } else {\n window.addEventListener(\"load\", setup, false);\n }\n }\n}\n\nexport function removeNodes() {\n if (typeof window !== \"undefined\") {\n delete window.zE;\n delete (window as any).zEmbed;\n delete (window as any).zEACLoaded;\n delete (window as any).zEWebpackACJsonp;\n var scriptElement = document.getElementById(IdScript);\n var frameElement = document.querySelector(\"iframe#launcher\");\n if (scriptElement) {\n scriptElement.remove();\n }\n if (frameElement) {\n frameElement.remove();\n }\n }\n}\n\nexport function appendScript(apiKey: string, onLoad: () => void) {\n setTimeout(function () {\n const s = document.createElement(\"script\");\n s.id = IdScript;\n s.type = \"text/javascript\";\n s.async = true;\n s.onload = onLoad;\n\n s.src = \"https://static.zdassets.com/ekr/snippet.js?key=\" + apiKey;\n\n const x = document.getElementsByTagName(\"script\")[0];\n x?.parentNode.insertBefore(s, x);\n }, 0);\n}\n","export const isSSR = typeof window === \"undefined\";\n","import { ZendeskMethod } from \"./types\";\nimport { isSSR } from \"./utils\";\n\ntype Scope = \"messenger\" | \"messenger:on\" | \"messenger:set\" | \"messenger:ui\";\nexport const ZendeskApi = (\n scope: Scope,\n method: ZendeskMethod,\n ...args: Array<unknown>\n) => {\n if (!isSSR && !!window && window.zE) {\n return window.zE.apply(null, [scope, method, ...args]);\n }\n};\n","\"use client\";\nimport React from \"react\";\nimport { ZendeskContext } from \"./context\";\nimport { ZendeskContextValues } from \"./types\";\n\nexport function useZendesk() {\n const context = React.useContext(ZendeskContext);\n if (context === undefined) {\n throw new Error(`\"useZendesk\" must be used within \"ZendeskProvider\"`);\n }\n return context as ZendeskContextValues;\n}\n"]}