Merge pull request #639 from Infisical/intercom-tour

Switched intercom to AppLayout

Dockerfile.standalone-infisical

@@ -25,6 +25,8 @@ ARG POSTHOG_HOST
 ENV NEXT_PUBLIC_POSTHOG_HOST $POSTHOG_HOST
 ARG POSTHOG_API_KEY
 ENV NEXT_PUBLIC_POSTHOG_API_KEY $POSTHOG_API_KEY
+ARG INTERCOM_ID
+ENV NEXT_PUBLIC_INTERCOM_ID $INTERCOM_ID
 
 # Build
 RUN npm run build
@@ -42,6 +44,9 @@ VOLUME /app/.next/cache/images
 ARG POSTHOG_API_KEY
 ENV NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY \
   BAKED_NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY
+ARG INTERCOM_ID
+ENV NEXT_PUBLIC_INTERCOM_ID=$INTERCOM_ID \
+  BAKED_NEXT_PUBLIC_INTERCOM_ID=$INTERCOM_ID
 
 COPY --chown=nextjs:nodejs --chmod=555 frontend/scripts ./scripts
 COPY --from=frontend-builder /app/public ./public

frontend/Dockerfile

@@ -28,6 +28,8 @@ ARG POSTHOG_HOST
 ENV NEXT_PUBLIC_POSTHOG_HOST $POSTHOG_HOST
 ARG POSTHOG_API_KEY
 ENV NEXT_PUBLIC_POSTHOG_API_KEY $POSTHOG_API_KEY
+ARG INTERCOM_ID
+ENV NEXT_PUBLIC_INTERCOM_ID $INTERCOM_ID
 
 # Build
 RUN npm run build
@@ -46,6 +48,9 @@ VOLUME /app/.next/cache/images
 ARG POSTHOG_API_KEY
 ENV NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY \
     BAKED_NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY
+ARG INTERCOM_ID
+ENV NEXT_PUBLIC_INTERCOM_ID=$INTERCOM_ID \
+    BAKED_NEXT_PUBLIC_INTERCOM_ID=$INTERCOM_ID
 
 COPY --chown=nextjs:nodejs --chmod=555 scripts ./scripts
 COPY --from=builder /app/public ./public

frontend/next.config.js

