fix: phone-input

packages/features/bookings/Booker/components/BookEventForm/BookingFields.tsx

@@ -1,5 +1,3 @@
-import { useFormContext } from "react-hook-form";
-
 import type { LocationObject } from "@calcom/app-store/locations";
 import { getOrganizerInputLocationTypes } from "@calcom/app-store/locations";
 import { useBookerStore } from "@calcom/features/bookings/Booker/store";
@@ -25,21 +23,16 @@ export const BookingFields = ({
   isDynamicGroupBooking: boolean;
 }) => {
   const { t } = useLocale();
-  const { watch, setValue } = useFormContext();
-  const locationResponse = watch("responses.location");
   const currentView = rescheduleUid ? "reschedule" : "";
   const isInstantMeeting = useBookerStore((state) => state.isInstantMeeting);
 
   return (
-    // TODO: It might make sense to extract this logic into BookingFields config, that would allow to quickly configure system fields and their editability in fresh booking and reschedule booking view
-    // The logic here intends to make modifications to booking fields based on the way we want to specifically show Booking Form
     <div>
       {fields.map((field, index) => {
         // Don't Display Location field in case of instant meeting as only Cal Video is supported
         if (isInstantMeeting && field.name === "location") return null;
 
         // During reschedule by default all system fields are readOnly. Make them editable on case by case basis.
-        // Allowing a system field to be edited might require sending emails to attendees, so we need to be careful
         const rescheduleReadOnly =
           (field.editable === "system" || field.editable === "system-but-optional") &&
           !!rescheduleUid &&
@@ -48,10 +41,9 @@ export const BookingFields = ({
         const bookingReadOnly = field.editable === "user-readonly";
 
         let readOnly = bookingReadOnly || rescheduleReadOnly;
-
         let hidden = !!field.hidden;
-        const fieldViews = field.views;
 
+        const fieldViews = field.views;
         if (fieldViews && !fieldViews.find((view) => view.id === currentView)) {
           return null;
         }
@@ -60,29 +52,22 @@ export const BookingFields = ({
           if (bookingData === null) {
             return null;
           }
-          // rescheduleReason is a reschedule specific field and thus should be editable during reschedule
-          readOnly = false;
+          readOnly = false; // rescheduleReason is editable during reschedule
         }
 
-        if (field.name === SystemField.Enum.smsReminderNumber) {
-          // `smsReminderNumber` and location.optionValue when location.value===phone are the same data point. We should solve it in a better way in the Form Builder itself.
-          // I think we should have a way to connect 2 fields together and have them share the same value in Form Builder
-          if (locationResponse?.value === "phone") {
-            setValue(`responses.${SystemField.Enum.smsReminderNumber}`, locationResponse?.optionValue);
-            // Just don't render the field now, as the value is already connected to attendee phone location
-            return null;
-          }
-          // `smsReminderNumber` can be edited during reschedule even though it's a system field
-          readOnly = false;
+        // 🚨 Skip duplicate/legacy phone fields (we only want attendeePhoneNumber now)
+        if (
+          field.name === SystemField.Enum.smsReminderNumber ||
+          field.name === SystemField.Enum.aiAgentCallPhoneNumber
+        ) {
+          return null;
         }
 
         if (field.name === SystemField.Enum.guests) {
           readOnly = false;
-          // No matter what user configured for Guests field, we don't show it for dynamic group booking as that doesn't support guests
           hidden = isDynamicGroupBooking ? true : !!field.hidden;
         }
 
-        // We don't show `notes` field during reschedule but since it's a query param we better valid if rescheduleUid brought any bookingData
         if (field.name === SystemField.Enum.notes && bookingData !== null) {
           return null;
         }
@@ -98,7 +83,6 @@ export const BookingFields = ({
           }
           const optionsInputs = field.optionsInputs;
 
-          // TODO: Instead of `getLocationOptionsForSelect` options should be retrieved from dataStore[field.getOptionsAt]. It would make it agnostic of the `name` of the field.
           const options = getLocationOptionsForSelect(locations, t);
           options.forEach((option) => {
             const optionInput = optionsInputs[option.value as keyof typeof optionsInputs];

packages/features/bookings/lib/getBookingFields.ts

@@ -118,7 +118,6 @@ export const getBookingFieldsWithSystemFields = ({
 export const ensureBookingInputsHaveSystemFields = ({
   bookingFields,
   disableGuests,
-  isOrgTeamEvent,
   disableBookingTitle,
   additionalNotesRequired,
   customInputs,
@@ -146,17 +145,35 @@ export const ensureBookingInputsHaveSystemFields = ({
     [EventTypeCustomInputType.PHONE]: BookingFieldTypeEnum.phone,
   };
 
-  const smsNumberSources = [] as NonNullable<(typeof bookingFields)[number]["sources"]>;
+  const phoneNumberSources = [] as NonNullable<(typeof bookingFields)[number]["sources"]>;
+  let isPhoneNumberRequired = false;
+
   workflows.forEach((workflow) => {
     workflow.workflow.steps.forEach((step) => {
       if (step.action === "SMS_ATTENDEE" || step.action === "WHATSAPP_ATTENDEE") {
         const workflowId = workflow.workflow.id;
-        smsNumberSources.push(
+        phoneNumberSources.push(
           getSmsReminderNumberSource({
             workflowId,
             isSmsReminderNumberRequired: !!step.numberRequired,
           })
         );
+        if (step.numberRequired) {
+          isPhoneNumberRequired = true;
+        }
+      }
+      // Check for AI agent call workflows that require phone numbers
+      if (step.action === "CAL_AI_PHONE_CALL") {
+        const workflowId = workflow.workflow.id;
+        phoneNumberSources.push(
+          getAIAgentCallPhoneNumberSource({
+            workflowId,
+            isAIAgentCallPhoneNumberRequired: !!step.numberRequired,
+          })
+        );
+        if (step.numberRequired) {
+          isPhoneNumberRequired = true;
+        }
       }
     });
   });
@@ -336,21 +353,46 @@ export const ensureBookingInputsHaveSystemFields = ({
 
   bookingFields = missingSystemBeforeFields.concat(bookingFields);
 
-  // Backward Compatibility for SMS Reminder Number
-  // Note: We still need workflows in `getBookingFields` due to Backward Compatibility. If we do a one time entry for all event-types, we can remove workflows from `getBookingFields`
-  // Also, note that even if Workflows don't explicitly add smsReminderNumber field to bookingFields, it would be added as a side effect of this backward compatibility logic
-  if (
-    smsNumberSources.length &&
-    !bookingFields.find((f) => getFieldIdentifier(f.name) !== getFieldIdentifier(SMS_REMINDER_NUMBER_FIELD))
-  ) {
-    const indexForLocation = bookingFields.findIndex(
-      (f) => getFieldIdentifier(f.name) === getFieldIdentifier("location")
+  // Consolidated Phone Number Logic
+  // If any workflow requires a phone number, make the attendeePhoneNumber field visible and add sources
+  if (phoneNumberSources.length) {
+    const attendeePhoneNumberIndex = bookingFields.findIndex(
+      (f) => getFieldIdentifier(f.name) === getFieldIdentifier("attendeePhoneNumber")
     );
-    // Add the SMS Reminder Number field after `location` field always
-    bookingFields.splice(indexForLocation + 1, 0, {
-      ...getSmsReminderNumberField(),
-      sources: smsNumberSources,
-    });
+
+    if (attendeePhoneNumberIndex !== -1) {
+      // Update the existing attendeePhoneNumber field to be visible and add sources
+      bookingFields[attendeePhoneNumberIndex] = {
+        ...bookingFields[attendeePhoneNumberIndex],
+        hidden: false,
+        required: isPhoneNumberRequired,
+        sources: [...(bookingFields[attendeePhoneNumberIndex].sources || []), ...phoneNumberSources],
+      };
+    }
+  }
+
+  // Consolidation Logic: If there are existing separate phone fields, make attendeePhoneNumber visible
+  // This ensures users see only one phone input instead of multiple
+  const hasExistingSmsField = bookingFields.find(
+    (f) => getFieldIdentifier(f.name) === getFieldIdentifier(SMS_REMINDER_NUMBER_FIELD)
+  );
+  const hasExistingAiField = bookingFields.find(
+    (f) => getFieldIdentifier(f.name) === getFieldIdentifier(CAL_AI_AGENT_PHONE_NUMBER_FIELD)
+  );
+
+  if (hasExistingSmsField || hasExistingAiField) {
+    // Make sure attendeePhoneNumber is visible to consolidate the phone inputs
+    const attendeePhoneNumberIndex = bookingFields.findIndex(
+      (f) => getFieldIdentifier(f.name) === getFieldIdentifier("attendeePhoneNumber")
+    );
+
+    if (attendeePhoneNumberIndex !== -1) {
+      bookingFields[attendeePhoneNumberIndex] = {
+        ...bookingFields[attendeePhoneNumberIndex],
+        hidden: false,
+        required: bookingFields[attendeePhoneNumberIndex].required || isPhoneNumberRequired,
+      };
+    }
   }
 
   // Backward Compatibility: If we are migrating from old system, we need to map `customInputs` to `bookingFields`

packages/features/ee/workflows/lib/reminders/aiPhoneCallManager.ts

@@ -1,7 +1,6 @@
 import { v4 as uuidv4 } from "uuid";
 
 import dayjs from "@calcom/dayjs";
-import { CAL_AI_AGENT_PHONE_NUMBER_FIELD } from "@calcom/features/bookings/lib/SystemField";
 import { FeaturesRepository } from "@calcom/features/flags/features.repository";
 import tasker from "@calcom/features/tasker";
 import { checkRateLimitAndThrowError } from "@calcom/lib/checkRateLimitAndThrowError";
@@ -18,12 +17,6 @@ type timeUnitLowerCase = "day" | "hour" | "minute";
 function extractPhoneNumber(responses: BookingInfo["responses"]): string | undefined {
   if (!responses) return undefined;
 
-  // Priority 1: CAL_AI_AGENT_PHONE_NUMBER_FIELD first
-  const aiAgentPhoneResponse = responses[CAL_AI_AGENT_PHONE_NUMBER_FIELD];
-  if (aiAgentPhoneResponse && typeof aiAgentPhoneResponse === "object" && "value" in aiAgentPhoneResponse) {
-    return aiAgentPhoneResponse.value as string;
-  }
-
   // Priority 2: attendeePhoneNumber as fallback
   const attendeePhoneResponse = responses.attendeePhoneNumber;
   if (