✨(frontend) add crisp script

add crisp chatbox to global layout

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to
 
 ### Added
 
+- ✨(frontend) add crisp script #914
 - ⚡️(fix) add error when mailbox create failed
 - ✨(mailbox) allow to reset password on mailboxes #834
 

src/backend/core/api/client/viewsets.py

@@ -586,7 +586,13 @@ class ConfigView(views.APIView):
         GET /api/v1.0/config/
             Return a dictionary of public settings.
         """
-        array_settings = ["LANGUAGES", "FEATURES", "RELEASE", "COMMIT"]
+        array_settings = [
+            "LANGUAGES",
+            "FEATURES",
+            "RELEASE",
+            "COMMIT",
+            "CRISP_WEBSITE_ID",
+        ]
         dict_settings = {}
         for setting in array_settings:
             dict_settings[setting] = getattr(settings, setting)

src/backend/core/tests/test_api_config.py

@@ -19,6 +19,7 @@ def test_api_config_anonymous():
     response = client.get("/api/v1.0/config/")
     assert response.status_code == HTTP_200_OK
     assert response.json() == {
+        "CRISP_WEBSITE_ID": None,
         "LANGUAGES": [["en-us", "English"], ["fr-fr", "French"]],
         "COMMIT": "NA",
         "FEATURES": {
@@ -42,6 +43,7 @@ def test_api_config_authenticated():
     response = client.get("/api/v1.0/config/")
     assert response.status_code == HTTP_200_OK
     assert response.json() == {
+        "CRISP_WEBSITE_ID": None,
         "LANGUAGES": [["en-us", "English"], ["fr-fr", "French"]],
         "COMMIT": "NA",
         "FEATURES": {

src/backend/people/settings.py

@@ -547,6 +547,13 @@ class Base(Configuration):
         environ_prefix=None,
     )
 
+    # SUPPORT
+    CRISP_WEBSITE_ID = values.Value(
+        default=None,
+        environ_name="CRISP_WEBSITE_ID",
+        environ_prefix=None,
+    )
+
     # MAILBOX-PROVISIONING API
     WEBMAIL_URL = values.Value(
         default=None,

src/frontend/apps/desk/src/__tests__/pages.test.tsx

@@ -37,6 +37,7 @@ describe('Page', () => {
 
     useConfigStore.setState({
       config: {
+        CRISP_WEBSITE_ID: 'wesh',
         RELEASE: '1.0.0',
         COMMIT: 'NA',
         FEATURES: { TEAMS_DISPLAY: true },
@@ -66,6 +67,7 @@ describe('Page', () => {
 
     useConfigStore.setState({
       config: {
+        CRISP_WEBSITE_ID: 'wesh',
         RELEASE: '1.0.0',
         COMMIT: 'NA',
         FEATURES: { TEAMS_DISPLAY: false },
@@ -95,6 +97,7 @@ describe('Page', () => {
 
     useConfigStore.setState({
       config: {
+        CRISP_WEBSITE_ID: 'wesh',
         RELEASE: '1.0.0',
         COMMIT: 'NA',
         FEATURES: { TEAMS_DISPLAY: false },
@@ -124,6 +127,7 @@ describe('Page', () => {
 
     useConfigStore.setState({
       config: {
+        CRISP_WEBSITE_ID: 'wesh',
         RELEASE: '1.0.0',
         COMMIT: 'NA',
         FEATURES: { TEAMS_DISPLAY: true },

src/frontend/apps/desk/src/core/config/types.ts

@@ -1,4 +1,5 @@
 export interface Config {
+  CRISP_WEBSITE_ID: string;
   LANGUAGES: [string, string][];
   RELEASE: string;
   COMMIT: string;

src/frontend/apps/desk/src/pages/_app.tsx

@@ -1,8 +1,9 @@
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { AppProvider } from '@/core/';
+import { AppProvider, useConfigStore } from '@/core';
 import { NextPageWithLayout } from '@/types/next';
 
 import './globals.css';
@@ -11,9 +12,30 @@ type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };
 
+declare global {
+  interface Window {
+    $crisp?: Array<[]>;
+    CRISP_WEBSITE_ID?: string;
+  }
+}
+
 export default function App({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => page);
   const { t } = useTranslation();
+  const { config } = useConfigStore();
+
+  useEffect(() => {
+    if (!window.$crisp && config?.CRISP_WEBSITE_ID) {
+      window.$crisp = [];
+      window.CRISP_WEBSITE_ID = config?.CRISP_WEBSITE_ID;
+
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.async = true;
+      script.src = 'https://client.crisp.chat/l.js';
+      document.head.appendChild(script);
+    }
+  }, [config]);
 
   return (
     <>

src/frontend/apps/e2e/__tests__/app-desk/config.spec.ts

@@ -21,6 +21,7 @@ test.describe('Config', () => {
         ['fr-fr', 'French'],
       ],
       COMMIT: 'NA',
+      CRISP_WEBSITE_ID: null,
       FEATURES: {
         CONTACTS_CREATE: true,
         CONTACTS_DISPLAY: true,