feat: browser push notifications

.env.example

@@ -369,6 +369,11 @@ RETELL_AI_KEY=
 # Used to disallow emails as being added as guests on bookings
 BLACKLISTED_GUEST_EMAILS=
 
+# Used to allow browser push notifications
+# You can use: 'npx web-push generate-vapid-keys' to generate these keys
+NEXT_PUBLIC_VAPID_PUBLIC_KEY=
+VAPID_PRIVATE_KEY=
+
 # Custom privacy policy / terms URLs (for self-hosters: change to your privacy policy / terms URLs)
 NEXT_PUBLIC_WEBSITE_PRIVACY_POLICY_URL=
 NEXT_PUBLIC_WEBSITE_TERMS_URL=

apps/web/modules/bookings/views/bookings-listing-view.tsx

@@ -12,6 +12,7 @@ import type { filterQuerySchema } from "@calcom/features/bookings/lib/useFilterQ
 import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useNotifications, ButtonState } from "@calcom/lib/hooks/useNotifications";
 import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
@@ -144,6 +145,27 @@ export default function Bookings() {
     )[0] || [];
 
   const [animationParentRef] = useAutoAnimate<HTMLDivElement>();
+  const { buttonToShow, isLoading, enableNotifications, disableNotifications } = useNotifications();
+
+  const actions = (
+    <div>
+      {buttonToShow && (
+        <Button
+          color="primary"
+          onClick={buttonToShow === ButtonState.ALLOW ? enableNotifications : disableNotifications}
+          loading={isLoading}
+          disabled={buttonToShow === ButtonState.DENIED}
+          tooltipSide="bottom"
+          tooltip={buttonToShow === ButtonState.DENIED ? t("you_have_denied_notifications") : undefined}>
+          {t(
+            buttonToShow === ButtonState.DISABLE
+              ? "disable_browser_notifications"
+              : "allow_browser_notifications"
+          )}
+        </Button>
+      )}
+    </div>
+  );
 
   return (
     <Shell
@@ -152,7 +174,8 @@ export default function Bookings() {
       heading={t("bookings")}
       subtitle={t("bookings_description")}
       title="Bookings"
-      description="Create events to share for people to book on your calendar.">
+      description="Create events to share for people to book on your calendar."
+      actions={actions}>
       <div className="flex flex-col">
         <div className="flex flex-row flex-wrap justify-between">
           <HorizontalTabs tabs={tabs} />

apps/web/pages/_app.tsx

@@ -1,6 +1,6 @@
 import type { IncomingMessage } from "http";
 import type { AppContextType } from "next/dist/shared/lib/utils";
-import React from "react";
+import React, { useEffect } from "react";
 
 import { trpc } from "@calcom/trpc/react";
 
@@ -11,8 +11,15 @@ import "../styles/globals.css";
 function MyApp(props: AppProps) {
   const { Component, pageProps } = props;
 
-  if (Component.PageWrapper !== undefined) return Component.PageWrapper(props);
-  return <Component {...pageProps} />;
+  useEffect(() => {
+    if (typeof window !== "undefined" && "serviceWorker" in navigator) {
+      navigator.serviceWorker.register("/service-worker.js");
+    }
+  }, []);
+
+  const content = Component.PageWrapper ? <Component.PageWrapper {...props} /> : <Component {...pageProps} />;
+
+  return content;
 }
 
 declare global {

apps/web/public/service-worker.js

@@ -0,0 +1,16 @@
+self.addEventListener("push", (event) => {
+  let notificationData = event.data.json();
+
+  const title = notificationData.title || "You have new notification from Cal.com";
+  const image ="/cal-com-icon.svg";
+  const options = {
+    ...notificationData.options,
+    icon: image,
+  };
+  self.registration.showNotification(title, options);
+});
+
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+  event.waitUntil(self.clients.openWindow(event.notification.data.targetURL || "https://app.cal.com"));
+});

apps/web/public/static/locales/en/common.json

@@ -461,6 +461,14 @@
   "dynamic_booking": "Dynamic group links",
   "allow_seo_indexing": "Allow search engines to access your public content",
   "seo_indexing": "Allow SEO Indexing",
+  "allow_browser_notifications": "Allow Browser Notifications",
+  "you_have_denied_notifications": "You have denied notifications. Reset permission in browser settings to enable.",
+  "disable_browser_notifications": "Disable Browser Notifications",
+  "browser_notifications_turned_on": "Browser Notifications turned on",
+  "browser_notifications_turned_off": "Browser Notifications turned off",
+  "browser_notifications_denied": "Browser Notifications denied",
+  "please_allow_notifications": "Please allow notifications from the prompt",
+  "browser_notifications_not_supported": "Your browser does not support Push Notifications. If you are Brave user then enable `Use Google services for push messaging` Option on brave://settings/?search=push+messaging",
   "email": "Email",
   "email_placeholder": "jdoe@example.com",
   "full_name": "Full name",

packages/features/notifications/sendNotification.ts

@@ -0,0 +1,40 @@
+import webpush from "web-push";
+
+const vapidKeys = {
+  publicKey: process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY || "",
+  privateKey: process.env.VAPID_PRIVATE_KEY || "",
+};
+
+// The mail to email address should be the one at which push service providers can reach you. It can also be a URL.
+webpush.setVapidDetails("https://cal.com", vapidKeys.publicKey, vapidKeys.privateKey);
+
+type Subscription = {
+  endpoint: string;
+  keys: {
+    auth: string;
+    p256dh: string;
+  };
+};
+
+export const sendNotification = async ({
+  subscription,
+  title,
+  body,
+  icon,
+}: {
+  subscription: Subscription;
+  title: string;
+  body: string;
+  icon?: string;
+}) => {
+  try {
+    const payload = JSON.stringify({
+      title,
+      body,
+      icon,
+    });
+    await webpush.sendNotification(subscription, payload);
+  } catch (error) {
+    console.error("Error sending notification", error);
+  }
+};

packages/features/package.json

@@ -18,9 +18,11 @@
     "react-select": "^5.7.0",
     "react-sticky-box": "^2.0.4",
     "react-virtual": "^2.10.4",
+    "web-push": "^3.6.7",
     "zustand": "^4.3.2"
   },
   "devDependencies": {
-    "@testing-library/react-hooks": "^8.0.1"
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/web-push": "^3.6.3"
   }
 }

