feat: Plain chat

.env.example

@@ -112,6 +112,8 @@ NEXT_PUBLIC_POSTHOG_HOST=
 PLAIN_API_KEY=
 PLAIN_API_URL=https://api.plain.com/v1
 PLAIN_HMAC_SECRET_KEY=
+PLAIN_CHAT_ID=
+PLAIN_CHAT_HMAC_SECRET_KEY=
 
 # Zendesk Config
 NEXT_PUBLIC_ZENDESK_KEY=

apps/web/app/api/customer-card/route.ts

@@ -26,6 +26,7 @@ export async function handler(request: Request) {
 
   // HMAC verification
   const incomingSignature = headersList.get("plain-request-signature");
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const expectedSignature = createHmac("sha-256", process.env.PLAIN_HMAC_SECRET_KEY!)
     .update(JSON.stringify(requestBody))
     .digest("hex");
@@ -88,18 +89,8 @@ export async function handler(request: Request) {
                 rowAsideContent: [
                   {
                     componentBadge: {
-                      badgeLabel:
-                        customer.emailVerified === undefined
-                          ? "Unknown"
-                          : customer.emailVerified
-                          ? "Yes"
-                          : "No",
-                      badgeColor:
-                        customer.emailVerified === undefined
-                          ? "YELLOW"
-                          : customer.emailVerified
-                          ? "GREEN"
-                          : "RED",
+                      badgeLabel: customer.emailVerified ? "Yes" : "No",
+                      badgeColor: customer.emailVerified ? "GREEN" : "RED",
                     },
                   },
                 ],
@@ -195,18 +186,8 @@ export async function handler(request: Request) {
                 rowAsideContent: [
                   {
                     componentBadge: {
-                      badgeLabel:
-                        customer.twoFactorEnabled === undefined
-                          ? "Unknown"
-                          : customer.twoFactorEnabled
-                          ? "Yes"
-                          : "No",
-                      badgeColor:
-                        customer.twoFactorEnabled === undefined
-                          ? "YELLOW"
-                          : customer.twoFactorEnabled
-                          ? "GREEN"
-                          : "RED",
+                      badgeLabel: customer.twoFactorEnabled ? "Yes" : "No",
+                      badgeColor: customer.twoFactorEnabled ? "GREEN" : "RED",
                     },
                   },
                 ],

apps/web/app/api/plain-hash/route.ts

@@ -0,0 +1,49 @@
+import { createHmac } from "crypto";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { apiRouteMiddleware } from "@calcom/lib/server/apiRouteMiddleware";
+
+const responseSchema = z.object({
+  hash: z.string(),
+  email: z.string().email(),
+  shortName: z.string(),
+  appId: z.string(),
+  fullName: z.string(),
+  chatAvatarUrl: z.string(),
+});
+
+async function handler(request: Request) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const session = await getServerSession({ req: request as any });
+  if (!session?.user?.email) {
+    return new Response("Unauthorized - No session email found", { status: 401 });
+  }
+
+  const secret = process.env.PLAIN_CHAT_HMAC_SECRET_KEY;
+  if (!secret) {
+    return new Response("Missing Plain Chat secret", { status: 500 });
+  }
+
+  const hmac = createHmac("sha256", secret);
+  hmac.update(session.user.email.toLowerCase().trim());
+  const hash = hmac.digest("hex");
+
+  const shortName =
+    (session.user.name?.split(" ")[0] || session.user.email).charAt(0).toUpperCase() +
+      (session.user.name?.split(" ")[0] || session.user.email).slice(1) || "User";
+
+  const response = responseSchema.parse({
+    hash,
+    email: session.user.email || "[email protected]",
+    shortName,
+    appId: process.env.PLAIN_CHAT_ID,
+    fullName: session.user.name || "User",
+    chatAvatarUrl: session.user.avatarUrl || "",
+  });
+
+  return NextResponse.json(response);
+}
+
+export const POST = apiRouteMiddleware(handler);

apps/web/lib/app-providers-app-dir.tsx

@@ -17,12 +17,12 @@ import CacheProvider from "react-inlinesvg/provider";
 import DynamicPostHogProvider from "@calcom/features/ee/event-tracking/lib/posthog/providerDynamic";
 import { OrgBrandingProvider } from "@calcom/features/ee/organizations/context/provider";
 import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
-import DynamicIntercomProvider from "@calcom/features/ee/support/lib/intercom/providerDynamic";
 import { FeatureProvider } from "@calcom/features/flags/context/provider";
 import { useFlags } from "@calcom/features/flags/hooks";
 import { MetaProvider } from "@calcom/ui";
 
 import useIsBookingPage from "@lib/hooks/useIsBookingPage";
+import PlainChat from "@lib/plain/plainChat";
 import type { WithLocaleProps } from "@lib/withLocale";
 import type { WithNonceProps } from "@lib/withNonce";
 
@@ -265,9 +265,11 @@ function OrgBrandProvider({ children }: { children: React.ReactNode }) {
 const AppProviders = (props: PageWrapperProps) => {
   // No need to have intercom on public pages - Good for Page Performance
   const isBookingPage = useIsBookingPage();
+
   const RemainingProviders = (
     <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
       <SessionProvider>
+        <PlainChat />
         <CustomI18nextProvider i18n={props.i18n}>
           <TooltipProvider>
             {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
@@ -301,11 +303,11 @@ const AppProviders = (props: PageWrapperProps) => {
   }
 
   return (
-    <DynamicHelpscoutProvider>
-      <DynamicIntercomProvider>
+    <>
+      <DynamicHelpscoutProvider>
         <DynamicPostHogProvider>{Hydrated}</DynamicPostHogProvider>
-      </DynamicIntercomProvider>
-    </DynamicHelpscoutProvider>
+      </DynamicHelpscoutProvider>
+    </>
   );
 };
 

apps/web/lib/app-providers.tsx

@@ -16,12 +16,12 @@ import CacheProvider from "react-inlinesvg/provider";
 import DynamicPostHogProvider from "@calcom/features/ee/event-tracking/lib/posthog/providerDynamic";
 import { OrgBrandingProvider } from "@calcom/features/ee/organizations/context/provider";
 import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
-import DynamicIntercomProvider from "@calcom/features/ee/support/lib/intercom/providerDynamic";
 import { FeatureProvider } from "@calcom/features/flags/context/provider";
 import { useFlags } from "@calcom/features/flags/hooks";
 import { MetaProvider } from "@calcom/ui";
 
 import useIsBookingPage from "@lib/hooks/useIsBookingPage";
+import PlainChat from "@lib/plain/plainChat";
 import type { WithLocaleProps } from "@lib/withLocale";
 import type { WithNonceProps } from "@lib/withNonce";
 
@@ -282,7 +282,6 @@ function OrgBrandProvider({ children }: { children: React.ReactNode }) {
 }
 
 const AppProviders = (props: AppPropsWithChildren) => {
-  // No need to have intercom on public pages - Good for Page Performance
   const isBookingPage = useIsBookingPage();
   const { pageProps, ...rest } = props;
 
@@ -298,9 +297,9 @@ const AppProviders = (props: AppPropsWithChildren) => {
   const RemainingProviders = (
     <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
       <SessionProvider session={pageProps.session ?? undefined}>
+        <PlainChat />
         <CustomI18nextProvider {...propsWithoutNonce}>
           <TooltipProvider>
-            {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
             <CalcomThemeProvider
               themeBasis={props.pageProps.themeBasis}
               nonce={props.pageProps.nonce}
@@ -327,14 +326,14 @@ const AppProviders = (props: AppPropsWithChildren) => {
   }
 
   return (
-    <DynamicHelpscoutProvider>
-      <DynamicIntercomProvider>
+    <>
+      <DynamicHelpscoutProvider>
         <DynamicPostHogProvider>
           <PostHogPageView />
           {RemainingProviders}
         </DynamicPostHogProvider>
-      </DynamicIntercomProvider>
-    </DynamicHelpscoutProvider>
+      </DynamicHelpscoutProvider>
+    </>
   );
 };