crisp

.tsx

import * as React from 'react'
import { UserResponse } from '../shared/UserAPI'
import { getWindowVar } from './util'

export class CrispChat extends React.Component<{ user?: UserResponse }> {
  async componentDidMount() {
    // @ts-ignore
    if (typeof window !== 'undefined' && !window['$crisp']) {
      this.addMainScript()
    }
  }

  addMainScript = () => {
    const userId = this.props.user?.id
    const scriptText = [
      'window.CRISP_WEBSITE_ID="59c9d79d-3f04-454c-ba06-eabdc17d3977";',
      userId && `window.CRISP_TOKEN_ID = '${userId}';`,
      `window.CRISP_RUNTIME_CONFIG = {session_merge : true};`,
      `window.$crisp=[];`,
      `$crisp.push(["safe", true]);`,
      `$crisp.push(["do", "chat:close"]);`,
      `$crisp.push(["do", "chat:hide"]);`,
      `$crisp.push(["on", "chat:closed", ()=>{
         $crisp.push(["do", "chat:hide"]);
       }]);`,
      `$crisp.push(["on", "message:received", ()=>{
         $crisp.push(["do", "chat:show"]);
         $crisp.push(["do", "chat:open"]);
       }]);`,
      `(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();`,
    ]

    const script = document.createElement('script')
    script.innerText = scriptText.join('')
    script.async = true
    document.body.appendChild(script)
    if (this.props.user) {
      identify(this.props.user)
    }
  }

  render() {
    return <></>
  }
}

const getCrisp = async (fn: (crisp: any) => void) => {
  // @ts-ignore
  const _crisp = window['$crisp']
  if (_crisp) {
    fn(_crisp)
    return
  }
  const crisp = await getWindowVar('$crisp')
  if (crisp) {
    fn(crisp)
  }
}

export const reset = () => {
  getCrisp((crisp) => {
    crisp.push(['do', 'session:reset'])
    console.log('Resetting Crisp')
  })
}

export const identify = async (user: UserResponse) => {
  if (!user.onboarded || !user.driftToken) return

  getCrisp((crisp) => {
    console.log('Identifying user to Crisp', user.email, user.firstName)
    crisp.push(['set', 'user:email', user.email])
    crisp.push(['set', 'user:nickname', user.fullName])
    crisp.push(['set', 'user:avatar', user.profilePhotoURL])
    // @ts-ignore
    if (user.team) {
      // @ts-ignore
      const subscriptionType = user.team.subscriptionType
      // @ts-ignore
      const teamName = user.team.name
      crisp.push([
        'set',
        'session:data',
        [
          [
            ['user_id', user.id],
            ['subscription', subscriptionType],
            ['team', teamName],
            ['team_id', user.teamId],
          ],
        ],
      ])
      crisp.push(['set', 'session:segments', [[subscriptionType]]])
    }
  })
}

export const track = async (event: any, data?: any) => {
  getCrisp((crisp) => {
    crisp.push(['set', 'session:event', [[[event, data]]]])
  })
}

export const show = async () => {
  getCrisp((crisp) => {
    crisp.push(['do', 'chat:show'])
    crisp.push(['do', 'chat:open'])
  })
}

export const hide = async () => {
  getCrisp((crisp) => {
    crisp.push(['do', 'chat:hide'])
  })
}