feat: cal.ai self serve

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx

@@ -41,6 +41,7 @@ const getTabs = (orgBranding: OrganizationBranding | null) => {
         { name: "appearance", href: "/settings/my-account/appearance" },
         { name: "out_of_office", href: "/settings/my-account/out-of-office" },
         { name: "push_notifications", href: "/settings/my-account/push-notifications" },
+        { name: "phone_numbers", href: "/settings/my-account/phone-numbers" },
         // TODO
         // { name: "referrals", href: "/settings/my-account/referrals" },
       ],

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/my-account/phone-numbers/page.tsx

@@ -0,0 +1,49 @@
+import { _generateMetadata } from "app/_utils";
+import { unstable_cache } from "next/cache";
+import { revalidatePath } from "next/cache";
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { PhoneNumberRepository } from "@calcom/lib/server/repository/phoneNumber";
+
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+
+import PhoneNumbersQueryView from "~/settings/my-account/phone-numbers-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("cal_ai_phone_numbers"),
+    (t) => t("cal_ai_phone_numbers_description"),
+    undefined,
+    undefined,
+    "/settings/my-account/phone-numbers"
+  );
+
+const getCachedPhoneNumbers = unstable_cache(
+  async (userId: number) => {
+    return await PhoneNumberRepository.findPhoneNumbersFromUserId({ userId });
+  },
+  undefined,
+  { revalidate: 3600, tags: ["viewer.phoneNumbers.list"] } // Cache for 1 hour
+);
+
+const Page = async () => {
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+
+  if (!session) {
+    redirect("/auth/login?callbackUrl=/settings/my-account/phone-numbers");
+  }
+
+  const userId = session.user.id;
+  const revalidatePage = async () => {
+    "use server";
+    revalidatePath("settings/my-account/phone-numbers");
+  };
+
+  const cachedNumbers = await getCachedPhoneNumbers(userId);
+
+  return <PhoneNumbersQueryView revalidatePage={revalidatePage} cachedNumbers={cachedNumbers} />;
+};
+
+export default Page;