packages/lib/hooks/useNotifications.tsx

@@ -0,0 +1,164 @@
+import { useState, useEffect } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { showToast } from "@calcom/ui";
+
+export enum ButtonState {
+  NONE = "none",
+  ALLOW = "allow",
+  DISABLE = "disable",
+  DENIED = "denied",
+}
+
+export const useNotifications = () => {
+  const [buttonToShow, setButtonToShow] = useState<ButtonState>(ButtonState.NONE);
+  const [isLoading, setIsLoading] = useState(false);
+  const { t } = useLocale();
+
+  const { mutate: addSubscription } = trpc.viewer.addNotificationsSubscription.useMutation({
+    onSuccess: () => {
+      setButtonToShow(ButtonState.DISABLE);
+      showToast(t("browser_notifications_turned_on"), "success");
+    },
+    onError: (error) => {
+      showToast(`Error: ${error.message}`, "error");
+    },
+    onSettled: () => {
+      setIsLoading(false);
+    },
+  });
+  const { mutate: removeSubscription } = trpc.viewer.removeNotificationsSubscription.useMutation({
+    onSuccess: () => {
+      setButtonToShow(ButtonState.ALLOW);
+      showToast(t("browser_notifications_turned_off"), "success");
+    },
+    onError: (error) => {
+      showToast(`Error: ${error.message}`, "error");
+    },
+    onSettled: () => {
+      setIsLoading(false);
+    },
+  });
+
+  useEffect(() => {
+    const decideButtonToShow = async () => {
+      if (!("Notification" in window)) {
+        console.log("Notifications not supported");
+      }
+
+      const registration = await navigator.serviceWorker?.getRegistration();
+      if (!registration) return;
+      const subscription = await registration.pushManager.getSubscription();
+
+      const permission = Notification.permission;
+
+      if (permission === ButtonState.DENIED) {
+        setButtonToShow(ButtonState.DENIED);
+        return;
+      }
+
+      if (permission === "default") {
+        setButtonToShow(ButtonState.ALLOW);
+        return;
+      }
+
+      if (!subscription) {
+        setButtonToShow(ButtonState.ALLOW);
+        return;
+      }
+
+      setButtonToShow(ButtonState.DISABLE);
+    };
+
+    decideButtonToShow();
+  }, []);
+
+  const enableNotifications = async () => {
+    setIsLoading(true);
+    const permissionResponse = await Notification.requestPermission();
+
+    if (permissionResponse === ButtonState.DENIED) {
+      setButtonToShow(ButtonState.DENIED);
+      setIsLoading(false);
+      showToast(t("browser_notifications_denied"), "warning");
+      return;
+    }
+
+    if (permissionResponse === "default") {
+      setIsLoading(false);
+      showToast(t("please_allow_notifications"), "warning");
+      return;
+    }
+
+    const registration = await navigator.serviceWorker?.getRegistration();
+    if (!registration) {
+      // This will not happen ideally as the button will not be shown if the service worker is not registered
+      return;
+    }
+
+    let subscription: PushSubscription;
+    try {
+      subscription = await registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlB64ToUint8Array(process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY || ""),
+      });
+    } catch (error) {
+      // This happens in Brave browser as it does not have a push service
+      console.error(error);
+      setIsLoading(false);
+      setButtonToShow(ButtonState.NONE);
+      showToast(t("browser_notifications_not_supported"), "error");
+      return;
+    }
+
+    addSubscription(
+      { subscription: JSON.stringify(subscription) },
+      {
+        onError: async () => {
+          await subscription.unsubscribe();
+        },
+      }
+    );
+  };
+
+  const disableNotifications = async () => {
+    setIsLoading(true);
+    const registration = await navigator.serviceWorker?.getRegistration();
+    if (!registration) {
+      // This will not happen ideally as the button will not be shown if the service worker is not registered
+      return;
+    }
+    const subscription = await registration.pushManager.getSubscription();
+    if (!subscription) {
+      // This will not happen ideally as the button will not be shown if the subscription is not present
+      return;
+    }
+    removeSubscription(
+      { subscription: JSON.stringify(subscription) },
+      {
+        onSuccess: async () => {
+          await subscription.unsubscribe();
+        },
+      }
+    );
+  };
+
+  return {
+    buttonToShow,
+    isLoading,
+    enableNotifications,
+    disableNotifications,
+  };
+};
+
+const urlB64ToUint8Array = (base64String: string) => {
+  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding).replace(/\-/g, "+").replace(/_/g, "/");
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+};

