Merge pull request #740 from panoratech/intercom-widget

feat: Intercom Widget

apps/webapp/Dockerfile.pnpm-installer

@@ -0,0 +1,29 @@
+################################################
+# 1/ move to the repo root directory
+# 2/ build the image : docker build -t front_package_installer -f ./packages/api/Dockerfile.pnpm-installer .
+# 3/ run with: docker run -v $(pwd):/app/ -e PACKAGE_NAME=PACKAGE_NAME package_installer
+# example: docker run -v $(pwd):/app/ -e PACKAGE_NAME=@stripe/stripe-js front_package_installer
+################################################
+
+FROM node:20-alpine3.21 AS base
+# =======================================================================
+FROM base AS builder
+RUN apk add --no-cache libc6-compat netcat-openbsd curl openssl
+RUN apk update
+
+# Set pnpm
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+WORKDIR /app
+RUN pnpm add -g [email protected]
+
+# Start Script
+
+# Set environment variable
+ENV PACKAGE="$PACKAGE"
+
+WORKDIR /app/apps/webapp
+
+CMD pnpm add "${PACKAGE_NAME}"

apps/webapp/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@faker-js/faker": "^8.3.1",
     "@hookform/resolvers": "^3.3.4",
+    "@intercom/messenger-js-sdk": "^0.0.14",
     "@panora/shared": "workspace:*",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",

apps/webapp/src/app/(Dashboard)/layout.tsx

@@ -1,48 +1,55 @@
 'use client'
 import "../globals.css";
 import { RootLayout } from "@/components/RootLayout";
+import useProfileStore from "@/state/profileStore";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import Cookies from 'js-cookie';
 import useUser from "@/hooks/get/useUser";
+import Intercom from '@intercom/messenger-js-sdk';
 
 export default function Layout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-
-  const [userInitialized,setUserInitialized] = useState(false)
+  const [userInitialized, setUserInitialized] = useState(false)
   const router = useRouter()
   const { mutate } = useUser()
+  const { profile } = useProfileStore()
 
+  // Handle authentication
   useEffect(() => {
     if(!Cookies.get('access_token')) {
       router.replace("/b2c/login")
-    }else {
+    } else {
       mutate(
         Cookies.get('access_token'),
         {
-        onError: () => router.replace("/b2c/login"),
-        onSuccess: () => setUserInitialized(true)
+          onError: () => router.replace("/b2c/login"),
+          onSuccess: () => setUserInitialized(true)
         }
       )
     }
-  },[])
-
+  }, [])
+
+  // Initialize Intercom separately when profile is available
+  useEffect(() => {
+    if (profile && userInitialized) {
+      Intercom({
+        app_id: 'kjwzw97u',
+        user_id: profile.id_user,
+        name: `${profile.first_name} ${profile.last_name}`,
+        email: profile.email,
+      });
+    }
+  }, [profile, userInitialized])
+
   return (
-    <>   {userInitialized ? (
-      <>
-        <RootLayout>
-          {children}
-        </RootLayout> 
-      </>
-    ) : (
-      <>
-
-      </>
-    )}
-
-    </>
+    userInitialized ? (
+      <RootLayout>
+        {children}
+      </RootLayout> 
+    ) : null
   );
 }

apps/webapp/src/app/b2c/login/page.tsx

@@ -103,6 +103,10 @@ export default function Page() {
                                 />
                             </div>
                             <div className="space-y-4">
+
+                                <h1 className="text-2xl font-bold">
+                                    Welcome to Panora
+                                </h1>
                                 <p className="text-muted-foreground">
                                     Connect your warehouse to any e-commerce platform and let AI automate data entry into your WMS &amp; ERPs. Add revenue, not complexity to your operations.
                                 </p>

apps/webapp/src/types/intercom.d.ts

@@ -0,0 +1,4 @@
+interface Window {
+  Intercom?: any;
+  intercomSettings?: any;
+}