Zendesk: Vanilla and React integration #111
Conversation
Co-authored-by: Matias Pompilio <matias.pompilio@nan-labs.com> Co-authored-by: Ulises Jeremias <ulisescf.24@gmail.com>
WalkthroughThe changes introduce and update functionalities related to Zendesk and Google ReCaptcha third-party integrations within a React application. This includes the addition of context and provider for Zendesk, defining Zendesk-related TypeScript interfaces, and updating script handling functions. These modifications facilitate interaction with the Zendesk API and streamline the management of ReCaptcha scripts. Changes
Poem
Tip AI model upgrade
|
|
@coderabbitai review |
Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (16)
- .changeset/curvy-bikes-peel.md (1 hunks)
- apps/playground/src/stories/react-thirdparty/Zendesk.stories.mdx (1 hunks)
- packages/react-thirdparty/index.tsx (1 hunks)
- packages/react-thirdparty/recaptcha/GoogleReCaptcha.tsx (1 hunks)
- packages/react-thirdparty/recaptcha/Provider.tsx (3 hunks)
- packages/react-thirdparty/zendesk/Context.tsx (1 hunks)
- packages/react-thirdparty/zendesk/Provider.tsx (1 hunks)
- packages/react-thirdparty/zendesk/README.md (1 hunks)
- packages/react-thirdparty/zendesk/Zendesk.tsx (1 hunks)
- packages/react-thirdparty/zendesk/index.ts (1 hunks)
- packages/react-thirdparty/zendesk/useZendesk.ts (1 hunks)
- packages/thirdparty/index.ts (1 hunks)
- packages/thirdparty/recaptcha/scripts.ts (2 hunks)
- packages/thirdparty/zendesk/index.ts (1 hunks)
- packages/thirdparty/zendesk/scripts.ts (1 hunks)
- packages/tsconfig/react-library.json (1 hunks)
Files skipped from review due to trivial changes (4)
- packages/react-thirdparty/zendesk/index.ts
- packages/thirdparty/index.ts
- packages/thirdparty/zendesk/index.ts
- packages/tsconfig/react-library.json
Additional context used
Biome
packages/thirdparty/zendesk/scripts.ts
[error] 43-43: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
packages/thirdparty/recaptcha/scripts.ts
[error] 62-62: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 87-87: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
LanguageTool
packages/react-thirdparty/zendesk/README.md
[style] ~61-~61: As an alternative to the over-used intensifier ‘very’, consider replacing this phrase.
Context: ...use the custom hookuseZendesk. It's very simple to use the hook: ```tsx import React f...(EN_WEAK_ADJECTIVE)
apps/playground/src/stories/react-thirdparty/Zendesk.stories.mdx
[style] ~61-~61: As an alternative to the over-used intensifier ‘very’, consider replacing this phrase.
Context: ...use the custom hookuseZendesk. It's very simple to use the hook: ```tsx import React f...(EN_WEAK_ADJECTIVE)
Additional comments not posted (39)
packages/react-thirdparty/index.tsx (1)
2-2: LGTM! Exporting Zendesk module.The addition of the export statement for the Zendesk module looks good.
.changeset/curvy-bikes-peel.md (1)
1-8: LGTM! Changeset file is well-formed.The changeset file accurately documents the version updates and the addition of Zendesk integration.
packages/react-thirdparty/zendesk/useZendesk.ts (1)
1-10: LGTM! Custom hook implementation.The
useZendeskcustom hook is well-implemented and follows best practices for accessing context in React.packages/react-thirdparty/recaptcha/GoogleReCaptcha.tsx (1)
1-9: LGTM! GoogleReCaptcha component implementation.The
GoogleReCaptchacomponent correctly uses the custom hook and renders the appropriate container.packages/react-thirdparty/zendesk/Zendesk.tsx (2)
1-1: ImportReactas a namespace.For consistency and to avoid potential issues with JSX transformation, import
Reactas a namespace.-import React, { FC, useEffect } from "react"; +import * as React from "react"; +import { FC, useEffect } from "react";
8-22: LGTM!The
Zendeskcomponent is well-structured and correctly uses theuseZendeskhook anduseEffect.packages/react-thirdparty/zendesk/Context.tsx (3)
1-1: ImportReactas a namespace.For consistency and to avoid potential issues with JSX transformation, import
Reactas a namespace.-import { createContext, useContext } from "react"; +import * as React from "react"; +import { createContext, useContext } from "react";
3-5: Consider adding types forparams.To enhance type safety, consider adding a type for the
paramsargument in theexecuteZendeskfunction.-export interface ZendeskContextProps { - executeZendesk: (action: string, params?: any) => void; +export interface ZendeskContextProps<T = any> { + executeZendesk: (action: string, params?: T) => void; }
16-21: LGTM!The custom hook
useZendeskContextis well-implemented and handles errors appropriately.packages/react-thirdparty/zendesk/Provider.tsx (5)
1-1: ImportReactas a namespace.For consistency and to avoid potential issues with JSX transformation, import
Reactas a namespace.-import React, { useEffect, ReactNode, useCallback, useState } from "react"; +import * as React from "react"; +import { useEffect, ReactNode, useCallback, useState } from "react";
33-35: Avoid usinganytype.Replace
(window as any)with a more specific type to improve type safety.- if (typeof window === "undefined" || !(window as any).zE) { + if (typeof window === "undefined" || !('zE' in window)) {
43-55: Ensure cleanup function dependencies are correct.The cleanup function should include all dependencies that could affect the injected script.
Ensure that the cleanup function correctly handles all dependencies.
57-63: LGTM!The
ZendeskProvidercomponent is well-implemented and correctly manages the script lifecycle and context value.
21-27: OptimizeexecuteZendeskfunction.Avoid creating a new function instance on each render by moving the function definition outside the
useCallbackhook.- const executeZendesk = useCallback( - (action: string, params?: any) => { - if (!zendeskClient) { - console.warn("Zendesk client is not available"); - return; - } - zendeskClient(action, params); - }, - [zendeskClient] - ); + const executeZendesk = (action: string, params?: any) => { + if (!zendeskClient) { + console.warn("Zendesk client is not available"); + return; + } + zendeskClient(action, params); + };Likely invalid or redundant comment.
packages/thirdparty/zendesk/scripts.ts (2)
1-1: Consider using a union type forZendeskSrc.To ensure type safety, consider using a union type for the
ZendeskSrc.-export type ZendeskSrc = "https://static.zdassets.com/ekr/snippet.js"; +export type ZendeskSrc = "https://static.zdassets.com/ekr/snippet.js" | string;
64-69: LGTM!The script management functions are well-implemented and correctly handle parameters and script tags.
packages/react-thirdparty/zendesk/README.md (9)
1-6: Good introduction and context setting.The introduction provides a clear overview of the purpose of the document.
8-13: Clear instructions for providing an API key.The instructions for obtaining an API key are clear and the link to Zendesk is correct.
14-22: Clear explanation of theZendeskProvidercomponent.The explanation of the
ZendeskProvidercomponent is clear and concise.
24-37: Correct and clear code example forZendeskProvider.The code example for the
ZendeskProvidercomponent is correct and easy to understand.
40-55: Correct and clear code example forZendeskcomponent.The code example for the
Zendeskcomponent is correct and easy to understand.
57-61: Consider rephrasing to avoid weak adjectives.As an alternative to the over-used intensifier ‘very’, consider rephrasing this phrase for stronger impact.
- It's very simple to use the hook: + Using the hook is straightforward:Tools
LanguageTool
[style] ~61-~61: As an alternative to the over-used intensifier ‘very’, consider replacing this phrase.
Context: ...use the custom hookuseZendesk. It's very simple to use the hook: ```tsx import React f...(EN_WEAK_ADJECTIVE)
63-79: Correct and clear code example foruseZendeskhook.The code example for the
useZendeskhook is correct and easy to understand.
Line range hint
82-95: Correct and clear additional example forZendeskcomponent.The additional example for the
Zendeskcomponent is correct and easy to understand.Tools
LanguageTool
[style] ~61-~61: As an alternative to the over-used intensifier ‘very’, consider replacing this phrase.
Context: ...use the custom hookuseZendesk. It's very simple to use the hook: ```tsx import React f...(EN_WEAK_ADJECTIVE)
Line range hint
97-120: Correct and clear additional example foruseZendeskhook.The additional example for the
useZendeskhook is correct and easy to understand.Tools
LanguageTool
[style] ~61-~61: As an alternative to the over-used intensifier ‘very’, consider replacing this phrase.
Context: ...use the custom hookuseZendesk. It's very simple to use the hook: ```tsx import React f...(EN_WEAK_ADJECTIVE)
packages/thirdparty/recaptcha/scripts.ts (3)
1-6: Correct and clear type definitions.The type definitions for
GoogleReCaptchaSrcandGoogleReCaptchaScriptPropsare correct and clear.
Line range hint
9-23: Correct and cleargenerateGoogleReCaptchaScriptfunction.The function correctly generates a script tag for the Google ReCaptcha API and follows best practices.
Line range hint
25-51: Correct and clearinjectGoogleReCaptchaScriptfunction.The function correctly injects a script tag for Google ReCaptcha API and follows best practices.
packages/react-thirdparty/recaptcha/Provider.tsx (3)
Line range hint
1-18: Correct and clear imports and type definitions.The imports and type definitions are correct and clear.
Line range hint
20-90: Correct and clearGoogleReCaptchaProvidercomponent.The component correctly manages the Google ReCaptcha context and script injection, following best practices.
Line range hint
92-96: Correct and clear return statement.The return statement correctly provides the context value to child components.
apps/playground/src/stories/react-thirdparty/Zendesk.stories.mdx (8)
1-10: Good introduction and context setting.The introduction provides a clear overview of the purpose of the document.
12-18: Clear instructions for providing a Zendesk key.The instructions for obtaining a Zendesk key are clear and the information is correct.
20-38: Clear explanation and correct code example forZendeskProvider.The explanation and code example for the
ZendeskProvidercomponent are clear and correct.
40-55: Clear explanation and correct code example forZendeskcomponent.The explanation and code example for the
Zendeskcomponent are clear and correct.
57-61: Consider rephrasing to avoid weak adjectives.As an alternative to the over-used intensifier ‘very’, consider rephrasing this phrase for stronger impact.
- It's very simple to use the hook: + Using the hook is straightforward:Tools
LanguageTool
[style] ~61-~61: As an alternative to the over-used intensifier ‘very’, consider replacing this phrase.
Context: ...use the custom hookuseZendesk. It's very simple to use the hook: ```tsx import React f...(EN_WEAK_ADJECTIVE)
63-80: Correct and clear code example foruseZendeskhook.The code example for the
useZendeskhook is correct and easy to understand.
82-95: Correct and clear additional example forZendeskcomponent.The additional example for the
Zendeskcomponent is correct and easy to understand.
97-120: Correct and clear additional example foruseZendeskhook.The additional example for the
useZendeskhook is correct and easy to understand.
This commit refactors the Zendesk integration in the react-thirdparty package. It updates the `ZendeskContextProps` interface in `Context.tsx` to use the `ZendeskWidget` type instead of `any`. It also updates the `ZendeskProvider` component in `Provider.tsx` to use the `ZendeskWidget` type for the `zendeskClient` state and the `executeZendesk` function. Co-authored-by: Matias Pompilio <matias.pompilio@nan-labs.com> Co-authored-by: Ulises Jeremias <ulisescf.24@gmail.com>
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (8)
- packages/react-thirdparty/recaptcha/Context.tsx (2 hunks)
- packages/react-thirdparty/recaptcha/index.ts (1 hunks)
- packages/react-thirdparty/recaptcha/useGoogleReCaptcha.ts (1 hunks)
- packages/react-thirdparty/zendesk/Context.tsx (1 hunks)
- packages/react-thirdparty/zendesk/Provider.tsx (1 hunks)
- packages/react-thirdparty/zendesk/Zendesk.tsx (1 hunks)
- packages/react-thirdparty/zendesk/useZendesk.ts (1 hunks)
- packages/react-thirdparty/zendesk/zendesk.d.ts (1 hunks)
Files skipped from review as they are similar to previous changes (4)
- packages/react-thirdparty/zendesk/Context.tsx
- packages/react-thirdparty/zendesk/Provider.tsx
- packages/react-thirdparty/zendesk/Zendesk.tsx
- packages/react-thirdparty/zendesk/useZendesk.ts
Additional comments not posted (4)
packages/react-thirdparty/recaptcha/index.ts (1)
1-4: LGTM!The changes are consistent with the new modules added for Google ReCaptcha.
packages/react-thirdparty/recaptcha/Context.tsx (1)
Line range hint
1-17: LGTM!The changes are consistent with the new modules added for Google ReCaptcha and the context is correctly implemented.
packages/react-thirdparty/recaptcha/useGoogleReCaptcha.ts (1)
Line range hint
1-36: LGTM!The custom hook for Google ReCaptcha is correctly implemented and consistent with the new modules added.
packages/react-thirdparty/zendesk/zendesk.d.ts (1)
1-160: LGTM!The TypeScript interfaces for Zendesk integration are correctly defined and comprehensive.
Co-authored-by: Matias Pompilio <matias.pompilio@nan-labs.com> Co-authored-by: Ulises Jeremias <ulisescf.24@gmail.com>
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (14)
packages/react-thirdparty/zendesk/zendesk.d.ts (14)
5-30: Ensure method signature consistency.The
loginUsermethod's callback parameter should have a more descriptive name for clarity.- callback: (fn: (newJwtForUser: string) => void) => void + callback: (generateNewJwt: (newJwtForUser: string) => void) => void
39-39: Ensure method signature consistency.The
logoutUsermethod should be consistent with the naming conventions used in other methods.- (type: "messenger", command: "logoutUser"): void; + (type: "messenger", command: "logout"): void;
46-46: Ensure method signature consistency.The
showmethod should be consistent with the naming conventions used in other methods.- (type: "messenger", command: "show"): void; + (type: "messenger", command: "display"): void;
51-51: Ensure method signature consistency.The
hidemethod should be consistent with the naming conventions used in other methods.- (type: "messenger", command: "hide"): void; + (type: "messenger", command: "conceal"): void;
56-56: Ensure method signature consistency.The
openmethod should be consistent with the naming conventions used in other methods.- (type: "messenger", command: "open"): void; + (type: "messenger", command: "activate"): void;
61-61: Ensure method signature consistency.The
closemethod should be consistent with the naming conventions used in other methods.- (type: "messenger", command: "close"): void; + (type: "messenger", command: "deactivate"): void;
66-66: Ensure method signature consistency.The
onmethod should be consistent with the naming conventions used in other methods.- (type: "messenger:on", event: "open", callback: () => void): void; + (type: "messenger:onEvent", event: "open", callback: () => void): void;
71-71: Ensure method signature consistency.The
onmethod should be consistent with the naming conventions used in other methods.- (type: "messenger:on", event: "close", callback: () => void): void; + (type: "messenger:onEvent", event: "close", callback: () => void): void;
76-80: Ensure method signature consistency.The
onmethod should be consistent with the naming conventions used in other methods.- (type: "messenger:on", event: "unreadMessages", callback: (unreadMessageCount: number) => void): void; + (type: "messenger:onEvent", event: "unreadMessages", callback: (unreadMessageCount: number) => void): void;
93-93: Ensure method signature consistency.The
setmethod should be consistent with the naming conventions used in other methods.- (type: "messenger:set", setting: "locale", newLocale: string): void; + (type: "messenger:setSetting", setting: "locale", newLocale: string): void;
103-103: Ensure method signature consistency.The
setmethod should be consistent with the naming conventions used in other methods.- (type: "messenger:set", setting: "zIndex", newZIndex: number): void; + (type: "messenger:setSetting", setting: "zIndex", newZIndex: number): void;
114-114: Ensure method signature consistency.The
setmethod should be consistent with the naming conventions used in other methods.- (type: "messenger:set", setting: "cookies", isEnabled: boolean): void; + (type: "messenger:setSetting", setting: "cookies", isEnabled: boolean): void;
137-144: Ensure method signature consistency.The
setmethod should be consistent with the naming conventions used in other methods.- (type: "messenger:set", setting: "conversationFields", conversationFields: { id: string; value: string | number | boolean; }[]): void; + (type: "messenger:setSetting", setting: "conversationFields", conversationFields: { id: string; value: string | number | boolean; }[]): void;
164-167: Ensure method signature consistency.The
setmethod should be consistent with the naming conventions used in other methods.- (type: "messenger:set", setting: "conversationTags", conversationTags: string[]): void; + (type: "messenger:setSetting", setting: "conversationTags", conversationTags: string[]): void;
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (6)
- packages/react-thirdparty/zendesk/Context.tsx (1 hunks)
- packages/react-thirdparty/zendesk/Provider.tsx (1 hunks)
- packages/react-thirdparty/zendesk/Zendesk.tsx (1 hunks)
- packages/react-thirdparty/zendesk/zendesk.d.ts (1 hunks)
- packages/thirdparty/recaptcha/scripts.ts (3 hunks)
- packages/thirdparty/zendesk/scripts.ts (1 hunks)
Files skipped from review as they are similar to previous changes (5)
- packages/react-thirdparty/zendesk/Context.tsx
- packages/react-thirdparty/zendesk/Provider.tsx
- packages/react-thirdparty/zendesk/Zendesk.tsx
- packages/thirdparty/recaptcha/scripts.ts
- packages/thirdparty/zendesk/scripts.ts
Additional comments not posted (1)
packages/react-thirdparty/zendesk/zendesk.d.ts (1)
170-172: LGTM!The
Windowinterface extension is correct and follows best practices.
What's this PR do?
@nanlabs/thirdparty@nanlabs/react-thirdparty@ulises-jeremias @rpmolina
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes