feat: Phone based bookings for everyone (calcom#21320)

Udit-takkar · hbjORbj · alishaz-polymath · web-flow · commit 866a0e259655 · 2025-06-20T12:42:32.000-04:00
* feat: Phone based bookings for everyone

* chore: save progress

* feat: add UI

* chore: UI

* chore: remove sms notification

* chore: remove none

* chore: remove ligs

* chore: remove log

* test: add unit tests

* test: add unit tests

* chore: cache _isSMSNotificationEnabled

* chore: cache _isSMSNotificationEnabled

* refactor: get value from fields

* fix: type err

* chore: also pass  user id

* fix: unit test for sms manager

---------

Co-authored-by: Benny Joo &lt;sldisek783@gmail.com&gt;
Co-authored-by: Syed Ali Shahbaz &lt;52925846+alishaz-polymath@users.noreply.github.com&gt;
Co-authored-by: Anik Dhabal Babu &lt;81948346+anikdhabal@users.noreply.github.com&gt;
Co-authored-by: Keith Williams &lt;keithwillcode@gmail.com&gt;
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
@@ -267,6 +267,8 @@
   "guests": "Guests",
   "guest": "Guest",
   "web_conferencing_details_to_follow": "Web conferencing details to follow in the confirmation email.",
+  "confirmation":"Confirmation",
+  "what_booker_should_provide": "What your booker should provide to receive confirmations",
   "404_the_user": "The username",
   "username": "Username",
   "is_still_available": "is still available.",
@@ -1710,6 +1712,8 @@
   "show_available_seats_count": "Show the number of available seats",
   "how_booking_questions_as_variables": "How to use booking questions as variables?",
   "format": "Format",
+  "questions": "Questions",
+  "all_info_your_booker_provide": "All the info your booker should provide before booking with you.",
   "uppercase_for_letters": "Use uppercase for all letters",
   "replace_whitespaces_underscores": "Replace whitespaces with underscores",
   "platform_members": "Platform members",
diff --git a/packages/features/bookings/lib/getBookingFields.ts b/packages/features/bookings/lib/getBookingFields.ts
@@ -160,7 +160,22 @@ export const ensureBookingInputsHaveSystemFields = ({
       type: "email",
       name: "email",
       required: !isEmailFieldOptional,
-      editable: isOrgTeamEvent ? "system-but-optional" : "system",
+      editable: "system-but-optional",
+      sources: [
+        {
+          label: "Default",
+          id: "default",
+          type: "default",
+        },
+      ],
+    },
+    {
+      defaultLabel: "phone_number",
+      type: "phone",
+      name: "attendeePhoneNumber",
+      required: false,
+      hidden: true,
+      editable: "system-but-optional",
       sources: [
         {
           label: "Default",
@@ -169,7 +184,6 @@ export const ensureBookingInputsHaveSystemFields = ({
         },
       ],
     },
-
     {
       defaultLabel: "location",
       type: "radioInput",
@@ -204,23 +218,6 @@ export const ensureBookingInputsHaveSystemFields = ({
       ],
     },
   ];
-  if (isOrgTeamEvent) {
-    systemBeforeFields.splice(2, 0, {
-      defaultLabel: "phone_number",
-      type: "phone",
-      name: "attendeePhoneNumber",
-      required: false,
-      hidden: true,
-      editable: "system-but-optional",
-      sources: [
-        {
-          label: "Default",
-          id: "default",
-          type: "default",
-        },
-      ],
-    });
-  }
 
   // These fields should be added after other user fields
   const systemAfterFields: typeof bookingFields = [
diff --git a/packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx b/packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx
@@ -576,27 +576,39 @@ export const EventAdvancedTab = ({
           isUserLoading={isUserLoading}
         />
       )}
-      <div className="border-subtle space-y-6 rounded-lg border p-6">
-        <FormBuilder
-          title={t("booking_questions_title")}
-          description={t("booking_questions_description")}
-          addFieldLabel={t("add_a_booking_question")}
-          formProp="bookingFields"
-          {...shouldLockDisableProps("bookingFields")}
-          dataStore={{
-            options: {
-              locations: {
-                // FormBuilder doesn't handle plural for non-english languages. So, use english(Location) only. This is similar to 'Workflow'
-                source: { label: "Location" },
-                value: getLocationsOptionsForSelect(formMethods.getValues("locations") ?? [], t),
+
+      <div className="border-subtle bg-muted rounded-lg border p-1">
+        <div className="p-5">
+          <div className="text-default text-sm font-semibold leading-none ltr:mr-1 rtl:ml-1">
+            {t("booking_questions_title")}
+          </div>
+          <p className="text-subtle mt-1 max-w-[280px] break-words text-sm sm:max-w-[500px]">
+            {t("booking_questions_description")}
+          </p>
+        </div>
+        <div className="border-subtle rounded-lg border bg-white p-5">
+          <FormBuilder
+            showPhoneAndEmailToggle
+            title={t("confirmation")}
+            description={t("what_booker_should_provide")}
+            addFieldLabel={t("add_a_booking_question")}
+            formProp="bookingFields"
+            {...shouldLockDisableProps("bookingFields")}
+            dataStore={{
+              options: {
+                locations: {
+                  // FormBuilder doesn't handle plural for non-english languages. So, use english(Location) only. This is similar to 'Workflow'
+                  source: { label: "Location" },
+                  value: getLocationsOptionsForSelect(formMethods.getValues("locations") ?? [], t),
+                },
               },
-            },
-          }}
-          shouldConsiderRequired={(field: BookingField) => {
-            // Location field has a default value at backend so API can send no location but we don't allow it in UI and thus we want to show it as required to user
-            return field.name === "location" ? true : field.required;
-          }}
-        />
+            }}
+            shouldConsiderRequired={(field: BookingField) => {
+              // Location field has a default value at backend so API can send no location but we don't allow it in UI and thus we want to show it as required to user
+              return field.name === "location" ? true : field.required;
+            }}
+          />
+        </div>
       </div>
       <RequiresConfirmationController
         eventType={eventType}
diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
@@ -15,6 +15,7 @@ import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
 import { DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog";
 import { Editor } from "@calcom/ui/components/editor";
+import { ToggleGroup } from "@calcom/ui/components/form";
 import {
   Switch,
   CheckboxField,
@@ -59,13 +60,15 @@ export const FormBuilder = function FormBuilder({
   LockedIcon,
   dataStore,
   shouldConsiderRequired,
+  showPhoneAndEmailToggle = false,
 }: {
   formProp: string;
   title: string;
   description: string;
   addFieldLabel: string;
   disabled: boolean;
   LockedIcon: false | JSX.Element;
+  showPhoneAndEmailToggle?: boolean;
   /**
    * A readonly dataStore that is used to lookup the options for the fields. It works in conjunction with the field.getOptionAt property which acts as the key in options
    */
@@ -129,7 +132,68 @@ export const FormBuilder = function FormBuilder({
           {title}
           {LockedIcon}
         </div>
-        <p className="text-subtle mt-0.5 max-w-[280px] break-words text-sm sm:max-w-[500px]">{description}</p>
+        <div className="flex items-start justify-between">
+          <p className="text-subtle mt-1 max-w-[280px] break-words text-sm sm:max-w-[500px]">{description}</p>
+          {showPhoneAndEmailToggle && (
+            <ToggleGroup
+              value={(() => {
+                const phoneField = fields.find((field) => field.name === "attendeePhoneNumber");
+                const emailField = fields.find((field) => field.name === "email");
+
+                if (phoneField && !phoneField.hidden && phoneField.required && !emailField?.required) {
+                  return "phone";
+                }
+
+                return "email";
+              })()}
+              options={[
+                {
+                  value: "email",
+                  label: "Email",
+                  iconLeft: <Icon name="mail" className="h-4 w-4" />,
+                },
+                {
+                  value: "phone",
+                  label: "Phone",
+                  iconLeft: <Icon name="phone" className="h-4 w-4" />,
+                },
+              ]}
+              onValueChange={(value) => {
+                const phoneFieldIndex = fields.findIndex((field) => field.name === "attendeePhoneNumber");
+                const emailFieldIndex = fields.findIndex((field) => field.name === "email");
+                if (value === "email") {
+                  update(emailFieldIndex, {
+                    ...fields[emailFieldIndex],
+                    hidden: false,
+                    required: true,
+                  });
+                  update(phoneFieldIndex, {
+                    ...fields[phoneFieldIndex],
+                    hidden: true,
+                    required: false,
+                  });
+                } else if (value === "phone") {
+                  update(emailFieldIndex, {
+                    ...fields[emailFieldIndex],
+                    hidden: true,
+                    required: false,
+                  });
+                  update(phoneFieldIndex, {
+                    ...fields[phoneFieldIndex],
+                    hidden: false,
+                    required: true,
+                  });
+                }
+              }}
+            />
+          )}
+        </div>
+        <p className="text-default mt-5 text-sm font-semibold leading-none ltr:mr-1 rtl:ml-1">
+          {t("questions")}
+        </p>
+        <p className="text-subtle mt-1 max-w-[280px] break-words text-sm sm:max-w-[500px]">
+          {t("all_info_your_booker_provide")}
+        </p>
         <ul ref={parent} className="border-subtle divide-subtle mt-4 divide-y rounded-md border">
           {fields.map((field, index) => {
             let options = field.options ?? null;
@@ -480,6 +544,7 @@ function FieldEditDialog({
   const variantsConfig = fieldForm.watch("variantsConfig");
 
   const fieldTypes = Object.values(fieldTypesConfigMap);
+  const fieldName = fieldForm.getValues("name");
 
   return (
     <Dialog open={dialog.isOpen} onOpenChange={onOpenChange} modal={false}>
diff --git a/packages/lib/server/repository/team.ts b/packages/lib/server/repository/team.ts
@@ -360,4 +360,18 @@ export class TeamRepository {
         inviteToken: inviteTokens.find((token) => token.identifier === `invite-link-for-teamId-${team.id}`),
       }));
   }
+
+  static async findTeamWithOrganizationSettings(teamId: number) {
+    return await prisma.team.findUnique({
+      where: { id: teamId },
+      select: {
+        parent: {
+          select: {
+            isOrganization: true,
+            organizationSettings: true,
+          },
+        },
+      },
+    });
+  }
 }
diff --git a/packages/sms/sms-manager.ts b/packages/sms/sms-manager.ts
@@ -4,8 +4,8 @@ import { sendSmsOrFallbackEmail } from "@calcom/features/ee/workflows/lib/remind
 import { checkSMSRateLimit } from "@calcom/lib/checkRateLimitAndThrowError";
 import { SENDER_ID } from "@calcom/lib/constants";
 import isSmsCalEmail from "@calcom/lib/isSmsCalEmail";
+import { TeamRepository } from "@calcom/lib/server/repository/team";
 import { TimeFormat } from "@calcom/lib/timeFormat";
-import prisma from "@calcom/prisma";
 import type { CalendarEvent, Person } from "@calcom/types/Calendar";
 
 const handleSendingSMS = async ({
@@ -14,36 +14,25 @@ const handleSendingSMS = async ({
   senderID,
   teamId,
   bookingUid,
+  organizerUserId,
 }: {
   reminderPhone: string;
   smsMessage: string;
   senderID: string;
-  teamId: number;
+  teamId?: number;
   bookingUid?: string | null;
+  organizerUserId?: number;
 }) => {
-  const team = await prisma.team.findUnique({
-    where: { id: teamId },
-    select: {
-      parent: {
-        select: {
-          isOrganization: true,
-          organizationSettings: {
-            select: {
-              disablePhoneOnlySMSNotifications: true,
-            },
-          },
-        },
-      },
-    },
-  });
-
-  if (!team?.parent?.isOrganization || team?.parent?.organizationSettings?.disablePhoneOnlySMSNotifications) {
-    return; // resolves implicitly (as undefined)
-  }
-
   try {
+    // If teamId is provided, we check the rate limit for the team.
+    // If organizerUserId is provided, we check the rate limit for the organizer.
+    // If neither is provided(Just in case), we check the rate limit for the reminderPhone.
     await checkSMSRateLimit({
-      identifier: `handleSendingSMS:team:${teamId}`,
+      identifier: teamId
+        ? `handleSendingSMS:team:${teamId}`
+        : organizerUserId
+        ? `handleSendingSMS:user:${organizerUserId}`
+        : `handleSendingSMS:user:${reminderPhone}`,
       rateLimitingType: "sms",
     });
 
@@ -52,7 +41,7 @@ const handleSendingSMS = async ({
         phoneNumber: reminderPhone,
         body: smsMessage,
         sender: senderID,
-        teamId,
+        ...(!!teamId ? { teamId } : { userId: organizerUserId }),
         bookingUid,
       },
     });
@@ -68,11 +57,32 @@ export default abstract class SMSManager {
   calEvent: CalendarEvent;
   isTeamEvent = false;
   teamId: number | undefined = undefined;
+  organizerUserId: number | undefined = undefined;
+  private _isSMSNotificationEnabled: boolean | null = null;
 
   constructor(calEvent: CalendarEvent) {
     this.calEvent = calEvent;
     this.teamId = this.calEvent?.team?.id;
     this.isTeamEvent = !!this.calEvent?.team?.id;
+    this.organizerUserId = this.calEvent?.organizer?.id;
+  }
+
+  private async isSMSNotificationEnabled(): Promise<boolean> {
+    if (this._isSMSNotificationEnabled !== null) {
+      return this._isSMSNotificationEnabled;
+    }
+
+    const teamId = this.teamId;
+
+    if (teamId) {
+      const team = await TeamRepository.findTeamWithOrganizationSettings(teamId);
+
+      this._isSMSNotificationEnabled = !team?.parent?.organizationSettings?.disablePhoneOnlySMSNotifications;
+      return this._isSMSNotificationEnabled;
+    }
+
+    this._isSMSNotificationEnabled = true;
+    return true;
   }
 
   getFormattedTime(
@@ -99,17 +109,25 @@ export default abstract class SMSManager {
     const attendeePhoneNumber = attendee.phoneNumber;
     const isPhoneOnlyBooking = attendeePhoneNumber && isSmsCalEmail(attendee.email);
 
-    if (!this.isTeamEvent || !teamId || !attendeePhoneNumber || !isPhoneOnlyBooking) return;
+    if (!attendeePhoneNumber || !isPhoneOnlyBooking || !(await this.isSMSNotificationEnabled())) return;
 
     const smsMessage = this.getMessage(attendee);
     const senderID = getSenderId(attendeePhoneNumber, SENDER_ID);
-    return handleSendingSMS({ reminderPhone: attendeePhoneNumber, smsMessage, senderID, teamId, bookingUid });
+    return handleSendingSMS({
+      reminderPhone: attendeePhoneNumber,
+      smsMessage,
+      senderID,
+      teamId,
+      bookingUid,
+      organizerUserId: this.organizerUserId,
+    });
   }
 
   async sendSMSToAttendees() {
-    if (!this.isTeamEvent) return;
     const smsToSend: Promise<unknown>[] = [];
 
+    if (!(await this.isSMSNotificationEnabled())) return;
+
     for (const attendee of this.calEvent.attendees) {
       smsToSend.push(this.sendSMSToAttendee(attendee, this.calEvent.uid));
     }
diff --git a/packages/sms/test/sms-manager.test.ts b/packages/sms/test/sms-manager.test.ts
