feat: replace reach out CTAs w/ crisp buttons #397
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 Walkthrough📝 WalkthroughWalkthroughThe changes introduce a new Changes
Possibly related PRs
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (8)
🚧 Files skipped from review as they are similar to previous changes (8)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (19)
src/components/CrispChat.tsx (3)
3-7: LGTM! Consider adding type definitions forwindow.$crisp.The
openCrispChatfunction is implemented correctly. It properly checks for the existence ofwindow.$crispbefore using it, which is a good practice to avoid runtime errors.To improve type safety and maintainability, consider adding type definitions for
window.$crisp.You can add the following type definition at the top of the file:
declare global { interface Window { $crisp?: { push: (args: any[]) => void; }; } }This will provide better TypeScript support and autocompletion for the
$crispobject.
9-15: LGTM! Consider memoizing the onClick handler.The
ChatWithSupportcomponent is well-implemented. It correctly spreads the rest of the props to the button element, sets the onClick handler toopenCrispChat, and renders the children prop inside the button.For a minor optimization, consider memoizing the onClick handler to prevent unnecessary re-renders.
You can optimize the component like this:
import React from 'react'; export const ChatWithSupport = React.memo(({ children, ...rest }: React.HTMLAttributes<HTMLButtonElement>) => { const handleClick = React.useCallback(() => { openCrispChat(); }, []); return ( <button {...rest} onClick={handleClick}> {children} </button> ); }); ChatWithSupport.displayName = 'ChatWithSupport';This optimization ensures that the onClick handler is not recreated on every render, which can be beneficial for performance in certain scenarios.
1-1: Great file structure! Consider adding React imports.The file has a clear structure with each exported entity serving a distinct purpose. To ensure compatibility with stricter TypeScript configurations and to make the React usage explicit, consider adding the following imports at the top of the file:
import React from 'react';This import will make the React usage explicit and prevent potential issues with stricter TypeScript configurations.
src/components/Cashout/Components/Faq.comp.tsx (2)
35-37: LGTM: ChatWithSupport component implementation looks good.The
ChatWithSupportcomponent is correctly implemented and placed within the FAQ dropdown. The styling and text content are appropriate for a support link.Consider adding an
aria-labelto theChatWithSupportcomponent to improve accessibility. For example:- <ChatWithSupport className="mt-2 text-blue-600 underline"> + <ChatWithSupport className="mt-2 text-blue-600 underline" aria-label="Open chat support"> Need help? Chat with support </ChatWithSupport>This will provide more context for screen reader users.
Line range hint
1-37: Summary: Successful integration of ChatWithSupport componentThe changes in this file effectively replace the previous support chat button with the new
ChatWithSupportcomponent. This modification aligns well with the PR objectives and maintains the overall structure and functionality of theFAQComponent. The implementation is clean and should provide a seamless transition for users accessing support.To further improve the component:
- Consider adding error handling within the
ChatWithSupportcomponent to gracefully handle any issues with the Crisp chat service.- If not already implemented, add analytics tracking to measure the usage and effectiveness of this new support chat feature.
src/components/Create/Link/Initial.view.tsx (2)
Line range hint
52-77: LGTM! Consider refactoring for DRY principle.The addition of specific error handling for unsupported cryptocurrencies (Solana, Bitcoin, Litecoin, and Tron) improves user feedback and aligns with the PR objective of enhancing error handling. The error messages are clear and informative.
Consider refactoring the repeated code blocks for each unsupported cryptocurrency to reduce duplication. Here's a suggested approach:
const unsupportedCryptos = [ { symbol: 'sol', name: 'Solana' }, { symbol: 'btc', name: 'Bitcoin' }, { symbol: 'ltc', name: 'Litecoin' }, { symbol: 'trx', name: 'Tron' } ]; for (const crypto of unsupportedCryptos) { if (validate(value, crypto.symbol)) { setErrorState({ showError: true, errorMessage: `We currently don't support ${crypto.name}. Reach out if you would like us to add support!`, }); return undefined; } }This refactored version maintains the same functionality while reducing code duplication and making it easier to add or remove unsupported cryptocurrencies in the future.
271-273: LGTM! Consider improving conditional rendering logic.The replacement of the Discord link with the
ChatWithSupportcomponent aligns well with the PR objective. The conditional rendering for specific error cases is a good UX decision.Consider extracting the condition for showing the
ChatWithSupportcomponent into a separate variable for improved readability:const showSupportChat = errorState.errorMessage.includes('We currently dont support '); {errorState.showError && ( <> <div className="w-full text-center"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> {showSupportChat && ( <ChatWithSupport className="btn h-8 w-full cursor-pointer px-2">Reach out!</ChatWithSupport> )} </> )}This change would make the condition more explicit and easier to modify if needed in the future.
src/components/Welcome/welcome.tsx (2)
Line range hint
1-391: Consider refactoring for improved maintainability.The
Welcomecomponent is quite large and handles multiple responsibilities. Consider breaking it down into smaller, more focused components (e.g.,LogoCloud,FAQ,Testimonials) to improve maintainability and reusability.Here's a high-level suggestion for refactoring:
// LogoCloud.tsx const LogoCloud = () => { // ... logo cloud logic and JSX }; // FAQ.tsx const FAQ = () => { // ... FAQ logic and JSX }; // Testimonials.tsx const Testimonials = () => { // ... testimonials logic and JSX }; // Welcome.tsx export function Welcome() { return ( <div className="flex w-full flex-col items-center justify-center dark:bg-black"> {/* ... other JSX */} <LogoCloud /> <FAQ /> <Testimonials /> {/* ... other JSX */} </div> ); }This refactoring would make the
Welcomecomponent more manageable and easier to maintain.
Missing Crisp integration in Welcome component.
The
Welcomecomponent (src/components/Welcome/welcome.tsx) does not show the replacement of reach out CTAs with Crisp buttons. It appears that these changes are either not implemented in this component or are pending.🔗 Analysis chain
Line range hint
1-391: Verify alignment with PR objectives.The PR title mentions replacing reach out CTAs with crisp buttons, but there are no visible changes related to this in the
Welcomecomponent. Could you clarify if these changes are implemented elsewhere or if they're still pending?🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for any crisp-related changes or additions in the codebase rg --type typescript --type javascript -i 'crisp|chat.?with.?support'Length of output: 106
Script:
#!/bin/bash # Search for any crisp-related changes or additions in the codebase rg --type ts --type js -i 'crisp|chat.?with.?support'Length of output: 4439
src/components/Claim/Link/Offramp/Confirm.view.tsx (2)
348-351: LGTM: Improved error handling for KYC under review.The changes effectively replace the Discord link with a direct chat option, improving the user experience. The error message is clear and actionable.
Consider wrapping the entire message in a single JSX element for better readability:
<div className="text-center"> <p className="text-h8 font-normal text-red"> KYC is under review, we might need additional documents. Chat with support to finish the process. </p> <ChatWithSupport className="text-blue-600 underline">Chat with support</ChatWithSupport> </div>
355-356: LGTM: Improved error handling for KYC rejected.The changes consistently implement the direct chat option for the KYC rejected scenario, aligning with the PR objective.
For consistency with the previous error message, consider wrapping the content in a
<p>tag:<div className="text-center"> <p className="text-h8 font-normal text-red"> KYC has been rejected.{' '} <ChatWithSupport className="text-blue-600 underline">Chat with support</ChatWithSupport> </p> </div>This structure would make both error messages more consistent in their HTML structure.
src/components/Global/TokenSelector/TokenSelector.tsx (1)
333-335: LGTM: Replacement of Discord link with ChatWithSupport component.The
ChatWithSupportcomponent is correctly implemented, replacing the previous Discord link for custom token requests. This change aligns well with the PR objective.Consider adding an
aria-labelto enhance accessibility, especially since the component is likely interactive:-<ChatWithSupport className="cursor-pointer text-center text-h8 font-normal underline"> +<ChatWithSupport className="cursor-pointer text-center text-h8 font-normal underline" aria-label="Chat with support to add a custom token">src/components/Cashout/Components/Confirm.view.tsx (2)
538-541: Improved error handling for KYC under review.The error message has been updated to provide more specific information about the KYC review process, and the
ChatWithSupportcomponent has been integrated to allow users to easily initiate a chat with support. This change aligns well with the PR objective.Consider wrapping the entire message in a single JSX element for better structure:
- <label className=" text-h8 font-normal text-red "> - KYC is under review, we might need additional documents. Chat with support to finish the - process. - </label> - <ChatWithSupport className="text-blue-600 underline">Chat with support</ChatWithSupport> + <div> + <label className="text-h8 font-normal text-red"> + KYC is under review, we might need additional documents. Chat with support to finish the process. + </label> + <ChatWithSupport className="text-blue-600 underline">Chat with support</ChatWithSupport> + </div>
545-546: Improved error handling for KYC rejection.The error message has been updated to inform users about KYC rejection, and the
ChatWithSupportcomponent has been integrated to allow users to easily initiate a chat with support. This change aligns well with the PR objective.For consistency with the previous error message, consider wrapping the entire message in a single JSX element and adding more context:
- <label className=" text-h8 font-normal text-red ">KYC has been rejected.</label> - <ChatWithSupport className="text-blue-600 underline">Chat with support</ChatWithSupport> + <div> + <label className="text-h8 font-normal text-red"> + KYC has been rejected. Chat with support for more information and next steps. + </label> + <ChatWithSupport className="text-blue-600 underline">Chat with support</ChatWithSupport> + </div>src/components/Claim/Link/Initial.view.tsx (3)
615-618: LGTM: Improved error handling with ChatWithSupport integrationThe integration of the ChatWithSupport component in the error message for offramp unavailability is a good improvement. It provides a more interactive way for users to seek assistance when they encounter this specific error.
Consider adding an aria-label to the ChatWithSupport component for better accessibility. For example:
- <ChatWithSupport className="text-blue-600 underline"> + <ChatWithSupport className="text-blue-600 underline" aria-label="Open chat support for offramp unavailability">
647-648: LGTM: Enhanced user support for unsupported accountsThe integration of the ChatWithSupport component in the message for unsupported accounts is a good improvement. It provides users with an easy way to get more information about account support.
For consistency with the previous usage, consider changing the text to "Chat with support" instead of "Reach out". This would provide a more uniform user experience throughout the application. For example:
- <ChatWithSupport className="mr-1 underline">Reach out</ChatWithSupport> + <ChatWithSupport className="mr-1 underline">Chat with support</ChatWithSupport>Also, consider adding an aria-label here as well for improved accessibility.
22-22: Overall: Good improvements to user support interactionThe integration of the ChatWithSupport component throughout this file significantly enhances the user experience by providing more interactive support options. These changes are particularly beneficial in error scenarios and for users with unsupported accounts.
The implementation is clean and consistent, with only minor suggestions for improvement in terms of accessibility and text consistency.
Consider creating a custom wrapper component for ChatWithSupport that includes the common styling (underline, text color) and accessibility features (aria-label). This would further improve consistency and make it easier to update the component's appearance and behavior across the application in the future.
Also applies to: 615-618, 647-648
src/components/Global/KYCComponent/index.tsx (2)
381-382: Improve the KYC under review message for clarityConsider rephrasing the message to enhance readability and provide clearer guidance to the user.
Apply this diff to update the message:
- KYC is under review, we might need additional documents. Chat with support to finish the - process. + Your KYC is under review, and we might need additional documents. Please chat with support to complete the process.
388-389: Enhance the KYC rejection message for user clarityConsider rewording the message to be more user-friendly and provide next steps.
Apply this diff to update the message:
- <label className=" text-h8 font-normal text-red ">KYC has been rejected.</label> - <ChatWithSupport className="text-blue-600 underline">Chat with support</ChatWithSupport> + <label className=" text-h8 font-normal text-red ">Your KYC has been rejected. Please chat with support for assistance.</label>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (10)
- global.d.ts (1 hunks)
- src/components/Cashout/Components/Confirm.view.tsx (2 hunks)
- src/components/Cashout/Components/Faq.comp.tsx (2 hunks)
- src/components/Claim/Link/Initial.view.tsx (3 hunks)
- src/components/Claim/Link/Offramp/Confirm.view.tsx (2 hunks)
- src/components/Create/Link/Initial.view.tsx (2 hunks)
- src/components/CrispChat.tsx (1 hunks)
- src/components/Global/KYCComponent/index.tsx (2 hunks)
- src/components/Global/TokenSelector/TokenSelector.tsx (2 hunks)
- src/components/Welcome/welcome.tsx (1 hunks)
🔇 Additional comments (12)
global.d.ts (1)
1-3: Approve with suggestions for improvementThe addition of the
$crispproperty to the globalWindowinterface allows for its usage throughout the codebase, which aligns with the PR objective of replacing reach out CTAs with crisp buttons. However, there are a few points to consider:
Type safety: Using
anyfor the$crispproperty type sacrifices type safety. If possible, consider using a more specific type that accurately represents the structure of the Crisp chat object. This will provide better autocomplete suggestions and catch potential type-related errors at compile-time.Documentation: It would be helpful to add a brief comment explaining the purpose of this property and its relationship to the Crisp chat integration. This will help other developers understand its usage and importance.
Consider updating the code as follows:
interface Window { /** * Crisp chat integration object. * @see https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/ */ $crisp: CrispChat; // Replace 'CrispChat' with the actual type if available }Let's verify the usage of this property in the codebase:
This will help ensure that the property is being used consistently and correctly throughout the project.
✅ Verification successful
Correcting the shell script to search for
$crispusagesThe previous script used unrecognized file types. Let's update the file type flags and rerun the search to ensure all relevant files are checked:
Updating the search command to correctly find
$crispusagesThe previous script encountered issues with unrecognized file types. Let's adjust the search by specifying file extensions directly using the
--globflag:
Verified usage of
$crispin the codebaseThe property
window.$crispis correctly utilized insrc/components/CrispChat.tsx, confirming that the Crisp chat integration is implemented as intended.
- Type Safety: Consider defining a more specific type for
$crispto enhance type safety and provide better autocomplete support.- Documentation: Add comments to
global.d.tsexplaining the purpose of$crispand its role in the Crisp integration.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for usages of window.$crisp rg '\$crisp' --type typescript --type javascriptLength of output: 85
Script:
#!/bin/bash # Corrected search for usages of window.$crisp rg '\$crisp' --type ts --type tsx --type js --type jsxLength of output: 84
Script:
#!/bin/bash # Corrected search for usages of window.$crisp using glob patterns rg '\$crisp' --glob '*.{ts,tsx,js,jsx}'Length of output: 256
src/components/Cashout/Components/Faq.comp.tsx (1)
1-1: LGTM: New import statement is correct.The import statement for
ChatWithSupportis properly formatted and follows React conventions.src/components/Create/Link/Initial.view.tsx (2)
Line range hint
1-275: Overall, the changes look good and align with the PR objectives.The modifications to this file enhance error handling, improve user feedback for unsupported cryptocurrencies, and integrate the new
ChatWithSupportcomponent effectively. These changes contribute to a better user experience and align well with the goal of replacing reach out CTAs with crisp buttons.A few minor suggestions have been made for potential improvements:
- Verifying unused imports
- Refactoring the unsupported cryptocurrency checks for better maintainability
- Improving the readability of the conditional rendering logic for the support chat
Great job on these enhancements!
13-13: LGTM! Verify unused imports.The new imports for
ethersandChatWithSupportalign with the component's functionality and PR objectives. The removal ofparsePhoneNumberFromStringandpeanutSDK imports suggests changes in phone number handling or SDK usage.Please run the following script to check for any unused imports:
Also applies to: 17-17
src/components/Welcome/welcome.tsx (1)
139-139: LGTM: Removed extra whitespace in className.The removal of the extra space in the className is a good cleanup. It improves code readability without affecting functionality.
src/components/Claim/Link/Offramp/Confirm.view.tsx (2)
17-17: LGTM: New import for ChatWithSupport component.The import of
ChatWithSupportfrom '@/components/CrispChat' is correctly placed and aligns with the PR objective of replacing reach out CTAs with Crisp buttons.
17-17: Summary: Successful implementation of Crisp chat support.The changes effectively replace the previous Discord links with direct chat options using the
ChatWithSupportcomponent. This improvement aligns well with the PR objective and enhances the user experience by providing immediate support access. The implementation is consistent across different error scenarios.Key improvements:
- Added import for
ChatWithSupportcomponent.- Updated error messages for both "KYC under review" and "KYC rejected" scenarios.
- Implemented clickable chat options for users to easily reach support.
These changes should positively impact user engagement and support accessibility.
Also applies to: 348-351, 355-356
src/components/Global/TokenSelector/TokenSelector.tsx (2)
19-19: LGTM: New import for ChatWithSupport component.The import statement for the
ChatWithSupportcomponent is correctly added and aligns with the PR objective of replacing reach out CTAs with crisp buttons.
Line range hint
1-341: Summary: Successful integration of ChatWithSupport component.The changes in this file effectively implement the PR objective of replacing the Discord link with a Crisp chat button. The integration is minimal and focused, maintaining the overall structure and functionality of the TokenSelector component. The new ChatWithSupport component is well-placed and doesn't introduce any complexity or require changes to the existing logic.
A few points to note:
- Ensure that the ChatWithSupport component is thoroughly tested, especially its interaction with the modal and its behavior when clicked.
- Verify that the Crisp chat functionality is properly set up and configured to handle custom token requests effectively.
- Consider updating any relevant documentation or user guides to reflect this change in the support process for custom token requests.
Overall, these changes enhance the user experience by providing a more direct and integrated support option.
To ensure the ChatWithSupport component is correctly implemented across the application, run the following script:
src/components/Cashout/Components/Confirm.view.tsx (1)
20-20: New import for ChatWithSupport component added.The import for the
ChatWithSupportcomponent has been correctly added. This aligns with the PR objective of replacing reach out CTAs with crisp buttons.src/components/Claim/Link/Initial.view.tsx (1)
22-22: LGTM: New ChatWithSupport component imported correctlyThe import statement for the new ChatWithSupport component is properly placed and uses a named import, which is a good practice for maintainability and clarity.
src/components/Global/KYCComponent/index.tsx (1)
16-16: Import statement for 'ChatWithSupport' component is correctThe import statement correctly includes the
ChatWithSupportcomponent from the specified path.
Summary by CodeRabbit
Release Notes
New Features
ChatWithSupportcomponent for enhanced user support, replacing Discord links in various components.Windowinterface with a$crispproperty for improved integration.Bug Fixes
Refactor