IR-2721: Zendesk integration (#10416)

* feat: zendesk integration * chore: license * chore: added zendesk key to docker images and build scripts --------- Co-authored-by: Hanzla Mateen <[email protected]>
EtherealEngine · Jun 24, 2024 · c826939 · c826939
1 parent 9ff957c
commit c826939
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 5 deletions.
diff --git a/.env.local.default b/.env.local.default
@@ -30,6 +30,8 @@ VITE_GA_MEASUREMENT_ID=
 VITE_SENTRY_DSN=
 VITE_APP_HOST=localhost
 VITE_APP_PORT=3000
+VITE_ZENDESK_ENABLED=false
+VITE_ZENDESK_KEY=
 # Use following value for minio s3 provider
 #VITE_FILE_SERVER=https://localhost:9000/etherealengine-static-resources
 #VITE_TEST_FILE_SERVER=https://localhost:9000/etherealengine-static-resources-test

diff --git a/Dockerfile b/Dockerfile
@@ -64,6 +64,8 @@ ARG VITE_READY_PLAYER_ME_URL
 ARG VITE_DISABLE_LOG
 ARG VITE_AVATURN_URL
 ARG VITE_AVATURN_API
+ARG VITE_ZENDESK_ENABLED
+ARG VITE_ZENDESK_KEY
 ENV MYSQL_HOST=$MYSQL_HOST
 ENV MYSQL_PORT=$MYSQL_PORT
 ENV MYSQL_USER=$MYSQL_USER
@@ -88,6 +90,8 @@ ENV VITE_READY_PLAYER_ME_URL=$VITE_READY_PLAYER_ME_URL
 ENV VITE_DISABLE_LOG=$VITE_DISABLE_LOG
 ENV VITE_AVATURN_URL=$VITE_AVATURN_URL
 ENV VITE_AVATURN_API=$VITE_AVATURN_API
+ENV VITE_ZENDESK_ENABLED=$VITE_ZENDESK_ENABLED
+ENV VITE_ZENDESK_KEY=$VITE_ZENDESK_KEY
 
 ARG CACHE_DATE
 RUN npx cross-env ts-node --swc scripts/check-db-exists.ts

diff --git a/dockerfiles/api/Dockerfile-api-client b/dockerfiles/api/Dockerfile-api-client
@@ -81,6 +81,8 @@ ARG VITE_DISABLE_LOG
 ARG AUTH_SECRET
 ARG VITE_AVATURN_URL
 ARG VITE_AVATURN_API
+ARG VITE_ZENDESK_ENABLED
+ARG VITE_ZENDESK_KEY
 ENV KUBERNETES=$KUBERNETES
 ENV AUTH_SECRET=$AUTH_SECRET
 ENV STORAGE_CLOUDFRONT_DOMAIN=$STORAGE_CLOUDFRONT_DOMAIN
@@ -110,6 +112,8 @@ ENV VITE_READY_PLAYER_ME_URL=$VITE_READY_PLAYER_ME_URL
 ENV VITE_DISABLE_LOG=$VITE_DISABLE_LOG
 ENV VITE_AVATURN_URL=$VITE_AVATURN_URL
 ENV VITE_AVATURN_API=$VITE_AVATURN_API
+ENV VITE_ZENDESK_ENABLED=$VITE_ZENDESK_ENABLED
+ENV VITE_ZENDESK_KEY=$VITE_ZENDESK_KEY
 
 RUN npm run build-client
 

diff --git a/dockerfiles/client/Dockerfile-client b/dockerfiles/client/Dockerfile-client
@@ -59,6 +59,8 @@ ARG VITE_DISABLE_LOG
 ARG VITE_AVATURN_URL
 ARG VITE_AVATURN_API
 ARG AUTH_SECRET
+ARG VITE_ZENDESK_ENABLED
+ARG VITE_ZENDESK_KEY
 ENV KUBERNETES=$KUBERNETES
 ENV AUTH_SECRET=$AUTH_SECRET
 ENV STORAGE_CLOUDFRONT_DOMAIN=$STORAGE_CLOUDFRONT_DOMAIN
@@ -88,6 +90,8 @@ ENV VITE_READY_PLAYER_ME_URL=$VITE_READY_PLAYER_ME_URL
 ENV VITE_DISABLE_LOG=$VITE_DISABLE_LOG
 ENV VITE_AVATURN_URL=$VITE_AVATURN_URL
 ENV VITE_AVATURN_API=$VITE_AVATURN_API
+ENV VITE_ZENDESK_ENABLED=$VITE_ZENDESK_ENABLED
+ENV VITE_ZENDESK_KEY=$VITE_ZENDESK_KEY
 
 RUN npm run build-client
 

diff --git a/dockerfiles/client/Dockerfile-client-serve-static b/dockerfiles/client/Dockerfile-client-serve-static
@@ -58,6 +58,8 @@ ARG VITE_READY_PLAYER_ME_URL
 ARG VITE_DISABLE_LOG
 ARG VITE_AVATURN_URL
 ARG VITE_AVATURN_API
+ARG VITE_ZENDESK_ENABLED
+ARG VITE_ZENDESK_KEY
 ARG AUTH_SECRET
 ENV KUBERNETES=$KUBERNETES
 ENV AUTH_SECRET=$AUTH_SECRET
@@ -89,6 +91,8 @@ ENV VITE_READY_PLAYER_ME_URL=$VITE_READY_PLAYER_ME_URL
 ENV VITE_DISABLE_LOG=$VITE_DISABLE_LOG
 ENV VITE_AVATURN_URL=$VITE_AVATURN_URL
 ENV VITE_AVATURN_API=$VITE_AVATURN_API
+ENV VITE_ZENDESK_ENABLED=$VITE_ZENDESK_ENABLED
+ENV VITE_ZENDESK_KEY=$VITE_ZENDESK_KEY
 
 RUN npm run build-client
 

diff --git a/packages/client-core/src/hooks/useZendesk.ts b/packages/client-core/src/hooks/useZendesk.ts
@@ -0,0 +1,85 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import config from '@etherealengine/common/src/config'
+import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
+import { useEffect } from 'react'
+import { AuthState } from '../user/services/AuthService'
+
+declare global {
+  interface Window {
+    zE: (...args: any) => void
+  }
+}
+
+export const useZendesk = () => {
+  const user = getMutableState(AuthState).user
+  const initalized = useHookstate(() => {
+    const zendeskScript = document.getElementById(`ze-snippet`) as HTMLScriptElement
+    return !!zendeskScript
+  })
+
+  const initalize = () => {
+    if (initalized.value || !config.client.zendeskKey) return
+    const script = document.createElement('script')
+    script.id = 'ze-snippet'
+    script.async = true
+    script.src = `https://static.zdassets.com/ekr/snippet.js?key=${config.client.zendeskKey}`
+    document.body.appendChild(script)
+    initalized.set(true)
+  }
+
+  useEffect(() => {
+    if (config.client.zendeskEnabled !== 'true') return
+
+    if (!user.isGuest.value && !initalized.value) {
+      initalize()
+    } else if (!user.isGuest.value && initalized.value) {
+      showWidget()
+    } else if (user.isGuest.value && initalized.value) {
+      hideWidget()
+    }
+  }, [user.value])
+
+  const hideWidget = () => {
+    if (initalized.value) return
+    window.zE('messenger', 'hide')
+  }
+  const showWidget = () => {
+    if (initalized.value) return
+    window.zE('messenger', 'show')
+  }
+  const openChat = () => {
+    if (initalized.value) return
+    window.zE('messenger', 'open')
+  }
+
+  return {
+    initialized: initalized.value,
+    hideWidget,
+    showWidget,
+    openChat
+  }
+}
diff --git a/packages/client/src/pages/_app_tw.tsx b/packages/client/src/pages/_app_tw.tsx
@@ -41,6 +41,7 @@ import { useAuthenticated } from '@etherealengine/client-core/src/user/services/
 import { useMutableState } from '@etherealengine/hyperflux'
 import LoadingView from '@etherealengine/ui/src/primitives/tailwind/LoadingView'
 
+import { useZendesk } from '@etherealengine/client-core/src/hooks/useZendesk'
 import PublicRouter from '../route/public_tw'
 
 import '../themes/base.css'
@@ -50,6 +51,7 @@ import '../themes/utilities.css'
 const AppPage = () => {
   const { t } = useTranslation()
   const isLoggedIn = useAuthenticated()
+  useZendesk()
 
   useEffect(() => {
     initGA()

diff --git a/packages/client/src/pages/styles.scss b/packages/client/src/pages/styles.scss
@@ -213,3 +213,7 @@ vite-error-overlay {
     height: 100%;
   }
 }
+
+iframe#launcher {
+  pointer-events: all;
+}
diff --git a/packages/common/src/config.ts b/packages/common/src/config.ts
@@ -88,7 +88,9 @@ const client = {
   avaturnAPI: globalThis.process.env.VITE_AVATURN_API,
   key8thWall: globalThis.process.env.VITE_8TH_WALL!,
   featherStoreKey: globalThis.process.env.VITE_FEATHERS_STORE_KEY,
-  gaMeasurementId: globalThis.process.env.VITE_GA_MEASUREMENT_ID
+  gaMeasurementId: globalThis.process.env.VITE_GA_MEASUREMENT_ID,
+  zendeskEnabled: globalThis.process.env.VITE_ZENDESK_ENABLED,
+  zendeskKey: globalThis.process.env.VITE_ZENDESK_KEY
 }
 
 /**

diff --git a/scripts/build_and_publish_package.sh b/scripts/build_and_publish_package.sh
@@ -79,7 +79,9 @@ then
     --build-arg VITE_READY_PLAYER_ME_URL=$VITE_READY_PLAYER_ME_URL \
     --build-arg VITE_DISABLE_LOG=$VITE_DISABLE_LOG \
     --build-arg VITE_AVATURN_URL=$VITE_AVATURN_URL \
-    --build-arg VITE_AVATURN_API=$VITE_AVATURN_API .
+    --build-arg VITE_AVATURN_API=$VITE_AVATURN_API \
+    --build-arg VITE_ZENDESK_ENABLED=$VITE_ZENDESK_ENABLED \
+    --build-arg VITE_ZENDESK_KEY=$VITE_ZENDESK_KEY .
 else
   docker buildx build \
     --builder etherealengine-$PACKAGE \
@@ -125,7 +127,9 @@ else
     --build-arg VITE_READY_PLAYER_ME_URL=$VITE_READY_PLAYER_ME_URL \
     --build-arg VITE_DISABLE_LOG=$VITE_DISABLE_LOG \
     --build-arg VITE_AVATURN_URL=$VITE_AVATURN_URL \
-    --build-arg VITE_AVATURN_API=$VITE_AVATURN_API .
+    --build-arg VITE_AVATURN_API=$VITE_AVATURN_API \
+    --build-arg VITE_ZENDESK_ENABLED=$VITE_ZENDESK_ENABLED \
+    --build-arg VITE_ZENDESK_KEY=$VITE_ZENDESK_KEY .
 fi
 
 if [ $PRIVATE_REPO == "true" ]

diff --git a/scripts/build_microk8s.sh b/scripts/build_microk8s.sh
@@ -124,6 +124,20 @@ else
   VITE_AVATURN_API=$VITE_AVATURN_API
 fi
 
+if [ -z "$VITE_ZENDESK_ENABLED" ]
+then
+  VITE_ZENDESK_ENABLED=false
+else
+  VITE_ZENDESK_ENABLED=$VITE_ZENDESK_ENABLED
+fi
+
+if [ -z "$VITE_ZENDESK_KEY" ]
+then
+  VITE_ZENDESK_KEY=null
+else
+  VITE_ZENDESK_KEY=$VITE_ZENDESK_KEY
+fi
+
 if [ -z "$NODE_ENV" ]
 then
   NODE_ENV=development
@@ -180,7 +194,9 @@ docker buildx build \
   --build-arg VITE_8TH_WALL=$VITE_8TH_WALL \
   --build-arg VITE_LOGIN_WITH_WALLET=$VITE_LOGIN_WITH_WALLET \
   --build-arg VITE_AVATURN_URL=$VITE_AVATURN_URL \
-  --build-arg VITE_AVATURN_API=$VITE_AVATURN_API .
+  --build-arg VITE_AVATURN_API=$VITE_AVATURN_API \
+  --build-arg VITE_ZENDESK_ENABLED=$VITE_ZENDESK_ENABLED \
+  --build-arg VITE_ZENDESK_KEY=$VITE_ZENDESK_KEY .
 
 docker tag $REGISTRY_HOST:32000/etherealengine $REGISTRY_HOST:32000/etherealengine:$TAG
 docker push $REGISTRY_HOST:32000/etherealengine:$TAG

diff --git a/scripts/build_minikube.sh b/scripts/build_minikube.sh
@@ -121,6 +121,19 @@ else
   NODE_ENV=$NODE_ENV
 fi
 
+if [ -z "$VITE_ZENDESK_ENABLED" ]
+then
+  VITE_ZENDESK_ENABLED=false
+else
+  VITE_ZENDESK_ENABLED=$VITE_ZENDESK_ENABLED
+fi
+
+if [ -z "$VITE_ZENDESK_KEY" ]
+then
+  VITE_ZENDESK_KEY=null
+else
+  VITE_ZENDESK_KEY=$VITE_ZENDESK_KEY
+fi
 
 # ./generate-certs.sh
 
@@ -153,6 +166,8 @@ docker buildx build \
   --build-arg VITE_8TH_WALL=$VITE_8TH_WALL \
   --build-arg VITE_LOGIN_WITH_WALLET=$VITE_LOGIN_WITH_WALLET \
   --build-arg VITE_AVATURN_URL=$VITE_AVATURN_URL \
-  --build-arg VITE_AVATURN_API=$VITE_AVATURN_API .
+  --build-arg VITE_AVATURN_API=$VITE_AVATURN_API \
+  --build-arg VITE_ZENDESK_ENABLED=$VITE_ZENDESK_ENABLED \
+  --build-arg VITE_ZENDESK_KEY=$VITE_ZENDESK_KEY .
 
 #DOCKER_BUILDKIT=1 docker build -t etherealengine-testbot -f ./dockerfiles/testbot/Dockerfile-testbot .