packages/prisma/migrations/20240506065443_added_notifications_subscriptions_table/migration.sql

@@ -0,0 +1,14 @@
+-- CreateTable
+CREATE TABLE "NotificationsSubscriptions" (
+    "id" SERIAL NOT NULL,
+    "userId" INTEGER NOT NULL,
+    "subscription" TEXT NOT NULL,
+
+    CONSTRAINT "NotificationsSubscriptions_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "NotificationsSubscriptions_userId_subscription_idx" ON "NotificationsSubscriptions"("userId", "subscription");
+
+-- AddForeignKey
+ALTER TABLE "NotificationsSubscriptions" ADD CONSTRAINT "NotificationsSubscriptions_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/schema.prisma

@@ -331,9 +331,10 @@ model User {
   secondaryEmails            SecondaryEmail[]
   isPlatformManaged          Boolean                      @default(false)
 
-  OutOfOfficeReasons     OutOfOfficeReason[]
-  smsLockState           SMSLockState        @default(UNLOCKED)
-  smsLockReviewedByAdmin Boolean             @default(false)
+  OutOfOfficeReasons         OutOfOfficeReason[]
+  smsLockState               SMSLockState                 @default(UNLOCKED)
+  smsLockReviewedByAdmin     Boolean                      @default(false)
+  NotificationsSubscriptions NotificationsSubscriptions[]
 
   @@unique([email])
   @@unique([email, username])
@@ -346,6 +347,15 @@ model User {
   @@map(name: "users")
 }
 
+model NotificationsSubscriptions {
+  id           Int    @id @default(autoincrement())
+  userId       Int
+  user         User   @relation(fields: [userId], references: [id], onDelete: Cascade)
+  subscription String
+
+  @@index([userId, subscription])
+}
+
 // It holds Organization Profiles as well as User Profiles for users that have been added to an organization
 model Profile {
   id             Int         @id @default(autoincrement())