apps/web/modules/settings/my-account/phone-numbers-view.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useState } from "react";
+
+import { Dialog } from "@calcom/features/components/controlled-dialog";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
+import { Button } from "@calcom/ui/components/button";
+import { DialogContent } from "@calcom/ui/components/dialog";
+import { DialogFooter } from "@calcom/ui/components/dialog";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
+import { Icon } from "@calcom/ui/components/icon";
+import { SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui/components/skeleton";
+import { showToast } from "@calcom/ui/components/toast";
+
+const SkeletonLoader = () => {
+  return (
+    <SkeletonContainer>
+      <div className="border-subtle space-y-6 rounded-b-xl border border-t-0 px-4 py-8 sm:px-6">
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonButton className="ml-auto h-8 w-20 rounded-md p-5" />
+      </div>
+    </SkeletonContainer>
+  );
+};
+
+function PhoneNumbersView({
+  numbers = [],
+  revalidatePage,
+}: {
+  numbers?: RouterOutputs["viewer"]["phoneNumbers"]["list"];
+  revalidatePage: () => Promise<void>;
+}) {
+  const { t } = useLocale();
+  const [isBuyDialogOpen, setIsBuyDialogOpen] = useState(false);
+  const utils = trpc.useContext();
+
+  const buyNumberMutation = trpc.viewer.phoneNumbers.buy.useMutation({
+    onSuccess: async () => {
+      showToast(t("phone_number_purchased_successfully"), "success");
+      await utils.viewer.phoneNumbers.list.invalidate();
+      await utils.viewer.me.invalidate();
+      await revalidatePage();
+      setIsBuyDialogOpen(false);
+    },
+    onError: (error) => {
+      console.log("error", error);
+      showToast(error.message, "error");
+    },
+  });
+
+  const BuyNumberButton = (props: React.ComponentProps<typeof Button>) => (
+    <Button {...props} color="secondary" StartIcon={Icon.Plus} onClick={() => setIsBuyDialogOpen(true)}>
+      {t("buy_number")}
+    </Button>
+  );
+
+  return (
+    <>
+      <SettingsHeader
+        title={t("cal_ai_phone_numbers")}
+        description={t("cal_ai_phone_numbers_description")}
+        CTA={<BuyNumberButton />}
+        borderInShellHeader={true}>
+        <div>
+          {numbers.length > 0 ? (
+            <div className="border-subtle rounded-b-lg border border-t-0">
+              {numbers.map((number, index) => (
+                <div
+                  key={number.id}
+                  className={`flex items-center justify-between p-6 ${
+                    numbers.length !== index + 1 ? "border-subtle border-b" : ""
+                  }`}>
+                  <div className="flex items-center">
+                    <Icon.Phone className="h-6 w-6 text-gray-400" />
+                    <span className="text-emphasis ml-4 text-sm font-medium">{number.phoneNumber}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <EmptyScreen
+              Icon={Icon.Phone}
+              headline={t("no_phone_numbers_yet")}
+              description={t("buy_your_first_phone_number")}
+              className="rounded-b-lg rounded-t-none border-t-0"
+              buttonRaw={<BuyNumberButton />}
+            />
+          )}
+        </div>
+      </SettingsHeader>
+      <Dialog open={isBuyDialogOpen} onOpenChange={setIsBuyDialogOpen}>
+        <DialogContent type="creation">
+          <div className="flex flex-col">
+            <div className="mb-4">
+              <h3 className="text-emphasis text-lg font-bold">{t("buy_new_number")}</h3>
+              <p className="text-default text-sm">{t("buy_number_cost_50_credits")}</p>
+            </div>
+            <DialogFooter showDivider className="relative">
+              <Button onClick={() => setIsBuyDialogOpen(false)} color="secondary">
+                {t("cancel")}
+              </Button>
+              <Button onClick={() => buyNumberMutation.mutate()} loading={buyNumberMutation.isPending}>
+                {t("buy_number_with_credits")}
+              </Button>
+            </DialogFooter>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+export default function PhoneNumbersQueryView({
+  cachedNumbers,
+  revalidatePage,
+}: {
+  cachedNumbers: RouterOutputs["viewer"]["phoneNumbers"]["list"];
+  revalidatePage: () => Promise<void>;
+}) {
+  const { t } = useLocale();
+  const { data: numbers, isPending } = trpc.viewer.phoneNumbers.list.useQuery(undefined, {
+    suspense: false,
+  });
+
+  if (isPending && !cachedNumbers) return <SkeletonLoader />;
+
+  return <PhoneNumbersView numbers={numbers || cachedNumbers} revalidatePage={revalidatePage} />;
+}

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

@@ -17,13 +17,24 @@
   "verify_email_subject": "{{appName}}: Verify your account",
   "verify_email_subject_verifying_email": "{{appName}}: Verify your email",
   "check_your_email": "Check your email",
+  "assigned_phone_number": "Assigned Phone Number",
+  "this_is_the_number_your_agent_will_use": "This is the number your agent will use",
+  "buy_and_assign_number": "Buy and Assign Number",
+  "configure_agent": "Configure Agent",
+  "configure_agent_subtitle": "Configure your agent to make outbound calls",
+  "save_and_test_call": "Save and Test Call",
   "old_email_address": "Old Email",
   "new_email_address": "New Email",
   "verify_email_page_body": "We've sent an email to {{email}}. It is important to verify your email address to guarantee the best email and calendar deliverability from {{appName}}.",
   "verify_email_banner_body": "Verify your email address to guarantee the best email and calendar deliverability",
   "verify_email_email_header": "Verify your email address",
   "verify_email_button": "Verify email",
   "cal_ai_assistant": "Cal AI Assistant",
+  "setup_ai_phone_assistant": "Setup AI Phone Assistant",
+  "provide_api_key_and_timezone_to_setup": "Provide a Cal.com API key and agent's timezone to setup your AI Phone Assistant",
+  "cal_api_key": "Cal.com API key",
+  "agent_timezone": "Agent's Timezone",
+  "agent_timezone_description": "The timezone of the agent. This is used to schedule events in the agent's timezone.",
   "send_cal_video_transcription_emails": "Send Cal Video Transcription Emails",
   "description_send_cal_video_transcription_emails": "Send emails with the transcription of the Cal Video after the meeting ends. (Requires a paid plan)",
   "verify_email_change_description": "You have recently requested to change the email address you use to log into your {{appName}} account. Please click the button below to confirm your new email address.",
@@ -1255,6 +1266,7 @@
   "make_setup_instructions_3": "Select Cal.com as your Trigger app. Also choose a Trigger event.",
   "make_setup_instructions_4": "Choose your account and then enter your Unique API Key.",
   "make_setup_instructions_5": "Test your Trigger.",
+  "choose_phone_number": "Choose a phone number",
   "make_setup_instructions_6": "You're set!",
   "install_zapier_app": "Please first install the Zapier App in the app store.",
   "install_make_app": "Please first install the Make App in the app store.",
@@ -1707,6 +1719,11 @@
   "booker_booking_limit_description": "Limit the number of active bookings a booker can make for this event type",
   "recurring_event_doesnt_support_booker_booking_limit": "Recurring events don't support booker booking limit",
   "add_limit": "Add Limit",
+  "phone_numbers": "Phone Numbers",
+  "cal_ai_phone_numbers": "Cal AI Phone Numbers",
+  "cal_ai_phone_numbers_description": "Manage your Cal AI Phone Numbers",
+  "ai_self_serve_tab_title": "AI Self Serve",
+  "ai_self_serve_tab_description": "Create and manage AI-powered event types with ease",
   "team_name_required": "Team name required",
   "show_attendees": "Share attendee information between guests",
   "show_available_seats_count": "Show the number of available seats",
@@ -3043,8 +3060,16 @@
   "desc": "Desc",
   "verify_email_change": "Verify email change",
   "buy_credits": "Buy Credits",
+  "buy_number": "Buy Number",
+  "no_phone_numbers_yet": "No phone numbers yet",
+  "buy_your_first_phone_number": "Buy your first phone number to get started",
   "credits": "Credits",
   "view_and_manage_credits": "View and manage credits",
+  "buy_new_number": "Buy New Number",
+  "buy_number_cost_50_credits": "Buying a phone number costs 50 credits. You can buy additional credits in the <0>Credits</0> section.",
+  "area_code_optional": "Area Code (Optional)",
+  "buy_number_with_credits": "Buy Number with Credits",
+  "phone_number_purchased_successfully": "Phone number purchased successfully",
   "view_and_manage_credits_description": "View and manage credits for sending SMS messages. One credit is worth 1¢ (USD). <0>Learn more</0>",
   "buy_additional_credits": "Buy additional credits ($0.01 per credit)",
   "overview": "Overview",

packages/features/ee/cal-ai-phone/handleCreateSelfServePhoneCall.ts

@@ -0,0 +1,45 @@
+import { createSelfServePhoneCall } from "@calcom/features/ee/cal-ai-phone/retellAIService";
+import { checkRateLimitAndThrowError } from "@calcom/lib/checkRateLimitAndThrowError";
+import { prisma } from "@calcom/prisma";
+
+import { TRPCError } from "@trpc/server";
+
+export const handleCreateSelfServePhoneCall = async ({
+  userId,
+  eventTypeId,
+  numberToCall,
+}: {
+  userId: number;
+  eventTypeId: number;
+  numberToCall: string;
+}) => {
+  await checkRateLimitAndThrowError({
+    rateLimitingType: "core",
+    identifier: `create-self-serve-phone-call:${userId}`,
+  });
+
+  const config = await prisma.aISelfServeConfiguration.findFirst({
+    where: {
+      eventTypeId: eventTypeId,
+      eventType: {
+        userId: userId,
+      },
+    },
+    include: {
+      yourPhoneNumber: true,
+    },
+  });
+
+  console.log("config", config);
+  if (!config || !config.yourPhoneNumber) {
+    throw new TRPCError({
+      code: "BAD_REQUEST",
+      message: "AI not configured for this event type or no phone number is assigned.",
+    });
+  }
+
+  const fromNumber = config.yourPhoneNumber.phoneNumber;
+  const call = await createSelfServePhoneCall(fromNumber, numberToCall);
+
+  return call;
+};