CrispChatProvider.tsx

CrispChatProvider.tsx

import { ChatboxColors, Crisp } from 'crisp-sdk-web'
import { useAccountData } from '@core/state/state'
import { createContext, ReactNode, useContext } from 'react'

const CRISP_CHAT_WEBSITE_ID = process.env.VITE_CRISP_CHAT_WEBSITE_ID!

const CrispChatContext = createContext<{ crisp: typeof Crisp } | null>(null)

export function CrispChatProvider({ children }: { children: ReactNode }) {
  const user = useAccountData()

  if (!user.account?.__free_trial) {
    return <>{children}</>
  }

  Crisp.configure(CRISP_CHAT_WEBSITE_ID)
  Crisp.setColorTheme(ChatboxColors.Green)
  Crisp.user.setEmail(user.account?.email!)
  Crisp.user.setNickname(user.account?.name!)

  Crisp.session.setData({
    user_id: user.account?.id
  })

  Crisp.setTokenId(user.account?.id)
  Crisp.session.reset()
  Crisp.chat.show()

  return (
    <CrispChatContext.Provider value={{ crisp: Crisp }}>
      {children}
    </CrispChatContext.Provider>
  )
}

export function useCrispChat() {
  const ctx = useContext(CrispChatContext)
  return {
    ...ctx
  }
}