Self review comments addressed

apps/web/components/booking/pages/BookingPage.tsx

@@ -241,13 +241,11 @@ const BookingPage = ({
   const querySchema = getBookingResponsesQuerySchema({
     bookingFields: getBookingFieldsWithSystemFields(eventType),
   });
-  // string value for - text, textarea, select, radio,
+
-  // string value with , for checkbox and multiselect
-  // Object {value:"", optionValue:""} for radioInput
   const parsedQuery = querySchema.parse({
     ...router.query,
-    // guest because we are supporting legacy URL with guest in it
+    // `guest` because we need to support legacy URL with `guest` query param support
-    // guests because the `name` of the corresponding bookingField is guests
+    // `guests` because the `name` of the corresponding bookingField is `guests`
     guests: router.query.guests || router.query.guest,
   });
 
@@ -265,14 +263,10 @@ const BookingPage = ({
 
   const loggedInIsOwner = eventType?.users[0]?.id === session?.user?.id;
 
-  const getFormBuilderFieldValueFromQuery = (paramName: string) => {
-    return parsedQuery[paramName];
-  };
-
   // There should only exists one default userData variable for primaryAttendee.
   const defaultUserValues = {
-    email: rescheduleUid ? booking?.attendees[0].email : getFormBuilderFieldValueFromQuery("email"),
+    email: rescheduleUid ? booking?.attendees[0].email : parsedQuery["email"],
-    name: rescheduleUid ? booking?.attendees[0].name : getFormBuilderFieldValueFromQuery("name"),
+    name: rescheduleUid ? booking?.attendees[0].name : parsedQuery["name"],
   };
 
   const defaultValues = () => {
@@ -284,7 +278,7 @@ const BookingPage = ({
       const responses = eventType.bookingFields.reduce((responses, field) => {
         return {
           ...responses,
-          [field.name]: getFormBuilderFieldValueFromQuery(field.name),
+          [field.name]: parsedQuery[field.name],
         };
       }, {});
       defaults.responses = {
@@ -340,23 +334,6 @@ const BookingPage = ({
     defaultValues: defaultValues(),
     resolver: zodResolver(bookingFormSchema), // Since this isn't set to strict we only validate the fields in the schema
   });
-  useEffect(() => {
-    // window.bookingForm = bookingForm;
-  });
-  const selectedLocationType = useWatch({
-    control: bookingForm.control,
-    name: "locationType",
-    defaultValue: ((): EventLocationType["type"] | undefined => {
-      if (router.query.location) {
-        return router.query.location as EventLocationType["type"];
-      }
-      if (locations.length === 1) {
-        return locations[0]?.type;
-      }
-    })(),
-  });
-
-  const selectedLocation = getEventLocationType(selectedLocationType);
 
   // Calculate the booking date(s)
   let recurringStrings: string[] = [],

packages/features/bookings/lib/getBookingResponsesSchema.ts

@@ -44,6 +44,15 @@ function preprocess<T extends z.ZodType>({
           // TODO: What about multiselect and checkbox??
         } else if (field.type === "multiemail" || field.type === "checkbox" || field.type === "multiselect") {
           newResponses[field.name] = value instanceof Array ? value : [value];
+        } else if (field.type === "radioInput") {
+          let parsedValue = {
+            optionValue: "",
+            value: "",
+          };
+          try {
+            parsedValue = JSON.parse(value);
+          } catch (e) {}
+          newResponses[field.name] = parsedValue;
         } else {
           newResponses[field.name] = value;
         }

packages/features/form-builder/Components.tsx

@@ -298,11 +298,13 @@ export const Components: Record<BookingFieldType, Component> = {
     propsType: "objectiveWithInput",
     factory: function RadioInputWithLabel({ name, options, optionsInputs, value, setValue, readOnly }) {
       useEffect(() => {
+        if (!value) {
           setValue({
             value: options[0]?.value,
             optionValue: "",
           });
-      }, []);
+        }
+      }, [options, setValue, value]);
 
       return (
         <div>
@@ -330,7 +332,7 @@ export const Components: Record<BookingFieldType, Component> = {
                         //TODO: ManageBookings: What does this location class do?
                         className="location dark:bg-darkgray-300 dark:border-darkgray-300 h-4 w-4 border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
                         value={option.value}
-                        defaultChecked={i === 0}
+                        defaultChecked={value?.value === option.value}
                       />
                       <span className="text-sm ltr:ml-2 ltr:mr-2 rtl:ml-2 dark:text-white">
                         {option.label ?? ""}