✨(frontend) add crisp script

add crisp chatbox to global layout

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,