@@ -10,7 +10,7 @@ const ContentSecurityPolicy = `
 	script-src 'self' https://app.posthog.com https://js.stripe.com https://api.stripe.com https://widget.intercom.io https://js.intercomcdn.com 'unsafe-inline' 'unsafe-eval';
 	style-src 'self' https://rsms.me 'unsafe-inline';
 	child-src https://api.stripe.com;
-	frame-src https://js.stripe.com/ https://api.stripe.com;
+	frame-src https://js.stripe.com/ https://api.stripe.com https://www.youtube.com/;
 	connect-src 'self' wss://nexus-websocket-a.intercom.io https://api-iam.intercom.io https://api.heroku.com/ https://id.heroku.com/oauth/authorize https://id.heroku.com/oauth/token https://checkout.stripe.com https://app.posthog.com https://api.stripe.com;
 	img-src 'self' https://static.intercomassets.com https://js.intercomcdn.com https://downloads.intercomcdn.com https://*.stripe.com https://i.ytimg.com/ data:;
 	media-src https://js.intercomcdn.com;

frontend/scripts/start.sh

@@ -2,6 +2,8 @@
 
 scripts/replace-variable.sh "$BAKED_NEXT_PUBLIC_POSTHOG_API_KEY" "$NEXT_PUBLIC_POSTHOG_API_KEY"
 
+scripts/replace-variable.sh "$BAKED_NEXT_PUBLIC_INTERCOM_ID" "$NEXT_PUBLIC_INTERCOM_ID"
+
 if [ "$TELEMETRY_ENABLED" != "false" ]; then
     echo "Telemetry is enabled"
     scripts/set-telemetry.sh true

frontend/src/components/signup/TeamInviteStep.tsx

@@ -23,7 +23,7 @@ export default function TeamInviteStep(): JSX.Element {
   const redirectToHome = async () => {
     const userWorkspaces = await getWorkspaces();
     const userWorkspace = userWorkspaces[0]._id;
-    router.push(`/home/${userWorkspace}`);
+    router.push(`/dashboard/${userWorkspace}`);
   };
 
   const inviteUsers = async ({ emails: inviteEmails }: { emails: string }) => {

frontend/src/components/utilities/config/index.ts

@@ -4,11 +4,12 @@ const POSTHOG_HOST =
   process.env.NEXT_PUBLIC_POSTHOG_HOST! || "https://app.posthog.com";
 const STRIPE_PRODUCT_PRO = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_PRO!;
 const STRIPE_PRODUCT_STARTER = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_STARTER!;
+const INTERCOM_ID = process.env.NEXT_PUBLIC_INTERCOM_ID!;
 
 export {
   ENV,
+  INTERCOM_ID,
   POSTHOG_API_KEY,
   POSTHOG_HOST,
   STRIPE_PRODUCT_PRO,
-  STRIPE_PRODUCT_STARTER
+  STRIPE_PRODUCT_STARTER};
-};

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -1,6 +1,10 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable no-unexpected-multiline */
 /* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable vars-on-top */
+/* eslint-disable no-var */
+/* eslint-disable func-names */
+// @ts-nocheck
 import crypto from 'crypto';
 
 import { useEffect, useState } from 'react';
@@ -17,6 +21,7 @@ import * as yup from 'yup';
 import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
 import onboardingCheck from '@app/components/utilities/checks/OnboardingCheck';
 import { tempLocalStorage } from '@app/components/utilities/checks/tempLocalStorage';
+import { INTERCOM_ID } from '@app/components/utilities/config';
 import { encryptAssymmetric } from '@app/components/utilities/cryptography/crypto';
 import {
   Button,
@@ -85,6 +90,58 @@ export const AppLayout = ({ children }: LayoutProps) => {
 
   const { t } = useTranslation();
 
+  useEffect(() => {
+		// Intercom code snippet
+		(function() {
+			var w=window;var ic=w.Intercom;
+			if(typeof ic==="function") {
+				ic('reattach_activator');
+				ic('update',w.intercomSettings);
+			} else {
+				var d=document;
+				var i=function() {
+					// eslint-disable-next-line prefer-rest-params
+					i.c(arguments);
+				}; 
+				i.q=[]; 
+				i.c=function(args) {
+					i.q.push(args);
+				};
+				w.Intercom=i;
+				var l=function() { 
+					var s=d.createElement('script');
+					s.type='text/javascript';
+					s.async=true;
+					s.src=`https://widget.intercom.io/widget/${INTERCOM_ID}`;
+					var x=d.getElementsByTagName('script')[0];
+					x.parentNode.insertBefore(s,x);};
+					if(w.attachEvent) { 
+						w.attachEvent('onload',l); 
+					} else {
+						w.addEventListener('load',l,false);
+					}
+				}
+			}
+		)();
+
+		window.Intercom('boot', {
+			app_id: {INTERCOM_ID},
+      email: user.email || 'undefined'
+		});
+	}, []);
+
+	useEffect(() => {
+		const handleRouteChange = () => {
+			(window).Intercom('update');
+		};
+		
+		router.events.on('routeChangeComplete', handleRouteChange);
+		
+		return () => {
+		  router.events.off('routeChangeComplete', handleRouteChange);
+		};
+	}, []);
+
   // TODO(akhilmhdh): This entire logic will be rechecked and will try to avoid
   // Placing the localstorage as much as possible
   // Wait till tony integrates the azure and its launched

frontend/src/pages/_app.tsx

@@ -38,51 +38,12 @@ type NextAppProp = AppProps & {
 const App = ({ Component, pageProps, ...appProps }: NextAppProp): JSX.Element => {
   const router = useRouter();
 
-  	useEffect(() => {
-		// Intercom code snippet
-		(function() {
-			var w=window;var ic=w.Intercom;
-			if(typeof ic==="function") {
-				ic('reattach_activator');
-				ic('update',w.intercomSettings);
-			} else {
-				var d=document;
-				var i=function() {
-					// eslint-disable-next-line prefer-rest-params
-					i.c(arguments);
-				}; 
-				i.q=[]; 
-				i.c=function(args) {
-					i.q.push(args);
-				};
-				w.Intercom=i;
-				var l=function() { 
-					var s=d.createElement('script');
-					s.type='text/javascript';
-					s.async=true;
-					s.src='https://widget.intercom.io/widget/hsg644ru';
-					var x=d.getElementsByTagName('script')[0];
-					x.parentNode.insertBefore(s,x);};
-					if(w.attachEvent) { 
-						w.attachEvent('onload',l); 
-					} else {
-						w.addEventListener('load',l,false);
-					}
-				}
-			}
-		)();
-
-		window.Intercom('boot', {
-			app_id: 'hsg644ru'
-		});
-	}, []);
-
   useEffect(() => {
     // Init for auto capturing
     const telemetry = new Telemetry().getInstance();
 
     const handleRouteChange = () => {
-			(window).Intercom('update');
+			// (window).Intercom('update');
       if (typeof window !== 'undefined') {
         telemetry.capture('$pageview');
       }