feat: only paid accounts can use pylon chat (#7381)

Author: Zaimwa9

docs/docs/deployment-self-hosting/core-configuration/environment-variables.md

@@ -77,7 +77,7 @@ relevant section below for more details.
   the browser will use the frontend node server to send API requests. Do not prepend `api/v1/` - it will be added
   automatically.
 - `GOOGLE_ANALYTICS_API_KEY`: Google Analytics key to track API usage.
-- `CRISP_WEBSITE_ID`: Crisp Chat widget Website key.
+- `PYLON_APP_ID`: Pylon in-app chat widget App ID.
 - `FIRST_PROMOTER_ID`: First Promoter ID for checkout affiliates.
 - `ALLOW_SIGNUPS`: **DEPRECATED** in favour of `PREVENT_SIGNUP` in the API. Determines whether to prevent manual signups
   without invites. Set it to any value to allow signups.

frontend/.eslintrc.js

@@ -14,7 +14,6 @@ module.exports = {
   ],
   'globals': {
     '$': true,
-    '$crisp': true,
     'API': true,
     'AccountProvider': true,
     'AccountStore': true,

frontend/api/dev-routes.js

@@ -33,7 +33,6 @@ module.exports = function setupRoutes(app) {
       { name: 'headway', value: process.env.HEADWAY_API_KEY },
       { name: 'ga', value: process.env.GOOGLE_ANALYTICS_API_KEY },
       { name: 'sha', value: sha },
-      { name: 'crispChat', value: process.env.CRISP_WEBSITE_ID },
       { name: 'pylonAppId', value: process.env.PYLON_APP_ID },
       { name: 'fpr', value: process.env.FIRST_PROMOTER_ID },
       { name: 'sentry', value: process.env.SENTRY_API_KEY },

frontend/api/index.js

@@ -66,7 +66,6 @@ app.get('/config/project-overrides', (req, res) => {
     { name: 'headway', value: process.env.HEADWAY_API_KEY },
     { name: 'ga', value: process.env.GOOGLE_ANALYTICS_API_KEY },
     { name: 'sha', value: sha },
-    { name: 'crispChat', value: process.env.CRISP_WEBSITE_ID },
     { name: 'pylonAppId', value: process.env.PYLON_APP_ID },
     { name: 'fpr', value: process.env.FIRST_PROMOTER_ID },
     { name: 'sentry', value: process.env.SENTRY_API_KEY },

frontend/common/loadChat.ts

@@ -1,52 +1,33 @@
+declare global {
+  interface Window {
+    Pylon?: ((...args: unknown[]) => void) & { q?: unknown[][] }
+    pylon?: { chat_settings: Record<string, string | undefined> }
+  }
+}
+
 import flagsmith from '@flagsmith/flagsmith'
-import moment from 'moment'
 import AccountStore from './stores/account-store'
-import { getStore } from './store'
-import { selectBuildVersion } from './services/useBuildVersion'
 import getUserDisplayName from './utils/getUserDisplayName'
-import { AccountModel, Organisation } from './types/responses'
+import Utils, { planNames } from './utils/utils'
+import { AccountModel } from './types/responses'
 import Project from './project'
 
-// Used in self-hosted pages where users can opt into reaching out
-const defaultCrispID = '8857f89e-0eb5-4263-ab49-a293872b6c19'
 const defaultPylonID = '028babb7-d93f-4e32-be6a-59db190a084f'
 
-async function loadCrisp(crispWebsiteId: string) {
-  // @ts-ignore
-  if (window.$crisp) {
-    return
-  }
-  // @ts-ignore
-  window.$crisp = []
-  // @ts-ignore
-  window.CRISP_WEBSITE_ID = crispWebsiteId
-  await new Promise((resolve, reject) => {
-    const d = document
-    const s = d.createElement('script')
-    s.src = 'https://client.crisp.chat/l.js'
-    s.async = true
-    s.onload = resolve
-    s.onerror = reject
-    d.getElementsByTagName('head')[0].appendChild(s)
-  })
+function isFreePlan(): boolean {
+  const plan = AccountStore.getActiveOrgPlan()
+  return Utils.getPlanName(plan) === planNames.free
 }
 
 async function loadPylon(pylonAppId: string) {
-  // @ts-ignore
   if (window.Pylon) {
     return
   }
 
-  // Initialize Pylon using their recommended script format
   await new Promise((resolve, reject) => {
     const t = document
-    const n = function (...args: any[]) {
-      // @ts-ignore
-      n.q.push(args)
-    }
-    // @ts-ignore
-    n.q = []
-    // @ts-ignore
+    const n: ((...args: unknown[]) => void) & { q?: unknown[][] } =
+      Object.assign((...args: unknown[]) => n.q!.push(args), { q: [] })
     window.Pylon = n
 
     const s = t.createElement('script')
@@ -60,57 +41,8 @@ async function loadPylon(pylonAppId: string) {
   })
 }
 
-function setupCrisp() {
-  const user = AccountStore.model as AccountModel
-  if (typeof $crisp === 'undefined' || !user) {
-    return
-  }
-  const isSaas = () =>
-    selectBuildVersion(getStore().getState())?.backend?.is_saas
-  $crisp.push([
-    'set',
-    'session:data',
-    [[['hosting', isSaas() ? 'SaaS' : 'Self-Hosted']]],
-  ])
-  const organisation = AccountStore.getOrganisation() as Organisation
-  const formatOrganisation = (o: Organisation) => {
-    const plan = AccountStore.getActiveOrgPlan()
-    return `${o.name} (${plan}) #${o.id}`
-  }
-  const otherOrgs = user?.organisations.filter((v) => v.id !== organisation?.id)
-  if (window.$crisp) {
-    $crisp.push(['set', 'user:email', user.email])
-    $crisp.push(['set', 'user:nickname', `${getUserDisplayName(user)}`])
-    if (otherOrgs.length) {
-      $crisp.push([
-        'set',
-        'session:data',
-        [[['other-orgs', `${otherOrgs?.length} other organisations`]]],
-      ])
-    }
-    $crisp.push([
-      'set',
-      'session:data',
-      [
-        [
-          ['user-id', `${user.id}`],
-          ['date-joined', `${moment(user.date_joined).format('Do MMM YYYY')}`],
-        ],
-      ],
-    ])
-    if (organisation) {
-      $crisp.push(['set', 'user:company', formatOrganisation(organisation)])
-      $crisp.push([
-        'set',
-        'session:data',
-        [[['seats', organisation.num_seats]]],
-      ])
-    }
-  }
-}
-
 function setupPylon() {
-  const user = AccountStore.model as AccountModel
+  const user = AccountStore.getUser() as AccountModel
   if (typeof window.Pylon === 'undefined' || !user) {
     return
   }
@@ -131,24 +63,19 @@ function setupPylon() {
 }
 
 export function identifyChatUser() {
-  const usePylon = flagsmith.hasFeature('pylon_chat')
-
-  if (usePylon) {
+  if (flagsmith.hasFeature('pylon_chat') && !isFreePlan()) {
     setupPylon()
-  } else {
-    setupCrisp()
   }
 }
 
 export function openChat() {
-  const usePylon = flagsmith.hasFeature('pylon_chat')
-
-  if (usePylon && typeof window.Pylon !== 'undefined') {
+  if (
+    flagsmith.hasFeature('pylon_chat') &&
+    !isFreePlan() &&
+    typeof window.Pylon !== 'undefined'
+  ) {
     window.Pylon('show')
     setupPylon()
-  } else if (typeof $crisp !== 'undefined') {
-    $crisp.push(['do', 'chat:open'])
-    setupCrisp()
   }
 }
 
@@ -157,14 +84,11 @@ export default async function loadChat(forceDefaultAPIKey?: boolean) {
     const isWidget = document.location.href.includes('/widget')
     if (isWidget) return
 
-    const usePylon = flagsmith.hasFeature('pylon_chat')
-    const pylonId = forceDefaultAPIKey ? defaultPylonID : Project.pylonAppId
-    const crispId = forceDefaultAPIKey ? defaultCrispID : Project.crispChat
-
-    if (usePylon && pylonId) {
-      await loadPylon(pylonId)
-    } else if (crispId) {
-      await loadCrisp(crispId)
+    if (flagsmith.hasFeature('pylon_chat') && !isFreePlan()) {
+      const pylonId = forceDefaultAPIKey ? defaultPylonID : Project.pylonAppId
+      if (pylonId) {
+        await loadPylon(pylonId)
+      }
     }
   } catch (error) {
     console.error('Failed to initialize chat widget:', error)

frontend/global.d.ts

@@ -10,11 +10,6 @@ export type OpenConfirm = {
   noText?: string
 }
 import { TooltipProps } from './web/components/Tooltip'
-type CrispCommand = [command: string, ...args: any[]]
-type Crisp = {
-  // The push method accepts a CrispCommand array.
-  push: (command: CrispCommand) => void
-}
 declare namespace UniversalAnalytics {
   interface PageviewFieldsObject {
     hitType: 'pageview' | 'event'
@@ -30,7 +25,6 @@ declare global {
     command: 'send',
     fields: UniversalAnalytics.PageviewFieldsObject,
   ): void
-  const $crisp: Crisp
   const delighted: {
     survey: (opts: {
       createdAt: string
@@ -98,7 +92,6 @@ declare global {
 
   interface Window {
     E2E: boolean
-    $crisp: Crisp
     engagement: {
       init(apiKey: string, options?: InitOptions): void
       plugin(): unknown