feat(novu): update novu init landing page

apps/web/src/components/layout/components/v2/SyncInfoModal.tsx

@@ -92,7 +92,7 @@ export const SyncInfoModal: FC<SyncInfoModalProps> = ({ isOpen, toggleOpen, refe
               href="https://docs.novu.co/deployment/syncing"
               target={'_blank'}
               className={css({
-                textDecoration: 'underline !important',
+                textDecoration: '!important underline',
               })}
             >
               our docs.

packages/novu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "novu",
-  "version": "2.1.0",
+  "version": "2.2.0-rc.2",
   "description": "Novu CLI. Run Novu Studio and sync workflows with Novu Cloud",
   "main": "src/index.js",
   "publishConfig": {
@@ -68,7 +68,7 @@
   },
   "dependencies": {
     "@novu/ntfr-client": "^0.0.4",
-    "@novu/shared": "workspace:*",
+    "@novu/shared": "2.1.1",
     "@segment/analytics-node": "^1.1.4",
     "axios": "^1.6.8",
     "chalk": "4.1.2",

packages/novu/src/commands/init/create-app.ts

@@ -21,6 +21,8 @@ export async function createApp({
   srcDir,
   importAlias,
   secretKey,
+  applicationId,
+  userId,
 }: {
   appPath: string;
   packageManager: PackageManager;
@@ -29,6 +31,8 @@ export async function createApp({
   srcDir: boolean;
   importAlias: string;
   secretKey: string;
+  applicationId: string;
+  userId: string;
 }): Promise<void> {
   let repoInfo: RepoInfo | undefined;
   const mode: TemplateMode = typescript ? 'ts' : 'js';
@@ -73,6 +77,8 @@ export async function createApp({
     srcDir,
     importAlias,
     secretKey,
+    applicationId,
+    userId,
   });
 
   if (tryGitInit(root)) {

packages/novu/src/commands/init/index.ts

@@ -93,6 +93,7 @@ export async function init(program: IInitCommandOptions, anonymousId?: string):
     process.exit(1);
   }
 
+  let applicationId: string;
   let userId: string;
   // if no secret key is supplied set to empty string
   if (!program.secretKey) {
@@ -114,6 +115,15 @@ export async function init(program: IInitCommandOptions, anonymousId?: string):
 
       userId = user.data?._id;
 
+      const integrationsResponse = await fetch(`${program.apiUrl}/v1/environments/me`, {
+        headers: {
+          Authorization: `ApiKey ${program.secretKey}`,
+        },
+      });
+
+      const environment = await integrationsResponse.json();
+      applicationId = environment.data.identifier;
+
       analytics.alias({
         previousId: anonymousId,
         userId,
@@ -172,6 +182,8 @@ export async function init(program: IInitCommandOptions, anonymousId?: string):
     srcDir: defaults.srcDir as boolean,
     importAlias: defaults.importAlias as string,
     secretKey: program.secretKey,
+    applicationId,
+    userId,
   });
 
   if (userId || anonymousId) {

packages/novu/src/commands/init/templates/app-react-email/ts/app/api/dev-studio-status/route.ts

@@ -0,0 +1,32 @@
+export async function GET() {
+  try {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 3000);
+
+    const response = await fetch("http://localhost:2022/.well-known/novu", {
+      signal: controller.signal,
+      headers: {
+        Accept: "application/json",
+      },
+    });
+
+    clearTimeout(timeoutId);
+
+    if (response.ok) {
+      const data = await response.json();
+      if (data.port && data.route) {
+        return Response.json({ connected: true, data });
+      }
+    }
+
+    return Response.json({
+      connected: false,
+      error: await response.text(),
+    });
+  } catch (error) {
+    return Response.json({
+      connected: false,
+      error: error instanceof Error ? error.message : "Unknown error",
+    });
+  }
+}

packages/novu/src/commands/init/templates/app-react-email/ts/app/api/events/route.ts

@@ -0,0 +1,32 @@
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+
+    const response = await fetch("https://api.novu.co/v1/telemetry/measure", {
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        Authorization: `ApiKey ${process.env.NOVU_SECRET_KEY}`,
+      },
+      method: "POST",
+      body: JSON.stringify({
+        event: body.event,
+        data: body.data,
+      }),
+    });
+
+    if (response.ok) {
+      return Response.json({ success: true });
+    }
+
+    return Response.json({
+      connected: false,
+      error: await response.text(),
+    });
+  } catch (error) {
+    return Response.json({
+      connected: false,
+      error: error instanceof Error ? error.message : "Unknown error",
+    });
+  }
+}

packages/novu/src/commands/init/templates/app-react-email/ts/app/api/trigger/route.ts

@@ -0,0 +1,24 @@
+import { NextResponse } from "next/server";
+import { welcomeOnboardingEmail } from "../../novu/workflows";
+
+export async function POST() {
+  try {
+    await welcomeOnboardingEmail.trigger({
+      to: process.env.NEXT_PUBLIC_NOVU_SUBSCRIBER_ID || "",
+      payload: {},
+    });
+
+    return NextResponse.json({
+      message: "Notification triggered successfully",
+    });
+  } catch (error: unknown) {
+    const errorMessage =
+      error instanceof Error ? error.message : "Unknown error occurred";
+    console.error("Error triggering notification:", errorMessage);
+
+    return NextResponse.json(
+      { message: "Error triggering notification", error: errorMessage },
+      { status: 500 },
+    );
+  }
+}

packages/novu/src/commands/init/templates/app-react-email/ts/app/components/NotificationToast/Notifications.module.css

@@ -0,0 +1,80 @@
+.toast {
+  position: fixed;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
+  border-radius: 16px;
+  padding: 18px 24px;
+  box-shadow:
+    0 10px 25px rgba(0, 0, 0, 0.1),
+    0 6px 12px rgba(0, 0, 0, 0.08),
+    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
+  z-index: 1000;
+  width: 90%;
+  max-width: 400px;
+  right: 24px;
+  top: 24px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  animation: slideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+  backdrop-filter: blur(10px);
+  transform-origin: top right;
+}
+
+.toastContent {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+  overflow: hidden;
+  font-weight: 600;
+  background: linear-gradient(90deg, #1a1a1a 0%, #404040 100%);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-size: 1rem;
+  letter-spacing: -0.02em;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.toastContent::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(45deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.1) 50%,
+      transparent 100%);
+  animation: shimmer 2s infinite;
+}
+
+@keyframes slideIn {
+  0% {
+    transform: translateY(-120%) scale(0.9);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%) rotate(45deg);
+  }
+
+  100% {
+    transform: translateX(100%) rotate(45deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast {
+    animation: none;
+  }
+
+  .toastContent::before {
+    animation: none;
+  }
+}

packages/novu/src/commands/init/templates/app-react-email/ts/app/components/NotificationToast/Notifications.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { Novu } from "@novu/js";
+import { useEffect, useState } from "react";
+import { Inbox } from "@novu/nextjs";
+import styles from "./Notifications.module.css"; // You'll need to create this
+
+const NotificationToast = () => {
+  const novu = new Novu({
+    subscriberId: process.env.NEXT_PUBLIC_NOVU_SUBSCRIBER_ID || "",
+    applicationIdentifier:
+      process.env.NEXT_PUBLIC_NOVU_APPLICATION_IDENTIFIER || "",
+  });
+
+  const [showToast, setShowToast] = useState(false);
+
+  useEffect(() => {
+    const listener = ({ result: notification }: { result: any }) => {
+      console.log("Received notification:", notification);
+      setShowToast(true);
+
+      setTimeout(() => {
+        setShowToast(false);
+      }, 2500);
+    };
+
+    console.log("Setting up Novu notification listener");
+    novu.on("notifications.notification_received", listener);
+
+    return () => {
+      novu.off("notifications.notification_received", listener);
+    };
+  }, [novu]);
+
+  if (!showToast) return null;
+
+  return (
+    <div className={styles.toast}>
+      <div className={styles.toastContent}>New In-App Notification</div>
+    </div>
+  );
+};
+
+export default NotificationToast;
+
+const novuConfig = {
+  applicationIdentifier:
+    process.env.NEXT_PUBLIC_NOVU_APPLICATION_IDENTIFIER || "",
+  subscriberId: process.env.NEXT_PUBLIC_NOVU_SUBSCRIBER_ID || "",
+  appearance: {
+    elements: {
+      bellContainer: {
+        width: "30px",
+        height: "30px",
+      },
+      bellIcon: {
+        width: "30px",
+        height: "30px",
+      },
+    },
+  },
+};
+
+export function NovuInbox() {
+  return <Inbox {...novuConfig} />;
+}

packages/novu/src/commands/init/templates/app-react-email/ts/app/globals.css

@@ -1,33 +1,42 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --background: #ffffff;
+  --foreground: #171717;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --background: #0a0a0a;
+    --foreground: #ededed;
   }
 }
 
+html,
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  max-width: 100vw;
+  overflow-x: hidden;
 }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
   }
 }