Fix cancellation reason

apps/web/pages/booking/[uid].tsx

@@ -539,6 +539,7 @@ export default function Success(props: SuccessProps) {
                       // We show location in the "where" section
                       // We show Booker Name, Emails and guests in Who section
                       // We show notes in additional notes section
+                      // We show rescheduleReason at the top
                       if (
                         !field ||
                         (
@@ -548,6 +549,7 @@ export default function Success(props: SuccessProps) {
                             SystemField.Enum.email,
                             SystemField.Enum.guests,
                             SystemField.Enum.notes,
+                            SystemField.Enum.rescheduleReason,
                           ] as string[]
                         ).includes(field.name)
                       ) {

packages/features/bookings/lib/handleNewBooking.ts

@@ -349,6 +349,7 @@ function getBookingData({
       smsReminderNumber: responses.smsReminderNumber,
       notes: responses.notes || "",
       userFieldsResponses,
+      rescheduleReason: responses.rescheduleReason,
     };
   } else {
     // Check if required custom inputs exist
@@ -362,6 +363,7 @@ function getBookingData({
       location: reqBody.location || "",
       smsReminderNumber: reqBody.smsReminderNumber,
       notes: reqBody.notes,
+      rescheduleReason: reqBody.rescheduleReason,
     };
   }
 }
@@ -434,6 +436,7 @@ async function handler(
     location,
     notes: additionalNotes,
     smsReminderNumber,
+    rescheduleReason,
     ...bookingData
   } = getBookingData({
     req,
@@ -1041,14 +1044,13 @@ async function handler(
   }
 
   let videoCallUrl;
-
   if (originalRescheduledBooking?.uid) {
     // Use EventManager to conditionally use all needed integrations.
     const updateManager = await eventManager.reschedule(
       evt,
       originalRescheduledBooking.uid,
       booking?.id,
-      bookingData.rescheduleReason
+      rescheduleReason
     );
     // This gets overridden when updating the event - to check if notes have been hidden or not. We just reset this back
     // to the default description when we are sending the emails.
@@ -1084,7 +1086,7 @@ async function handler(
           ...evt,
           additionalInformation: metadata,
           additionalNotes, // Resets back to the additionalNote input and not the override value
-          cancellationReason: "$RCH$" + bookingData.rescheduleReason, // Removable code prefix to differentiate cancellation from rescheduling for email
+          cancellationReason: "$RCH$" + rescheduleReason, // Removable code prefix to differentiate cancellation from rescheduling for email
         });
       }
     }

packages/features/form-builder/Components.tsx

@@ -77,13 +77,14 @@ export const Components: Record<BookingFieldType, Component> = {
   },
   phone: {
     propsType: "text",
-    factory: ({ setValue, ...props }) => {
+    factory: ({ setValue, readOnly, ...props }) => {
       if (!props) {
         return <div />;
       }
 
       return (
         <PhoneInput
+          disabled={readOnly}
           onChange={(val: string) => {
             setValue(val);
           }}
@@ -117,7 +118,7 @@ export const Components: Record<BookingFieldType, Component> = {
   multiemail: {
     propsType: "textList",
     //TODO: Make it a ui component
-    factory: function MultiEmail({ value, label, setValue, ...props }) {
+    factory: function MultiEmail({ value, readOnly, label, setValue, ...props }) {
       const placeholder = props.placeholder;
       const { t } = useLocale();
       value = value || [];
@@ -136,6 +137,7 @@ export const Components: Record<BookingFieldType, Component> = {
                 {value.map((field, index) => (
                   <li key={index}>
                     <EmailField
+                      disabled={readOnly}
                       value={value[index]}
                       onChange={(e) => {
                         value[index] = e.target.value;
@@ -149,39 +151,43 @@ export const Components: Record<BookingFieldType, Component> = {
                       label={<></>}
                       required
                       addOnSuffix={
-                        <Tooltip content="Remove email">
-                          <button
-                            className="m-1 disabled:hover:cursor-not-allowed"
-                            type="button"
-                            onClick={() => {
-                              value.splice(index, 1);
-                              setValue(value);
-                            }}>
-                            <FiX className="text-gray-600" />
-                          </button>
-                        </Tooltip>
+                        !readOnly ? (
+                          <Tooltip content="Remove email">
+                            <button
+                              className="m-1 disabled:hover:cursor-not-allowed"
+                              type="button"
+                              onClick={() => {
+                                value.splice(index, 1);
+                                setValue(value);
+                              }}>
+                              <FiX className="text-gray-600" />
+                            </button>
+                          </Tooltip>
+                        ) : null
                       }
                     />
                   </li>
                 ))}
               </ul>
-              <Button
-                type="button"
-                color="minimal"
-                StartIcon={FiUserPlus}
-                className="my-2.5"
-                onClick={() => {
-                  value.push("");
-                  setValue(value);
-                }}>
-                {t("add_another")}
-              </Button>
+              {!readOnly && (
+                <Button
+                  type="button"
+                  color="minimal"
+                  StartIcon={FiUserPlus}
+                  className="my-2.5"
+                  onClick={() => {
+                    value.push("");
+                    setValue(value);
+                  }}>
+                  {t("add_another")}
+                </Button>
+              )}
             </div>
           ) : (
             <></>
           )}
 
-          {!value.length && (
+          {!value.length && !readOnly && (
             <Button
               color="minimal"
               variant="button"

packages/prisma/zod-utils.ts

@@ -72,6 +72,7 @@ export const bookingResponses = z
       })
       .optional(),
     smsReminderNumber: z.string().optional(),
+    rescheduleReason: z.string().optional(),
   })
   .nullable();
 
@@ -148,6 +149,7 @@ export const bookingCreateSchemaForApiOnly = z.object({
   location: z.string().optional(),
   guests: z.array(z.string()).optional(),
   notes: z.string().optional(),
+  rescheduleReason: z.string().optional(),
   customInputs: z.array(z.object({ label: z.string(), value: z.union([z.string(), z.boolean()]) })),
 });
 
@@ -190,7 +192,6 @@ export const extendedBookingCreateBody = bookingCreateBodySchema.merge(
     recurringCount: z.number().optional(),
     allRecurringDates: z.string().array().optional(),
     currentRecurringIndex: z.number().optional(),
-    rescheduleReason: z.string().optional(),
     smsReminderNumber: z.string().optional().nullable(),
     appsStatus: z
       .array(

packages/ui/form/PhoneInput.tsx

@@ -10,7 +10,7 @@ export type PhoneInputProps = Props<{
   name?: string;
 }>;
 
-function PhoneInput({ name, className, onChange, ...rest }: PhoneInputProps) {
+function PhoneInput({ name, className = "", onChange, ...rest }: PhoneInputProps) {
   return (
     <BasePhoneInput
       {...rest}