Merge pull request #397 from peanutprotocol/feat/replace-react-out-w-…

…crisp feat: replace reach out CTAs w/ crisp buttons
peanutprotocol · Oct 1, 2024 · 8fad1cc · 8fad1cc
2 parents 0be797f + cb3a23b
commit 8fad1cc
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 83 deletions.
diff --git a/global.d.ts b/global.d.ts
@@ -0,0 +1,3 @@
+interface Window {
+    $crisp: any;
+}
diff --git a/src/components/Cashout/Components/Confirm.view.tsx b/src/components/Cashout/Components/Confirm.view.tsx
@@ -17,6 +17,7 @@ import { GlobaLinkAccountComponent } from '@/components/Global/LinkAccountCompon
 import useClaimLink from '@/components/Claim/useClaimLink'
 import Link from 'next/link'
 import { FAQComponent } from './Faq.comp'
+import { CrispButton } from '@/components/CrispChat'
 
 interface CrossChainDetails {
     chainId: string
@@ -534,23 +535,15 @@ export const ConfirmCashoutView = ({
                 {errorState.showError && errorState.errorMessage === 'KYC under review' ? (
                     <div className="text-center">
                         <label className=" text-h8 font-normal text-red ">
-                            KYC is under review, we might need additional documents. Please reach out via{' '}
-                            <a href="https://discord.gg/uWFQdJHZ6j" target="_blank" className="underline">
-                                discord
-                            </a>{' '}
-                            to finish the process.
+                            KYC is under review, we might need additional documents. Chat with support to finish the
+                            process.
                         </label>
+                        <CrispButton className="text-blue-600 underline">Chat with support</CrispButton>
                     </div>
                 ) : errorState.errorMessage === 'KYC rejected' ? (
                     <div className="text-center">
-                        <label className=" text-h8 font-normal text-red ">
-                            KYC has been rejected. Please reach out via{' '}
-                            <a href="https://discord.gg/uWFQdJHZ6j" target="_blank" className="underline">
-                                {' '}
-                                discord{' '}
-                            </a>{' '}
-                            .
-                        </label>
+                        <label className=" text-h8 font-normal text-red ">KYC has been rejected.</label>
+                        <CrispButton className="text-blue-600 underline">Chat with support</CrispButton>
                     </div>
                 ) : (
                     <div className="text-center">

diff --git a/src/components/Cashout/Components/Faq.comp.tsx b/src/components/Cashout/Components/Faq.comp.tsx
@@ -1,3 +1,4 @@
+import { CrispButton } from '@/components/CrispChat'
 import Icon from '@/components/Global/Icon'
 import { Menu, Transition } from '@headlessui/react'
 
@@ -31,18 +32,9 @@ export const FAQComponent = ({ className }: { className?: string }) => {
                                 </ul>
                                 <br></br>
                                 <p>Usually takes 20mins, but can take up to 3 business days.</p>
-                                <button
-                                    className="mt-2 text-blue-600 underline"
-                                    onClick={() => {
-                                        // @ts-ignore
-                                        if (window.$crisp) {
-                                            // @ts-ignore
-                                            window.$crisp.push(['do', 'chat:open'])
-                                        }
-                                    }}
-                                >
+                                <CrispButton className="mt-2 text-blue-600 underline">
                                     Need help? Chat with support
-                                </button>
+                                </CrispButton>
                             </Menu.Item>
                         </Menu.Items>
                     </Transition>

diff --git a/src/components/Claim/Link/Initial.view.tsx b/src/components/Claim/Link/Initial.view.tsx
@@ -19,6 +19,8 @@ import * as _utils from '../Claim.utils'
 import { Popover } from '@headlessui/react'
 import { useAuth } from '@/context/authContext'
 import { ActionType, estimatePoints } from '@/components/utils/utils'
+import { CrispButton } from '@/components/CrispChat'
+
 export const InitialClaimLinkView = ({
     onNext,
     claimLinkData,
@@ -610,11 +612,8 @@ export const InitialClaimLinkView = ({
                         <div className="text-center">
                             {errorState.errorMessage === 'offramp unavailable' ? (
                                 <label className="text-h8 font-normal text-red">
-                                    You can not claim this token to your bank account, reach out on{' '}
-                                    <a href="https://discord.gg/uWFQdJHZ6j" target="_blank" className="underline">
-                                        discord
-                                    </a>{' '}
-                                    for support.
+                                    You can not claim this token to your bank account.{' '}
+                                    <CrispButton className="text-blue-600 underline">Chat with support</CrispButton>
                                 </label>
                             ) : (
                                 <>
@@ -643,10 +642,8 @@ export const InitialClaimLinkView = ({
                     ) : (
                         (recipientType === 'iban' || recipientType === 'us') && (
                             <label className="text-h8 font-normal ">
-                                Only US and EU accounts are supported currently. Reach out on{' '}
-                                <a href="https://discord.gg/uWFQdJHZ6j" target="_blank" className="underline">
-                                    discord
-                                </a>{' '}
+                                Only US and EU accounts are supported currently.{' '}
+                                <CrispButton className="mr-1 underline">Reach out</CrispButton>
                                 if you would like more info.
                             </label>
                         )

diff --git a/src/components/Claim/Link/Offramp/Confirm.view.tsx b/src/components/Claim/Link/Offramp/Confirm.view.tsx
@@ -14,6 +14,7 @@ import * as consts from '@/constants'
 import { GlobalKYCComponent } from '@/components/Global/KYCComponent'
 import { GlobaLinkAccountComponent } from '@/components/Global/LinkAccountComponent'
 import { useAuth } from '@/context/authContext'
+import { CrispButton } from '@/components/CrispChat'
 
 export const ConfirmClaimLinkIbanView = ({
     onPrev,
@@ -344,23 +345,15 @@ export const ConfirmClaimLinkIbanView = ({
                 {errorState.showError && errorState.errorMessage === 'KYC under review' ? (
                     <div className="text-center">
                         <label className=" text-h8 font-normal text-red ">
-                            KYC is under review, we might need additional documents. Please reach out via{' '}
-                            <a href="https://discord.gg/uWFQdJHZ6j" target="_blank" className="underline">
-                                discord
-                            </a>{' '}
-                            to finish the process.
+                            KYC is under review, we might need additional documents. Chat with support to finish the
+                            process.
                         </label>
+                        <CrispButton className="text-blue-600 underline">Chat with support</CrispButton>
                     </div>
                 ) : errorState.errorMessage === 'KYC rejected' ? (
                     <div className="text-center">
-                        <label className=" text-h8 font-normal text-red ">
-                            KYC has been rejected. Please reach out via{' '}
-                            <a href="https://discord.gg/uWFQdJHZ6j" target="_blank" className="underline">
-                                {' '}
-                                discord{' '}
-                            </a>{' '}
-                            .
-                        </label>
+                        <label className=" text-h8 font-normal text-red ">KYC has been rejected.</label>{' '}
+                        <CrispButton className="text-blue-600 underline">Chat with support</CrispButton>
                     </div>
                 ) : (
                     <div className="text-center">

diff --git a/src/components/Create/Link/Initial.view.tsx b/src/components/Create/Link/Initial.view.tsx
@@ -2,7 +2,6 @@
 
 import { useContext, useEffect, useState } from 'react'
 import validator from 'validator'
-import { parsePhoneNumberFromString } from 'libphonenumber-js'
 import { useSearchParams } from 'next/navigation'
 
 import * as _consts from '../Create.consts'
@@ -11,11 +10,11 @@ import * as utils from '@/utils'
 import * as context from '@/context'
 import RecipientInput from '@/components/Global/RecipientInput'
 import Icon from '@/components/Global/Icon'
-import { errors, ethers } from 'ethers'
-import peanut from '@squirrel-labs/peanut-sdk'
+import { ethers } from 'ethers'
 import Loading from '@/components/Global/Loading'
 import { validate } from 'multicoin-address-validator'
 import { useAccount } from 'wagmi'
+import { CrispButton } from '@/components/CrispChat'
 
 export const CreateLinkInitialView = ({
     onNext,
@@ -269,13 +268,7 @@ export const CreateLinkInitialView = ({
                         <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                     </div>
                     {errorState.errorMessage.includes('We currently dont support ') && (
-                        <a
-                            href={'https://discord.gg/BX9Ak7AW28'}
-                            target={'_blank'}
-                            className="btn h-8 w-full cursor-pointer px-2"
-                        >
-                            Reach out!
-                        </a>
+                        <CrispButton className="btn h-8 w-full cursor-pointer px-2">Reach out!</CrispButton>
                     )}
                 </>
             )}

diff --git a/src/components/CrispChat.tsx b/src/components/CrispChat.tsx
@@ -1,5 +1,19 @@
 import Script from 'next/script'
 
+export const openCrispChat = () => {
+    if (window.$crisp) {
+        window.$crisp.push(['do', 'chat:open'])
+    }
+}
+
+export const CrispButton = ({ children, ...rest }: React.HTMLAttributes<HTMLButtonElement>) => {
+    return (
+        <button {...rest} onClick={openCrispChat}>
+            {children}
+        </button>
+    )
+}
+
 export default function CrispChat() {
     return (
         <Script strategy="afterInteractive">

diff --git a/src/components/Global/KYCComponent/index.tsx b/src/components/Global/KYCComponent/index.tsx
@@ -1,19 +1,19 @@
 'use client'
-import { useContext, useEffect, useMemo, useState } from 'react'
+
+import { useMemo, useState } from 'react'
 import { Step, Steps, useSteps } from 'chakra-ui-steps'
 
 import * as utils from '@/utils'
 import * as interfaces from '@/interfaces'
 import * as consts from '@/constants'
-import * as context from '@/context'
 import IframeWrapper from '../IframeWrapper'
 import { useForm } from 'react-hook-form'
 import { useAuth } from '@/context/authContext'
 import Loading from '../Loading'
-import CountryDropdown from '../CountrySelect'
 import { GlobalLoginComponent } from '../LoginComponent'
 import { GlobalRegisterComponent } from '../RegisterComponent'
 import { Divider } from '@chakra-ui/react'
+import { CrispButton } from '@/components/CrispChat'
 
 const steps = [
     { label: 'Step 1: Provide personal details' },
@@ -378,23 +378,15 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on
                     {errorState.showError && errorState.errorMessage === 'KYC under review' ? (
                         <div className="text-center">
                             <label className=" text-h8 font-normal text-red ">
-                                KYC is under review, we might need additional documents. Please reach out via{' '}
-                                <a href="https://discord.gg/uWFQdJHZ6j" target="_blank" className="underline">
-                                    discord
-                                </a>{' '}
-                                to finish the process.
+                                KYC is under review, we might need additional documents. Chat with support to finish the
+                                process.
                             </label>
+                            <CrispButton className="text-blue-600 underline">Chat with support</CrispButton>
                         </div>
                     ) : errorState.errorMessage === 'KYC rejected' ? (
                         <div className="text-center">
-                            <label className=" text-h8 font-normal text-red ">
-                                KYC has been rejected. Please reach out via{' '}
-                                <a href="https://discord.gg/uWFQdJHZ6j" target="_blank" className="underline">
-                                    {' '}
-                                    discord{' '}
-                                </a>{' '}
-                                .
-                            </label>
+                            <label className=" text-h8 font-normal text-red ">KYC has been rejected.</label>
+                            <CrispButton className="text-blue-600 underline">Chat with support</CrispButton>
                         </div>
                     ) : (
                         <div className="text-center">

diff --git a/src/components/Global/TokenSelector/TokenSelector.tsx b/src/components/Global/TokenSelector/TokenSelector.tsx
@@ -16,6 +16,7 @@ import { useAccount } from 'wagmi'
 import { useWeb3Modal } from '@web3modal/wagmi/react'
 import { useWalletType } from '@/hooks/useWalletType'
 import Icon from '../Icon'
+import { CrispButton } from '@/components/CrispChat'
 
 const TokenSelector = ({ classNameButton }: _consts.TokenSelectorProps) => {
     const [visible, setVisible] = useState(false)
@@ -329,13 +330,9 @@ const TokenSelector = ({ classNameButton }: _consts.TokenSelectorProps) => {
 
                         {filterValue.length > 0 &&
                             components.tokenDisplay(_tokensToDisplay, setToken, balances, selectedChainID)}
-                        <a
-                            className="cursor-pointer text-center text-h8 font-normal underline"
-                            href="https://discord.gg/BX9Ak7AW28"
-                            target="_blank"
-                        >
-                            Reach out if you want to add a custom token
-                        </a>
+                        <CrispButton className="cursor-pointer text-center text-h8 font-normal underline">
+                            Chat with us if you want to add a custom token
+                        </CrispButton>
                     </div>
                 )}
             </Modal>

diff --git a/src/components/Welcome/welcome.tsx b/src/components/Welcome/welcome.tsx
@@ -1,14 +1,11 @@
 'use client'
 import '@/styles/globals.css'
 import { useEffect, useState } from 'react'
-import { getCalApi } from '@calcom/embed-react'
-import Lottie from 'react-lottie'
 import Link from 'next/link'
 
 import * as assets from '@/assets'
 import * as chain_logos from '@/assets/chains'
 import { MarqueeWrapper } from '../Global/MarqueeWrapper'
-import { Disclosure } from '@headlessui/react'
 
 const logoCloudLogos = [
     { icon: assets.WALLETCONNECT_LOGO, link: 'https://walletconnect.com/' },
@@ -139,7 +136,7 @@ export function Welcome() {
     }, [])
 
     return (
-        <div className="flex w-full flex-col items-center justify-center  dark:bg-black ">
+        <div className="flex w-full flex-col items-center justify-center  dark:bg-black">
             <div className="flex w-full border-b-2 border-black text-black dark:text-white">
                 <div className="flex w-full flex-col items-center justify-center gap-8 py-8 text-center sm:px-6 sm:py-16 lg:mx-0 lg:w-2/3 lg:px-0">
                     <div className="flex w-full flex-col items-center justify-center gap-2">